diff --git a/web/src/components/sidebar/Sidebar.svelte b/web/src/components/sidebar/Sidebar.svelte
index cc013117..9add0c6b 100644
--- a/web/src/components/sidebar/Sidebar.svelte
+++ b/web/src/components/sidebar/Sidebar.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import CobaltLogo from "$components/sidebar/CobaltLogo.svelte";
     import SidebarTab from "$components/sidebar/SidebarTab.svelte";
 
@@ -12,9 +12,20 @@
     import IconHeart from "@tabler/icons-svelte/IconHeart.svelte";
     import IconInfoCircle from "@tabler/icons-svelte/IconInfoCircle.svelte";
 
-    const settingsLink = "/settings/general/appearance";
+    let screenWidth: number,
+        settingsLink: string;
+
+    $: isMobile = screenWidth <= 750;
+
+    $: if (isMobile) {
+        settingsLink = "/settings";
+    } else {
+        settingsLink = "/settings/general/appearance";
+    }
 </script>
 
+<svelte:window bind:innerWidth={screenWidth} />
+
 <nav id="sidebar">
     <CobaltLogo />
     <div id="sidebar-tabs">
@@ -89,7 +100,7 @@
         }
 
         #sidebar::before {
-            content: '';
+            content: "";
             z-index: 1;
             width: 100%;
             height: 100%;