diff --git a/src/components/Collection/Series/EpisodeDetails.tsx b/src/components/Collection/Series/EpisodeDetails.tsx
index def6f8451..eb231c516 100644
--- a/src/components/Collection/Series/EpisodeDetails.tsx
+++ b/src/components/Collection/Series/EpisodeDetails.tsx
@@ -45,7 +45,7 @@ function EpisodeDetails({ episode }: { episode: EpisodeType }) {
          Votes)
       </div>
 
-      <div className="line-clamp-3 flex">
+      <div className="line-clamp-3">
         {episode.AniDB?.Description !== '' ? episode.AniDB?.Description : 'Episode description not available.'}
       </div>
     </div>
diff --git a/src/components/Collection/SeriesInfo.tsx b/src/components/Collection/SeriesInfo.tsx
new file mode 100644
index 000000000..fbb538088
--- /dev/null
+++ b/src/components/Collection/SeriesInfo.tsx
@@ -0,0 +1,146 @@
+import React, { useMemo } from 'react';
+import { useParams } from 'react-router';
+import { Link } from 'react-router-dom';
+
+import { useGetSeriesQuery } from '@/core/rtkQuery/splitV3Api/seriesApi';
+import { useGetSeriesOverviewQuery } from '@/core/rtkQuery/splitV3Api/webuiApi';
+import { dayjs, formatThousand } from '@/core/util';
+
+import type { SeriesDetailsType } from '@/core/types/api/series';
+import type { WebuiSeriesDetailsType } from '@/core/types/api/webui';
+
+const SeriesInfo = () => {
+  const { seriesId } = useParams();
+
+  // Series Data;
+  const seriesOverviewData = useGetSeriesOverviewQuery({ SeriesID: seriesId! }, { skip: !seriesId });
+  const overview = useMemo(() => seriesOverviewData?.data || {} as WebuiSeriesDetailsType, [seriesOverviewData]);
+  const seriesData = useGetSeriesQuery({ seriesId: seriesId!, includeDataFrom: ['AniDB'] }, { skip: !seriesId });
+  const series = useMemo(() => seriesData?.data ?? {} as SeriesDetailsType, [seriesData]);
+
+  const startDate = useMemo(() => dayjs(series.AniDB?.AirDate), [series]);
+  const endDate = useMemo(() => (series.AniDB?.EndDate !== null ? dayjs(series.AniDB?.EndDate) : null), [series]);
+  const airDate = () => {
+    if (endDate) {
+      if (startDate.format('MMM DD, YYYY') === endDate.format('MMM DD, YYYY')) {
+        return startDate.format('MMM DD, YYYY');
+      }
+      return `${startDate.format('MMM DD, YYYY')} - ${endDate.format('MMM DD, YYYY')}`;
+    }
+    return `${startDate.format('MMM DD, YYYY')} - Ongoing`;
+  };
+
+  return (
+    <div className="flex w-full max-w-[31.25rem] flex-col gap-y-8">
+      <div className="flex w-full flex-row justify-around gap-y-4 rounded-md border border-panel-border bg-panel-background-transparent p-8">
+        <div className="flex flex-col items-center">
+          <div className="font-semibold ">File Count</div>
+          <div className="flex flex-row gap-x-1">
+            <span>EP:</span>
+            <span>{formatThousand(series.Sizes.Local.Episodes)}</span>
+            {series.Sizes.Local.Specials !== 0 && (
+              <>
+                <span>|</span>
+                <span>SP:</span>
+                <span>{formatThousand(series.Sizes.Local.Specials)}</span>
+              </>
+            )}
+          </div>
+        </div>
+        <div className="flex flex-col items-center">
+          <div className="font-semibold ">Watched</div>
+          <div className="flex flex-row gap-x-1">
+            <span>EP:</span>
+            <span>{formatThousand(series.Sizes.Watched.Episodes)}</span>
+            {(series.Sizes.Total.Specials !== 0 && series.Sizes.Local.Specials !== 0) && (
+              <>
+                <span>|</span>
+                <span>SP:</span>
+                <span>{formatThousand(series.Sizes.Watched.Specials)}</span>
+              </>
+            )}
+          </div>
+        </div>
+
+        {(series.Sizes.Total.Episodes - series.Sizes.Local.Episodes !== 0
+          || series.Sizes.Total.Specials - series.Sizes.Local.Specials !== 0) && (
+          <div className="flex flex-col items-center">
+            <div className="font-semibold ">Missing</div>
+            <div className="flex flex-row gap-x-1">
+              {series.Sizes.Total.Episodes - series.Sizes.Local.Episodes !== 0 && (
+                <>
+                  <span>EP:</span>
+                  <span>{formatThousand(series.Sizes.Total.Episodes - series.Sizes.Local.Episodes)}</span>
+                </>
+              )}
+              {series.Sizes.Total.Episodes - series.Sizes.Local.Episodes !== 0
+                && series.Sizes.Total.Specials - series.Sizes.Local.Specials !== 0
+                && <span>|</span>}
+              {series.Sizes.Total.Specials - series.Sizes.Local.Specials !== 0 && (
+                <>
+                  <span>SP:</span>
+                  <span>{formatThousand(series.Sizes.Total.Specials - series.Sizes.Local.Specials)}</span>
+                </>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+      <div className="flex w-full flex-col gap-y-3 rounded-md border border-panel-border bg-panel-background-transparent p-8">
+        <div className="flex justify-between capitalize">
+          <div className="font-semibold">Type</div>
+          {series.AniDB?.Type}
+        </div>
+        <div className="flex justify-between capitalize">
+          <div className="font-semibold">Source</div>
+          {overview.SourceMaterial}
+        </div>
+        <div className="flex justify-between capitalize">
+          <div className="font-semibold">Air Date</div>
+          <div>
+            {airDate()}
+          </div>
+        </div>
+        <div className="flex justify-between capitalize">
+          <div className="font-semibold">Status</div>
+          {/* TODO: Check if there are more status types */}
+          {(series.AniDB?.EndDate && dayjs(series.AniDB.EndDate).isAfter(dayjs())) ? 'Ongoing' : 'Finished'}
+        </div>
+        <div className="flex justify-between capitalize">
+          <div className="font-semibold">Episodes</div>
+          <div>
+            {series.Sizes.Total.Episodes}
+            &nbsp;Episodes
+            <span className="mx-1">|</span>
+            {series.Sizes.Total.Specials}
+            &nbsp;Specials
+          </div>
+        </div>
+        <div className="flex justify-between capitalize">
+          <div className="font-semibold">Length</div>
+          {/* TODO: Get episode length */}
+          <div>-- Minutes/Episode</div>
+        </div>
+        <div className="flex justify-between capitalize">
+          <div className="font-semibold">Season</div>
+          {overview?.FirstAirSeason
+            ? (
+              <Link
+                className="font-semibold text-panel-text-primary"
+                to={`/webui/collection/filter/${overview.FirstAirSeason.IDs.ID}`}
+              >
+                {overview.FirstAirSeason.Name}
+              </Link>
+            )
+            : '--'}
+        </div>
+        <div className="flex justify-between capitalize">
+          <div className="font-semibold">Studio</div>
+          <div>{overview?.Studios?.[0] ? overview?.Studios?.[0].Name : 'Studio Not Listed'}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SeriesInfo;
diff --git a/src/components/Collection/SeriesMetadata.tsx b/src/components/Collection/SeriesMetadata.tsx
new file mode 100644
index 000000000..204404428
--- /dev/null
+++ b/src/components/Collection/SeriesMetadata.tsx
@@ -0,0 +1,69 @@
+import React, { useMemo } from 'react';
+import { mdiCloseCircleOutline, mdiOpenInNew, mdiPencilCircleOutline, mdiPlusCircleOutline } from '@mdi/js';
+import { Icon } from '@mdi/react';
+
+import Button from '@/components/Input/Button';
+
+const MetadataLink = ({ id, site }: { site: string, id: number | number[] }) => {
+  const linkId = Array.isArray(id) ? id[0] : id;
+
+  const siteLink = useMemo(() => {
+    switch (site) {
+      case 'AniDB':
+        return `https://anidb.net/anime/${linkId}`;
+      case 'TMDB':
+        return `https://www.themoviedb.org/movie/${linkId}`;
+      case 'TvDB':
+        // TODO: Figure how to get trakt series link using ID
+        return '#';
+      case 'TraktTv':
+        // TODO: Figure how to get trakt series link using ID
+        return '#';
+      default:
+        return '#';
+    }
+  }, [linkId, site]);
+
+  return (
+    <div key={site} className="flex justify-between">
+      <div className="flex gap-x-4">
+        <div className={`metadata-link-icon ${site}`} />
+        {linkId
+          ? (
+            <a
+              href={siteLink}
+              className="flex gap-x-2 font-semibold text-panel-text-primary"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              {site}
+              <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
+            </a>
+          )
+          : 'Series Not Linked'}
+      </div>
+      {site !== 'AniDB' && (
+        <div className="flex gap-x-2">
+          {linkId
+            ? (
+              <>
+                <Button disabled>
+                  <Icon className="text-panel-icon-action" path={mdiPencilCircleOutline} size={1} />
+                </Button>
+                <Button disabled>
+                  <Icon className="text-panel-icon-danger" path={mdiCloseCircleOutline} size={1} />
+                </Button>
+              </>
+            )
+            : (
+              <Button disabled>
+                <Icon className="text-panel-icon-action" path={mdiPlusCircleOutline} size={1} />
+              </Button>
+            )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MetadataLink;
diff --git a/src/css/common.css b/src/css/common.css
index dcc861ed4..039a3c06c 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -204,7 +204,8 @@ input:autofill {
   background-position: center;
   background-size: cover;
 
-  &.anidb {
+  /* stylelint-disable-next-line selector-class-pattern */
+  &.AniDB {
     background-image: url('/images/community/24-AniDB.png');
   }
 
diff --git a/src/pages/collection/Series.tsx b/src/pages/collection/Series.tsx
index 06efd60e2..64f2ebdd0 100644
--- a/src/pages/collection/Series.tsx
+++ b/src/pages/collection/Series.tsx
@@ -3,17 +3,13 @@ import { Outlet, useParams } from 'react-router';
 import { Link, NavLink, useOutletContext } from 'react-router-dom';
 import {
   mdiAccountGroupOutline,
-  mdiAlertCircleOutline,
-  mdiCalendarMonthOutline,
   mdiChevronRight,
-  mdiEyeOutline,
   mdiFileDocumentMultipleOutline,
   mdiFilmstrip,
   mdiImageMultipleOutline,
   mdiInformationOutline,
   mdiPencilCircleOutline,
   mdiTagTextOutline,
-  mdiTelevision,
 } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import cx from 'classnames';
@@ -22,28 +18,19 @@ import { get, isArray } from 'lodash';
 import BackgroundImagePlaceholderDiv from '@/components/BackgroundImagePlaceholderDiv';
 import AnidbDescription from '@/components/Collection/AnidbDescription';
 import EditSeriesModal from '@/components/Collection/Series/EditSeriesModal';
+import SeriesInfo from '@/components/Collection/SeriesInfo';
 import { useGetGroupQuery } from '@/core/rtkQuery/splitV3Api/collectionApi';
 import {
   useGetSeriesImagesQuery,
   useGetSeriesQuery,
   useGetSeriesTagsQuery,
 } from '@/core/rtkQuery/splitV3Api/seriesApi';
-import { dayjs, formatThousand } from '@/core/util';
 import useMainPoster from '@/hooks/useMainPoster';
 
 import type { CollectionGroupType } from '@/core/types/api/collection';
 import type { SeriesDetailsType } from '@/core/types/api/series';
 import type { TagType } from '@/core/types/api/tags';
 
-const IconNotification = ({ text }) => (
-  <div className="flex items-center gap-x-2 font-semibold">
-    <Icon path={mdiInformationOutline} size={1} className="text-panel-text-important" />
-    <div className="flex flex-col">
-      {text}
-    </div>
-  </div>
-);
-
 const SeriesTab = ({ icon, text, to }) => (
   <NavLink
     to={to}
@@ -97,139 +84,56 @@ const Series = () => {
     setFanartUri(`/api/v3/Image/${randomImage.Source}/${randomImage.Type}/${randomImage.ID}`);
   }, [images, imagesData]);
 
-  const [airDate, endDate, isSeriesOngoing] = useMemo(() => {
-    const tempAirDate = dayjs(series.AniDB?.AirDate);
-    const tempEndDate = dayjs(series.AniDB?.EndDate);
-    return [tempAirDate, tempEndDate, series.AniDB?.EndDate ? tempEndDate.isAfter(dayjs()) : true];
-  }, [series]);
-
   if (!seriesId || !seriesData.isSuccess) return null;
 
   return (
     <>
       <div className="flex flex-col gap-y-8">
-        <div className="flex w-full gap-x-8 rounded-md border border-panel-border bg-panel-background-transparent p-8">
-          <div className="flex grow flex-col gap-y-2">
-            <div className="flex justify-between">
-              <div className="flex gap-x-2">
-                <Link className="font-semibold text-panel-text-primary" to="/webui/collection">Entire Collection</Link>
-                <Icon className="text-panel-icon" path={mdiChevronRight} size={1} />
-                {group.Size > 1 && (
-                  <>
-                    <Link
-                      className="font-semibold text-panel-text-primary"
-                      to={`/webui/collection/group/${series.IDs.ParentGroup}`}
-                    >
-                      {group.Name}
-                    </Link>
-                    <Icon className="text-panel-icon" path={mdiChevronRight} size={1} />
-                  </>
-                )}
-              </div>
-              <div className="flex gap-x-3">
-                {isSeriesOngoing && <IconNotification text="Series is Ongoing" />}
-                {/* TODO: Check whether new files are added */}
-                {/* <IconNotification text="New Files Added Recently" /> */}
-              </div>
-            </div>
-            <div className="flex max-w-[60rem] flex-col gap-y-4">
-              <div className="text-4xl font-semibold">{series.Name}</div>
-              <div className="text-xl font-semibold opacity-65">
-                {series.AniDB?.Titles.find(title => title.Type === 'Main')?.Name}
-              </div>
-              <div className="flex flex-nowrap gap-x-4 text-sm">
-                <div className="flex items-center gap-x-2">
-                  <Icon className="text-panel-icon" path={mdiTelevision} size={1} />
-                  <span>{series?.AniDB?.Type}</span>
-                </div>
-                <div className="flex items-center gap-x-2">
-                  <Icon className="text-panel-icon" path={mdiCalendarMonthOutline} size={1} />
-                  <span>
-                    {airDate.format('MMMM Do, YYYY')}
-                    {!airDate.isSame(endDate) && (
-                      <>
-                        &nbsp;-&nbsp;
-                        {endDate.toString() === 'Invalid Date' ? 'Current' : endDate.format('MMMM Do, YYYY')}
-                      </>
-                    )}
-                  </span>
+        <div className="flex flex-row gap-x-8">
+          <div className="flex w-full max-w-[82.813rem] gap-x-8 rounded-md border border-panel-border bg-panel-background-transparent p-8">
+            <BackgroundImagePlaceholderDiv
+              image={mainPoster}
+              className="h-[25.75rem] w-[18.188rem] rounded drop-shadow-md"
+            />
+            <div className="flex w-full max-w-[56.25rem] grow flex-col gap-y-2">
+              <div className="flex justify-between">
+                <div className="flex gap-x-2">
+                  <Link className="font-semibold text-panel-text-primary" to="/webui/collection">
+                    Entire Collection
+                  </Link>
+                  <Icon className="text-panel-icon" path={mdiChevronRight} size={1} />
+                  {group.Size > 1 && (
+                    <>
+                      <Link
+                        className="font-semibold text-panel-text-primary"
+                        to={`/webui/collection/group/${series.IDs.ParentGroup}`}
+                      >
+                        {group.Name}
+                      </Link>
+                      <Icon className="text-panel-icon" path={mdiChevronRight} size={1} />
+                    </>
+                  )}
                 </div>
-                <div className="flex items-center gap-x-2">
-                  <Icon path={mdiFileDocumentMultipleOutline} size={1} />
-                  <div className="flex gap-x-2 text-sm font-semibold ">
-                    <div className="flex gap-x-1">
-                      <span>EP:</span>
-                      {formatThousand(series.Sizes.Local.Episodes)}
-                      <span>/</span>
-                      {formatThousand(series.Sizes.Total.Episodes)}
-                    </div>
-                    {series.Sizes.Total.Specials !== 0 && (
-                      <>
-                        <span>|</span>
-                        <div className="flex gap-x-1">
-                          <span>SP:</span>
-                          {formatThousand(series.Sizes.Local.Specials)}
-                          <span>/</span>
-                          {formatThousand(series.Sizes.Total.Specials)}
-                        </div>
-                      </>
-                    )}
+              </div>
+              <div className="flex flex-col gap-y-8">
+                <div className="flex flex-col gap-y-4">
+                  <div className="text-4xl font-semibold">{series.Name}</div>
+                  <div className="text-xl font-semibold opacity-65">
+                    Original Title:&nbsp;
+                    {series.AniDB?.Titles.find(title => title.Type === 'Main')?.Name}
                   </div>
-                </div>
-                <div className="flex items-center gap-x-2">
-                  <Icon path={mdiEyeOutline} size={1} />
-                  <div className="flex gap-x-2 text-sm font-semibold">
-                    <div className="flex gap-x-1">
-                      <span>EP:</span>
-                      {formatThousand(series.Sizes.Watched.Episodes)}
-                      <span>/</span>
-                      {formatThousand(series.Sizes.Local.Episodes)}
-                    </div>
-                    {series.Sizes.Total.Specials !== 0 && (
-                      <>
-                        <span>|</span>
-                        <div className="flex gap-x-1">
-                          <span>SP:</span>
-                          {formatThousand(series.Sizes.Watched.Specials)}
-                          <span>/</span>
-                          {formatThousand(series.Sizes.Local.Specials)}
-                        </div>
-                      </>
-                    )}
+                  <div className="flex flex-wrap gap-2">
+                    {tags.slice(0, 13).map(tag => <SeriesTag key={tag.ID} text={tag.Name} type={tag.Source} />)}
+                    <NavLink to="tags">
+                      <SeriesTag text="More..." type="All" />
+                    </NavLink>
                   </div>
                 </div>
-                {(series.Sizes.Total.Episodes - series.Sizes.Local.Episodes !== 0
-                  || series.Sizes.Total.Specials - series.Sizes.Local.Specials !== 0) && (
-                  <div className="flex items-center gap-x-2">
-                    <Icon className="text-panel-text-warning" path={mdiAlertCircleOutline} size={1} />
-                    {series.Sizes.Total.Episodes - series.Sizes.Local.Episodes !== 0 && (
-                      <div className="flex gap-x-2 text-sm font-semibold">
-                        <div className="flex gap-x-1">
-                          <span>EP:</span>
-                          {formatThousand(series.Sizes.Total.Episodes - series.Sizes.Local.Episodes)}
-                        </div>
-                      </div>
-                    )}
-                    {series.Sizes.Total.Episodes - series.Sizes.Local.Episodes !== 0 && <span>|</span>}
-                    {series.Sizes.Total.Specials - series.Sizes.Local.Specials !== 0 && (
-                      <div className="flex gap-x-1">
-                        <span>SP:</span>
-                        {formatThousand(series.Sizes.Total.Specials - series.Sizes.Local.Specials)}
-                      </div>
-                    )}
-                  </div>
-                )}
-              </div>
-              <div className="flex flex-nowrap gap-x-4">
-                {tags.slice(0, 7).map(tag => <SeriesTag key={tag.ID} text={tag.Name} type={tag.Source} />)}
+                <AnidbDescription text={series?.AniDB?.Description ?? ''} />
               </div>
-              <AnidbDescription text={series?.AniDB?.Description ?? ''} />
             </div>
           </div>
-          <BackgroundImagePlaceholderDiv
-            image={mainPoster}
-            className="h-[23.875rem] w-[17.0625rem] rounded drop-shadow-md"
-          />
+          <SeriesInfo />
         </div>
         <div className="flex flex-nowrap gap-x-8 rounded-md border border-panel-border bg-panel-background-transparent p-8 font-semibold">
           <SeriesTab to="overview" icon={mdiInformationOutline} text="Overview" />
@@ -243,7 +147,7 @@ const Series = () => {
             onClick={() => setShowEditSeriesModal(true)}
           >
             <Icon className="text-panel-icon" path={mdiPencilCircleOutline} size={1} />
-            &nbsp;Edit
+            &nbsp;Edit Series
           </div>
         </div>
         <Outlet context={{ scrollRef }} />
diff --git a/src/pages/collection/series/SeriesOverview.tsx b/src/pages/collection/series/SeriesOverview.tsx
index 0d40ab926..bdc8231cd 100644
--- a/src/pages/collection/series/SeriesOverview.tsx
+++ b/src/pages/collection/series/SeriesOverview.tsx
@@ -1,20 +1,12 @@
 import React, { useMemo } from 'react';
 import { useParams } from 'react-router';
 import { Link } from 'react-router-dom';
-import {
-  mdiChevronRight,
-  mdiCloseCircleOutline,
-  mdiOpenInNew,
-  mdiPencilCircleOutline,
-  mdiPlusCircleOutline,
-} from '@mdi/js';
-import { Icon } from '@mdi/react';
 import cx from 'classnames';
 import { get, round, toNumber } from 'lodash';
 
 import BackgroundImagePlaceholderDiv from '@/components/BackgroundImagePlaceholderDiv';
 import EpisodeDetails from '@/components/Collection/Series/EpisodeDetails';
-import Button from '@/components/Input/Button';
+import SeriesMetadata from '@/components/Collection/SeriesMetadata';
 import ShokoPanel from '@/components/Panels/ShokoPanel';
 import {
   useGetAniDBRelatedQuery,
@@ -22,15 +14,10 @@ import {
   useGetSeriesQuery,
   useNextUpEpisodeQuery,
 } from '@/core/rtkQuery/splitV3Api/seriesApi';
-import { useGetSeriesOverviewQuery } from '@/core/rtkQuery/splitV3Api/webuiApi';
-import { dayjs } from '@/core/util';
 import useEpisodeThumbnail from '@/hooks/useEpisodeThumbnail';
 
 import type { EpisodeType } from '@/core/types/api/episode';
 import type { SeriesAniDBRelatedType, SeriesAniDBSimilarType } from '@/core/types/api/series';
-import type { WebuiSeriesDetailsType } from '@/core/types/api/webui';
-
-const links = ['TMDB', 'TvDB', 'MAL', 'AniList', 'TraktTv'];
 
 const NextUpEpisode = ({ nextUpEpisode }: { nextUpEpisode: EpisodeType }) => {
   const thumbnail = useEpisodeThumbnail(nextUpEpisode);
@@ -45,76 +32,11 @@ const NextUpEpisode = ({ nextUpEpisode }: { nextUpEpisode: EpisodeType }) => {
   );
 };
 
-const MetadataLink = ({ id, series, site }: { site: string, id: number | number[], series: string }) => {
-  const linkId = Array.isArray(id) ? id[0] : id;
-
-  const siteLink = useMemo(() => {
-    switch (site) {
-      case 'TMDB':
-        return `https://www.themoviedb.org/movie/${linkId}`;
-      case 'TvDB':
-        // TODO: Figure how to get tvdb series link using ID
-        return '#';
-      case 'MAL':
-        return `https://myanimelist.net/anime/${linkId}`;
-      case 'AniList':
-        return `https://anilist.co/anime/${linkId}`;
-      case 'TraktTv':
-        // TODO: Figure how to get trakt series link using ID
-        return '#';
-      default:
-        return '#';
-    }
-  }, [linkId, site]);
-
-  return (
-    <div key={site} className="flex justify-between">
-      <div className="flex gap-x-2">
-        <div className={`metadata-link-icon ${site}`} />
-        {linkId
-          ? (
-            <a
-              href={siteLink}
-              className="flex gap-x-2 font-semibold text-panel-text-primary"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              {/* TODO: Use name from metadata source instead of series name in Shoko */}
-              {`${series} (${linkId})`}
-              <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
-            </a>
-          )
-          : 'Series Not Linked'}
-      </div>
-      <div className="flex gap-x-2">
-        {linkId
-          ? (
-            <>
-              <Button disabled>
-                <Icon className="text-panel-icon-action" path={mdiPencilCircleOutline} size={1} />
-              </Button>
-              <Button disabled>
-                <Icon className="text-panel-icon-danger" path={mdiCloseCircleOutline} size={1} />
-              </Button>
-            </>
-          )
-          : (
-            <Button disabled>
-              <Icon className="text-panel-icon-action" path={mdiPlusCircleOutline} size={1} />
-            </Button>
-          )}
-      </div>
-    </div>
-  );
-};
-
 const SeriesOverview = () => {
   const { seriesId } = useParams();
 
   const seriesData = useGetSeriesQuery({ seriesId: seriesId!, includeDataFrom: ['AniDB'] }, { skip: !seriesId });
   const series = useMemo(() => seriesData?.data, [seriesData]);
-  const seriesOverviewData = useGetSeriesOverviewQuery({ SeriesID: seriesId! }, { skip: !seriesId });
-  const overview = seriesOverviewData?.data || {} as WebuiSeriesDetailsType;
   const nextUpEpisodeData = useNextUpEpisodeQuery({ seriesId: toNumber(seriesId) });
   const nextUpEpisode: EpisodeType = nextUpEpisodeData?.data ?? {} as EpisodeType;
   const relatedData = useGetAniDBRelatedQuery({ seriesId: seriesId! }, { skip: !seriesId });
@@ -122,132 +44,33 @@ const SeriesOverview = () => {
   const similarData = useGetAniDBSimilarQuery({ seriesId: seriesId! }, { skip: !seriesId });
   const similar: SeriesAniDBSimilarType[] = similarData?.data ?? [] as SeriesAniDBSimilarType[];
 
-  const jpOfficialSite = useMemo(() => series?.Links.find(link => link.Name === 'Official Site (JP)'), [series]);
-  const enOfficialSite = useMemo(() => series?.Links.find(link => link.Name === 'Official Site (EN)'), [series]);
+  // Links
+  const metadataLinks = ['AniDB', 'TMDB', 'TvDB', 'TraktTv'];
 
   if (!seriesId || !series) return null;
 
   return (
     <>
       <div className="flex gap-x-8">
-        <ShokoPanel title="Additional information" className="!h-auto min-w-fit" transparent contentClassName="gap-y-4">
-          <div className="flex flex-col gap-y-1 capitalize">
-            <div className="font-semibold">Source</div>
-            {overview.SourceMaterial}
-          </div>
-
-          <div className="flex flex-col gap-y-1">
-            <div className="font-semibold">Episodes</div>
-            <div>
-              {series.Sizes.Total.Episodes}
-              &nbsp;Episodes
-            </div>
-            <div>
-              {series.Sizes.Total.Specials}
-              &nbsp;Specials
-            </div>
-          </div>
-
-          <div className="flex flex-col gap-y-1">
-            <div className="font-semibold">Length</div>
-            {/* TODO: Get episode length */}
-            <div>-- Minutes/Episode</div>
-          </div>
-
-          <div className="flex flex-col gap-y-1">
-            <div className="font-semibold">Status</div>
-            {/* TODO: Check if there are more status types */}
-            {(series.AniDB?.EndDate && dayjs(series.AniDB.EndDate).isAfter(dayjs())) ? 'Ongoing' : 'Finished'}
-          </div>
-
-          <div className="flex flex-col gap-y-1">
-            <div className="font-semibold">Season</div>
-            {overview?.FirstAirSeason
-              ? (
-                <Link
-                  className="font-semibold text-panel-text-primary"
-                  to={`/webui/collection/filter/${overview.FirstAirSeason.IDs.ID}`}
-                >
-                  {overview.FirstAirSeason.Name}
-                </Link>
-              )
-              : '--'}
-          </div>
-
-          <div className="flex flex-col gap-y-1">
-            <div className="font-semibold">Studio</div>
-            <div>{overview?.Studios?.[0] ? overview?.Studios?.[0].Name : 'Studio Not Listed'}</div>
-          </div>
-
-          {/* <div className="flex flex-col gap-y-1"> */}
-          {/*   <div className="font-semibold">Producers</div> */}
-          {/*   {overview?.Producers?.map(item => <div key={item.Name}>{item.Name}</div>)} */}
-          {/* </div> */}
-
-          <div className="flex flex-col gap-y-1">
-            <div className="font-semibold">Links</div>
-            {/* TODO: Only showing links with Official JP and EN sites for now. To be changed */}
-            {jpOfficialSite && (
-              <div className="flex gap-x-2">
-                <a
-                  href={jpOfficialSite.URL}
-                  rel="noopener noreferrer"
-                  target="_blank"
-                  key={jpOfficialSite.Name}
-                  className="font-semibold text-panel-text-primary"
-                >
-                  {jpOfficialSite.Name}
-                </a>
-                <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
-              </div>
-            )}
-            {enOfficialSite && (
-              <div className="flex gap-x-2">
-                <a
-                  href={enOfficialSite.URL}
-                  rel="noopener noreferrer"
-                  target="_blank"
-                  key={enOfficialSite.Name}
-                  className="font-semibold text-panel-text-primary"
-                >
-                  {enOfficialSite.Name}
-                </a>
-                <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
-              </div>
-            )}
-          </div>
-        </ShokoPanel>
-
-        <div className="flex grow flex-col gap-y-8">
-          <ShokoPanel title="Episode on Deck" className="flex grow overflow-visible" transparent>
+        <div className="flex grow flex-row gap-x-8 w-full">
+          <ShokoPanel
+            title="Episode on Deck"
+            className="flex w-full max-w-[71.875rem] grow overflow-visible"
+            transparent
+          >
             {get(nextUpEpisode, 'Name', false)
               ? <NextUpEpisode nextUpEpisode={nextUpEpisode} />
               : <div className="flex grow items-center justify-center font-semibold">No Episode Data Available!</div>}
           </ShokoPanel>
           <ShokoPanel
-            title={
-              <div className="flex gap-x-2">
-                Metadata Sites
-                <Icon path={mdiChevronRight} size={1} />
-                <a
-                  href={`https://anidb.net/anime/${series.IDs.AniDB}`}
-                  className="flex items-center gap-x-2 text-panel-text-primary"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  <div className="metadata-link-icon anidb" />
-                  <div>{series.AniDB?.Title}</div>
-                  <Icon path={mdiOpenInNew} size={1} />
-                </a>
-              </div>
-            }
-            className="flex grow-0"
+            title="Metadata Sites"
+            className="flex w-full max-w-[42.188rem] grow-0"
             transparent
           >
-            <div className="grid grid-cols-2 grid-rows-3 gap-x-9 gap-y-4">
-              {links.map(site => (
+            <div className="flex flex-col gap-y-2">
+              {metadataLinks.map(site => (
                 <div className="rounded border border-panel-border bg-panel-background-alt px-4 py-3" key={site}>
-                  <MetadataLink site={site} id={series.IDs[site]} series={series.Name} />
+                  <SeriesMetadata site={site} id={series.IDs[site]} />
                 </div>
               ))}
             </div>