diff --git a/src/components/Panels/ShokoPanel.tsx b/src/components/Panels/ShokoPanel.tsx
index 52fc54cae..95c7b2338 100644
--- a/src/components/Panels/ShokoPanel.tsx
+++ b/src/components/Panels/ShokoPanel.tsx
@@ -1,4 +1,6 @@
 import React, { ReactNode } from 'react';
+import { Icon } from '@mdi/react';
+import { mdiLoading } from '@mdi/js';
 
 type Props = {
   title: string;
@@ -9,7 +11,7 @@ type Props = {
   titleTabs?: ReactNode;
 };
 
-const ShokoPanel = ({ className, title, options, children, titleTabs }: Props) => (
+const ShokoPanel = ({ className, title, options, children, titleTabs, isFetching }: Props) => (
     <div className={`${className ?? ''} flex flex-col overflow-hidden h-full`}>
         <div className="flex justify-between items-center mr-2">
           <span className="flex font-semibold text-base">{title}{titleTabs}</span>
@@ -22,8 +24,8 @@ const ShokoPanel = ({ className, title, options, children, titleTabs }: Props) =
             </div>
         </div>
       <span className="bg-background-border my-4 h-0.5 flex-shrink-0" />
-      <div className="flex flex-col mr-2 font-open-sans">
-        {children}
+      <div className="flex grow flex-col mr-2 font-open-sans">
+        {isFetching ? <div className="flex grow justify-center items-center"><Icon path={mdiLoading} spin size={1} /></div> : children}
       </div>
     </div>
 );
diff --git a/src/core/sagas/dashboard.ts b/src/core/sagas/dashboard.ts
index 5d5f2fd46..e090875cd 100644
--- a/src/core/sagas/dashboard.ts
+++ b/src/core/sagas/dashboard.ts
@@ -5,6 +5,7 @@ import ApiDashboard from '../api/v3/dashboard';
 
 import {
   setFetched,
+  unsetFetched,
   setSeriesSummary,
   setStats,
   setRecentEpisodes,
@@ -71,9 +72,11 @@ function* getDashboardContinueWatching() {
   }
   
   yield put(setContinueWatching(resultJson.data));
+  yield put(setFetched('continueWatching'));
 }
 
 function* getDashboardUpcomingAnime(action: PayloadAction<boolean>) {
+  yield put(unsetFetched('upcomingAnime'));
   const resultJson = yield call(ApiDashboard.getDashboardAniDBCalendar, action.payload);
   if (resultJson.error) {
     toast.error(resultJson.message);
@@ -81,6 +84,7 @@ function* getDashboardUpcomingAnime(action: PayloadAction<boolean>) {
   }
 
   yield put(setUpcomingAnime(resultJson.data));
+  yield put(setFetched('upcomingAnime'));
 }
 
 export default {
diff --git a/src/core/sagas/mainpage.ts b/src/core/sagas/mainpage.ts
index 9a277b04d..2dc34f456 100644
--- a/src/core/sagas/mainpage.ts
+++ b/src/core/sagas/mainpage.ts
@@ -31,7 +31,6 @@ function* eventMainPageLoad() {
     yield call(SagaImportFolder.getImportFolders),
     yield call(SagaDashboard.getDashboardRecentlyAddedEpisodes),
     yield call(SagaDashboard.getDashboardRecentlyAddedSeries),
-    yield call(SagaFile.getRecentFiles),
     yield call(SagaFile.getUnrecognizedFiles),
     yield call(SagaDashboard.getDashboardContinueWatching),
     yield call(SagaDashboard.getDashboardUpcomingAnime, { type: Events.DASHBOARD_UPCOMING_ANIME, payload: false }),
diff --git a/src/pages/dashboard/panels/ContinueWatching.tsx b/src/pages/dashboard/panels/ContinueWatching.tsx
index e5c7908d9..2324f3a3a 100644
--- a/src/pages/dashboard/panels/ContinueWatching.tsx
+++ b/src/pages/dashboard/panels/ContinueWatching.tsx
@@ -6,6 +6,7 @@ import { DashboardEpisodeDetailsType } from '../../../core/types/api/dashboard';
 
 const ContinueWatching = () => {
   const items = useSelector((state: RootState) => state.mainpage.continueWatching);
+  const hasFetched = useSelector((state: RootState) => state.mainpage.fetched.continueWatching);
 
   const renderDetails = (item: DashboardEpisodeDetailsType ) => {
 
@@ -17,7 +18,7 @@ const ContinueWatching = () => {
   };
   
   return (
-    <ShokoPanel title="Continue Watching">
+    <ShokoPanel title="Continue Watching" isFetching={!hasFetched}>
       <div className="flex flex-nowrap overflow-x-auto shoko-scrollbar h-90">{items.map(item => renderDetails(item))}</div>
     </ShokoPanel>
   );
diff --git a/src/pages/dashboard/panels/ImportBreakdown.tsx b/src/pages/dashboard/panels/ImportBreakdown.tsx
index 7a095c991..4846bdaf0 100644
--- a/src/pages/dashboard/panels/ImportBreakdown.tsx
+++ b/src/pages/dashboard/panels/ImportBreakdown.tsx
@@ -1,46 +1,18 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useSelector } from 'react-redux';
-import cx from 'classnames';
 
 import { RootState } from '../../../core/store';
 import ShokoPanel from '../../../components/Panels/ShokoPanel';
-import Button from '../../../components/Input/Button';
-import ImportedTab from './ImportBreakdownTabs/ImportedTab';
 import UnrecognizedTab from './ImportBreakdownTabs/UnrecognizedTab';
 
 function ImportBreakdown() {
-  const hasFetchedRecents = useSelector((state: RootState) => state.mainpage.fetched.recentFiles);
   const hasFetchedUnrecognized = useSelector(
     (state: RootState) => state.mainpage.fetched.unrecognizedFiles,
   );
 
-  const [activeTab, setActiveTab] = useState('unrecognized');
-
-  const renderOptions = () => (
-    <div className="font-open-sans font-semibold">
-      <Button onClick={() => setActiveTab('imported')} className={cx(['mr-2 font-open-sans font-semibold', activeTab === 'imported' && 'color-highlight-1'])}>
-        Imported
-      </Button>
-      <Button onClick={() => setActiveTab('unrecognized')} className={cx(['mr-2 font-open-sans font-semibold', activeTab === 'unrecognized' && 'color-highlight-1'])}>
-        Unrecognized
-      </Button>
-    </div>
-  );
-
-  const renderContent = () => {
-    switch (activeTab) {
-      case 'imported':
-        return <ImportedTab />;
-      case 'unrecognized':
-        return <UnrecognizedTab />;
-      default:
-        return <UnrecognizedTab />;
-    }
-  };
-
   return (
-    <ShokoPanel title="Unrecognized" options={renderOptions()} isFetching={!(activeTab === 'unrecognized' ? hasFetchedUnrecognized : hasFetchedRecents)}>
-      {renderContent()}
+    <ShokoPanel title="Unrecognized" isFetching={!hasFetchedUnrecognized}>
+      <UnrecognizedTab />
     </ShokoPanel>
   );
 }
diff --git a/src/pages/dashboard/panels/ImportBreakdownTabs/ImportedTab.tsx b/src/pages/dashboard/panels/ImportBreakdownTabs/ImportedTab.tsx
deleted file mode 100644
index bb511ceb2..000000000
--- a/src/pages/dashboard/panels/ImportBreakdownTabs/ImportedTab.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { forEach, orderBy } from 'lodash';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCaretDown, faCaretUp, faCircleNotch } from '@fortawesome/free-solid-svg-icons';
-import prettyBytes from 'pretty-bytes';
-import moment from 'moment';
-import cx from 'classnames';
-
-import { RootState } from '../../../../core/store';
-import Events from '../../../../core/events';
-import Button from '../../../../components/Input/Button';
-
-import type { FileDetailedType } from '../../../../core/types/api/file';
-import TransitionDiv from '../../../../components/TransitionDiv';
-
-const epTypes = {
-  Normal: 'E',
-  Special: 'S',
-  Parody: 'P',
-  ThemeSong: 'C',
-  Trailer: 'T',
-  Other: 'O',
-  Unknown: 'X',
-};
-
-function ImportedTab() {
-  const dispatch = useDispatch();
-
-  const items = useSelector((state: RootState) => state.mainpage.recentFiles);
-  const recentFileDetails = useSelector((state: RootState) => state.mainpage.recentFileDetails);
-
-  const [expandedItems, setExpandedItems] = useState({} as { [ID: number]: boolean });
-
-  useEffect(() => {
-    forEach(items, (item) => {
-      expandedItems[item.ID] = false;
-    });
-
-    setExpandedItems(expandedItems);
-  });
-
-  const getDetails = (fileId: number, seriesId: number, episodeId: number) => dispatch(
-    { type: Events.MAINPAGE_RECENT_FILE_DETAILS, payload: { fileId, seriesId, episodeId } },
-  );
-
-  const handleExpand = (item: FileDetailedType) => {
-    expandedItems[item.ID] = !expandedItems[item.ID];
-
-    const { SeriesIDs } = item;
-    getDetails(item.ID, SeriesIDs[0].SeriesID.ID, SeriesIDs[0].EpisodeIDs[0].ID);
-
-    setExpandedItems(expandedItems);
-  };
-
-  const getFileInfo = (
-    resolution = 'Unknown',
-    source = 'Unknown',
-    audioLanguages: Array<string> = [],
-    subtitleLanguages: Array<string> = [],
-    videoCodec = 'Unknown',
-  ) => {
-    let info = `${resolution} | ${videoCodec} | ${source.toUpperCase()} | `;
-    if (audioLanguages.length > 2) info += 'Multi Audio';
-    else if (audioLanguages.length === 2) info += 'Dual Audio';
-    else if (subtitleLanguages[0] !== 'none') info += 'Subbed';
-    else info += 'Raw';
-
-    return info;
-  };
-
-  const renderDate = (item: FileDetailedType) => (
-    <div key={`${item.ID}-date`} className="flex mt-3 first:mt-0">
-      <span className="font-semibold">{moment(item.Created).format('yyyy-MM-DD')} / {moment(item.Created).format('hh:mm A')}</span>
-      <Button
-        className="color-highlight-1 ml-2"
-        onClick={() => handleExpand(item)}
-        tooltip={expandedItems[item.ID] ? 'Hide Details' : 'Show Details'}
-      >
-        {
-          expandedItems[item.ID]
-            ? <FontAwesomeIcon icon={faCaretUp} />
-            : <FontAwesomeIcon icon={faCaretDown} />
-        }
-      </Button>
-    </div>
-  );
-
-  const renderName = (idx: number, serverPath: string) => (
-    <span key={`${idx}-name`} className={cx(['my-1 break-words mr-2', expandedItems[idx] && 'bg-color-4 px-3 py-1'])}>{serverPath}</span>
-  );
-
-  const renderDetails = (item: FileDetailedType) => {
-    const fileDetails = recentFileDetails[item.ID];
-    const { fetched, details } = fileDetails ?? {};
-
-    return (
-      <div key={`${item.ID}-details`} className="flex">
-        {
-          expandedItems[item.ID] && (!fetched
-            ? (
-              <div className="flex px-4 grow">
-                <FontAwesomeIcon icon={faCircleNotch} spin className="text-2xl color-highlight-2" />
-              </div>
-            )
-            : (
-              <TransitionDiv className="flex flex-col grow px-2" enter="duration-1000">
-                <div className="flex py-1 px-4">
-                  <span className="w-1/6">Series</span>
-                  {details.SeriesName ?? 'Unknown'}
-                </div>
-                <div className="flex py-1 px-4 bg-color-3">
-                  <span className="w-1/6">Episode</span>
-                  {`${(epTypes[details.EpisodeType ?? 'Unknown']) + details.EpisodeNumber}: ${details.EpisodeName ?? 'Unknown'}`}
-                </div>
-                <div className="flex py-1 px-4">
-                  <span className="w-1/6">Group</span>
-                  {details.ReleaseGroup ?? 'Unknown'}
-                </div>
-                <div className="flex py-1 px-4 bg-color-3">
-                  <span className="w-1/6">Size</span>
-                  {prettyBytes(item.Size, { binary: true })}
-                </div>
-                <div className="flex py-1 px-4">
-                  <span className="w-1/6">Video Info</span>
-                  {getFileInfo(
-                    item.RoundedStandardResolution,
-                    details.Source,
-                    details.AudioLanguages,
-                    details.SubtitleLanguages,
-                    details.VideoCodec,
-                  )}
-                </div>
-              </TransitionDiv>
-            )
-          )
-        }
-      </div>
-    );
-  };
-
-  const sortedItems = orderBy(items, ['ID'], ['desc']);
-  const files: Array<React.ReactNode> = [];
-
-  forEach(sortedItems, (item) => {
-    if (item?.SeriesIDs && item?.Locations && item?.Locations?.length !== 0) {
-      files.push(renderDate(item));
-      files.push(renderName(item.ID, item.Locations[0].RelativePath));
-      files.push(renderDetails(item));
-    }
-  });
-
-  if (files.length === 0) {
-    return (<div className="flex justify-center font-semibold mt-4" key="no-imported">No imported files!</div>);
-  }
-
-  return (<React.Fragment>{files}</React.Fragment>);
-}
-
-export default ImportedTab;
diff --git a/src/pages/dashboard/panels/ImportFolders.tsx b/src/pages/dashboard/panels/ImportFolders.tsx
index 6f8b25e9b..009598ed0 100644
--- a/src/pages/dashboard/panels/ImportFolders.tsx
+++ b/src/pages/dashboard/panels/ImportFolders.tsx
@@ -68,10 +68,8 @@ function ImportFolders() {
   };
 
   const renderOptions = () => (
-    <div>
-      <Button className="color-highlight-1 mx-2" onClick={() => setImportFolderModalStatus(true)} tooltip="Add Folder">
+    <div className="color-highlight-1 mx-2 cursor-pointer" onClick={() => setImportFolderModalStatus(true)} title="Add Folder">
         <Icon path={mdiFolderPlusOutline} size={1} horizontal vertical rotate={180}/>
-      </Button>
     </div>
   );
 
diff --git a/src/pages/dashboard/panels/QueueProcessor.tsx b/src/pages/dashboard/panels/QueueProcessor.tsx
index 590b3f7d0..771787918 100644
--- a/src/pages/dashboard/panels/QueueProcessor.tsx
+++ b/src/pages/dashboard/panels/QueueProcessor.tsx
@@ -70,13 +70,13 @@ function QueueProcessor() {
     return (
       <React.Fragment>
         {paused ? (
-          <Button className="color-highlight-1 mx-2" onClick={() => handleOperation!('Start')} tooltip="Resume All">
+          <div className="color-highlight-1 mx-2 cursor-pointer" onClick={() => handleOperation!('Start')} title="Resume All">
             <Icon path={mdiCloseCircleOutline} size={1} horizontal vertical rotate={180} />
-          </Button>
+          </div>
         ) : (
-          <Button className="color-highlight-1 mx-2" onClick={() => handleOperation!('Pause')} tooltip="Pause All">
+          <div className="color-highlight-1 mx-2 cursor-pointer" onClick={() => handleOperation!('Pause')} title="Pause All">
             <Icon path={mdiPauseCircleOutline} size={1} horizontal vertical rotate={180} />
-          </Button>
+          </div>
         )}
       </React.Fragment>
     );
diff --git a/src/pages/dashboard/panels/RecentlyImported.tsx b/src/pages/dashboard/panels/RecentlyImported.tsx
index deb98c5e3..2649a0a79 100644
--- a/src/pages/dashboard/panels/RecentlyImported.tsx
+++ b/src/pages/dashboard/panels/RecentlyImported.tsx
@@ -10,9 +10,9 @@ import { SeriesType } from '../../../core/types/api/series';
 
 const Title = ({ showSeries, setShowSeries }) => (<div>
   <span className="px-2">&gt;</span>
-  <span className={cx({ 'font-semibold': showSeries === false, 'text-highlight-1': showSeries === false })} onClick={() => { setShowSeries(false);}}>Episodes</span>
+  <span className={cx({ 'cursor-pointer': true, 'font-semibold': showSeries === false, 'text-highlight-1': showSeries === false })} onClick={() => { setShowSeries(false);}}>Episodes</span>
 <span className="mx-2">|</span>
-<span className={cx({ 'font-semibold': showSeries, 'text-highlight-1': showSeries })} onClick={() => { setShowSeries(true);}}>Series</span>
+<span className={cx({ 'cursor-pointer': true, 'font-semibold': showSeries, 'text-highlight-1': showSeries })} onClick={() => { setShowSeries(true);}}>Series</span>
 </div>
 );
 
diff --git a/src/pages/dashboard/panels/UpcomingAnime.tsx b/src/pages/dashboard/panels/UpcomingAnime.tsx
index e92fc2ae8..5ee0df675 100644
--- a/src/pages/dashboard/panels/UpcomingAnime.tsx
+++ b/src/pages/dashboard/panels/UpcomingAnime.tsx
@@ -18,14 +18,15 @@ const CalendarConfig: moment.CalendarSpec = {
 
 const Title = ({ showAll, setShowAll }) => (<div>
     <span className="px-2">&gt;</span>
-    <span className={cx({ 'font-semibold': showAll === false, 'text-highlight-1': showAll === false })} onClick={() => { setShowAll(false);}}>My Collection</span>
+    <span className={cx({ 'cursor-pointer': true, 'font-semibold': showAll === false, 'text-highlight-1': showAll === false })} onClick={() => { setShowAll(false);}}>My Collection</span>
   <span className="mx-2">|</span>
-  <span className={cx({ 'font-semibold': showAll, 'text-highlight-1': showAll })} onClick={() => { setShowAll(true);}}>All</span>
+  <span className={cx({ 'cursor-pointer': true, 'font-semibold': showAll, 'text-highlight-1': showAll })} onClick={() => { setShowAll(true);}}>All</span>
 </div>
 );
 
 const UpcomingAnime = () => {
   const items = useSelector((state: RootState) => state.mainpage.upcomingAnime);
+  const hasFetched = useSelector((state: RootState) => state.mainpage.fetched.upcomingAnime);
   const [showAll, setShowAll] = useState(false);
 
   const dispatch = useDispatch();
@@ -49,7 +50,7 @@ const UpcomingAnime = () => {
   };
 
   return (
-    <ShokoPanel title="Upcoming Anime" titleTabs={<Title showAll={showAll} setShowAll={updatePanel} />}>
+    <ShokoPanel title="Upcoming Anime" isFetching={!hasFetched} titleTabs={<Title showAll={showAll} setShowAll={updatePanel} />}>
       <div className="flex flex-nowrap overflow-x-auto shoko-scrollbar h-90 pb-5">{items.map(item => renderDetails(item))}</div>
     </ShokoPanel>
   );