diff --git a/src/background.ts b/src/background.ts
index 22cbac7c..60037577 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -305,6 +305,7 @@ function getDefaultValues(): SettingsState {
     customshortcuts: [],
     lettergrade: false,
     newsSource: "australia",
+    iconOnlySidebar: false,
   };
 }
 
diff --git a/src/css/injected.scss b/src/css/injected.scss
index d04dce71..cefcf34a 100644
--- a/src/css/injected.scss
+++ b/src/css/injected.scss
@@ -455,6 +455,63 @@ ul.magicDelete > li.deleting {
   width: 28px !important;
   height: 28px !important;
 }
+
+/* Icon Only Sidebar - compact mode. When submenu is open, all styles are disabled so it behaves as normal sidebar. */
+body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) {
+  #menu {
+    width: 70px !important;
+    min-width: 70px !important;
+    max-width: 70px !important;
+    transition: width 0.2s ease;
+    overflow: hidden !important;
+  }
+
+  #menu > ul {
+    min-width: 0 !important;
+    overflow-x: hidden !important;
+  }
+
+  #content {
+    left: 70px !important;
+  }
+
+  #menu li > label span,
+  #menu section > label span {
+    display: none !important;
+  }
+
+  #menu ul > li > svg {
+    display: none !important;
+  }
+
+  #menu .sub {
+    left: 70px !important;
+  }
+
+  #menu ul li,
+  #menu ul section {
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    padding: 8px !important;
+    justify-content: center !important;
+    box-sizing: border-box !important;
+  }
+
+  #menu li > label,
+  #menu section > label {
+    flex: 0 0 auto !important;
+    min-width: 0 !important;
+    justify-content: center !important;
+    overflow: hidden !important;
+  }
+
+  #menu li > label > svg,
+  #menu section > label > svg {
+    margin: 0 auto !important;
+    flex-shrink: 0 !important;
+  }
+}
 [class*="notifications__items___"] {
   -ms-overflow-style: none !important;
   scrollbar-width: none !important;
@@ -921,6 +978,17 @@ html.transparencyEffects
     -webkit-transform: translatex(270px);
     transform: translatex(270px);
   }
+
+  body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) {
+    #menu {
+      -webkit-transform: translatex(-70px);
+      transform: translatex(-70px);
+    }
+    .menuShown #content {
+      -webkit-transform: translatex(70px);
+      transform: translatex(70px);
+    }
+  }
 }
 
 @media (max-width: 1145px) {
diff --git a/src/css/injected/sidebar-animation.scss b/src/css/injected/sidebar-animation.scss
index 7beb8206..51c6a11f 100644
--- a/src/css/injected/sidebar-animation.scss
+++ b/src/css/injected/sidebar-animation.scss
@@ -41,3 +41,13 @@
 #menu > ul:has(li.hasChildren.active) > li.active {
   background: transparent !important;
 }
+
+/* Icon-only collapsed: submenu slides over narrow icons */
+body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul:has(li.hasChildren.active) > li::before,
+body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul ul:has(li.hasChildren.active) > li::before,
+body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul:has(li.hasChildren.active) > li > label,
+body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul:has(li.hasChildren.active) > li > svg,
+body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul ul:has(li.hasChildren.active) > li > label,
+body.icon-only-sidebar:not(:has(#menu li.hasChildren.active)) #menu > ul ul:has(li.hasChildren.active) > li > svg {
+  transform: translateX(-70px);
+}
diff --git a/src/interface/pages/settings/general.svelte b/src/interface/pages/settings/general.svelte
index 38bf0c98..f7e4fae8 100644
--- a/src/interface/pages/settings/general.svelte
+++ b/src/interface/pages/settings/general.svelte
@@ -149,6 +149,16 @@
         text: "Edit"
       }
     },
+    {
+      title: "Icon Only Sidebar",
+      description: "Show only icons in the sidebar for a compact layout.",
+      id: 14,
+      Component: Switch,
+      props: {
+        state: $settingsState.iconOnlySidebar ?? false,
+        onChange: (isOn: boolean) => settingsState.iconOnlySidebar = isOn
+      }
+    },
     {
       title: "Animations",
       description: "Enables animations on certain pages.",
diff --git a/src/plugins/monofile.ts b/src/plugins/monofile.ts
index 77ffd39b..e3aa6da0 100644
--- a/src/plugins/monofile.ts
+++ b/src/plugins/monofile.ts
@@ -612,6 +612,7 @@ export function init() {
   if (settingsState.onoff) {
     console.info("[BetterSEQTA+] Enabled");
     if (settingsState.DarkMode) document.documentElement.classList.add("dark");
+    if (settingsState.iconOnlySidebar) document.body.classList.add("icon-only-sidebar");
 
     document.querySelector(".legacy-root")?.classList.add("hidden");
     ObserveMenuItemPosition();
diff --git a/src/seqta/utils/listeners/StorageChanges.ts b/src/seqta/utils/listeners/StorageChanges.ts
index 4edc5f83..d93edf80 100644
--- a/src/seqta/utils/listeners/StorageChanges.ts
+++ b/src/seqta/utils/listeners/StorageChanges.ts
@@ -30,6 +30,18 @@ export class StorageChangeHandler {
       "subjectfilters",
       FilterUpcomingAssessments.bind(this),
     );
+    settingsState.register(
+      "iconOnlySidebar",
+      this.handleIconOnlySidebarChange.bind(this),
+    );
+  }
+
+  private handleIconOnlySidebarChange(newValue: boolean | undefined) {
+    if (newValue) {
+      document.body.classList.add("icon-only-sidebar");
+    } else {
+      document.body.classList.remove("icon-only-sidebar");
+    }
   }
 
   private handleDarkModeChange() {
diff --git a/src/types/storage.ts b/src/types/storage.ts
index 92ee9e5f..5b911ffc 100644
--- a/src/types/storage.ts
+++ b/src/types/storage.ts
@@ -40,6 +40,7 @@ export interface SettingsState {
   newsSource?: string;
   mockNotices?: boolean;
   hideSensitiveContent?: boolean;
+  iconOnlySidebar?: boolean;
 
   // depreciated keys
   animatedbk: boolean;