From 310dcb658a6fc19a6061301de20172eb52f9f772 Mon Sep 17 00:00:00 2001
From: Harshith Mohan <26010946+harshithmohan@users.noreply.github.com>
Date: Wed, 11 Dec 2024 01:07:05 +0530
Subject: [PATCH 1/2] Add more links to collection stats panel

---
 src/pages/dashboard/panels/CollectionStats.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/pages/dashboard/panels/CollectionStats.tsx b/src/pages/dashboard/panels/CollectionStats.tsx
index 5e0e3592..a3bcf1da 100644
--- a/src/pages/dashboard/panels/CollectionStats.tsx
+++ b/src/pages/dashboard/panels/CollectionStats.tsx
@@ -62,7 +62,12 @@ function CollectionStats() {
       title="Collection Size"
       value={`${prettyBytes(statsQuery.data?.FileSize ?? 0, { binary: true })}`}
     />,
-    <Item key="files" title="Files" value={statsQuery.data?.FileCount} />,
+    <Item
+      key="files"
+      title="Files"
+      value={statsQuery.data?.FileCount}
+      link="/webui/utilities/file-search"
+    />,
     <Item
       key="unrecognized-files"
       title="Unknown Files"
@@ -73,9 +78,14 @@ function CollectionStats() {
       key="multiple-files"
       title="Duplicate Episodes"
       value={statsQuery.data?.EpisodesWithMultipleFiles}
-      link="/webui/utilities/release-management"
+      link="/webui/utilities/release-management/multiples"
+    />,
+    <Item
+      key="duplicate-files"
+      title="Duplicate Hashes"
+      value={statsQuery.data?.EpisodesWithMultipleFiles}
+      link="/webui/utilities/release-management/duplicates"
     />,
-    <Item key="duplicate-files" title="Duplicate Hashes" value={statsQuery.data?.FilesWithDuplicateLocations} />,
   ];
 
   const childrenThird = [

From 3d81f13c4b4e99dbd755851ebebb0d78eb08bb11 Mon Sep 17 00:00:00 2001
From: Harshith Mohan <26010946+harshithmohan@users.noreply.github.com>
Date: Wed, 11 Dec 2024 01:17:45 +0530
Subject: [PATCH 2/2] Fix utility titles, add first run titles

---
 src/components/ErrorBoundary.tsx              | 149 +++++++++---------
 src/pages/firstrun/Acknowledgement.tsx        |  73 +++++----
 src/pages/firstrun/AniDBAccount.tsx           | 101 ++++++------
 src/pages/firstrun/DataCollection.tsx         |  61 +++----
 src/pages/firstrun/ImportFolders.tsx          |   1 +
 src/pages/firstrun/LocalAccount.tsx           |  73 +++++----
 src/pages/firstrun/MetadataSources.tsx        |  67 ++++----
 src/pages/firstrun/StartServer.tsx            |  57 +++----
 src/pages/login/LoginPage.tsx                 |   1 +
 src/pages/nomatch/index.tsx                   |  13 +-
 src/pages/unsupported/UnsupportedPage.tsx     | 117 +++++++-------
 src/pages/utilities/FileSearch.tsx            |   2 +-
 src/pages/utilities/ReleaseManagement.tsx     |   2 +-
 src/pages/utilities/Renamer.tsx               |   2 +-
 .../utilities/SeriesWithoutFilesUtility.tsx   |   2 +-
 .../IgnoredFilesTab.tsx                       |   2 +-
 .../ManuallyLinkedTab.tsx                     |   2 +-
 .../UnrecognizedTab.tsx                       |   2 +-
 18 files changed, 378 insertions(+), 349 deletions(-)

diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index 7fab2b00..03538b45 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -44,89 +44,92 @@ const ErrorBoundary = ({ error, resetError }: { error?: Error, resetError?: () =
   console.error(error, routeError);
 
   return (
-    <div className="relative flex grow items-center justify-center overflow-hidden p-6">
-      <div className="z-20 flex h-full max-w-[56.4375rem] flex-col items-center justify-center gap-y-4 overflow-y-auto md:gap-y-6">
-        <div className="text-4xl text-panel-text md:text-7xl">Congratulations!</div>
-        <div className="text-2xl text-panel-text md:text-5xl">You Broke The Web UI!</div>
-        <pre className="flex max-h-[25rem] max-w-full flex-col overflow-y-auto whitespace-pre-wrap rounded-lg border border-panel-border bg-panel-input p-4 md:p-6">
-          The information below is absolutely (maybe) useless!
-          <br />
-          <br />
-          {error ? `${error.message}\n${error.stack}` : routeError.data}
-        </pre>
-        {routeError?.status === 404
-          ? (
-            <Button
-              onClick={() => navigate('/webui', { replace: true })}
-              className="px-4 py-2 drop-shadow-md"
-              buttonType="primary"
-            >
-              Go back home
-            </Button>
-          )
-          : (
-            <>
-              <div className="flex flex-col gap-y-4">
-                <div>Lets get you back into the Web UI.</div>
-                <div>
-                  If you are seeing this page after updating, select&nbsp;
-                  <span className="font-semibold text-panel-text-important">Force Update to Stable Web UI</span>
-                  , otherwise select&nbsp;
-                  <span className="font-semibold text-panel-text-important">Logout of Web UI</span>
-                  &nbsp;to clear local storage.
+    <>
+      <title>Error! | Shoko</title>
+      <div className="relative flex grow items-center justify-center overflow-hidden p-6">
+        <div className="z-20 flex h-full max-w-[56.4375rem] flex-col items-center justify-center gap-y-4 overflow-y-auto md:gap-y-6">
+          <div className="text-4xl text-panel-text md:text-7xl">Congratulations!</div>
+          <div className="text-2xl text-panel-text md:text-5xl">You Broke The Web UI!</div>
+          <pre className="flex max-h-[25rem] max-w-full flex-col overflow-y-auto whitespace-pre-wrap rounded-lg border border-panel-border bg-panel-input p-4 md:p-6">
+            The information below is absolutely (maybe) useless!
+            <br />
+            <br />
+            {error ? `${error.message}\n${error.stack}` : routeError.data}
+          </pre>
+          {routeError?.status === 404
+            ? (
+              <Button
+                onClick={() => navigate('/webui', { replace: true })}
+                className="px-4 py-2 drop-shadow-md"
+                buttonType="primary"
+              >
+                Go back home
+              </Button>
+            )
+            : (
+              <>
+                <div className="flex flex-col gap-y-4">
+                  <div>Lets get you back into the Web UI.</div>
+                  <div>
+                    If you are seeing this page after updating, select&nbsp;
+                    <span className="font-semibold text-panel-text-important">Force Update to Stable Web UI</span>
+                    , otherwise select&nbsp;
+                    <span className="font-semibold text-panel-text-important">Logout of Web UI</span>
+                    &nbsp;to clear local storage.
+                  </div>
+                  <div>
+                    Still need help? Hop on our&nbsp;
+                    <a
+                      href="https://discord.gg/vpeHDsg"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="font-semibold text-panel-text-primary"
+                    >
+                      Discord
+                    </a>
+                    &nbsp;server and provide the above error.
+                  </div>
                 </div>
-                <div>
-                  Still need help? Hop on our&nbsp;
-                  <a
-                    href="https://discord.gg/vpeHDsg"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="font-semibold text-panel-text-primary"
+                <div className="flex flex-col gap-y-2 md:flex-row md:gap-x-4">
+                  <Button
+                    onClick={handleStableWebUiUpdate}
+                    className="px-4 py-2 drop-shadow-md"
+                    buttonType="primary"
+                    loading={updateChannel === 'Stable' && isUpdateWebuiPending}
                   >
-                    Discord
-                  </a>
-                  &nbsp;server and provide the above error.
-                </div>
-              </div>
-              <div className="flex flex-col gap-y-2 md:flex-row md:gap-x-4">
-                <Button
-                  onClick={handleStableWebUiUpdate}
-                  className="px-4 py-2 drop-shadow-md"
-                  buttonType="primary"
-                  loading={updateChannel === 'Stable' && isUpdateWebuiPending}
-                >
-                  Force update to Stable Web UI
-                </Button>
+                    Force update to Stable Web UI
+                  </Button>
+
+                  {versionQuery.data?.Server.ReleaseChannel !== 'Stable' && (
+                    <Button
+                      onClick={handleDevWebUiUpdate}
+                      className="px-4 py-2 drop-shadow-md"
+                      buttonType="primary"
+                      loading={updateChannel === 'Dev' && isUpdateWebuiPending}
+                    >
+                      Force update to Dev Web UI
+                    </Button>
+                  )}
 
-                {versionQuery.data?.Server.ReleaseChannel !== 'Stable' && (
                   <Button
-                    onClick={handleDevWebUiUpdate}
+                    onClick={handleLogout}
                     className="px-4 py-2 drop-shadow-md"
                     buttonType="primary"
-                    loading={updateChannel === 'Dev' && isUpdateWebuiPending}
                   >
-                    Force update to Dev Web UI
+                    Logout of Web UI
                   </Button>
-                )}
+                </div>
+              </>
+            )}
+        </div>
 
-                <Button
-                  onClick={handleLogout}
-                  className="px-4 py-2 drop-shadow-md"
-                  buttonType="primary"
-                >
-                  Logout of Web UI
-                </Button>
-              </div>
-            </>
-          )}
+        <img
+          src={ShokoMascot}
+          alt="mascot"
+          className="absolute -bottom-40 -right-36 z-10 opacity-30"
+        />
       </div>
-
-      <img
-        src={ShokoMascot}
-        alt="mascot"
-        className="absolute -bottom-40 -right-36 z-10 opacity-30"
-      />
-    </div>
+    </>
   );
 };
 
diff --git a/src/pages/firstrun/Acknowledgement.tsx b/src/pages/firstrun/Acknowledgement.tsx
index e601ab34..403ef956 100644
--- a/src/pages/firstrun/Acknowledgement.tsx
+++ b/src/pages/firstrun/Acknowledgement.tsx
@@ -20,42 +20,45 @@ function Acknowledgement() {
   };
 
   return (
-    <TransitionDiv className="flex max-w-[38rem] flex-col justify-center gap-y-6 text-justify">
-      <div className="text-xl font-semibold">Acknowledgement</div>
-      <div>
-        It is important to clarify that Shoko is an anime cataloging program and not a standalone streaming service.
-        Therefore, it requires access to physical files for playback. Additionally, Shoko does not offer any services
-        for obtaining or downloading anime series.
-      </div>
-      <div>
-        THE SOFTWARE IS PROVIDED &quot;AS IS&quot;, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
-        LIMITED TO THE WARRANTIES OF MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT
-        SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-        OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
-        DEALINGS IN THE SOFTWARE.
-      </div>
-      <div className="font-semibold text-panel-text-important">
-        We are constantly seeking talented individuals to join our team! If you believe you have the skills and
-        expertise to contribute, we invite you to come and chat with us on&nbsp;
-        <a
-          href="https://discord.gg/vpeHDsg"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-panel-text-primary hover:underline"
+    <>
+      <title>First Run &gt; Acknowledgement | Shoko</title>
+      <TransitionDiv className="flex max-w-[38rem] flex-col justify-center gap-y-6 text-justify">
+        <div className="text-xl font-semibold">Acknowledgement</div>
+        <div>
+          It is important to clarify that Shoko is an anime cataloging program and not a standalone streaming service.
+          Therefore, it requires access to physical files for playback. Additionally, Shoko does not offer any services
+          for obtaining or downloading anime series.
+        </div>
+        <div>
+          THE SOFTWARE IS PROVIDED &quot;AS IS&quot;, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
+          NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
+          EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+          AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+          OR OTHER DEALINGS IN THE SOFTWARE.
+        </div>
+        <div className="font-semibold text-panel-text-important">
+          We are constantly seeking talented individuals to join our team! If you believe you have the skills and
+          expertise to contribute, we invite you to come and chat with us on&nbsp;
+          <a
+            href="https://discord.gg/vpeHDsg"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-panel-text-primary hover:underline"
+          >
+            Discord
+          </a>
+          .
+        </div>
+        <Button
+          onClick={handleNext}
+          buttonType="primary"
+          className="py-2 font-semibold"
+          disabled={serverStatusQuery.data?.State !== 4}
         >
-          Discord
-        </a>
-        .
-      </div>
-      <Button
-        onClick={handleNext}
-        buttonType="primary"
-        className="py-2 font-semibold"
-        disabled={serverStatusQuery.data?.State !== 4}
-      >
-        Continue
-      </Button>
-    </TransitionDiv>
+          Continue
+        </Button>
+      </TransitionDiv>
+    </>
   );
 }
 
diff --git a/src/pages/firstrun/AniDBAccount.tsx b/src/pages/firstrun/AniDBAccount.tsx
index 0dc29906..944e8316 100644
--- a/src/pages/firstrun/AniDBAccount.tsx
+++ b/src/pages/firstrun/AniDBAccount.tsx
@@ -52,56 +52,59 @@ function AniDBAccount() {
   };
 
   return (
-    <TransitionDiv className="flex max-w-[38rem] flex-col justify-center gap-y-6">
-      <div className="text-xl font-semibold">Adding Your AniDB Account</div>
-      <div className="text-justify">
-        Shoko utilizes AniDB to compare file hashes with its vast database, enabling a quick identification and addition
-        of series to your collection. Additionally, AniDB provides supplementary information about series and episodes,
-        enhancing your user experience.
-      </div>
-      <div className="text-justify">
-        An AniDB account is required to use Shoko. If you don&lsquo;t already have an account,
-        <a
-          href="https://anidb.net/"
-          target="_blank"
-          rel="noreferrer"
-          className="font-semibold text-panel-text-primary hover:underline"
-        >
-          {' '}
-          Click Here
-          {' '}
-        </a>
-        to create one. Please note that, due to limitations with AniDB&lsquo;s API, your password must consist of only
-        <span className="font-semibold text-panel-text-important">{' alphanumeric '}</span>
-        characters. Using any other characters will result in a ban when you attempt to log in.
-      </div>
-      <form className="flex flex-col" onSubmit={handleTest}>
-        <Input
-          id="Username"
-          value={Username ?? ''}
-          label="Username"
-          type="text"
-          placeholder="Username"
-          onChange={handleInputChange}
+    <>
+      <title>First Run &gt; AniDB Account | Shoko</title>
+      <TransitionDiv className="flex max-w-[38rem] flex-col justify-center gap-y-6">
+        <div className="text-xl font-semibold">Adding Your AniDB Account</div>
+        <div className="text-justify">
+          Shoko utilizes AniDB to compare file hashes with its vast database, enabling a quick identification and
+          addition of series to your collection. Additionally, AniDB provides supplementary information about series and
+          episodes, enhancing your user experience.
+        </div>
+        <div className="text-justify">
+          An AniDB account is required to use Shoko. If you don&lsquo;t already have an account,
+          <a
+            href="https://anidb.net/"
+            target="_blank"
+            rel="noreferrer"
+            className="font-semibold text-panel-text-primary hover:underline"
+          >
+            {' '}
+            Click Here
+            {' '}
+          </a>
+          to create one. Please note that, due to limitations with AniDB&lsquo;s API, your password must consist of only
+          <span className="font-semibold text-panel-text-important">{' alphanumeric '}</span>
+          characters. Using any other characters will result in a ban when you attempt to log in.
+        </div>
+        <form className="flex flex-col" onSubmit={handleTest}>
+          <Input
+            id="Username"
+            value={Username ?? ''}
+            label="Username"
+            type="text"
+            placeholder="Username"
+            onChange={handleInputChange}
+          />
+          <Input
+            id="Password"
+            value={Password ?? ''}
+            label="Password"
+            type="password"
+            placeholder="Password"
+            onChange={handleInputChange}
+            className="mt-9"
+          />
+          <input type="submit" hidden />
+        </form>
+        <Footer
+          nextDisabled={!Username || !Password}
+          saveFunction={handleTest}
+          isFetching={isAnidbLoginPending}
+          status={anidbStatus}
         />
-        <Input
-          id="Password"
-          value={Password ?? ''}
-          label="Password"
-          type="password"
-          placeholder="Password"
-          onChange={handleInputChange}
-          className="mt-9"
-        />
-        <input type="submit" hidden />
-      </form>
-      <Footer
-        nextDisabled={!Username || !Password}
-        saveFunction={handleTest}
-        isFetching={isAnidbLoginPending}
-        status={anidbStatus}
-      />
-    </TransitionDiv>
+      </TransitionDiv>
+    </>
   );
 }
 
diff --git a/src/pages/firstrun/DataCollection.tsx b/src/pages/firstrun/DataCollection.tsx
index 5013e612..996da3f9 100644
--- a/src/pages/firstrun/DataCollection.tsx
+++ b/src/pages/firstrun/DataCollection.tsx
@@ -6,35 +6,38 @@ import Footer from './Footer';
 
 function DataCollection() {
   return (
-    <TransitionDiv className="flex max-w-[38rem] flex-col justify-center gap-y-6">
-      <div className="text-xl font-semibold">Data Collection</div>
-      <div className="text-justify">
-        Shoko is an open-source project that is developed by volunteers during their free time. In order to improve
-        Shoko more effectively, we have implemented&nbsp;
-        <a
-          href="https://sentry.io/"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="font-bold text-panel-text-primary hover:underline"
-        >
-          Sentry.io
-        </a>
-        , which is a third-party service that helps track errors and monitor performance.
-      </div>
-      <div className="text-justify">
-        We understand that data privacy is a significant concern for many people. Therefore, we want to be transparent
-        about the data we collect to allay any fears. The information we gather pertains to how Shoko is used, such as
-        error messages and performance metrics. This data allows us to swiftly identify and resolve issues and
-        prioritize improvements to make the software more stable and user-friendly.
-      </div>
-      <div className="text-justify">
-        We want to assure our users that we take data privacy seriously and only collect non-identifiable information to
-        improve Shoko, meaning that we don&apos;t collect any personal information that could be used to identify you.
-        We&apos;re not interested in knowing the specific titles in your collection or the content you watch. Our sole
-        objective is to improve Shoko, and the data we collect will help us achieve this goal.
-      </div>
-      <Footer nextPage="" finish />
-    </TransitionDiv>
+    <>
+      <title>First Run &gt; Data Collection | Shoko</title>
+      <TransitionDiv className="flex max-w-[38rem] flex-col justify-center gap-y-6">
+        <div className="text-xl font-semibold">Data Collection</div>
+        <div className="text-justify">
+          Shoko is an open-source project that is developed by volunteers during their free time. In order to improve
+          Shoko more effectively, we have implemented&nbsp;
+          <a
+            href="https://sentry.io/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="font-bold text-panel-text-primary hover:underline"
+          >
+            Sentry.io
+          </a>
+          , which is a third-party service that helps track errors and monitor performance.
+        </div>
+        <div className="text-justify">
+          We understand that data privacy is a significant concern for many people. Therefore, we want to be transparent
+          about the data we collect to allay any fears. The information we gather pertains to how Shoko is used, such as
+          error messages and performance metrics. This data allows us to swiftly identify and resolve issues and
+          prioritize improvements to make the software more stable and user-friendly.
+        </div>
+        <div className="text-justify">
+          We want to assure our users that we take data privacy seriously and only collect non-identifiable information
+          to improve Shoko, meaning that we don&apos;t collect any personal information that could be used to identify
+          you. We&apos;re not interested in knowing the specific titles in your collection or the content you watch. Our
+          sole objective is to improve Shoko, and the data we collect will help us achieve this goal.
+        </div>
+        <Footer nextPage="" finish />
+      </TransitionDiv>
+    </>
   );
 }
 
diff --git a/src/pages/firstrun/ImportFolders.tsx b/src/pages/firstrun/ImportFolders.tsx
index 0afd7392..b441a8af 100644
--- a/src/pages/firstrun/ImportFolders.tsx
+++ b/src/pages/firstrun/ImportFolders.tsx
@@ -90,6 +90,7 @@ function ImportFolders() {
 
   return (
     <>
+      <title>First Run &gt; Import Folders | Shoko</title>
       <TransitionDiv className="flex max-w-[38rem] flex-col justify-center gap-y-6 overflow-y-auto">
         <div className="text-xl font-semibold">Import Folders</div>
         <div className="text-justify">
diff --git a/src/pages/firstrun/LocalAccount.tsx b/src/pages/firstrun/LocalAccount.tsx
index 782f0cd6..a14454f9 100644
--- a/src/pages/firstrun/LocalAccount.tsx
+++ b/src/pages/firstrun/LocalAccount.tsx
@@ -42,42 +42,45 @@ function LocalAccount() {
   };
 
   return (
-    <TransitionDiv className="flex max-w-[38rem] flex-col justify-center gap-y-6">
-      <div className="text-xl font-semibold">Creating Your Account</div>
-      <div className="text-justify">
-        To use Shoko, you will need to create an account. This account will allow Shoko to manage links to all supported
-        metadata sites, enabling the synchronization of watch states and collection statuses.
-      </div>
-      <form className="flex flex-col" onSubmit={handleSave}>
-        <Input
-          id="Username"
-          value={user.Username}
-          label="Username"
-          type="text"
-          placeholder="Username"
-          onChange={event => setUser({ ...user, Username: event.target.value })}
+    <>
+      <title>First Run &gt; Local Account | Shoko</title>
+      <TransitionDiv className="flex max-w-[38rem] flex-col justify-center gap-y-6">
+        <div className="text-xl font-semibold">Creating Your Account</div>
+        <div className="text-justify">
+          To use Shoko, you will need to create an account. This account will allow Shoko to manage links to all
+          supported metadata sites, enabling the synchronization of watch states and collection statuses.
+        </div>
+        <form className="flex flex-col" onSubmit={handleSave}>
+          <Input
+            id="Username"
+            value={user.Username}
+            label="Username"
+            type="text"
+            placeholder="Username"
+            onChange={event => setUser({ ...user, Username: event.target.value })}
+          />
+          <Input
+            id="Password"
+            value={user.Password}
+            label="Password"
+            type="password"
+            placeholder="Password"
+            onChange={event => setUser({ ...user, Password: event.target.value })}
+            className="mt-9"
+          />
+          {/* TODO: Add functionality for setting avatar */}
+          {/* <Input id="Avatar" value={user.Avatar} label="Avatar" type="text" placeholder="Avatar" onChange={e => dispatch(setUser({ Password: e.target.value }))} className="mt-6" /> */}
+          {/* TODO: Display uploaded avatar */}
+          <input type="submit" hidden />
+        </form>
+        <Footer
+          nextDisabled={user.Username === ''}
+          saveFunction={handleSave}
+          isFetching={createUserPending}
+          status={userStatus}
         />
-        <Input
-          id="Password"
-          value={user.Password}
-          label="Password"
-          type="password"
-          placeholder="Password"
-          onChange={event => setUser({ ...user, Password: event.target.value })}
-          className="mt-9"
-        />
-        {/* TODO: Add functionality for setting avatar */}
-        {/* <Input id="Avatar" value={user.Avatar} label="Avatar" type="text" placeholder="Avatar" onChange={e => dispatch(setUser({ Password: e.target.value }))} className="mt-6" /> */}
-        {/* TODO: Display uploaded avatar */}
-        <input type="submit" hidden />
-      </form>
-      <Footer
-        nextDisabled={user.Username === ''}
-        saveFunction={handleSave}
-        isFetching={createUserPending}
-        status={userStatus}
-      />
-    </TransitionDiv>
+      </TransitionDiv>
+    </>
   );
 }
 
diff --git a/src/pages/firstrun/MetadataSources.tsx b/src/pages/firstrun/MetadataSources.tsx
index 7b575e10..46ca0a52 100644
--- a/src/pages/firstrun/MetadataSources.tsx
+++ b/src/pages/firstrun/MetadataSources.tsx
@@ -67,39 +67,42 @@ function MetadataSources() {
   });
 
   return (
-    <TransitionDiv className="flex max-w-[38rem] flex-col justify-center gap-y-6 overflow-y-auto">
-      <div className="text-xl font-semibold">Metadata Sites</div>
-      <div className="text-justify">
-        Shoko offers support for various community sites that provide additional metadata for the series in your
-        collection. We highly recommend that you review the settings for each site and configure them to meet your
-        preferences.
-      </div>
-      <div className="flex items-center gap-x-2 pb-3 text-xl font-semibold">
-        <div>Recently Imported</div>
-        <Icon path={mdiChevronRight} size={1} />
-        <TabButton
-          active={activeTab === 'anidb'}
-          setActiveTab={setActiveTab}
-          tabKey="anidb"
-          title="AniDB"
+    <>
+      <title>First Run &gt; Metadata Sources | Shoko</title>
+      <TransitionDiv className="flex max-w-[38rem] flex-col justify-center gap-y-6 overflow-y-auto">
+        <div className="text-xl font-semibold">Metadata Sites</div>
+        <div className="text-justify">
+          Shoko offers support for various community sites that provide additional metadata for the series in your
+          collection. We highly recommend that you review the settings for each site and configure them to meet your
+          preferences.
+        </div>
+        <div className="flex items-center gap-x-2 pb-3 text-xl font-semibold">
+          <div>Recently Imported</div>
+          <Icon path={mdiChevronRight} size={1} />
+          <TabButton
+            active={activeTab === 'anidb'}
+            setActiveTab={setActiveTab}
+            tabKey="anidb"
+            title="AniDB"
+          />
+          |
+          <TabButton
+            active={activeTab === 'moviedb'}
+            setActiveTab={setActiveTab}
+            tabKey="moviedb"
+            title="TMDB"
+          />
+        </div>
+        <div className="flex h-80 shrink flex-col overflow-y-auto pr-8">
+          <TabContent setStatus={setStatus} tab={activeTab} />
+        </div>
+        <Footer
+          nextPage="start-server"
+          saveFunction={handleSave}
+          status={status}
         />
-        |
-        <TabButton
-          active={activeTab === 'moviedb'}
-          setActiveTab={setActiveTab}
-          tabKey="moviedb"
-          title="TMDB"
-        />
-      </div>
-      <div className="flex h-80 shrink flex-col overflow-y-auto pr-8">
-        <TabContent setStatus={setStatus} tab={activeTab} />
-      </div>
-      <Footer
-        nextPage="start-server"
-        saveFunction={handleSave}
-        status={status}
-      />
-    </TransitionDiv>
+      </TransitionDiv>
+    </>
   );
 }
 
diff --git a/src/pages/firstrun/StartServer.tsx b/src/pages/firstrun/StartServer.tsx
index 359f5bd6..cb366fcb 100644
--- a/src/pages/firstrun/StartServer.tsx
+++ b/src/pages/firstrun/StartServer.tsx
@@ -57,35 +57,38 @@ function StartServer() {
   }, [serverStatusQuery.data]);
 
   return (
-    <TransitionDiv className="flex max-w-[38rem] flex-col justify-center gap-y-6">
-      <div className="text-xl font-semibold">Start Server</div>
-      <div className="text-justify">
-        On this page you can try and start the server, startup progress will be reported below. After the startup and
-        database creation process is complete you will be able to setup import folders.
-      </div>
-      <div className="flex flex-col">
-        <div className="flex gap-x-2">
-          <span className="font-semibold">Status:</span>
-          {serverStatusQuery.data?.State === 2
-            ? <span className="font-semibold">Started!</span>
-            : (serverStatusQuery.data?.StartupMessage ?? <span className="font-semibold">Not Started!</span>)}
+    <>
+      <title>First Run &gt; Start Server | Shoko</title>
+      <TransitionDiv className="flex max-w-[38rem] flex-col justify-center gap-y-6">
+        <div className="text-xl font-semibold">Start Server</div>
+        <div className="text-justify">
+          On this page you can try and start the server, startup progress will be reported below. After the startup and
+          database creation process is complete you will be able to setup import folders.
         </div>
-        <div className="mt-24 flex items-center justify-center">
-          {pollingInterval === 0
-            && ((!serverStatusQuery.isSuccess && !serverStatusQuery.isError) || serverStatusQuery.data?.State === 4)
-            && (
-              <Button onClick={() => handleStart()} buttonType="primary" className="w-64 py-2 font-semibold">
-                Start Server
-              </Button>
-            )}
+        <div className="flex flex-col">
+          <div className="flex gap-x-2">
+            <span className="font-semibold">Status:</span>
+            {serverStatusQuery.data?.State === 2
+              ? <span className="font-semibold">Started!</span>
+              : (serverStatusQuery.data?.StartupMessage ?? <span className="font-semibold">Not Started!</span>)}
+          </div>
+          <div className="mt-24 flex items-center justify-center">
+            {pollingInterval === 0
+              && ((!serverStatusQuery.isSuccess && !serverStatusQuery.isError) || serverStatusQuery.data?.State === 4)
+              && (
+                <Button onClick={() => handleStart()} buttonType="primary" className="w-64 py-2 font-semibold">
+                  Start Server
+                </Button>
+              )}
+          </div>
         </div>
-      </div>
-      <Footer
-        prevDisabled={serverStatusQuery.data?.State !== 4}
-        nextDisabled={serverStatusQuery.data?.State !== 2}
-        saveFunction={handleNext}
-      />
-    </TransitionDiv>
+        <Footer
+          prevDisabled={serverStatusQuery.data?.State !== 4}
+          nextDisabled={serverStatusQuery.data?.State !== 2}
+          saveFunction={handleNext}
+        />
+      </TransitionDiv>
+    </>
   );
 }
 
diff --git a/src/pages/login/LoginPage.tsx b/src/pages/login/LoginPage.tsx
index f51ba9c1..322658b9 100644
--- a/src/pages/login/LoginPage.tsx
+++ b/src/pages/login/LoginPage.tsx
@@ -113,6 +113,7 @@ function LoginPage() {
 
   return (
     <>
+      <title>Login | Shoko</title>
       <ToastContainer
         position="bottom-right"
         autoClose={4000}
diff --git a/src/pages/nomatch/index.tsx b/src/pages/nomatch/index.tsx
index bc11fca1..1d8ce0c2 100644
--- a/src/pages/nomatch/index.tsx
+++ b/src/pages/nomatch/index.tsx
@@ -3,11 +3,14 @@ import { mdiEmoticonSadOutline } from '@mdi/js';
 import { Icon } from '@mdi/react';
 
 const NoMatchPage = () => (
-  <div className="flex size-full flex-col items-center justify-center gap-y-4">
-    <Icon path={mdiEmoticonSadOutline} size={4} />
-    <p>No Route Found!</p>
-    <p>Check the URL and try again.</p>
-  </div>
+  <>
+    <title>No Route Found | Shoko</title>
+    <div className="flex size-full flex-col items-center justify-center gap-y-4">
+      <Icon path={mdiEmoticonSadOutline} size={4} />
+      <p>No Route Found!</p>
+      <p>Check the URL and try again.</p>
+    </div>
+  </>
 );
 
 export default NoMatchPage;
diff --git a/src/pages/unsupported/UnsupportedPage.tsx b/src/pages/unsupported/UnsupportedPage.tsx
index 563999c0..42bad61f 100644
--- a/src/pages/unsupported/UnsupportedPage.tsx
+++ b/src/pages/unsupported/UnsupportedPage.tsx
@@ -26,68 +26,71 @@ const UnsupportedPage = () => {
   });
 
   return (
-    <div className="relative flex grow items-center justify-center overflow-hidden p-6">
-      <div className="z-20 flex h-full max-w-[56.4375rem] flex-col items-center justify-center gap-y-4 overflow-y-auto md:gap-y-6">
-        <div className="text-2xl text-panel-text md:text-5xl">STOP!</div>
-        <div className="text-2xl text-panel-text md:text-5xl">You Shall Not Pass!</div>
-        <div className="flex flex-col gap-y-4">
-          <div>
-            It looks like you’re attempting to use a version of the Web UI that is not compatible with the version of
-            Shoko Server you have installed.
-          </div>
-          <div>
-            If you are using the daily version of Shoko Server, you should update your server to the latest daily. If
-            you do not want to update your server, find the daily Web UI version which works and manually downgrade to
-            it.
-          </div>
-          <div>
-            If you are running the stable version of Shoko Server, select the&nbsp;
-            <span className="font-semibold text-panel-text-important">Force Update to Stable Web UI&nbsp;</span>
-            button to have Shoko download the latest stable version of the Web UI which will work with your version of
-            Shoko Server.
+    <>
+      <title>Unsupported Version | Shoko</title>
+      <div className="relative flex grow items-center justify-center overflow-hidden p-6">
+        <div className="z-20 flex h-full max-w-[56.4375rem] flex-col items-center justify-center gap-y-4 overflow-y-auto md:gap-y-6">
+          <div className="text-2xl text-panel-text md:text-5xl">STOP!</div>
+          <div className="text-2xl text-panel-text md:text-5xl">You Shall Not Pass!</div>
+          <div className="flex flex-col gap-y-4">
+            <div>
+              It looks like you’re attempting to use a version of the Web UI that is not compatible with the version of
+              Shoko Server you have installed.
+            </div>
+            <div>
+              If you are using the daily version of Shoko Server, you should update your server to the latest daily. If
+              you do not want to update your server, find the daily Web UI version which works and manually downgrade to
+              it.
+            </div>
+            <div>
+              If you are running the stable version of Shoko Server, select the&nbsp;
+              <span className="font-semibold text-panel-text-important">Force Update to Stable Web UI&nbsp;</span>
+              button to have Shoko download the latest stable version of the Web UI which will work with your version of
+              Shoko Server.
+            </div>
+            <div>
+              Still need help? Hop on our&nbsp;
+              <a
+                href="https://discord.gg/vpeHDsg"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="font-semibold text-panel-text-primary"
+              >
+                Discord
+              </a>
+              &nbsp;server and provide the above error.
+            </div>
+            {versionQuery.data && (
+              <div>
+                Server Version:&nbsp;
+                {versionQuery.data.Server.Version}
+                <br />
+                Minimum Supported Server Version:&nbsp;
+                {minimumSupportedServerVersion}
+                <br />
+                Web UI Version:&nbsp;
+                {versionQuery.data.WebUI?.Version}
+              </div>
+            )}
           </div>
-          <div>
-            Still need help? Hop on our&nbsp;
-            <a
-              href="https://discord.gg/vpeHDsg"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="font-semibold text-panel-text-primary"
+          <div className="flex flex-col gap-y-2 md:flex-row md:gap-x-4">
+            <Button
+              onClick={handleWebUiUpdate}
+              className="px-4 py-2 drop-shadow-md"
+              buttonType="primary"
+              loading={isUpdateWebuiPending}
             >
-              Discord
-            </a>
-            &nbsp;server and provide the above error.
+              Force update to Stable Web UI
+            </Button>
           </div>
-          {versionQuery.data && (
-            <div>
-              Server Version:&nbsp;
-              {versionQuery.data.Server.Version}
-              <br />
-              Minimum Supported Server Version:&nbsp;
-              {minimumSupportedServerVersion}
-              <br />
-              Web UI Version:&nbsp;
-              {versionQuery.data.WebUI?.Version}
-            </div>
-          )}
-        </div>
-        <div className="flex flex-col gap-y-2 md:flex-row md:gap-x-4">
-          <Button
-            onClick={handleWebUiUpdate}
-            className="px-4 py-2 drop-shadow-md"
-            buttonType="primary"
-            loading={isUpdateWebuiPending}
-          >
-            Force update to Stable Web UI
-          </Button>
         </div>
+        <img
+          src={ShokoMascot}
+          alt="mascot"
+          className="absolute -bottom-40 -right-36 z-10 opacity-30"
+        />
       </div>
-      <img
-        src={ShokoMascot}
-        alt="mascot"
-        className="absolute -bottom-40 -right-36 z-10 opacity-30"
-      />
-    </div>
+    </>
   );
 };
 
diff --git a/src/pages/utilities/FileSearch.tsx b/src/pages/utilities/FileSearch.tsx
index 0d9c6fb4..056ea239 100644
--- a/src/pages/utilities/FileSearch.tsx
+++ b/src/pages/utilities/FileSearch.tsx
@@ -375,7 +375,7 @@ const FileSearch = () => {
 
   return (
     <>
-      <title>Utilities &gt; File Search | Shoko</title>
+      <title>File Search | Shoko</title>
       <div className="flex grow flex-col gap-y-6">
         <ShokoPanel title="File Search" options={<ItemCount count={fileCount} selected={selectedRows?.length} />}>
           <div className="flex items-center gap-x-3">
diff --git a/src/pages/utilities/ReleaseManagement.tsx b/src/pages/utilities/ReleaseManagement.tsx
index 9e5b9c3f..8fe6d52d 100644
--- a/src/pages/utilities/ReleaseManagement.tsx
+++ b/src/pages/utilities/ReleaseManagement.tsx
@@ -90,7 +90,7 @@ const ReleaseManagement = ({ type }: Props) => {
 
   return (
     <>
-      <title>{`Utilities > ${type === 'multiples' ? 'Multiple Releases' : 'Duplicate Files'} | Shoko`}</title>
+      <title>{`${type === 'multiples' ? 'Multiple Releases' : 'Duplicate Files'} | Shoko`}</title>
       <div className="flex grow flex-col gap-y-6 overflow-y-auto">
         <ShokoPanel title={<Title />} options={<ItemCount count={seriesCount} suffix="Series" />}>
           <div className="flex items-center gap-x-3">
diff --git a/src/pages/utilities/Renamer.tsx b/src/pages/utilities/Renamer.tsx
index 7b6f6926..a3b42c79 100644
--- a/src/pages/utilities/Renamer.tsx
+++ b/src/pages/utilities/Renamer.tsx
@@ -498,7 +498,7 @@ const Renamer = () => {
 
   return (
     <>
-      <title>Utilities &gt; File Rename | Shoko</title>
+      <title>File Renamer | Shoko</title>
       <div className="flex grow flex-col gap-y-3">
         <ShokoPanel title="File Rename">
           <div className="flex items-center gap-x-3">
diff --git a/src/pages/utilities/SeriesWithoutFilesUtility.tsx b/src/pages/utilities/SeriesWithoutFilesUtility.tsx
index 69c262bf..a6f59e85 100644
--- a/src/pages/utilities/SeriesWithoutFilesUtility.tsx
+++ b/src/pages/utilities/SeriesWithoutFilesUtility.tsx
@@ -159,7 +159,7 @@ function SeriesWithoutFilesUtility() {
 
   return (
     <>
-      <title>Utilities &gt; Series Without Files | Shoko</title>
+      <title>Series Without Files | Shoko</title>
       <div className="flex grow flex-col gap-y-6">
         <div>
           <ShokoPanel
diff --git a/src/pages/utilities/UnrecognizedUtilityTabs/IgnoredFilesTab.tsx b/src/pages/utilities/UnrecognizedUtilityTabs/IgnoredFilesTab.tsx
index c76f97fa..60e63628 100644
--- a/src/pages/utilities/UnrecognizedUtilityTabs/IgnoredFilesTab.tsx
+++ b/src/pages/utilities/UnrecognizedUtilityTabs/IgnoredFilesTab.tsx
@@ -133,7 +133,7 @@ function IgnoredFilesTab() {
 
   return (
     <>
-      <title>Utilities &gt; Ignored Files | Shoko</title>
+      <title>Ignored Files | Shoko</title>
       <div className="flex grow flex-col gap-y-6">
         <div>
           <ShokoPanel title={<Title />} options={<ItemCount count={fileCount} selected={selectedRows?.length} />}>
diff --git a/src/pages/utilities/UnrecognizedUtilityTabs/ManuallyLinkedTab.tsx b/src/pages/utilities/UnrecognizedUtilityTabs/ManuallyLinkedTab.tsx
index 4981b7f0..3113a0ac 100644
--- a/src/pages/utilities/UnrecognizedUtilityTabs/ManuallyLinkedTab.tsx
+++ b/src/pages/utilities/UnrecognizedUtilityTabs/ManuallyLinkedTab.tsx
@@ -221,7 +221,7 @@ const ManuallyLinkedTab = () => {
 
   return (
     <>
-      <title>Utilities &gt; Manually Linked Files | Shoko</title>
+      <title>Manually Linked Files | Shoko</title>
       <TransitionDiv className="flex grow flex-col gap-y-6 overflow-y-auto">
         <ShokoPanel
           title={<Title />}
diff --git a/src/pages/utilities/UnrecognizedUtilityTabs/UnrecognizedTab.tsx b/src/pages/utilities/UnrecognizedUtilityTabs/UnrecognizedTab.tsx
index 5ce05dce..ad550f65 100644
--- a/src/pages/utilities/UnrecognizedUtilityTabs/UnrecognizedTab.tsx
+++ b/src/pages/utilities/UnrecognizedUtilityTabs/UnrecognizedTab.tsx
@@ -373,7 +373,7 @@ function UnrecognizedTab() {
 
   return (
     <>
-      <title>Utilities &gt; Unrecognized Files | Shoko</title>
+      <title>Unrecognized Files | Shoko</title>
       <div className="flex grow flex-col gap-y-6" ref={tabContainerRef}>
         <div>
           <ShokoPanel title={<Title />} options={<ItemCount count={fileCount} selected={selectedRows?.length} />}>