diff --git a/src/components/Collection/SeriesTopPanel.tsx b/src/components/Collection/SeriesTopPanel.tsx
index 2d3b77c05..cae70559c 100644
--- a/src/components/Collection/SeriesTopPanel.tsx
+++ b/src/components/Collection/SeriesTopPanel.tsx
@@ -9,6 +9,7 @@ import BackgroundImagePlaceholderDiv from '@/components/BackgroundImagePlacehold
 import AnidbDescription from '@/components/Collection/AnidbDescription';
 import SeriesInfo from '@/components/Collection/SeriesInfo';
 import SeriesUserStats from '@/components/Collection/SeriesUserStats';
+import ShokoPanel from '@/components/Panels/ShokoPanel';
 import { useSeriesImagesQuery, useSeriesTagsQuery } from '@/core/react-query/series/queries';
 import { useSettingsQuery } from '@/core/react-query/settings/queries';
 
@@ -52,6 +53,7 @@ const SeriesTopPanel = React.memo(({ series }: SeriesSidePanelProps) => {
     setPoster(allPosters.find(art => art.Preferred) ?? allPosters[0]);
   }, [imagesQuery.data, imagesQuery.isSuccess, showRandomPoster]);
 
+  // TODO: try to make this a grid for better responsiveness... but we'll have v3 soon so maybe not right now.
   return (
     <div className="flex w-full gap-x-6">
       <BackgroundImagePlaceholderDiv
@@ -65,41 +67,45 @@ const SeriesTopPanel = React.memo(({ series }: SeriesSidePanelProps) => {
         )}
       </BackgroundImagePlaceholderDiv>
       <div className="flex w-full max-w-[56.25rem] flex-col gap-y-6">
-        <div className="flex h-[16.25rem] flex-col gap-y-6 rounded-lg border border-panel-border bg-panel-background-transparent p-6 font-semibold lg:gap-x-6">
-          <div className="flex w-full text-xl font-semibold">
-            Series Description
-          </div>
-          <div className="overflow-y-auto text-base font-normal">
-            <AnidbDescription text={series.AniDB?.Description ?? ''} />
-          </div>
-        </div>
-        <div className="flex flex-col gap-y-6 rounded-lg border border-panel-border bg-panel-background-transparent p-6 font-semibold lg:gap-x-6">
-          <div className="flex w-full text-xl font-semibold">
-            Series Information
-          </div>
+        <ShokoPanel
+          title="Series Description"
+          className="!h-[16.5rem]"
+          contentClassName="contain-strict"
+          transparent
+        >
+          <AnidbDescription text={series.AniDB?.Description ?? ''} />
+        </ShokoPanel>
+
+        <ShokoPanel
+          title="Series Information"
+          className="!h-[14.5rem]"
+          transparent
+        >
           <div className="grid h-32 grid-cols-1 gap-x-[4.5rem] gap-y-2 overflow-y-auto pr-2 text-base font-normal 2xl:grid-cols-2 2xl:pr-0">
             <SeriesInfo series={series} />
           </div>
-        </div>
+        </ShokoPanel>
       </div>
       <div className="flex w-full flex-col gap-y-6">
-        <div className="flex h-[16.25rem] flex-col gap-y-6 rounded-lg border border-panel-border bg-panel-background-transparent p-6 font-semibold lg:gap-x-6">
-          <div className="flex w-full text-xl font-semibold">
-            Top 10 Tags
-          </div>
-          <div className="flex flex-wrap gap-3 overflow-y-auto">
-            {tags.slice(0, 10)
-              .map(tag => <SeriesTag key={tag.ID} text={tag.Name} type={tag.Source} />)}
-          </div>
-        </div>
-        <div className="flex flex-col gap-y-6 rounded-lg border border-panel-border bg-panel-background-transparent p-6 font-semibold lg:gap-x-6">
-          <div className="flex w-full text-xl font-semibold">
-            User Stats
-          </div>
-          <div className="flex flex-col flex-wrap gap-3">
-            <SeriesUserStats series={series} />
-          </div>
-        </div>
+        <ShokoPanel
+          title="Top 10 Tags"
+          className="!h-[16.5rem]"
+          contentClassName="!flex-row flex-wrap gap-3 contain-strict"
+          isFetching={tagsQuery.isFetching}
+          transparent
+        >
+          {tags.slice(0, 10)
+            .map(tag => <SeriesTag key={tag.ID} text={tag.Name} type={tag.Source} />)}
+        </ShokoPanel>
+
+        <ShokoPanel
+          title="User Stats"
+          className="!h-[14.5rem]"
+          contentClassName="flex-wrap gap-3"
+          transparent
+        >
+          <SeriesUserStats series={series} />
+        </ShokoPanel>
       </div>
     </div>
   );
diff --git a/src/pages/collection/series/SeriesEpisodes.tsx b/src/pages/collection/series/SeriesEpisodes.tsx
index 75e904b2b..505e37759 100644
--- a/src/pages/collection/series/SeriesEpisodes.tsx
+++ b/src/pages/collection/series/SeriesEpisodes.tsx
@@ -85,6 +85,7 @@ const SeriesEpisodes = () => {
     data,
     fetchNextPage,
     isFetchingNextPage,
+    isPending,
     isSuccess,
   } = seriesEpisodesQuery;
   const [episodes, episodeCount] = useFlattenListResult(data);
@@ -116,8 +117,9 @@ const SeriesEpisodes = () => {
   const rowVirtualizer = useVirtualizer({
     count: episodeCount,
     getScrollElement: () => scrollRef.current,
-    estimateSize: () => 345, // 332px is the minimum height of a loaded row
+    estimateSize: () => 370, // 370px is the minimum height of a loaded row
     overscan: 5,
+    gap: 16,
   });
   const virtualItems = rowVirtualizer.getVirtualItems();
 
@@ -199,44 +201,49 @@ const SeriesEpisodes = () => {
           </div>
         </div>
         <div className="grow">
-          <div className="relative w-full" style={{ height: rowVirtualizer.getTotalSize() }}>
-            <div
-              className="absolute left-0 top-0 flex w-full flex-col gap-y-4 pb-8"
-              style={{ transform: `translateY(${virtualItems[0]?.start ?? 0}px)` }}
-            >
-              {virtualItems.map((virtualItem) => {
-                const page = Math.ceil((virtualItem.index + 1) / pageSize);
-                const episode = episodes[virtualItem.index];
-
-                if (!episode && !isFetchingNextPage) fetchNextPageDebounced();
-
-                return (
-                  <div
-                    key={episode ? episode.IDs.ID : `loading-${virtualItem.key}`}
-                    className="flex flex-col rounded-lg border border-panel-border bg-panel-background-transparent"
-                    data-index={virtualItem.index}
-                  >
-                    {episode
-                      ? (
-                        <EpisodeSummary
-                          selected={selectedEpisodes.has(episode.IDs.ID)}
-                          onSelectionChange={() => onSelectionChange(episode.IDs.ID)}
-                          seriesId={toNumber(seriesId)}
-                          anidbSeriesId={anidbSeriesId}
-                          episode={episode}
-                          page={page}
-                        />
-                      )
-                      : (
-                        <div className="flex h-[20.75rem] items-center justify-center p-6 text-panel-text-primary">
-                          <Icon path={mdiLoading} spin size={3} />
-                        </div>
-                      )}
-                  </div>
-                );
-              })}
-            </div>
-          </div>
+          {isPending
+            ? (
+              <div className="flex h-full items-center justify-center text-panel-text-primary">
+                <Icon path={mdiLoading} spin size={4} />
+              </div>
+            )
+            : (
+              <div className="relative w-full" style={{ height: rowVirtualizer.getTotalSize() }}>
+                {virtualItems.map((virtualItem) => {
+                  const page = Math.ceil((virtualItem.index + 1) / pageSize);
+                  const episode = episodes[virtualItem.index];
+
+                  if (!episode && !isFetchingNextPage) fetchNextPageDebounced();
+
+                  return (
+                    <div
+                      key={episode ? episode.IDs.ID : `loading-${virtualItem.key}`}
+                      className="absolute left-0 top-0 flex w-full flex-col rounded-lg border border-panel-border bg-panel-background-transparent"
+                      data-index={virtualItem.index}
+                      style={{ transform: `translateY(${virtualItem.start ?? 0}px)` }}
+                      ref={rowVirtualizer.measureElement}
+                    >
+                      {episode
+                        ? (
+                          <EpisodeSummary
+                            selected={selectedEpisodes.has(episode.IDs.ID)}
+                            onSelectionChange={() => onSelectionChange(episode.IDs.ID)}
+                            seriesId={toNumber(seriesId)}
+                            anidbSeriesId={anidbSeriesId}
+                            episode={episode}
+                            page={page}
+                          />
+                        )
+                        : (
+                          <div className="flex h-[20.75rem] items-center justify-center p-6 text-panel-text-primary">
+                            <Icon path={mdiLoading} spin size={3} />
+                          </div>
+                        )}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
         </div>
       </div>
       <EpisodeWatchModal
diff --git a/src/pages/utilities/FileSearch.tsx b/src/pages/utilities/FileSearch.tsx
index b2106f611..4fd37f5cd 100644
--- a/src/pages/utilities/FileSearch.tsx
+++ b/src/pages/utilities/FileSearch.tsx
@@ -1,6 +1,5 @@
 import React, { useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { toast } from 'react-toastify';
 import {
   mdiChevronLeft,
   mdiChevronRight,
@@ -24,6 +23,7 @@ import Button from '@/components/Input/Button';
 import Input from '@/components/Input/Input';
 import ShokoPanel from '@/components/Panels/ShokoPanel';
 import ShokoIcon from '@/components/ShokoIcon';
+import toast from '@/components/Toast';
 import FilesSummary from '@/components/Utilities/FilesSummary';
 import ItemCount from '@/components/Utilities/ItemCount';
 import MenuButton from '@/components/Utilities/Unrecognized/MenuButton';