diff --git a/src/core/router/index.tsx b/src/core/router/index.tsx
index b9de58d2d..3bfe75c38 100644
--- a/src/core/router/index.tsx
+++ b/src/core/router/index.tsx
@@ -37,6 +37,10 @@ import GroupList from '../../pages/collection/GroupList';
 import Group from '../../pages/collection/Group';
 import FilterGroupList from '../../pages/collection/FilterGroupList';
 
+// Utilities
+import UnrecognizedUtility from '../../pages/utilities/UnrecognizedUtility';
+import MultipleFilesUtility from '../../pages/utilities/MultipleFilesUtility';
+
 type Props = {
   history: BrowserHistory;
 };
@@ -72,7 +76,11 @@ function Router(props: Props) {
                 <Route index element={<Navigate to="dashboard" />} />
                 <Route path="dashboard" element={<DashboardPage />} />
                 <Route path="import-folders" element={<ImportFoldersPage />} />
-                <Route path="utilities" element={<UtilitiesPage />} />
+                <Route path="utilities" element={<UtilitiesPage />}>
+                  <Route index element={<Navigate to="unrecognized" replace />} />
+                  <Route path="unrecognized" element={<UnrecognizedUtility />} />
+                  <Route path="multiple-files" element={<MultipleFilesUtility />} />
+                </Route>
                 <Route path="actions" element={<ActionsPage />} />
                 <Route path="log" element={<LogsPage />} />
                 <Route path="collection">
diff --git a/src/pages/utilities/MultipleFilesUtility.tsx b/src/pages/utilities/MultipleFilesUtility.tsx
new file mode 100644
index 000000000..c5b53933e
--- /dev/null
+++ b/src/pages/utilities/MultipleFilesUtility.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function MultipleFilesUtility() {
+  return (
+    <div>
+      MFU
+    </div>
+  );
+}
+
+export default MultipleFilesUtility;
diff --git a/src/pages/utilities/UnrecognizedUtility.tsx b/src/pages/utilities/UnrecognizedUtility.tsx
index f51be81b1..0fc570866 100644
--- a/src/pages/utilities/UnrecognizedUtility.tsx
+++ b/src/pages/utilities/UnrecognizedUtility.tsx
@@ -6,6 +6,7 @@ import {
 import cx from 'classnames';
 
 import UnrecognizedTab from './UnrecognizedUtilityTabs/UnrecognizedTab';
+import AVDumpTab from './UnrecognizedUtilityTabs/AVDumpTab.';
 
 import { useGetFileUnrecognizedQuery } from '../../core/rtkQuery/fileApi';
 
@@ -17,15 +18,15 @@ function UnrecognizedUtility() {
   const renderTabContent = () => {
     switch (activeTab) {
       case 'unrecognized':
-        return (<UnrecognizedTab files={files} />);
+        return (<UnrecognizedTab />);
       case 'avdump':
-        return (<UnrecognizedTab files={files} />);
+        return (<AVDumpTab />);
       case 'manuallyLinked':
-        return (<UnrecognizedTab files={files} />);
+        return (<UnrecognizedTab />);
       case 'ignoredFiles':
-        return (<UnrecognizedTab files={files} />);
+        return (<UnrecognizedTab />);
       default:
-        return (<UnrecognizedTab files={files} />);
+        return (<UnrecognizedTab />);
     }
   };
 
diff --git a/src/pages/utilities/UnrecognizedUtilityTabs/AVDumpTab..tsx b/src/pages/utilities/UnrecognizedUtilityTabs/AVDumpTab..tsx
new file mode 100644
index 000000000..2b1953662
--- /dev/null
+++ b/src/pages/utilities/UnrecognizedUtilityTabs/AVDumpTab..tsx
@@ -0,0 +1,252 @@
+import React, { useEffect, useState } from 'react';
+import prettyBytes from 'pretty-bytes';
+import moment from 'moment';
+import cx from 'classnames';
+import { countBy, find, forEach, pickBy } from 'lodash';
+import { Icon } from '@mdi/react';
+import {
+  mdiChevronLeft, mdiChevronRight,
+  mdiDatabaseSearchOutline, mdiDatabaseSyncOutline,
+  mdiDumpTruck, mdiMagnify,
+  mdiLinkVariantPlus, mdiMinusBoxOutline,
+  mdiEyeOffOutline, mdiCloseBoxOutline,
+} from '@mdi/js';
+
+import ShokoPanel from '../../../components/Panels/ShokoPanel';
+import Button from '../../../components/Input/Button';
+import TransitionDiv from '../../../components/TransitionDiv';
+import { useGetImportFoldersQuery } from '../../../core/rtkQuery/importFolderApi';
+
+import SeriesLinkPanel from './Components/SeriesLinkPanel';
+import SelectedFilesPanel from './Components/SelectedFilesPanel';
+import EpisodeLinkPanel from './Components/EpisodeLinkPanel';
+
+import type { SeriesAniDBSearchResult } from '../../../core/types/api/series';
+
+import {
+  useGetFileUnrecognizedQuery,
+  useLazyPostFileRehashQuery,
+  useLazyPostFileRescanQuery,
+} from '../../../core/rtkQuery/fileApi';
+import FileListPanel from './Components/FileListPanel';
+import type { ImportFolderType } from '../../../core/types/api/import-folder';
+
+function AVDumpTab() {
+  const files = useGetFileUnrecognizedQuery({ pageSize: 0 });
+  const importFolderQuery = useGetImportFoldersQuery();
+  const importFolders = importFolderQuery?.data ?? [] as ImportFolderType[];
+  const [fileRescanTrigger] = useLazyPostFileRescanQuery();
+  const [fileRehashTrigger] = useLazyPostFileRehashQuery();
+
+  const [markedItems, setMarkedItems] = useState({} as { [key: number]: boolean });
+  const [markedItemsCount, setMarkedItemsCount] = useState(0);
+  const [selectedFile, setSelectedFile] = useState(1);
+  const [manualLink, setManualLink] = useState(false);
+  const [selectedSeries, setSelectedSeries] = useState({} as SeriesAniDBSearchResult);
+
+  useEffect(() => {
+    while (files.isLoading);
+    const newMarkedItems = {} as { [key: number]: boolean };
+    forEach(files.data?.List, (file) => {
+      newMarkedItems[file.ID] = false;
+    });
+    setMarkedItems(newMarkedItems);
+  }, []);
+
+  const changeSelectedFile = (operation: string) => {
+    if (operation === 'prev') {
+      if (selectedFile > 1) {
+        setSelectedFile(selectedFile - 1);
+      }
+    } else {
+      if (selectedFile < markedItemsCount) {
+        setSelectedFile(selectedFile + 1);
+      }
+    }
+  };
+
+  const changeMarkedItems = (items: { [key: number]: boolean }) => {
+    setMarkedItems(items);
+    setMarkedItemsCount(countBy(items).true ?? 0);
+    if (selectedFile >= markedItemsCount) changeSelectedFile('prev');
+  };
+
+  const fileInfoTitle = () => {
+    if (markedItemsCount > 0) {
+      return (
+        <React.Fragment>
+          Selected File Info
+          <div className="flex ml-2">
+            - <span className="text-highlight-2 ml-2">{selectedFile}/{markedItemsCount}</span>
+          </div>
+        </React.Fragment>
+      );
+    } else {
+      return 'Selected File Info';
+    }
+  };
+
+  const renderFileInfo = () => {
+    const selectedFiles = files.data?.List.filter(item => markedItems[item.ID])!;
+    const selectedFileInfo = selectedFiles[selectedFile - 1];
+
+    const importFolderId = selectedFileInfo.Locations[0].ImportFolderID;
+    const importFolder = find(importFolders, { ID: importFolderId })?.Path ?? '';
+
+    return (
+      <TransitionDiv className="flex flex-col mt-2">
+        <div className="flex">
+          <div className="flex flex-col w-2/5">
+            <div className="font-semibold mb-1">Filename</div>
+            {selectedFileInfo.Locations[0].RelativePath}
+          </div>
+
+          <div className="flex flex-col w-1/5">
+            <div className="font-semibold mb-1">Size</div>
+            {prettyBytes(selectedFileInfo.Size, { binary: true })}
+          </div>
+
+          <div className="flex flex-col w-1/4">
+            <div className="font-semibold mb-1">Folder</div>
+            {importFolder}
+          </div>
+
+          <div className="flex flex-col w-40">
+            <div className="font-semibold mb-1">Import Date</div>
+            {moment(selectedFileInfo.Created).format('MMMM DD YYYY, HH:mm')}
+          </div>
+        </div>
+
+        <div className="flex mt-4">
+          <div className="flex flex-col w-2/5">
+            <div className="font-semibold mb-1">Hash</div>
+            {selectedFileInfo.Hashes.ED2K}
+          </div>
+
+          <div className="flex flex-col w-1/5">
+            <div className="font-semibold mb-1">MD5</div>
+            {selectedFileInfo.Hashes.MD5}
+          </div>
+
+          <div className="flex flex-col w-1/4">
+            <div className="font-semibold mb-1">SHA1</div>
+            {selectedFileInfo.Hashes.SHA1}
+          </div>
+
+          <div className="flex flex-col w-40">
+            <div className="font-semibold mb-1">CRC32</div>
+            {selectedFileInfo.Hashes.CRC32}
+          </div>
+        </div>
+      </TransitionDiv>
+    );
+  };
+
+  const renderPanelOptions = () => (
+    <div className="flex">
+      <Button onClick={() => changeSelectedFile('prev')}>
+        <Icon path={mdiChevronLeft} size={1} className="opacity-75 text-highlight-1" />
+      </Button>
+      <Button onClick={() => changeSelectedFile('next')} className="ml-2">
+        <Icon path={mdiChevronRight} size={1} className="opacity-75 text-highlight-1" />
+      </Button>
+    </div>
+  );
+
+  const rescanFiles = (selected = false) => {
+    if (selected) {
+      const fileIds = Object.keys(pickBy(markedItems, item => item));
+      forEach(fileIds, fileId => fileRescanTrigger(parseInt(fileId)));
+    } else {
+      forEach(files.data?.List, file => fileRescanTrigger(file.ID));
+    }
+  };
+
+  const rehashFiles = (selected = false) => {
+    if (selected) {
+      const fileIds = Object.keys(pickBy(markedItems, item => item));
+      forEach(fileIds, fileId => fileRehashTrigger(parseInt(fileId)));
+    } else {
+      forEach(files.data?.List, file => fileRehashTrigger(file.ID));
+    }
+  };
+
+  const renderOperations = (common = false) => {
+    const renderButton = (onClick: (...args: any) => void, icon: string, name: string) => (
+      <Button onClick={onClick} className="flex items-center ml-3 font-normal">
+        <Icon path={icon} size={1} className="mr-1"/>
+        {name}
+      </Button>
+    );
+
+    return (
+      <TransitionDiv className="flex grow">
+        {common ? (
+          <>
+            {renderButton(() => rescanFiles(), mdiDatabaseSearchOutline, 'Rescan All')}
+            {renderButton(() => rehashFiles(), mdiDatabaseSyncOutline, 'Rehash All')}
+            {renderButton(() => {}, mdiDumpTruck, 'AVDump All')}
+          </>
+        ) : (
+          <>
+            {renderButton(() => setManualLink(!manualLink), mdiLinkVariantPlus, 'Manually Link')}
+            {renderButton(() => rescanFiles(true), mdiDatabaseSearchOutline, 'Rescan')}
+            {renderButton(() => rehashFiles(true), mdiDatabaseSyncOutline, 'Rehash')}
+            {renderButton(() => {}, mdiDumpTruck, 'AVDump')}
+            {renderButton(() => {}, mdiEyeOffOutline, 'Ignore')}
+            {renderButton(() => {}, mdiMinusBoxOutline, 'Delete')}
+            {renderButton(() => {}, mdiCloseBoxOutline, 'Cancel Selection')}
+          </>
+        )}
+      </TransitionDiv>
+    );
+  };
+
+  const updateSelectedSeries = (series: SeriesAniDBSearchResult) => setSelectedSeries(series);
+
+  return (
+    <TransitionDiv className="flex flex-col grow">
+
+      <div className="flex flex-col grow">
+        <div className="flex">
+          <div className={cx(['box-border flex grow bg-background-nav border border-background-border items-center rounded-md px-3 py-2', manualLink && 'pointer-events-none opacity-75'])}>
+            <Icon path={mdiMagnify} size={1} />
+            <input type="text" placeholder="Search..." className="ml-2 bg-background-nav border-b border-font-main" />
+            {renderOperations(markedItemsCount === 0)}
+            <div className="ml-auto text-highlight-2 font-semibold">{markedItemsCount} Files Selected</div>
+          </div>
+          {manualLink && (
+            <TransitionDiv className="flex pl-2.5 items-center">
+              <Button onClick={() => {
+                setManualLink(false);
+                setSelectedSeries({} as SeriesAniDBSearchResult);
+              }} className="px-3 py-2 bg-background-alt rounded-md border !border-background-border">Cancel</Button>
+              <Button onClick={() => {}} className="px-3 py-2 bg-highlight-1 rounded-md border !border-background-border ml-2">Save</Button>
+            </TransitionDiv>
+          )}
+        </div>
+        {manualLink ? (
+          <TransitionDiv className="flex mt-5 overflow-y-auto grow gap-x-4">
+            <SelectedFilesPanel files={files.data?.List.filter(item => markedItems[item.ID])!} selectedSeries={selectedSeries} />
+            {selectedSeries?.ID
+              ? (<EpisodeLinkPanel selectedSeries={selectedSeries} setSeries={updateSelectedSeries} />)
+              : (<SeriesLinkPanel setSeries={updateSelectedSeries}/>)}
+          </TransitionDiv>
+        ) : (
+          <FileListPanel markedItems={markedItems} setMarkedItems={changeMarkedItems} />
+        )}
+      </div>
+
+      <ShokoPanel title={fileInfoTitle()} className="!h-56 mt-4" options={renderPanelOptions()}>
+        {markedItemsCount === 0 ? (
+          <TransitionDiv className="flex items-center justify-center mt-2 font-semibold">
+            No File(s) Selected
+          </TransitionDiv>
+        ) : renderFileInfo()}
+      </ShokoPanel>
+
+    </TransitionDiv>
+  );
+}
+
+export default AVDumpTab;
diff --git a/src/pages/utilities/UnrecognizedUtilityTabs/Components/EpisodeLinkPanel.tsx b/src/pages/utilities/UnrecognizedUtilityTabs/Components/EpisodeLinkPanel.tsx
new file mode 100644
index 000000000..c575b45bb
--- /dev/null
+++ b/src/pages/utilities/UnrecognizedUtilityTabs/Components/EpisodeLinkPanel.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import ShokoPanel from '../../../../components/Panels/ShokoPanel';
+
+import type { SeriesAniDBSearchResult } from '../../../../core/types/api/series';
+
+type Props = {
+  selectedSeries: SeriesAniDBSearchResult;
+  setSeries: (series: SeriesAniDBSearchResult) => void;
+};
+
+function EpisodeLinkPanel(props: Props) {
+  const { selectedSeries } = props;
+
+  const renderTitle = () => (
+    <div className="flex gap-x-1 items-center">
+      <span>AniDB</span>|
+      <span className="text-highlight-2">{selectedSeries.ID} - {selectedSeries.Title}</span>
+    </div>
+  );
+
+  return (
+    <ShokoPanel title={renderTitle()} className="w-1/2">
+      {selectedSeries.ID}
+    </ShokoPanel>
+  );
+}
+
+export default EpisodeLinkPanel;
diff --git a/src/pages/utilities/UnrecognizedUtilityTabs/Components/FileListPanel.tsx b/src/pages/utilities/UnrecognizedUtilityTabs/Components/FileListPanel.tsx
new file mode 100644
index 000000000..4f170cb7f
--- /dev/null
+++ b/src/pages/utilities/UnrecognizedUtilityTabs/Components/FileListPanel.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { countBy, find, forEach } from 'lodash';
+import prettyBytes from 'pretty-bytes';
+import moment from 'moment';
+
+import TransitionDiv from '../../../../components/TransitionDiv';
+import Checkbox from '../../../../components/Input/Checkbox';
+
+import { useGetFileUnrecognizedQuery } from '../../../../core/rtkQuery/fileApi';
+import { useGetImportFoldersQuery } from '../../../../core/rtkQuery/importFolderApi';
+import type { ImportFolderType } from '../../../../core/types/api/import-folder';
+
+type Props = {
+  markedItems: { [key: number]: boolean };
+  setMarkedItems: (items: { [key: number]: boolean }) => void;
+};
+
+function FileListPanel(props: Props) {
+  const { markedItems, setMarkedItems } = props;
+
+  const files = useGetFileUnrecognizedQuery({ pageSize: 0 });
+  const importFolderQuery = useGetImportFoldersQuery();
+  const importFolders = importFolderQuery?.data ?? [] as ImportFolderType[];
+
+  const isSelectAllChecked = (countBy(markedItems).true ?? 0) === (files.data?.Total ?? 0);
+
+  const handleInputChange = (event: any) => {
+    const { id, checked } = event.target;
+    setMarkedItems({ ...markedItems, [id]: checked });
+  };
+
+  const renderRow = (Id: number, importFolder: string, filename: string, size: number, date: string) => (
+    <tr className="box-border bg-background-nav border border-background-border" key={Id}>
+      <td className="w-20 py-3.5">
+        <div className="flex items-center justify-center">
+          <Checkbox id={Id.toString()} isChecked={markedItems[Id] ?? false} onChange={handleInputChange} />
+        </div>
+      </td>
+      <td className="w-52 py-3.5">{importFolder}</td>
+      <td className="w-auto py-3.5">{filename}</td>
+      <td className="w-32 py-3.5">{prettyBytes(size, { binary: true })}</td>
+      <td className="w-56 py-3.5">{moment(date).format('MMMM DD YYYY, HH:mm')}</td>
+    </tr>
+  );
+
+  const rows: Array<React.ReactNode> = [];
+  forEach(files.data?.List, (file) => {
+    const importFolderId = file.Locations[0].ImportFolderID;
+    const importFolder = find(importFolders, { ID: importFolderId })?.Name ?? '';
+    rows.push(renderRow(file.ID, importFolder, file.Locations[0].RelativePath, file.Size, file.Created));
+  });
+
+  const handleSelectAll = () => {
+    const tempMarkedItems: { [id: number]: boolean } = {};
+    forEach(files.data?.List, file => tempMarkedItems[file.ID] = !isSelectAllChecked);
+    setMarkedItems(tempMarkedItems);
+  };
+
+  return (
+    <TransitionDiv className="flex flex-col mt-4 overflow-y-auto grow basis-0 items-start">
+      <div className="border border-b-0 border-background-border rounded-t-md">
+        <table className="table-fixed text-left w-full">
+          <tr className="box-border bg-background-nav">
+            <th className="w-20 py-3.5">
+              <div className="flex items-center justify-center">
+                <Checkbox id='all' isChecked={isSelectAllChecked} onChange={handleSelectAll} />
+              </div>
+            </th>
+            <th className="w-52 py-3.5 font-semibold">Import Folder</th>
+            <th className="w-auto py-3.5 font-semibold">Filename</th>
+            <th className="w-32 py-3.5 font-semibold">Size</th>
+            <th className="w-56 py-3.5 font-semibold">Date</th>
+            <th className="w-2.5" />
+          </tr>
+        </table>
+      </div>
+      <div className="overflow-y-auto border-b border-background-border rounded-b-md">
+        <table className="table-fixed text-left w-full">
+          {rows}
+        </table>
+      </div>
+    </TransitionDiv>
+  );
+}
+
+export default FileListPanel;
diff --git a/src/pages/utilities/UnrecognizedUtilityTabs/Components/SelectedFilesPanel.tsx b/src/pages/utilities/UnrecognizedUtilityTabs/Components/SelectedFilesPanel.tsx
new file mode 100644
index 000000000..5ebbec552
--- /dev/null
+++ b/src/pages/utilities/UnrecognizedUtilityTabs/Components/SelectedFilesPanel.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { forEach } from 'lodash';
+import cx from 'classnames';
+
+import ShokoPanel from '../../../../components/Panels/ShokoPanel';
+
+import type { FileType } from '../../../../core/types/api/file';
+import type { SeriesAniDBSearchResult } from '../../../../core/types/api/series';
+
+type Props = {
+  files: Array<FileType>;
+  selectedSeries: SeriesAniDBSearchResult;
+};
+
+function SelectedFilesPanel(props: Props) {
+  const { files, selectedSeries } = props;
+
+  const manualLinkFileRows: Array<React.ReactNode> = [];
+  forEach(files, (file) => {
+    manualLinkFileRows.push(
+      <div className={cx(['px-3 py-3.5 w-full bg-background-nav border border-background-border rounded-md', selectedSeries?.ID && 'mt-4'])} key={file.ID}>
+        {file.Locations[0].RelativePath}
+      </div>,
+    );
+  });
+
+  return (
+    <ShokoPanel title="Selected Files" className="w-1/2">
+      {manualLinkFileRows}
+    </ShokoPanel>
+  );
+}
+
+export default SelectedFilesPanel;
diff --git a/src/pages/utilities/UnrecognizedUtilityTabs/Components/SeriesLinkPanel.tsx b/src/pages/utilities/UnrecognizedUtilityTabs/Components/SeriesLinkPanel.tsx
new file mode 100644
index 000000000..2e8c1b7f6
--- /dev/null
+++ b/src/pages/utilities/UnrecognizedUtilityTabs/Components/SeriesLinkPanel.tsx
@@ -0,0 +1,99 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { debounce, forEach } from 'lodash';
+import { Icon } from '@mdi/react';
+import { mdiOpenInNew, mdiMagnify } from '@mdi/js';
+
+import ShokoPanel from '../../../../components/Panels/ShokoPanel';
+import Input from '../../../../components/Input/Input';
+
+import { useLazyGetSeriesAniDBSearchQuery } from '../../../../core/rtkQuery/seriesApi';
+
+import type { SeriesAniDBSearchResult } from '../../../../core/types/api/series';
+
+type Props = {
+  setSeries: (series: SeriesAniDBSearchResult) => void;
+};
+
+function SeriesLinkPanel(props: Props) {
+  const { setSeries } = props;
+
+  const [searchText, setSearchText] = useState('');
+
+  const [searchTrigger, searchResults] = useLazyGetSeriesAniDBSearchQuery();
+
+  const debouncedSearch = useRef(
+    debounce( (query: string) => {
+      searchTrigger({ query, pageSize: 20 }).catch(() => {});
+    }, 200),
+  ).current;
+
+  const handleSearch = (query: string) => {
+    setSearchText(query);
+    if (query !== '')
+      debouncedSearch(query);
+  };
+
+  useEffect(() => {
+    return () => {
+      debouncedSearch.cancel();
+    };
+  }, [debouncedSearch]);
+
+  const renderRow = (data: SeriesAniDBSearchResult) => (
+    <tr key={data.ID} onClick={() => setSeries(data)} className="cursor-pointer">
+      <td className="pt-1.5">
+        <div className="flex justify-between mr-6">
+          {data.ID}
+          <span onClick={(e) => {
+            e.stopPropagation();
+            window.open(`https://anidb.net/anime/${data.ID}`, '_blank');
+          }}>
+            <Icon path={mdiOpenInNew} size={1} className="text-highlight-1 cursor-pointer" />
+          </span>
+        </div>
+      </td>
+      <td className="pt-1.5">{data.Title}</td>
+      <td className="pt-1.5">{data.EpisodeCount ?? '-'}</td>
+      <td className="pt-1.5">{data.Type}</td>
+    </tr>
+  );
+
+  const rows: Array<React.ReactNode> = [];
+  forEach(searchResults.data, (result) => {
+    rows.push(renderRow(result));
+  });
+
+  return (
+    <ShokoPanel title="Series Link" className="w-1/2">
+      <div className="flex gap-x-2">
+        <Input
+          id="link-search"
+          type="text"
+          value={searchText}
+          onChange={e => handleSearch(e.target.value)}
+          placeholder="Enter Series Name or AniDB ID..."
+          className="grow"
+          startIcon={mdiMagnify}
+        />
+      </div>
+      <div className="flex mt-4 bg-background-alt border border-background-border rounded-md px-4 pb-4 overflow-y-auto grow basis-0 items-start">
+        <table className="table-fixed text-left w-full">
+          <thead className="sticky top-0 bg-background-alt">
+          <tr className="box-border font-semibold">
+            {/*TODO: Fix scrollbar*/}
+            <td className="w-28 py-3">AniDB ID</td>
+            <td className="w-auto py-3">Series Name</td>
+            <td className="w-16 py-3">EPs</td>
+            <td className="w-24 py-3">Type</td>
+          </tr>
+          </thead>
+          <tbody>
+          {rows}
+          </tbody>
+        </table>
+      </div>
+    </ShokoPanel>
+  );
+}
+
+export default SeriesLinkPanel;
diff --git a/src/pages/utilities/UnrecognizedUtilityTabs/UnrecognizedTab.tsx b/src/pages/utilities/UnrecognizedUtilityTabs/UnrecognizedTab.tsx
index 447ac55a4..fd0dff274 100644
--- a/src/pages/utilities/UnrecognizedUtilityTabs/UnrecognizedTab.tsx
+++ b/src/pages/utilities/UnrecognizedUtilityTabs/UnrecognizedTab.tsx
@@ -1,42 +1,58 @@
-import React, { useState } from 'react';
-import { useDispatch } from 'react-redux';
+import React, { useEffect, useState } from 'react';
 import prettyBytes from 'pretty-bytes';
 import moment from 'moment';
-import { countBy, find, forEach, pickBy } from 'lodash';
+import cx from 'classnames';
+import { countBy, find, forEach } from 'lodash';
 import { Icon } from '@mdi/react';
 import {
   mdiChevronLeft, mdiChevronRight,
   mdiDatabaseSearchOutline, mdiDatabaseSyncOutline,
-  mdiDumpTruck, mdiMagnify,
-  mdiLinkVariantPlus, mdiMinusBoxOutline,
-  mdiEyeOffOutline, mdiCloseBoxOutline,
+  mdiDumpTruck, mdiMagnify, mdiRestart,
+  mdiLinkVariantPlus, mdiMinusCircleOutline,
+  mdiEyeOffOutline, mdiCloseCircleOutline,
 } from '@mdi/js';
 
-import Events from '../../../core/events';
 import ShokoPanel from '../../../components/Panels/ShokoPanel';
 import Button from '../../../components/Input/Button';
-import Checkbox from '../../../components/Input/Checkbox';
 import TransitionDiv from '../../../components/TransitionDiv';
 import { useGetImportFoldersQuery } from '../../../core/rtkQuery/importFolderApi';
 
-import type { FileType } from '../../../core/types/api/file';
-import { ImportFolderType } from '../../../core/types/api/import-folder';
+import SeriesLinkPanel from './Components/SeriesLinkPanel';
+import SelectedFilesPanel from './Components/SelectedFilesPanel';
+import EpisodeLinkPanel from './Components/EpisodeLinkPanel';
 
-type Props = {
-  files: Array<FileType>;
-};
-
-function UnrecognizedTab(props: Props) {
-  const { files } = props;
-
-  const dispatch = useDispatch();
+import type { SeriesAniDBSearchResult } from '../../../core/types/api/series';
 
+import {
+  useGetFileUnrecognizedQuery,
+  useLazyPostFileRehashQuery,
+  useLazyPostFileRescanQuery,
+} from '../../../core/rtkQuery/fileApi';
+import FileListPanel from './Components/FileListPanel';
+import type { ImportFolderType } from '../../../core/types/api/import-folder';
+import Input from '../../../components/Input/Input';
+
+function UnrecognizedTab() {
+  const files = useGetFileUnrecognizedQuery({ pageSize: 0 });
   const importFolderQuery = useGetImportFoldersQuery();
   const importFolders = importFolderQuery?.data ?? [] as ImportFolderType[];
+  const [fileRescanTrigger] = useLazyPostFileRescanQuery();
+  const [fileRehashTrigger] = useLazyPostFileRehashQuery();
 
   const [markedItems, setMarkedItems] = useState({} as { [key: number]: boolean });
   const [markedItemsCount, setMarkedItemsCount] = useState(0);
   const [selectedFile, setSelectedFile] = useState(1);
+  const [manualLink, setManualLink] = useState(false);
+  const [selectedSeries, setSelectedSeries] = useState({} as SeriesAniDBSearchResult);
+
+  useEffect(() => {
+    while (files.isLoading);
+    const newMarkedItems = {} as { [key: number]: boolean };
+    forEach(files.data?.List, (file) => {
+      newMarkedItems[file.ID] = false;
+    });
+    setMarkedItems(newMarkedItems);
+  }, []);
 
   const changeSelectedFile = (operation: string) => {
     if (operation === 'prev') {
@@ -50,34 +66,12 @@ function UnrecognizedTab(props: Props) {
     }
   };
 
-  const handleInputChange = (event: any) => {
-    const { id, checked } = event.target;
-    setMarkedItems({ ...markedItems, [id]: checked });
-    setMarkedItemsCount(countBy({ ...markedItems, [id]: checked }).true ?? 0);
-    if (!checked && selectedFile >= markedItemsCount) changeSelectedFile('prev');
+  const changeMarkedItems = (items: { [key: number]: boolean }) => {
+    setMarkedItems(items);
+    setMarkedItemsCount(countBy(items).true ?? 0);
+    if (selectedFile >= markedItemsCount) changeSelectedFile('prev');
   };
 
-  const renderRow = (Id: number, importFolder: string, filename: string, size: number, date: string) => (
-    <tr className="box-border bg-background-nav border border-background-border rounded-md" key={Id}>
-      <td className="py-3.5">
-        <div className="flex items-center justify-center">
-          <Checkbox id={Id.toString()} isChecked={markedItems[Id]} onChange={handleInputChange} />
-        </div>
-      </td>
-      <td className="py-3.5">{importFolder}</td>
-      <td className="py-3.5">{filename}</td>
-      <td className="py-3.5">{prettyBytes(size, { binary: true })}</td>
-      <td className="py-3.5">{moment(date).format('MMMM DD YYYY, HH:mm')}</td>
-    </tr>
-  );
-
-  const rows: Array<React.ReactNode> = [];
-  forEach(files, (file) => {
-    const importFolderId = file.Locations[0].ImportFolderID;
-    const importFolder = find(importFolders, { ID: importFolderId })?.Name ?? '';
-    rows.push(renderRow(file.ID, importFolder, file.Locations[0].RelativePath, file.Size, file.Created));
-  });
-
   const fileInfoTitle = () => {
     if (markedItemsCount > 0) {
       return (
@@ -94,14 +88,14 @@ function UnrecognizedTab(props: Props) {
   };
 
   const renderFileInfo = () => {
-    const selectedFiles = files.filter(item => markedItems[item.ID]);
+    const selectedFiles = files.data?.List.filter(item => markedItems[item.ID])!;
     const selectedFileInfo = selectedFiles[selectedFile - 1];
 
     const importFolderId = selectedFileInfo.Locations[0].ImportFolderID;
     const importFolder = find(importFolders, { ID: importFolderId })?.Path ?? '';
 
     return (
-      <div className="flex flex-col mt-2">
+      <TransitionDiv className="flex flex-col mt-2">
         <div className="flex">
           <div className="flex flex-col w-2/5">
             <div className="font-semibold mb-1">Filename</div>
@@ -118,7 +112,7 @@ function UnrecognizedTab(props: Props) {
             {importFolder}
           </div>
 
-          <div className="flex flex-col w-40">
+          <div className="flex flex-col w-48">
             <div className="font-semibold mb-1">Import Date</div>
             {moment(selectedFileInfo.Created).format('MMMM DD YYYY, HH:mm')}
           </div>
@@ -140,128 +134,125 @@ function UnrecognizedTab(props: Props) {
             {selectedFileInfo.Hashes.SHA1}
           </div>
 
-          <div className="flex flex-col w-40">
+          <div className="flex flex-col w-48">
             <div className="font-semibold mb-1">CRC32</div>
             {selectedFileInfo.Hashes.CRC32}
           </div>
         </div>
-      </div>
+      </TransitionDiv>
     );
   };
 
   const renderPanelOptions = () => (
     <div className="flex">
       <Button onClick={() => changeSelectedFile('prev')}>
-        <Icon path={mdiChevronLeft} size={1} className="opacity-75 text-primary" />
+        <Icon path={mdiChevronLeft} size={1} className="opacity-75 text-highlight-1" />
       </Button>
       <Button onClick={() => changeSelectedFile('next')} className="ml-2">
-        <Icon path={mdiChevronRight} size={1} className="opacity-75 text-primary" />
+        <Icon path={mdiChevronRight} size={1} className="opacity-75 text-highlight-1" />
       </Button>
     </div>
   );
 
   const rescanFiles = (selected = false) => {
     if (selected) {
-      const fileIds = Object.keys(pickBy(markedItems, item => item));
-      forEach(fileIds, fileId => dispatch({ type: Events.UTILITIES_RESCAN, payload: fileId }));
+      forEach(markedItems, (marked, fileId) => {
+        if (marked) fileRescanTrigger(parseInt(fileId)).catch(() => {});
+      });
     } else {
-      forEach(files, file => dispatch({ type: Events.UTILITIES_RESCAN, payload: file.ID }));
+      forEach(files.data?.List, file => fileRescanTrigger(file.ID));
     }
   };
 
   const rehashFiles = (selected = false) => {
     if (selected) {
-      const fileIds = Object.keys(pickBy(markedItems, item => item));
-      forEach(fileIds, fileId => dispatch({ type: Events.UTILITIES_REHASH, payload: fileId }));
+      forEach(markedItems, (marked, fileId) => {
+        if (marked) fileRehashTrigger(parseInt(fileId)).catch(() => {});
+      });
     } else {
-      forEach(files, file => dispatch({ type: Events.UTILITIES_REHASH, payload: file.ID }));
+      forEach(files.data?.List, file => fileRehashTrigger(file.ID));
     }
   };
 
-  const renderCommonOperations = () => (
-    <TransitionDiv className="flex grow">
-      <Button onClick={() => rescanFiles()} className="flex items-center ml-3 font-normal">
-        <Icon path={mdiDatabaseSearchOutline} size={1} className="mr-1"/>
-        Rescan All
-      </Button>
-      <Button onClick={() => rehashFiles()} className="flex items-center ml-3 font-normal">
-        <Icon path={mdiDatabaseSyncOutline} size={1} className="mr-1"/>
-        Rehash All
-      </Button>
-      <Button onClick={() => {}} className="flex items-center ml-3 font-normal">
-        <Icon path={mdiDumpTruck} size={1} className="mr-1"/>
-        AVDump All
-      </Button>
-    </TransitionDiv>
-  );
+  const cancelSelection = () => {
+    const tempMarkedItems = markedItems;
+    forEach(tempMarkedItems, (_, key) => {
+      tempMarkedItems[key] = false;
+    });
+    changeMarkedItems(tempMarkedItems);
+  };
 
-  const renderOperations = () => (
-    <TransitionDiv className="flex grow">
-      <Button onClick={() => {}} className="flex items-center ml-3 font-normal">
-        <Icon path={mdiLinkVariantPlus} size={1} className="mr-1"/>
-        Manually Link
-      </Button>
-      <Button onClick={() => rescanFiles(true)} className="flex items-center ml-3 font-normal">
-        <Icon path={mdiDatabaseSearchOutline} size={1} className="mr-1"/>
-        Rescan
-      </Button>
-      <Button onClick={() => rehashFiles(true)} className="flex items-center ml-3 font-normal">
-        <Icon path={mdiDatabaseSyncOutline} size={1} className="mr-1"/>
-        Rehash
+  const renderOperations = (common = false) => {
+    const renderButton = (onClick: (...args: any) => void, icon: string, name: string) => (
+      <Button onClick={onClick} className="flex items-center mr-3 font-normal">
+        <Icon path={icon} size={1} className="mr-1"/>
+        {name}
       </Button>
-      <Button onClick={() => {}} className="flex items-center ml-3 font-normal">
-        <Icon path={mdiDumpTruck} size={1} className="mr-1"/>
-        AVDump
-      </Button>
-      <Button onClick={() => {}} className="flex items-center ml-3 font-normal">
-        <Icon path={mdiEyeOffOutline} size={1} className="mr-1"/>
-        Ignore
-      </Button>
-      <Button onClick={() => {}} className="flex items-center ml-3 font-normal">
-        <Icon path={mdiMinusBoxOutline} size={1} className="mr-1"/>
-        Delete
-      </Button>
-      <Button onClick={() => {}} className="flex items-center ml-3 font-normal">
-        <Icon path={mdiCloseBoxOutline} size={1} className="mr-1"/>
-        Cancel Selection
-      </Button>
-    </TransitionDiv>
-  );
+    );
+
+    return (
+      <TransitionDiv className="flex grow">
+        {common ? (
+          <>
+            {renderButton(() => files.refetch(), mdiRestart, 'Refresh')}
+            {renderButton(() => rescanFiles(), mdiDatabaseSearchOutline, 'Rescan All')}
+            {renderButton(() => rehashFiles(), mdiDatabaseSyncOutline, 'Rehash All')}
+            {renderButton(() => {}, mdiDumpTruck, 'AVDump All')}
+          </>
+        ) : (
+          <>
+            {renderButton(() => setManualLink(!manualLink), mdiLinkVariantPlus, 'Manually Link')}
+            {renderButton(() => rescanFiles(true), mdiDatabaseSearchOutline, 'Rescan')}
+            {renderButton(() => rehashFiles(true), mdiDatabaseSyncOutline, 'Rehash')}
+            {renderButton(() => {}, mdiDumpTruck, 'AVDump')}
+            {renderButton(() => {}, mdiEyeOffOutline, 'Ignore')}
+            {renderButton(() => {}, mdiMinusCircleOutline, 'Delete')}
+            {renderButton(() => cancelSelection(), mdiCloseCircleOutline, 'Cancel Selection')}
+          </>
+        )}
+      </TransitionDiv>
+    );
+  };
+
+  const updateSelectedSeries = (series: SeriesAniDBSearchResult) => setSelectedSeries(series);
 
   return (
     <TransitionDiv className="flex flex-col grow">
 
       <div className="flex flex-col grow">
-        <div className="box-border flex bg-background-nav border border-background-border items-center rounded-md px-3 py-2">
-          <Icon path={mdiMagnify} size={1} />
-          <input type="text" placeholder="Search..." className="ml-2 bg-background-nav border-b border-font-main" />
-          {markedItemsCount > 0 ? renderOperations() : renderCommonOperations()}
-          <div className="ml-auto text-highlight-2 font-semibold">{markedItemsCount} Files Selected</div>
-        </div>
-        <div className="flex mt-4 overflow-y-auto grow basis-0 items-start">
-          <table className="table-fixed text-left w-full">
-            <thead className="sticky top-0">
-            <tr className="box-border bg-background-nav border border-background-border rounded-md">
-              {/*TODO: Select all checkbox*/}
-              <th className="w-20 py-3.5" />
-              <th className="w-52 py-3.5 font-semibold">Import Folder</th>
-              <th className="w-auto py-3.5 font-semibold">Filename</th>
-              <th className="w-32 py-3.5 font-semibold">Size</th>
-              <th className="w-56 py-3.5 font-semibold">Date</th>
-            </tr>
-            </thead>
-            <tbody>
-            {rows}
-            </tbody>
-          </table>
+        <div className="flex">
+          <Input type="text" placeholder="Search..." className="bg-background-nav mr-2" startIcon={mdiMagnify} id="search" value="" onChange={() => {}} />
+          <div className={cx(['box-border flex grow bg-background-nav border border-background-border items-center rounded-md px-3 py-2', manualLink && 'pointer-events-none opacity-75'])}>
+            {renderOperations(markedItemsCount === 0)}
+            <div className="ml-auto text-highlight-2 font-semibold">{markedItemsCount} Files Selected</div>
+          </div>
+          {manualLink && (
+            <TransitionDiv className="flex pl-2.5 items-center">
+              <Button onClick={() => {
+                setManualLink(false);
+                setSelectedSeries({} as SeriesAniDBSearchResult);
+              }} className="px-3 py-2 bg-background-alt rounded-md border !border-background-border">Cancel</Button>
+              <Button onClick={() => {}} className="px-3 py-2 bg-highlight-1 rounded-md border !border-background-border ml-2">Save</Button>
+            </TransitionDiv>
+          )}
         </div>
+        {manualLink ? (
+          <TransitionDiv className="flex mt-5 overflow-y-auto grow gap-x-4">
+            <SelectedFilesPanel files={files.data?.List.filter(item => markedItems[item.ID])!} selectedSeries={selectedSeries} />
+            {selectedSeries?.ID
+              ? (<EpisodeLinkPanel selectedSeries={selectedSeries} setSeries={updateSelectedSeries} />)
+              : (<SeriesLinkPanel setSeries={updateSelectedSeries}/>)}
+          </TransitionDiv>
+        ) : (
+          <FileListPanel markedItems={markedItems} setMarkedItems={changeMarkedItems} />
+        )}
       </div>
 
-      <ShokoPanel title={fileInfoTitle()} className="h-72 mt-4" options={renderPanelOptions()}>
+      <ShokoPanel title={fileInfoTitle()} className="!h-48 mt-4" options={renderPanelOptions()}>
         {markedItemsCount === 0 ? (
-          <div className="flex items-center justify-center mt-2 font-semibold">
+          <TransitionDiv className="flex items-center justify-center mt-2 font-semibold">
             No File(s) Selected
-          </div>
+          </TransitionDiv>
         ) : renderFileInfo()}
       </ShokoPanel>
 
diff --git a/src/pages/utilities/UtilitiesPage.tsx b/src/pages/utilities/UtilitiesPage.tsx
index dba8e5247..200971914 100644
--- a/src/pages/utilities/UtilitiesPage.tsx
+++ b/src/pages/utilities/UtilitiesPage.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
-
-import UnrecognizedUtility from './UnrecognizedUtility';
+import { Outlet } from 'react-router';
 
 function UtilitiesPage() {
   return (
     <div className="flex flex-col p-9 h-full">
-      <UnrecognizedUtility />
+      <Outlet />
     </div>
   );
 }