diff --git a/docker-compose.yml b/docker-compose.yml
index 518a257..f9396dd 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -19,4 +19,4 @@ services:
 
 networks:
   pfcontrol-network:
-    driver: bridge
+    driver: bridge
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index d8baad0..7d93a66 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -146,474 +146,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.0.tgz",
-      "integrity": "sha512-lhRUCeuOyJQURhTxl4WkpFTjIsbDayJHih5kZC1giwE+MhIzAb7mEsQMqMf18rHLsrb5qI1tafG20mLxEWcWlA==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "aix"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/android-arm": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.0.tgz",
-      "integrity": "sha512-wqh0ByljabXLKHeWXYLqoJ5jKC4XBaw6Hk08OfMrCRd2nP2ZQ5eleDZC41XHyCNgktBGYMbqnrJKq/K/lzPMSQ==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/android-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.0.tgz",
-      "integrity": "sha512-+WzIXQOSaGs33tLEgYPYe/yQHf0WTU0X42Jca3y8NWMbUVhp7rUnw+vAsRC/QiDrdD31IszMrZy+qwPOPjd+rw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/android-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.0.tgz",
-      "integrity": "sha512-+VJggoaKhk2VNNqVL7f6S189UzShHC/mR9EE8rDdSkdpN0KflSwWY/gWjDrNxxisg8Fp1ZCD9jLMo4m0OUfeUA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.0.tgz",
-      "integrity": "sha512-0T+A9WZm+bZ84nZBtk1ckYsOvyA3x7e2Acj1KdVfV4/2tdG4fzUp91YHx+GArWLtwqp77pBXVCPn2We7Letr0Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.0.tgz",
-      "integrity": "sha512-fyzLm/DLDl/84OCfp2f/XQ4flmORsjU7VKt8HLjvIXChJoFFOIL6pLJPH4Yhd1n1gGFF9mPwtlN5Wf82DZs+LQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.0.tgz",
-      "integrity": "sha512-l9GeW5UZBT9k9brBYI+0WDffcRxgHQD8ShN2Ur4xWq/NFzUKm3k5lsH4PdaRgb2w7mI9u61nr2gI2mLI27Nh3Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.0.tgz",
-      "integrity": "sha512-BXoQai/A0wPO6Es3yFJ7APCiKGc1tdAEOgeTNy3SsB491S3aHn4S4r3e976eUnPdU+NbdtmBuLncYir2tMU9Nw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-arm": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.0.tgz",
-      "integrity": "sha512-CjaaREJagqJp7iTaNQjjidaNbCKYcd4IDkzbwwxtSvjI7NZm79qiHc8HqciMddQ6CKvJT6aBd8lO9kN/ZudLlw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.0.tgz",
-      "integrity": "sha512-RVyzfb3FWsGA55n6WY0MEIEPURL1FcbhFE6BffZEMEekfCzCIMtB5yyDcFnVbTnwk+CLAgTujmV/Lgvih56W+A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.0.tgz",
-      "integrity": "sha512-KBnSTt1kxl9x70q+ydterVdl+Cn0H18ngRMRCEQfrbqdUuntQQ0LoMZv47uB97NljZFzY6HcfqEZ2SAyIUTQBQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.0.tgz",
-      "integrity": "sha512-zpSlUce1mnxzgBADvxKXX5sl8aYQHo2ezvMNI8I0lbblJtp8V4odlm3Yzlj7gPyt3T8ReksE6bK+pT3WD+aJRg==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.0.tgz",
-      "integrity": "sha512-2jIfP6mmjkdmeTlsX/9vmdmhBmKADrWqN7zcdtHIeNSCH1SqIoNI63cYsjQR8J+wGa4Y5izRcSHSm8K3QWmk3w==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.0.tgz",
-      "integrity": "sha512-bc0FE9wWeC0WBm49IQMPSPILRocGTQt3j5KPCA8os6VprfuJ7KD+5PzESSrJ6GmPIPJK965ZJHTUlSA6GNYEhg==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.0.tgz",
-      "integrity": "sha512-SQPZOwoTTT/HXFXQJG/vBX8sOFagGqvZyXcgLA3NhIqcBv1BJU1d46c0rGcrij2B56Z2rNiSLaZOYW5cUk7yLQ==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.0.tgz",
-      "integrity": "sha512-SCfR0HN8CEEjnYnySJTd2cw0k9OHB/YFzt5zgJEwa+wL/T/raGWYMBqwDNAC6dqFKmJYZoQBRfHjgwLHGSrn3Q==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.0.tgz",
-      "integrity": "sha512-us0dSb9iFxIi8srnpl931Nvs65it/Jd2a2K3qs7fz2WfGPHqzfzZTfec7oxZJRNPXPnNYZtanmRc4AL/JwVzHQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.0.tgz",
-      "integrity": "sha512-CR/RYotgtCKwtftMwJlUU7xCVNg3lMYZ0RzTmAHSfLCXw3NtZtNpswLEj/Kkf6kEL3Gw+BpOekRX0BYCtklhUw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.0.tgz",
-      "integrity": "sha512-nU1yhmYutL+fQ71Kxnhg8uEOdC0pwEW9entHykTgEbna2pw2dkbFSMeqjjyHZoCmt8SBkOSvV+yNmm94aUrrqw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.0.tgz",
-      "integrity": "sha512-cXb5vApOsRsxsEl4mcZ1XY3D4DzcoMxR/nnc4IyqYs0rTI8ZKmW6kyyg+11Z8yvgMfAEldKzP7AdP64HnSC/6g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.0.tgz",
-      "integrity": "sha512-8wZM2qqtv9UP3mzy7HiGYNH/zjTA355mpeuA+859TyR+e+Tc08IHYpLJuMsfpDJwoLo1ikIJI8jC3GFjnRClzA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.0.tgz",
-      "integrity": "sha512-FLGfyizszcef5C3YtoyQDACyg95+dndv79i2EekILBofh5wpCa1KuBqOWKrEHZg3zrL3t5ouE5jgr94vA+Wb2w==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openharmony"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.0.tgz",
-      "integrity": "sha512-1ZgjUoEdHZZl/YlV76TSCz9Hqj9h9YmMGAgAPYd+q4SicWNX3G5GCyx9uhQWSLcbvPW8Ni7lj4gDa1T40akdlw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.0.tgz",
-      "integrity": "sha512-Q9StnDmQ/enxnpxCCLSg0oo4+34B9TdXpuyPeTedN/6+iXBJ4J+zwfQI28u/Jl40nOYAxGoNi7mFP40RUtkmUA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.0.tgz",
-      "integrity": "sha512-zF3ag/gfiCe6U2iczcRzSYJKH1DCI+ByzSENHlM2FcDbEeo5Zd2C86Aq0tKUYAJJ1obRP84ymxIAksZUcdztHA==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/win32-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.0.tgz",
-      "integrity": "sha512-pEl1bO9mfAmIC+tW5btTmrKaujg3zGtUmWNdCw/xs70FBjwAL3o9OEKNHvNmnyylD6ubxUERiEhdsL0xBQ9efw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.9.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.0.tgz",
@@ -1088,6 +620,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1105,6 +640,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1122,6 +660,9 @@
         "ppc64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1139,6 +680,9 @@
         "riscv64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1156,6 +700,9 @@
         "riscv64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1173,6 +720,9 @@
         "s390x"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1190,6 +740,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1207,6 +760,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1495,6 +1051,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1512,6 +1071,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1529,6 +1091,9 @@
         "ppc64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1546,6 +1111,9 @@
         "riscv64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1563,6 +1131,9 @@
         "riscv64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1580,6 +1151,9 @@
         "s390x"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1597,6 +1171,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1614,6 +1191,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3612,6 +3192,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3629,6 +3212,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3646,6 +3232,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3663,6 +3252,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4844,49 +4436,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/esbuild": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.0.tgz",
-      "integrity": "sha512-sNR9MHpXSUV/XB4zmsFKN+QgVG82Cc7+/aaxJ8Adi8hyOac+EXptIp45QBPaVyX3N70664wRbTcLTOemCAnyqw==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.28.0",
-        "@esbuild/android-arm": "0.28.0",
-        "@esbuild/android-arm64": "0.28.0",
-        "@esbuild/android-x64": "0.28.0",
-        "@esbuild/darwin-arm64": "0.28.0",
-        "@esbuild/darwin-x64": "0.28.0",
-        "@esbuild/freebsd-arm64": "0.28.0",
-        "@esbuild/freebsd-x64": "0.28.0",
-        "@esbuild/linux-arm": "0.28.0",
-        "@esbuild/linux-arm64": "0.28.0",
-        "@esbuild/linux-ia32": "0.28.0",
-        "@esbuild/linux-loong64": "0.28.0",
-        "@esbuild/linux-mips64el": "0.28.0",
-        "@esbuild/linux-ppc64": "0.28.0",
-        "@esbuild/linux-riscv64": "0.28.0",
-        "@esbuild/linux-s390x": "0.28.0",
-        "@esbuild/linux-x64": "0.28.0",
-        "@esbuild/netbsd-arm64": "0.28.0",
-        "@esbuild/netbsd-x64": "0.28.0",
-        "@esbuild/openbsd-arm64": "0.28.0",
-        "@esbuild/openbsd-x64": "0.28.0",
-        "@esbuild/openharmony-arm64": "0.28.0",
-        "@esbuild/sunos-x64": "0.28.0",
-        "@esbuild/win32-arm64": "0.28.0",
-        "@esbuild/win32-ia32": "0.28.0",
-        "@esbuild/win32-x64": "0.28.0"
-      }
-    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -10333,7 +9882,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10350,7 +9898,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10367,7 +9914,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10384,7 +9930,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10401,7 +9946,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10418,7 +9962,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10435,7 +9978,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10452,7 +9994,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10469,7 +10010,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10486,7 +10026,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10503,7 +10042,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10520,7 +10058,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10537,7 +10074,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10554,7 +10090,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10571,7 +10106,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10588,7 +10122,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10605,7 +10138,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10622,7 +10154,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10639,7 +10170,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10656,7 +10186,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10673,7 +10202,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10690,7 +10218,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10707,7 +10234,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10724,7 +10250,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10741,7 +10266,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -10758,7 +10282,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
diff --git a/src/components/Settings/AcarsSettings.tsx b/src/components/Settings/AcarsSettings.tsx
index 218ca05..3ea09a9 100644
--- a/src/components/Settings/AcarsSettings.tsx
+++ b/src/components/Settings/AcarsSettings.tsx
@@ -1,501 +1,256 @@
-import {
-  Terminal,
-  StickyNote,
-  LayoutDashboard,
-  Eye,
-  ChevronDown,
-  ChevronUp,
-} from 'lucide-react';
+import { Terminal, StickyNote, LayoutDashboard, Eye, ChevronDown, ChevronUp } from 'lucide-react';
 import { useState, useEffect, useMemo, useRef } from 'react';
 import type { Settings } from '../../types/settings';
 import Button from '../common/Button';
+import Toggle from './Toggle';
+import { S } from './settingsTokens';
 
 interface AcarsSettingsProps {
   settings: Settings | null;
   onChange: (updatedSettings: Settings) => void;
 }
 
-export default function AcarsSettings({
-  settings,
-  onChange,
-}: AcarsSettingsProps) {
+export default function AcarsSettings({ settings, onChange }: AcarsSettingsProps) {
   const [isExpanded, setIsExpanded] = useState(false);
-  const [isDragging, setIsDragging] = useState<
-    'sidebar' | 'terminal' | 'notes' | null
-  >(null);
-  const [previewWidths, setPreviewWidths] = useState({
-    sidebar: 30,
-    terminal: 50,
-    notes: 20,
-  });
-
+  const [isDragging, setIsDragging] = useState<'sidebar' | 'terminal' | 'notes' | null>(null);
+  const [previewWidths, setPreviewWidths] = useState({ sidebar: 30, terminal: 50, notes: 20 });
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const minSidebar = 10,
-    maxSidebar = 40;
-  const minTerminal = 20,
-    maxTerminal = 80;
-  const minNotes = 10,
-    maxNotes = 60;
-
-  const calculatedWidths = useMemo(() => {
-    if (!settings) return { sidebar: 30, terminal: 50, notes: 20 };
-
-    let sidebarWidth = settings.acars.sidebarWidth ?? 30;
-    let terminalWidth = settings.acars.terminalWidth ?? 50;
-    let notesWidth = settings.acars.notesWidth ?? 20;
-    const notesEnabled = settings.acars.notesEnabled;
-
-    sidebarWidth = Math.max(minSidebar, Math.min(maxSidebar, sidebarWidth));
-    if (notesEnabled) {
-      notesWidth = Math.max(minNotes, Math.min(maxNotes, notesWidth));
-      terminalWidth = 100 - sidebarWidth - notesWidth;
-      terminalWidth = Math.max(minTerminal, terminalWidth);
-      if (sidebarWidth + terminalWidth + notesWidth > 100) {
-        notesWidth = 100 - sidebarWidth - terminalWidth;
-        notesWidth = Math.max(minNotes, notesWidth);
-      }
-    } else {
-      notesWidth = 0;
-      terminalWidth = 100 - sidebarWidth;
-      terminalWidth = Math.max(minTerminal, terminalWidth);
+  const minSidebar = 10, maxSidebar = 40;
+  const minTerminal = 20, maxTerminal = 80;
+  const minNotes = 10, maxNotes = 60;
+
+ const calculatedWidths = useMemo(() => {
+  if (!settings) return { sidebar: 30, terminal: 50, notes: 20 };
+  const sidebarWidth = Math.max(minSidebar, Math.min(maxSidebar, settings.acars.sidebarWidth ?? 30));
+  let terminalWidth = settings.acars.terminalWidth ?? 50;
+  let notesWidth = settings.acars.notesWidth ?? 20;
+  const notesEnabled = settings.acars.notesEnabled;
+  if (notesEnabled) {
+    notesWidth = Math.max(minNotes, Math.min(maxNotes, notesWidth));
+    terminalWidth = 100 - sidebarWidth - notesWidth;
+    terminalWidth = Math.max(minTerminal, terminalWidth);
+    if (sidebarWidth + terminalWidth + notesWidth > 100) {
+      notesWidth = Math.max(minNotes, 100 - sidebarWidth - terminalWidth);
     }
-
-    return {
-      sidebar: sidebarWidth,
-      terminal: terminalWidth,
-      notes: notesWidth,
-    };
-  }, [settings]);
+  } else {
+    notesWidth = 0;
+    terminalWidth = Math.max(minTerminal, 100 - sidebarWidth);
+  }
+  return { sidebar: sidebarWidth, terminal: terminalWidth, notes: notesWidth };
+}, [settings]);
 
   useEffect(() => {
-    setPreviewWidths(calculatedWidths);
-  }, [calculatedWidths]);
-
-  const handleNotesToggle = () => {
-    if (!settings) return;
-    const updatedSettings = {
-      ...settings,
-      acars: {
-        ...settings.acars,
-        notesEnabled: !settings.acars.notesEnabled,
-      },
-    };
-    onChange(updatedSettings);
-  };
-
-  const handleAutoRedirectToggle = () => {
-    if (!settings) return;
-    const updatedSettings = {
-      ...settings,
-      acars: {
-        ...settings.acars,
-        autoRedirectToAcars: !settings.acars.autoRedirectToAcars,
-      },
-    };
-    onChange(updatedSettings);
-  };
+    if (!isDragging) setPreviewWidths(calculatedWidths);
+  }, [calculatedWidths, isDragging]);
 
   useEffect(() => {
-    if (!isDragging) {
-      setPreviewWidths(calculatedWidths);
+    if (isDragging) {
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+    } else {
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
     }
-  }, [calculatedWidths, isDragging]);
-
-  const handleSidebarWidthChange = (width: number) => {
-    if (!settings) return;
-    console.log('Saving sidebarWidth', width);
-    const updatedSettings = {
-      ...settings,
-      acars: {
-        ...settings.acars,
-        sidebarWidth: width,
-      },
-    };
-    onChange(updatedSettings);
-  };
-
-  const handleTerminalWidthChange = (width: number) => {
-    if (!settings) return;
-    const updatedSettings = {
-      ...settings,
-      acars: {
-        ...settings.acars,
-        terminalWidth: width,
-      },
-    };
-    onChange(updatedSettings);
-  };
+  }, [isDragging]);
 
-  const handleNotesWidthChange = (width: number) => {
+  const commitWidths = () => {
     if (!settings) return;
-    const updatedSettings = {
+    onChange({
       ...settings,
       acars: {
         ...settings.acars,
-        notesWidth: width,
+        sidebarWidth: previewWidths.sidebar,
+        terminalWidth: previewWidths.terminal,
+        notesWidth: settings.acars.notesEnabled ? previewWidths.notes : settings.acars.notesWidth,
       },
-    };
-    onChange(updatedSettings);
-  };
-
-  const handleMouseDown = (divider: 'sidebar' | 'terminal' | 'notes') => {
-    setIsDragging(divider);
+    });
   };
 
-  const handleMouseMove = (
-    e: MouseEvent | React.MouseEvent<HTMLDivElement>
-  ) => {
+  const handleMouseMove = (e: MouseEvent) => {
     if (!isDragging || !settings) return;
-
     const container = containerRef.current;
     if (!container) return;
     const rect = container.getBoundingClientRect();
     const x = e.clientX - rect.left;
-
     let tempSidebar = previewWidths.sidebar;
     let tempTerminal = previewWidths.terminal;
     let tempNotes = previewWidths.notes;
 
     if (isDragging === 'sidebar') {
       const mouseSidebar = (x / rect.width) * 100;
-      tempSidebar =
-        Math.round(
-          Math.max(minSidebar, Math.min(maxSidebar, mouseSidebar)) / 5
-        ) * 5;
-
+      tempSidebar = Math.round(Math.max(minSidebar, Math.min(maxSidebar, mouseSidebar)) / 5) * 5;
       if (settings.acars.notesEnabled) {
         tempNotes = Math.max(minNotes, Math.min(maxNotes, previewWidths.notes));
-        tempTerminal = 100 - tempSidebar - tempNotes;
-        tempTerminal = Math.max(minTerminal, tempTerminal);
+        tempTerminal = Math.max(minTerminal, 100 - tempSidebar - tempNotes);
         if (tempSidebar + tempTerminal + tempNotes > 100) {
-          tempNotes = 100 - tempSidebar - tempTerminal;
-          tempNotes = Math.max(minNotes, tempNotes);
+          tempNotes = Math.max(minNotes, 100 - tempSidebar - tempTerminal);
         }
       } else {
         tempNotes = 0;
-        tempTerminal = 100 - tempSidebar;
-        tempTerminal = Math.max(minTerminal, tempTerminal);
+        tempTerminal = Math.max(minTerminal, 100 - tempSidebar);
       }
     } else if (isDragging === 'terminal' && settings.acars.notesEnabled) {
-      const sidebar = previewWidths.sidebar;
-      const mouseTerminal = (x / rect.width) * 100 - sidebar;
-      tempTerminal =
-        Math.round(
-          Math.max(minTerminal, Math.min(maxTerminal, mouseTerminal)) / 5
-        ) * 5;
+      const mouseTerminal = (x / rect.width) * 100 - previewWidths.sidebar;
+      tempTerminal = Math.round(Math.max(minTerminal, Math.min(maxTerminal, mouseTerminal)) / 5) * 5;
       tempSidebar = previewWidths.sidebar;
-      tempNotes = 100 - tempSidebar - tempTerminal;
-      tempNotes = Math.max(minNotes, tempNotes);
-      tempTerminal = 100 - tempSidebar - tempNotes;
-      tempTerminal = Math.max(minTerminal, tempTerminal);
-    }
-
-    setPreviewWidths({
-      sidebar: tempSidebar,
-      terminal: tempTerminal,
-      notes: tempNotes,
-    });
-  };
-
-  const commitWidths = () => {
-    if (!settings) return;
-    onChange({
-      ...settings,
-      acars: {
-        ...settings.acars,
-        sidebarWidth: previewWidths.sidebar,
-        terminalWidth: previewWidths.terminal,
-        notesWidth: settings.acars.notesEnabled
-          ? previewWidths.notes
-          : settings.acars.notesWidth,
-      },
-    });
-  };
-
-  const handleMouseUp = () => {
-    if (isDragging) {
-      commitWidths();
+      tempNotes = Math.max(minNotes, 100 - tempSidebar - tempTerminal);
+      tempTerminal = Math.max(minTerminal, 100 - tempSidebar - tempNotes);
     }
-    setIsDragging(null);
+    setPreviewWidths({ sidebar: tempSidebar, terminal: tempTerminal, notes: tempNotes });
   };
 
-  useEffect(() => {
-    if (isDragging) {
-      document.body.style.cursor = 'col-resize';
-      document.body.style.userSelect = 'none';
-    } else {
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-    }
-  }, [isDragging]);
-
   useEffect(() => {
     if (!isDragging) return;
-
-    const handleGlobalMouseMove = (e: MouseEvent) => {
-      handleMouseMove(e);
-    };
-
-    const handleGlobalMouseUp = () => {
-      handleMouseUp();
-    };
-
-    document.addEventListener('mousemove', handleGlobalMouseMove);
-    document.addEventListener('mouseup', handleGlobalMouseUp);
-
-    return () => {
-      document.removeEventListener('mousemove', handleGlobalMouseMove);
-      document.removeEventListener('mouseup', handleGlobalMouseUp);
-    };
+    const onMove = (e: MouseEvent) => handleMouseMove(e);
+    const onUp = () => { commitWidths(); setIsDragging(null); };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+    return () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
   }, [isDragging, previewWidths, settings]);
 
-  useEffect(() => {
-    console.log(
-      'Rendered with settings.sidebarWidth',
-      settings?.acars.sidebarWidth
-    );
-  }, [settings]);
-
   if (!settings) return null;
 
   return (
-    <div className="bg-zinc-900 border border-zinc-700/50 rounded-2xl overflow-hidden z-1">
-      {/* Header */}
-      <div className="w-full p-4 sm:p-6 border-b border-zinc-700/50">
-        <div className="flex items-center justify-between gap-3">
-          <div
-            className="flex items-center flex-1 min-w-0 cursor-pointer"
-            onClick={() => setIsExpanded(!isExpanded)}
-          >
-            <div className="p-2 bg-cyan-500/20 rounded-lg mr-3 sm:mr-4 flex-shrink-0">
-              <Terminal className="h-5 w-5 sm:h-6 sm:w-6 text-cyan-400" />
+    <div className={`${S.card} z-1`}>
+      <div className={S.header}>
+        <div className={S.headerInner}>
+          <div className={S.headerClickable} onClick={() => setIsExpanded(!isExpanded)}>
+            <div className={`${S.iconBox} ${S.iconBoxMr} bg-cyan-500/20`}>
+              <Terminal className={`${S.icon} text-cyan-400`} />
             </div>
             <div className="text-left min-w-0">
-              <h3 className="text-lg sm:text-xl font-semibold text-white">
-                ACARS Settings
-              </h3>
-              <p className="text-zinc-400 text-xs sm:text-sm mt-1 hidden sm:block">
-                Configure ACARS terminal panels and default layout
-              </p>
+              <h3 className={S.title}>ACARS Settings</h3>
+              <p className={S.subtitle}>Configure ACARS terminal panels and default layout</p>
             </div>
           </div>
-          <Button
-            onClick={() => setIsExpanded(!isExpanded)}
-            variant="outline"
-            size="sm"
-            className="border-zinc-600 text-zinc-300 hover:bg-zinc-800 p-2 flex-shrink-0"
-          >
-            {isExpanded ? (
-              <ChevronUp className="h-4 w-4" />
-            ) : (
-              <ChevronDown className="h-4 w-4" />
-            )}
+          <Button onClick={() => setIsExpanded(!isExpanded)} variant="outline" size="sm" className={S.chevronBtn}>
+            {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
           </Button>
         </div>
       </div>
 
-      {/* Content */}
-      <div
-        className={`transition-all duration-300 ease-in-out ${
-          isExpanded
-            ? 'max-h-[2000px] opacity-100'
-            : 'max-h-0 opacity-0 overflow-hidden'
-        }`}
-      >
-        <div className="p-4 sm:p-6">
+      <div className={`transition-all duration-300 ease-in-out ${isExpanded ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0 overflow-hidden'}`}>
+        <div className={S.content}>
           <div className="space-y-6">
+
             {/* Panel Toggles */}
-            <div className="bg-zinc-800/30 border border-zinc-700/50 rounded-xl p-5">
-              <div className="flex items-start mb-4">
-                <div className="p-2 bg-blue-500/20 rounded-lg mr-4 mt-0.5">
-                  <Eye className="h-5 w-5 text-blue-400" />
+            <div className={S.section}>
+              <div className={S.sectionHeader}>
+                <div className={`${S.sectionIconBox} bg-blue-500/20`}>
+                  <Eye className={`${S.sectionIcon} text-blue-400`} />
                 </div>
                 <div>
-                  <h4 className="text-white font-medium mb-1">
-                    Panel Visibility
-                  </h4>
-                  <p className="text-zinc-400 text-sm">
-                    Choose which panels are enabled in the ACARS terminal
-                  </p>
+                  <h4 className={S.sectionTitle}>Panel Visibility</h4>
+                  <p className={S.sectionSubtitle}>Choose which panels are enabled in the ACARS terminal</p>
                 </div>
               </div>
-              <div className="space-y-4">
-                {/* Notes Toggle */}
-                <div className="flex items-center justify-between p-4 bg-zinc-900/50 rounded-lg border border-zinc-700/30">
-                  <div className="flex items-center">
-                    <StickyNote className="h-5 w-5 text-blue-400 mr-3" />
+              <div className="space-y-3">
+                <div className={S.toggleRow}>
+                  <div className="flex items-center gap-3">
+                    <StickyNote className="h-5 w-5 text-blue-400" />
                     <div>
-                      <p className="text-white font-medium text-sm">
-                        Notes Panel
-                      </p>
-                      <p className="text-zinc-500 text-xs">
-                        Flight notes and planning
-                      </p>
+                      <p className="text-white font-medium text-sm">Notes Panel</p>
+                      <p className="text-zinc-500 text-xs">Flight notes and planning</p>
                     </div>
                   </div>
-                  <button
-                    onClick={handleNotesToggle}
-                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-                      settings.acars.notesEnabled
-                        ? 'bg-blue-600'
-                        : 'bg-zinc-700'
-                    }`}
-                  >
-                    <span
-                      className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                        settings.acars.notesEnabled
-                          ? 'translate-x-6'
-                          : 'translate-x-1'
-                      }`}
-                    />
-                  </button>
+                  <Toggle
+                    checked={settings.acars.notesEnabled}
+                    onChange={() => onChange({ ...settings, acars: { ...settings.acars, notesEnabled: !settings.acars.notesEnabled } })}
+                    activeColor="bg-blue-600"
+                  />
                 </div>
-
-                {/* Auto Redirect to ACARS Toggle */}
-                <div className="flex items-center justify-between p-4 bg-zinc-900/50 rounded-lg border border-zinc-700/30">
-                  <div className="flex items-center">
-                    <Terminal className="h-5 w-5 text-green-400 mr-3" />
+                <div className={S.toggleRow}>
+                  <div className="flex items-center gap-3">
+                    <Terminal className="h-5 w-5 text-green-400" />
                     <div>
-                      <p className="text-white font-medium text-sm">
-                        Auto Redirect to ACARS
-                      </p>
-                      <p className="text-zinc-500 text-xs">
-                        Automatically open ACARS after submitting flight plan
-                        (PFATC sessions only)
-                      </p>
+                      <p className="text-white font-medium text-sm">Auto Redirect to ACARS</p>
+                      <p className="text-zinc-500 text-xs">Automatically open ACARS after submitting flight plan (PFATC sessions only)</p>
                     </div>
                   </div>
-                  <button
-                    onClick={handleAutoRedirectToggle}
-                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-                      (settings.acars.autoRedirectToAcars ?? true)
-                        ? 'bg-green-600'
-                        : 'bg-zinc-700'
-                    }`}
-                  >
-                    <span
-                      className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                        (settings.acars.autoRedirectToAcars ?? true)
-                          ? 'translate-x-6'
-                          : 'translate-x-1'
-                      }`}
-                    />
-                  </button>
+                  <Toggle
+                    checked={settings.acars.autoRedirectToAcars ?? true}
+                    onChange={() => onChange({ ...settings, acars: { ...settings.acars, autoRedirectToAcars: !(settings.acars.autoRedirectToAcars ?? true) } })}
+                    activeColor="bg-green-600"
+                  />
                 </div>
               </div>
             </div>
 
-            {/* Interactive Visual Preview */}
-            <div className="bg-zinc-800/30 border border-zinc-700/50 rounded-xl p-5">
-              <div className="flex items-start mb-4">
-                <div className="p-2 bg-cyan-500/20 rounded-lg mr-4 mt-0.5">
-                  <LayoutDashboard className="h-5 w-5 text-cyan-400" />
+            {/* Interactive Preview */}
+            <div className={S.section}>
+              <div className={S.sectionHeader}>
+                <div className={`${S.sectionIconBox} bg-cyan-500/20`}>
+                  <LayoutDashboard className={`${S.sectionIcon} text-cyan-400`} />
                 </div>
                 <div>
-                  <h4 className="text-white font-medium mb-1">Preview</h4>
-                  <p className="text-zinc-400 text-sm">
-                    Drag the divider to adjust default panel widths
-                  </p>
+                  <h4 className={S.sectionTitle}>Preview</h4>
+                  <p className={S.sectionSubtitle}>Drag the divider to adjust default panel widths</p>
                 </div>
               </div>
-
               <div
                 ref={containerRef}
                 className="relative bg-zinc-950 border border-zinc-700 rounded-lg overflow-hidden"
                 style={{ height: '200px' }}
               >
                 <div className="flex h-full">
-                  {/* Sidebar */}
-                  <div
-                    style={{ width: `${previewWidths.sidebar}%` }}
-                    className="bg-gradient-to-br from-zinc-900 to-zinc-950 border-r border-gray-700 flex flex-col"
-                  >
+                  <div style={{ width: `${previewWidths.sidebar}%` }} className="bg-gradient-to-br from-zinc-900 to-zinc-950 border-r border-gray-700 flex flex-col">
                     <div className="bg-zinc-900/50 px-3 py-2 border-b border-gray-700 flex items-center gap-2">
                       <Eye className="w-3 h-3 text-blue-400" />
-                      <span className="text-[10px] text-gray-300 font-mono">
-                        Sidebar
-                      </span>
+                      <span className="text-[10px] text-gray-300 font-mono">Sidebar</span>
                     </div>
                     <div className="flex-1 p-2 space-y-1">
-                      <div className="h-1 bg-blue-500/20 rounded w-3/4"></div>
-                      <div className="h-1 bg-cyan-500/20 rounded w-full"></div>
+                      <div className="h-1 bg-blue-500/20 rounded w-3/4" />
+                      <div className="h-1 bg-cyan-500/20 rounded w-full" />
                     </div>
                   </div>
-                  <div
-                    className="w-1 bg-blue-500 hover:bg-blue-400 cursor-col-resize flex-shrink-0 relative group"
-                    onMouseDown={() => handleMouseDown('sidebar')}
-                  >
+                  <div className="w-1 bg-blue-500 hover:bg-blue-400 cursor-col-resize flex-shrink-0 relative" onMouseDown={() => setIsDragging('sidebar')}>
                     <div className="absolute inset-y-0 -left-1 -right-1" />
                   </div>
-                  {/* Terminal */}
-                  <div
-                    style={{ width: `${previewWidths.terminal}%` }}
-                    className="bg-gradient-to-br from-gray-800 to-gray-900 border-r border-gray-700 flex flex-col"
-                  >
+                  <div style={{ width: `${previewWidths.terminal}%` }} className="bg-gradient-to-br from-gray-800 to-gray-900 border-r border-gray-700 flex flex-col">
                     <div className="bg-gray-800/50 px-3 py-2 border-b border-gray-700 flex items-center gap-2">
                       <Terminal className="w-3 h-3 text-green-400" />
-                      <span className="text-[10px] text-gray-300 font-mono">
-                        Terminal
-                      </span>
+                      <span className="text-[10px] text-gray-300 font-mono">Terminal</span>
                     </div>
                     <div className="flex-1 p-2 space-y-1">
-                      <div className="h-1 bg-green-500/20 rounded w-3/4"></div>
-                      <div className="h-1 bg-cyan-500/20 rounded w-full"></div>
+                      <div className="h-1 bg-green-500/20 rounded w-3/4" />
+                      <div className="h-1 bg-cyan-500/20 rounded w-full" />
                     </div>
                   </div>
-                  {/* Terminal Divider */}
-                  {settings.acars.notesEnabled && (
-                    <div
-                      className="w-1 bg-blue-500 hover:bg-blue-400 cursor-col-resize flex-shrink-0 relative group"
-                      onMouseDown={() => handleMouseDown('terminal')}
-                    >
-                      <div className="absolute inset-y-0 -left-1 -right-1" />
-                    </div>
-                  )}
-                  {/* Notes */}
                   {settings.acars.notesEnabled && (
-                    <div
-                      style={{ width: `${previewWidths.notes}%` }}
-                      className="bg-gradient-to-br from-blue-900 to-blue-950 flex flex-col"
-                    >
-                      <div className="bg-blue-900/50 px-3 py-2 border-b border-gray-700 flex items-center gap-2">
-                        <StickyNote className="w-3 h-3 text-blue-400" />
-                        <span className="text-[10px] text-gray-300 font-mono">
-                          Notes
-                        </span>
+                    <>
+                      <div className="w-1 bg-blue-500 hover:bg-blue-400 cursor-col-resize flex-shrink-0 relative" onMouseDown={() => setIsDragging('terminal')}>
+                        <div className="absolute inset-y-0 -left-1 -right-1" />
                       </div>
-                      <div className="flex-1 p-2 space-y-1">
-                        <div className="h-1 bg-blue-500/30 rounded w-full"></div>
-                        <div className="h-1 bg-blue-500/30 rounded w-5/6"></div>
+                      <div style={{ width: `${previewWidths.notes}%` }} className="bg-gradient-to-br from-blue-900 to-blue-950 flex flex-col">
+                        <div className="bg-blue-900/50 px-3 py-2 border-b border-gray-700 flex items-center gap-2">
+                          <StickyNote className="w-3 h-3 text-blue-400" />
+                          <span className="text-[10px] text-gray-300 font-mono">Notes</span>
+                        </div>
+                        <div className="flex-1 p-2 space-y-1">
+                          <div className="h-1 bg-blue-500/30 rounded w-full" />
+                          <div className="h-1 bg-blue-500/30 rounded w-5/6" />
+                        </div>
                       </div>
-                    </div>
+                    </>
                   )}
                 </div>
               </div>
               <p className="text-xs text-zinc-500 mt-2 text-center">
-                Sidebar: {previewWidths.sidebar}% • Terminal:{' '}
-                {previewWidths.terminal}%
-                {settings.acars.notesEnabled ? (
-                  <> • Notes: {previewWidths.notes}%</>
-                ) : null}
+                Sidebar: {previewWidths.sidebar}% • Terminal: {previewWidths.terminal}%
+                {settings.acars.notesEnabled && <> • Notes: {previewWidths.notes}%</>}
               </p>
             </div>
           </div>
 
-          {/* Info Section */}
-          <div className="mt-6 p-4 bg-gradient-to-r from-cyan-900/20 to-blue-900/20 border border-cyan-500/20 rounded-lg">
+          <div className={`${S.infoBanner} bg-gradient-to-r from-cyan-900/20 to-blue-900/20 border-cyan-500/20`}>
             <div className="flex items-start">
-              <div className="w-2 h-2 bg-cyan-400 rounded-full mt-2 mr-3 flex-shrink-0"></div>
+              <div className="w-2 h-2 bg-cyan-400 rounded-full mt-2 mr-3 flex-shrink-0" />
               <div>
-                <h4 className="text-cyan-300 font-medium text-sm mb-1">
-                  ACARS Information
-                </h4>
+                <h4 className="text-cyan-300 font-medium text-sm mb-1">ACARS Information</h4>
                 <p className="text-cyan-200/80 text-xs sm:text-sm leading-relaxed">
-                  Panel visibility and width settings apply to the ACARS
-                  terminal interface on desktop. The Terminal panel cannot be
-                  disabled. Changes take effect the next time you open an ACARS
-                  terminal.
+                  Panel visibility and width settings apply to the ACARS terminal interface on desktop. The Terminal
+                  panel cannot be disabled. Changes take effect the next time you open an ACARS terminal.
                 </p>
               </div>
             </div>
@@ -504,4 +259,4 @@ export default function AcarsSettings({
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/Settings/AccountSettings.tsx b/src/components/Settings/AccountSettings.tsx
index fb2f1f3..27bf6bc 100644
--- a/src/components/Settings/AccountSettings.tsx
+++ b/src/components/Settings/AccountSettings.tsx
@@ -10,7 +10,6 @@ import {
   Shield,
   AlertTriangle,
   FileText,
-  MessageSquare,
 } from 'lucide-react';
 import { SiRoblox, SiDiscord } from 'react-icons/si';
 import { updateTutorialStatus } from '../../utils/fetch/auth';
@@ -19,16 +18,14 @@ import { useNavigate } from 'react-router-dom';
 import type { Settings } from '../../types/settings';
 import PrivacySettings from './PrivacySettings';
 import ConfirmationDialog from '../common/ConfirmationDialog';
+import { S } from './settingsTokens';
 
 interface AccountSettingsProps {
   settings: Settings | null;
   onChange: (updatedSettings: Settings) => void;
 }
 
-export default function AccountSettings({
-  settings,
-  onChange,
-}: AccountSettingsProps) {
+export default function AccountSettings({ settings, onChange }: AccountSettingsProps) {
   const { user, refreshUser } = useAuth();
   const navigate = useNavigate();
   const [isPrivacyExpanded, setIsPrivacyExpanded] = useState(false);
@@ -36,35 +33,18 @@ export default function AccountSettings({
   const [showRobloxConfirm, setShowRobloxConfirm] = useState(false);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [deleteInProgress, setDeleteInProgress] = useState(false);
-  const isVatsimLinked = !!(
-    user?.vatsimCid ||
-    user?.vatsimRatingShort ||
-    user?.vatsimRatingLong
-  );
 
-  const handleLinkRoblox = () => {
-    window.location.href = `${import.meta.env.VITE_SERVER_URL}/api/auth/roblox`;
-  };
+  const isVatsimLinked = !!(user?.vatsimCid || user?.vatsimRatingShort || user?.vatsimRatingLong);
 
-  const handleLinkVatsim = () => {
-    window.location.href = `${import.meta.env.VITE_SERVER_URL}/api/auth/vatsim?force=1`;
-  };
+  const handleLinkRoblox = () => { window.location.href = `${import.meta.env.VITE_SERVER_URL}/api/auth/roblox`; };
+  const handleLinkVatsim = () => { window.location.href = `${import.meta.env.VITE_SERVER_URL}/api/auth/vatsim?force=1`; };
 
   const handleUnlinkVatsim = async () => {
     setShowVatsimConfirm(false);
     try {
-      const res = await fetch(
-        `${import.meta.env.VITE_SERVER_URL}/api/auth/vatsim/unlink`,
-        {
-          method: 'POST',
-          credentials: 'include',
-        }
-      );
-      if (res.ok) {
-        await refreshUser();
-      } else {
-        alert('Failed to unlink VATSIM account');
-      }
+      const res = await fetch(`${import.meta.env.VITE_SERVER_URL}/api/auth/vatsim/unlink`, { method: 'POST', credentials: 'include' });
+      if (res.ok) await refreshUser();
+      else alert('Failed to unlink VATSIM account');
     } catch (e) {
       console.error('Unlink VATSIM error:', e);
       alert('Failed to unlink VATSIM account');
@@ -74,19 +54,9 @@ export default function AccountSettings({
   const handleUnlinkRoblox = async () => {
     setShowRobloxConfirm(false);
     try {
-      const res = await fetch(
-        `${import.meta.env.VITE_SERVER_URL}/api/auth/roblox/unlink`,
-        {
-          method: 'POST',
-          credentials: 'include',
-        }
-      );
-
-      if (res.ok) {
-        await refreshUser();
-      } else {
-        alert('Failed to unlink Roblox account');
-      }
+      const res = await fetch(`${import.meta.env.VITE_SERVER_URL}/api/auth/roblox/unlink`, { method: 'POST', credentials: 'include' });
+      if (res.ok) await refreshUser();
+      else alert('Failed to unlink Roblox account');
     } catch (error) {
       console.error('Error unlinking Roblox:', error);
       alert('Failed to unlink Roblox account');
@@ -96,12 +66,8 @@ export default function AccountSettings({
   const handleRestartTutorial = async () => {
     try {
       const success = await updateTutorialStatus(false);
-      if (success) {
-        await refreshUser();
-        navigate('/?tutorial=true');
-      } else {
-        console.error('Failed to reset tutorial.');
-      }
+      if (success) { await refreshUser(); navigate('/?tutorial=true'); }
+      else console.error('Failed to reset tutorial.');
     } catch (error) {
       console.error('Error resetting tutorial:', error);
     }
@@ -109,26 +75,14 @@ export default function AccountSettings({
 
   const handleBioChange = (bio: string) => {
     if (!settings) return;
-    const updatedSettings = {
-      ...settings,
-      bio,
-    };
-    onChange(updatedSettings);
+    onChange({ ...settings, bio });
   };
 
   const handleDeleteAccount = async () => {
     setShowDeleteConfirm(false);
     setDeleteInProgress(true);
-
     try {
-      const res = await fetch(
-        `${import.meta.env.VITE_SERVER_URL}/api/auth/delete-account`,
-        {
-          method: 'DELETE',
-          credentials: 'include',
-        }
-      );
-
+      const res = await fetch(`${import.meta.env.VITE_SERVER_URL}/api/auth/delete-account`, { method: 'DELETE', credentials: 'include' });
       if (res.ok) {
         localStorage.clear();
         sessionStorage.clear();
@@ -145,359 +99,246 @@ export default function AccountSettings({
     }
   };
 
-  const handleJoinDiscord = () => {
-    window.open('https://cephie.app/discord', '_blank');
-  };
+  const handleJoinDiscord = () => { window.open('https://cephie.app/discord', '_blank'); };
 
   return (
-    <div className="bg-zinc-900 backdrop-blur-sm rounded-xl sm:rounded-2xl border border-zinc-700/50 p-4 sm:p-6 z-1">
-      <div className="flex items-center mb-4 sm:mb-6">
-        <div className="p-2 bg-blue-500/20 rounded-lg mr-3 flex-shrink-0">
-          <Link2 className="h-4 w-4 sm:h-5 sm:w-5 text-blue-400" />
-        </div>
-        <div className="min-w-0 flex-1">
-          <h3 className="text-base sm:text-lg md:text-xl font-semibold text-white truncate">
-            Account Settings
-          </h3>
-          <p className="text-xs sm:text-sm text-zinc-400 mt-0.5">
-            Manage your account preferences and connections
-          </p>
+    <div className={S.card}>
+      {/* Header */}
+      <div className={S.header}>
+        <div className="flex items-center gap-4">
+          <div className={`${S.iconBox} bg-blue-500/20`}>
+            <Link2 className={`${S.icon} text-blue-400`} />
+          </div>
+          <div className="min-w-0 flex-1">
+            <h3 className={S.title}>Account Settings</h3>
+            <p className="text-zinc-400 text-xs sm:text-sm mt-0.5">Manage your account preferences and connections</p>
+          </div>
         </div>
       </div>
 
-      <div className="space-y-4 sm:space-y-6">
-        {/* Settings Section */}
-        <div className="space-y-3 sm:space-y-4">
-          <div className="flex items-center">
-            <h3 className="text-base sm:text-lg font-semibold text-white">
-              Settings
-            </h3>
-          </div>
-          {/* Restart Tutorial */}
-          <div className="bg-zinc-800/50 rounded-lg sm:rounded-xl border-2 border-zinc-700/50 p-3 sm:p-5">
-            <div className="flex items-center justify-between gap-3">
-              <div className="flex items-center space-x-3 sm:space-x-4 flex-1 min-w-0">
-                <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0">
-                  <RotateCcw className="w-5 h-5 sm:w-7 sm:h-7 text-white" />
-                </div>
-                <div className="min-w-0 flex-1">
-                  <h4 className="text-white font-semibold text-sm sm:text-base truncate">
-                    Restart Tutorial
-                  </h4>
-                  <p className="text-zinc-400 text-xs sm:text-sm mt-0.5 sm:mt-1 line-clamp-2">
-                    Restart the guided tutorial to learn PFControl features
-                    again.
-                  </p>
+      <div className={S.content}>
+        <div className="space-y-6">
+
+          {/* Settings Section */}
+          <div className="space-y-3">
+            <h3 className="text-base font-semibold text-white">Settings</h3>
+            <div className={S.section}>
+              <div className="flex items-center justify-between gap-3">
+                <div className="flex items-center gap-4 flex-1 min-w-0">
+                  <div className="p-2 bg-yellow-500/20 rounded-lg flex-shrink-0">
+                    <RotateCcw className="w-5 h-5 text-yellow-400" />
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <h4 className="text-white font-medium text-sm truncate">Restart Tutorial</h4>
+                    <p className="text-zinc-400 text-xs mt-0.5 line-clamp-2">Restart the guided tutorial to learn PFControl features again.</p>
+                  </div>
                 </div>
+                <Button
+                  onClick={handleRestartTutorial}
+                  variant="outline"
+                  size="sm"
+                  className="border-yellow-700/50 text-yellow-400 hover:bg-yellow-900/20 hover:border-yellow-600 text-xs whitespace-nowrap flex-shrink-0"
+                >
+                  <RotateCcw className="w-4 h-4 sm:mr-2" />
+                  <span className="hidden sm:inline">Restart</span>
+                </Button>
               </div>
-              <Button
-                onClick={handleRestartTutorial}
-                variant="outline"
-                size="sm"
-                className="border-yellow-700/50 text-yellow-400 hover:bg-yellow-900/20 hover:border-yellow-600 text-xs whitespace-nowrap flex-shrink-0"
-              >
-                <RotateCcw className="w-3 h-3 sm:w-4 sm:h-4 sm:mr-2" />
-                <span className="hidden sm:inline">Restart</span>
-              </Button>
             </div>
           </div>
-        </div>
 
-        {/* Bio Section */}
-        <div className="bg-zinc-800/50 rounded-lg sm:rounded-xl border-2 border-zinc-700/50 p-3 sm:p-5">
-          <div className="flex items-center space-x-3 sm:space-x-4 mb-3 sm:mb-4">
-            <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0">
-              <FileText className="w-5 h-5 sm:w-7 sm:h-7 text-white" />
+          {/* Bio Section */}
+          <div className={S.section}>
+            <div className="flex items-center gap-4 mb-4">
+              <div className="p-2 bg-blue-500/20 rounded-lg flex-shrink-0">
+                <FileText className="w-5 h-5 text-blue-400" />
+              </div>
+              <div className="min-w-0 flex-1">
+                <h4 className="text-white font-medium text-sm truncate">Biography</h4>
+                <p className="text-zinc-400 text-xs mt-0.5">Add a personal description to your profile (max 500 characters).</p>
+              </div>
             </div>
-            <div className="min-w-0 flex-1">
-              <h4 className="text-white font-semibold text-sm sm:text-base truncate">
-                Biography
-              </h4>
-              <p className="text-zinc-400 text-xs sm:text-sm mt-0.5 sm:mt-1 line-clamp-2">
-                Add a personal description to your profile (max 500 characters).
-              </p>
+            <textarea
+              value={settings?.bio ?? ''}
+              onChange={(e) => handleBioChange(e.target.value)}
+              placeholder="Tell others about yourself, your aviation interests, or anything you'd like to share..."
+              maxLength={500}
+              rows={6}
+              className="w-full px-3 py-2 sm:px-4 sm:py-3 bg-zinc-900/50 border border-zinc-700 rounded-lg text-white placeholder-zinc-400 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
+            />
+            <div className="flex justify-between items-center mt-2">
+              <p className="text-xs text-zinc-500">Your biography is always visible to others on your profile</p>
+              <p className="text-xs text-zinc-400 flex-shrink-0">{(settings?.bio ?? '').length}/500</p>
             </div>
           </div>
-          <textarea
-            value={settings?.bio ?? ''}
-            onChange={(e) => handleBioChange(e.target.value)}
-            placeholder="Tell others about yourself, your aviation interests, or anything you'd like to share..."
-            maxLength={500}
-            rows={6}
-            className="w-full px-3 py-2 sm:px-4 sm:py-3 bg-zinc-900/50 border-2 border-zinc-700 rounded-lg text-white placeholder-zinc-400 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
-          />
-          <div className="flex justify-between items-center mt-2">
-            <p className="text-xs text-zinc-500 line-clamp-1">
-              Your biography is always visible to others on your profile
-            </p>
-            <p className="text-xs text-zinc-400 flex-shrink-0">
-              {(settings?.bio ?? '').length}/500
-            </p>
-          </div>
-        </div>
 
-        {/* Privacy Settings Section - Collapsible */}
-        <div className="bg-zinc-900 border border-zinc-700/50 rounded-xl sm:rounded-2xl overflow-hidden">
-          <div className="w-full p-3 sm:p-4 md:p-6 border-b border-zinc-700/50">
-            <div className="flex items-center justify-between gap-3">
-              <div
-                className="flex items-center flex-1 min-w-0 cursor-pointer"
-                onClick={() => setIsPrivacyExpanded(!isPrivacyExpanded)}
-              >
-                <div className="p-2 bg-purple-500/20 rounded-lg mr-3 flex-shrink-0">
-                  <Shield className="h-4 w-4 sm:h-5 sm:w-5 md:h-6 md:w-6 text-purple-400" />
-                </div>
-                <div className="text-left min-w-0 flex-1">
-                  <h3 className="text-base sm:text-lg md:text-xl font-semibold text-white truncate">
-                    Privacy Settings
-                  </h3>
-                  <p className="text-zinc-400 text-xs sm:text-sm mt-0.5 md:mt-1 line-clamp-1 sm:line-clamp-none">
-                    Control what information is displayed on your profile
-                  </p>
+          {/* Privacy Settings - Collapsible */}
+          <div className={S.card}>
+            <div className={S.header}>
+              <div className={S.headerInner}>
+                <div className={S.headerClickable} onClick={() => setIsPrivacyExpanded(!isPrivacyExpanded)}>
+                  <div className={`${S.iconBox} ${S.iconBoxMr} bg-purple-500/20`}>
+                    <Shield className={`${S.icon} text-purple-400`} />
+                  </div>
+                  <div className="text-left min-w-0 flex-1">
+                    <h3 className={S.title}>Privacy Settings</h3>
+                    <p className={S.subtitle}>Control what information is displayed on your profile</p>
+                  </div>
                 </div>
+                <Button onClick={() => setIsPrivacyExpanded(!isPrivacyExpanded)} variant="outline" size="sm" className={S.chevronBtn}>
+                  {isPrivacyExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+                </Button>
               </div>
-              <Button
-                onClick={() => setIsPrivacyExpanded(!isPrivacyExpanded)}
-                variant="outline"
-                size="sm"
-                className="border-zinc-600 text-zinc-300 hover:bg-zinc-800 p-2 flex-shrink-0"
-              >
-                {isPrivacyExpanded ? (
-                  <ChevronUp className="h-3 w-3 sm:h-4 sm:w-4" />
-                ) : (
-                  <ChevronDown className="h-3 w-3 sm:h-4 sm:w-4" />
-                )}
-              </Button>
             </div>
-          </div>
-
-          {/* Expandable Content */}
-          <div
-            className={`transition-all duration-300 ease-in-out ${
-              isPrivacyExpanded
-                ? 'max-h-[1000px] opacity-100'
-                : 'max-h-0 opacity-0 overflow-hidden'
-            }`}
-          >
-            <div className="p-3 sm:p-4 md:p-6">
-              <PrivacySettings settings={settings} onChange={onChange} />
+            <div className={`transition-all duration-300 ease-in-out ${isPrivacyExpanded ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0 overflow-hidden'}`}>
+              <div className={S.content}>
+                <PrivacySettings settings={settings} onChange={onChange} />
+              </div>
             </div>
           </div>
-        </div>
 
-        {/* Account Connections Section */}
-        <div className="space-y-3 sm:space-y-4">
-          <div className="flex items-center">
-            <h3 className="text-base sm:text-lg font-semibold text-white">
-              Account Connections
-            </h3>
-          </div>
-          <div className="space-y-3 sm:space-y-4">
-            {/* Roblox Account */}
-            <div className="bg-zinc-800/50 rounded-lg sm:rounded-xl border-2 border-zinc-700/50 p-3 sm:p-5">
-              <div className="flex items-center justify-between gap-3">
-                <div className="flex items-center space-x-3 sm:space-x-4 flex-1 min-w-0">
-                  <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0">
-                    <SiRoblox className="w-5 h-5 sm:w-7 sm:h-7 text-white" />
+          {/* Account Connections */}
+          <div className="space-y-3">
+            <h3 className="text-base font-semibold text-white">Account Connections</h3>
+            <div className="space-y-3">
+
+              {/* Roblox */}
+              <div className={S.section}>
+                <div className="flex items-center justify-between gap-3">
+                  <div className="flex items-center gap-4 flex-1 min-w-0">
+                    <div className="p-2 bg-blue-500/20 rounded-lg flex-shrink-0">
+                      <SiRoblox className="w-5 h-5 text-blue-400" />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <h4 className="text-white font-medium text-sm truncate">Roblox Account</h4>
+                      {user?.robloxUsername ? (
+                        <div className="flex items-center gap-2 mt-0.5">
+                          <span className="text-green-400 text-xs font-medium">Connected</span>
+                          <span className="text-zinc-500 hidden sm:inline">•</span>
+                          <span className="text-zinc-300 text-xs truncate">@{user.robloxUsername}</span>
+                        </div>
+                      ) : (
+                        <p className="text-zinc-400 text-xs mt-0.5">Link your Roblox account</p>
+                      )}
+                    </div>
                   </div>
-                  <div className="min-w-0 flex-1">
-                    <h4 className="text-white font-semibold text-sm sm:text-base truncate">
-                      Roblox Account
-                    </h4>
+                  <div className="flex-shrink-0">
                     {user?.robloxUsername ? (
-                      <div className="flex items-center space-x-1 sm:space-x-2 mt-0.5 sm:mt-1">
-                        <span className="text-green-400 text-xs sm:text-sm font-medium">
-                          Connected
-                        </span>
-                        <span className="text-zinc-500 hidden sm:inline">
-                          •
-                        </span>
-                        <span className="text-zinc-300 text-xs sm:text-sm truncate">
-                          @{user.robloxUsername}
-                        </span>
-                      </div>
+                      <Button onClick={() => setShowRobloxConfirm(true)} variant="outline" size="sm" className="border-red-700/50 text-red-400 hover:bg-red-900/20 hover:border-red-600 text-xs whitespace-nowrap">
+                        <UserX className="w-4 h-4 sm:mr-2" />
+                        <span className="hidden sm:inline">Unlink</span>
+                      </Button>
                     ) : (
-                      <p className="text-zinc-400 text-xs sm:text-sm mt-0.5 sm:mt-1 line-clamp-1">
-                        Link your Roblox account
-                      </p>
+                      <Button onClick={handleLinkRoblox} variant="primary" size="sm" className="bg-blue-600 hover:bg-blue-700 border-blue-600 text-xs whitespace-nowrap">
+                        <ExternalLink className="w-4 h-4 sm:mr-2" />
+                        <span className="hidden sm:inline">Link Account</span>
+                        <span className="sm:hidden">Link</span>
+                      </Button>
                     )}
                   </div>
                 </div>
-
-                <div className="flex-shrink-0">
-                  {user?.robloxUsername ? (
-                    <Button
-                      onClick={() => setShowRobloxConfirm(true)}
-                      variant="outline"
-                      size="sm"
-                      className="border-red-700/50 text-red-400 hover:bg-red-900/20 hover:border-red-600 text-xs whitespace-nowrap"
-                    >
-                      <UserX className="w-3 h-3 sm:w-4 sm:h-4 sm:mr-2" />
-                      <span className="hidden sm:inline">Unlink</span>
-                    </Button>
-                  ) : (
-                    <Button
-                      onClick={handleLinkRoblox}
-                      variant="primary"
-                      size="sm"
-                      className="bg-blue-600 hover:bg-blue-700 border-blue-600 text-xs whitespace-nowrap"
-                    >
-                      <ExternalLink className="w-3 h-3 sm:w-4 sm:h-4 sm:mr-2" />
-                      <span className="hidden sm:inline">Link Account</span>
-                      <span className="sm:hidden">Link</span>
-                    </Button>
-                  )}
-                </div>
               </div>
-            </div>
 
-            {/* VATSIM Account */}
-            <div className="bg-zinc-800/50 rounded-lg sm:rounded-xl border-2 border-zinc-700/50 p-3 sm:p-5">
-              <div className="flex items-center justify-between gap-3">
-                <div className="flex items-center space-x-3 sm:space-x-4 flex-1 min-w-0">
-                  <div className="w-10 h-10 sm:w-12 sm:h-12 bg-white rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0">
-                    <img
-                      src="/assets/images/vatsim.webp"
-                      alt="VATSIM"
-                      className="w-6 h-6 sm:w-8 sm:h-8"
-                    />
+              {/* VATSIM */}
+              <div className={S.section}>
+                <div className="flex items-center justify-between gap-3">
+                  <div className="flex items-center gap-4 flex-1 min-w-0">
+                    <div className="p-2 bg-white rounded-lg flex-shrink-0">
+                      <img src="/assets/images/vatsim.webp" alt="VATSIM" className="w-5 h-5" />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <h4 className="text-white font-medium text-sm truncate">VATSIM Account</h4>
+                      {isVatsimLinked ? (
+                        <div className="flex items-center gap-2 mt-0.5">
+                          <span className="text-green-400 text-xs font-medium">Connected</span>
+                          <span className="text-zinc-500 hidden sm:inline">•</span>
+                          <span className="text-zinc-300 text-xs truncate">{user?.vatsimCid}</span>
+                        </div>
+                      ) : (
+                        <p className="text-zinc-400 text-xs mt-0.5 line-clamp-2">Link your VATSIM account to show controller rating on your profile</p>
+                      )}
+                    </div>
                   </div>
-                  <div className="min-w-0 flex-1">
-                    <h4 className="text-white font-semibold text-sm sm:text-base truncate">
-                      VATSIM Account
-                    </h4>
+                  <div className="flex-shrink-0">
                     {isVatsimLinked ? (
-                      <div className="flex items-center space-x-1 sm:space-x-2 mt-0.5 sm:mt-1">
-                        <span className="text-green-400 text-xs sm:text-sm font-medium">
-                          Connected
-                        </span>
-                        <span className="text-zinc-500 hidden sm:inline">
-                          •
-                        </span>
-                        <span className="text-zinc-300 text-xs sm:text-sm truncate">
-                          {user?.vatsimCid}
-                        </span>
-                      </div>
+                      <Button onClick={() => setShowVatsimConfirm(true)} variant="outline" size="sm" className="border-red-700/50 text-red-400 hover:bg-red-900/20 hover:border-red-600 text-xs whitespace-nowrap">
+                        <UserX className="w-4 h-4 sm:mr-2" />
+                        <span className="hidden sm:inline">Unlink</span>
+                      </Button>
                     ) : (
-                      <p className="text-zinc-400 text-xs sm:text-sm mt-0.5 sm:mt-1 line-clamp-2">
-                        Link your VATSIM account to show controller rating on
-                        your profile
-                      </p>
+                      <Button onClick={handleLinkVatsim} variant="primary" size="sm" className="bg-emerald-600 hover:bg-emerald-700 border-emerald-600 text-xs whitespace-nowrap">
+                        <ExternalLink className="w-4 h-4 sm:mr-2" />
+                        <span className="hidden sm:inline">Link Account</span>
+                        <span className="sm:hidden">Link</span>
+                      </Button>
                     )}
                   </div>
                 </div>
-                <div className="flex-shrink-0">
-                  {isVatsimLinked ? (
-                    <Button
-                      onClick={() => setShowVatsimConfirm(true)}
-                      variant="outline"
-                      size="sm"
-                      className="border-red-700/50 text-red-400 hover:bg-red-900/20 hover:border-red-600 text-xs whitespace-nowrap"
-                    >
-                      <UserX className="w-3 h-3 sm:w-4 sm:h-4 sm:mr-2" />
-                      <span className="hidden sm:inline">Unlink</span>
-                    </Button>
-                  ) : (
-                    <Button
-                      onClick={handleLinkVatsim}
-                      variant="primary"
-                      size="sm"
-                      className="bg-emerald-600 hover:bg-emerald-700 border-emerald-600 text-xs whitespace-nowrap"
-                    >
-                      <ExternalLink className="w-3 h-3 sm:w-4 sm:h-4 sm:mr-2" />
-                      <span className="hidden sm:inline">Link Account</span>
-                      <span className="sm:hidden">Link</span>
-                    </Button>
-                  )}
-                </div>
               </div>
             </div>
           </div>
-        </div>
 
-        {/* Danger Zone */}
-        <div className="space-y-3 sm:space-y-4">
-          <div className="flex items-center">
-            <h3 className="text-base sm:text-lg font-semibold text-white">
-              Support
-            </h3>
-          </div>
-
-          <div className="space-y-3 sm:space-y-4">
-            {/* Join Discord */}
-            <div className="bg-zinc-800/50 rounded-lg sm:rounded-xl border-2 border-zinc-700/50 p-3 sm:p-5">
-              <div className="flex items-center justify-between gap-3">
-                <div className="flex items-center space-x-3 sm:space-x-4 flex-1 min-w-0">
-                  <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-indigo-400 to-blue-600 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0">
-                    <SiDiscord className="w-5 h-5 sm:w-7 sm:h-7 text-white" />
-                  </div>
-                  <div className="min-w-0 flex-1">
-                    <h4 className="text-white font-semibold text-sm sm:text-base truncate">
-                      Join Our Discord
-                    </h4>
-                    <p className="text-zinc-400 text-xs sm:text-sm mt-0.5 sm:mt-1 line-clamp-2">
-                      Get support, report bugs, or suggest new features to
-                      improve PFControl.
-                    </p>
+          {/* Support */}
+          <div className="space-y-3">
+            <h3 className="text-base font-semibold text-white">Support</h3>
+            <div className="space-y-3">
+              <div className={S.section}>
+                <div className="flex items-center justify-between gap-3">
+                  <div className="flex items-center gap-4 flex-1 min-w-0">
+                    <div className="p-2 bg-indigo-500/20 rounded-lg flex-shrink-0">
+                      <SiDiscord className="w-5 h-5 text-indigo-400" />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <h4 className="text-white font-medium text-sm truncate">Join Our Discord</h4>
+                      <p className="text-zinc-400 text-xs mt-0.5 line-clamp-2">Get support, report bugs, or suggest new features to improve PFControl.</p>
+                    </div>
                   </div>
+                  <Button onClick={handleJoinDiscord} variant="primary" size="sm" className="bg-indigo-600 hover:bg-indigo-700 border-indigo-600 text-xs whitespace-nowrap flex-shrink-0">
+                    <ExternalLink className="w-4 h-4 sm:mr-2" />
+                    <span className="hidden sm:inline">Join Discord</span>
+                    <span className="sm:hidden">Join</span>
+                  </Button>
                 </div>
-                <Button
-                  onClick={handleJoinDiscord}
-                  variant="primary"
-                  size="sm"
-                  className="bg-indigo-600 hover:bg-indigo-700 border-indigo-600 text-sm whitespace-nowrap flex-shrink-0"
-                >
-                  <ExternalLink className="w-3 h-3 sm:w-4 sm:h-4 sm:mr-2" />
-                  <span className="hidden sm:inline">Join Discord</span>
-                  <span className="sm:hidden">Join</span>
-                </Button>
               </div>
-            </div>
-          </div>
 
-          {/* Delete Account */}
-          <div className="bg-zinc-800/50 rounded-lg sm:rounded-xl border-2 border-zinc-700/50 p-3 sm:p-5">
-            <div className="flex items-center justify-between gap-3">
-              <div className="flex items-center space-x-3 sm:space-x-4 flex-1 min-w-0">
-                <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0">
-                  <AlertTriangle className="w-5 h-5 sm:w-7 sm:h-7 text-red-500" />
-                </div>
-                <div className="min-w-0 flex-1">
-                  <h4 className="text-red-400 font-semibold text-sm sm:text-base truncate">
-                    Delete Account
-                  </h4>
-                  <p className="text-zinc-400 text-xs sm:text-sm mt-0.5 sm:mt-1 line-clamp-2">
-                    Permanently delete your account and all associated data.
-                    This action cannot be undone.
-                  </p>
+              {/* Delete Account */}
+              <div className={S.section}>
+                <div className="flex items-center justify-between gap-3">
+                  <div className="flex items-center gap-4 flex-1 min-w-0">
+                    <div className="p-2 bg-red-500/20 rounded-lg flex-shrink-0">
+                      <AlertTriangle className="w-5 h-5 text-red-400" />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <h4 className="text-red-400 font-medium text-sm truncate">Delete Account</h4>
+                      <p className="text-zinc-400 text-xs mt-0.5 line-clamp-2">Permanently delete your account and all associated data. This action cannot be undone.</p>
+                    </div>
+                  </div>
+                  <Button
+                    onClick={() => setShowDeleteConfirm(true)}
+                    variant="danger"
+                    size="sm"
+                    disabled={deleteInProgress}
+                    className="text-xs whitespace-nowrap flex-shrink-0"
+                  >
+                    {deleteInProgress ? (
+                      <>
+                        <div className="mr-2 h-3 w-3 animate-spin rounded-full border-2 border-gray-300 border-t-white" />
+                        Deleting...
+                      </>
+                    ) : (
+                      <>
+                        <AlertTriangle className="w-4 h-4 sm:mr-2" />
+                        <span className="hidden sm:inline">Delete Account</span>
+                        <span className="sm:hidden">Delete</span>
+                      </>
+                    )}
+                  </Button>
                 </div>
               </div>
-              <Button
-                onClick={() => setShowDeleteConfirm(true)}
-                variant="danger"
-                size="sm"
-                disabled={deleteInProgress}
-                className="text-sm whitespace-nowrap flex-shrink-0"
-              >
-                {deleteInProgress ? (
-                  <>
-                    <div className="mr-2 h-3 w-3 animate-spin rounded-full border-2 border-gray-300 border-t-white"></div>
-                    Deleting...
-                  </>
-                ) : (
-                  <>
-                    <AlertTriangle className="w-3 h-3 sm:w-4 sm:h-4 sm:mr-2" />
-                    <span className="hidden sm:inline">Delete Account</span>
-                    <span className="sm:hidden">Delete</span>
-                  </>
-                )}
-              </Button>
             </div>
           </div>
         </div>
       </div>
 
-      {/* Confirmation Dialogs */}
       <ConfirmationDialog
         isOpen={showVatsimConfirm}
         onConfirm={handleUnlinkVatsim}
@@ -509,7 +350,6 @@ export default function AccountSettings({
         variant="danger"
         icon={<AlertTriangle size={24} />}
       />
-
       <ConfirmationDialog
         isOpen={showRobloxConfirm}
         onConfirm={handleUnlinkRoblox}
@@ -521,7 +361,6 @@ export default function AccountSettings({
         variant="danger"
         icon={<AlertTriangle size={24} />}
       />
-
       <ConfirmationDialog
         isOpen={showDeleteConfirm}
         onConfirm={handleDeleteAccount}
@@ -535,4 +374,4 @@ export default function AccountSettings({
       />
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/Settings/AudioVisualizerButton.tsx b/src/components/Settings/AudioVisualizerButton.tsx
index 4883f92..b3190c3 100644
--- a/src/components/Settings/AudioVisualizerButton.tsx
+++ b/src/components/Settings/AudioVisualizerButton.tsx
@@ -1,138 +1,101 @@
 import React, { useEffect, useState } from 'react';
-import { Star, MessageSquare, Plane, Radio } from 'lucide-react';
+import { Star, MessageSquare, Plane, Radio, Play, Square } from 'lucide-react';
 
 const AudioVisualizerButton: React.FC<{
   isPlaying: boolean;
   onClick: (e: React.MouseEvent) => void;
   label?: string;
-  variant?:
-    | 'default'
-    | 'custom'
-    | 'notification'
-    | 'newstrip'
-    | 'acars-beep'
-    | 'acars-chat';
+  variant?: 'default' | 'custom' | 'notification' | 'newstrip' | 'acars-beep' | 'acars-chat';
 }> = ({ isPlaying, onClick, label = 'Test', variant = 'default' }) => {
   const [glowIntensity, setGlowIntensity] = useState(0.3);
 
   useEffect(() => {
     let interval: NodeJS.Timeout;
-
     if (isPlaying) {
       interval = setInterval(() => {
-        setGlowIntensity(Math.random() * 0.7 + 0.3);
+        setGlowIntensity(Math.random() * 0.5 + 0.5);
       }, 150);
     } else {
       setGlowIntensity(0.3);
     }
-
-    return () => {
-      if (interval) clearInterval(interval);
-    };
+    return () => clearInterval(interval);
   }, [isPlaying]);
 
-  const baseClasses =
-    'relative overflow-hidden flex items-center justify-center px-5 py-3 sm:py-2 border rounded-lg text-base sm:text-sm transition-all duration-200 min-h-[52px] sm:min-h-[40px] font-medium cursor-pointer';
-
-  let variantClasses = '';
-
-  if (variant === 'custom') {
-    variantClasses = isPlaying
-      ? 'bg-yellow-600/80 hover:bg-yellow-600/90 border-yellow-500/80 hover:border-yellow-500/90 text-white shadow-lg'
-      : 'bg-yellow-600/60 hover:bg-yellow-600/80 border-yellow-500/60 hover:border-yellow-500/80 text-yellow-100 hover:text-white';
-  } else if (variant === 'notification') {
-    variantClasses = isPlaying
-      ? 'bg-blue-600/80 hover:bg-blue-600/90 border-blue-500/80 hover:border-blue-500/90 text-white shadow-lg'
-      : 'bg-blue-600/60 hover:bg-blue-600/80 border-blue-500/60 hover:border-blue-500/80 text-blue-100 hover:text-white';
-  } else if (variant === 'newstrip') {
-    variantClasses = isPlaying
-      ? 'bg-green-600/80 hover:bg-green-600/90 border-green-500/80 hover:border-green-500/90 text-white shadow-lg'
-      : 'bg-green-600/60 hover:bg-green-600/80 border-green-500/60 hover:border-green-500/80 text-green-100 hover:text-white';
-  } else if (variant === 'acars-beep') {
-    variantClasses = isPlaying
-      ? 'bg-cyan-600/80 hover:bg-cyan-600/90 border-cyan-500/80 hover:border-cyan-500/90 text-white shadow-lg'
-      : 'bg-cyan-600/60 hover:bg-cyan-600/80 border-cyan-500/60 hover:border-cyan-500/80 text-cyan-100 hover:text-white';
-  } else if (variant === 'acars-chat') {
-    variantClasses = isPlaying
-      ? 'bg-orange-600/80 hover:bg-orange-600/90 border-orange-500/80 hover:border-orange-500/90 text-white shadow-lg'
-      : 'bg-orange-600/60 hover:bg-orange-600/80 border-orange-500/60 hover:border-orange-500/80 text-orange-100 hover:text-white';
-  } else {
-    variantClasses = isPlaying
-      ? 'bg-purple-600/80 hover:bg-purple-600/90 border-purple-500/80 hover:border-purple-500/90 text-white shadow-lg'
-      : 'bg-purple-600/60 hover:bg-purple-600/80 border-purple-500/60 hover:border-purple-500/80 text-purple-100 hover:text-white';
-  }
-
-  const getGlowColor = () => {
-    switch (variant) {
-      case 'custom':
-        return 'rgba(234, 179, 8';
-      case 'notification':
-        return 'rgba(59, 130, 246';
-      case 'newstrip':
-        return 'rgba(34, 197, 94';
-      case 'acars-beep':
-        return 'rgba(34, 211, 238';
-      case 'acars-chat':
-        return 'rgba(249, 115, 22';
-      default:
-        return 'rgba(147, 51, 234';
-    }
+  // Color mapping based on your new palette
+  const colors = {
+    custom: 'yellow',
+    notification: 'blue',
+    newstrip: 'green',
+    'acars-beep': 'cyan',
+    'acars-chat': 'orange',
+    default: 'purple',
   };
 
-  const glowColor = getGlowColor();
+  const theme = colors[variant] || colors.default;
 
   return (
     <button
       onClick={onClick}
-      className={`${baseClasses} ${variantClasses}`}
+      className={`
+        relative overflow-hidden group flex items-center justify-between px-4 py-2.5 
+        rounded-lg border transition-all duration-300 min-w-[140px]
+        ${isPlaying 
+          ? `bg-${theme}-500/10 border-${theme}-500/50 text-${theme}-400 shadow-[0_0_15px_rgba(0,0,0,0.2)]` 
+          : 'bg-zinc-800/30 border-zinc-700/50 text-zinc-400 hover:border-zinc-600 hover:bg-zinc-800/50'}
+      `}
       style={{
-        boxShadow: isPlaying
-          ? `0 0 ${glowIntensity * 20}px ${glowColor}, ${glowIntensity}), 0 0 ${
-              glowIntensity * 40
-            }px ${glowColor}, ${
-              glowIntensity * 0.5
-            }), 0 4px 12px rgba(0, 0, 0, 0.3)`
-          : '0 2px 4px rgba(0, 0, 0, 0.1)',
+        boxShadow: isPlaying 
+          ? `0 0 ${glowIntensity * 15}px -2px var(--tw-shadow-color)` 
+          : 'none'
       }}
     >
+      {/* Visualizer Bars - Made more subtle */}
       {isPlaying && (
-        <div className="absolute inset-0 flex items-end justify-center space-x-0.5 opacity-20 pointer-events-none">
-          {Array.from({ length: 8 }).map((_, index) => (
+        <div className="absolute inset-0 flex items-center justify-center gap-0.5 opacity-10 pointer-events-none">
+          {Array.from({ length: 12 }).map((_, i) => (
             <div
-              key={index}
-              className="w-0.5 bg-white rounded-full"
+              key={i}
+              className="w-1 bg-current rounded-full"
               style={{
-                height: `${30 + Math.sin(Date.now() * 0.01 + index) * 20}%`,
-                animation: `pulse 0.3s ease-in-out infinite alternate`,
-                animationDelay: `${index * 50}ms`,
+                height: `${20 + Math.random() * 60}%`,
+                transition: 'height 0.2s ease',
               }}
             />
           ))}
         </div>
       )}
 
-      <div className="relative z-10 flex items-center justify-center gap-2">
-        {variant === 'custom' && <Star className="h-4 w-4" />}
-        {variant === 'default' && <Star className="h-4 w-4" />}
-        {variant === 'notification' && <MessageSquare className="h-4 w-4" />}
-        {variant === 'newstrip' && <Plane className="h-4 w-4" />}
-        {variant === 'acars-beep' && <Radio className="h-4 w-4" />}
-        {variant === 'acars-chat' && <MessageSquare className="h-4 w-4" />}
-        <span>{isPlaying ? 'Stop' : label}</span>
+      <div className="flex items-center gap-3 relative z-10">
+        <div className={`
+          p-1.5 rounded-md border transition-colors
+          ${isPlaying ? `bg-${theme}-500/20 border-${theme}-500/20` : 'bg-zinc-950/50 border-zinc-800'}
+        `}>
+          {variant === 'custom' && <Star size={14} />}
+          {variant === 'default' && <Star size={14} />}
+          {variant === 'notification' && <MessageSquare size={14} />}
+          {variant === 'newstrip' && <Plane size={14} />}
+          {variant === 'acars-beep' && <Radio size={14} />}
+          {variant === 'acars-chat' && <MessageSquare size={14} />}
+        </div>
+        <span className="text-xs font-bold uppercase tracking-wider">
+          {isPlaying ? 'Playing' : label}
+        </span>
+      </div>
+
+      <div className="relative z-10 ml-2">
+        {isPlaying ? (
+          <Square size={12} className="fill-current animate-pulse" />
+        ) : (
+          <Play size={12} className="text-zinc-600 group-hover:text-zinc-400 transition-colors" />
+        )}
       </div>
 
-      <style>{`
-				@keyframes pulse {
-					0% {
-						transform: scaleY(0.8);
-					}
-					100% {
-						transform: scaleY(1.2);
-					}
-				}
-			`}</style>
+      {/* Internal Scanline Effect for Active state */}
+      {isPlaying && (
+        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent -translate-x-full animate-[shimmer_2s_infinite]" />
+      )}
     </button>
   );
 };
 
-export default AudioVisualizerButton;
+export default AudioVisualizerButton;
\ No newline at end of file
diff --git a/src/components/Settings/BackgroundImageSettings.tsx b/src/components/Settings/BackgroundImageSettings.tsx
index 549313f..d32ea50 100644
--- a/src/components/Settings/BackgroundImageSettings.tsx
+++ b/src/components/Settings/BackgroundImageSettings.tsx
@@ -12,6 +12,7 @@ import {
   Loader2,
   Camera,
   ExternalLink,
+  Plus,
 } from 'lucide-react';
 import { fetchBackgrounds } from '../../utils/fetch/data';
 import type { Settings } from '../../types/settings';
@@ -36,111 +37,40 @@ interface BackgroundImageSettingsProps {
   onChange: (updatedSettings: Settings) => void;
 }
 
-interface BackgroundImageItemProps {
-  image: AvailableImage;
-  index: number;
-  settings: Settings | null;
-  selectedImage: string | null;
-  loadedImages: Record<string, boolean>;
-  onSelectImage: (filename: string) => void;
-  onToggleFavorite: (filename: string) => void;
-  onImageLoad: (path: string) => void;
-  getPhotoCredit: (filename: string) => string | null;
-}
-
-function BackgroundImageItem({
-  image,
-  index,
-  settings,
-  selectedImage,
-  loadedImages,
-  onSelectImage,
-  onToggleFavorite,
-  onImageLoad,
-  getPhotoCredit,
-}: BackgroundImageItemProps) {
-  const photoCredit = getPhotoCredit(image.filename);
-  const isImageLoaded = loadedImages[image.path];
-  const fullImageUrl = `${API_BASE_URL}${image.path}`;
-  const isFavorite = (settings?.backgroundImage?.favorites || []).includes(
-    image.filename
-  );
-  const isSelected = selectedImage === image.filename;
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [inView, setInView] = useState(false);
-
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const entry = entries[0];
-        if (entry?.isIntersecting) {
-          setInView(true);
-          observer.disconnect();
-        }
-      },
-      { rootMargin: '50px' }
-    );
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-
+// Sub-component for individual background items
+function BackgroundItem({ 
+  isSelected, 
+  onClick, 
+  children, 
+  className = "",
+  variantColor = "blue" 
+}: { 
+  isSelected: boolean; 
+  onClick: () => void; 
+  children: React.ReactNode;
+  className?: string;
+  variantColor?: string;
+}) {
   return (
     <div
-      ref={containerRef}
-      className={`relative rounded-xl overflow-hidden cursor-pointer transition-all duration-200 hover:scale-[1.02] border-2 group ${
-        isSelected
-          ? 'border-cyan-500 shadow-lg shadow-cyan-500/25'
-          : 'border-zinc-700 hover:border-zinc-600'
-      }`}
+      onClick={onClick}
+      className={`
+        relative aspect-video rounded-xl overflow-hidden cursor-pointer transition-all duration-300 group border
+        ${isSelected 
+          ? `border-${variantColor}-500/50 ring-2 ring-${variantColor}-500/20` 
+          : 'border-zinc-800 hover:border-zinc-700 bg-zinc-900/50'}
+        ${className}
+      `}
     >
-      <div
-        className="aspect-video relative"
-        onClick={() => onSelectImage(image.filename)}
-      >
-        {!isImageLoaded && (
-          <div className="absolute inset-0 bg-gradient-to-br from-zinc-800 to-zinc-900 animate-pulse"></div>
-        )}
-        {inView && (
-          <img
-            src={fullImageUrl}
-            alt={`Background option ${index + 1}`}
-            className={`w-full h-full object-cover transition-all duration-300 ${
-              isImageLoaded ? 'opacity-100' : 'opacity-0'
-            } group-hover:brightness-110`}
-            onLoad={() => onImageLoad(image.path)}
-          />
-        )}
-        {isSelected && (
-          <div className="absolute top-2 right-2 bg-cyan-500 rounded-full p-1">
-            <Eye className="h-3 w-3 text-white" />
-          </div>
-        )}
-        <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity" />
-      </div>
-      <button
-        onClick={(e) => {
-          e.stopPropagation();
-          onToggleFavorite(image.filename);
-        }}
-        className={`absolute top-2 left-2 p-1 rounded-full transition-colors ${
-          isFavorite
-            ? 'bg-yellow-500 text-white'
-            : 'bg-black/50 text-gray-300 hover:text-yellow-400'
-        }`}
-      >
-        <Star className={`h-3 w-3 ${isFavorite ? 'fill-current' : ''}`} />
-      </button>
-      {photoCredit && isImageLoaded && (
-        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-2">
-          <div className="flex items-center text-xs text-white">
-            <User className="h-3 w-3 mr-1" />
-            <span>@{photoCredit}</span>
-          </div>
+      {children}
+      {isSelected && (
+        <div className={`absolute top-2 right-2 p-1 rounded-full bg-${variantColor}-500 shadow-lg`}>
+          <Eye className="h-3 w-3 text-white" />
         </div>
       )}
+      <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+         {!isSelected && <Plus className="text-white/50 w-6 h-6" />}
+      </div>
     </div>
   );
 }
@@ -151,101 +81,64 @@ export default function BackgroundImageSettings({
 }: BackgroundImageSettingsProps) {
   const [availableImages, setAvailableImages] = useState<AvailableImage[]>([]);
   const [cephieSnapImages, setCephieSnapImages] = useState<CephieSnapImage[]>([]);
-  const [loadingImages, setLoadingImages] = useState(false);
-  const [loadingCephieSnap, setLoadingCephieSnap] = useState(false);
-  const [uploading, setUploading] = useState(false);
-  const [deleting, setDeleting] = useState(false);
-  const [error, setError] = useState('');
-  const [dragActive, setDragActive] = useState(false);
+  const [loading, setLoading] = useState({ images: false, snap: false });
+  const [status, setStatus] = useState({ uploading: false, deleting: false, error: '' });
   const [loadedImages, setLoadedImages] = useState<Record<string, boolean>>({});
 
   useEffect(() => {
-    loadAvailableImages();
-    loadCephieSnapImages();
+    const loadData = async () => {
+      setLoading({ images: true, snap: true });
+      try {
+        const [bgData, snapRes] = await Promise.all([
+          fetchBackgrounds(),
+          fetch(`${API_BASE_URL}/api/uploads/cephie-snap-images`, { credentials: 'include' })
+        ]);
+        setAvailableImages(bgData);
+        if (snapRes.ok) {
+          const snapData = await snapRes.json();
+          setCephieSnapImages(snapData.images ?? []);
+        }
+      } catch (e) {
+        setStatus(prev => ({ ...prev, error: 'Failed to sync background gallery' }));
+      } finally {
+        setLoading({ images: false, snap: false });
+      }
+    };
+    loadData();
   }, []);
 
-  const loadCephieSnapImages = async () => {
-    try {
-      setLoadingCephieSnap(true);
-      const res = await fetch(`${API_BASE_URL}/api/uploads/cephie-snap-images`, {
-        credentials: 'include',
-      });
-      if (!res.ok) throw new Error('Failed to load');
-      const data = await res.json();
-      setCephieSnapImages(data.images ?? []);
-    } catch {
-      setCephieSnapImages([]);
-    } finally {
-      setLoadingCephieSnap(false);
-    }
-  };
-
-  const loadAvailableImages = async () => {
-    try {
-      setLoadingImages(true);
-      const data = await fetchBackgrounds();
-      setAvailableImages(data);
-    } catch (error) {
-      console.error('Error loading available images:', error);
-      setError('Failed to load background images');
-    } finally {
-      setLoadingImages(false);
-    }
-  };
-
-  const handleSelectImage = (imageUrl: string) => {
+  const handleSelectImage = (imageUrl: string | null) => {
     if (!settings) return;
-
-    let selectedValue: string | null = imageUrl;
-    if (imageUrl === '') {
-      selectedValue = null;
-    }
-
-    const isUserUploaded =
-      selectedValue && selectedValue.startsWith('https://api.cephie.app/');
-
-    const updatedSettings = {
+    const isUserUploaded = imageUrl?.startsWith('https://api.cephie.app/');
+    onChange({
       ...settings,
       backgroundImage: {
         ...settings.backgroundImage,
-        selectedImage: selectedValue,
+        selectedImage: imageUrl || null,
         useCustomBackground: !!isUserUploaded,
       },
-    };
-    onChange(updatedSettings);
+    });
   };
 
   const handleToggleFavorite = (filename: string) => {
     if (!settings) return;
-
-    const currentFavorites = settings.backgroundImage?.favorites || [];
-    const isFavorite = currentFavorites.includes(filename);
-
-    const newFavorites = isFavorite
-      ? currentFavorites.filter((f) => f !== filename)
-      : [...currentFavorites, filename];
-
-    const updatedSettings = {
+    const current = settings.backgroundImage?.favorites || [];
+    const updated = current.includes(filename) 
+      ? current.filter(f => f !== filename) 
+      : [...current, filename];
+    
+    onChange({
       ...settings,
-      backgroundImage: {
-        ...settings.backgroundImage,
-        favorites: newFavorites,
-      },
-    };
-    onChange(updatedSettings);
+      backgroundImage: { ...settings.backgroundImage, favorites: updated }
+    });
   };
 
-  const handleFile = async (file: File) => {
-    if (!file.type.startsWith('image/')) {
-      setError('Please select a valid image file');
-      return;
-    }
-
+  const handleUpload = async (file: File) => {
+    if (!file.type.startsWith('image/')) return setStatus(p => ({ ...p, error: 'Invalid file type' }));
+    
     const formData = new FormData();
     formData.append('image', file);
-
-    setUploading(true);
-    setError('');
+    setStatus(p => ({ ...p, uploading: true, error: '' }));
 
     try {
       const res = await fetch(`${API_BASE_URL}/api/uploads/upload-background`, {
@@ -253,477 +146,206 @@ export default function BackgroundImageSettings({
         credentials: 'include',
         body: formData,
       });
-      if (!res.ok) throw new Error('Upload failed');
-
-      const uploadResult = await res.json();
-      const newImageUrl = uploadResult.url;
-
-      if (settings && newImageUrl) {
-        const updatedSettings = {
-          ...settings,
-          backgroundImage: {
-            ...settings.backgroundImage,
-            selectedImage: newImageUrl,
-            useCustomBackground: true,
-          },
-        };
-        onChange(updatedSettings);
-      }
-
-      await loadAvailableImages();
-      await loadCephieSnapImages();
-    } catch {
-      setError('Failed to upload image');
-    } finally {
-      setUploading(false);
-    }
-  };
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    setDragActive(false);
-    const files = e.dataTransfer.files;
-    if (files.length > 0) {
-      handleFile(files[0]);
-    }
-  };
-
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-    setDragActive(true);
-  };
-
-  const handleDragLeave = (e: React.DragEvent) => {
-    e.preventDefault();
-    setDragActive(false);
-  };
-
-  const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      handleFile(file);
-    }
-  };
-
-  const handleDelete = async () => {
-    setDeleting(true);
-    setError('');
-    try {
-      const res = await fetch(`${API_BASE_URL}/api/uploads/delete-background`, {
-        method: 'DELETE',
-        credentials: 'include',
-      });
-      if (!res.ok) throw new Error('Delete failed');
-
-      if (settings) {
-        const updatedSettings = {
-          ...settings,
-          backgroundImage: {
-            ...settings.backgroundImage,
-            selectedImage: null,
-            useCustomBackground: false,
-          },
-        };
-        onChange(updatedSettings);
+      if (!res.ok) throw new Error();
+      const data = await res.json();
+      handleSelectImage(data.url);
+      // Refresh snap images
+      const snapRes = await fetch(`${API_BASE_URL}/api/uploads/cephie-snap-images`, { credentials: 'include' });
+      if (snapRes.ok) {
+        const snapData = await snapRes.json();
+        setCephieSnapImages(snapData.images ?? []);
       }
-
-      await loadAvailableImages();
     } catch {
-      setError('Failed to delete image');
+      setStatus(p => ({ ...p, error: 'Upload failed' }));
     } finally {
-      setDeleting(false);
-    }
-  };
-
-  const handleImageLoad = (imagePath: string) => {
-    setLoadedImages((prev) => ({
-      ...prev,
-      [imagePath]: true,
-    }));
-  };
-
-  const getPhotoCredit = (filename: string): string | null => {
-    if (!filename) return null;
-    if (filename.match(/^[A-Z]{4}\.(png|jpg|jpeg)$/i)) {
-      return null;
-    }
-    const match = filename.match(/^(.+?)__\d{3}\.(png|jpg|jpeg)$/i);
-    if (match) {
-      return match[1];
+      setStatus(p => ({ ...p, uploading: false }));
     }
-    return null;
   };
 
-  const getImageUrl = (filename: string | null): string | null => {
-    if (!filename || filename === 'random' || filename === 'favorites') {
-      return filename;
-    }
-    if (filename.startsWith('https://api.cephie.app/')) {
-      return filename;
-    }
-    return `${API_BASE_URL}/assets/app/backgrounds/${filename}`;
+  const getPhotoCredit = (filename: string) => {
+    if (!filename || filename.match(/^[A-Z]{4}\./i)) return null;
+    const match = filename.match(/^(.+?)__\d{3}\./i);
+    return match ? match[1] : null;
   };
 
-  const favoriteCount = (settings?.backgroundImage?.favorites || []).length;
   const selectedImage = settings?.backgroundImage?.selectedImage;
+  const favorites = settings?.backgroundImage?.favorites || [];
 
   return (
-    <div className="bg-zinc-900 border border-zinc-700/50 rounded-2xl overflow-hidden">
-      {/* Header */}
-      <div className="p-4 sm:p-6 border-b border-zinc-700/50">
-        <div className="flex items-center">
-          <div className="p-2 bg-cyan-500/20 rounded-lg mr-3 sm:mr-4 flex-shrink-0">
-            <ImageIcon className="h-5 w-5 sm:h-6 sm:w-6 text-cyan-400" />
+    <div className="space-y-6">
+      {/* Header Card */}
+      <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-6">
+        <div className="flex items-center gap-4 mb-6">
+          <div className="p-2.5 bg-cyan-500/10 rounded-lg border border-cyan-500/20">
+            <ImageIcon className="h-5 w-5 text-cyan-400" />
           </div>
-          <div className="min-w-0">
-            <h3 className="text-lg sm:text-xl font-semibold text-white">
-              Background Images
-            </h3>
-            <p className="text-zinc-400 text-xs sm:text-sm mt-1">
-              Choose from available backgrounds or upload your own custom image
-            </p>
+          <div>
+            <h3 className="text-lg font-bold text-white">Interface Background</h3>
+            <p className="text-xs text-zinc-500">Personalize your workspace with custom imagery</p>
           </div>
         </div>
-      </div>
-
-      {/* Content */}
-      <div className="p-4 sm:p-6">
-        {error && (
-          <div className="bg-red-500/10 border border-red-500/30 rounded-xl p-4 mb-6 flex items-center">
-            <X className="h-5 w-5 text-red-400 mr-3 flex-shrink-0" />
-            <p className="text-red-300 text-sm flex-1">{error}</p>
-            <button
-              onClick={() => setError('')}
-              className="text-red-400 hover:text-red-300 ml-3"
-            >
-              <X className="h-4 w-4" />
-            </button>
-          </div>
-        )}
 
-        {/* Current Background Display - Only for user-uploaded images */}
-        {settings?.backgroundImage?.selectedImage &&
-          !['random', 'favorites'].includes(
-            settings.backgroundImage.selectedImage
-          ) &&
-          settings.backgroundImage.selectedImage !== null &&
-          (getPhotoCredit(settings.backgroundImage.selectedImage) ||
-            settings.backgroundImage.useCustomBackground) && (
-            <div className="mb-6">
-              <h4 className="text-white font-medium text-sm mb-3 flex items-center">
-                <Camera className="h-4 w-4 mr-2 text-cyan-400" />
-                Current Background
-              </h4>
-              <div className="relative w-full max-w-2xl h-48 rounded-xl overflow-hidden border border-zinc-700/50 group">
-                <img
-                  src={
-                    getImageUrl(settings.backgroundImage.selectedImage) ??
-                    undefined
-                  }
-                  alt="Current background"
-                  className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
-                />
-                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-end p-3">
-                  <Button
-                    onClick={handleDelete}
-                    disabled={deleting}
-                    variant="danger"
-                    size="sm"
-                    className="bg-red-600/90 hover:bg-red-700 backdrop-blur-sm"
-                  >
-                    <Trash2 className="h-4 w-4 mr-2" />
-                    {deleting ? 'Deleting...' : 'Delete'}
-                  </Button>
-                </div>
-              </div>
-            </div>
-          )}
-
-        {/* Upload Section */}
-        {!settings?.backgroundImage?.useCustomBackground && (
-          <div className="mb-6">
-            <h4 className="text-white font-medium text-sm mb-3 flex items-center">
-              <Upload className="h-4 w-4 mr-2 text-blue-400" />
-              Upload Custom Background
-            </h4>
-            <div
-              onDrop={handleDrop}
-              onDragOver={handleDragOver}
-              onDragLeave={handleDragLeave}
-              className={`
-                                relative border-2 border-dashed rounded-xl p-8 text-center transition-all duration-300 cursor-pointer
-                                ${
-                                  dragActive
-                                    ? 'border-blue-400 bg-blue-500/10 scale-[1.02]'
-                                    : 'border-zinc-600 bg-zinc-800/30 hover:border-zinc-500 hover:bg-zinc-800/50'
-                                }
-                            `}
-            >
-              <input
-                type="file"
-                accept="image/*"
-                onChange={handleFileInput}
-                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
-                disabled={uploading}
-              />
-              <div className="flex flex-col items-center space-y-4">
-                <div
-                  className={`p-4 rounded-xl transition-colors duration-300 ${
-                    dragActive
-                      ? 'bg-blue-500/20'
-                      : uploading
-                        ? 'bg-blue-500/20'
-                        : 'bg-zinc-700/50'
-                  }`}
-                >
-                  {uploading ? (
-                    <Loader2 className="h-8 w-8 text-blue-400 animate-spin" />
-                  ) : (
-                    <Upload className="h-8 w-8 text-zinc-400" />
-                  )}
-                </div>
-                <div>
-                  <p className="text-lg font-medium text-white mb-2">
-                    {dragActive
-                      ? 'Drop your image here'
-                      : uploading
-                        ? 'Uploading...'
-                        : 'Upload Background Image'}
-                  </p>
-                  <p className="text-zinc-400 text-sm">
-                    Drag and drop an image here, or click to browse
-                  </p>
-                  <p className="text-sm text-red-400 mt-2">
-                    Pictures you upload are public
-                  </p>
-                </div>
-              </div>
+        {status.error && (
+          <div className="mb-6 p-3 bg-red-500/10 border border-red-500/20 rounded-lg flex items-center justify-between">
+            <div className="flex items-center gap-2 text-red-400 text-sm">
+              <X size={14} /> {status.error}
             </div>
+            <button onClick={() => setStatus(p => ({ ...p, error: '' }))} className="text-zinc-500 hover:text-white">
+              <X size={14} />
+            </button>
           </div>
         )}
 
-        {/* Your Cephie Snap pictures */}
-        <div className="mb-6">
-          <h4 className="text-white font-medium text-sm mb-3 flex items-center">
-            <Camera className="h-4 w-4 mr-2 text-cyan-400" />
-            Your Cephie Snap pictures
-          </h4>
-          <p className="text-zinc-400 text-xs mb-3">
-            Images you uploaded at{' '}
-            <a
-              href="https://snap.cephie.app"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-cyan-400 hover:text-cyan-300 inline-flex items-center gap-1"
-            >
-              snap.cephie.app
-              <ExternalLink className="h-3 w-3" />
-            </a>{' '}
-            - select one as your background.
-          </p>
-          {loadingCephieSnap ? (
-            <div className="flex items-center justify-center p-8 bg-zinc-800/30 rounded-xl border border-zinc-700/50">
-              <Loader2 className="h-5 w-5 animate-spin text-cyan-400 mr-2" />
-              <span className="text-zinc-400 text-sm">Loading your Snap pictures...</span>
+        {/* Action Grid (Presest) */}
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
+          {/* None */}
+          <BackgroundItem 
+            isSelected={!selectedImage} 
+            variantColor="zinc"
+            onClick={() => handleSelectImage(null)}
+          >
+            <div className="absolute inset-0 flex flex-col items-center justify-center gap-2">
+              <EyeOff className="text-zinc-600" />
+              <span className="text-[10px] font-bold uppercase tracking-widest text-zinc-500">Default</span>
             </div>
-          ) : cephieSnapImages.length === 0 ? (
-            <div className="p-6 bg-zinc-800/30 rounded-xl border border-zinc-700/50 text-center">
-              <ImageIcon className="h-10 w-10 text-zinc-500 mx-auto mb-2" />
-              <p className="text-zinc-400 text-sm">No Cephie Snap pictures yet.</p>
-              <a
-                href="https://snap.cephie.app"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-cyan-400 hover:text-cyan-300 text-sm inline-flex items-center gap-1 mt-2"
-              >
-                Upload at snap.cephie.app
-                <ExternalLink className="h-3 w-3" />
-              </a>
+          </BackgroundItem>
+
+          {/* Random */}
+          <BackgroundItem 
+            isSelected={selectedImage === 'random'} 
+            variantColor="purple"
+            onClick={() => handleSelectImage('random')}
+          >
+            <div className="absolute inset-0 bg-gradient-to-br from-purple-600/20 to-indigo-600/20 flex flex-col items-center justify-center gap-2">
+              <Shuffle className="text-purple-400" />
+              <span className="text-[10px] font-bold uppercase tracking-widest text-purple-400">Randomize</span>
             </div>
-          ) : (
-            <div className="max-h-[20rem] overflow-y-auto rounded-xl border border-zinc-700/50 p-1">
-              <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
-              {cephieSnapImages.map((img) => {
-                const isSelected = selectedImage === img.url;
-                return (
-                  <div
-                    key={img.id}
-                    className={`relative rounded-xl overflow-hidden cursor-pointer transition-all duration-200 hover:scale-[1.02] border-2 group ${
-                      isSelected
-                        ? 'border-cyan-500 shadow-lg shadow-cyan-500/25'
-                        : 'border-zinc-700 hover:border-zinc-600'
-                    }`}
-                    onClick={() => handleSelectImage(img.url)}
-                  >
-                    <div className="aspect-video relative bg-zinc-800">
-                      <img
-                        src={img.url}
-                        alt="Cephie Snap"
-                        className="w-full h-full object-cover group-hover:brightness-110 transition-all"
-                      />
-                      {isSelected && (
-                        <div className="absolute top-2 right-2 bg-cyan-500 rounded-full p-1">
-                          <Eye className="h-3 w-3 text-white" />
-                        </div>
-                      )}
-                      <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity" />
-                    </div>
-                  </div>
-                );
-              })}
-              </div>
+          </BackgroundItem>
+
+          {/* Favorites */}
+          <BackgroundItem 
+            isSelected={selectedImage === 'favorites'} 
+            variantColor="yellow"
+            onClick={() => favorites.length > 0 && handleSelectImage('favorites')}
+            className={favorites.length === 0 ? "opacity-40 grayscale pointer-events-none" : ""}
+          >
+            <div className="absolute inset-0 bg-gradient-to-br from-yellow-600/20 to-orange-600/20 flex flex-col items-center justify-center gap-2">
+              <Star className="text-yellow-400" />
+              <span className="text-[10px] font-bold uppercase tracking-widest text-yellow-400">My Stashed ({favorites.length})</span>
             </div>
-          )}
+          </BackgroundItem>
         </div>
 
-        {/* Available Backgrounds */}
-        <div>
-          <h4 className="text-white font-medium text-sm mb-4 flex items-center">
-            <ImageIcon className="h-4 w-4 mr-2 text-emerald-400" />
-            Available Backgrounds
-          </h4>
-
-          {loadingImages ? (
-            <div className="flex items-center justify-center p-12 bg-zinc-800/30 rounded-xl border border-zinc-700/50">
-              <Loader2 className="h-6 w-6 animate-spin text-cyan-400 mr-3" />
-              <span className="text-zinc-400">Loading backgrounds...</span>
+        {/* Upload Zone */}
+        <div className="relative group">
+          <input 
+            type="file" 
+            className="absolute inset-0 opacity-0 cursor-pointer z-10" 
+            onChange={(e) => e.target.files?.[0] && handleUpload(e.target.files[0])}
+            disabled={status.uploading}
+          />
+          <div className={`
+            border-2 border-dashed rounded-xl p-8 transition-all duration-300 flex flex-col items-center justify-center gap-3
+            ${status.uploading ? 'border-cyan-500/50 bg-cyan-500/5' : 'border-zinc-800 bg-zinc-950/30 group-hover:border-zinc-700 group-hover:bg-zinc-800/20'}
+          `}>
+            {status.uploading ? (
+              <Loader2 className="animate-spin text-cyan-400" />
+            ) : (
+              <Upload className="text-zinc-600 group-hover:text-zinc-400 transition-colors" />
+            )}
+            <div className="text-center">
+              <p className="text-sm font-semibold text-zinc-300">Upload New Background</p>
+              <p className="text-[11px] text-zinc-500 mt-1">Images are stored in your Cephie Snap Cloud</p>
             </div>
-          ) : (
-            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-4">
-              {/* No Background */}
-              <div
-                className={`relative rounded-xl overflow-hidden cursor-pointer transition-all duration-200 hover:scale-[1.02] border-2 group ${
-                  selectedImage === null || selectedImage === ''
-                    ? 'border-emerald-500 shadow-lg shadow-emerald-500/25'
-                    : 'border-zinc-700 hover:border-zinc-600'
-                }`}
-                onClick={() => handleSelectImage('')}
-              >
-                <div className="aspect-video bg-gradient-to-br from-zinc-800 to-zinc-900 flex items-center justify-center">
-                  <div className="text-center">
-                    <EyeOff className="h-8 w-8 text-zinc-400 mx-auto mb-2 group-hover:text-zinc-300 transition-colors" />
-                    <span className="text-zinc-400 text-xs group-hover:text-zinc-300 transition-colors">
-                      No Background
-                    </span>
-                  </div>
-                </div>
-                {(selectedImage === null || selectedImage === '') && (
-                  <div className="absolute top-2 right-2 bg-emerald-500 rounded-full p-1">
-                    <Eye className="h-3 w-3 text-white" />
-                  </div>
-                )}
-              </div>
+          </div>
+        </div>
+      </div>
 
-              {/* Random */}
-              <div
-                className={`relative rounded-xl overflow-hidden cursor-pointer transition-all duration-200 hover:scale-[1.02] border-2 group ${
-                  selectedImage === 'random'
-                    ? 'border-purple-500 shadow-lg shadow-purple-500/25'
-                    : 'border-zinc-700 hover:border-zinc-600'
-                }`}
-                onClick={() => handleSelectImage('random')}
-              >
-                <div className="aspect-video bg-gradient-to-br from-purple-800 to-purple-900 flex items-center justify-center">
-                  <div className="text-center">
-                    <Shuffle className="h-8 w-8 text-purple-400 mx-auto mb-2 group-hover:text-purple-300 transition-colors" />
-                    <span className="text-purple-400 text-xs group-hover:text-purple-300 transition-colors">
-                      Random
-                    </span>
-                  </div>
-                </div>
-                {selectedImage === 'random' && (
-                  <div className="absolute top-2 right-2 bg-purple-500 rounded-full p-1">
-                    <Eye className="h-3 w-3 text-white" />
-                  </div>
-                )}
+      {/* Gallery Section */}
+      <div className="space-y-4">
+        <div className="flex items-center justify-between px-1">
+          <h4 className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Public Gallery</h4>
+          {loading.images && <Loader2 size={12} className="animate-spin text-zinc-600" />}
+        </div>
+        
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
+          {availableImages.map((img) => {
+            const isFav = favorites.includes(img.filename);
+            const isSel = selectedImage === img.filename;
+            const credit = getPhotoCredit(img.filename);
+
+            return (
+              <div key={img.filename} className="group relative">
+                <BackgroundItem 
+                  isSelected={isSel}
+                  variantColor="cyan"
+                  onClick={() => handleSelectImage(img.filename)}
+                >
+                  <img 
+                    src={`${API_BASE_URL}${img.path}`} 
+                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" 
+                    loading="lazy"
+                    alt=""
+                  />
+                  {credit && (
+                    <div className="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/80 to-transparent">
+                      <p className="text-[9px] text-zinc-300 flex items-center gap-1">
+                        <User size={10} /> {credit}
+                      </p>
+                    </div>
+                  )}
+                </BackgroundItem>
+                
+                <button
+                  onClick={(e) => { e.stopPropagation(); handleToggleFavorite(img.filename); }}
+                  className={`
+                    absolute top-2 left-2 p-1.5 rounded-lg border transition-all z-20
+                    ${isFav 
+                      ? 'bg-yellow-500 border-yellow-400 text-white' 
+                      : 'bg-zinc-900/80 border-zinc-700 text-zinc-400 opacity-0 group-hover:opacity-100'}
+                  `}
+                >
+                  <Star size={12} fill={isFav ? "currentColor" : "none"} />
+                </button>
               </div>
+            );
+          })}
+        </div>
+      </div>
 
-              {/* Favorites */}
-              <div
-                className={`relative rounded-xl overflow-hidden cursor-pointer transition-all duration-200 hover:scale-[1.02] border-2 group ${
-                  selectedImage === 'favorites'
-                    ? 'border-yellow-500 shadow-lg shadow-yellow-500/25'
-                    : favoriteCount === 0
-                      ? 'border-zinc-600 opacity-50 cursor-not-allowed'
-                      : 'border-zinc-700 hover:border-zinc-600'
-                }`}
-                onClick={() =>
-                  favoriteCount > 0 && handleSelectImage('favorites')
-                }
+      {/* Cloud Snap Section */}
+      {cephieSnapImages.length > 0 && (
+        <div className="space-y-4 pt-4">
+          <div className="flex items-center gap-2 px-1">
+            <Camera size={14} className="text-cyan-400" />
+            <h4 className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Cloud Snapshots</h4>
+          </div>
+          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
+            {cephieSnapImages.map((img) => (
+              <BackgroundItem
+                key={img.id}
+                isSelected={selectedImage === img.url}
+                variantColor="cyan"
+                onClick={() => handleSelectImage(img.url)}
               >
-                <div className="aspect-video bg-gradient-to-br from-yellow-800 to-yellow-900 flex items-center justify-center">
-                  <div className="text-center">
-                    <Star className="h-8 w-8 text-yellow-400 mx-auto mb-2 group-hover:text-yellow-300 transition-colors" />
-                    <span className="text-yellow-400 text-xs group-hover:text-yellow-300 transition-colors">
-                      Favorites ({favoriteCount})
-                    </span>
-                  </div>
-                </div>
-                {selectedImage === 'favorites' && (
-                  <div className="absolute top-2 right-2 bg-yellow-500 rounded-full p-1">
-                    <Eye className="h-3 w-3 text-white" />
-                  </div>
-                )}
-              </div>
-
-              {/* Available Images */}
-              {availableImages.map((image, index) => (
-                <BackgroundImageItem
-                  key={index}
-                  image={image}
-                  index={index}
-                  settings={settings}
-                  selectedImage={selectedImage ?? null}
-                  loadedImages={loadedImages}
-                  onSelectImage={handleSelectImage}
-                  onToggleFavorite={handleToggleFavorite}
-                  onImageLoad={handleImageLoad}
-                  getPhotoCredit={getPhotoCredit}
-                />
-              ))}
-            </div>
-          )}
-          {availableImages.length === 0 && !loadingImages && (
-            <div className="text-center p-8 text-gray-400">
-              <ImageIcon className="h-12 w-12 mx-auto mb-4 opacity-50" />
-              <p>No background images available yet.</p>
-              <p className="text-xs mt-2">
-                Upload your own image or wait for images to be added.
-              </p>
-            </div>
-          )}
+                <img src={img.url} className="w-full h-full object-cover" loading="lazy" />
+              </BackgroundItem>
+            ))}
+          </div>
         </div>
+      )}
 
-        <div className="mt-6 p-4 bg-gradient-to-r from-blue-900/20 to-indigo-900/20 border border-blue-500/20 rounded-lg">
-          <div className="flex items-start">
-            <div className="w-2 h-2 bg-blue-400 rounded-full mt-2 mr-3 flex-shrink-0"></div>
-            <div>
-              <h4 className="text-blue-300 font-medium text-sm mb-1">
-                How it works
-              </h4>
-              <p className="text-blue-200/80 text-xs sm:text-sm leading-relaxed">
-                Select "No Background" for the default transparent background,
-                "Random" for any available image each session, "Favorites" for
-                random selection from your starred images only, or choose a
-                specific image. Click the star to add/remove favorites. Remember
-                to save your changes!
-              </p>
-            </div>
-          </div>
+      {/* Information Footer */}
+      <div className="p-4 bg-blue-500/5 border border-blue-500/10 rounded-xl flex gap-4">
+        <div className="p-2 bg-blue-500/10 rounded-lg h-fit">
+          <ExternalLink size={14} className="text-blue-400" />
         </div>
+        <p className="text-xs text-zinc-500 leading-relaxed">
+          <strong className="text-zinc-300 block mb-1">Background Logic</strong>
+          Individual selection overrides presets. Use "Random" to cycle through all public images. 
+          Use "Stashed" to cycle through only your starred favorites.
+        </p>
       </div>
-
-      <style>{`
-                @keyframes skeletonPulse {
-                    0% { background-position: -200% 0; }
-                    100% { background-position: 200% 0; }
-                }
-                .skeleton-loading {
-                    background: linear-gradient(110deg, rgba(55, 65, 81, 0.5) 8%, rgba(75, 85, 99, 0.8) 18%, rgba(55, 65, 81, 0.5) 33%);
-                    background-size: 200% 100%;
-                    animation: skeletonPulse 1.5s ease-in-out infinite;
-                }
-            `}</style>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/Settings/LayoutSettings.tsx b/src/components/Settings/LayoutSettings.tsx
index dfc020e..5bbc010 100644
--- a/src/components/Settings/LayoutSettings.tsx
+++ b/src/components/Settings/LayoutSettings.tsx
@@ -1,187 +1,97 @@
-import {
-  Layout,
-  Eye,
-  Monitor,
-  Smartphone,
-  Layers,
-  ChevronDown,
-  ChevronUp,
-  Map,
-} from 'lucide-react';
+import { Layout, Eye, Monitor, Smartphone, Layers, ChevronDown, ChevronUp, Map } from 'lucide-react';
 import { BiSidebar } from 'react-icons/bi';
 import { HiOutlineQueueList } from 'react-icons/hi2';
 import { useState } from 'react';
 import type { Settings } from '../../types/settings';
 import Button from '../common/Button';
+import Toggle from './Toggle';
+import { S } from './settingsTokens';
 
 interface LayoutSettingsProps {
   settings: Settings | null;
   onChange: (updatedSettings: Settings) => void;
 }
 
-export default function LayoutSettings({
-  settings,
-  onChange,
-}: LayoutSettingsProps) {
+export default function LayoutSettings({ settings, onChange }: LayoutSettingsProps) {
   const [isExpanded, setIsExpanded] = useState(false);
 
   const handleCombinedViewToggle = () => {
     if (!settings) return;
-    const updatedSettings = {
-      ...settings,
-      layout: {
-        ...settings.layout,
-        showCombinedView: !settings.layout.showCombinedView,
-      },
-    };
-    onChange(updatedSettings);
+    onChange({ ...settings, layout: { ...settings.layout, showCombinedView: !settings.layout.showCombinedView } });
   };
 
   const handleOpacityChange = (opacity: number) => {
     if (!settings) return;
-    const updatedSettings = {
-      ...settings,
-      layout: {
-        ...settings.layout,
-        flightRowOpacity: opacity,
-      },
-    };
-    onChange(updatedSettings);
+    onChange({ ...settings, layout: { ...settings.layout, flightRowOpacity: opacity } });
   };
 
   const handleChartViewModeChange = (mode: 'list' | 'legacy') => {
     if (!settings) return;
-    const updatedSettings = {
-      ...settings,
-      layout: {
-        ...settings.layout,
-        chartDrawerViewMode: mode,
-      },
-    };
-    onChange(updatedSettings);
+    onChange({ ...settings, layout: { ...settings.layout, chartDrawerViewMode: mode } });
   };
 
   if (!settings) return null;
 
   return (
-    <div className="bg-zinc-900 border border-zinc-700/50 rounded-2xl overflow-hidden">
-      {/* Header */}
-      <div className="w-full p-4 sm:p-6 border-b border-zinc-700/50">
-        <div className="flex items-center justify-between gap-3">
-          <div
-            className="flex items-center flex-1 min-w-0 cursor-pointer"
-            onClick={() => setIsExpanded(!isExpanded)}
-          >
-            <div className="p-2 bg-green-500/20 rounded-lg mr-3 sm:mr-4 flex-shrink-0">
-              <Layout className="h-5 w-5 sm:h-6 sm:w-6 text-green-400" />
+    <div className={S.card}>
+      <div className={S.header}>
+        <div className={S.headerInner}>
+          <div className={S.headerClickable} onClick={() => setIsExpanded(!isExpanded)}>
+            <div className={`${S.iconBox} ${S.iconBoxMr} bg-green-500/20`}>
+              <Layout className={`${S.icon} text-green-400`} />
             </div>
             <div className="text-left min-w-0">
-              <h3 className="text-lg sm:text-xl font-semibold text-white">
-                Layout Settings
-              </h3>
-              <p className="text-zinc-400 text-xs sm:text-sm mt-1 hidden sm:block">
-                Configure how flight tables are displayed and their appearance
-              </p>
+              <h3 className={S.title}>Layout Settings</h3>
+              <p className={S.subtitle}>Configure how flight tables are displayed and their appearance</p>
             </div>
           </div>
-          <Button
-            onClick={() => setIsExpanded(!isExpanded)}
-            variant="outline"
-            size="sm"
-            className="border-zinc-600 text-zinc-300 hover:bg-zinc-800 p-2 flex-shrink-0"
-          >
-            {isExpanded ? (
-              <ChevronUp className="h-4 w-4" />
-            ) : (
-              <ChevronDown className="h-4 w-4" />
-            )}
+          <Button onClick={() => setIsExpanded(!isExpanded)} variant="outline" size="sm" className={S.chevronBtn}>
+            {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
           </Button>
         </div>
       </div>
 
-      {/* Content */}
-      <div
-        className={`transition-all duration-300 ease-in-out ${
-          isExpanded
-            ? 'max-h-[2000px] opacity-100'
-            : 'max-h-0 opacity-0 overflow-hidden'
-        }`}
-      >
-        <div className="p-4 sm:p-6">
+      <div className={`transition-all duration-300 ease-in-out ${isExpanded ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0 overflow-hidden'}`}>
+        <div className={S.content}>
           <div className="space-y-6">
-            {/* Combined View Setting */}
-            <div className="bg-zinc-800/30 border border-zinc-700/50 rounded-xl p-5">
-              <div className="flex items-start mb-4">
-                <div className="p-2 bg-blue-500/20 rounded-lg mr-4 mt-0.5">
-                  <Monitor className="h-5 w-5 text-blue-400" />
+
+            {/* Combined View */}
+            <div className={S.section}>
+              <div className={S.sectionHeader}>
+                <div className={`${S.sectionIconBox} bg-blue-500/20`}>
+                  <Monitor className={`${S.sectionIcon} text-blue-400`} />
                 </div>
                 <div className="flex-1">
-                  <h4 className="text-white font-medium mb-1">
-                    Combined View (Desktop)
-                  </h4>
-                  <p className="text-zinc-400 text-sm">
-                    Show both departure and arrival tables on the same page for
-                    desktop users
-                  </p>
+                  <h4 className={S.sectionTitle}>Combined View (Desktop)</h4>
+                  <p className={S.sectionSubtitle}>Show both departure and arrival tables on the same page for desktop users</p>
                 </div>
               </div>
-
-              {/* Toggle Control */}
-              <div className="flex items-center justify-center">
-                <label className="relative inline-flex items-center cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={settings.layout.showCombinedView}
-                    onChange={handleCombinedViewToggle}
-                    className="sr-only peer"
-                  />
-                  <div className="relative w-14 h-7 bg-zinc-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-7 peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-green-600 shadow-inner">
-                    <div className="absolute inset-0 flex items-center justify-between px-2 text-xs font-medium">
-                      <Smartphone className="h-3 w-3 text-white" />
-                      <Monitor className="h-3 w-3 text-zinc-400" />
-                    </div>
-                  </div>
-                </label>
+              <div className="flex items-center justify-center gap-4">
+                <Smartphone className="h-4 w-4 text-zinc-500" />
+                <Toggle checked={settings.layout.showCombinedView} onChange={handleCombinedViewToggle} activeColor="bg-green-600" />
+                <Monitor className="h-4 w-4 text-zinc-500" />
               </div>
-
               <div className="mt-3 text-center">
-                <span
-                  className={`text-sm font-medium ${
-                    settings.layout.showCombinedView
-                      ? 'text-green-400'
-                      : 'text-zinc-400'
-                  }`}
-                >
-                  {settings.layout.showCombinedView
-                    ? 'Combined view enabled'
-                    : 'Separate tabs (default)'}
+                <span className={`text-sm font-medium ${settings.layout.showCombinedView ? 'text-green-400' : 'text-zinc-400'}`}>
+                  {settings.layout.showCombinedView ? 'Combined view enabled' : 'Separate tabs (default)'}
                 </span>
               </div>
             </div>
 
-            {/* Flight Row Transparency Setting */}
-            <div className="bg-zinc-800/30 border border-zinc-700/50 rounded-xl p-5">
-              <div className="flex items-start mb-4">
-                <div className="p-2 bg-purple-500/20 rounded-lg mr-4 mt-0.5">
-                  <Layers className="h-5 w-5 text-purple-400" />
+            {/* Flight Row Transparency */}
+            <div className={S.section}>
+              <div className={S.sectionHeader}>
+                <div className={`${S.sectionIconBox} bg-purple-500/20`}>
+                  <Layers className={`${S.sectionIcon} text-purple-400`} />
                 </div>
                 <div>
-                  <h4 className="text-white font-medium mb-1">
-                    Flight Row Transparency
-                  </h4>
-                  <p className="text-zinc-400 text-sm">
-                    Adjust the opacity of flight strips when using background
-                    images
-                  </p>
+                  <h4 className={S.sectionTitle}>Flight Row Transparency</h4>
+                  <p className={S.sectionSubtitle}>Adjust the opacity of flight strips when using background images</p>
                 </div>
               </div>
-
-              {/* Slider Control */}
               <div className="space-y-4">
                 <div className="flex items-center space-x-4">
-                  <span className="text-xs text-zinc-500 w-16 text-center">
-                    0%
-                  </span>
+                  <span className="text-xs text-zinc-500 w-16 text-center">0%</span>
                   <div className="flex-1 relative flex items-center">
                     <input
                       type="range"
@@ -189,98 +99,64 @@ export default function LayoutSettings({
                       max="100"
                       step="5"
                       value={settings.layout.flightRowOpacity}
-                      onChange={(e) =>
-                        handleOpacityChange(parseInt(e.target.value))
-                      }
+                      onChange={(e) => handleOpacityChange(parseInt(e.target.value))}
                       className="w-full h-2 bg-zinc-700 rounded-lg appearance-none cursor-pointer opacity-slider"
                     />
                     <div
                       className="absolute top-0 left-0 h-2 bg-gradient-to-r from-purple-500 to-purple-400 rounded-lg pointer-events-none"
-                      style={{
-                        width: `${settings.layout.flightRowOpacity}%`,
-                      }}
-                    ></div>
+                      style={{ width: `${settings.layout.flightRowOpacity}%` }}
+                    />
                   </div>
-                  <span className="text-xs text-zinc-500 w-16 text-center">
-                    100%
-                  </span>
-                  <span
-                    className={`text-sm font-medium w-16 text-center px-2 py-1 rounded ${
-                      settings.layout.flightRowOpacity <= 50
-                        ? 'bg-purple-500/20 text-purple-400'
-                        : 'bg-green-500/20 text-green-400'
-                    }`}
-                  >
+                  <span className="text-xs text-zinc-500 w-16 text-center">100%</span>
+                  <span className={`text-sm font-medium w-16 text-center px-2 py-1 rounded ${
+                    settings.layout.flightRowOpacity <= 50 ? 'bg-purple-500/20 text-purple-400' : 'bg-green-500/20 text-green-400'
+                  }`}>
                     {settings.layout.flightRowOpacity}%
                   </span>
                 </div>
-
-                {/* Enhanced Preview */}
                 <div className="mt-4">
-                  <p className="text-xs text-zinc-400 mb-3 flex items-center">
-                    <Eye className="h-3 w-3 mr-1" />
-                    Preview:
+                  <p className="text-xs text-zinc-400 mb-3 flex items-center gap-1">
+                    <Eye className="h-3 w-3" /> Preview:
                   </p>
                   <div className="relative rounded-lg overflow-hidden border border-zinc-700/50">
-                    {/* Background Image Simulation */}
                     <div
                       className="absolute inset-0 bg-gradient-to-br from-blue-900 via-indigo-800 to-purple-900"
                       style={{
                         backgroundImage: `
-                                                    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
-                                                    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.15) 0%, transparent 50%),
-                                                    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%)
-                                                `,
+                          radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
+                          radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.15) 0%, transparent 50%),
+                          radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%)
+                        `,
                       }}
-                    ></div>
-
-                    {/* Flight Strip Overlay */}
+                    />
                     <div
                       className="relative bg-zinc-800 border border-zinc-700 p-3"
-                      style={{
-                        backgroundColor: `rgba(39, 39, 42, ${
-                          settings.layout.flightRowOpacity / 100
-                        })`,
-                      }}
+                      style={{ backgroundColor: `rgba(39, 39, 42, ${settings.layout.flightRowOpacity / 100})` }}
                     >
                       <div className="flex items-center justify-between text-sm">
                         <div className="flex items-center space-x-4">
-                          <span className="text-blue-400 font-mono font-medium">
-                            BAW123
-                          </span>
+                          <span className="text-blue-400 font-mono font-medium">BAW123</span>
                           <span className="text-zinc-300">B738</span>
                           <span className="text-zinc-400">EGLL → KJFK</span>
                         </div>
                         <div className="flex items-center space-x-2">
-                          <span className="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">
-                            RWY
-                          </span>
+                          <span className="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">RWY</span>
                           <span className="text-zinc-400 text-xs">09:15</span>
                         </div>
                       </div>
                     </div>
-
-                    {/* Second flight strip for better preview */}
                     <div
                       className="relative bg-zinc-800 border-t border-zinc-700 p-3"
-                      style={{
-                        backgroundColor: `rgba(39, 39, 42, ${
-                          settings.layout.flightRowOpacity / 100
-                        })`,
-                      }}
+                      style={{ backgroundColor: `rgba(39, 39, 42, ${settings.layout.flightRowOpacity / 100})` }}
                     >
                       <div className="flex items-center justify-between text-sm">
                         <div className="flex items-center space-x-4">
-                          <span className="text-blue-400 font-mono font-medium">
-                            UAL456
-                          </span>
+                          <span className="text-blue-400 font-mono font-medium">UAL456</span>
                           <span className="text-zinc-300">B777</span>
                           <span className="text-zinc-400">KJFK → EGLL</span>
                         </div>
                         <div className="flex items-center space-x-2">
-                          <span className="text-xs bg-blue-500/20 text-blue-400 px-2 py-1 rounded">
-                            TAXI
-                          </span>
+                          <span className="text-xs bg-blue-500/20 text-blue-400 px-2 py-1 rounded">TAXI</span>
                           <span className="text-zinc-400 text-xs">09:22</span>
                         </div>
                       </div>
@@ -291,26 +167,21 @@ export default function LayoutSettings({
             </div>
 
             {/* Chart Drawer View Mode */}
-            <div className="bg-zinc-800/30 border border-zinc-700/50 rounded-xl p-5">
-              <div className="flex items-start mb-4">
-                <div className="p-2 bg-cyan-500/20 rounded-lg mr-4 mt-0.5">
-                  <Map className="h-5 w-5 text-cyan-400" />
+            <div className={S.section}>
+              <div className={S.sectionHeader}>
+                <div className={`${S.sectionIconBox} bg-cyan-500/20`}>
+                  <Map className={`${S.sectionIcon} text-cyan-400`} />
                 </div>
                 <div>
-                  <h4 className="text-white font-medium mb-1">
-                    Chart Drawer View Mode
-                  </h4>
-                  <p className="text-zinc-400 text-sm">
-                    Choose how charts are displayed
-                  </p>
+                  <h4 className={S.sectionTitle}>Chart Drawer View Mode</h4>
+                  <p className={S.sectionSubtitle}>Choose how charts are displayed</p>
                 </div>
               </div>
               <div className="flex gap-2">
                 <button
                   onClick={() => handleChartViewModeChange('legacy')}
                   className={`flex-1 px-4 py-3 rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2 ${
-                    (settings.layout.chartDrawerViewMode || 'legacy') ===
-                    'legacy'
+                    (settings.layout.chartDrawerViewMode || 'legacy') === 'legacy'
                       ? 'bg-blue-600 text-white'
                       : 'bg-zinc-800 text-zinc-400 hover:bg-zinc-700'
                   }`}
@@ -333,58 +204,21 @@ export default function LayoutSettings({
             </div>
           </div>
 
-          {/* Info Section */}
-          <div className="mt-6 p-4 bg-gradient-to-r from-blue-900/20 to-indigo-900/20 border border-blue-500/20 rounded-lg">
+          <div className={`${S.infoBanner} bg-gradient-to-r from-blue-900/20 to-indigo-900/20 border-blue-500/20`}>
             <div className="flex items-start">
-              <div className="w-2 h-2 bg-blue-400 rounded-full mt-2 mr-3 flex-shrink-0"></div>
+              <div className="w-2 h-2 bg-blue-400 rounded-full mt-2 mr-3 flex-shrink-0" />
               <div>
-                <h4 className="text-blue-300 font-medium text-sm mb-1">
-                  Layout Information
-                </h4>
+                <h4 className="text-blue-300 font-medium text-sm mb-1">Layout Information</h4>
                 <p className="text-blue-200/80 text-xs sm:text-sm leading-relaxed">
-                  Combined view only applies to desktop screens - mobile devices
-                  will always show tabs. Flight row transparency affects the
-                  visibility of flight strips when background images are
-                  enabled, helping you balance aesthetics with readability.
-                  Chart drawer view mode controls how charts are displayed in
-                  the ACARS terminal.
+                  Combined view only applies to desktop screens — mobile devices will always show tabs. Flight row
+                  transparency affects the visibility of flight strips when background images are enabled. Chart drawer
+                  view mode controls how charts are displayed in the ACARS terminal.
                 </p>
               </div>
             </div>
           </div>
         </div>
       </div>
-
-      <style>{`
-                .opacity-slider::-webkit-slider-thumb {
-                    appearance: none;
-                    height: 18px;
-                    width: 18px;
-                    border-radius: 50%;
-                    background: #ffffff;
-                    cursor: pointer;
-                    border: 2px solid #a855f7;
-                    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-                    position: relative;
-                    z-index: 10;
-                }
-                .opacity-slider::-moz-range-thumb {
-                    height: 18px;
-                    width: 18px;
-                    border-radius: 50%;
-                    background: #ffffff;
-                    cursor: pointer;
-                    border: 2px solid #a855f7;
-                    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-                    position: relative;
-                    z-index: 10;
-                }
-                .opacity-slider {
-                    background: transparent;
-                    position: relative;
-                    z-index: 5;
-                }
-            `}</style>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/Settings/PrivacySettings.tsx b/src/components/Settings/PrivacySettings.tsx
index 963baab..795bbb5 100644
--- a/src/components/Settings/PrivacySettings.tsx
+++ b/src/components/Settings/PrivacySettings.tsx
@@ -1,230 +1,80 @@
 import { User, Link2, Shield, Image, Star } from 'lucide-react';
 import type { Settings } from '../../types/settings';
+import Toggle from './Toggle';
+import { S } from './settingsTokens';
 
 interface PrivacySettingsProps {
   settings: Settings | null;
   onChange: (updatedSettings: Settings) => void;
 }
 
-export default function PrivacySettings({
-  settings,
-  onChange,
-}: PrivacySettingsProps) {
-  const handleDisplayStatsToggle = (enabled: boolean) => {
-    if (!settings) return;
-    const updatedSettings = {
-      ...settings,
-      displayStatsOnProfile: enabled,
-    };
-    onChange(updatedSettings);
-  };
-
-  const handleDisplayControllerRatingToggle = (enabled: boolean) => {
-    if (!settings) return;
-    const updatedSettings = {
-      ...settings,
-      displayControllerRatingOnProfile: enabled,
-    };
-    onChange(updatedSettings);
-  };
-
-  const handleDisplayLinkedAccountsToggle = (enabled: boolean) => {
-    if (!settings) return;
-    const updatedSettings = {
-      ...settings,
-      displayLinkedAccountsOnProfile: enabled,
-    };
-    onChange(updatedSettings);
-  };
-
-  const handleHideFromLeaderboardToggle = (enabled: boolean) => {
-    if (!settings) return;
-    const updatedSettings = {
-      ...settings,
-      hideFromLeaderboard: enabled,
-    };
-    onChange(updatedSettings);
-  };
-
-  const handleDisplayBackgroundToggle = (enabled: boolean) => {
-    if (!settings) return;
-    const updatedSettings = {
-      ...settings,
-      displayBackgroundOnProfile: enabled,
-    };
-    onChange(updatedSettings);
-  };
+interface PrivacyRowProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}
 
+function PrivacyRow({ icon, title, description, checked, onChange }: PrivacyRowProps) {
   return (
-    <div className="space-y-3 sm:space-y-4">
-      {/* Statistics */}
-      <div
-        className={`bg-zinc-800/50 rounded-lg sm:rounded-xl border-2 border-zinc-700/50 p-3 sm:p-5 ${settings?.displayStatsOnProfile ? 'bg-gradient-to-r from-yellow-500/5 to-transparent' : 'bg-gradient-to-r from-green-600/5 to-transparent'}`}
-      >
-        <div className="flex items-center justify-between gap-3">
-          <div className="flex items-center space-x-3 sm:space-x-4 flex-1 min-w-0">
-            <div
-              className={`w-10 h-10 sm:w-12 sm:h-12 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0 ${settings?.displayStatsOnProfile ? 'bg-gradient-to-br from-yellow-500 to-yellow-500' : 'bg-gradient-to-br from-green-600 to-green-600'}`}
-            >
-              <User className="w-5 h-5 sm:w-7 sm:h-7 text-white" />
-            </div>
-            <div className="min-w-0 flex-1">
-              <h4 className="text-white font-semibold text-sm sm:text-base truncate">
-                Display Statistics on Profile
-              </h4>
-              <p className="text-zinc-400 text-xs sm:text-sm mt-0.5 sm:mt-1 line-clamp-2">
-                Show your statistics (e.g., sessions created, time controlling,
-                total flights) on your profile page.
-              </p>
-            </div>
-          </div>
-          <label className="relative inline-flex items-center cursor-pointer flex-shrink-0">
-            <input
-              type="checkbox"
-              checked={settings?.displayStatsOnProfile ?? true}
-              onChange={(e) => handleDisplayStatsToggle(e.target.checked)}
-              className="sr-only peer"
-            />
-            <div className="w-9 h-5 sm:w-11 sm:h-6 bg-red-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 sm:after:h-5 sm:after:w-5 after:transition-all peer-checked:bg-green-600"></div>
-          </label>
+    <div className={S.toggleRow}>
+      <div className="flex items-center space-x-3 flex-1 min-w-0">
+        <div className="p-2 bg-zinc-700/50 rounded-lg flex-shrink-0">
+          {icon}
         </div>
-      </div>
-
-      {/* Controller Rating */}
-      <div
-        className={`bg-zinc-800/50 rounded-lg sm:rounded-xl border-2 border-zinc-700/50 p-3 sm:p-5 ${settings?.displayControllerRatingOnProfile ? 'bg-gradient-to-r from-yellow-500/5 to-transparent' : 'bg-gradient-to-r from-green-600/5 to-transparent'}`}
-      >
-        <div className="flex items-center justify-between gap-3">
-          <div className="flex items-center space-x-3 sm:space-x-4 flex-1 min-w-0">
-            <div
-              className={`w-10 h-10 sm:w-12 sm:h-12 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0 ${settings?.displayControllerRatingOnProfile ? 'bg-gradient-to-br from-yellow-500 to-yellow-500' : 'bg-gradient-to-br from-green-600 to-green-600'}`}
-            >
-              <Star className="w-5 h-5 sm:w-7 sm:h-7 text-white" />
-            </div>
-            <div className="min-w-0 flex-1">
-              <h4 className="text-white font-semibold text-sm sm:text-base truncate">
-                Display Controller Rating on Profile
-              </h4>
-              <p className="text-zinc-400 text-xs sm:text-sm mt-0.5 sm:mt-1 line-clamp-2">
-                Show your average controller rating and total ratings on your
-                profile page.
-              </p>
-            </div>
-          </div>
-          <label className="relative inline-flex items-center cursor-pointer flex-shrink-0">
-            <input
-              type="checkbox"
-              checked={settings?.displayControllerRatingOnProfile ?? true}
-              onChange={(e) =>
-                handleDisplayControllerRatingToggle(e.target.checked)
-              }
-              className="sr-only peer"
-            />
-            <div className="w-9 h-5 sm:w-11 sm:h-6 bg-red-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 sm:after:h-5 sm:after:w-5 after:transition-all peer-checked:bg-green-600"></div>
-          </label>
+        <div className="min-w-0 flex-1">
+          <h4 className="text-white font-medium text-sm truncate">{title}</h4>
+          <p className="text-zinc-400 text-xs mt-0.5 line-clamp-2">{description}</p>
         </div>
       </div>
-
-      {/* Linked Accounts */}
-      <div
-        className={`bg-zinc-800/50 rounded-lg sm:rounded-xl border-2 border-zinc-700/50 p-3 sm:p-5 ${settings?.displayLinkedAccountsOnProfile ? 'bg-gradient-to-r from-yellow-500/5 to-transparent' : 'bg-gradient-to-r from-green-600/5 to-transparent'}`}
-      >
-        <div className="flex items-center justify-between gap-3">
-          <div className="flex items-center space-x-3 sm:space-x-4 flex-1 min-w-0">
-            <div
-              className={`w-10 h-10 sm:w-12 sm:h-12 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0 ${settings?.displayLinkedAccountsOnProfile ? 'bg-gradient-to-br from-yellow-500 to-yellow-500' : 'bg-gradient-to-br from-green-600 to-green-600'}`}
-            >
-              <Link2 className="w-5 h-5 sm:w-7 sm:h-7 text-white" />
-            </div>
-            <div className="min-w-0 flex-1">
-              <h4 className="text-white font-semibold text-sm sm:text-base truncate">
-                Display Linked Accounts on Profile
-              </h4>
-              <p className="text-zinc-400 text-xs sm:text-sm mt-0.5 sm:mt-1 line-clamp-2">
-                Show your linked accounts (e.g., Roblox, VATSIM) on your profile
-                page.
-              </p>
-            </div>
-          </div>
-          <label className="relative inline-flex items-center cursor-pointer flex-shrink-0">
-            <input
-              type="checkbox"
-              checked={settings?.displayLinkedAccountsOnProfile ?? true}
-              onChange={(e) =>
-                handleDisplayLinkedAccountsToggle(e.target.checked)
-              }
-              className="sr-only peer"
-            />
-            <div className="w-9 h-5 sm:w-11 sm:h-6 bg-red-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 sm:after:h-5 sm:after:w-5 after:transition-all peer-checked:bg-green-600"></div>
-          </label>
-        </div>
+      <div className="ml-4 flex-shrink-0">
+        <Toggle checked={checked} onChange={onChange} activeColor="bg-green-600" />
       </div>
+    </div>
+  );
+}
 
-      {/* Background Image */}
-      <div
-        className={`bg-zinc-800/50 rounded-lg sm:rounded-xl border-2 border-zinc-700/50 p-3 sm:p-5 ${settings?.displayBackgroundOnProfile ? 'bg-gradient-to-r from-yellow-500/5 to-transparent' : 'bg-gradient-to-r from-green-600/5 to-transparent'}`}
-      >
-        <div className="flex items-center justify-between gap-3">
-          <div className="flex items-center space-x-3 sm:space-x-4 flex-1 min-w-0">
-            <div
-              className={`w-10 h-10 sm:w-12 sm:h-12 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0 ${settings?.displayBackgroundOnProfile ? 'bg-gradient-to-br from-yellow-500 to-yellow-500' : 'bg-gradient-to-br from-green-600 to-green-600'}`}
-            >
-              <Image className="w-5 h-5 sm:w-7 sm:h-7 text-white" />
-            </div>
-            <div className="min-w-0 flex-1">
-              <h4 className="text-white font-semibold text-sm sm:text-base truncate">
-                Display Background Image on Profile
-              </h4>
-              <p className="text-zinc-400 text-xs sm:text-sm mt-0.5 sm:mt-1 line-clamp-2">
-                Show your selected background image in your profile header.
-              </p>
-            </div>
-          </div>
-          <label className="relative inline-flex items-center cursor-pointer flex-shrink-0">
-            <input
-              type="checkbox"
-              checked={settings?.displayBackgroundOnProfile ?? true}
-              onChange={(e) => handleDisplayBackgroundToggle(e.target.checked)}
-              className="sr-only peer"
-            />
-            <div className="w-9 h-5 sm:w-11 sm:h-6 bg-red-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 sm:after:h-5 sm:after:w-5 after:transition-all peer-checked:bg-green-600"></div>
-          </label>
-        </div>
-      </div>
+export default function PrivacySettings({ settings, onChange }: PrivacySettingsProps) {
+  if (!settings) return null;
 
-      {/* Hide from Leaderboard */}
-      <div
-        className={`bg-zinc-800/50 rounded-lg sm:rounded-xl border-2 border-zinc-700/50 p-3 sm:p-5 ${settings?.hideFromLeaderboard ? 'bg-gradient-to-r from-green-600/5 to-transparent' : 'bg-gradient-to-r from-yellow-500/5 to-transparent'}`}
-      >
-        <div className="flex items-center justify-between gap-3">
-          <div className="flex items-center space-x-3 sm:space-x-4 flex-1 min-w-0">
-            <div
-              className={`w-10 h-10 sm:w-12 sm:h-12 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0 ${settings?.hideFromLeaderboard ? 'bg-gradient-to-br from-green-600 to-green-600' : 'bg-gradient-to-br from-yellow-500 to-yellow-500'}`}
-            >
-              <Shield className="w-5 h-5 sm:w-7 sm:h-7 text-white" />
-            </div>
-            <div className="min-w-0 flex-1">
-              <h4 className="text-white font-semibold text-sm sm:text-base truncate">
-                Hide from Leaderboard
-              </h4>
-              <p className="text-zinc-400 text-xs sm:text-sm mt-0.5 sm:mt-1 line-clamp-2">
-                Opt out of appearing in the homepage leaderboard rankings.
-              </p>
-            </div>
-          </div>
-          <label className="relative inline-flex items-center cursor-pointer flex-shrink-0">
-            <input
-              type="checkbox"
-              checked={settings?.hideFromLeaderboard ?? false}
-              onChange={(e) =>
-                handleHideFromLeaderboardToggle(e.target.checked)
-              }
-              className="sr-only peer"
-            />
-            <div className="w-9 h-5 sm:w-11 sm:h-6 bg-red-500 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 sm:after:h-5 sm:after:w-5 after:transition-all peer-checked:bg-green-600"></div>
-          </label>
-        </div>
-      </div>
+  return (
+    <div className="space-y-3">
+      <PrivacyRow
+        icon={<User className="w-5 h-5 text-zinc-300" />}
+        title="Display Statistics on Profile"
+        description="Show your statistics (e.g., sessions created, time controlling, total flights) on your profile page."
+        checked={settings.displayStatsOnProfile ?? true}
+        onChange={(checked) => onChange({ ...settings, displayStatsOnProfile: checked })}
+      />
+      <PrivacyRow
+        icon={<Star className="w-5 h-5 text-zinc-300" />}
+        title="Display Controller Rating on Profile"
+        description="Show your average controller rating and total ratings on your profile page."
+        checked={settings.displayControllerRatingOnProfile ?? true}
+        onChange={(checked) => onChange({ ...settings, displayControllerRatingOnProfile: checked })}
+      />
+      <PrivacyRow
+        icon={<Link2 className="w-5 h-5 text-zinc-300" />}
+        title="Display Linked Accounts on Profile"
+        description="Show your linked accounts (e.g., Roblox, VATSIM) on your profile page."
+        checked={settings.displayLinkedAccountsOnProfile ?? true}
+        onChange={(checked) => onChange({ ...settings, displayLinkedAccountsOnProfile: checked })}
+      />
+      <PrivacyRow
+        icon={<Image className="w-5 h-5 text-zinc-300" />}
+        title="Display Background Image on Profile"
+        description="Show your selected background image in your profile header."
+        checked={settings.displayBackgroundOnProfile ?? true}
+        onChange={(checked) => onChange({ ...settings, displayBackgroundOnProfile: checked })}
+      />
+      <PrivacyRow
+        icon={<Shield className="w-5 h-5 text-zinc-300" />}
+        title="Hide from Leaderboard"
+        description="Opt out of appearing in the homepage leaderboard rankings."
+        checked={settings.hideFromLeaderboard ?? false}
+        onChange={(checked) => onChange({ ...settings, hideFromLeaderboard: checked })}
+      />
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/Settings/SoundSettings.tsx b/src/components/Settings/SoundSettings.tsx
index d49ebfd..e8895ec 100644
--- a/src/components/Settings/SoundSettings.tsx
+++ b/src/components/Settings/SoundSettings.tsx
@@ -1,13 +1,11 @@
 import { Volume2, VolumeX, ChevronDown, ChevronUp } from 'lucide-react';
 import { useState } from 'react';
-import {
-  SOUNDS,
-  linearToLogVolume,
-  playAudioWithGain,
-} from '../../utils/playSound';
+import { SOUNDS, linearToLogVolume, playAudioWithGain } from '../../utils/playSound';
 import type { Settings } from '../../types/settings';
 import AudioVisualizerButton from './AudioVisualizerButton';
 import Button from '../common/Button';
+import Toggle from './Toggle';
+import { S } from './settingsTokens';
 
 interface SoundSettingsProps {
   settings: Settings | null;
@@ -52,18 +50,24 @@ const soundConfigs = [
   },
 ];
 
-export default function SoundSettings({
-  settings,
-  onChange,
-}: SoundSettingsProps) {
+const getColorClasses = (color: string) => {
+  switch (color) {
+    case 'blue':   return { bg: 'bg-blue-500/20',   text: 'text-blue-400',   hover: 'hover:bg-blue-500/30'   };
+    case 'green':  return { bg: 'bg-green-500/20',  text: 'text-green-400',  hover: 'hover:bg-green-500/30'  };
+    case 'purple': return { bg: 'bg-purple-500/20', text: 'text-purple-400', hover: 'hover:bg-purple-500/30' };
+    case 'cyan':   return { bg: 'bg-cyan-500/20',   text: 'text-cyan-400',   hover: 'hover:bg-cyan-500/30'   };
+    case 'orange': return { bg: 'bg-orange-500/20', text: 'text-orange-400', hover: 'hover:bg-orange-500/30' };
+    default:       return { bg: 'bg-zinc-500/20',   text: 'text-zinc-400',   hover: 'hover:bg-zinc-500/30'   };
+  }
+};
+
+export default function SoundSettings({ settings, onChange }: SoundSettingsProps) {
   const [isExpanded, setIsExpanded] = useState(false);
-  const [playingKey, setPlayingKey] = useState<keyof Settings['sounds'] | null>(
-    null
-  );
+  const [playingKey, setPlayingKey] = useState<keyof Settings['sounds'] | null>(null);
 
   const handleToggle = (soundKey: keyof Settings['sounds']) => {
     if (!settings) return;
-    const updatedSettings = {
+    onChange({
       ...settings,
       sounds: {
         ...settings.sounds,
@@ -72,16 +76,12 @@ export default function SoundSettings({
           enabled: !settings.sounds[soundKey].enabled,
         },
       },
-    };
-    onChange(updatedSettings);
+    });
   };
 
-  const handleVolumeChange = (
-    soundKey: keyof Settings['sounds'],
-    volume: number
-  ) => {
+  const handleVolumeChange = (soundKey: keyof Settings['sounds'], volume: number) => {
     if (!settings) return;
-    const updatedSettings = {
+    onChange({
       ...settings,
       sounds: {
         ...settings.sounds,
@@ -90,34 +90,28 @@ export default function SoundSettings({
           volume,
         },
       },
-    };
-    onChange(updatedSettings);
+    });
   };
 
   const handlePlayTest = (soundKey: keyof Settings['sounds']) => {
     const soundSetting = settings?.sounds[soundKey];
     const config = soundConfigs.find((c) => c.key === soundKey);
     if (!soundSetting?.enabled || !config?.sound) return;
-
     try {
       setPlayingKey(soundKey);
       const audio = new Audio(config.sound);
       const logVolume = linearToLogVolume(soundSetting.volume);
-
       const onCanPlay = () => {
         audio.removeEventListener('canplaythrough', onCanPlay);
         audio.removeEventListener('error', onError);
-
         playAudioWithGain(audio, logVolume);
       };
-
       const onError = (error: Event) => {
         audio.removeEventListener('canplaythrough', onCanPlay);
         audio.removeEventListener('error', onError);
         console.warn('Failed to play test sound:', error);
         setPlayingKey(null);
       };
-
       audio.addEventListener('canplaythrough', onCanPlay);
       audio.addEventListener('error', onError);
       audio.onended = () => setPlayingKey(null);
@@ -130,183 +124,71 @@ export default function SoundSettings({
 
   if (!settings) return null;
 
-  const getColorClasses = (color: string) => {
-    switch (color) {
-      case 'blue':
-        return {
-          bg: 'bg-blue-500/20',
-          text: 'text-blue-400',
-          border: 'border-blue-500/30',
-          hover: 'hover:bg-blue-500/30',
-        };
-      case 'green':
-        return {
-          bg: 'bg-green-500/20',
-          text: 'text-green-400',
-          border: 'border-green-500/30',
-          hover: 'hover:bg-green-500/30',
-        };
-      case 'purple':
-        return {
-          bg: 'bg-purple-500/20',
-          text: 'text-purple-400',
-          border: 'border-purple-500/30',
-          hover: 'hover:bg-purple-500/30',
-        };
-      case 'cyan':
-        return {
-          bg: 'bg-cyan-500/20',
-          text: 'text-cyan-400',
-          border: 'border-cyan-500/30',
-          hover: 'hover:bg-cyan-500/30',
-        };
-      case 'orange':
-        return {
-          bg: 'bg-orange-500/20',
-          text: 'text-orange-400',
-          border: 'border-orange-500/30',
-          hover: 'hover:bg-orange-500/30',
-        };
-      default:
-        return {
-          bg: 'bg-zinc-500/20',
-          text: 'text-zinc-400',
-          border: 'border-zinc-500/30',
-          hover: 'hover:bg-zinc-500/30',
-        };
-    }
-  };
-
   return (
-    <div className="bg-zinc-900 border border-zinc-700/50 rounded-2xl overflow-hidden">
-      {/* Header */}
-      <div className="w-full p-4 sm:p-6 border-b border-zinc-700/50">
-        <div className="flex items-center justify-between gap-3">
-          <div
-            className="flex items-center flex-1 min-w-0 cursor-pointer"
-            onClick={() => setIsExpanded(!isExpanded)}
-          >
-            <div className="p-2 bg-orange-500/20 rounded-lg mr-3 sm:mr-4 flex-shrink-0">
-              <Volume2 className="h-5 w-5 sm:h-6 sm:w-6 text-orange-400" />
+    <div className={S.card}>
+      <div className={S.header}>
+        <div className={S.headerInner}>
+          <div className={S.headerClickable} onClick={() => setIsExpanded(!isExpanded)}>
+            <div className={`${S.iconBox} ${S.iconBoxMr} bg-orange-500/20`}>
+              <Volume2 className={`${S.icon} text-orange-400`} />
             </div>
             <div className="text-left min-w-0">
-              <h3 className="text-lg sm:text-xl font-semibold text-white">
-                Sound Settings
-              </h3>
-              <p className="text-zinc-400 text-xs sm:text-sm mt-1 hidden sm:block">
-                Configure audio notifications and their volume levels
-              </p>
+              <h3 className={S.title}>Sound Settings</h3>
+              <p className={S.subtitle}>Configure audio notifications and their volume levels</p>
             </div>
           </div>
-          <Button
-            onClick={() => setIsExpanded(!isExpanded)}
-            variant="outline"
-            size="sm"
-            className="border-zinc-600 text-zinc-300 hover:bg-zinc-800 p-2 flex-shrink-0"
-          >
-            {isExpanded ? (
-              <ChevronUp className="h-4 w-4" />
-            ) : (
-              <ChevronDown className="h-4 w-4" />
-            )}
+          <Button onClick={() => setIsExpanded(!isExpanded)} variant="outline" size="sm" className={S.chevronBtn}>
+            {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
           </Button>
         </div>
       </div>
 
-      {/* Content */}
-      <div
-        className={`transition-all duration-300 ease-in-out ${
-          isExpanded
-            ? 'max-h-[2000px] opacity-100'
-            : 'max-h-0 opacity-0 overflow-hidden'
-        }`}
-      >
-        <div className="p-4 sm:p-6">
+      <div className={`transition-all duration-300 ease-in-out ${isExpanded ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0 overflow-hidden'}`}>
+        <div className={S.content}>
           <div className="space-y-4">
             {soundConfigs.map(({ key, label, description, color }) => {
               const soundSetting = settings.sounds[key];
               const colors = getColorClasses(color);
-
               return (
-                <div
-                  key={key}
-                  className={`bg-zinc-800/30 border border-zinc-700/50 rounded-xl p-5 transition-all ${
-                    soundSetting.enabled
-                      ? `hover:${colors.border}`
-                      : 'opacity-75'
-                  }`}
-                >
+                <div key={key} className={`${S.section} transition-all ${soundSetting.enabled ? '' : 'opacity-75'}`}>
                   <div className="flex items-start justify-between mb-4">
-                    <div className="flex items-start flex-1">
-                      {/* Icon Toggle Button */}
-                      <button
-                        onClick={() => handleToggle(key)}
-                        className={`relative p-2 rounded-lg mr-4 mt-0.5 transition-all duration-200 cursor-pointer group ${
-                          soundSetting.enabled
-                            ? `${colors.bg} ${colors.hover}`
-                            : 'bg-zinc-700/30 hover:bg-zinc-600/30'
+                    <div className="flex items-start flex-1 gap-4">
+                      <div
+                        className={`${S.sectionIconBox} relative cursor-pointer transition-all duration-200 ${
+                          soundSetting.enabled ? `${colors.bg} ${colors.hover}` : 'bg-zinc-700/30 hover:bg-zinc-600/30'
                         }`}
+                        onClick={() => handleToggle(key)}
                       >
-                        {soundSetting.enabled ? (
-                          <Volume2
-                            className={`h-5 w-5 transition-colors ${colors.text}`}
-                          />
-                        ) : (
-                          <VolumeX className="h-5 w-5 text-zinc-500 group-hover:text-zinc-400 transition-colors" />
-                        )}
-
-                        {/* Toggle indicator */}
-                        <div
-                          className={`absolute -top-1 -right-1 w-3 h-3 rounded-full border-2 border-zinc-800 transition-all ${
-                            soundSetting.enabled
-                              ? 'bg-emerald-500'
-                              : 'bg-zinc-600'
-                          }`}
-                        />
-                      </button>
-
+                        {soundSetting.enabled
+                          ? <Volume2 className={`${S.sectionIcon} ${colors.text}`} />
+                          : <VolumeX className={`${S.sectionIcon} text-zinc-500`} />
+                        }
+                        <div className={`absolute -top-1 -right-1 w-3 h-3 rounded-full border-2 border-zinc-800 transition-all ${soundSetting.enabled ? 'bg-emerald-500' : 'bg-zinc-600'}`} />
+                      </div>
                       <div className="flex-1">
-                        <div className="flex items-center justify-between">
-                          <h4 className="text-white font-medium">{label}</h4>
-                        </div>
-                        <p className="text-zinc-400 text-sm">{description}</p>
+                        <h4 className={S.sectionTitle}>{label}</h4>
+                        <p className={S.sectionSubtitle}>{description}</p>
                       </div>
                     </div>
-
                     <div className="ml-4">
                       <AudioVisualizerButton
                         isPlaying={playingKey === key}
                         onClick={() => handlePlayTest(key)}
                         label="Test"
                         variant={
-                          key === 'startupSound'
-                            ? 'default'
-                            : key === 'chatNotificationSound'
-                              ? 'notification'
-                              : key === 'newStripSound'
-                                ? 'newstrip'
-                                : key === 'acarsBeep'
-                                  ? 'acars-beep'
-                                  : key === 'acarsChatPop'
-                                    ? 'acars-chat'
-                                    : 'custom'
+                          key === 'startupSound' ? 'default'
+                          : key === 'chatNotificationSound' ? 'notification'
+                          : key === 'newStripSound' ? 'newstrip'
+                          : key === 'acarsBeep' ? 'acars-beep'
+                          : key === 'acarsChatPop' ? 'acars-chat'
+                          : 'custom'
                         }
                       />
                     </div>
                   </div>
-
-                  {/* Volume Control */}
-                  <div
-                    className={`transition-all ${
-                      soundSetting.enabled
-                        ? 'opacity-100'
-                        : 'opacity-50 pointer-events-none'
-                    }`}
-                  >
+                  <div className={`transition-all ${soundSetting.enabled ? 'opacity-100' : 'opacity-50 pointer-events-none'}`}>
                     <div className="flex items-center space-x-4">
-                      <span className="text-xs text-zinc-500 w-16 text-center">
-                        10%
-                      </span>
+                      <span className="text-xs text-zinc-500 w-16 text-center">10%</span>
                       <div className="flex-1 relative flex items-center">
                         <input
                           type="range"
@@ -314,9 +196,7 @@ export default function SoundSettings({
                           max="200"
                           step="10"
                           value={soundSetting.volume}
-                          onChange={(e) =>
-                            handleVolumeChange(key, parseInt(e.target.value))
-                          }
+                          onChange={(e) => handleVolumeChange(key, parseInt(e.target.value))}
                           className="w-full h-2 bg-zinc-700 rounded-lg appearance-none cursor-pointer volume-slider"
                         />
                         <div
@@ -325,24 +205,13 @@ export default function SoundSettings({
                               ? 'bg-gradient-to-r from-green-500 to-yellow-500'
                               : 'bg-gradient-to-r from-yellow-500 to-red-500'
                           }`}
-                          style={{
-                            width: `${Math.min(
-                              ((soundSetting.volume - 10) / 190) * 100,
-                              100
-                            )}%`,
-                          }}
-                        ></div>
+                          style={{ width: `${Math.min(((soundSetting.volume - 10) / 190) * 100, 100)}%` }}
+                        />
                       </div>
-                      <span className="text-xs text-zinc-500 w-16 text-center">
-                        200%
-                      </span>
-                      <span
-                        className={`text-sm font-medium w-16 text-center px-2 py-1 rounded ${
-                          soundSetting.volume <= 100
-                            ? 'bg-green-500/20 text-green-400'
-                            : 'bg-red-500/20 text-red-400'
-                        }`}
-                      >
+                      <span className="text-xs text-zinc-500 w-16 text-center">200%</span>
+                      <span className={`text-sm font-medium w-16 text-center px-2 py-1 rounded ${
+                        soundSetting.volume <= 100 ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'
+                      }`}>
                         {soundSetting.volume}%
                       </span>
                     </div>
@@ -353,65 +222,6 @@ export default function SoundSettings({
           </div>
         </div>
       </div>
-
-      <style>{`
-                .volume-slider::-webkit-slider-thumb {
-                    appearance: none;
-                    height: 18px;
-                    width: 18px;
-                    border-radius: 50%;
-                    background: #ffffff;
-                    cursor: pointer;
-                    border: 2px solid #10b981;
-                    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-                    position: relative;
-                    z-index: 10;
-                }
-                .volume-slider::-moz-range-thumb {
-                    height: 18px;
-                    width: 18px;
-                    border-radius: 50%;
-                    background: #ffffff;
-                    cursor: pointer;
-                    border: 2px solid #10b981;
-                    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-                    position: relative;
-                    z-index: 10;
-                }
-                .volume-slider {
-                    background: transparent;
-                    position: relative;
-                    z-index: 5;
-                }
-                .opacity-slider::-webkit-slider-thumb {
-                    appearance: none;
-                    height: 18px;
-                    width: 18px;
-                    border-radius: 50%;
-                    background: #ffffff;
-                    cursor: pointer;
-                    border: 2px solid #a855f7;
-                    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-                    position: relative;
-                    z-index: 10;
-                }
-                .opacity-slider::-moz-range-thumb {
-                    height: 18px;
-                    width: 18px;
-                    border-radius: 50%;
-                    background: #ffffff;
-                    cursor: pointer;
-                    border: 2px solid #a855f7;
-                    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-                    position: relative;
-                    z-index: 10;
-                }
-                .opacity-slider {
-                    background: transparent;
-                    position: relative;
-                    z-index: 5;
-                }
-            `}</style>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/Settings/TableColumnSettings.tsx b/src/components/Settings/TableColumnSettings.tsx
index a96d143..94a73c0 100644
--- a/src/components/Settings/TableColumnSettings.tsx
+++ b/src/components/Settings/TableColumnSettings.tsx
@@ -1,18 +1,9 @@
 import { useState } from 'react';
-import {
-  ChevronDown,
-  ChevronUp,
-  RotateCcw,
-  Table,
-  PlaneLanding,
-  PlaneTakeoff,
-} from 'lucide-react';
-import type {
-  DepartureTableColumnSettings,
-  ArrivalsTableColumnSettings,
-} from '../../types/settings';
+import { ChevronDown, ChevronUp, RotateCcw, Table, PlaneLanding, PlaneTakeoff } from 'lucide-react';
+import type { DepartureTableColumnSettings, ArrivalsTableColumnSettings } from '../../types/settings';
 import Button from '../common/Button';
 import Checkbox from '../common/Checkbox';
+import { S } from './settingsTokens';
 
 interface TableColumnSettingsProps {
   departureColumns: DepartureTableColumnSettings;
@@ -70,131 +61,68 @@ export default function TableColumnSettings({
 }: TableColumnSettingsProps) {
   const [isExpanded, setIsExpanded] = useState(false);
 
-  const handleDepartureColumnChange = (
-    column: keyof DepartureTableColumnSettings,
-    value: boolean
-  ) => {
+  const handleDepartureColumnChange = (column: keyof DepartureTableColumnSettings, value: boolean) => {
     if (column === 'time') return;
-    onDepartureColumnsChange({
-      ...departureColumns,
-      [column]: value,
-    });
+    onDepartureColumnsChange({ ...departureColumns, [column]: value });
   };
 
-  const handleArrivalsColumnChange = (
-    column: keyof ArrivalsTableColumnSettings,
-    value: boolean
-  ) => {
+  const handleArrivalsColumnChange = (column: keyof ArrivalsTableColumnSettings, value: boolean) => {
     if (column === 'time') return;
-    onArrivalsColumnsChange({
-      ...arrivalsColumns,
-      [column]: value,
-    });
+    onArrivalsColumnsChange({ ...arrivalsColumns, [column]: value });
   };
 
   return (
-    <div className="bg-zinc-900 border border-zinc-700/50 rounded-2xl overflow-hidden">
-      {/* Header */}
-      <div className="w-full p-4 sm:p-6 border-b border-zinc-700/50">
-        <div className="flex items-center justify-between gap-3">
-          <div
-            className="flex items-center flex-1 min-w-0 cursor-pointer"
-            onClick={() => setIsExpanded(!isExpanded)}
-          >
-            <div className="p-2 bg-purple-500/20 rounded-lg mr-3 sm:mr-4 flex-shrink-0">
-              <Table className="h-5 w-5 sm:h-6 sm:w-6 text-purple-400" />
+    <div className={S.card}>
+      <div className={S.header}>
+        <div className={S.headerInner}>
+          <div className={S.headerClickable} onClick={() => setIsExpanded(!isExpanded)}>
+            <div className={`${S.iconBox} ${S.iconBoxMr} bg-purple-500/20`}>
+              <Table className={`${S.icon} text-purple-400`} />
             </div>
             <div className="text-left min-w-0">
-              <h3 className="text-lg sm:text-xl font-semibold text-white">
-                Table Columns
-              </h3>
-              <p className="text-zinc-400 text-xs sm:text-sm mt-1 hidden sm:block">
-                Configure which columns are visible in your flight tables
-              </p>
+              <h3 className={S.title}>Table Columns</h3>
+              <p className={S.subtitle}>Configure which columns are visible in your flight tables</p>
             </div>
           </div>
-          <div className="flex items-center gap-2 sm:gap-3 flex-shrink-0">
-            <Button
-              onClick={onReset}
-              variant="outline"
-              size="sm"
-              className="border-zinc-600 text-zinc-300 hover:bg-zinc-800 hidden sm:flex"
-            >
+          <div className="flex items-center gap-2 flex-shrink-0">
+            <Button onClick={onReset} variant="outline" size="sm" className="border-zinc-600 text-zinc-300 hover:bg-zinc-800 hidden sm:flex">
               <RotateCcw className="h-4 w-4 sm:mr-2" />
               <span className="hidden sm:inline">Reset</span>
             </Button>
-            <Button
-              onClick={onReset}
-              variant="outline"
-              size="sm"
-              className="border-zinc-600 text-zinc-300 hover:bg-zinc-800 sm:hidden p-2"
-            >
+            <Button onClick={onReset} variant="outline" size="sm" className="border-zinc-600 text-zinc-300 hover:bg-zinc-800 sm:hidden p-2">
               <RotateCcw className="h-4 w-4" />
             </Button>
-            <Button
-              onClick={() => setIsExpanded(!isExpanded)}
-              variant="outline"
-              size="sm"
-              className="border-zinc-600 text-zinc-300 hover:bg-zinc-800 p-2"
-            >
-              {isExpanded ? (
-                <ChevronUp className="h-4 w-4" />
-              ) : (
-                <ChevronDown className="h-4 w-4" />
-              )}
+            <Button onClick={() => setIsExpanded(!isExpanded)} variant="outline" size="sm" className={S.chevronBtn}>
+              {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
             </Button>
           </div>
         </div>
       </div>
 
-      {/* Content */}
-      <div
-        className={`transition-all duration-300 ease-in-out ${
-          isExpanded
-            ? 'max-h-[2000px] opacity-100'
-            : 'max-h-0 opacity-0 overflow-hidden'
-        }`}
-      >
-        <div className="p-4 sm:p-6">
+      <div className={`transition-all duration-300 ease-in-out ${isExpanded ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0 overflow-hidden'}`}>
+        <div className={S.content}>
           <div className="space-y-8">
+
+            {/* Departure Table */}
             <div>
               <div className="flex items-center mb-4">
-                <div className="p-1.5 bg-blue-500/20 rounded-lg mr-3">
+                <div className="p-2 bg-blue-500/20 rounded-lg mr-3 flex-shrink-0">
                   <PlaneTakeoff className="h-5 w-5 text-blue-400" />
                 </div>
-                <h4 className="text-lg font-medium text-white">
-                  Departure Table
-                </h4>
+                <h4 className="text-lg font-medium text-white">Departure Table</h4>
               </div>
               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
-                {/* Time column - always visible */}
                 <div className="bg-zinc-800/50 border border-zinc-700/50 rounded-lg p-3">
                   <div className="flex items-center justify-between">
-                    <span className="text-sm text-zinc-300 font-medium">
-                      Time
-                    </span>
-                    <span className="text-xs text-zinc-500 bg-zinc-700/50 px-2 py-1 rounded">
-                      Required
-                    </span>
+                    <span className="text-sm text-zinc-300 font-medium">Time</span>
+                    <span className="text-xs text-zinc-500 bg-zinc-700/50 px-2 py-1 rounded">Required</span>
                   </div>
                 </div>
                 {Object.entries(departureColumnLabels).map(([key, label]) => (
-                  <div
-                    key={key}
-                    className="bg-zinc-800/30 border border-zinc-700/50 rounded-lg p-3 hover:bg-zinc-800/50 transition-colors"
-                  >
+                  <div key={key} className="bg-zinc-800/30 border border-zinc-700/50 rounded-lg p-3 hover:bg-zinc-800/50 transition-colors">
                     <Checkbox
-                      checked={
-                        departureColumns[
-                          key as keyof DepartureTableColumnSettings
-                        ] as boolean
-                      }
-                      onChange={(checked) =>
-                        handleDepartureColumnChange(
-                          key as keyof DepartureTableColumnSettings,
-                          checked
-                        )
-                      }
+                      checked={departureColumns[key as keyof DepartureTableColumnSettings] as boolean}
+                      onChange={(checked) => handleDepartureColumnChange(key as keyof DepartureTableColumnSettings, checked)}
                       label={label}
                       className="text-sm text-zinc-300"
                     />
@@ -203,45 +131,26 @@ export default function TableColumnSettings({
               </div>
             </div>
 
-            {/* Arrivals Table Columns */}
+            {/* Arrivals Table */}
             <div>
               <div className="flex items-center mb-4">
-                <div className="p-1.5 bg-green-500/20 rounded-lg mr-3">
+                <div className="p-2 bg-green-500/20 rounded-lg mr-3 flex-shrink-0">
                   <PlaneLanding className="h-5 w-5 text-green-400" />
                 </div>
-                <h4 className="text-lg font-medium text-white">
-                  Arrivals Table
-                </h4>
+                <h4 className="text-lg font-medium text-white">Arrivals Table</h4>
               </div>
               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
-                {/* Time column - always visible */}
                 <div className="bg-zinc-800/50 border border-zinc-700/50 rounded-lg p-3">
                   <div className="flex items-center justify-between">
-                    <span className="text-sm text-zinc-300 font-medium">
-                      Time
-                    </span>
-                    <span className="text-xs text-zinc-500 bg-zinc-700/50 px-2 py-1 rounded">
-                      Required
-                    </span>
+                    <span className="text-sm text-zinc-300 font-medium">Time</span>
+                    <span className="text-xs text-zinc-500 bg-zinc-700/50 px-2 py-1 rounded">Required</span>
                   </div>
                 </div>
                 {Object.entries(arrivalsColumnLabels).map(([key, label]) => (
-                  <div
-                    key={key}
-                    className="bg-zinc-800/30 border border-zinc-700/50 rounded-lg p-3 hover:bg-zinc-800/50 transition-colors"
-                  >
+                  <div key={key} className="bg-zinc-800/30 border border-zinc-700/50 rounded-lg p-3 hover:bg-zinc-800/50 transition-colors">
                     <Checkbox
-                      checked={
-                        arrivalsColumns[
-                          key as keyof ArrivalsTableColumnSettings
-                        ] as boolean
-                      }
-                      onChange={(checked) =>
-                        handleArrivalsColumnChange(
-                          key as keyof ArrivalsTableColumnSettings,
-                          checked
-                        )
-                      }
+                      checked={arrivalsColumns[key as keyof ArrivalsTableColumnSettings] as boolean}
+                      onChange={(checked) => handleArrivalsColumnChange(key as keyof ArrivalsTableColumnSettings, checked)}
                       label={label}
                       className="text-sm text-zinc-300"
                     />
@@ -254,4 +163,4 @@ export default function TableColumnSettings({
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/Settings/Toggle.tsx b/src/components/Settings/Toggle.tsx
new file mode 100644
index 0000000..0b49e48
--- /dev/null
+++ b/src/components/Settings/Toggle.tsx
@@ -0,0 +1,24 @@
+interface ToggleProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  activeColor?: string;
+}
+
+export default function Toggle({ checked, onChange, activeColor = 'bg-green-600' }: ToggleProps) {
+  return (
+    <button
+      role="switch"
+      aria-checked={checked}
+      onClick={() => onChange(!checked)}
+      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0 ${
+        checked ? activeColor : 'bg-zinc-700'
+      }`}
+    >
+      <span
+        className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+          checked ? 'translate-x-6' : 'translate-x-1'
+        }`}
+      />
+    </button>
+  );
+}
\ No newline at end of file
diff --git a/src/components/Settings/settingsTokens.ts b/src/components/Settings/settingsTokens.ts
new file mode 100644
index 0000000..ad632ec
--- /dev/null
+++ b/src/components/Settings/settingsTokens.ts
@@ -0,0 +1,21 @@
+export const S = {
+  card: 'bg-zinc-900 border border-zinc-700/50 rounded-2xl overflow-hidden',
+  header: 'w-full p-4 sm:p-6 border-b border-zinc-700/50',
+  headerInner: 'flex items-center justify-between gap-3',
+  headerClickable: 'flex items-center flex-1 min-w-0 cursor-pointer',
+  iconBox: 'p-2 rounded-lg flex-shrink-0',
+  iconBoxMr: 'mr-3 sm:mr-4',
+  icon: 'h-5 w-5 sm:h-6 sm:w-6',
+  title: 'text-lg sm:text-xl font-semibold text-white',
+  subtitle: 'text-zinc-400 text-xs sm:text-sm mt-1 hidden sm:block',
+  content: 'p-4 sm:p-6',
+  section: 'bg-zinc-800/30 border border-zinc-700/50 rounded-xl p-5',
+  sectionHeader: 'flex items-start mb-4',
+  sectionIconBox: 'p-2 rounded-lg mr-4 mt-0.5 flex-shrink-0',
+  sectionIcon: 'h-5 w-5',
+  sectionTitle: 'text-white font-medium mb-1',
+  sectionSubtitle: 'text-zinc-400 text-sm',
+  toggleRow: 'flex items-center justify-between p-4 bg-zinc-900/50 rounded-lg border border-zinc-700/30',
+  infoBanner: 'mt-6 p-4 border rounded-lg',
+  chevronBtn: 'border-zinc-600 text-zinc-300 hover:bg-zinc-800 p-2 flex-shrink-0',
+} as const;
\ No newline at end of file