1 files changed, 71 insertions, 34 deletions
diff --git a/popup/popup.html b/popup/popup.html
index 9d8d042..d16cb88 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -14,7 +14,7 @@
     <header class="app-header">
       <div id="header-container">
         <div class="logo-container">
-          <img src="../assets/images/logo_48.png" alt="ZenInternet Logo" class="logo-img">
+          <img src="../assets/images/logo.png" alt="ZenInternet Logo" class="logo-img">
           <h1 class="app-title">Zen Internet</h1>
         </div>
         <div class="miniheader">
@@ -22,30 +22,53 @@
           <div class="author">by <a href="https://www.sameerasw.com/" target="_blank">@sameerasw</a></div>
         </div>
       </div>
-      <button id="whats-new" class="whats-new-button" title="What's New">✨</button>
+      <div class="header-buttons">
+        <button id="how-to-use" class="icon-button" title="How to use?">🤔</button>
+        <button id="whats-new" class="whats-new-button" title="What's New">✨</button>
+      </div>
     </header>
 
     <main class="app-content">
-      <div class="toggle-container features-container">
-        <label class="toggle-switch">
-          <input type="checkbox" id="enable-styling">
-          <span class="slider round"></span>
-        </label>
-        <span class="toggle-label">Enable Styling</span>
+      <div class="features-container">
+        <div class="toggle-container">
+          <label class="toggle-switch">
+            <input type="checkbox" id="enable-styling">
+            <span class="slider round"></span>
+          </label>
+          <span class="toggle-label">Global Styling</span>
+        </div>
+        <div class="toggle-container">
+          <label class="toggle-switch">
+            <input type="checkbox" id="whitelist-style-mode">
+            <span class="slider round"></span>
+          </label>
+          <span id="whitelist-style-mode-label" class="toggle-label">Blacklist Mode</span>
+        </div>
+        <!-- Moved reload button here -->
+        <button id="reload" class="action-button secondary">
+          Reload to apply <i class="fas fa-sync-alt"></i>
+        </button>
       </div>
 
       <!-- Current Site Features Section -->
       <div id="current-site-features" class="features-container">
         <button class="collapsible-button" id="toggle-features">
-          <span>Current Site Features</span>
+          <span id="current-site-label">
+            <span id="site-domain" class="site-domain"></span>
+            <span>Features</span>
+          </span>
           <i class="fas fa-chevron-down"></i>
         </button>
+        <div class="toggle-container">
+          <label class="toggle-switch">
+            <input type="checkbox" id="skip-theming">
+            <span class="slider round"></span>
+          </label>
+          <span id="site-style-toggle-label" class="toggle-label">Skip Styling for this Site</span>
+        </div>
         <div id="current-site-toggles" class="features-list collapsed"></div>
         <div class="actions" id="current-site-actions">
-          <!-- reload botton -->
-          <button id="reload" class="action-button secondary">
-            Reload to apply <i class="fas fa-sync-alt"></i>
-          </button>
+          <!-- Reload button was here, now moved above -->
         </div>
       </div>
 
@@ -63,27 +86,41 @@
         <span class="toggle-label">Auto Update Styles</span>
       </div>
       <div id="last-fetched-time" class="last-fetched-time"></div>
-      <div class="forcing-container">
-        <div class="toggle-container">
-          <label class="toggle-switch">
-            <input type="checkbox" id="force-styling">
-            <span class="slider round"></span>
-          </label>
-          <span class="toggle-label">Force Styling</span>
-        </div>
-        <div class="toggle-container">
-          <label class="toggle-switch">
-            <input type="checkbox" id="whitelist-mode">
-            <span class="slider round"></span>
-          </label>
-          <span id="whitelist-mode-label" class="toggle-label">Blacklist Mode</span>
-        </div>
-        <div class="toggle-container">
-          <label class="toggle-switch">
-            <input type="checkbox" id="skip-force-theming">
-            <span class="slider round"></span>
-          </label>
-          <span id="site-toggle-label" class="toggle-label">Skip Forcing for this Site</span>
+
+      <div class="features-container">
+        <button class="collapsible-button" id="toggle-forcing">
+          <span>Force Styling Settings</span>
+          <i class="fas fa-chevron-down"></i>
+        </button>
+        <div id="forcing-content" class="forcing-container collapsed">
+          <div class="toggle-container">
+            <label class="toggle-switch">
+              <input type="checkbox" id="force-styling">
+              <span class="slider round"></span>
+            </label>
+            <span class="toggle-label">Force Styling</span>
+          </div>
+          <div class="toggle-container">
+            <label class="toggle-switch">
+              <input type="checkbox" id="whitelist-mode">
+              <span class="slider round"></span>
+            </label>
+            <span id="whitelist-mode-label" class="toggle-label">Blacklist Mode</span>
+          </div>
+          <div class="toggle-container">
+            <label class="toggle-switch">
+              <input type="checkbox" id="skip-force-theming">
+              <span class="slider round"></span>
+            </label>
+            <span id="site-toggle-label" class="toggle-label">Skip Forcing for this Site</span>
+          </div>
+          <div class="toggle-container">
+            <label class="toggle-switch">
+              <input type="checkbox" id="fallback-background">
+              <span class="slider round"></span>
+            </label>
+            <span class="toggle-label">Fallback Background</span>
+          </div>
         </div>
       </div>