diff --git a/css/common.scss b/css/common.scss
index f708ade95..4844f87a2 100644
--- a/css/common.scss
+++ b/css/common.scss
@@ -110,6 +110,5 @@ body {
 }
 
 .react-grid-item > .react-resizable-handle::after {
-  border-bottom: 2px solid theme('colors.highlight-1') !important;
-  border-right: 2px solid theme('colors.highlight-1') !important;
+  border: 0;
 }
diff --git a/public/logo.png b/public/logo.png
deleted file mode 100644
index 9cba262c8..000000000
Binary files a/public/logo.png and /dev/null differ
diff --git a/public/logo.svg b/public/logo.svg
deleted file mode 100644
index d8f1bfab6..000000000
--- a/public/logo.svg
+++ /dev/null
@@ -1,29 +0,0 @@
-<svg id="Blue_V2" data-name="Blue V2" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #141319;
-        stroke: #000;
-        stroke-width: 1px;
-        fill-rule: evenodd;
-      }
-
-      .cls-2 {
-        fill: none;
-        stroke: #279ceb;
-        stroke-width: 20px;
-      }
-
-      .cls-3 {
-        font-size: 56px;
-        fill: #279ceb;
-        font-family: "Fira Code";
-        font-weight: 700;
-        font-variant: small-caps;
-      }
-    </style>
-  </defs>
-  <path class="cls-1" d="M120,0H392A120,120,0,0,1,512,120V392A120,120,0,0,1,392,512H120A120,120,0,0,1,0,392V120A120,120,0,0,1,120,0Z"/>
-  <rect class="cls-2" width="512" height="512" rx="120" ry="120"/>
-  <text id="S" class="cls-3" transform="translate(120 412) scale(8)">S</text>
-</svg>
diff --git a/src/components/Layout/Sidebar.tsx b/src/components/Layout/Sidebar.tsx
index 4b94cb4a5..5f17b3f9f 100644
--- a/src/components/Layout/Sidebar.tsx
+++ b/src/components/Layout/Sidebar.tsx
@@ -95,7 +95,7 @@ function Sidebar() {
           <span className="text-lg">{text}</span>
         </Link>
         {(key === 'dashboard') && (
-          <div onClick={() => dispatch(setLayoutEditMode(true))} className={cx('cursor-pointer transition-opacity', layoutEditMode && 'text-highlight-1', pathname !== '/webui/dashboard' && 'opacity-50 pointer-events-none')}>
+          <div onClick={() => dispatch(setLayoutEditMode(true))} className={cx('cursor-pointer transition-opacity', (pathname !== '/webui/dashboard' || layoutEditMode) && 'opacity-0 pointer-events-none')}>
             <Icon path={mdiCircleEditOutline} size={1} />
           </div>
         )}
diff --git a/src/components/Panels/ShokoPanel.tsx b/src/components/Panels/ShokoPanel.tsx
index 731255270..36e845007 100644
--- a/src/components/Panels/ShokoPanel.tsx
+++ b/src/components/Panels/ShokoPanel.tsx
@@ -9,11 +9,11 @@ type Props = {
   options?: any;
   className?: string;
   isFetching?: boolean;
-  disableClick?: boolean;
+  editMode?: boolean;
 };
 
-const ShokoPanel = ({ className, title, options, children, isFetching, disableClick }: Props) => (
-    <div className={cx(['flex', 'flex-col', 'overflow-hidden', 'h-full'], disableClick && 'pointer-events-none', className)}>
+const ShokoPanel = ({ className, title, options, children, isFetching, editMode }: Props) => (
+    <div className={cx('flex flex-col overflow-hidden h-full transition-colors border border-dashed', editMode ? 'pointer-events-none border-highlight-1' : 'border-transparent', className)}>
         <div className="flex justify-between items-center mr-2">
           <span className="flex font-semibold text-base">{title}</span>
             <div
@@ -25,7 +25,7 @@ const ShokoPanel = ({ className, title, options, children, isFetching, disableCl
             </div>
         </div>
       <span className="bg-background-border my-4 h-0.5 flex-shrink-0" />
-      <div className="flex grow flex-col mr-2 font-open-sans overflow-y-auto">
+      <div className="flex grow flex-col mr-2 font-open-sans overflow-y-auto shoko-scrollbar">
         {isFetching ? <div className="flex grow justify-center items-center"><Icon path={mdiLoading} spin size={1} /></div> : children}
       </div>
     </div>
diff --git a/src/core/rtkQuery/seriesApi.ts b/src/core/rtkQuery/seriesApi.ts
index d3ee9967a..cad60f368 100644
--- a/src/core/rtkQuery/seriesApi.ts
+++ b/src/core/rtkQuery/seriesApi.ts
@@ -1,6 +1,6 @@
 import { splitV3Api } from './splitV3Api';
 
-import type { SeriesAniDBSearchResult, SeriesType } from '../types/api/series';
+import type { SeriesAniDBSearchResult, SeriesType, SeriesRecommendedType } from '../types/api/series';
 import type { ListResultType, PaginationType } from '../types/api';
 import { EpisodeType } from '../types/api/episode';
 
@@ -41,6 +41,12 @@ const seriesApi = splitV3Api.injectEndpoints({
       query: params => ({ url: `Series/AniDB/${params.anidbID}` }),
       transformResponse: (response: any) => response.List,
     }),
+
+    // Gets anidb recommendation for the user
+    getAniDBRecommendedAnime: build.query<Array<SeriesRecommendedType>, PaginationType>({
+      query: params => ({ url: 'Series/AniDB/RecommendedForYou', params: { ...params, showAll: true } }),
+      transformResponse: (response: any) => response.List,
+    }),
   }),
 });
 
@@ -51,4 +57,5 @@ export const {
   useLazyGetSeriesEpisodesQuery,
   useRefreshAnidbSeriesMutation,
   useLazyGetSeriesAniDBQuery,
+  useGetAniDBRecommendedAnimeQuery,
 } = seriesApi;
diff --git a/src/core/rtkQuery/settingsApi.ts b/src/core/rtkQuery/settingsApi.ts
index 8a75c1b4e..41b35d58a 100644
--- a/src/core/rtkQuery/settingsApi.ts
+++ b/src/core/rtkQuery/settingsApi.ts
@@ -1,9 +1,12 @@
+import jsonpatch from 'fast-json-patch';
+import semver from 'semver';
+
 import { splitV3Api } from './splitV3Api';
 
 import type { SettingsServerType, SettingsType } from '../types/api/settings';
-import jsonpatch from 'fast-json-patch';
 import { SettingsAnidbLoginType } from '../types/api/settings';
 import { initialSettings } from '../../pages/settings/SettingsPage';
+import { uiVersion } from '../util';
 
 const settingsApi = splitV3Api.injectEndpoints({
   endpoints: build => ({
@@ -13,7 +16,10 @@ const settingsApi = splitV3Api.injectEndpoints({
       transformResponse: (response: SettingsServerType) => {
         let webuiSettings = JSON.parse(response.WebUI_Settings === '' ? '{}' : response.WebUI_Settings);
         const settingsRevision = webuiSettings.settingsRevision ?? 0;
-        if (settingsRevision !== 2) webuiSettings = { ...initialSettings.WebUI_Settings, settingsRevision: 2 }; // TO-DO: Move the settings revision number somewhere else
+        const newSettingsRevision = 3;
+        if (settingsRevision !== newSettingsRevision) webuiSettings = { ...initialSettings.WebUI_Settings, settingsRevision: newSettingsRevision }; // TO-DO: Move the settings revision number somewhere else
+        else webuiSettings = Object.assign({}, initialSettings.WebUI_Settings, webuiSettings);
+        if (semver.prerelease(uiVersion()) !== null) webuiSettings.updateChannel = 'unstable';
         return { ...response, WebUI_Settings: webuiSettings };
       },
       providesTags: ['Settings'],
diff --git a/src/core/slices/mainpage.ts b/src/core/slices/mainpage.ts
index ac2255f74..7beb6e75d 100644
--- a/src/core/slices/mainpage.ts
+++ b/src/core/slices/mainpage.ts
@@ -15,7 +15,23 @@ const mainpageSlice = createSlice({
   name: 'mainpage',
   initialState: {
     fetched: {},
-    queueStatus: {} as QueueStatusType,
+    queueStatus: {
+      HasherQueueState: {
+        state: 17,
+        description: '',
+      },
+      GeneralQueueState: {
+        state: 17,
+        description: '',
+      },
+      ImageQueueState: {
+        state: 17,
+        description: '',
+      },
+      HasherQueueCount: 0,
+      GeneralQueueCount: 0,
+      ImageQueueCount: 0,
+    },
     banStatus: {
       http: {
         updateType: 2,
diff --git a/src/core/types/api/series.ts b/src/core/types/api/series.ts
index adc21b5fb..a1900f1ba 100644
--- a/src/core/types/api/series.ts
+++ b/src/core/types/api/series.ts
@@ -147,3 +147,8 @@ export type SeriesSizesEpisodeCountsType = {
   Parodies: number;
   Others: number;
 };
+
+export type SeriesRecommendedType = {
+  Anime: SeriesAniDBType,
+  SimilarTo: number,
+};
diff --git a/src/pages/dashboard/DashboardPage.tsx b/src/pages/dashboard/DashboardPage.tsx
index 9087cdbd8..89cc3153c 100644
--- a/src/pages/dashboard/DashboardPage.tsx
+++ b/src/pages/dashboard/DashboardPage.tsx
@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Responsive, WidthProvider } from 'react-grid-layout';
+import { Icon } from '@mdi/react';
+import { mdiMenuDown } from '@mdi/js';
 
 import { RootState } from '../../core/store';
 import toast from '../../components/Toast';
@@ -14,6 +16,7 @@ import ImportFolders from './panels/ImportFolders';
 import ContinueWatching from './panels/ContinueWatching';
 import NextUp from './panels/NextUp';
 import UpcomingAnime from './panels/UpcomingAnime';
+import RecommendedAnime from './panels/RecommendedAnime';
 import Button from '../../components/Input/Button';
 
 import { setLayoutEditMode } from '../../core/slices/mainpage';
@@ -84,6 +87,12 @@ function DashboardPage() {
     }
   }, [layoutEditMode, currentLayout]);
 
+  const renderResizeHandle = () => (
+    <div className="react-resizable-handle right-0 bottom-0 cursor-nwse-resize">
+      <Icon path={mdiMenuDown} size={1.5} className="text-highlight-1" rotate={-45}/>
+    </div>
+  );
+
   return (
     <ResponsiveGridLayout
       layouts={currentLayout}
@@ -97,6 +106,7 @@ function DashboardPage() {
       onLayoutChange={(_layout, layouts) => setCurrentLayout(layouts)}
       isDraggable={layoutEditMode}
       isResizable={layoutEditMode}
+      resizeHandle={renderResizeHandle()}
     >
       <div key="collectionBreakdown">
         <CollectionBreakdown />
@@ -128,6 +138,9 @@ function DashboardPage() {
       <div key="upcomingAnime">
         <UpcomingAnime />
       </div>
+      <div key="recommendedAnime">
+        <RecommendedAnime />
+      </div>
     </ResponsiveGridLayout>
   );
 }
diff --git a/src/pages/dashboard/panels/CollectionBreakdown.tsx b/src/pages/dashboard/panels/CollectionBreakdown.tsx
index 636b0ed0b..a4aa385a5 100644
--- a/src/pages/dashboard/panels/CollectionBreakdown.tsx
+++ b/src/pages/dashboard/panels/CollectionBreakdown.tsx
@@ -47,7 +47,7 @@ function CollectionBreakdown() {
   ];
 
   return (
-    <ShokoPanel title="Collection Breakdown" isFetching={stats.isLoading} disableClick={layoutEditMode}>
+    <ShokoPanel title="Collection Breakdown" isFetching={stats.isLoading} editMode={layoutEditMode}>
       <div className="flex flex-col leading-5">
         {childrenFirst}
       </div>
diff --git a/src/pages/dashboard/panels/ContinueWatching.tsx b/src/pages/dashboard/panels/ContinueWatching.tsx
index a94f2dadc..41f8aee91 100644
--- a/src/pages/dashboard/panels/ContinueWatching.tsx
+++ b/src/pages/dashboard/panels/ContinueWatching.tsx
@@ -13,8 +13,13 @@ const ContinueWatching = () => {
   const items = useGetDashboardContinueWatchingEpisodesQuery({ pageSize: 20 });
 
   return (
-    <ShokoPanel title="Continue Watching" isFetching={items.isLoading} disableClick={layoutEditMode}>
-      <div className="flex flex-nowrap overflow-x-auto shoko-scrollbar h-90">{items.data?.map(item => <EpisodeDetails episode={item} key={item.IDs.ID} />)}</div>
+    <ShokoPanel title="Continue Watching" isFetching={items.isLoading} editMode={layoutEditMode}>
+      <div className="flex shoko-scrollbar">
+        {(items.data?.length ?? 0) > 0
+          ? items.data?.map(item => <EpisodeDetails episode={item} key={item.IDs.ID} />)
+          : <div className="flex justify-center font-semibold mt-4 w-full">No episodes in-progress to continue watching!</div>
+        }
+      </div>
     </ShokoPanel>
   );
 };
diff --git a/src/pages/dashboard/panels/ImportBreakdown.tsx b/src/pages/dashboard/panels/ImportBreakdown.tsx
index c6afb0038..45226f768 100644
--- a/src/pages/dashboard/panels/ImportBreakdown.tsx
+++ b/src/pages/dashboard/panels/ImportBreakdown.tsx
@@ -13,7 +13,7 @@ function ImportBreakdown() {
   const items = useGetFileUnrecognizedQuery({ pageSize: 0 });
 
   return (
-    <ShokoPanel title="Unrecognized" isFetching={items.isLoading} disableClick={layoutEditMode}>
+    <ShokoPanel title="Unrecognized" isFetching={items.isLoading} editMode={layoutEditMode}>
       <UnrecognizedTab />
     </ShokoPanel>
   );
diff --git a/src/pages/dashboard/panels/ImportBreakdownTabs/UnrecognizedAvdumpedItem.tsx b/src/pages/dashboard/panels/ImportBreakdownTabs/UnrecognizedAvdumpedItem.tsx
index f9d04638d..5d81fdf76 100644
--- a/src/pages/dashboard/panels/ImportBreakdownTabs/UnrecognizedAvdumpedItem.tsx
+++ b/src/pages/dashboard/panels/ImportBreakdownTabs/UnrecognizedAvdumpedItem.tsx
@@ -15,9 +15,9 @@ function UnrecognizedAvdumpedItem(props: Props) {
 
   return (<div className="flex flex-col grow">
       <div>
-          <span className={cx({ 'font-semibold': activeTab === 'date', 'text-highlight-1': activeTab === 'date' })} onClick={() => { setActiveTab('date');}}>{moment(item.Created).format('yyyy-MM-DD')} / {moment(item.Created).format('hh:mm A')}</span>
+          <span className={cx({ 'font-semibold': activeTab === 'date', 'text-highlight-1': activeTab === 'date' }, 'cursor-pointer')} onClick={() => { setActiveTab('date');}}>{moment(item.Created).format('yyyy-MM-DD')} / {moment(item.Created).format('hh:mm A')}</span>
           <span className="mx-2">|</span>
-          <span className={cx({ 'font-semibold': activeTab === 'ed2k', 'text-highlight-1': activeTab === 'ed2k' })} onClick={() => { setActiveTab('ed2k');}}>ED2KHash</span>
+          <span className={cx({ 'font-semibold': activeTab === 'ed2k', 'text-highlight-1': activeTab === 'ed2k' }, 'cursor-pointer')} onClick={() => { setActiveTab('ed2k');}}>ED2KHash</span>
       </div>
       {activeTab === 'date' && <span className="flex break-words">{item.Locations?.[0].RelativePath ?? ''}</span>}
       {activeTab === 'ed2k' && <span className="flex break-words">{hash}</span>}
diff --git a/src/pages/dashboard/panels/ImportBreakdownTabs/UnrecognizedTab.tsx b/src/pages/dashboard/panels/ImportBreakdownTabs/UnrecognizedTab.tsx
index 8f9310abb..a618a9dae 100644
--- a/src/pages/dashboard/panels/ImportBreakdownTabs/UnrecognizedTab.tsx
+++ b/src/pages/dashboard/panels/ImportBreakdownTabs/UnrecognizedTab.tsx
@@ -1,49 +1,38 @@
-import React, { useState } from 'react';
-// import { useDispatch, useSelector } from 'react-redux';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { forEach, orderBy } from 'lodash';
 import moment from 'moment';
 import CopyToClipboard from 'react-copy-to-clipboard';
+import { Icon } from '@mdi/react';
+import { mdiHelpCircleOutline, mdiClipboardTextMultipleOutline } from '@mdi/js';
 
-import toast from '../../../../components/Toast';
-// import { RootState } from '../../../../core/store';
+import { RootState } from '../../../../core/store';
 import Button from '../../../../components/Input/Button';
+import UnrecognizedAvdumpedItem from './UnrecognizedAvdumpedItem';
 
+import { setItem as setAvdumpItem } from '../../../../core/slices/utilities/avdump';
+import toast from '../../../../components/Toast';
 import type { FileType } from '../../../../core/types/api/file';
-import { mdiHelpCircleOutline, mdiClipboardTextMultipleOutline } from '@mdi/js';
-import { Icon } from '@mdi/react';
-// import Checkbox from '../../../../components/Input/Checkbox';
-// import { markUnrecognizedFile } from '../../../../core/slices/mainpage';
-import UnrecognizedAvdumpedItem from './UnrecognizedAvdumpedItem';
 
 import { useGetFileUnrecognizedQuery, useLazyPostFileAVDumpQuery } from '../../../../core/rtkQuery/fileApi';
 
 function UnrecognizedTab() {
-  // const dispatch = useDispatch();
-
-  const [avdumpList, setAvdumpList] = useState([] as Array<string>);
+  const dispatch = useDispatch();
 
   const items = useGetFileUnrecognizedQuery({ pageSize: 20 });
-  // const itemsMarked = useSelector((state: RootState) => state.mainpage.unrecognizedMark);
-  const [avdumpTrigger, avdumpResult] = useLazyPostFileAVDumpQuery();
+  const [avdumpTrigger] = useLazyPostFileAVDumpQuery();
 
-  const runAvdump = async (fileId: number) => {
+  const avdumpList = useSelector((state: RootState) => state.utilities.avdump);
+
+  const avdumpFile = async (fileId: number) => {
+    dispatch(setAvdumpItem({ id: fileId, hash: '', fetching: true }));
     const result = await avdumpTrigger(fileId);
-    if (result.data?.Ed2k) {
-      const tempAvdumpList = [...avdumpList];
-      tempAvdumpList[fileId] = result.data.Ed2k;
-      setAvdumpList(tempAvdumpList);
-    }
+    dispatch(setAvdumpItem({ id: fileId, hash: result.data?.Ed2k ?? 'x', fetching: false }));
   };
 
-  // const markFile = (id: string) => {
-  //   const state = itemsMarked.indexOf(id) === -1;
-  //   dispatch(markUnrecognizedFile({ id, state }));
-  // };
-
   const renderItem = (item: FileType) => (
     <div key={item.ID} className="flex mt-3 first:mt-0 items-center">
-      {/*<Checkbox id={`${item.ID}`} isChecked={itemsMarked.indexOf(`${item.ID}`) !== -1} onChange={() => {markFile(`${item.ID}`);}} className="mr-4" />*/}
-      {avdumpList[item.ID] && <UnrecognizedAvdumpedItem item={item} hash={avdumpList[item.ID]} />}
+      {avdumpList[item.ID] && <UnrecognizedAvdumpedItem item={item} hash={avdumpList[item.ID].hash} />}
       {avdumpList[item.ID] === undefined && (
       <div className="flex flex-col grow">
         <span className="font-semibold">{moment(item.Created).format('yyyy-MM-DD')} / {moment(item.Created).format('hh:mm A')}</span>
@@ -51,15 +40,15 @@ function UnrecognizedTab() {
       </div>
       )}
       <div className="flex my-2 justify-between">
-        {avdumpList[item.ID] === undefined && (
-          <Button onClick={() => runAvdump(item.ID)} className="py-1 px-2" loading={avdumpResult.isFetching}>
-            <Icon className="text-highlight-1" path={mdiHelpCircleOutline} size={1} horizontal vertical rotate={180}/>
+        {(avdumpList[item.ID] === undefined || avdumpList[item.ID].fetching) && (
+          <Button onClick={() => avdumpFile(item.ID)} className="py-1 px-2" loading={avdumpList[item.ID]?.fetching ?? false}>
+            <Icon className="text-highlight-1" path={mdiHelpCircleOutline} size={1} />
           </Button>
         )}
-        {avdumpList[item.ID] && (
+        {(avdumpList[item.ID] && !avdumpList[item.ID].fetching) && (
           <div className="py-1 px-2 cursor-pointer text-highlight-2">
-          <CopyToClipboard text={avdumpList[item.ID] || ''} onCopy={() => toast.success('Copied to clipboard!')}>
-            <Icon path={mdiClipboardTextMultipleOutline} size={1} horizontal vertical rotate={180} />
+          <CopyToClipboard text={avdumpList[item.ID].hash || ''} onCopy={() => toast.success('Copied to clipboard!')}>
+            <Icon path={mdiClipboardTextMultipleOutline} size={1} />
           </CopyToClipboard>
           </div>
         )}
@@ -77,7 +66,7 @@ function UnrecognizedTab() {
   });
 
   if (files.length === 0) {
-    files.push(<div className="flex justify-center font-semibold mt-4">No Unrecognized Files, Good Job!</div>);
+    files.push(<div className="flex justify-center font-semibold mt-4" key="no-files">No Unrecognized Files, Good Job!</div>);
   }
 
   return (<React.Fragment>{files}</React.Fragment>);
diff --git a/src/pages/dashboard/panels/ImportFolders.tsx b/src/pages/dashboard/panels/ImportFolders.tsx
index fe05fd4bf..b86f9a8ca 100644
--- a/src/pages/dashboard/panels/ImportFolders.tsx
+++ b/src/pages/dashboard/panels/ImportFolders.tsx
@@ -83,9 +83,9 @@ function ImportFolders() {
   );
 
   return (
-    <ShokoPanel title="Import Folders" options={renderOptions()} isFetching={importFolderQuery.isFetching} disableClick={layoutEditMode}>
+    <ShokoPanel title="Import Folders" options={renderOptions()} isFetching={importFolderQuery.isFetching} editMode={layoutEditMode}>
       {importFolders.length === 0
-        ? (<div className="flex justify-center font-bold mt-4" key="no-folders">No import folders added!</div>)
+        ? (<div className="flex justify-center font-semibold mt-4" key="no-folders">No import folders added!</div>)
         : importFolders.map(importFolder => renderFolder(importFolder))}
     </ShokoPanel>
   );
diff --git a/src/pages/dashboard/panels/NextUp.tsx b/src/pages/dashboard/panels/NextUp.tsx
index c3cfa4cf4..c2726a40c 100644
--- a/src/pages/dashboard/panels/NextUp.tsx
+++ b/src/pages/dashboard/panels/NextUp.tsx
@@ -13,8 +13,13 @@ const NextUp = () => {
   const items = useGetDashboardNextUpEpisodesQuery({ pageSize: 20 });
 
   return (
-    <ShokoPanel title="Next Up" isFetching={items.isLoading} disableClick={layoutEditMode}>
-      <div className="flex flex-nowrap overflow-x-auto shoko-scrollbar h-90">{items.data?.map(item => <EpisodeDetails episode={item} key={item.IDs.ID} />)}</div>
+    <ShokoPanel title="Next Up" isFetching={items.isLoading} editMode={layoutEditMode}>
+      <div className="flex shoko-scrollbar">
+        {(items.data?.length ?? 0) > 0
+          ? items.data?.map(item => <EpisodeDetails episode={item} key={item.IDs.ID} />)
+          : <div className="flex justify-center font-semibold mt-4 w-full">No next up episodes!</div>
+        }
+      </div>
     </ShokoPanel>
   );
 };
diff --git a/src/pages/dashboard/panels/QueueProcessor.tsx b/src/pages/dashboard/panels/QueueProcessor.tsx
index 21db8658d..fbcd63ba7 100644
--- a/src/pages/dashboard/panels/QueueProcessor.tsx
+++ b/src/pages/dashboard/panels/QueueProcessor.tsx
@@ -93,7 +93,7 @@ function QueueProcessor() {
   }
 
   return (
-    <ShokoPanel title="Queue Processor" options={renderOptions()} isFetching={!hasFetched} disableClick={layoutEditMode}>
+    <ShokoPanel title="Queue Processor" options={renderOptions()} isFetching={!hasFetched} editMode={layoutEditMode}>
       <div className="flex flex-col justify-between h-full">
         {commands}
       </div>
diff --git a/src/pages/dashboard/panels/RecentlyImported.tsx b/src/pages/dashboard/panels/RecentlyImported.tsx
index bd6c7b44d..ab2b4efe1 100644
--- a/src/pages/dashboard/panels/RecentlyImported.tsx
+++ b/src/pages/dashboard/panels/RecentlyImported.tsx
@@ -6,6 +6,7 @@ import ShokoPanel from '../../../components/Panels/ShokoPanel';
 import DashboardTitleToggle from '../components/DashboardTitleToggle';
 import EpisodeDetails from '../components/EpisodeDetails';
 import SeriesDetails from '../components/SeriesDetails';
+import TransitionDiv from '../../../components/TransitionDiv';
 
 import {
   useGetDashboardRecentlyAddedEpisodesQuery,
@@ -20,12 +21,21 @@ const RecentlyImported = () => {
   const episodes = useGetDashboardRecentlyAddedEpisodesQuery({ pageSize: 30 });
 
   return (
-    <ShokoPanel title={<DashboardTitleToggle title="Recently Imported" mainTitle="Episodes" secondaryTitle="Series" secondaryActive={showSeries} setSecondaryActive={setShowSeries} />} disableClick={layoutEditMode}>
-      <div className="flex flex-nowrap overflow-x-auto shoko-scrollbar h-90 pb-5">{showSeries ? (
-        series.data?.map(item => <SeriesDetails series={item} key={item.IDs.ID} />)
-      ) : (
-        episodes.data?.map(item => <EpisodeDetails episode={item} key={item.IDs.ID} />)
-      )}</div>
+    <ShokoPanel title={<DashboardTitleToggle title="Recently Imported" mainTitle="Episodes" secondaryTitle="Series" secondaryActive={showSeries} setSecondaryActive={setShowSeries} />} editMode={layoutEditMode}>
+      <div className="flex relative shoko-scrollbar">
+        <TransitionDiv show={!showSeries} className="flex absolute">
+          {(episodes.data?.length ?? 0) > 0
+            ? episodes.data?.map(item => <EpisodeDetails episode={item} key={item.IDs.ID} />)
+            : <div className="flex justify-center font-semibold mt-4 w-full">No recently imported episodes!</div>
+          }
+        </TransitionDiv>
+        <TransitionDiv show={showSeries} className="flex absolute">
+          {(series.data?.length ?? 0) > 0
+            ? series.data?.map(item => <SeriesDetails series={item} key={item.IDs.ID} />)
+            : <div className="flex justify-center font-semibold mt-4 w-full">No recently imported series!</div>
+          }
+        </TransitionDiv>
+      </div>
     </ShokoPanel>
   );
 };
diff --git a/src/pages/dashboard/panels/RecommendedAnime.tsx b/src/pages/dashboard/panels/RecommendedAnime.tsx
new file mode 100644
index 000000000..963eabaa7
--- /dev/null
+++ b/src/pages/dashboard/panels/RecommendedAnime.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { RootState } from '../../../core/store';
+import ShokoPanel from '../../../components/Panels/ShokoPanel';
+
+import { useGetAniDBRecommendedAnimeQuery } from '../../../core/rtkQuery/seriesApi';
+import type { SeriesAniDBType } from '../../../core/types/api/series';
+
+const RecommendedAnime = () => {
+  const layoutEditMode = useSelector((state: RootState) => state.mainpage.layoutEditMode);
+
+  const items = useGetAniDBRecommendedAnimeQuery({ pageSize: 20 });
+
+  const renderItem = (series: SeriesAniDBType, matches: number) => (
+    <div key={`series-${series.ID}`} className="mr-5 last:mr-0 shrink-0 w-56 font-open-sans justify-center flex flex-col">
+      <div style={{ background: `center / cover no-repeat url('/api/v3/Image/AniDB/Poster/${series.Poster.ID}')` }} className="relative h-80 rounded overflow-hidden drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)] border border-black mb-2" />
+      <p className="truncate text-center text-base font-semibold" title={series.Title}>{series.Title}</p>
+      <p className="truncate text-center text-sm" title={`${matches} Matches`}>{matches} Matches</p>
+    </div>
+  );
+
+  return (
+    <ShokoPanel title="Recommeded Anime" isFetching={items.isLoading} editMode={layoutEditMode}>
+      <div className="flex shoko-scrollbar">
+        {(items.data?.length ?? 0) > 0
+          ? items.data?.map(item => renderItem(item.Anime, item.SimilarTo))
+          : <div className="flex justify-center font-semibold mt-4 w-full">No recommended anime!</div>
+        }
+      </div>
+    </ShokoPanel>
+  );
+};
+
+export default RecommendedAnime;
diff --git a/src/pages/dashboard/panels/SeriesBreakdown.tsx b/src/pages/dashboard/panels/SeriesBreakdown.tsx
index 8be04d910..d7cf83211 100644
--- a/src/pages/dashboard/panels/SeriesBreakdown.tsx
+++ b/src/pages/dashboard/panels/SeriesBreakdown.tsx
@@ -53,7 +53,7 @@ function SeriesBreakdown() {
   });
 
   return (
-    <ShokoPanel title="Series Breakdown" isFetching={seriesSummary.isLoading} disableClick={layoutEditMode}>
+    <ShokoPanel title="Series Breakdown" isFetching={seriesSummary.isLoading} editMode={layoutEditMode}>
       {items}
     </ShokoPanel>
   );
diff --git a/src/pages/dashboard/panels/ShokoNews.tsx b/src/pages/dashboard/panels/ShokoNews.tsx
index 54d65068c..38ef69309 100644
--- a/src/pages/dashboard/panels/ShokoNews.tsx
+++ b/src/pages/dashboard/panels/ShokoNews.tsx
@@ -27,7 +27,7 @@ function ShokoNews() {
   );
 
   return (
-    <ShokoPanel title="Shoko News" isFetching={items.isLoading} disableClick={layoutEditMode}>
+    <ShokoPanel title="Shoko News" isFetching={items.isLoading} editMode={layoutEditMode}>
       <div className="flex flex-col space-y-3">
         {items.data?.slice(0, 2).map(item => renderRow(item))}
       </div>
diff --git a/src/pages/dashboard/panels/UpcomingAnime.tsx b/src/pages/dashboard/panels/UpcomingAnime.tsx
index 8fdc074ca..a10e87e15 100644
--- a/src/pages/dashboard/panels/UpcomingAnime.tsx
+++ b/src/pages/dashboard/panels/UpcomingAnime.tsx
@@ -5,6 +5,7 @@ import { RootState } from '../../../core/store';
 import ShokoPanel from '../../../components/Panels/ShokoPanel';
 import DashboardTitleToggle from '../components/DashboardTitleToggle';
 import EpisodeDetails from '../components/EpisodeDetails';
+import TransitionDiv from '../../../components/TransitionDiv';
 
 import { useGetDashboardAniDBCalendarQuery } from '../../../core/rtkQuery/dashboardApi';
 
@@ -12,13 +13,24 @@ const UpcomingAnime = () => {
   const layoutEditMode = useSelector((state: RootState) => state.mainpage.layoutEditMode);
 
   const [showAll, setShowAll] = useState(false);
-  const items = useGetDashboardAniDBCalendarQuery({ showAll });
+  const localItems = useGetDashboardAniDBCalendarQuery({ showAll: false });
+  const items = useGetDashboardAniDBCalendarQuery({ showAll: true });
 
   return (
-    <ShokoPanel isFetching={items.isFetching} title={<DashboardTitleToggle title="Upcoming Anime" mainTitle="My Collection" secondaryTitle="All" secondaryActive={showAll} setSecondaryActive={setShowAll} />} disableClick={layoutEditMode}>
-      <div className="flex flex-nowrap overflow-x-auto shoko-scrollbar h-90 pb-5">
-        {items.data?.length === 0 && <div className="flex justify-center font-semibold mt-4">It looks like you are not watching anything currently airing.</div>}
-        {items.data?.map(item => <EpisodeDetails episode={item} showDate key={item.IDs.ID} />)}
+    <ShokoPanel isFetching={items.isFetching} title={<DashboardTitleToggle title="Upcoming Anime" mainTitle="My Collection" secondaryTitle="All" secondaryActive={showAll} setSecondaryActive={setShowAll} />} editMode={layoutEditMode}>
+      <div className="flex relative shoko-scrollbar">
+        <TransitionDiv show={!showAll} className="flex absolute">
+          {(localItems.data?.length ?? 0) > 0
+            ? localItems.data?.map(item => <EpisodeDetails episode={item} showDate key={item.IDs.ID} />)
+            : <div className="flex justify-center font-semibold mt-4 w-full">No upcoming anime!</div>
+          }
+        </TransitionDiv>
+        <TransitionDiv show={showAll} className="flex absolute">
+          {(items.data?.length ?? 0) > 0
+            ? items.data?.map(item =><EpisodeDetails episode={item} showDate key={item.IDs.ID} />)
+            : <div className="flex justify-center font-semibold mt-4 w-full">No upcoming anime!</div>
+          }
+        </TransitionDiv>
       </div>
     </ShokoPanel>
   );
diff --git a/src/pages/firstrun/FirstRunPage.tsx b/src/pages/firstrun/FirstRunPage.tsx
index 58ece280d..5ef09d08c 100644
--- a/src/pages/firstrun/FirstRunPage.tsx
+++ b/src/pages/firstrun/FirstRunPage.tsx
@@ -11,6 +11,7 @@ import {
 } from '@mdi/js';
 import { siDiscord } from 'simple-icons/icons';
 import Button from '../../components/Input/Button';
+import ShokoIcon from '../../components/ShokoIcon';
 
 import { RootState } from '../../core/store';
 
@@ -74,7 +75,7 @@ function FirstRunPage() {
     <div className="flex h-screen w-screen">
       <div className="flex flex-col flex-none p-12 items-center justify-between w-125 bg-background-nav border-r-2 border-background-border">
         <div className="flex flex-col items-center">
-          <img src="/logo.png" className="w-32" alt="logo" />
+          <ShokoIcon className="w-32" />
           <div className="flex items-center font-semibold mt-4">
             Version: {version.isFetching ? <Icon path={mdiLoading} spin size={1} className="ml-2 text-highlight-1" /> : version.data?.find(obj => obj.Name === 'Server')?.Version}
           </div>
diff --git a/src/pages/login/LoginPage.tsx b/src/pages/login/LoginPage.tsx
index 2994efab1..5f1eefdf1 100644
--- a/src/pages/login/LoginPage.tsx
+++ b/src/pages/login/LoginPage.tsx
@@ -11,6 +11,7 @@ import { RootState } from '../../core/store';
 import Button from '../../components/Input/Button';
 import Input from '../../components/Input/Input';
 import Checkbox from '../../components/Input/Checkbox';
+import ShokoIcon from '../../components/ShokoIcon';
 
 import { useGetInitVersionQuery, useGetInitStatusQuery } from '../../core/rtkQuery/initApi';
 import { usePostAuthMutation } from '../../core/rtkQuery/authApi';
@@ -67,7 +68,7 @@ function LoginPage() {
       <div className="flex h-screen w-screen">
         <div className="flex grow login-image" />
         <div className="flex flex-col flex-none p-12 items-center justify-between w-125 bg-background-nav border-l-2 border-background-border">
-          <img src="logo.png" className="w-32" alt="logo" />
+          <ShokoIcon className="w-32" />
           <div className="flex items-center font-semibold mt-4">
             Version: {version.isFetching ? <Icon path={mdiLoading} spin size={1} className="ml-2 text-highlight-1" /> : version.data?.find(obj => obj.Name === 'Server')?.Version}
           </div>
diff --git a/src/pages/main/MainPage.tsx b/src/pages/main/MainPage.tsx
index c497bdd35..129101681 100644
--- a/src/pages/main/MainPage.tsx
+++ b/src/pages/main/MainPage.tsx
@@ -52,7 +52,7 @@ function MainPage() {
           <Sidebar />
         </div>
         <div className="flex flex-col grow">
-          <div className="overflow-y-auto grow">
+          <div className="overflow-y-auto grow shoko-scrollbar">
             <Outlet />
           </div>
         </div>
diff --git a/src/pages/settings/SettingsPage.tsx b/src/pages/settings/SettingsPage.tsx
index a2dd80b54..9ed607715 100644
--- a/src/pages/settings/SettingsPage.tsx
+++ b/src/pages/settings/SettingsPage.tsx
@@ -33,11 +33,11 @@ export const initialSettings = {
     layout: {
       dashboard: {
         lg: [{
-          i: 'collectionBreakdown', x: 0, y: 0, w: 2, h: 16, minW: 2, minH: 2, moved: false, static: false,
+          i: 'collectionBreakdown', x: 0, y: 0, w: 3, h: 16, minW: 2, minH: 2, moved: false, static: false,
         }, {
-          i: 'collectionTypeBreakdown', x: 2, y: 0, w: 2, h: 16, minW: 2, minH: 2, moved: false, static: false,
+          i: 'collectionTypeBreakdown', x: 3, y: 0, w: 2, h: 16, minW: 2, minH: 2, moved: false, static: false,
         }, {
-          i: 'queueProcessor', x: 4, y: 0, w: 8, h: 16, minW: 2, minH: 2, moved: false, static: false,
+          i: 'queueProcessor', x: 5, y: 0, w: 7, h: 16, minW: 2, minH: 2, moved: false, static: false,
         }, {
           i: 'recentlyImported', x: 0, y: 16, w: 12, h: 19, minW: 2, minH: 2, moved: false, static: false,
         }, {
@@ -49,9 +49,11 @@ export const initialSettings = {
         }, {
           i: 'continueWatching', x: 0, y: 49, w: 12, h: 19, minW: 2, minH: 2, moved: false, static: false,
         }, {
-          i: 'nextUp', x: 0, y: 61, w: 12, h: 19, minW: 2, minH: 19, moved: false, static: false,
+          i: 'nextUp', x: 0, y: 61, w: 12, h: 19, minW: 2, minH: 2, moved: false, static: false,
         }, {
-          i: 'upcomingAnime', x: 0, y: 73, w: 12, h: 20, minW: 2, minH: 2, moved: false, static: false,
+          i: 'upcomingAnime', x: 0, y: 73, w: 12, h: 21, minW: 2, minH: 2, moved: false, static: false,
+        }, {
+          i: 'recommendedAnime', x: 0, y: 94, w: 12, h: 19, minW: 2, minH: 2, moved: false, static: false,
         }],
       },
     },
diff --git a/src/pages/utilities/UnrecognizedUtilityTabs/UnrecognizedTab.tsx b/src/pages/utilities/UnrecognizedUtilityTabs/UnrecognizedTab.tsx
index 63fd498d6..e00a1d9bb 100644
--- a/src/pages/utilities/UnrecognizedUtilityTabs/UnrecognizedTab.tsx
+++ b/src/pages/utilities/UnrecognizedUtilityTabs/UnrecognizedTab.tsx
@@ -160,6 +160,10 @@ function UnrecognizedTab({ columns: tempColumns, show, setFilesCount }: Props) {
     dispatch(setSelectedRows(table.getSelectedRowModel().rows.map(row => row.original)));
   }, [table.getSelectedRowModel()]);
 
+  useEffect(() => {
+    table.resetRowSelection();
+  }, [files.List]);
+
   const rescanFiles = (selected = false) => {
     if (selected) {
       forEach(selectedRows, (row) => {