diff --git a/options.css b/options.css
index cdebc85..e906aae 100644
--- a/options.css
+++ b/options.css
@@ -1,12 +1,206 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
 html,
 body {
-  color: white;
-  background-color: #1b262c;
+  color: #e0e0e0;
+  background-color: #181c20;
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
   min-height: 10rem;
-  max-width: 50rem;
-  overflow-y: hidden;
+  max-width: 42rem;
+  padding: 16px;
+}
+
+header {
+  margin-bottom: 16px;
+}
+
+header h1 {
+  font-size: 20px;
+  font-weight: 700;
+  color: #ffffff;
+  letter-spacing: -0.01em;
+}
+
+header .subtitle {
+  font-size: 13px;
+  color: #888;
+  margin-top: 2px;
+}
+
+.card {
+  background: #22272b;
+  border: 1px solid #2e3439;
+  border-radius: 10px;
+  padding: 16px;
+  margin-bottom: 12px;
+}
+
+.card h2 {
+  font-size: 14px;
+  font-weight: 600;
+  color: #ffffff;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #2e3439;
+}
+
+.hint {
+  font-size: 12px;
+  color: #888;
+  margin-bottom: 12px;
+  line-height: 1.4;
+}
+
+.card > label {
+  display: block;
+  font-size: 12px;
+  font-weight: 500;
+  color: #aaa;
+  margin-bottom: 4px;
+  margin-top: 10px;
+}
+
+.card > label:first-of-type {
+  margin-top: 0;
+}
+
+input[type="text"] {
+  width: 100%;
+  padding: 8px 10px;
+  background: #181c20;
+  border: 1px solid #2e3439;
+  border-radius: 6px;
+  color: #e0e0e0;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+input[type="text"]:focus {
+  border-color: #4a9eff;
+}
+
+input[type="text"]::placeholder {
+  color: #555;
 }
 
 #userinput:invalid {
-  border-color: red;
+  border-color: #e05555;
+}
+
+button {
+  display: inline-block;
+  margin-top: 12px;
+  padding: 7px 18px;
+  background: #4a9eff;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+button:hover {
+  background: #3a8eef;
+}
+
+button:active {
+  background: #2a7edf;
+}
+
+.option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid #2a2f33;
+}
+
+.option:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.option:first-child {
+  padding-top: 0;
+}
+
+.option label {
+  flex: 1;
+  font-size: 13px;
+  color: #ccc;
+  cursor: pointer;
+}
+
+/* Toggle switch */
+input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  position: relative;
+  width: 36px;
+  min-width: 36px;
+  height: 20px;
+  background: #3a3f44;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background 0.2s;
+  outline: none;
+}
+
+input[type="checkbox"]::after {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 14px;
+  height: 14px;
+  background: #888;
+  border-radius: 50%;
+  transition: transform 0.2s, background 0.2s;
+}
+
+input[type="checkbox"]:checked {
+  background: #4a9eff;
+}
+
+input[type="checkbox"]:checked::after {
+  transform: translateX(16px);
+  background: #fff;
+}
+
+#shortcuts {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+#shortcuts label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 13px;
+  color: #ccc;
+}
+
+#shortcuts input[type="text"] {
+  width: 140px;
+  flex-shrink: 0;
+}
+
+#shortcuts br {
+  display: none;
 }
diff --git a/options.html b/options.html
index 14b4212..b627c95 100644
--- a/options.html
+++ b/options.html
@@ -2,98 +2,130 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>AutoPause</title>
+    <title>AutoPause Settings</title>
     <link rel="stylesheet" href="options.css" />
     <script src="options-browser.js" defer></script>
     <script src="options.js" defer></script>
   </head>
   <body>
-    <h1>After changes press enter.</h1>
-    <label
-      >Places to use this extension (space separated): <br /><input
+    <header>
+      <h1>AutoPause</h1>
+      <p class="subtitle">Settings</p>
+    </header>
+
+    <section class="card">
+      <h2>Permissions</h2>
+      <p class="hint">
+        Required to pause, resume, and fast forward media. Not needed for audio
+        detection. Type a site name (e.g. youtube) or a URL pattern, then click
+        Apply.
+      </p>
+      <label for="userinput">Sites to manage</label>
+      <input
         id="userinput"
-        size="500"
-        placeholder="Examples: youtube or <all_urls> or https://*.youtube.com/* https://soundcloud.com/* https://example.com/*"
-    /></label>
-    <label
-      >Exclude Matches (space separated): <br /><input
+        type="text"
+        placeholder="e.g. youtube, <all_urls>, https://*.youtube.com/*"
+      />
+      <label for="exclude">Excluded sites</label>
+      <input
         id="exclude"
-        size="500"
-        placeholder="Examples: zoom or https://meet.google.com/* https://discord.com/* https://teams.live.com/*"
-    /></label>
-    <p>
-      This permission is needed to pause, resume and fast forward media its not
-      needed to detect audio (You can opt-out of detecting media from other tabs
-      below)
-    </p>
-    <br />
-    <div>
-      <label for="ignoreother"> Ignore media from other tabs</label
-      ><input type="checkbox" id="ignoreother" />
-    </div>
-    <div>
-      <label for="ignoreshort">
-        Ignore short media under 3 seconds (e.g. notification sounds)</label
-      ><input type="checkbox" id="ignoreshort" />
-    </div>
-    <div>
-      <label for="nopermission">
-        No permission mode, discards tabs when needed.</label
-      ><input type="checkbox" id="nopermission" />
-    </div>
-    <div>
-      <label for="disableresume"> Disable automatic resume</label
-      ><input type="checkbox" id="disableresume" />
-    </div>
-    <div>
-      <label for="noauto"> Limit resume to the active and marked tabs</label
-      ><input type="checkbox" id="noauto" />
-    </div>
-    <div>
-      <label for="resumelimit"> Dont resume old media thats 5 plays old</label
-      ><input type="checkbox" id="resumelimit" />
-    </div>
-    <div>
-      <label for="pauseoninactive">
-        Pause media on tab change and limit resume to the active and marked
-        tabs</label
-      ><input type="checkbox" id="pauseoninactive" />
-    </div>
-    <div>
-      <label for="ignoretabchange"> Ignore tab changes</label
-      ><input type="checkbox" id="ignoretabchange" />
-    </div>
-    <div>
-      <label for="muteonpause">
-        Mute tab when its paused (unmuting a tab will resume it, no tab
-        switching needed)</label
-      ><input type="checkbox" id="muteonpause" />
-    </div>
-    <div>
-      <label for="multipletabs"> Resume multiple tabs (old behavior)</label
-      ><input type="checkbox" id="multipletabs" />
-    </div>
-    <div>
-      <label for="permediapause">
-        Pause per media instead of per tab (Breaks some sites)</label
-      ><input type="checkbox" id="permediapause" />
-    </div>
-    <div>
-      <label for="allowactive"> Don't automatically pause active windows</label
-      ><input type="checkbox" id="allowactive" />
-    </div>
-    <div id="chromeonly" hidden>
-      <div>
-        <label for="checkidle"> Pause media on device lock (Chrome Only)</label
-        ><input type="checkbox" id="checkidle" />
+        type="text"
+        placeholder="e.g. zoom, https://meet.google.com/*"
+      />
+      <button id="applypermissions" type="button">Apply</button>
+    </section>
+
+    <section class="card">
+      <h2>Pausing</h2>
+      <div class="option">
+        <label for="ignoreother">Ignore media from other tabs</label>
+        <input type="checkbox" id="ignoreother" />
+      </div>
+      <div class="option">
+        <label for="ignoreshort"
+          >Ignore short media under 3 seconds (e.g. notification
+          sounds)</label
+        >
+        <input type="checkbox" id="ignoreshort" />
+      </div>
+      <div class="option">
+        <label for="pauseoninactive"
+          >Pause media on tab change and limit resume to the active and marked
+          tabs</label
+        >
+        <input type="checkbox" id="pauseoninactive" />
+      </div>
+      <div class="option">
+        <label for="ignoretabchange">Ignore tab changes</label>
+        <input type="checkbox" id="ignoretabchange" />
+      </div>
+      <div class="option">
+        <label for="permediapause"
+          >Pause per media instead of per tab (breaks some sites)</label
+        >
+        <input type="checkbox" id="permediapause" />
+      </div>
+      <div class="option">
+        <label for="allowactive"
+          >Don't automatically pause active windows</label
+        >
+        <input type="checkbox" id="allowactive" />
       </div>
-      <div>
-        <label for="ask">
-          Ask for permission to run on audible tabs (Chrome Only)</label
-        ><input type="checkbox" id="ask" />
+      <div class="option">
+        <label for="muteonpause"
+          >Mute tab when paused (unmuting resumes playback)</label
+        >
+        <input type="checkbox" id="muteonpause" />
       </div>
+      <div class="option">
+        <label for="nopermission"
+          >No permission mode (discards tabs when needed)</label
+        >
+        <input type="checkbox" id="nopermission" />
+      </div>
+    </section>
+
+    <section class="card">
+      <h2>Resuming</h2>
+      <div class="option">
+        <label for="disableresume">Disable automatic resume</label>
+        <input type="checkbox" id="disableresume" />
+      </div>
+      <div class="option">
+        <label for="noauto">Limit resume to active and marked tabs</label>
+        <input type="checkbox" id="noauto" />
+      </div>
+      <div class="option">
+        <label for="resumelimit"
+          >Don't resume old media that's 5 plays old</label
+        >
+        <input type="checkbox" id="resumelimit" />
+      </div>
+      <div class="option">
+        <label for="multipletabs">Resume multiple tabs (old behavior)</label>
+        <input type="checkbox" id="multipletabs" />
+      </div>
+    </section>
+
+    <div id="chromeonly" hidden>
+      <section class="card">
+        <h2>Chrome Only</h2>
+        <div class="option">
+          <label for="checkidle">Pause media on device lock</label>
+          <input type="checkbox" id="checkidle" />
+        </div>
+        <div class="option">
+          <label for="ask"
+            >Ask for permission to run on audible tabs</label
+          >
+          <input type="checkbox" id="ask" />
+        </div>
+      </section>
     </div>
-    <h2>Shortcuts</h2>
-    <div id="shortcuts"></div>
+
+    <section class="card">
+      <h2>Shortcuts</h2>
+      <div id="shortcuts"></div>
+    </section>
   </body>
 </html>
diff --git a/options.js b/options.js
index f8ab33b..3889efd 100644
--- a/options.js
+++ b/options.js
@@ -24,7 +24,11 @@ const supported = [
 var userinput = document.getElementById('userinput');
 var exclude = document.getElementById('exclude');
 
-// User presses enter
+// Apply permissions on button click or Enter key
+document.getElementById('applypermissions').addEventListener('click', () => {
+  permissionUpdate();
+});
+
 window.addEventListener('keyup', (event) => {
   if (event.key === 'Enter') {
     event.preventDefault();
