diff --git a/src/components/Collection/Filter/FilterSidebar.tsx b/src/components/Collection/Filter/FilterSidebar.tsx
index 3496f45a4..a4f166ddb 100644
--- a/src/components/Collection/Filter/FilterSidebar.tsx
+++ b/src/components/Collection/Filter/FilterSidebar.tsx
@@ -70,7 +70,7 @@ const FilterSidebar = () => {
   return (
     <ShokoPanel
       title="Filter"
-      className="ml-8 w-full"
+      className="sticky top-24 ml-6 !h-[calc(100vh-18rem)] w-full"
       contentClassName="gap-y-6"
       options={<Options showModal={showCriteriaModal(true)} />}
     >
diff --git a/src/components/Collection/Group/EditGroupModal.tsx b/src/components/Collection/Group/EditGroupModal.tsx
index 76e9064eb..d0fd87333 100644
--- a/src/components/Collection/Group/EditGroupModal.tsx
+++ b/src/components/Collection/Group/EditGroupModal.tsx
@@ -54,7 +54,7 @@ const EditGroupModal = () => {
                 className={cx(
                   activeTab === key
                     ? 'w-[12rem] text-center bg-panel-menu-item-background p-3 rounded-lg text-panel-menu-item-text cursor-pointer'
-                    : 'w-[12rem] text-center p-3 rounded-lg hover:bg-panel-menu-item-background-hover cursor-pointer',
+                    : 'w-[12rem] text-center p-3 rounded-lg hover:bg-panel-menu-item-background-hover cursor-pointer transition-colors',
                 )}
                 key={key}
                 onClick={() => setActiveTab(key)}
diff --git a/src/components/Collection/Group/EditGroupTabs/NameTab.tsx b/src/components/Collection/Group/EditGroupTabs/NameTab.tsx
index b18218eee..d5f55fa6c 100644
--- a/src/components/Collection/Group/EditGroupTabs/NameTab.tsx
+++ b/src/components/Collection/Group/EditGroupTabs/NameTab.tsx
@@ -121,7 +121,7 @@ const NameTab = React.memo(({ groupId }: Props) => {
           <div className="shoko-scrollbar flex grow flex-col gap-y-2 overflow-y-auto bg-panel-input pr-4">
             {seriesData?.map(series => (
               <div
-                className="flex justify-between last:border-none hover:text-panel-text-primary"
+                className="flex justify-between transition-colors last:border-none hover:text-panel-text-primary"
                 key={series.IDs.ID}
                 onClick={() => setGroupName(series.Name)}
               >
diff --git a/src/components/Collection/ListViewItem.tsx b/src/components/Collection/ListViewItem.tsx
index c95cf0a9c..cc262e691 100644
--- a/src/components/Collection/ListViewItem.tsx
+++ b/src/components/Collection/ListViewItem.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { useDispatch } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import {
   mdiAlertCircleOutline,
   mdiCalendarMonthOutline,
@@ -17,11 +17,14 @@ import { reduce } from 'lodash';
 
 import BackgroundImagePlaceholderDiv from '@/components/BackgroundImagePlaceholderDiv';
 import { listItemSize } from '@/components/Collection/constants';
+import Button from '@/components/Input/Button';
 import { useSeriesTagsQuery } from '@/core/react-query/series/queries';
 import { useSettingsQuery } from '@/core/react-query/settings/queries';
+import { resetFilter, setFilterTag } from '@/core/slices/collection';
 import { setGroupId } from '@/core/slices/modals/editGroup';
 import { setSeriesId } from '@/core/slices/modals/editSeries';
 import { dayjs, formatThousand } from '@/core/util';
+import { addFilterCriteriaToStore } from '@/core/utilities/filter';
 import useEventCallback from '@/hooks/useEventCallback';
 import useMainPoster from '@/hooks/useMainPoster';
 
@@ -45,17 +48,29 @@ const renderFileSources = (sources: SeriesSizesFileSourcesType): string => {
   return output.join(' | ');
 };
 
-const SeriesTag = ({ text, type }: { text: string, type: 'AniDB' | 'User' }) => (
-  <div
-    className={cx(
-      'text-xs font-semibold flex gap-x-2 items-center border-2 border-panel-tags rounded-lg p-2 whitespace-nowrap capitalize',
-      type === 'User' ? 'text-panel-text-important' : 'text-panel-text-primary',
-    )}
-  >
-    <Icon path={mdiTagTextOutline} size="1rem" />
-    <span className="text-panel-text">{text}</span>
-  </div>
-);
+const SeriesTag = React.memo(({ text, type }: { text: string, type: 'User' | 'AniDB' }) => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const handleClick = useEventCallback(() => {
+    dispatch(resetFilter());
+    dispatch(setFilterTag({ HasTag: [{ Name: text, isExcluded: false }] }));
+    addFilterCriteriaToStore('HasTag').catch(console.error);
+    navigate('/webui/collection');
+  });
+
+  return (
+    <Button
+      className={cx(
+        'pointer-events-auto text-xs font-semibold flex gap-x-2 items-center border-2 border-panel-tags rounded-lg p-2 whitespace-nowrap capitalize cursor-pointer',
+        type === 'User' ? 'text-panel-text-important' : 'text-panel-text-primary',
+      )}
+      onClick={handleClick}
+    >
+      <Icon path={mdiTagTextOutline} size="1rem" />
+      <span className="text-panel-text transition-colors hover:text-panel-text-primary">{text}</span>
+    </Button>
+  );
+});
 
 type Props = {
   item: CollectionGroupType | SeriesType;
@@ -152,21 +167,18 @@ const ListViewItem = ({ groupExtras, isSeries, isSidebarOpen, item }: Props) =>
         <Link to={viewRouteLink()}>
           <BackgroundImagePlaceholderDiv
             image={poster}
-            className="group h-[12.5625rem] w-[8.625rem] shrink-0 rounded-lg drop-shadow-md"
+            className="group h-[13.438rem] w-[9.25rem] shrink-0 rounded-lg drop-shadow-md"
             hidePlaceholderOnHover
             zoomOnHover
           >
             <div className="pointer-events-none z-10 flex h-full bg-panel-background-poster-overlay p-3 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
-              <div
+              <Button
                 className="pointer-events-auto h-fit"
                 onClick={(isSeries || item.Size === 1) ? editSeriesModalCallback : editGroupModalCallback}
+                tooltip="Edit Series"
               >
-                <Icon
-                  path={mdiPencilCircleOutline}
-                  size="2rem"
-                  className="text-panel-icon"
-                />
-              </div>
+                <Icon path={mdiPencilCircleOutline} size="2rem" />
+              </Button>
             </div>
             {showGroupIndicator && groupCount > 1 && (
               <div className="absolute bottom-0 left-0 flex w-full justify-center rounded-bl-md bg-panel-background-overlay py-1.5 text-sm font-semibold opacity-100 transition-opacity group-hover:opacity-0">
@@ -177,7 +189,15 @@ const ListViewItem = ({ groupExtras, isSeries, isSidebarOpen, item }: Props) =>
           </BackgroundImagePlaceholderDiv>
         </Link>
         <div className="flex flex-col gap-y-3">
-          <div className="font-semibold" title={item.Name}>{item.Name}</div>
+          <div className="font-semibold">
+            <Link
+              to={viewRouteLink()}
+              className="transition-colors hover:text-panel-text-primary"
+              title={item.Name}
+            >
+              {item.Name}
+            </Link>
+          </div>
 
           <div className="flex flex-col gap-y-3">
             <div className="flex flex-nowrap items-center gap-x-3">
diff --git a/src/components/Collection/PosterViewItem.tsx b/src/components/Collection/PosterViewItem.tsx
index 756ec53d4..49ad227fa 100644
--- a/src/components/Collection/PosterViewItem.tsx
+++ b/src/components/Collection/PosterViewItem.tsx
@@ -6,6 +6,7 @@ import { Icon } from '@mdi/react';
 import { reduce } from 'lodash';
 
 import BackgroundImagePlaceholderDiv from '@/components/BackgroundImagePlaceholderDiv';
+import Button from '@/components/Input/Button';
 import { useSettingsQuery } from '@/core/react-query/settings/queries';
 import { setGroupId } from '@/core/slices/modals/editGroup';
 import { setSeriesId } from '@/core/slices/modals/editSeries';
@@ -65,14 +66,14 @@ const PosterViewItem = ({ isSeries = false, item }: Props) => {
   });
 
   return (
-    <Link to={viewRouteLink()}>
-      <div
-        className="group flex shrink-0 flex-col content-center gap-y-3"
-        style={{ width: '12.938rem' }}
-      >
+    <div
+      className="flex shrink-0 flex-col content-center gap-y-3"
+      style={{ width: '12.938rem' }}
+    >
+      <Link to={viewRouteLink()}>
         <BackgroundImagePlaceholderDiv
           image={mainPoster}
-          className="h-[19rem] rounded-lg border border-panel-border drop-shadow-md"
+          className="group h-[19rem] rounded-lg border border-panel-border drop-shadow-md"
           hidePlaceholderOnHover
           zoomOnHover
         >
@@ -84,16 +85,13 @@ const PosterViewItem = ({ isSeries = false, item }: Props) => {
             </div>
           )}
           <div className="pointer-events-none z-10 flex h-full bg-panel-background-poster-overlay p-3 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
-            <div
+            <Button
               className="pointer-events-auto h-fit"
               onClick={(isSeries || item.Size === 1) ? editSeriesModalCallback : editGroupModalCallback}
+              tooltip="Edit Series"
             >
-              <Icon
-                path={mdiPencilCircleOutline}
-                size="2rem"
-                className="text-panel-icon"
-              />
-            </div>
+              <Icon path={mdiPencilCircleOutline} size="2rem" />
+            </Button>
           </div>
           {showGroupIndicator && !isSeries && groupCount > 1 && (
             <div className="absolute bottom-4 left-3 flex w-[90%] justify-center rounded-lg bg-panel-background-overlay py-2 text-sm font-semibold text-panel-text opacity-100 transition-opacity group-hover:opacity-0">
@@ -102,20 +100,28 @@ const PosterViewItem = ({ isSeries = false, item }: Props) => {
             </div>
           )}
         </BackgroundImagePlaceholderDiv>
-        <div>
-          <p className="line-clamp-1 text-ellipsis text-center text-sm font-semibold" title={item.Name}>{item.Name}</p>
-          {showEpisodeCount && (
-            <p
-              className="line-clamp-1 text-ellipsis text-center text-sm font-semibold opacity-65"
-              title={episodeCount.toString()}
-            >
-              {episodeCount}
-              &nbsp;Episodes
-            </p>
-          )}
-        </div>
+      </Link>
+      <div>
+        <p className="line-clamp-1 text-ellipsis text-center text-sm font-semibold">
+          <Link
+            to={viewRouteLink()}
+            className="transition-colors hover:text-panel-text-primary"
+            title={item.Name}
+          >
+            {item.Name}
+          </Link>
+        </p>
+        {showEpisodeCount && (
+          <p
+            className="line-clamp-1 text-ellipsis text-center text-sm font-semibold opacity-65"
+            title={episodeCount.toString()}
+          >
+            {episodeCount}
+            &nbsp;Episodes
+          </p>
+        )}
       </div>
-    </Link>
+    </div>
   );
 };
 
diff --git a/src/components/Collection/Series/EditSeriesModal.tsx b/src/components/Collection/Series/EditSeriesModal.tsx
index 850235af1..c88db98dc 100644
--- a/src/components/Collection/Series/EditSeriesModal.tsx
+++ b/src/components/Collection/Series/EditSeriesModal.tsx
@@ -69,7 +69,7 @@ const EditSeriesModal = () => {
                 className={cx(
                   activeTab === key
                     ? 'w-[12rem] text-center bg-panel-menu-item-background p-3 rounded-lg text-panel-menu-item-text cursor-pointer'
-                    : 'w-[12rem] text-center p-3 rounded-lg hover:bg-panel-menu-item-background-hover cursor-pointer',
+                    : 'w-[12rem] text-center p-3 rounded-lg hover:bg-panel-menu-item-background-hover cursor-pointer transition-colors',
                 )}
                 key={key}
                 onClick={() => setActiveTab(key)}
diff --git a/src/components/Collection/Series/EditSeriesTabs/Action.tsx b/src/components/Collection/Series/EditSeriesTabs/Action.tsx
index f7ea48827..94405afd5 100644
--- a/src/components/Collection/Series/EditSeriesTabs/Action.tsx
+++ b/src/components/Collection/Series/EditSeriesTabs/Action.tsx
@@ -6,7 +6,7 @@ const Action = (
 ) => (
   <div
     className={cx(
-      'flex flex-row justify-between gap-y-2 cursor-pointer hover:text-panel-text-primary',
+      'flex flex-row justify-between gap-y-2 cursor-pointer hover:text-panel-text-primary transition-colors',
       scroll ? 'mr-4' : '',
     )}
     onClick={onClick}
diff --git a/src/components/Collection/Series/EditSeriesTabs/NameTab.tsx b/src/components/Collection/Series/EditSeriesTabs/NameTab.tsx
index 9a1a14820..c47e2aefe 100644
--- a/src/components/Collection/Series/EditSeriesTabs/NameTab.tsx
+++ b/src/components/Collection/Series/EditSeriesTabs/NameTab.tsx
@@ -96,7 +96,7 @@ const NameTab = ({ seriesId }: Props) => {
           <div className="shoko-scrollbar flex grow flex-col gap-y-2 overflow-y-auto bg-panel-input pr-4">
             {seriesData?.AniDB?.Titles.map(title => (
               <div
-                className="flex justify-between last:border-none hover:text-panel-text-primary"
+                className="flex justify-between transition-colors last:border-none hover:text-panel-text-primary"
                 key={title.Name + title.Language}
                 onClick={() => setName(title.Name)}
               >
diff --git a/src/components/Collection/SeriesTopPanel.tsx b/src/components/Collection/SeriesTopPanel.tsx
index e98b37d55..52d4eff22 100644
--- a/src/components/Collection/SeriesTopPanel.tsx
+++ b/src/components/Collection/SeriesTopPanel.tsx
@@ -11,6 +11,7 @@ import BackgroundImagePlaceholderDiv from '@/components/BackgroundImagePlacehold
 import CleanDescription from '@/components/Collection/CleanDescription';
 import SeriesInfo from '@/components/Collection/SeriesInfo';
 import SeriesUserStats from '@/components/Collection/SeriesUserStats';
+import Button from '@/components/Input/Button';
 import ShokoPanel from '@/components/Panels/ShokoPanel';
 import { useSeriesImagesQuery, useSeriesTagsQuery } from '@/core/react-query/series/queries';
 import { useSettingsQuery } from '@/core/react-query/settings/queries';
@@ -33,7 +34,7 @@ const SeriesTag = React.memo(({ text, type }: { text: string, type: 'User' | 'An
   });
 
   return (
-    <div
+    <Button
       className={cx(
         'text-sm font-semibold flex gap-x-3 items-center border-2 border-panel-tags rounded-lg py-2 px-3 whitespace-nowrap capitalize h-fit cursor-pointer',
         type === 'User' ? 'text-panel-icon-important' : 'text-panel-icon-action',
@@ -41,8 +42,8 @@ const SeriesTag = React.memo(({ text, type }: { text: string, type: 'User' | 'An
       onClick={handleClick}
     >
       <Icon path={mdiTagTextOutline} size="1.25rem" />
-      <span className="text-panel-text">{text}</span>
-    </div>
+      <span className="text-panel-text transition-colors hover:text-panel-text-primary">{text}</span>
+    </Button>
   );
 });
 
diff --git a/src/components/Collection/TimelineSidebar.tsx b/src/components/Collection/TimelineSidebar.tsx
index 8a28cf168..e98cde0b3 100644
--- a/src/components/Collection/TimelineSidebar.tsx
+++ b/src/components/Collection/TimelineSidebar.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { mdiLoading } from '@mdi/js';
-import { Icon } from '@mdi/react';
 
 import BackgroundImagePlaceholderDiv from '@/components/BackgroundImagePlaceholderDiv';
+import ShokoPanel from '@/components/Panels/ShokoPanel';
 import { SeriesTypeEnum } from '@/core/types/api/series';
 import { dayjs } from '@/core/util';
 import useMainPoster from '@/hooks/useMainPoster';
@@ -17,42 +16,44 @@ const TimelineItem = ({ series }: { series: SeriesType }) => {
     : series.AniDB?.Type;
 
   return (
-    <Link to={`/webui/collection/series/${series.IDs.ID}`}>
-      <div className="flex gap-x-3" key={series.IDs.ID}>
+    <div className="flex gap-x-3" key={series.IDs.ID}>
+      <Link to={`/webui/collection/series/${series.IDs.ID}`}>
         <BackgroundImagePlaceholderDiv
           image={mainPoster}
-          className="h-24 w-[4.4375rem] shrink-0 rounded-lg border border-panel-border drop-shadow-md"
+          className="group h-24 w-[4.4375rem] shrink-0 rounded-lg border border-panel-border drop-shadow-md"
+          overlayOnHover
+          zoomOnHover
         />
-        <div className="flex flex-col font-semibold">
-          <div className="flex gap-y-2">
-            {dayjs(series.AniDB?.AirDate).year()}
-            &nbsp;|&nbsp;
-            <div className="text-panel-text-important">{seriesType}</div>
-          </div>
-          <div className="line-clamp-2">{series.Name}</div>
+      </Link>
+      <div className="flex flex-col font-semibold">
+        <div className="flex gap-y-2">
+          {dayjs(series.AniDB?.AirDate).year()}
+          &nbsp;|&nbsp;
+          <div className="text-panel-text-important">{seriesType}</div>
+        </div>
+        <div className="line-clamp-2">
+          <Link
+            to={`/webui/collection/series/${series.IDs.ID}`}
+            className="transition-colors hover:text-panel-text-primary"
+            title={series.Name}
+          >
+            {series.Name}
+          </Link>
         </div>
       </div>
-    </Link>
+    </div>
   );
 };
 
 const TimelineSidebar = ({ isFetching, series }: { isFetching: boolean, series: SeriesType[] }) => (
-  <div className="flex min-h-full overflow-hidden transition-all">
-    <div className="ml-8 flex w-[26.125rem] grow flex-col gap-y-6 rounded-lg border border-panel-border bg-panel-background p-6">
-      <div className="text-xl font-semibold">Timeline</div>
-      {isFetching
-        ? (
-          <div className="flex grow items-center justify-center text-panel-text-primary">
-            <Icon path={mdiLoading} size={3} spin />
-          </div>
-        )
-        : (
-          <div className="flex flex-col gap-y-3">
-            {series.map(item => <TimelineItem series={item} key={item.IDs.ID} />)}
-          </div>
-        )}
-    </div>
-  </div>
+  <ShokoPanel
+    title="Timeline"
+    className="sticky top-24 ml-6 !h-[calc(100vh-18rem)] w-[26.5rem]"
+    contentClassName="gap-y-3"
+    isFetching={isFetching}
+  >
+    {series.map(item => <TimelineItem series={item} key={item.IDs.ID} />)}
+  </ShokoPanel>
 );
 
 export default TimelineSidebar;
diff --git a/src/components/Dashboard/DashboardSettingsModal.tsx b/src/components/Dashboard/DashboardSettingsModal.tsx
index 76dff5c7a..827ab5947 100644
--- a/src/components/Dashboard/DashboardSettingsModal.tsx
+++ b/src/components/Dashboard/DashboardSettingsModal.tsx
@@ -113,7 +113,7 @@ const DashboardSettingsModal = ({ onClose, show }: Props) => {
               className={cx(
                 activeTab === 'widgets'
                   ? 'w-[12rem] text-center bg-panel-menu-item-background p-3 rounded-lg text-panel-menu-item-text cursor-pointer'
-                  : 'w-[12rem] text-center p-3 rounded-lg hover:bg-panel-menu-item-background-hover cursor-pointer',
+                  : 'w-[12rem] text-center p-3 rounded-lg hover:bg-panel-menu-item-background-hover cursor-pointer transition-colors',
               )}
               key="widgets"
               onClick={() => setActiveTab('widgets')}
@@ -124,7 +124,7 @@ const DashboardSettingsModal = ({ onClose, show }: Props) => {
               className={cx(
                 activeTab === 'options'
                   ? 'w-[12rem] text-center bg-panel-menu-item-background p-3 rounded-lg text-panel-menu-item-text cursor-pointer'
-                  : 'w-[12rem] text-center p-3 rounded-lg hover:bg-panel-menu-item-background-hover cursor-pointer',
+                  : 'w-[12rem] text-center p-3 rounded-lg hover:bg-panel-menu-item-background-hover cursor-pointer transition-colors',
               )}
               key="options"
               onClick={() => setActiveTab('options')}
diff --git a/src/components/Dialogs/ActionsModal.tsx b/src/components/Dialogs/ActionsModal.tsx
index 0a6e146d0..9f3c1618b 100644
--- a/src/components/Dialogs/ActionsModal.tsx
+++ b/src/components/Dialogs/ActionsModal.tsx
@@ -104,7 +104,7 @@ const Action = ({ actionKey, length }: { actionKey: string, length: number }) =>
   return (
     <div
       className={cx(
-        'flex flex-row justify-between gap-y-2 cursor-pointer hover:text-panel-text-primary',
+        'flex flex-row justify-between gap-y-2 cursor-pointer hover:text-panel-text-primary transition-colors',
         length > 5 ? 'mr-4' : '',
       )}
       onClick={handleAction}
@@ -138,7 +138,7 @@ function ActionsModal({ onClose, show }: Props) {
                 className={cx(
                   activeTab === key
                     ? 'w-[7.5rem] text-center bg-panel-menu-item-background p-3 rounded-lg text-panel-menu-item-text cursor-pointer'
-                    : 'w-[7.5rem] text-center p-3 rounded-lg hover:bg-panel-menu-item-background-hover cursor-pointer',
+                    : 'w-[7.5rem] text-center p-3 rounded-lg hover:bg-panel-menu-item-background-hover cursor-pointer transition-colors',
                 )}
                 key={key}
                 onClick={() => setActiveTab(key)}
diff --git a/src/components/Layout/TopNav.tsx b/src/components/Layout/TopNav.tsx
index 5fdfe7691..853677704 100644
--- a/src/components/Layout/TopNav.tsx
+++ b/src/components/Layout/TopNav.tsx
@@ -167,7 +167,7 @@ function TopNav() {
           layoutEditMode && 'opacity-65 pointer-events-none',
         )}
       >
-        <div className="mx-auto flex w-full max-w-[120rem] items-center justify-between p-6">
+        <div className="mx-auto flex w-full max-w-[120rem] items-center justify-between px-6 py-2">
           <Link to="/webui/dashboard" className="flex items-center gap-x-3">
             <ShokoIcon className="w-20" />
             <span className="mt-1 text-2xl font-semibold text-header-text">Shoko</span>
diff --git a/src/components/Utilities/ReleaseManagement/Title.tsx b/src/components/Utilities/ReleaseManagement/Title.tsx
index 7ea65b9d7..4300cd9fa 100644
--- a/src/components/Utilities/ReleaseManagement/Title.tsx
+++ b/src/components/Utilities/ReleaseManagement/Title.tsx
@@ -4,7 +4,12 @@ import { mdiChevronRight } from '@mdi/js';
 import { Icon } from '@mdi/react';
 
 const TabButton = ({ id, name }: { id: string, name: string }) => (
-  <NavLink to={`../release-management/${id}`} className={({ isActive }) => (isActive ? 'text-panel-text-primary' : '')}>
+  <NavLink
+    to={`../release-management/${id}`}
+    className={(
+      { isActive },
+    ) => (isActive ? 'text-panel-text-primary' : 'hover:text-panel-text-primary transition-colors')}
+  >
     {name}
   </NavLink>
 );
diff --git a/src/components/Utilities/Unrecognized/Title.tsx b/src/components/Utilities/Unrecognized/Title.tsx
index 6d11ea9b1..20caef864 100644
--- a/src/components/Utilities/Unrecognized/Title.tsx
+++ b/src/components/Utilities/Unrecognized/Title.tsx
@@ -4,7 +4,12 @@ import { mdiChevronRight } from '@mdi/js';
 import { Icon } from '@mdi/react';
 
 const TabButton = ({ id, name }: { id: string, name: string }) => (
-  <NavLink to={`../unrecognized/${id}`} className={({ isActive }) => (isActive ? 'text-panel-text-primary' : '')}>
+  <NavLink
+    to={`../unrecognized/${id}`}
+    className={(
+      { isActive },
+    ) => (isActive ? 'text-panel-text-primary' : 'hover:text-panel-text-primary transition-colors')}
+  >
     {name}
   </NavLink>
 );
diff --git a/src/pages/collection/Collection.tsx b/src/pages/collection/Collection.tsx
index b2ea93a19..e018a598d 100644
--- a/src/pages/collection/Collection.tsx
+++ b/src/pages/collection/Collection.tsx
@@ -198,7 +198,7 @@ function Collection() {
 
   return (
     <div className="flex grow flex-col gap-y-6">
-      <div className="flex items-center justify-between rounded-lg border border-panel-border bg-panel-background p-6">
+      <div className="sticky -top-6 z-10 flex items-center justify-between rounded-lg border border-panel-border bg-panel-background p-6">
         <CollectionTitle
           // eslint-disable-next-line no-nested-ternary
           count={(total === 0 && isFetching) ? -1 : (isSeries ? total : groupsTotal)}
@@ -232,7 +232,7 @@ function Collection() {
           className={cx(
             'flex items-start transition-all',
             (!isSeries && showFilterSidebar)
-              ? 'w-[28.84rem] opacity-100 overflow-auto '
+              ? 'w-[28rem] opacity-100'
               : 'w-0 opacity-0 overflow-hidden ',
           )}
         >
diff --git a/src/pages/dashboard/panels/CollectionStats.tsx b/src/pages/dashboard/panels/CollectionStats.tsx
index 1540a519f..e31e079c4 100644
--- a/src/pages/dashboard/panels/CollectionStats.tsx
+++ b/src/pages/dashboard/panels/CollectionStats.tsx
@@ -1,23 +1,49 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link, useNavigate } from 'react-router-dom';
 import prettyBytes from 'pretty-bytes';
 
 import ShokoPanel from '@/components/Panels/ShokoPanel';
 import { useDashbordStatsQuery } from '@/core/react-query/dashboard/queries';
+import { resetFilter } from '@/core/slices/collection';
+import { addFilterCriteriaToStore } from '@/core/utilities/filter';
+import useEventCallback from '@/hooks/useEventCallback';
 
 import type { RootState } from '@/core/store';
 
 const Item = (
-  { link, title, value = 0 }: { title: string, value?: string | number, link?: string },
-) => (
-  <div className="flex">
-    <div className="grow">
-      {title}
+  { filter, link, title, value = 0 }: { title: string, value?: string | number, link?: string, filter?: string },
+) => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const handleMissingFilter = useEventCallback((filterName: string) => {
+    dispatch(resetFilter());
+    addFilterCriteriaToStore(filterName).then(() => {
+      navigate('/webui/collection');
+    }).catch(console.error);
+  });
+
+  return (
+    <div className="flex">
+      <div className="grow">
+        {title}
+      </div>
+      {/* eslint-disable-next-line no-nested-ternary */}
+      {link
+        ? <Link to={link} className="font-semibold text-panel-text-primary">{value}</Link>
+        : filter
+        ? (
+          <div
+            className="cursor-pointer font-semibold text-panel-text-primary"
+            onClick={() => handleMissingFilter(filter)}
+          >
+            {value}
+          </div>
+        )
+        : <div>{value}</div>}
     </div>
-    {link ? <Link to={link} className="font-semibold text-panel-text-primary">{value}</Link> : <div>{value}</div>}
-  </div>
-);
+  );
+};
 
 function CollectionStats() {
   const layoutEditMode = useSelector((state: RootState) => state.mainpage.layoutEditMode);
@@ -53,13 +79,24 @@ function CollectionStats() {
   ];
 
   const childrenThird = [
-    <Item key="missing-links" title="Missing TMDB Links" value={statsQuery.data?.SeriesWithMissingLinks} />,
+    <Item
+      key="missing-links"
+      title="Missing TMDB Links"
+      value={statsQuery.data?.SeriesWithMissingLinks}
+      filter="MissingTmdbLink"
+    />,
     <Item
       key="missing-episodes-collecting"
       title="Missing Episodes (Collecting)"
       value={statsQuery.data?.MissingEpisodesCollecting}
+      filter="HasMissingEpisodesCollecting"
+    />,
+    <Item
+      key="missing-episodes"
+      title="Missing Episodes (Total)"
+      value={statsQuery.data?.MissingEpisodes}
+      filter="HasMissingEpisodes"
     />,
-    <Item key="missing-episodes" title="Missing Episodes (Total)" value={statsQuery.data?.MissingEpisodes} />,
   ];
 
   return (
diff --git a/src/pages/settings/SettingsPage.tsx b/src/pages/settings/SettingsPage.tsx
index e4924015e..f8cf9526f 100644
--- a/src/pages/settings/SettingsPage.tsx
+++ b/src/pages/settings/SettingsPage.tsx
@@ -159,7 +159,7 @@ function SettingsPage() {
                 to={item.path}
                 className={({ isActive }) => (isActive
                   ? 'w-full text-center bg-panel-menu-item-background py-2 px-2 rounded-lg text-panel-menu-item-text'
-                  : 'w-full text-center py-2 px-2 rounded-lg hover:bg-panel-menu-item-background-hover')}
+                  : 'w-full text-center py-2 px-2 rounded-lg hover:bg-panel-menu-item-background-hover transition-colors')}
                 key={item.path}
               >
                 {item.name}