diff --git a/css/index.css b/css/index.css
index 24a20f7..291e48d 100644
--- a/css/index.css
+++ b/css/index.css
@@ -2159,4 +2159,64 @@ body {
 .smart-highlight {
   color: #ffcc66;
   font-weight: 600;
+}
+
+/* Antigravity Custom UI/UX Premium Overrides */
+
+/* 1. Header Dark Mode Switch & Icons */
+.theme-toggle-btn {
+  background: none;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: var(--border-radius-md);
+  width: 38px;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  padding: 0;
+}
+
+.theme-toggle-btn:hover {
+  background: var(--color-background-secondary);
+  color: var(--color-text-primary);
+  border-color: var(--color-text-primary);
+  transform: scale(1.05);
+}
+
+.theme-toggle-btn:active {
+  transform: scale(0.95);
+}
+
+/* Show/hide Sun and Moon icons based on data-theme */
+:root[data-theme="dark"] .theme-toggle-btn .sun-icon {
+  display: block;
+}
+:root[data-theme="dark"] .theme-toggle-btn .moon-icon {
+  display: none;
+}
+:root[data-theme="light"] .theme-toggle-btn .sun-icon {
+  display: none;
+}
+:root[data-theme="light"] .theme-toggle-btn .moon-icon {
+  display: block;
+}
+
+/* 2. Dark Mode Contrast Regression for Summary Box */
+:root[data-theme="dark"] .summary-box {
+  background: linear-gradient(135deg, var(--color-background-tertiary), var(--color-background-secondary)) !important;
+  border-color: var(--color-border-tertiary) !important;
+  color: var(--color-text-secondary) !important;
+}
+
+:root[data-theme="dark"] .summary-box strong,
+:root[data-theme="dark"] .summary-box b {
+  color: var(--color-text-primary) !important;
+}
+
+/* 3. Minimized/Collapsed Right Panel Layout Fix */
+.panel.panel-collapsed .summary-box {
+  display: none !important;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index da78416..6a04bc7 100644
--- a/index.html
+++ b/index.html
@@ -46,7 +46,11 @@ <h1 class="site-title">StudyPlan</h1>
     <a href="#" id="nav-settings">Settings</a>
   </nav>
 
-  <div class="header-right">
+  <div class="header-right" style="display: flex; align-items: center; gap: 12px;">
+    <button id="header-dark-mode-toggle" class="theme-toggle-btn" aria-label="Toggle dark mode" title="Toggle Theme">
+      <svg class="sun-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>
+      <svg class="moon-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
+    </button>
     <button class="profile-btn">Profile</button>
     <button class="profile-btn" id="logout-btn">Logout</button>
   </div>
@@ -197,13 +201,6 @@ <h1 class="site-title">StudyPlan</h1>
         <!-- Javascript will inject extracted items here -->
       </div>
       <div id="summary-box" class="summary-box"></div>
-
-  <button id="add-btn" class="add-btn" disabled>
-    Add items to planner
-  </button>
-</div>
-
-
       <button id="add-btn" class="add-btn" disabled>Add items to planner</button>
     </div>
   </div>
@@ -364,14 +361,15 @@ <h3 style="font-size:12px; font-weight:700; text-transform:uppercase; color:var(
   // Settings Toggles State Management
   const darkModeToggle = document.getElementById('dark-mode-toggle');
   const compactViewToggle = document.getElementById('compact-view-toggle');
+  const headerDarkModeToggle = document.getElementById('header-dark-mode-toggle');
 
   // Load preferences
   const loadPreferences = () => {
     const isDarkMode = localStorage.getItem('studyplan_dark_mode') === 'true';
     const isCompactView = localStorage.getItem('studyplan_compact_view') === 'true';
 
-    darkModeToggle.checked = isDarkMode;
-    compactViewToggle.checked = isCompactView;
+    if (darkModeToggle) darkModeToggle.checked = isDarkMode;
+    if (compactViewToggle) compactViewToggle.checked = isCompactView;
 
     if (isDarkMode) {
       document.documentElement.setAttribute('data-theme', 'dark');
@@ -390,29 +388,40 @@ <h3 style="font-size:12px; font-weight:700; text-transform:uppercase; color:var(
   loadPreferences();
 
   // Save changes when user clicks "Save Changes"
-  settingsSave.addEventListener('click', () => {
-    localStorage.setItem('studyplan_dark_mode', darkModeToggle.checked);
-    localStorage.setItem('studyplan_compact_view', compactViewToggle.checked);
-    loadPreferences();
-    settingsModal.style.display = 'none';
-  });
+  if (settingsSave) {
+    settingsSave.addEventListener('click', () => {
+      localStorage.setItem('studyplan_dark_mode', darkModeToggle.checked);
+      localStorage.setItem('studyplan_compact_view', compactViewToggle.checked);
+      loadPreferences();
+      settingsModal.style.display = 'none';
+    });
+  }
 
   // Also apply immediately on toggle for better UX
-  darkModeToggle.addEventListener('change', (e) => {
-    if (e.target.checked) {
-      document.documentElement.setAttribute('data-theme', 'dark');
-    } else {
-      document.documentElement.setAttribute('data-theme', 'light');
-    }
-  });
+  if (darkModeToggle) {
+    darkModeToggle.addEventListener('change', (e) => {
+      localStorage.setItem('studyplan_dark_mode', e.target.checked ? 'true' : 'false');
+      loadPreferences();
+    });
+  }
 
-  compactViewToggle.addEventListener('change', (e) => {
-    if (e.target.checked) {
-      document.body.classList.add('compact-view');
-    } else {
-      document.body.classList.remove('compact-view');
-    }
-  });
+  if (headerDarkModeToggle) {
+    headerDarkModeToggle.addEventListener('click', () => {
+      const isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
+      localStorage.setItem('studyplan_dark_mode', !isDarkMode ? 'true' : 'false');
+      loadPreferences();
+    });
+  }
+
+  if (compactViewToggle) {
+    compactViewToggle.addEventListener('change', (e) => {
+      if (e.target.checked) {
+        document.body.classList.add('compact-view');
+      } else {
+        document.body.classList.remove('compact-view');
+      }
+    });
+  }
 </script>
 
 <div id="new-subject-modal" class="modal-backdrop" style="display:none; position:fixed; inset:0; z-index:9998; align-items:center; justify-content:center;">