diff --git a/package-lock.json b/package-lock.json
index 3cd154b5d..951250897 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,9 @@
         "packages/bruno-requests",
         "packages/bruno-filestore"
       ],
+      "dependencies": {
+        "ajv": "^8.17.1"
+      },
       "devDependencies": {
         "@eslint/compat": "^1.3.2",
         "@faker-js/faker": "^7.6.0",
@@ -1604,7 +1607,7 @@
       "version": "7.26.3",
       "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.26.3.tgz",
       "integrity": "sha512-G7ZRb40uUgdKOQqPLjfD12ZmGA54PzqDFUv2BKImnC9QIfGhIHKvVML0oN8IUiDq4iRqpq74ABpvOaerfWdong==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
@@ -1622,7 +1625,7 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.3.tgz",
       "integrity": "sha512-HK7Bi+Hj6H+VTHA3ZvBis7V/6hu9QuTrnMXNybfUf2iiuU/N97I8VjB+KbhFF8Rld/Lx5MzoCwPCpPjfK+n8Cg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.22.6",
@@ -1639,7 +1642,7 @@
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
       "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -1657,7 +1660,7 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@babel/helper-globals": {
@@ -1737,7 +1740,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.9.tgz",
       "integrity": "sha512-IZtukuUeBbhgOcaW2s06OXTzVNJR0ybm4W5xC1opWFFJMZbwRj5LCk+ByYH7WdZPZTt8KnFwA8pvjN2yqcPlgw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
@@ -1812,7 +1815,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.25.9.tgz",
       "integrity": "sha512-ETzz9UTjQSTmw39GboatdymDq4XIQbR8ySgVrylRhPOFpsd+JrKHIuF0de7GCWmem+T4uC5z7EZguod7Wj4A4g==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/template": "^7.25.9",
@@ -1855,7 +1858,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.9.tgz",
       "integrity": "sha512-ZkRyVkThtxQ/J6nv3JFYv1RYY+JT5BvU0y3k5bWrmuG4woXypRa4PXmm9RhOwodRkYFWqC0C0cqcJ4OqR7kW+g==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -1872,7 +1875,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.9.tgz",
       "integrity": "sha512-MrGRLZxLD/Zjj0gdU15dfs+HH/OXvnw/U4jJD8vpcP2CJQapPEv1IWwjc/qMg7ItBlPwSv1hRBbb7LeuANdcnw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1888,7 +1891,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.9.tgz",
       "integrity": "sha512-2qUwwfAFpJLZqxd02YW9btUCZHl+RFvdDkNfZwaIJrvB8Tesjsk8pEQkTvGwZXLqXUx/2oyY3ySRhm6HOXuCug==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1904,7 +1907,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.25.9.tgz",
       "integrity": "sha512-6xWgLZTJXwilVjlnV7ospI3xi+sl8lN8rXXbBD6vYn3UYDlGsag8wrZkKcSI8G6KgqKP7vNFaDgeDnfAABq61g==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -1922,7 +1925,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.9.tgz",
       "integrity": "sha512-aLnMXYPnzwwqhYSCyXfKkIkYgJ8zv9RK+roo9DkTXz38ynIhd9XCbN08s3MGvqL2MYGVUGdRQLL/JqBIeJhJBg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -1957,7 +1960,7 @@
       "version": "7.21.0-placeholder-for-preset-env.2",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
       "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -2056,7 +2059,7 @@
       "version": "7.26.0",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.26.0.tgz",
       "integrity": "sha512-QCWT5Hh830hK5EQa7XzuqIkQU9tT/whqbDz7kuaZMHFl1inRRg7JnuAEOQ0Ur0QUl0NufCk1msK2BeY79Aj/eg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -2072,7 +2075,7 @@
       "version": "7.26.0",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.26.0.tgz",
       "integrity": "sha512-e2dttdsJ1ZTpi3B9UYGLw41hifAubg19AtCu/2I/F1QNVclOBr1dYpTdmdyZ84Xiz43BS/tCUkMAZNLv12Pi+A==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -2254,7 +2257,7 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
       "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.18.6",
@@ -2271,7 +2274,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.25.9.tgz",
       "integrity": "sha512-6jmooXYIwn9ca5/RylZADJ+EnSxVUS5sjeJ9UPk6RWRzXCmOJCy6dqItPJFpw2cuCangPK4OYr5uhGKcmrm5Qg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -2287,7 +2290,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.9.tgz",
       "integrity": "sha512-RXV6QAzTBbhDMO9fWwOmwwTuYaiPbggWQ9INdZqAYeSHyG7FzQ+nOZaUUjNwKv9pV3aE4WFqFm1Hnbci5tBCAw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -2305,7 +2308,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.25.9.tgz",
       "integrity": "sha512-NT7Ejn7Z/LjUH0Gv5KsBCxh7BH3fbLTV0ptHvpeMvrt3cPThHfJfst9Wrb7S8EvJ7vRTFI7z+VAvFVEQn/m5zQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.25.9",
@@ -2323,7 +2326,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.25.9.tgz",
       "integrity": "sha512-toHc9fzab0ZfenFpsyYinOX0J/5dgJVA2fm64xPewu7CoYHWEivIWKxkK2rMi4r3yQqLnVmheMXRdG+k239CgA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -2339,7 +2342,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.9.tgz",
       "integrity": "sha512-1F05O7AYjymAtqbsFETboN1NvBdcnzMerO+zlMyJBEz6WkMdejvGWw9p05iTSjC85RLlBseHHQpYaM4gzJkBGg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -2371,7 +2374,7 @@
       "version": "7.26.0",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.26.0.tgz",
       "integrity": "sha512-6J2APTs7BDDm+UMqP1useWqhcRAXo0WIoVj26N7kPFB6S73Lgvyka4KTZYIxtgYXiN5HTyRObA72N2iu628iTQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-class-features-plugin": "^7.25.9",
@@ -2388,7 +2391,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.9.tgz",
       "integrity": "sha512-mD8APIXmseE7oZvZgGABDyM34GUmK45Um2TXiBUt7PnuAxrgoSVf123qUzPxEr/+/BHrRn5NMZCdE2m/1F8DGg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
@@ -2409,7 +2412,7 @@
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -2419,7 +2422,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.25.9.tgz",
       "integrity": "sha512-HnBegGqXZR12xbcTHlJ9HGxw1OniltT26J5YpfruGqtUHlz/xKf/G2ak9e+t0rVqrjXa9WOhvYPz1ERfMj23AA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -2436,7 +2439,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.25.9.tgz",
       "integrity": "sha512-WkCGb/3ZxXepmMiX101nnGiU+1CAdut8oHyEOHxkKuS1qKpU2SMXE2uSvfz8PBuLd49V6LEsbtyPhWC7fnkgvQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -2452,7 +2455,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.25.9.tgz",
       "integrity": "sha512-t7ZQ7g5trIgSRYhI9pIJtRl64KHotutUJsh4Eze5l7olJv+mRSg4/MmbZ0tv1eeqRbdvo/+trvJD/Oc5DmW2cA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.25.9",
@@ -2469,7 +2472,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.25.9.tgz",
       "integrity": "sha512-LZxhJ6dvBb/f3x8xwWIuyiAHy56nrRG3PeYTpBkkzkYRRQ6tJLu68lEF5VIqMUZiAV7a8+Tb78nEoMCMcqjXBw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -2485,7 +2488,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.9.tgz",
       "integrity": "sha512-0UfuJS0EsXbRvKnwcLjFtJy/Sxc5J5jhLHnFhy7u4zih97Hz6tJkLU+O+FMMrNZrosUPxDi6sYxJ/EA8jDiAog==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.25.9",
@@ -2502,7 +2505,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.25.9.tgz",
       "integrity": "sha512-GCggjexbmSLaFhqsojeugBpeaRIgWNTcgKVq/0qIteFEqY2A+b9QidYadrWlnbWQUrW5fn+mCvf3tr7OeBFTyg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -2518,7 +2521,7 @@
       "version": "7.26.3",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.26.3.tgz",
       "integrity": "sha512-7CAHcQ58z2chuXPWblnn1K6rLDnDWieghSOEmqQsrBenH0P9InCUtOJYD89pvngljmZlJcz3fcmgYsXFNGa1ZQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -2534,7 +2537,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.25.9.tgz",
       "integrity": "sha512-2NsEz+CxzJIVOPx2o9UsW1rXLqtChtLoVnwYHHiB04wS5sgn7mrV45fWMBX0Kk+ub9uXytVYfNP2HjbVbCB3Ww==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -2566,7 +2569,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.25.9.tgz",
       "integrity": "sha512-LqHxduHoaGELJl2uhImHwRQudhCM50pT46rIBNvtT/Oql3nqiS3wOwP+5ten7NpYSXrrVLgtZU3DZmPtWZo16A==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -2583,7 +2586,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.9.tgz",
       "integrity": "sha512-8lP+Yxjv14Vc5MuWBpJsoUCd3hD6V9DgBon2FVYL4jJgbnVQ9fTgYmonchzZJOVNgzEgbxp4OwAf6xz6M/14XA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.25.9",
@@ -2601,7 +2604,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.25.9.tgz",
       "integrity": "sha512-xoTMk0WXceiiIvsaquQQUaLLXSW1KJ159KP87VilruQm0LNNGxWzahxSS6T6i4Zg3ezp4vA4zuwiNUR53qmQAw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -2617,7 +2620,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.9.tgz",
       "integrity": "sha512-9N7+2lFziW8W9pBl2TzaNht3+pgMIRP74zizeCSrtnSKVdUl8mAjjOP2OOVQAfZ881P2cNjDj1uAMEdeD50nuQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -2633,7 +2636,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.25.9.tgz",
       "integrity": "sha512-wI4wRAzGko551Y8eVf6iOY9EouIDTtPb0ByZx+ktDGHwv6bHFimrgJM/2T021txPZ2s4c7bqvHbd+vXG6K948Q==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -2649,7 +2652,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.25.9.tgz",
       "integrity": "sha512-PYazBVfofCQkkMzh2P6IdIUaCEWni3iYEerAsRWuVd8+jlM1S9S9cz1dF9hIzyoZ8IA3+OwVYIp9v9e+GbgZhA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -2665,7 +2668,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.25.9.tgz",
       "integrity": "sha512-g5T11tnI36jVClQlMlt4qKDLlWnG5pP9CSM4GhdRciTNMRgkfpo5cR6b4rGIOYPgRRuFAvwjPQ/Yk+ql4dyhbw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-transforms": "^7.25.9",
@@ -2698,7 +2701,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.9.tgz",
       "integrity": "sha512-hyss7iIlH/zLHaehT+xwiymtPOpsiwIIRlCAOwBB04ta5Tt+lNItADdlXw3jAWZ96VJ2jlhl/c+PNIQPKNfvcA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-transforms": "^7.25.9",
@@ -2717,7 +2720,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.25.9.tgz",
       "integrity": "sha512-bS9MVObUgE7ww36HEfwe6g9WakQ0KF07mQF74uuXdkoziUPfKyu/nIm663kz//e5O1nPInPFx36z7WJmJ4yNEw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-transforms": "^7.25.9",
@@ -2734,7 +2737,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.25.9.tgz",
       "integrity": "sha512-oqB6WHdKTGl3q/ItQhpLSnWWOpjUJLsOCLVyeFgeTktkBSCiurvPOsyt93gibI9CmuKvTUEtWmG5VhZD+5T/KA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.25.9",
@@ -2751,7 +2754,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.25.9.tgz",
       "integrity": "sha512-U/3p8X1yCSoKyUj2eOBIx3FOn6pElFOKvAAGf8HTtItuPyB+ZeOqfn+mvTtg9ZlOAjsPdK3ayQEjqHjU/yLeVQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -2782,7 +2785,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.25.9.tgz",
       "integrity": "sha512-TlprrJ1GBZ3r6s96Yq8gEQv82s8/5HnCVHtEJScUj90thHQbwe+E5MLhi2bbNHBEJuzrvltXSru+BUxHDoog7Q==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -2798,7 +2801,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.25.9.tgz",
       "integrity": "sha512-fSaXafEE9CVHPweLYw4J0emp1t8zYTXyzN3UuG+lylqkvYd7RMrsOQ8TYx5RF231be0vqtFC6jnx3UmpJmKBYg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.25.9",
@@ -2816,7 +2819,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.25.9.tgz",
       "integrity": "sha512-Kj/Gh+Rw2RNLbCK1VAWj2U48yxxqL2x0k10nPtSdRa0O2xnHXalD0s+o1A6a0W43gJ00ANo38jxkQreckOzv5A==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -2833,7 +2836,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.25.9.tgz",
       "integrity": "sha512-qM/6m6hQZzDcZF3onzIhZeDHDO43bkNNlOX0i8n3lR6zLbu0GN2d8qfM/IERJZYauhAHSLHy39NF0Ctdvcid7g==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -2865,7 +2868,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.25.9.tgz",
       "integrity": "sha512-wzz6MKwpnshBAiRmn4jR8LYz/g8Ksg0o80XmwZDlordjwEk9SxBzTWC7F5ef1jhbrbOW2DJ5J6ayRukrJmnr0g==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -2897,7 +2900,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.25.9.tgz",
       "integrity": "sha512-Evf3kcMqzXA3xfYJmZ9Pg1OvKdtqsDMSWBDzZOPLvHiTt36E75jLDQo5w1gtRU95Q4E5PDttrTf25Fw8d/uWLw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
@@ -2915,7 +2918,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.25.9.tgz",
       "integrity": "sha512-IvIUeV5KrS/VPavfSM/Iu+RE6llrHrYIKY1yfCzyO/lMXHQ+p7uGhonmGVisv6tSBSVgWzMBohTcvkC9vQcQFA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -3000,7 +3003,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.25.9.tgz",
       "integrity": "sha512-vwDcDNsgMPDGP0nMqzahDWE5/MLcX8sv96+wfX7as7LoF/kr97Bo/7fI00lXY4wUXYfVmwIIyG80fGZ1uvt2qg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -3017,7 +3020,7 @@
       "version": "7.26.0",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.26.0.tgz",
       "integrity": "sha512-vN6saax7lrA2yA/Pak3sCxuD6F5InBjn9IcrIKQPjpsLvuHYLVroTxjdlVRHjjBWxKOqIwpTXDkOssYT4BFdRw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.25.9",
@@ -3034,7 +3037,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.25.9.tgz",
       "integrity": "sha512-7DL7DKYjn5Su++4RXu8puKZm2XBPHyjWLUidaPEkCUBbE7IPcsrkRHggAOOKydH1dASWdcUBxrkOGNxUv5P3Jg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -3050,7 +3053,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.25.9.tgz",
       "integrity": "sha512-MUv6t0FhO5qHnS/W8XCbHmiRWOphNufpE1IVxhK5kuN3Td9FT1x4rx4K42s3RYdMXCXpfWkGSbCSd0Z64xA7Ng==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -3066,7 +3069,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.25.9.tgz",
       "integrity": "sha512-oNknIB0TbURU5pqJFVbOOFspVlrpVwo2H1+HUIsVDvp5VauGGDP1ZEvO8Nn5xyMEs3dakajOxlmkNW7kNgSm6A==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -3083,7 +3086,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.25.9.tgz",
       "integrity": "sha512-WqBUSgeVwucYDP9U/xNRQam7xV8W5Zf+6Eo7T2SRVUFlhRiMNFdFz58u0KZmCVVqs2i7SHgpRnAhzRNmKfi2uA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -3099,7 +3102,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.25.9.tgz",
       "integrity": "sha512-o97AE4syN71M/lxrCtQByzphAdlYluKPDBzDVzMmfCobUjjhAryZV0AIpRPrxN0eAkxXO6ZLEScmt+PNhj2OTw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -3115,7 +3118,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.25.9.tgz",
       "integrity": "sha512-v61XqUMiueJROUv66BVIOi0Fv/CUuZuZMl5NkRoCVxLAnMexZ0A3kMe7vvZ0nulxMuMp0Mk6S5hNh48yki08ZA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -3150,7 +3153,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.25.9.tgz",
       "integrity": "sha512-s5EDrE6bW97LtxOcGj1Khcx5AaXwiMmi4toFWRDP9/y0Woo6pXC+iyPu/KuhKtfSrNFd7jJB+/fkOtZy6aIC6Q==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -3166,7 +3169,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.25.9.tgz",
       "integrity": "sha512-Jt2d8Ga+QwRluxRQ307Vlxa6dMrYEMZCgGxoPR8V52rxPyldHu3hdlHspxaqYmE7oID5+kB+UKUB/eWS+DkkWg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.25.9",
@@ -3183,7 +3186,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.25.9.tgz",
       "integrity": "sha512-yoxstj7Rg9dlNn9UQxzk4fcNivwv4nUYz7fYXBaKxvw/lnmPuOm/ikoELygbYq68Bls3D/D+NBPHiLwZdZZ4HA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.25.9",
@@ -3200,7 +3203,7 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.9.tgz",
       "integrity": "sha512-8BYqO3GeVNHtx69fdPshN3fnzUNLrWdHhk/icSwigksJGczKSizZ+Z6SBCxTs723Fr5VSNorTIK7a+R2tISvwQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.25.9",
@@ -3217,7 +3220,7 @@
       "version": "7.26.0",
       "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.26.0.tgz",
       "integrity": "sha512-H84Fxq0CQJNdPFT2DrfnylZ3cf5K43rGfWK4LJGPpjKHiZlk0/RzwEus3PDDZZg+/Er7lCA03MVacueUuXdzfw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/compat-data": "^7.26.0",
@@ -3318,7 +3321,7 @@
       "version": "0.1.6-no-external-plugins",
       "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
       "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.0.0",
@@ -9547,6 +9550,7 @@
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
       "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
@@ -9566,6 +9570,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -9578,6 +9583,7 @@
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1",
@@ -9592,6 +9598,7 @@
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@testing-library/jest-dom": {
@@ -9702,6 +9709,7 @@
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/babel__core": {
@@ -9994,6 +10002,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
       "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/lodash": {
@@ -10016,6 +10025,7 @@
       "version": "12.2.3",
       "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-12.2.3.tgz",
       "integrity": "sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/linkify-it": "*",
@@ -10026,6 +10036,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
       "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/ms": {
@@ -11400,6 +11411,7 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
       "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "dequal": "^2.0.3"
@@ -11844,7 +11856,7 @@
       "version": "0.4.12",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.12.tgz",
       "integrity": "sha512-CPWT6BwvhrTO2d8QVorhTCQw9Y43zOu7G9HigcfxvepOU6b8o3tcWad6oVgZIsZCTt42FFv97aA7ZJsbM4+8og==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/compat-data": "^7.22.6",
@@ -11859,7 +11871,7 @@
       "version": "0.10.6",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz",
       "integrity": "sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-define-polyfill-provider": "^0.6.2",
@@ -11873,7 +11885,7 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.3.tgz",
       "integrity": "sha512-LiWSbl4CRSIa5x/JAU6jZiG9eit9w6mz+yVMFwDE83LAWvt0AfGBoZ7HS/mkhrKuh2ZlzfVZYKoLjXdqw6Yt7Q==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-define-polyfill-provider": "^0.6.3"
@@ -13763,7 +13775,7 @@
       "version": "3.39.0",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.39.0.tgz",
       "integrity": "sha512-VgEUx3VwlExr5no0tXlBt+silBvhTryPwCXRI2Id1PN8WTKu7MreethvddqOubrYxkFdv/RnYrqlv1sFNAUelw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "browserslist": "^4.24.2"
@@ -14912,6 +14924,7 @@
       "version": "0.5.16",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/dom-converter": {
@@ -15984,7 +15997,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "devOptional": true,
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -18860,7 +18873,7 @@
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
       "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "hasown": "^2.0.2"
@@ -20870,6 +20883,15 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jsonschema": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/jsonschema/-/jsonschema-1.5.0.tgz",
+      "integrity": "sha512-K+A9hhqbn0f3pJX17Q/7H6yQfD/5OXgdrR5UE12gMXCiN9D5Xq2o5mddV2QEcX/bjla99ASsAAQUyMCCRWAEhw==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/jsprim": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-2.0.2.tgz",
@@ -21317,6 +21339,7 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
       "license": "MIT",
       "bin": {
         "lz-string": "bin/bin.js"
@@ -22931,7 +22954,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/path-scurry": {
@@ -25458,14 +25481,14 @@
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
       "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/regenerate-unicode-properties": {
       "version": "10.2.0",
       "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz",
       "integrity": "sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "regenerate": "^1.4.2"
@@ -25484,7 +25507,7 @@
       "version": "0.15.2",
       "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz",
       "integrity": "sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.8.4"
@@ -25494,7 +25517,7 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.2.0.tgz",
       "integrity": "sha512-H66BPQMrv+V16t8xtmq+UC0CBpiTBA60V8ibS1QVReIp8T1z8hwFxqcGzm9K6lgsN7sB5edVH8a+ze6Fqm4weA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "regenerate": "^1.4.2",
@@ -25512,14 +25535,14 @@
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.8.0.tgz",
       "integrity": "sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/regjsparser": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.12.0.tgz",
       "integrity": "sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "jsesc": "~3.0.2"
@@ -25532,7 +25555,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
       "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "bin": {
         "jsesc": "bin/jsesc"
@@ -25728,7 +25751,7 @@
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
       "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.16.0",
@@ -28046,7 +28069,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -29233,7 +29256,7 @@
       "version": "4.9.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
       "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -29294,7 +29317,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",
       "integrity": "sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -29304,7 +29327,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
       "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "unicode-canonical-property-names-ecmascript": "^2.0.0",
@@ -29318,7 +29341,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.0.tgz",
       "integrity": "sha512-4IehN3V/+kkr5YeSSDDQG8QLqO26XpL2XP3GQtqwlT/QYSECAwFztxVHjlbh0+gjJ3XmNLS0zDsbgs9jWKExLg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -29328,7 +29351,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
       "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -30437,6 +30460,7 @@
         "json5": "^2.2.3",
         "jsonc-parser": "^3.2.1",
         "jsonpath-plus": "^10.3.0",
+        "jsonschema": "^1.5.0",
         "know-your-http-well": "^0.5.0",
         "linkify-it": "^5.0.0",
         "lodash": "^4.17.21",
diff --git a/package.json b/package.json
index ac3e63679..fea21dd64 100644
--- a/package.json
+++ b/package.json
@@ -20,17 +20,16 @@
   ],
   "homepage": "https://usebruno.com",
   "devDependencies": {
-    "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
-    "@storybook/builder-webpack5": "^10.1.10",
-    "@storybook/react": "^10.1.10",
-    "@storybook/react-webpack5": "^10.1.10",
-    "storybook": "^10.1.10",
     "@eslint/compat": "^1.3.2",
     "@faker-js/faker": "^7.6.0",
     "@jest/globals": "^29.2.0",
     "@opencollection/types": "0.3.0",
     "@playwright/test": "^1.51.1",
     "@rollup/plugin-json": "^6.1.0",
+    "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
+    "@storybook/builder-webpack5": "^10.1.10",
+    "@storybook/react": "^10.1.10",
+    "@storybook/react-webpack5": "^10.1.10",
     "@stylistic/eslint-plugin": "^5.3.1",
     "@types/jest": "^29.5.11",
     "@types/lodash-es": "^4.17.12",
@@ -49,6 +48,7 @@
     "pretty-quick": "^3.1.3",
     "randomstring": "^1.2.2",
     "rimraf": "^6.0.1",
+    "storybook": "^10.1.10",
     "ts-jest": "^29.2.6"
   },
   "scripts": {
@@ -62,6 +62,7 @@
     "prettier:web": "npm run prettier --workspace=packages/bruno-app",
     "dev:electron": "npm run dev --workspace=packages/bruno-electron",
     "dev:electron:debug": "npm run debug --workspace=packages/bruno-electron",
+    "storybook": "npm run storybook --workspace=packages/bruno-app",
     "build:bruno-common": "npm run build --workspace=packages/bruno-common",
     "build:bruno-requests": "npm run build --workspace=packages/bruno-requests",
     "build:bruno-filestore": "npm run build --workspace=packages/bruno-filestore",
@@ -97,5 +98,8 @@
         "json-schema-typed": "8.0.1"
       }
     }
+  },
+  "dependencies": {
+    "ajv": "^8.17.1"
   }
 }
diff --git a/packages/bruno-app/package.json b/packages/bruno-app/package.json
index 68642bbc0..b866aa15c 100644
--- a/packages/bruno-app/package.json
+++ b/packages/bruno-app/package.json
@@ -52,6 +52,7 @@
     "json5": "^2.2.3",
     "jsonc-parser": "^3.2.1",
     "jsonpath-plus": "^10.3.0",
+    "jsonschema": "^1.5.0",
     "know-your-http-well": "^0.5.0",
     "linkify-it": "^5.0.0",
     "lodash": "^4.17.21",
diff --git a/packages/bruno-app/src/components/AppTitleBar/StyledWrapper.js b/packages/bruno-app/src/components/AppTitleBar/StyledWrapper.js
index c97cc72f3..028a116e3 100644
--- a/packages/bruno-app/src/components/AppTitleBar/StyledWrapper.js
+++ b/packages/bruno-app/src/components/AppTitleBar/StyledWrapper.js
@@ -246,12 +246,6 @@ const Wrapper = styled.div`
       color: white;
     }
   }
-
-  .dropdown-item-active {
-    font-weight: 400 !important;
-    background-color: ${(props) => props.theme.dropdown.selectedBg} !important;
-    color: ${(props) => props.theme.dropdown.selectedColor} !important;
-  }
 `;
 
 export default Wrapper;
diff --git a/packages/bruno-app/src/components/BodyModeSelector/StyledWrapper.js b/packages/bruno-app/src/components/BodyModeSelector/StyledWrapper.js
index e810ef66d..202148456 100644
--- a/packages/bruno-app/src/components/BodyModeSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/BodyModeSelector/StyledWrapper.js
@@ -19,7 +19,7 @@ const StyledWrapper = styled.div`
     }
 
     .selected-body-mode {
-      color: ${(props) => props.theme.colors.text.yellow};
+      color: ${(props) => props.theme.brand};
     }
 
     .dropdown-icon {
diff --git a/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/StyledWrapper.js
index e9a9cd06f..2837918ce 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Overview/RequestsNotLoaded/StyledWrapper.js
@@ -5,9 +5,9 @@ const StyledWrapper = styled.div`
     background-color: ${(props) => props.theme.requestTabPanel.card.bg};
 
     .title {
-      border-top: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border};
-      border-left: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border};
-      border-right: 1px solid ${(props) => props.theme.requestTabPanel.cardTable.border};
+      border-top: 1px solid ${(props) => props.theme.border.BORDER0};
+      border-left: 1px solid ${(props) => props.theme.border.BORDER0};
+      border-right: 1px solid ${(props) => props.theme.border.BORDER0};
 
       border-top-left-radius: 3px;
       border-top-right-radius: 3px;
@@ -15,8 +15,8 @@ const StyledWrapper = styled.div`
 
     .table {
       thead {
-        background-color: ${(props) => props.theme.requestTabPanel.cardTable.table.thead.bg};
-        color: ${(props) => props.theme.requestTabPanel.cardTable.table.thead.color};
+        color: ${(props) => props.theme.table.thead.color} !important;
+        background: ${(props) => props.theme.sidebar.bg};
       }
     }
   }
diff --git a/packages/bruno-app/src/components/CollectionSettings/Script/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Script/StyledWrapper.js
index 03aed74aa..e9f18b1b8 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Script/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Script/StyledWrapper.js
@@ -8,7 +8,7 @@ const StyledWrapper = styled.div`
   }
 
   div.title {
-    color: var(--color-tab-inactive);
+    color: ${(props) => props.theme.colors.text.subtext0};
   }
 `;
 
diff --git a/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
index e1dcbf99a..6b2787ebf 100644
--- a/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
@@ -7,7 +7,7 @@ const StyledWrapper = styled.div`
       border: none;
       border-bottom: solid 2px transparent;
       margin-right: ${(props) => props.theme.tabs.marginRight};
-      color: var(--color-tab-inactive);
+      color: ${(props) => props.theme.colors.text.subtext0};
       cursor: pointer;
 
       &:focus,
diff --git a/packages/bruno-app/src/components/CollectionSettings/Vars/StyledWrapper.js b/packages/bruno-app/src/components/CollectionSettings/Vars/StyledWrapper.js
index 26459a3c6..b70349101 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Vars/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Vars/StyledWrapper.js
@@ -4,7 +4,7 @@ const StyledWrapper = styled.div`
   max-width: 800px;
 
   div.title {
-    color: var(--color-tab-inactive);
+    color: ${(props) => props.theme.colors.text.subtext0};
   }
 `;
 
diff --git a/packages/bruno-app/src/components/Dropdown/StyledWrapper.js b/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
index 8eada99ab..2fb31284f 100644
--- a/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 const Wrapper = styled.div`
   min-width: 160px;
@@ -136,17 +137,21 @@ const Wrapper = styled.div`
 
     /* Active/selected state - applied to the currently selected item */
     &.dropdown-item-active {
-      color: ${({ theme }) => theme.colors.text.yellow};
-      background-color: ${({ theme }) => theme.dropdown.activeBg};
-      font-weight: 500;
+      color: ${({ theme }) => theme.dropdown.selectedColor} !important;
+      background-color: ${({ theme }) => rgba(theme.dropdown.selectedColor, 0.07)} !important;
       .dropdown-icon {
-        color: ${({ theme }) => theme.colors.text.yellow};
+        color: ${({ theme }) => theme.dropdown.selectedColor} !important;
+      }
+
+      &:hover {
+        color: ${({ theme }) => theme.dropdown.selectedColor} !important;
+        background-color: ${({ theme }) => rgba(theme.dropdown.selectedColor, 0.07)} !important;
       }
     }
 
     /* Combined state - when active item is also focused */
     &.dropdown-item-active.dropdown-item-focused {
-      background-color: ${({ theme }) => theme.dropdown.activeHoverBg};
+      background-color: ${({ theme }) => rgba(theme.dropdown.selectedColor, 0.07)} !important;
     }
 
     /* Focus visible for accessibility */
diff --git a/packages/bruno-app/src/components/EditableTable/StyledWrapper.js b/packages/bruno-app/src/components/EditableTable/StyledWrapper.js
index 1d3b7f4a7..98b307d97 100644
--- a/packages/bruno-app/src/components/EditableTable/StyledWrapper.js
+++ b/packages/bruno-app/src/components/EditableTable/StyledWrapper.js
@@ -9,7 +9,7 @@ const StyledWrapper = styled.div`
   .table-container {
     overflow-y: auto;
     border-radius: ${(props) => props.theme.border.radius.base};
-    border: ${(props) => props.theme.workspace.environments.indentBorder};
+    border: solid 1px ${(props) => props.theme.border.border0};
   }
 
   table {
@@ -31,8 +31,8 @@ const StyledWrapper = styled.div`
       padding: 5px 10px !important;
       border-top: none !important;
       border-left: none !important;
-      border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
-      border-right: ${(props) => props.theme.workspace.environments.indentBorder};
+      border-bottom: solid 1px ${(props) => props.theme.border.border0};
+      border-right: solid 1px ${(props) => props.theme.border.border0};
       vertical-align: middle;
 
       &:last-child {
@@ -58,8 +58,8 @@ const StyledWrapper = styled.div`
         padding: 1px 10px !important;
         border-top: none !important;
         border-left: none !important;
-        border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
-        border-right: ${(props) => props.theme.workspace.environments.indentBorder};
+        border-bottom: solid 1px ${(props) => props.theme.border.border0};
+        border-right: solid 1px ${(props) => props.theme.border.border0};
         vertical-align: middle;
 
         &:last-child {
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js
index e343e4b4c..0c74c6d9b 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/EnvironmentListContent/index.js
@@ -33,7 +33,7 @@ const EnvironmentListContent = ({
                 {environments.map((env) => (
                   <div
                     key={env.uid}
-                    className={`dropdown-item ${env.uid === activeEnvironmentUid ? 'active' : ''}`}
+                    className={`dropdown-item ${env.uid === activeEnvironmentUid ? 'dropdown-item-active' : ''}`}
                     onClick={() => onEnvironmentSelect(env)}
                     data-tooltip-content={env.name}
                     data-tooltip-hidden={env.name?.length < 90}
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
index d70c10b76..a82724469 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
@@ -65,35 +65,6 @@ const Wrapper = styled.div`
     overflow: hidden;
   }
 
-  .tippy-box .tippy-content {
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-
-    .dropdown-item {
-      display: flex;
-      align-items: center;
-      padding: 0.35rem 0.6rem;
-      cursor: pointer;
-      font-size: ${(props) => props.theme.font.size.base};
-      color: ${(props) => props.theme.dropdown.primaryText};
-
-      &:hover:not(:disabled) {
-        background-color: ${(props) => props.theme.dropdown.hoverBg};
-      }
-
-      &.active {
-        background-color: ${(props) => props.theme.dropdown.selectedBg};
-        color: ${(props) => props.theme.dropdown.selectedColor};
-      }
-
-      &.no-environment {
-        color: ${(props) => props.theme.dropdown.mutedText};
-      }
-    }
-  }
-
   .configure-button {
     position: absolute;
     bottom: 0;
@@ -109,7 +80,7 @@ const Wrapper = styled.div`
     }
 
     button {
-      color: ${(props) => props.theme.dropdown.primaryText};
+      color: ${(props) => props.theme.text};
       display: flex;
       align-items: center;
       justify-content: center;
@@ -119,7 +90,7 @@ const Wrapper = styled.div`
   }
 
   .tab-button {
-    color: var(--color-tab-inactive);
+    color: ${(props) => props.theme.colors.text.subtext0};
     font-size: ${(props) => props.theme.font.size.base};
 
     .tab-content-wrapper {
@@ -170,7 +141,7 @@ const Wrapper = styled.div`
     min-height: 12.5rem;
 
     h3 {
-      color: ${(props) => props.theme.dropdown.primaryText};
+      color: ${(props) => props.theme.text};
       font-size: 1rem;
       font-weight: 500;
       margin-bottom: 0.5rem;
@@ -178,7 +149,7 @@ const Wrapper = styled.div`
     }
 
     p {
-      color: ${(props) => props.theme.dropdown.primaryText};
+      color: ${(props) => props.theme.text};
       opacity: 0.75;
       font-size: ${(props) => props.theme.font.size.xs};
       line-height: 1.5;
@@ -194,9 +165,9 @@ const Wrapper = styled.div`
     }
 
     .space-y-2 > button {
-      border: 0.0625rem solid ${(props) => props.theme.dropdown.primaryText};
+      border: 0.0625rem solid ${(props) => props.theme.text};
       background: transparent;
-      color: ${(props) => props.theme.dropdown.primaryText};
+      color: ${(props) => props.theme.text};
       padding: 0.5rem 1rem;
       border-radius: 0.375rem;
       width: 100%;
@@ -224,7 +195,7 @@ const Wrapper = styled.div`
     align-items: center;
     justify-content: center;
     padding: 2rem 1rem;
-    color: ${(props) => props.theme.dropdown.primaryText};
+    color: ${(props) => props.theme.text};
     font-size: ${(props) => props.theme.font.size.base};
     line-height: 1.5;
     text-align: center;
@@ -232,7 +203,7 @@ const Wrapper = styled.div`
 
     svg {
       margin: 0 auto 1rem auto;
-      color: ${(props) => props.theme.dropdown.primaryText};
+      color: ${(props) => props.theme.text};
       opacity: 0.5;
     }
   }
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
index faf196a9d..b356ab017 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
@@ -9,7 +9,7 @@ const Wrapper = styled.div`
   .table-container {
     overflow-y: auto;
     border-radius: 8px;
-    border: ${(props) => props.theme.workspace.environments.indentBorder};
+    border: solid 1px ${(props) => props.theme.border.border0};
   }
 
   table {
@@ -46,8 +46,8 @@ const Wrapper = styled.div`
 
       td {
         padding: 5px 10px !important;
-        border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
-        border-right: ${(props) => props.theme.workspace.environments.indentBorder};
+        border-bottom: solid 1px ${(props) => props.theme.border.border0};
+        border-right: solid 1px ${(props) => props.theme.border.border0};
 
         &:last-child {
           border-right: none;
@@ -64,8 +64,8 @@ const Wrapper = styled.div`
         }
 
         td {
-          border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
-          border-right: ${(props) => props.theme.workspace.environments.indentBorder};
+          border-bottom: solid 1px ${(props) => props.theme.border.border0};
+          border-right: solid 1px ${(props) => props.theme.border.border0};
 
           &:last-child {
             border-right: none;
@@ -75,26 +75,6 @@ const Wrapper = styled.div`
     }
   }
 
-  .btn-add-param {
-    font-size: 12px;
-    color: ${(props) => props.theme.textLink};
-    font-weight: 500;
-    padding: 7px 14px;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    border-radius: 6px;
-    border: ${(props) => props.theme.sidebar.collection.item.indentBorder};
-    background: transparent;
-    transition: all 0.15s ease;
-
-    &:hover {
-      background: ${(props) => props.theme.listItem.hoverBg};
-      border-color: ${(props) => props.theme.textLink};
-    }
-  }
-
   .tooltip-mod {
     font-size: 11px !important;
     max-width: 200px !important;
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
index 0fa99802c..ad083f5b1 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 const StyledWrapper = styled.div`
   display: flex;
@@ -174,7 +175,7 @@ const StyledWrapper = styled.div`
     }
     
     &.active {
-      background: ${(props) => props.theme.workspace.environments.activeBg};
+      background: ${(props) => props.theme.background.surface0};
       color: ${(props) => props.theme.text};
     }
     
@@ -235,35 +236,34 @@ const StyledWrapper = styled.div`
         gap: 2px;
         margin-left: 4px;
       }
+    }
+
+    .inline-action-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 22px;
+      height: 22px;
+      padding: 0;
+      background: transparent;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.15s ease;
       
-      .inline-action-btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 22px;
-        height: 22px;
-        padding: 0;
-        background: transparent;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        transition: all 0.15s ease;
+      &.save {
+        color: ${(props) => props.theme.colors.text.green};
         
-        &.save {
-          color: ${(props) => props.theme.textLink};
-          
-          &:hover {
-            background: ${(props) => props.theme.listItem.hoverBg};
-          }
+        &:hover {
+          background: ${(props) => rgba(props.theme.colors.text.green, 0.1)};
         }
+      }
+      
+      &.cancel {
+        color: ${(props) => props.theme.colors.text.danger};
         
-        &.cancel {
-          color: ${(props) => props.theme.colors.text.muted};
-          
-          &:hover {
-            background: ${(props) => props.theme.listItem.hoverBg};
-            color: ${(props) => props.theme.text};
-          }
+        &:hover {
+          background: ${(props) => rgba(props.theme.colors.text.danger, 0.1)};
         }
       }
     }
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/StyledWrapper.js
index 4ddcc5586..2f0a9e1c8 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/StyledWrapper.js
@@ -11,7 +11,7 @@ const StyledWrapper = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    padding-top: 10%;
     flex: 1;
     color: ${(props) => props.theme.colors.text.muted};
 
@@ -32,22 +32,6 @@ const StyledWrapper = styled.div`
       gap: 8px;
     }
   }
-
-  .shared-button {
-    padding: 5px 10px;
-    font-size: 12px;
-    border-radius: 5px;
-    border: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder};
-    background: ${(props) => props.theme.sidebar.bg};
-    color: ${(props) => props.theme.text};
-    cursor: pointer;
-    transition: all 0.1s ease;
-
-    &:hover {
-      background: ${(props) => props.theme.listItem.hoverBg};
-      border-color: ${(props) => props.theme.textLink};
-    }
-  }
 `;
 
 export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
index 2d3492087..b04dd8405 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
@@ -5,18 +5,19 @@ import StyledWrapper from './StyledWrapper';
 import { IconFileAlert } from '@tabler/icons';
 import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
 import ExportEnvironmentModal from 'components/Environments/Common/ExportEnvironmentModal';
+import Button from 'ui/Button';
 
 const DefaultTab = ({ setTab }) => (
   <div className="empty-state">
     <IconFileAlert size={48} strokeWidth={1.5} />
     <div className="title">No Environments</div>
     <div className="actions">
-      <button className="shared-button" onClick={() => setTab('create')}>
+      <Button size="sm" color="secondary" onClick={() => setTab('create')}>
         Create Environment
-      </button>
-      <button className="shared-button" onClick={() => setTab('import')}>
+      </Button>
+      <Button size="sm" color="secondary" onClick={() => setTab('import')}>
         Import Environment
-      </button>
+      </Button>
     </div>
   </div>
 );
diff --git a/packages/bruno-app/src/components/FolderSettings/Script/StyledWrapper.js b/packages/bruno-app/src/components/FolderSettings/Script/StyledWrapper.js
index 66ba1ed3d..6016566bc 100644
--- a/packages/bruno-app/src/components/FolderSettings/Script/StyledWrapper.js
+++ b/packages/bruno-app/src/components/FolderSettings/Script/StyledWrapper.js
@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
   }
 
   div.title {
-    color: var(--color-tab-inactive);
+    color: ${(props) => props.theme.colors.text.subtext0};
   }
 `;
 
diff --git a/packages/bruno-app/src/components/FolderSettings/StyledWrapper.js b/packages/bruno-app/src/components/FolderSettings/StyledWrapper.js
index 1cde03f32..37256c6cc 100644
--- a/packages/bruno-app/src/components/FolderSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/FolderSettings/StyledWrapper.js
@@ -9,7 +9,7 @@ const StyledWrapper = styled.div`
       border: none;
       border-bottom: solid 2px transparent;
       margin-right: ${(props) => props.theme.tabs.marginRight};
-      color: var(--color-tab-inactive);
+      color: ${(props) => props.theme.colors.text.subtext0};
       cursor: pointer;
 
       &:focus,
diff --git a/packages/bruno-app/src/components/FolderSettings/Vars/StyledWrapper.js b/packages/bruno-app/src/components/FolderSettings/Vars/StyledWrapper.js
index 44b01b464..0c6bf2f28 100644
--- a/packages/bruno-app/src/components/FolderSettings/Vars/StyledWrapper.js
+++ b/packages/bruno-app/src/components/FolderSettings/Vars/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   div.title {
-    color: var(--color-tab-inactive);
+    color: ${(props) => props.theme.colors.text.subtext0};
   }
 `;
 
diff --git a/packages/bruno-app/src/components/ManageWorkspace/StyledWrapper.js b/packages/bruno-app/src/components/ManageWorkspace/StyledWrapper.js
index f9e80ca2e..8f9df247e 100644
--- a/packages/bruno-app/src/components/ManageWorkspace/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ManageWorkspace/StyledWrapper.js
@@ -100,15 +100,14 @@ const StyledWrapper = styled.div`
   .default-badge {
     padding: 1px 6px;
     border-radius: ${(props) => props.theme.border.radius.sm};
-    background: ${(props) => props.theme.sidebar.badge.bg};
-    color: ${(props) => props.theme.colors.text.muted};
+    background: ${(props) => props.theme.background.surface1};
+    color: ${(props) => props.theme.text};
     font-size: ${(props) => props.theme.font.size.xs};
-    font-weight: 500;
   }
 
   .workspace-path {
     font-size: ${(props) => props.theme.font.size.xs};
-    color: ${(props) => props.theme.colors.text.muted};
+    color: ${(props) => props.theme.text.muted};
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/packages/bruno-app/src/components/Modal/StyledWrapper.js b/packages/bruno-app/src/components/Modal/StyledWrapper.js
index 5e6d44f44..343a23993 100644
--- a/packages/bruno-app/src/components/Modal/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Modal/StyledWrapper.js
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 const Wrapper = styled.div`
   color: ${(props) => props.theme.text};
@@ -72,7 +73,6 @@ const Wrapper = styled.div`
     background-color: ${(props) => props.theme.modal.title.bg};
     font-size: ${(props) => props.theme.font.size.md};
     padding: 0.5rem 1rem;
-    font-weight: 500;
     border-top-left-radius: ${(props) => props.theme.border.radius.base};
     border-top-right-radius: ${(props) => props.theme.border.radius.base};
 
@@ -98,7 +98,7 @@ const Wrapper = styled.div`
 
       &:hover {
         opacity: 1;
-        background-color: ${(props) => props.theme.modal.closeButton.hoverBg};
+        background-color: ${(props) => rgba(props.theme.modal.title.color, 0.1)};
       }
     }
   }
diff --git a/packages/bruno-app/src/components/Preferences/Display/index.js b/packages/bruno-app/src/components/Preferences/Display/index.js
index 15a16882c..0c7280446 100644
--- a/packages/bruno-app/src/components/Preferences/Display/index.js
+++ b/packages/bruno-app/src/components/Preferences/Display/index.js
@@ -1,17 +1,9 @@
 import React from 'react';
 import Font from './Font/index';
-import Theme from './Theme/index';
 
 const Display = ({ close }) => {
   return (
     <div className="flex flex-col my-2 gap-10 w-full">
-      <div className="w-full flex flex-col gap-2">
-        <span>
-          Theme
-        </span>
-        <Theme close={close} />
-      </div>
-      <div className="h-[1px] bg-[#aaa5] w-full"></div>
       <div className="w-fit flex flex-col gap-2">
         <Font close={close} />
       </div>
diff --git a/packages/bruno-app/src/components/Preferences/Themes/StyledWrapper.js b/packages/bruno-app/src/components/Preferences/Themes/StyledWrapper.js
new file mode 100644
index 000000000..75f8e72b3
--- /dev/null
+++ b/packages/bruno-app/src/components/Preferences/Themes/StyledWrapper.js
@@ -0,0 +1,97 @@
+import styled from 'styled-components';
+import { rgba } from 'polished';
+
+const StyledWrapper = styled.div`
+  .theme-mode-selector {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 24px;
+  }
+
+  .theme-mode-option {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+  }
+
+  .theme-variant-section {
+    margin-top: 20px;
+  }
+
+  .theme-variant-label {
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.muted};
+    margin-bottom: 12px;
+    font-weight: 500;
+  }
+
+  .theme-variants {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+
+  .theme-variant-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 12px 16px;
+    border: 2px solid ${(props) => props.theme.input.border};
+    border-radius: ${(props) => props.theme.border.radius.md};
+    cursor: pointer;
+    transition: all 0.15s ease;
+    min-width: 120px;
+
+    &:hover {
+      border-color: ${(props) => props.theme.input.focusBorder};
+    }
+
+    &.selected {
+      border-color: ${(props) => props.theme.accents.primary};
+      background: ${(props) => rgba(props.theme.accents.primary, 0.07)};
+    }
+  }
+
+  .theme-preview {
+    width: 60px;
+    height: 40px;
+    border-radius: ${(props) => props.theme.border.radius.sm};
+    margin-bottom: 8px;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .theme-preview-sidebar {
+    width: 15px;
+    height: 100%;
+  }
+
+  .theme-preview-main {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 4px;
+    gap: 3px;
+  }
+
+  .theme-preview-line {
+    height: 4px;
+    border-radius: 2px;
+    width: 80%;
+  }
+
+  .theme-variant-name {
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.text};
+  }
+
+  .section-divider {
+    height: 1px;
+    background: ${(props) => props.theme.input.border};
+    margin: 24px 0;
+  }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/Preferences/Themes/index.js b/packages/bruno-app/src/components/Preferences/Themes/index.js
new file mode 100644
index 000000000..5d494ea70
--- /dev/null
+++ b/packages/bruno-app/src/components/Preferences/Themes/index.js
@@ -0,0 +1,130 @@
+import React from 'react';
+import { useTheme } from 'providers/Theme';
+import { getLightThemes, getDarkThemes } from 'themes/index';
+import StyledWrapper from './StyledWrapper';
+
+const ThemePreview = ({ themeId, isDark }) => {
+  const bgColor = isDark ? '#1e1e1e' : '#ffffff';
+  const sidebarColor = isDark ? '#252526' : '#f8f8f8';
+  const lineColor = isDark ? '#3d3d3d' : '#e5e5e5';
+
+  return (
+    <div className="theme-preview" style={{ background: bgColor, border: `1px solid ${lineColor}` }}>
+      <div className="theme-preview-sidebar" style={{ background: sidebarColor }} />
+      <div className="theme-preview-main">
+        <div className="theme-preview-line" style={{ background: lineColor }} />
+        <div className="theme-preview-line" style={{ background: lineColor, width: '60%' }} />
+        <div className="theme-preview-line" style={{ background: lineColor, width: '70%' }} />
+      </div>
+    </div>
+  );
+};
+
+const ThemeVariantCard = ({ theme, isSelected, onClick }) => {
+  const isDark = theme.mode === 'dark';
+
+  return (
+    <div className={`theme-variant-card ${isSelected ? 'selected' : ''}`} onClick={onClick}>
+      <ThemePreview themeId={theme.id} isDark={isDark} />
+      <span className="theme-variant-name">{theme.name}</span>
+    </div>
+  );
+};
+
+const Themes = () => {
+  const {
+    storedTheme,
+    setStoredTheme,
+    themeVariantLight,
+    setThemeVariantLight,
+    themeVariantDark,
+    setThemeVariantDark
+  } = useTheme();
+
+  const lightThemes = getLightThemes();
+  const darkThemes = getDarkThemes();
+
+  const handleModeChange = (mode) => {
+    setStoredTheme(mode);
+  };
+
+  const renderThemeVariants = (themes, selectedVariant, onSelect, label) => (
+    <div className="theme-variant-section">
+      <div className="theme-variant-label">{label}</div>
+      <div className="theme-variants">
+        {themes.map((theme) => (
+          <ThemeVariantCard
+            key={theme.id}
+            theme={theme}
+            isSelected={selectedVariant === theme.id}
+            onClick={() => onSelect(theme.id)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+
+  return (
+    <StyledWrapper>
+      <div className="flex flex-col gap-4 w-full">
+        <div>
+          <div className="section-header">Appearance</div>
+          <div className="theme-mode-selector">
+            <label className="theme-mode-option">
+              <input
+                type="radio"
+                name="theme-mode"
+                value="light"
+                checked={storedTheme === 'light'}
+                onChange={() => handleModeChange('light')}
+              />
+              <span>Light</span>
+            </label>
+            <label className="theme-mode-option">
+              <input
+                type="radio"
+                name="theme-mode"
+                value="dark"
+                checked={storedTheme === 'dark'}
+                onChange={() => handleModeChange('dark')}
+              />
+              <span>Dark</span>
+            </label>
+            <label className="theme-mode-option">
+              <input
+                type="radio"
+                name="theme-mode"
+                value="system"
+                checked={storedTheme === 'system'}
+                onChange={() => handleModeChange('system')}
+              />
+              <span>System</span>
+            </label>
+          </div>
+        </div>
+
+        {storedTheme === 'light' && (
+          <>
+            {renderThemeVariants(lightThemes, themeVariantLight, setThemeVariantLight, 'Light Theme')}
+          </>
+        )}
+
+        {storedTheme === 'dark' && (
+          <>
+            {renderThemeVariants(darkThemes, themeVariantDark, setThemeVariantDark, 'Dark Theme')}
+          </>
+        )}
+
+        {storedTheme === 'system' && (
+          <>
+            {renderThemeVariants(lightThemes, themeVariantLight, setThemeVariantLight, 'Light Theme')}
+            <div className="section-divider" />
+            {renderThemeVariants(darkThemes, themeVariantDark, setThemeVariantDark, 'Dark Theme')}
+          </>
+        )}
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default Themes;
diff --git a/packages/bruno-app/src/components/Preferences/index.js b/packages/bruno-app/src/components/Preferences/index.js
index 2814ed855..dd8df488b 100644
--- a/packages/bruno-app/src/components/Preferences/index.js
+++ b/packages/bruno-app/src/components/Preferences/index.js
@@ -1,9 +1,11 @@
 import Modal from 'components/Modal/index';
 import classnames from 'classnames';
 import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
 
 import Support from './Support';
 import General from './General';
+import Themes from './Themes';
 import Proxy from './ProxySettings';
 import Display from './Display';
 import Keybindings from './Keybindings';
@@ -12,7 +14,8 @@ import Beta from './Beta';
 import StyledWrapper from './StyledWrapper';
 
 const Preferences = ({ onClose }) => {
-  const [tab, setTab] = useState('general');
+  const preferencesTab = useSelector((state) => state.app.preferencesTab);
+  const [tab, setTab] = useState(preferencesTab || 'general');
 
   const getTabClassname = (tabName) => {
     return classnames(`tab select-none ${tabName}`, {
@@ -26,6 +29,10 @@ const Preferences = ({ onClose }) => {
         return <General close={onClose} />;
       }
 
+      case 'themes': {
+        return <Themes close={onClose} />;
+      }
+
       case 'proxy': {
         return <Proxy close={onClose} />;
       }
@@ -56,6 +63,9 @@ const Preferences = ({ onClose }) => {
             <div className={getTabClassname('general')} role="tab" onClick={() => setTab('general')}>
               General
             </div>
+            <div className={getTabClassname('themes')} role="tab" onClick={() => setTab('themes')}>
+              Themes
+            </div>
             <div className={getTabClassname('display')} role="tab" onClick={() => setTab('display')}>
               Display
             </div>
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcBody/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/GrpcBody/StyledWrapper.js
index 6f529e7ac..3161c3afd 100644
--- a/packages/bruno-app/src/components/RequestPane/GrpcBody/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/GrpcBody/StyledWrapper.js
@@ -4,55 +4,124 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  flex: 1;
-  /* height: 100%; */
+  height: 100%;
   position: relative;
 
-  .grpc-message-header {
-    .font-medium {
-      color: ${(props) => props.theme.text};
+  .messages-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    &.single {
+      height: 100%;
     }
-    
-    button {
+
+    &.multi {
+      overflow-y: auto;
+      padding-bottom: 48px;
+    }
+  }
+
+  .message-container {
+    display: flex;
+    flex-direction: column;
+
+    &.single {
+      height: 100%;
+
+      .editor-container {
+        height: calc(100% - 32px);
+      }
+    }
+
+    &:not(.single) {
+      min-height: 240px;
+      margin-bottom: 8px;
+
+      &.last {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .message-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 4px;
+    padding: 4px 0px;
+    height: 32px;
+    flex-shrink: 0;
+
+    .message-label {
+      font-size: ${(props) => props.theme.font.size.sm};
+      color: ${(props) => props.theme.colors.text.subtext1};
+      margin-right: auto;
+    }
+
+    .toolbar-actions {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+    }
+
+    .toolbar-btn {
       display: flex;
       align-items: center;
       justify-content: center;
-      transition: all 0.2s ease;
-      
+      width: 28px;
+      height: 28px;
+      border-radius: 4px;
+      color: ${(props) => props.theme.colors.text.muted};
+      transition: all 0.15s ease;
+
       &:hover {
-        transform: scale(1.1);
+        background-color: ${(props) => props.theme.dropdown.hoverBg};
+        color: ${(props) => props.theme.text};
       }
-      
-      &:active {
-        transform: scale(0.95);
+
+      &.disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+
+        &:hover {
+          background-color: transparent;
+          color: ${(props) => props.theme.colors.text.muted};
+        }
+      }
+
+      &.delete:hover {
+        color: ${(props) => props.theme.colors.text.danger};
       }
     }
   }
 
-  #grpc-messages-container {
-    /* height: 100%; */
-    position: relative;
+  .editor-container {
+    flex: 1;
+    min-height: 0;
   }
-  
-  .add-message-btn-container {
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    gap: 12px;
+
+    p {
+      color: ${(props) => props.theme.colors.text.muted};
+      font-size: 13px;
+    }
+  }
+
+  .add-message-footer {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
-    padding-top: 8px;
-    background: ${(props) => props.theme.bg || '#fff'};
-    z-index: 15;
-    border-top: 1px solid ${(props) => props.theme.border || 'rgba(0, 0, 0, 0.1)'};
-    
-    .add-message-btn {
-      width: 100%;
-    }
-  }
-
-  .CodeMirror {
-    border-top: 0;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+    padding: 8px;
+    background: ${(props) => props.theme.bg};
   }
 `;
 
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcBody/index.js b/packages/bruno-app/src/components/RequestPane/GrpcBody/index.js
index 4d0bcff63..052694c39 100644
--- a/packages/bruno-app/src/components/RequestPane/GrpcBody/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GrpcBody/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { get } from 'lodash';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTheme } from 'providers/Theme';
@@ -8,37 +8,84 @@ import { sendGrpcMessage, generateGrpcSampleMessage } from 'utils/network/index'
 import useLocalStorage from 'hooks/useLocalStorage';
 
 import CodeEditor from 'components/CodeEditor/index';
+import Button from 'ui/Button';
 import StyledWrapper from './StyledWrapper';
-import { IconSend, IconRefresh, IconWand, IconPlus, IconTrash, IconChevronDown, IconChevronUp } from '@tabler/icons';
+import { IconSend, IconRefresh, IconWand, IconPlus, IconTrash } from '@tabler/icons';
 import ToolHint from 'components/ToolHint/index';
 import { toastError } from 'utils/common/error';
 import toast from 'react-hot-toast';
 import { getAbsoluteFilePath } from 'utils/common/path';
 import { prettifyJsonString } from 'utils/common/index';
 
-const SingleGrpcMessage = ({ message, item, collection, index, methodType, isCollapsed, onToggleCollapse, handleRun, canClientSendMultipleMessages }) => {
+const MessageToolbar = ({
+  index,
+  canClientStream,
+  isConnectionActive,
+  onSend,
+  onRegenerateMessage,
+  onPrettify,
+  onDeleteMessage,
+  showDelete
+}) => {
+  return (
+    <div className="message-toolbar">
+      <span className="message-label">Message {index + 1}</span>
+      <div className="toolbar-actions">
+        <ToolHint text="Format JSON" toolhintId={`prettify-msg-${index}`}>
+          <button onClick={onPrettify} className="toolbar-btn">
+            <IconWand size={16} strokeWidth={1.5} />
+          </button>
+        </ToolHint>
+
+        <ToolHint text="Generate sample" toolhintId={`regenerate-msg-${index}`}>
+          <button onClick={onRegenerateMessage} className="toolbar-btn">
+            <IconRefresh size={16} strokeWidth={1.5} />
+          </button>
+        </ToolHint>
+
+        {canClientStream && (
+          <ToolHint text={isConnectionActive ? 'Send message' : 'Connection not active'} toolhintId={`send-msg-${index}`}>
+            <button
+              onClick={onSend}
+              disabled={!isConnectionActive}
+              className={`toolbar-btn ${!isConnectionActive ? 'disabled' : ''}`}
+            >
+              <IconSend size={16} strokeWidth={1.5} />
+            </button>
+          </ToolHint>
+        )}
+
+        {showDelete && (
+          <ToolHint text="Delete message" toolhintId={`delete-msg-${index}`}>
+            <button onClick={onDeleteMessage} className="toolbar-btn delete">
+              <IconTrash size={16} strokeWidth={1.5} />
+            </button>
+          </ToolHint>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const SingleGrpcMessage = ({ message, item, collection, index, methodType, handleRun, canClientSendMultipleMessages, isLast }) => {
   const dispatch = useDispatch();
-  const { displayedTheme, theme } = useTheme();
+  const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
   const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');
   const isConnectionActive = useSelector((state) => state.collections.activeConnections.includes(item.uid));
 
-  // Access gRPC method metadata from local storage
   const [reflectionCache] = useLocalStorage('bruno.grpc.reflectionCache', {});
   const [protofileCache] = useLocalStorage('bruno.grpc.protofileCache', {});
 
   const canClientStream = methodType === 'client-streaming' || methodType === 'bidi-streaming';
-
   const { name, content } = message;
 
   const onEdit = (value) => {
     const currentMessages = [...(body.grpc || [])];
-
     currentMessages[index] = {
       name: name ? name : `message ${index + 1}`,
       content: value
     };
-
     dispatch(updateRequestBody({
       content: currentMessages,
       itemUid: item.uid,
@@ -53,60 +100,51 @@ const SingleGrpcMessage = ({ message, item, collection, index, methodType, isCol
       console.error('Error sending message:', error);
     }
   };
+
   const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
   const onRegenerateMessage = async () => {
     try {
       const methodPath = item.draft?.request?.method || item.request?.method;
-
       if (!methodPath) {
         toastError(new Error('Method path not found in request'));
         return;
       }
 
-      // Get the URL and protoPath to determine which cache to use
       const url = item.draft?.request?.url || item.request?.url;
       const protoPath = item.draft?.request?.protoPath || item.request?.protoPath;
 
-      // Find the method metadata from the appropriate cache
       let methodMetadata = null;
       if (protoPath) {
-        // Use protofile cache if protoPath is available
         const absolutePath = getAbsoluteFilePath(collection.pathname, protoPath);
         const cachedMethods = protofileCache[absolutePath];
         if (cachedMethods) {
           methodMetadata = cachedMethods.find((method) => method.path === methodPath);
         }
       } else if (url) {
-        // Use reflection cache if no protoPath (reflection mode)
         const cachedMethods = reflectionCache[url];
         if (cachedMethods) {
           methodMetadata = cachedMethods.find((method) => method.path === methodPath);
         }
       }
 
-      const result = await generateGrpcSampleMessage(methodPath,
-        content,
-        {
-          arraySize: 2,
-          methodMetadata // Pass the method metadata to the function
-        });
+      const result = await generateGrpcSampleMessage(methodPath, content, {
+        arraySize: 2,
+        methodMetadata
+      });
 
       if (result.success) {
         const currentMessages = [...(body.grpc || [])];
-
         currentMessages[index] = {
           name: name ? name : `message ${index + 1}`,
           content: result.message
         };
-
         dispatch(updateRequestBody({
           content: currentMessages,
           itemUid: item.uid,
           collectionUid: collection.uid
         }));
-
-        toast.success('Sample message generated successfully!');
+        toast.success('Sample message generated');
       } else {
         toastError(new Error(result.error || 'Failed to generate sample message'));
       }
@@ -118,9 +156,7 @@ const SingleGrpcMessage = ({ message, item, collection, index, methodType, isCol
 
   const onDeleteMessage = () => {
     const currentMessages = [...(body.grpc || [])];
-
     currentMessages.splice(index, 1);
-
     dispatch(updateRequestBody({
       content: currentMessages,
       itemUid: item.uid,
@@ -131,7 +167,6 @@ const SingleGrpcMessage = ({ message, item, collection, index, methodType, isCol
   const onPrettify = () => {
     try {
       const prettyBodyJson = prettifyJsonString(content);
-
       const currentMessages = [...(body.grpc || [])];
       currentMessages[index] = {
         name: name ? name : `message ${index + 1}`,
@@ -147,101 +182,45 @@ const SingleGrpcMessage = ({ message, item, collection, index, methodType, isCol
     }
   };
 
-  const getContainerHeight = (canClientSendMultipleMessages && body.grpc.length > 1) ? `${isCollapsed ? '' : 'h-80'}` : 'h-full';
+  const isSingleMessage = !canClientSendMultipleMessages || body.grpc.length === 1;
 
   return (
-    <div className={`flex flex-col mb-3 border border-neutral-200 dark:border-neutral-800 rounded-md overflow-hidden ${getContainerHeight} relative`}>
-      <div
-        className="grpc-message-header flex items-center justify-between px-3 py-2 bg-neutral-100 dark:bg-neutral-700 cursor-pointer"
-        onClick={onToggleCollapse}
-      >
-        <div className="flex items-center gap-2">
-          {isCollapsed
-            ? <IconChevronDown size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" />
-            : <IconChevronUp size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" />}
-          <span className="font-medium">{`Message ${canClientStream ? index + 1 : ''}`}</span>
-        </div>
-        <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
-          <ToolHint text="Format JSON with proper indentation and spacing" toolhintId={`prettify-msg-${index}`}>
-            <button
-              onClick={onPrettify}
-              className="p-1 rounded hover:bg-zinc-200 dark:hover:bg-zinc-600 transition-colors"
-            >
-              <IconWand size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" />
-            </button>
-          </ToolHint>
-
-          <ToolHint text="Generate a new sample message based on schema" toolhintId={`regenerate-msg-${index}`}>
-            <button
-              onClick={onRegenerateMessage}
-              className="p-1 rounded hover:bg-zinc-200 dark:hover:bg-zinc-600 transition-colors"
-            >
-              <IconRefresh size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" />
-            </button>
-          </ToolHint>
-
-          {canClientStream && (
-            <ToolHint text={isConnectionActive ? 'Send gRPC message' : 'Connection not active'} toolhintId={`send-msg-${index}`}>
-              <button
-                onClick={onSend}
-                disabled={!isConnectionActive}
-                className={`p-1 rounded ${isConnectionActive ? 'hover:bg-zinc-200 dark:hover:bg-zinc-600' : 'opacity-50 cursor-not-allowed'} transition-colors`}
-                data-testid={`grpc-send-message-${index}`}
-              >
-                <IconSend
-                  size={16}
-                  strokeWidth={1.5}
-                  className={`${isConnectionActive ? 'text-zinc-700 dark:text-zinc-300' : 'text-zinc-400 dark:text-zinc-500'}`}
-                />
-              </button>
-            </ToolHint>
-          )}
-
-          {index > 0 && (
-            <ToolHint text="Delete this message" toolhintId={`delete-msg-${index}`}>
-              <button
-                onClick={onDeleteMessage}
-                className="p-1 rounded hover:bg-zinc-200 dark:hover:bg-zinc-600 transition-colors"
-              >
-                <IconTrash size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" />
-              </button>
-            </ToolHint>
-          )}
-        </div>
+    <div className={`message-container ${isSingleMessage ? 'single' : ''} ${isLast ? 'last' : ''}`}>
+      <MessageToolbar
+        index={index}
+        canClientStream={canClientStream}
+        isConnectionActive={isConnectionActive}
+        onSend={onSend}
+        onRegenerateMessage={onRegenerateMessage}
+        onPrettify={onPrettify}
+        onDeleteMessage={onDeleteMessage}
+        showDelete={index > 0}
+      />
+      <div className="editor-container">
+        <CodeEditor
+          collection={collection}
+          theme={displayedTheme}
+          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
+          value={content}
+          onEdit={onEdit}
+          onRun={handleRun}
+          onSave={onSave}
+          mode="application/ld+json"
+          enableVariableHighlighting={true}
+        />
       </div>
-
-      {!isCollapsed && (
-        <div className={`flex ${body.grpc.length === 1 || !canClientSendMultipleMessages ? 'h-full' : 'h-80'} relative`}>
-          <CodeEditor
-            collection={collection}
-            theme={displayedTheme}
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-            value={content}
-            onEdit={onEdit}
-            onRun={handleRun}
-            onSave={onSave}
-            mode="application/ld+json"
-            enableVariableHighlighting={true}
-          />
-        </div>
-      )}
     </div>
   );
 };
 
 const GrpcBody = ({ item, collection, handleRun }) => {
-  const preferences = useSelector((state) => state.app.preferences);
-  const isVerticalLayout = preferences?.layout?.responsePaneOrientation === 'vertical';
   const dispatch = useDispatch();
-  const [collapsedMessages, setCollapsedMessages] = useState([]);
   const messagesContainerRef = useRef(null);
   const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');
-
   const methodType = item.draft ? get(item, 'draft.request.methodType') : get(item, 'request.methodType');
   const canClientSendMultipleMessages = methodType === 'client-streaming' || methodType === 'bidi-streaming';
 
-  // Auto-scroll to the latest message when messages are added
   useEffect(() => {
     if (messagesContainerRef.current && body?.grpc?.length > 0) {
       const container = messagesContainerRef.current;
@@ -249,26 +228,12 @@ const GrpcBody = ({ item, collection, handleRun }) => {
     }
   }, [body?.grpc?.length]);
 
-  const toggleMessageCollapse = (index) => {
-    setCollapsedMessages((prev) => {
-      if (prev.includes(index)) {
-        return prev.filter((i) => i !== index);
-      } else {
-        return [...prev, index];
-      }
-    });
-  };
-
   const addNewMessage = () => {
-    const currentMessages = Array.isArray(body.grpc)
-      ? [...body.grpc]
-      : [];
-
+    const currentMessages = Array.isArray(body.grpc) ? [...body.grpc] : [];
     currentMessages.push({
       name: `message ${currentMessages.length + 1}`,
       content: '{}'
     });
-
     dispatch(updateRequestBody({
       content: currentMessages,
       itemUid: item.uid,
@@ -278,61 +243,58 @@ const GrpcBody = ({ item, collection, handleRun }) => {
 
   if (!body?.grpc || !Array.isArray(body.grpc)) {
     return (
-      <StyledWrapper isVerticalLayout={isVerticalLayout}>
-        <div className="flex flex-col items-center justify-center py-8">
-          <p className="text-zinc-500 dark:text-zinc-400 mb-4">No gRPC messages available</p>
-          <ToolHint text="Add the first message to your gRPC request" toolhintId="add-first-msg">
-            <button
-              onClick={addNewMessage}
-              className="flex items-center justify-center gap-2 py-2 px-4 rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors"
-            >
-              <IconPlus size={16} strokeWidth={1.5} className="text-neutral-700 dark:text-neutral-300" />
-              <span className="font-medium text-neutral-700 dark:text-neutral-300">Add First Message</span>
-            </button>
-          </ToolHint>
+      <StyledWrapper>
+        <div className="empty-state">
+          <p>No gRPC messages available</p>
+          <Button
+            onClick={addNewMessage}
+            variant="filled"
+            color="secondary"
+            size="sm"
+            icon={<IconPlus size={14} strokeWidth={1.5} />}
+          >
+            Add Message
+          </Button>
         </div>
       </StyledWrapper>
     );
   }
 
+  const messagesToShow = body.grpc.filter((_, index) => canClientSendMultipleMessages || index === 0);
+
   return (
-    <StyledWrapper isVerticalLayout={isVerticalLayout}>
+    <StyledWrapper>
       <div
         ref={messagesContainerRef}
-        id="grpc-messages-container"
-        data-testid="grpc-messages-container"
-        className={`flex-1 ${body.grpc.length === 1 || !canClientSendMultipleMessages ? 'h-full' : 'overflow-y-auto'} ${canClientSendMultipleMessages && 'pb-16'}`}
+        className={`messages-container ${canClientSendMultipleMessages && messagesToShow.length > 1 ? 'multi' : 'single'}`}
       >
-        {body.grpc
-          .filter((_, index) => canClientSendMultipleMessages || index === 0)
-          .map((message, index) => (
-            <SingleGrpcMessage
-              key={index}
-              message={message}
-              item={item}
-              collection={collection}
-              index={index}
-              methodType={methodType}
-              isCollapsed={collapsedMessages.includes(index)}
-              onToggleCollapse={() => toggleMessageCollapse(index)}
-              handleRun={handleRun}
-              canClientSendMultipleMessages={canClientSendMultipleMessages}
-            />
-          ))}
+        {messagesToShow.map((message, index) => (
+          <SingleGrpcMessage
+            key={index}
+            message={message}
+            item={item}
+            collection={collection}
+            index={index}
+            methodType={methodType}
+            handleRun={handleRun}
+            canClientSendMultipleMessages={canClientSendMultipleMessages}
+            isLast={index === messagesToShow.length - 1}
+          />
+        ))}
       </div>
 
       {canClientSendMultipleMessages && (
-        <div className="add-message-btn-container">
-          <ToolHint text="Add a new gRPC message to the request" toolhintId="add-msg-fixed">
-            <button
-              onClick={addNewMessage}
-              className="add-message-btn flex items-center justify-center gap-2 py-2 px-4 rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors shadow-md"
-              data-testid="grpc-add-message-button"
-            >
-              <IconPlus size={16} strokeWidth={1.5} className="text-neutral-700 dark:text-neutral-300" />
-              <span className="font-medium text-neutral-700 dark:text-neutral-300">Add Message</span>
-            </button>
-          </ToolHint>
+        <div className="add-message-footer">
+          <Button
+            onClick={addNewMessage}
+            variant="filled"
+            color="secondary"
+            size="sm"
+            fullWidth
+            icon={<IconPlus size={14} strokeWidth={1.5} />}
+          >
+            Add Message
+          </Button>
         </div>
       )}
     </StyledWrapper>
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/StyledWrapper.js
index 065c99330..a5d389266 100644
--- a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/StyledWrapper.js
@@ -49,7 +49,7 @@ const Wrapper = styled.div`
   .infotip-text {
     visibility: hidden;
     width: auto;
-    background-color: ${(props) => props.theme.requestTabs.active.bg};
+    background-color: ${(props) => props.theme.background.surface2};
     color: ${(props) => props.theme.text};
     text-align: center;
     border-radius: 4px;
@@ -72,7 +72,7 @@ const Wrapper = styled.div`
     margin-left: -4px;
     border-width: 4px;
     border-style: solid;
-    border-color: ${(props) => props.theme.requestTabs.active.bg} transparent transparent transparent;
+    border-color: ${(props) => props.theme.background.surface2} transparent transparent transparent;
   }
 
   .shortcut {
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js
index 5b2fece89..30b37842d 100644
--- a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js
@@ -348,7 +348,7 @@ const GrpcQueryUrl = ({ item, collection, handleRun }) => {
             <IconRefresh
               color={theme.requestTabs.icon.color}
               strokeWidth={1.5}
-              size={22}
+              size={20}
               className={`${(isReflectionMode ? reflectionManagement.isLoadingMethods : protoFileManagement.isLoadingMethods) ? 'animate-spin' : 'cursor-pointer'}`}
               data-testid="refresh-methods-icon"
             />
@@ -367,7 +367,7 @@ const GrpcQueryUrl = ({ item, collection, handleRun }) => {
             <IconCode
               color={theme.requestTabs.icon.color}
               strokeWidth={1.5}
-              size={22}
+              size={20}
             />
             <span className="infotip-text text-xs">Generate grpcurl command</span>
           </div>
@@ -383,7 +383,7 @@ const GrpcQueryUrl = ({ item, collection, handleRun }) => {
             <IconDeviceFloppy
               color={item.draft ? theme.colors.text.yellow : theme.requestTabs.icon.color}
               strokeWidth={1.5}
-              size={22}
+              size={20}
               className={`${item.draft ? 'cursor-pointer' : 'cursor-default'}`}
             />
             <span className="infotip-text text-xs">
@@ -394,7 +394,7 @@ const GrpcQueryUrl = ({ item, collection, handleRun }) => {
           {isConnectionActive && isStreamingMethod && (
             <div className="connection-controls relative flex items-center h-full gap-3">
               <div className="infotip" onClick={handleCancelConnection} data-testid="grpc-cancel-connection-button">
-                <IconX color={theme.requestTabs.icon.color} strokeWidth={1.5} size={22} className="cursor-pointer" />
+                <IconX color={theme.requestTabs.icon.color} strokeWidth={1.5} size={20} className="cursor-pointer" />
                 <span className="infotip-text text-xs">Cancel</span>
               </div>
 
@@ -403,7 +403,7 @@ const GrpcQueryUrl = ({ item, collection, handleRun }) => {
                   <IconCheck
                     color={theme.colors.text.green}
                     strokeWidth={2}
-                    size={22}
+                    size={20}
                     className="cursor-pointer"
                   />
                 </div>
@@ -420,7 +420,7 @@ const GrpcQueryUrl = ({ item, collection, handleRun }) => {
                 handleRun(e);
               }}
             >
-              <IconArrowRight color={theme.requestTabPanel.url.icon} strokeWidth={1.5} size={22} />
+              <IconArrowRight color={theme.requestTabPanel.url.icon} strokeWidth={1.5} size={20} />
             </div>
           )}
         </div>
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js
index efcd744e2..eb061b83b 100644
--- a/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js
@@ -7,7 +7,7 @@ const StyledWrapper = styled.div`
       border: none;
       border-bottom: solid 2px transparent;
       margin-right: ${(props) => props.theme.tabs.marginRight};
-      color: var(--color-tab-inactive);
+      color: ${(props) => props.theme.colors.text.subtext0};
       cursor: pointer;
 
       &:focus,
diff --git a/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js
index 618575a97..38ef5cc3d 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   div.title {
-    color: var(--color-tab-inactive);
+    color: ${(props) => props.theme.colors.text.subtext0};
   }
   table {
     width: 100%;
diff --git a/packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.js
index ae1b0557c..d77bfad69 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.js
@@ -49,7 +49,7 @@ const Wrapper = styled.div`
   .infotiptext {
     visibility: hidden;
     width: auto;
-    background-color: ${(props) => props.theme.requestTabs.active.bg};
+    background-color: ${(props) => props.theme.background.surface2};
     color: ${(props) => props.theme.text};
     text-align: center;
     border-radius: 4px;
@@ -72,7 +72,7 @@ const Wrapper = styled.div`
     margin-left: -4px;
     border-width: 4px;
     border-style: solid;
-    border-color: ${(props) => props.theme.requestTabs.active.bg} transparent transparent transparent;
+    border-color: ${(props) => props.theme.background.surface2} transparent transparent transparent;
   }
 
   .shortcut {
diff --git a/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js
index d81dd2f4c..d21b5e234 100644
--- a/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js
@@ -9,7 +9,7 @@ const Wrapper = styled.div`
     border-radius: 3px;
 
     .selected-body-mode {
-      color: ${(props) => props.theme.colors.text.yellow};
+      color: ${(props) => props.theme.brand};
     }
   }
 
diff --git a/packages/bruno-app/src/components/RequestPane/Script/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Script/StyledWrapper.js
index 66ba1ed3d..6016566bc 100644
--- a/packages/bruno-app/src/components/RequestPane/Script/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Script/StyledWrapper.js
@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
   }
 
   div.title {
-    color: var(--color-tab-inactive);
+    color: ${(props) => props.theme.colors.text.subtext0};
   }
 `;
 
diff --git a/packages/bruno-app/src/components/RequestPane/Vars/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Vars/StyledWrapper.js
index 44b01b464..0c6bf2f28 100644
--- a/packages/bruno-app/src/components/RequestPane/Vars/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Vars/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   div.title {
-    color: var(--color-tab-inactive);
+    color: ${(props) => props.theme.colors.text.subtext0};
   }
 `;
 
diff --git a/packages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.js
index 44afba38d..b39bc94dc 100644
--- a/packages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.js
@@ -7,7 +7,7 @@ const StyledWrapper = styled.div`
       border: none;
       border-bottom: solid 2px transparent;
       margin-right: ${(props) => props.theme.tabs.marginRight};
-      color: var(--color-tab-inactive);
+      color: ${(props) => props.theme.colors.text.subtext0};
       cursor: pointer;
 
       &:focus,
diff --git a/packages/bruno-app/src/components/RequestPane/WsBody/BodyMode/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/WsBody/BodyMode/StyledWrapper.js
index 983ab3cf7..88f661634 100644
--- a/packages/bruno-app/src/components/RequestPane/WsBody/BodyMode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/WsBody/BodyMode/StyledWrapper.js
@@ -17,13 +17,13 @@ const Wrapper = styled.div`
     }
 
     .selected-body-mode {
-      color: ${(props) => props.theme.colors.text.yellow};
+      color: ${(props) => props.theme.brand};
     }
   }
 
   .caret {
-    color: rgb(140, 140, 140);
-    fill: rgb(140 140 140);
+    color: ${(props) => props.theme.colors.text.muted};
+    fill: ${(props) => props.theme.colors.text.muted};
   }
 `;
 
diff --git a/packages/bruno-app/src/components/RequestPane/WsBody/SingleWSMessage/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/WsBody/SingleWSMessage/StyledWrapper.js
new file mode 100644
index 000000000..a161765e6
--- /dev/null
+++ b/packages/bruno-app/src/components/RequestPane/WsBody/SingleWSMessage/StyledWrapper.js
@@ -0,0 +1,72 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  &.single {
+    height: 100%;
+
+    .editor-container {
+      height: calc(100% - 32px);
+    }
+  }
+
+  &:not(.single) {
+    min-height: 240px;
+    margin-bottom: 8px;
+
+    &.last {
+      margin-bottom: 0;
+    }
+  }
+
+  .message-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 4px;
+    padding: 4px 0px;
+    height: 32px;
+    flex-shrink: 0;
+
+    .message-label {
+      font-size: ${(props) => props.theme.font.size.sm};
+      color: ${(props) => props.theme.colors.text.subtext1};
+      margin-right: auto;
+    }
+
+    .toolbar-actions {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+    }
+
+    .toolbar-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      border-radius: 4px;
+      color: ${(props) => props.theme.colors.text.muted};
+      transition: all 0.15s ease;
+
+      &:hover {
+        background-color: ${(props) => props.theme.dropdown.hoverBg};
+        color: ${(props) => props.theme.text};
+      }
+
+      &.delete:hover {
+        color: ${(props) => props.theme.colors.text.danger};
+      }
+    }
+  }
+
+  .editor-container {
+    flex: 1;
+    min-height: 0;
+  }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/RequestPane/WsBody/SingleWSMessage/index.js b/packages/bruno-app/src/components/RequestPane/WsBody/SingleWSMessage/index.js
index 2d56cf46a..275665dc0 100644
--- a/packages/bruno-app/src/components/RequestPane/WsBody/SingleWSMessage/index.js
+++ b/packages/bruno-app/src/components/RequestPane/WsBody/SingleWSMessage/index.js
@@ -1,4 +1,4 @@
-import { IconChevronDown, IconChevronUp, IconTrash, IconWand } from '@tabler/icons';
+import { IconTrash, IconWand } from '@tabler/icons';
 import CodeEditor from 'components/CodeEditor/index';
 import ToolHint from 'components/ToolHint/index';
 import { get } from 'lodash';
@@ -13,6 +13,7 @@ import { toastError } from 'utils/common/error';
 import { prettifyJsonString } from 'utils/common/index';
 import xmlFormat from 'xml-formatter';
 import WSRequestBodyMode from '../BodyMode/index';
+import StyledWrapper from './StyledWrapper';
 
 export const TYPE_BY_DECODER = {
   base64: 'binary',
@@ -28,10 +29,9 @@ export const SingleWSMessage = ({
   collection,
   index,
   methodType,
-  isCollapsed,
-  onToggleCollapse,
   handleRun,
-  canClientSendMultipleMessages
+  canClientSendMultipleMessages,
+  isLast
 }) => {
   const dispatch = useDispatch();
   const { displayedTheme } = useTheme();
@@ -88,9 +88,6 @@ export const SingleWSMessage = ({
     }));
   };
 
-  const getContainerHeight
-    = canClientSendMultipleMessages && body.ws.length > 1 ? `${isCollapsed ? '' : 'h-80'}` : 'h-full';
-
   let codeType = messageFormat;
   if (TYPE_BY_DECODER[type]) {
     codeType = TYPE_BY_DECODER[type];
@@ -144,60 +141,44 @@ export const SingleWSMessage = ({
     }
   };
 
+  const isSingleMessage = !canClientSendMultipleMessages || body.ws.length === 1;
+
   return (
-    <div
-      className={`flex flex-col mb-3 border border-neutral-200 dark:border-neutral-800 rounded-md overflow-hidden ${getContainerHeight} relative`}
-    >
-      <div
-        className="ws-message-header flex items-center justify-between px-3 py-2 bg-neutral-100 dark:bg-neutral-700 cursor-pointer"
-        onClick={onToggleCollapse}
-      >
-        <div className="flex items-center gap-2">
-          {isCollapsed ? (
-            <IconChevronDown size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" />
-          ) : (
-            <IconChevronUp size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" />
-          )}
-        </div>
-        <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
+    <StyledWrapper className={`message-container ${isSingleMessage ? 'single' : ''} ${isLast ? 'last' : ''}`}>
+      <div className="message-toolbar">
+        <span className="message-label">Message {index + 1}</span>
+        <div className="toolbar-actions">
           <WSRequestBodyMode mode={messageFormat} onModeChange={onUpdateMessageType} />
-          <ToolHint text="Prettify" toolhintId={`prettify-msg-${index}`}>
-            <button
-              onClick={onPrettify}
-              className="p-1 rounded hover:bg-zinc-200 dark:hover:bg-zinc-600 transition-colors"
-            >
-              <IconWand size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" />
+
+          <ToolHint text="Format" toolhintId={`prettify-msg-${index}`}>
+            <button onClick={onPrettify} className="toolbar-btn">
+              <IconWand size={16} strokeWidth={1.5} />
             </button>
           </ToolHint>
 
           {index > 0 && (
-            <ToolHint text="Delete this message" toolhintId={`delete-msg-${index}`}>
-              <button
-                onClick={onDeleteMessage}
-                className="p-1 rounded hover:bg-zinc-200 dark:hover:bg-zinc-600 transition-colors"
-              >
-                <IconTrash size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" />
+            <ToolHint text="Delete message" toolhintId={`delete-msg-${index}`}>
+              <button onClick={onDeleteMessage} className="toolbar-btn delete">
+                <IconTrash size={16} strokeWidth={1.5} />
               </button>
             </ToolHint>
           )}
         </div>
       </div>
-      {!isCollapsed && (
-        <div className={`flex ${body.ws.length === 1 || !canClientSendMultipleMessages ? 'h-full' : 'h-80'} relative`}>
-          <CodeEditor
-            collection={collection}
-            theme={displayedTheme}
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-            value={content}
-            onEdit={onEdit}
-            onRun={handleRun}
-            onSave={onSave}
-            mode={codemirrorMode[codeType] ?? 'text/plain'}
-            enableVariableHighlighting={true}
-          />
-        </div>
-      )}
-    </div>
+      <div className="editor-container">
+        <CodeEditor
+          collection={collection}
+          theme={displayedTheme}
+          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
+          value={content}
+          onEdit={onEdit}
+          onRun={handleRun}
+          onSave={onSave}
+          mode={codemirrorMode[codeType] ?? 'text/plain'}
+          enableVariableHighlighting={true}
+        />
+      </div>
+    </StyledWrapper>
   );
 };
diff --git a/packages/bruno-app/src/components/RequestPane/WsBody/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/WsBody/StyledWrapper.js
index 49966056e..b0ae614d9 100644
--- a/packages/bruno-app/src/components/RequestPane/WsBody/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/WsBody/StyledWrapper.js
@@ -4,49 +4,45 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  flex: 1;
+  height: 100%;
   position: relative;
 
-  .ws-message-header {
-    .font-medium {
-      color: ${(props) => props.theme.text};
+  .messages-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    &.single {
+      height: 100%;
     }
-    
-    button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.2s ease;
-      
-      &:hover {
-        transform: scale(1.1);
-      }
-      
-      &:active {
-        transform: scale(0.95);
-      }
+
+    &.multi {
+      overflow-y: auto;
+      padding-bottom: 48px;
     }
   }
 
-  .add-message-btn-container {
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    gap: 12px;
+
+    p {
+      color: ${(props) => props.theme.colors.text.muted};
+      font-size: 13px;
+    }
+  }
+
+  .add-message-footer {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
-    padding-top: 8px;
-    background: ${(props) => props.theme.bg || '#fff'};
-    z-index: 15;
-    border-top: 1px solid ${(props) => props.theme.border || 'rgba(0, 0, 0, 0.1)'};
-    
-    .add-message-btn {
-      width: 100%;
-    }
-  }
-
-  .CodeMirror {
-    border-top: 0;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+    padding: 8px;
+    background: ${(props) => props.theme.bg};
   }
 `;
 
diff --git a/packages/bruno-app/src/components/RequestPane/WsBody/index.js b/packages/bruno-app/src/components/RequestPane/WsBody/index.js
index 22bc91594..67ca5abc8 100644
--- a/packages/bruno-app/src/components/RequestPane/WsBody/index.js
+++ b/packages/bruno-app/src/components/RequestPane/WsBody/index.js
@@ -1,17 +1,14 @@
 import { get } from 'lodash';
 import { updateRequestBody } from 'providers/ReduxStore/slices/collections';
 import { IconPlus } from '@tabler/icons';
-import React, { useEffect, useRef, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import ToolHint from 'components/ToolHint/index';
+import React, { useEffect, useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import Button from 'ui/Button';
 import StyledWrapper from './StyledWrapper';
 import { SingleWSMessage } from './SingleWSMessage/index';
 
 const WSBody = ({ item, collection, handleRun }) => {
-  const preferences = useSelector((state) => state.app.preferences);
-  const isVerticalLayout = preferences?.layout?.responsePaneOrientation === 'vertical';
   const dispatch = useDispatch();
-  const [collapsedMessages, setCollapsedMessages] = useState([]);
   const messagesContainerRef = useRef(null);
   const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');
 
@@ -26,16 +23,6 @@ const WSBody = ({ item, collection, handleRun }) => {
     }
   }, [body?.ws?.length]);
 
-  const toggleMessageCollapse = (index) => {
-    setCollapsedMessages((prev) => {
-      if (prev.includes(index)) {
-        return prev.filter((i) => i !== index);
-      } else {
-        return [...prev, index];
-      }
-    });
-  };
-
   const addNewMessage = () => {
     const currentMessages = Array.isArray(body.ws) ? [...body.ws] : [];
 
@@ -53,60 +40,58 @@ const WSBody = ({ item, collection, handleRun }) => {
 
   if (!body?.ws || !Array.isArray(body.ws)) {
     return (
-      <StyledWrapper isVerticalLayout={isVerticalLayout}>
-        <div className="flex flex-col items-center justify-center py-8">
-          <p className="text-zinc-500 dark:text-zinc-400 mb-4">No WebSocket messages available</p>
-          <ToolHint text="Add the first message to your WebSocket request" toolhintId="add-first-msg">
-            <button
-              onClick={addNewMessage}
-              className="flex items-center justify-center gap-2 py-2 px-4 rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors"
-            >
-              <IconPlus size={16} strokeWidth={1.5} className="text-neutral-700 dark:text-neutral-300" />
-              <span className="font-medium text-neutral-700 dark:text-neutral-300">Add First Message</span>
-            </button>
-          </ToolHint>
+      <StyledWrapper>
+        <div className="empty-state">
+          <p>No WebSocket messages available</p>
+          <Button
+            onClick={addNewMessage}
+            variant="filled"
+            color="secondary"
+            size="sm"
+            icon={<IconPlus size={14} strokeWidth={1.5} />}
+          >
+            Add Message
+          </Button>
         </div>
       </StyledWrapper>
     );
   }
 
+  const messagesToShow = body.ws.filter((_, index) => canClientSendMultipleMessages || index === 0);
+
   return (
-    <StyledWrapper isVerticalLayout={isVerticalLayout}>
+    <StyledWrapper>
       <div
         ref={messagesContainerRef}
-        id="ws-messages-container"
-        className={`flex-1 ${body.ws.length === 1 || !canClientSendMultipleMessages ? 'h-full' : 'overflow-y-auto'} ${canClientSendMultipleMessages && 'pb-16'
-        }`}
+        className={`messages-container ${canClientSendMultipleMessages && messagesToShow.length > 1 ? 'multi' : 'single'}`}
       >
-        {body.ws
-          .filter((_, index) => canClientSendMultipleMessages || index === 0)
-          .map((message, index) => (
-            <SingleWSMessage
-              key={index}
-              message={message}
-              item={item}
-              collection={collection}
-              index={index}
-              methodType={methodType}
-              isCollapsed={collapsedMessages.includes(index)}
-              onToggleCollapse={() => toggleMessageCollapse(index)}
-              handleRun={handleRun}
-              canClientSendMultipleMessages={canClientSendMultipleMessages}
-            />
-          ))}
+        {messagesToShow.map((message, index) => (
+          <SingleWSMessage
+            key={index}
+            message={message}
+            item={item}
+            collection={collection}
+            index={index}
+            methodType={methodType}
+            handleRun={handleRun}
+            canClientSendMultipleMessages={canClientSendMultipleMessages}
+            isLast={index === messagesToShow.length - 1}
+          />
+        ))}
       </div>
 
       {canClientSendMultipleMessages && (
-        <div className="add-message-btn-container">
-          <ToolHint text="Add a new WebSocket message to the request" toolhintId="add-msg-fixed">
-            <button
-              onClick={addNewMessage}
-              className="add-message-btn flex items-center justify-center gap-2 py-2 px-4 rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors shadow-md"
-            >
-              <IconPlus size={16} strokeWidth={1.5} className="text-neutral-700 dark:text-neutral-300" />
-              <span className="font-medium text-neutral-700 dark:text-neutral-300">Add Message</span>
-            </button>
-          </ToolHint>
+        <div className="add-message-footer">
+          <Button
+            onClick={addNewMessage}
+            variant="filled"
+            color="secondary"
+            size="sm"
+            fullWidth
+            icon={<IconPlus size={14} strokeWidth={1.5} />}
+          >
+            Add Message
+          </Button>
         </div>
       )}
     </StyledWrapper>
diff --git a/packages/bruno-app/src/components/RequestPane/WsQueryUrl/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/WsQueryUrl/StyledWrapper.js
index 9383b47ef..af596a1ef 100644
--- a/packages/bruno-app/src/components/RequestPane/WsQueryUrl/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/WsQueryUrl/StyledWrapper.js
@@ -62,7 +62,7 @@ const StyledWrapper = styled.div`
   .infotip-text {
     visibility: hidden;
     width: auto;
-    background-color: ${(props) => props.theme.requestTabs.active.bg};
+    background-color: ${(props) => props.theme.background.surface2};
     color: ${(props) => props.theme.text};
     text-align: center;
     border-radius: 4px;
@@ -85,7 +85,7 @@ const StyledWrapper = styled.div`
     margin-left: -4px;
     border-width: 4px;
     border-style: solid;
-    border-color: ${(props) => props.theme.requestTabs.active.bg} transparent transparent transparent;
+    border-color: ${(props) => props.theme.background.surface2} transparent transparent transparent;
   }
 
   .shortcut {
@@ -95,7 +95,7 @@ const StyledWrapper = styled.div`
   .connection-controls {
     .infotip {
       &:hover {
-        background-color: ${(props) => props.theme.requestTabPanel.url.errorHoverBg};
+        background-color: color-mix(in srgb, ${(props) => props.theme.colors.text.danger} 6%, transparent);
       }
     }
   }
diff --git a/packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js b/packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js
index 61f550f3c..b18e83b2b 100644
--- a/packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js
+++ b/packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js
@@ -150,7 +150,7 @@ const WsQueryUrl = ({ item, collection, handleRun }) => {
               <IconDeviceFloppy
                 color={hasChanges ? theme.colors.text.yellow : theme.requestTabs.icon.color}
                 strokeWidth={1.5}
-                size={22}
+                size={20}
                 className={`${hasChanges ? 'cursor-pointer' : 'cursor-default'}`}
               />
               <span className="infotip-text text-xs">
@@ -164,7 +164,7 @@ const WsQueryUrl = ({ item, collection, handleRun }) => {
                   <IconPlugConnectedX
                     color={theme.colors.text.danger}
                     strokeWidth={1.5}
-                    size={22}
+                    size={20}
                     className="cursor-pointer"
                   />
                   <span className="infotip-text text-xs">Close Connection</span>
@@ -181,7 +181,7 @@ const WsQueryUrl = ({ item, collection, handleRun }) => {
                     })}
                     color={theme.colors.text.green}
                     strokeWidth={1.5}
-                    size={22}
+                    size={20}
                   />
                   <span className="infotip-text text-xs">Connect</span>
                 </div>
@@ -189,7 +189,7 @@ const WsQueryUrl = ({ item, collection, handleRun }) => {
             )}
 
             <div data-testid="run-button" className="cursor-pointer" onClick={handleRunClick}>
-              <IconArrowRight color={theme.requestTabPanel.url.icon} strokeWidth={1.5} size={22} />
+              <IconArrowRight color={theme.requestTabPanel.url.icon} strokeWidth={1.5} size={20} />
             </div>
           </div>
         </div>
diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
index 2ad6f9cd7..829a865cc 100644
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
@@ -7,8 +7,6 @@ import { clearGlobalEnvironmentDraft } from 'providers/ReduxStore/slices/global-
 import { saveGlobalEnvironment } from 'providers/ReduxStore/slices/global-environments';
 import { useTheme } from 'providers/Theme';
 import { useDispatch, useSelector } from 'react-redux';
-import darkTheme from 'themes/dark';
-import lightTheme from 'themes/light';
 import { findItemInCollection, hasRequestChanges } from 'utils/collections';
 import ConfirmRequestClose from './ConfirmRequestClose';
 import ConfirmCollectionClose from './ConfirmCollectionClose';
@@ -28,8 +26,7 @@ import toast from 'react-hot-toast';
 
 const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUid, hasOverflow, setHasOverflow, dropdownContainerRef }) => {
   const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
-  const theme = storedTheme === 'dark' ? darkTheme : lightTheme;
+  const { theme } = useTheme();
   const tabNameRef = useRef(null);
   const tabLabelRef = useRef(null);
   const lastOverflowStateRef = useRef(null);
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/StyledWrapper.js
index 95804cba2..c0d034289 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleBody/StyledWrapper.js
@@ -26,7 +26,7 @@ const StyledWrapper = styled.div`
     }
 
     .selected-body-mode {
-      color: ${(props) => props.theme.colors.text.yellow};
+      color: ${(props) => props.theme.brand};
     }
 
     &.cursor-default {
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/StyledWrapper.js
index cf5a4d068..6fd4c499f 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/StyledWrapper.js
@@ -18,7 +18,7 @@ const StyledWrapper = styled.div`
     }
 
     .selected-body-mode {
-      color: ${(props) => props.theme.colors.text.yellow};
+      color: ${(props) => props.theme.brand};
     }
   }
 
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.js
index 46a0b9a78..fc2574c88 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.js
@@ -61,7 +61,7 @@ const StyledWrapper = styled.div`
       cursor: pointer;
       transition: background-color 0.15s ease;
       font-size: ${(props) => props.theme.font.size.base};
-      color: ${(props) => props.theme.dropdown.primaryText};
+      color: ${(props) => props.theme.text};
       width: 100%;
       box-sizing: border-box;
 
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js
index a4b6a0ab7..f160816c3 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js
@@ -7,7 +7,7 @@ const StyledWrapper = styled.div`
       border: none;
       border-bottom: solid 2px transparent;
       margin-right: ${(props) => props.theme.tabs.marginRight};
-      color: var(--color-tab-inactive);
+      color: ${(props) => props.theme.colors.text.subtext0};
       cursor: pointer;
 
       &:focus,
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js
index a6942c2df..3b104dee9 100644
--- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/StyledWrapper.js
@@ -1,42 +1,39 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  border-left: 4px solid ${(props) => props.theme.colors.text.danger};
-  border-top: 1px solid transparent;
-  border-right: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-  border-radius: 0.375rem;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  max-height: 200px;
-  min-height: 70px;
+  border-left: 3px solid ${(props) => props.theme.colors.text.danger};
+  border-radius: ${(props) => props.theme.border.radius.sm};
+  max-height: 160px;
   overflow-y: auto;
-  background-color: ${(props) => (props.theme.bg === '#1e1e1e' ? 'rgba(40, 40, 40, 0.5)' : 'rgba(250, 250, 250, 0.9)')};
+  background-color: color-mix(in srgb, ${(props) => props.theme.colors.text.danger} 6%, transparent);
+  margin-bottom: 8px;
 
   .close-button {
-    opacity: 0.7;
-    transition: opacity 0.2s;
+    opacity: 0.6;
+    transition: opacity 0.15s ease;
 
     &:hover {
       opacity: 1;
     }
 
     svg {
-      color: ${(props) => props.theme.text};
+      color: ${(props) => props.theme.colors.text.muted};
     }
   }
 
   .error-title {
+    font-size: ${(props) => props.theme.font.size.sm};
     font-weight: 500;
-    margin-bottom: 0.375rem;
+    margin-bottom: 4px;
     color: ${(props) => props.theme.colors.text.danger};
   }
 
   .error-message {
     font-family: monospace;
     font-size: ${(props) => props.theme.font.size.xs};
-    line-height: 1.25rem;
+    line-height: 1.4;
     white-space: pre-wrap;
-    word-break: break-all;
+    word-break: break-word;
     color: ${(props) => props.theme.text};
   }
 `;
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/index.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/index.js
index d2376401d..48c607dce 100644
--- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcError/index.js
@@ -6,7 +6,7 @@ const GrpcError = ({ error, onClose }) => {
   if (!error) return null;
 
   return (
-    <StyledWrapper className="mt-4 mb-2">
+    <StyledWrapper>
       <div className="flex items-start gap-3 px-4 py-3">
         <div className="flex-1 min-w-0">
           <div className="error-title">gRPC Server Error</div>
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js
index b374ef9fd..bd0e0e445 100644
--- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js
@@ -3,94 +3,79 @@ import styled from 'styled-components';
 const StyledWrapper = styled.div`
   height: 100%;
   overflow: hidden;
-  background: ${(props) => props.theme.bg};
-  border-radius: 4px;
 
-  .CodeMirror {
-    height: 100%;
-    font-family: ${(props) => (props.font === 'default' ? 'monospace' : props.font)};
-    font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
+  .empty-state {
+    color: ${(props) => props.theme.colors.text.muted};
+    padding: 1rem;
   }
 
-  .accordion-header {
-    background-color: ${(props) => props.theme.requestTabPanel.card.bg};
+  .responses-container {
+    height: 100%;
+
+    &.single {
+      height: 100%;
+    }
+
+    &.multi {
+      overflow-y: auto;
+    }
+  }
+
+  .messages-list {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .message-item {
+    display: flex;
+    flex-direction: column;
+
+    &:not(.last) {
+      border-bottom: 1px solid ${(props) => props.theme.border.border1};
+    }
+  }
+
+  .message-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 0;
+    cursor: pointer;
+    user-select: none;
 
     &:hover {
-      background-color: ${(props) => props.theme.plainGrid.hoverBg};
-    }
-
-    &.open {
-      background-color: ${(props) => props.theme.plainGrid.hoverBg};
-    }
-  }
-
-  .error-header {
-    background-color: ${(props) => (props.theme.bg === '#1e1e1e' ? 'rgba(185, 28, 28, 0.1)' : '#fee2e2')};
-  }
-
-  .error-text {
-    color: ${(props) => props.theme.colors.text.danger};
-  }
-
-  div.tabs {
-    div.tab {
-      padding: 6px 0px;
-      border: none;
-      border-bottom: solid 2px transparent;
-      margin-right: ${(props) => props.theme.tabs.marginRight};
-      color: var(--color-tab-inactive);
-      cursor: pointer;
-
-      &:focus,
-      &:active,
-      &:focus-within,
-      &:focus-visible,
-      &:target {
-        outline: none !important;
-        box-shadow: none !important;
-      }
-
-      &.active {
-        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
-        color: ${(props) => props.theme.tabs.active.color} !important;
-        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
+      .toggle-btn {
+        color: ${(props) => props.theme.text};
       }
     }
   }
 
-  .stream-status {
-    display: inline-flex;
+  .message-label {
+    font-size: ${(props) => props.theme.font.size.sm};
+    color: ${(props) => props.theme.colors.text.subtext1};
+  }
+
+  .latest-badge {
+    margin-left: 8px;
+    padding: 2px 6px;
+    font-size: ${(props) => props.theme.font.size.xs};
+    font-weight: 500;
+    color: ${(props) => props.theme.colors.text.green};
+    background-color: color-mix(in srgb, ${(props) => props.theme.colors.text.green} 10%, transparent);
+    border-radius: ${(props) => props.theme.border.radius.sm};
+  }
+
+  .toggle-btn {
+    display: flex;
     align-items: center;
-
-    &.complete {
-      color: ${(props) => props.theme.colors.text.green};
-    }
-
-    &.cancelled {
-      color: ${(props) => props.theme.colors.text.danger};
-    }
-
-    &.streaming {
-      color: ${(props) => props.theme.colors.text.blue};
-    }
+    justify-content: center;
+    color: ${(props) => props.theme.colors.text.muted};
+    transition: color 0.15s ease;
   }
 
-  .message-counter {
-    display: inline-flex;
-    align-items: center;
-    margin-left: 10px;
-  }
-
-  .response-list {
-    max-height: 500px;
-    overflow-y: auto;
-  }
-
-  .response-message {
+  .message-content {
+    height: 240px;
     margin-bottom: 8px;
-    padding: 8px;
-    border-radius: 4px;
-    background-color: var(--color-panel-background);
   }
 `;
 
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/index.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/index.js
index 6d6c646e3..b36c132e2 100644
--- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/index.js
@@ -1,46 +1,31 @@
 import React, { useState, useEffect } from 'react';
-import Accordion from 'components/Accordion';
 import CodeEditor from 'components/CodeEditor';
 import { get } from 'lodash';
 import { useSelector } from 'react-redux';
 import { useTheme } from 'providers/Theme/index';
 import StyledWrapper from './StyledWrapper';
-import { formatISO9075 } from 'date-fns';
 import GrpcError from '../GrpcError';
+import { IconChevronDown, IconChevronUp } from '@tabler/icons';
 
 const GrpcQueryResult = ({ item, collection }) => {
   const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
   const [showErrorMessage, setShowErrorMessage] = useState(true);
+  const [expandedIndex, setExpandedIndex] = useState(0);
 
   const response = item.response || {};
   const responsesList = response?.responses || [];
-  // Reverse the responses list to show the most recent at the top
   const reversedResponsesList = [...responsesList].reverse();
   const hasError = response.isError;
   const hasResponses = responsesList.length > 0;
   const errorMessage = response.error;
 
-  // Reset error visibility when a new response is received
   useEffect(() => {
     if (hasError) {
       setShowErrorMessage(true);
     }
   }, [response, hasError]);
 
-  // Format a timestamp to a human-readable format
-  const formatTimestamp = (timestamp) => {
-    if (!timestamp) return 'Unknown time';
-
-    try {
-      const date = new Date(timestamp);
-      return formatISO9075(date);
-    } catch (e) {
-      return 'Invalid time';
-    }
-  };
-
-  // Format JSON for display
   const formatJSON = (data) => {
     try {
       if (typeof data === 'string') {
@@ -55,7 +40,7 @@ const GrpcQueryResult = ({ item, collection }) => {
   if (!hasResponses && !hasError) {
     return (
       <StyledWrapper className="w-full h-full relative flex flex-col">
-        <div className="text-gray-500 dark:text-gray-400 p-4">No messages received</div>
+        <div className="empty-state">No messages received</div>
       </StyledWrapper>
     );
   }
@@ -64,9 +49,8 @@ const GrpcQueryResult = ({ item, collection }) => {
     <StyledWrapper className="w-full h-full relative flex flex-col mt-2" data-testid="grpc-response-content">
       {hasError && showErrorMessage && <GrpcError error={errorMessage} onClose={() => setShowErrorMessage(false)} />}
       {hasResponses && (
-        <div className={`overflow-y-auto ${responsesList.length === 1 ? 'flex-1' : ''}`} data-testid="grpc-responses-container">
+        <div className={`responses-container ${responsesList.length === 1 ? 'single' : 'multi'}`} data-testid="grpc-responses-container">
           {responsesList.length === 1 ? (
-            // Single message - render directly without accordion
             <div className="h-full" data-testid="grpc-single-response">
               <CodeEditor
                 collection={collection}
@@ -79,43 +63,55 @@ const GrpcQueryResult = ({ item, collection }) => {
               />
             </div>
           ) : (
-            // Multiple messages - use accordion
-            <Accordion defaultIndex={0} dataTestId="grpc-responses-accordion">
-              {reversedResponsesList.map((response, index) => {
-                // Calculate the original response number (for display purposes)
+            <div className="messages-list" data-testid="grpc-responses-list">
+              {reversedResponsesList.map((resp, index) => {
                 const originalIndex = responsesList.length - index - 1;
+                const isExpanded = expandedIndex === index;
 
                 return (
-                  <Accordion.Item key={originalIndex} index={index} data-testid={`grpc-response-item-${originalIndex}`}>
-                    <Accordion.Header index={index} style={{ padding: '8px 12px', minHeight: '40px' }}>
-                      <div className="flex justify-between w-full">
-                        <div className="font-medium">
-                          Response {originalIndex + 1} {index === 0 ? '(Latest)' : ''}
-                        </div>
-                      </div>
-                    </Accordion.Header>
-                    <Accordion.Content index={index} style={{ padding: '0px' }}>
-                      <div className="h-60">
+                  <div
+                    key={originalIndex}
+                    className={`message-item ${isExpanded ? 'expanded' : 'collapsed'} ${index === reversedResponsesList.length - 1 ? 'last' : ''}`}
+                    data-testid={`grpc-response-item-${originalIndex}`}
+                  >
+                    <div
+                      className="message-header"
+                      onClick={() => setExpandedIndex(isExpanded ? -1 : index)}
+                    >
+                      <span className="message-label">
+                        Response {originalIndex + 1}
+                        {index === 0 && <span className="latest-badge">Latest</span>}
+                      </span>
+                      <button className="toggle-btn">
+                        {isExpanded ? (
+                          <IconChevronUp size={16} strokeWidth={1.5} />
+                        ) : (
+                          <IconChevronDown size={16} strokeWidth={1.5} />
+                        )}
+                      </button>
+                    </div>
+                    {isExpanded && (
+                      <div className="message-content">
                         <CodeEditor
                           collection={collection}
                           font={get(preferences, 'font.codeFont', 'default')}
                           fontSize={get(preferences, 'font.codeFontSize')}
                           theme={displayedTheme}
-                          value={formatJSON(response)}
+                          value={formatJSON(resp)}
                           mode="application/json"
                           readOnly={true}
                         />
                       </div>
-                    </Accordion.Content>
-                  </Accordion.Item>
+                    )}
+                  </div>
                 );
               })}
-            </Accordion>
+            </div>
           )}
         </div>
       )}
       {hasError && !hasResponses && !showErrorMessage && (
-        <div className="text-gray-500 dark:text-gray-400 p-4">
+        <div className="empty-state">
           No messages received. A server error occurred but has been dismissed.
         </div>
       )}
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/StyledWrapper.js
index 141057784..92e53fe8a 100644
--- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/StyledWrapper.js
@@ -6,17 +6,24 @@ const StyledWrapper = styled.div`
     border-collapse: collapse;
 
     thead {
-      color: #777777;
-      font-size: ${(props) => props.theme.font.size.sm};
+      color: ${(props) => props.theme.colors.text.muted};
+      font-size: ${(props) => props.theme.font.size.xs};
       font-weight: 500;
       text-transform: uppercase;
     }
 
     td {
-      padding: 6px 10px;
+      padding: 8px 10px;
+      font-size: ${(props) => props.theme.font.size.sm};
+
+      &.key {
+        color: ${(props) => props.theme.colors.text.subtext1};
+        font-weight: 500;
+      }
 
       &.value {
         word-break: break-all;
+        color: ${(props) => props.theme.text};
       }
     }
 
@@ -25,6 +32,10 @@ const StyledWrapper = styled.div`
         background-color: ${(props) => props.theme.table.striped};
       }
     }
+
+    .empty-message {
+      color: ${(props) => props.theme.colors.text.muted};
+    }
   }
 `;
 
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/index.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/index.js
index a7390558d..d16b1d05f 100644
--- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcResponseHeaders/index.js
@@ -24,7 +24,7 @@ const GrpcResponseHeaders = ({ metadata }) => {
             ))
           ) : (
             <tr>
-              <td colSpan="2" className="text-center py-4 text-gray-500">
+              <td colSpan="2" className="text-center py-4 empty-message">
                 No metadata received
               </td>
             </tr>
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/StyledWrapper.js
index 141057784..92e53fe8a 100644
--- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/StyledWrapper.js
@@ -6,17 +6,24 @@ const StyledWrapper = styled.div`
     border-collapse: collapse;
 
     thead {
-      color: #777777;
-      font-size: ${(props) => props.theme.font.size.sm};
+      color: ${(props) => props.theme.colors.text.muted};
+      font-size: ${(props) => props.theme.font.size.xs};
       font-weight: 500;
       text-transform: uppercase;
     }
 
     td {
-      padding: 6px 10px;
+      padding: 8px 10px;
+      font-size: ${(props) => props.theme.font.size.sm};
+
+      &.key {
+        color: ${(props) => props.theme.colors.text.subtext1};
+        font-weight: 500;
+      }
 
       &.value {
         word-break: break-all;
+        color: ${(props) => props.theme.text};
       }
     }
 
@@ -25,6 +32,10 @@ const StyledWrapper = styled.div`
         background-color: ${(props) => props.theme.table.striped};
       }
     }
+
+    .empty-message {
+      color: ${(props) => props.theme.colors.text.muted};
+    }
   }
 `;
 
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/index.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/index.js
index 7df1f5b45..02fdc484d 100644
--- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/ResponseTrailers/index.js
@@ -23,7 +23,7 @@ const ResponseTrailers = ({ trailers }) => {
             ))
           ) : (
             <tr>
-              <td colSpan="2" className="text-center py-4 text-gray-500">
+              <td colSpan="2" className="text-center py-4 empty-message">
                 No trailers received
               </td>
             </tr>
diff --git a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js
index d702b1537..19ba7a698 100644
--- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js
@@ -12,7 +12,7 @@ const StyledWrapper = styled.div`
       border: none;
       border-bottom: solid 2px transparent;
       margin-right: ${(props) => props.theme.tabs.marginRight};
-      color: var(--color-tab-inactive);
+      color: ${(props) => props.theme.colors.text.subtext0};
       cursor: pointer;
 
       &:focus,
diff --git a/packages/bruno-app/src/components/ResponsePane/Placeholder/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/Placeholder/StyledWrapper.js
index 369637b01..9b78e44f4 100644
--- a/packages/bruno-app/src/components/ResponsePane/Placeholder/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/Placeholder/StyledWrapper.js
@@ -7,7 +7,7 @@ const StyledWrapper = styled.div`
   width: 100%;
 
   .send-icon {
-    color: ${(props) => props.theme.requestTabPanel.responseSendIcon};
+    color: ${(props) => props.theme.background.surface2};
   }
 
   &.vertical-layout {
diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultTypeSelector/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultTypeSelector/StyledWrapper.js
index 6a3b66566..5a3bbe437 100644
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultTypeSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultTypeSelector/StyledWrapper.js
@@ -7,7 +7,7 @@ const StyledWrapper = styled.div`
   }
 
   .button-dropdown-button {
-    color: ${(props) => props.theme.dropdown.primaryText};
+    color: ${(props) => props.theme.text};
     border-color: ${(props) => props.theme.workspace.border};
 
   }
diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseActions/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/ResponseActions/StyledWrapper.js
index 6ba69090e..5b8d2e607 100644
--- a/packages/bruno-app/src/components/ResponsePane/ResponseActions/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseActions/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   button {
-    color: var(--color-tab-inactive);
+    color: ${(props) => props.theme.colors.text.subtext0};
     cursor: pointer;
 
     &:hover {
@@ -18,7 +18,7 @@ const StyledWrapper = styled.div`
   .cursor-pointer {
     display: flex;
     align-items: center;
-    color: var(--color-tab-inactive);
+    color: ${(props) => props.theme.colors.text.subtext0};
 
     &:hover {
       color: var(--color-tab-active);
diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseStopWatch/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/ResponseStopWatch/StyledWrapper.js
index 71e1d0591..ba919c56f 100644
--- a/packages/bruno-app/src/components/ResponsePane/ResponseStopWatch/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseStopWatch/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   font-size: ${(props) => props.theme.font.size.sm};
-  font-weight: 600;
+  font-weight: 500;
   color: ${(props) => props.theme.requestTabPanel.responseStatus};
   text-align: center;
 `;
diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseTime/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/ResponseTime/StyledWrapper.js
index 3bb71610d..13bf109f6 100644
--- a/packages/bruno-app/src/components/ResponsePane/ResponseTime/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/ResponseTime/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   font-size: ${(props) => props.theme.font.size.sm};
-  font-weight: 600;
+  font-weight: 500;
   color: ${(props) => props.theme.requestTabPanel.responseStatus};
 `;
 
diff --git a/packages/bruno-app/src/components/ResponsePane/SkippedRequest/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/SkippedRequest/StyledWrapper.js
index 922798c17..aae56b4c6 100644
--- a/packages/bruno-app/src/components/ResponsePane/SkippedRequest/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/SkippedRequest/StyledWrapper.js
@@ -4,7 +4,7 @@ const StyledWrapper = styled.div`
   padding-top: 20%;
   width: 100%;
   .send-icon {
-    color: ${(props) => props.theme.requestTabPanel.responseSendIcon};
+    color: ${(props) => props.theme.background.surface2};
   }
 `;
 
diff --git a/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
index ed97f6a8b..f8db8051f 100644
--- a/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
@@ -25,7 +25,7 @@ const StyledWrapper = styled.div`
       border: none;
       border-bottom: solid 2px transparent;
       margin-right: ${(props) => props.theme.tabs.marginRight};
-      color: var(--color-tab-inactive);
+      color: ${(props) => props.theme.colors.text.subtext0};
       cursor: pointer;
       flex-shrink: 1;
       overflow: hidden;
diff --git a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js
index d702b1537..19ba7a698 100644
--- a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js
@@ -12,7 +12,7 @@ const StyledWrapper = styled.div`
       border: none;
       border-bottom: solid 2px transparent;
       margin-right: ${(props) => props.theme.tabs.marginRight};
-      color: var(--color-tab-inactive);
+      color: ${(props) => props.theme.colors.text.subtext0};
       cursor: pointer;
 
       &:focus,
diff --git a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/StyledWrapper.js
index da9947118..a0e8c744e 100644
--- a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/StyledWrapper.js
@@ -1,31 +1,59 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  overflow-y: auto; 
+  overflow-y: auto;
 
-  .ws-message.new {
-    background-color: ${({ theme }) => theme.table.striped};
+  .empty-state {
+    padding: 1rem;
+    color: ${(props) => props.theme.colors.text.muted};
   }
 
-  .ws-message:not(:last-child) {
-    border-bottom: 1px solid ${({ theme }) => theme.table.border};
-  }
-
-  .ws-message:not(:last-child).open {
-    border-bottom-width: 0px;
-  }
-
-  .ws-incoming {
+  .ws-message {
     background: ${(props) => props.theme.bg};
-    border-color: ${(props) => props.theme.table.border};
+
+    &.new {
+      background-color: ${({ theme }) => theme.table.striped};
+    }
+
+    &:not(:last-child) {
+      border-bottom: 1px solid ${({ theme }) => theme.border.border1};
+    }
+
+    &:not(:last-child).open {
+      border-bottom-width: 0px;
+    }
+
+    .message-content {
+      color: ${(props) => props.theme.text};
+    }
+
+    .message-timestamp {
+      font-size: ${(props) => props.theme.font.size.xs};
+      color: ${(props) => props.theme.colors.text.muted};
+    }
+
+    .chevron-icon {
+      color: ${(props) => props.theme.colors.text.muted};
+    }
   }
 
-  .ws-outgoing {
-    background: ${(props) => props.theme.bg};
-    border-color: ${(props) => props.theme.table.border};
+  .ws-incoming .message-type-icon {
+    color: ${(props) => props.theme.colors.text.green};
   }
 
-  .CodeMirror { 
+  .ws-outgoing .message-type-icon {
+    color: ${(props) => props.theme.colors.text.yellow};
+  }
+
+  .ws-info .message-type-icon {
+    color: ${(props) => props.theme.colors.text.blue};
+  }
+
+  .ws-error .message-type-icon {
+    color: ${(props) => props.theme.colors.text.danger};
+  }
+
+  .CodeMirror {
     border-radius: 0.25rem;
   }
 
@@ -34,11 +62,12 @@ const StyledWrapper = styled.div`
   }
 
   div[role='tablist'] {
+    color: ${(props) => props.theme.colors.text.muted};
+
     .active {
       color: ${(props) => props.theme.colors.text.yellow};
     }
   }
-
 `;
 
 export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js
index ca560189f..c515c9ae6 100644
--- a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js
@@ -100,15 +100,17 @@ const WSMessageItem = ({ message, inFocus }) => {
       }}
       className={classnames('ws-message flex flex-col p-2', {
         'ws-incoming': isIncoming,
-        'ws-outgoing': !isIncoming,
+        'ws-outgoing': isOutgoing,
+        'ws-info': isInfo,
+        'ws-error': isError,
         'open': isOpen,
         'new': isNew
       })}
     >
       <div
         className={classnames('flex items-center justify-between', {
-          'cursor-pointer': !isInfo,
-          'cursor-not-allowed': isInfo
+          'cursor-pointer': canOpenMessage,
+          'cursor-not-allowed': !canOpenMessage
         })}
         onClick={(e) => {
           if (!canOpenMessage) return;
@@ -116,35 +118,26 @@ const WSMessageItem = ({ message, inFocus }) => {
         }}
       >
         <div className="flex min-w-0 shrink">
-          <span
-            className={classnames('font-medium flex items-center gap-1',
-              {
-                'text-green-700': isIncoming,
-                'text-yellow-700': isOutgoing,
-                'text-blue-700': isInfo,
-                'text-red-700': isError,
-                'text-red-700': isError
-              })}
-          >
+          <span className="message-type-icon">
             <TypeIcon type={message.type} />
           </span>
-          <span className="ml-3 text-ellipsis max-w-full overflow-hidden text-nowrap">{parsedContent.content}</span>
+          <span className="ml-3 text-ellipsis max-w-full overflow-hidden text-nowrap message-content">{parsedContent.content}</span>
         </div>
-        <div className="flex shrink-0 gap-2">
+        <div className="flex shrink-0 gap-2 items-center">
           {message.timestamp && (
-            <span className="text-xs text-gray-400">{new Date(message.timestamp).toISOString()}</span>
+            <span className="message-timestamp">{new Date(message.timestamp).toISOString()}</span>
           )}
           {canOpenMessage
             ? (
-                <span className="text-gray-600">
+                <span className="chevron-icon">
                   {isOpen ? (
-                    <IconChevronDown size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" />
+                    <IconChevronDown size={16} strokeWidth={1.5} />
                   ) : (
-                    <IconChevronRight size={16} strokeWidth={1.5} className="text-zinc-700 dark:text-zinc-300" />
+                    <IconChevronRight size={16} strokeWidth={1.5} />
                   )}
                 </span>
               )
-            : <span class="w-4"></span>}
+            : <span className="w-4"></span>}
         </div>
       </div>
       {isOpen && (
@@ -188,11 +181,11 @@ const WSMessageItem = ({ message, inFocus }) => {
 
 const WSMessagesList = ({ order = -1, messages = [] }) => {
   if (!messages.length) {
-    return <div className="p-4 text-gray-500">No messages yet.</div>;
+    return <StyledWrapper><div className="empty-state">No messages yet.</div></StyledWrapper>;
   }
   const ordered = order === -1 ? messages : messages.slice().reverse();
   return (
-    <StyledWrapper className="ws-messages-list mt-1 flex flex-col">
+    <StyledWrapper className="ws-messages-list mt-2 flex flex-col">
       {ordered.map((msg, idx, src) => {
         const inFocus = order === -1 ? src.length - 1 === idx : idx === 0;
         return <WSMessageItem key={msg.timestamp} inFocus={inFocus} id={idx} message={msg} />;
diff --git a/packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js b/packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js
index 7d0909815..f551c5f80 100644
--- a/packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js
@@ -7,7 +7,7 @@ const StyledWrapper = styled.div`
       border: none;
       border-bottom: solid 2px transparent;
       margin-right: ${(props) => props.theme.tabs.marginRight};
-      color: var(--color-tab-inactive);
+      color: ${(props) => props.theme.colors.text.subtext0};
       cursor: pointer;
 
       &:focus,
diff --git a/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx b/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx
index a6d2315a4..4d7bfeb55 100644
--- a/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx
+++ b/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx
@@ -88,7 +88,7 @@ const StyledWrapper = styled.div`
     transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
     
     &.is-selected {
-      background-color: ${(props) => props.theme.requestTabs.active.bg};
+      background-color: ${(props) => props.theme.background.surface2};
     }
     
     &.is-dragging {
diff --git a/packages/bruno-app/src/components/ShareCollection/StyledWrapper.js b/packages/bruno-app/src/components/ShareCollection/StyledWrapper.js
index 041efffa4..2cdb681be 100644
--- a/packages/bruno-app/src/components/ShareCollection/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ShareCollection/StyledWrapper.js
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 const StyledWrapper = styled.div`
   .tabs {
@@ -7,7 +8,7 @@ const StyledWrapper = styled.div`
       border: none;
       border-bottom: solid 2px transparent;
       margin-right: ${(props) => props.theme.tabs.marginRight};
-      color: var(--color-tab-inactive);
+      color: ${(props) => props.theme.colors.text.subtext0};
       cursor: pointer;
 
       &:focus,
@@ -31,14 +32,24 @@ const StyledWrapper = styled.div`
     display: flex;
     border-radius: ${(props) => props.theme.border.radius.base};
     padding: 10px;
-    border: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder};
-    background-color: ${(props) => props.theme.sidebar.bg};
+    border: 1px solid ${(props) => props.theme.border.border0};
+    background-color: ${(props) => props.theme.background.base};
     color: ${(props) => props.theme.text};
     cursor: pointer;
     transition: all 0.1s ease;
 
+    &.no-padding {
+      padding: 0px;
+    }
+
+    .note-warning {
+      color: ${(props) => props.theme.colors.text.warning};
+      background-color: ${(props) => rgba(props.theme.colors.text.warning, 0.06)};
+    }
+
     &:hover {
-      background-color: ${(props) => props.theme.listItem.hoverBg};
+      background-color: ${(props) => props.theme.background.mantle};
+      border-color: ${(props) => props.theme.border.border2};
     }
   }
 `;
diff --git a/packages/bruno-app/src/components/ShareCollection/index.js b/packages/bruno-app/src/components/ShareCollection/index.js
index 74e2c6d23..5e958dd31 100644
--- a/packages/bruno-app/src/components/ShareCollection/index.js
+++ b/packages/bruno-app/src/components/ShareCollection/index.js
@@ -105,7 +105,7 @@ const ShareCollection = ({ onClose, collectionUid }) => {
           </div>
 
           <div
-            className={`flex !flex-col share-button ${
+            className={`flex !flex-col share-button no-padding ${
               isCollectionLoading
                 ? 'opacity-50 cursor-not-allowed'
                 : 'cursor-pointer'
@@ -113,7 +113,7 @@ const ShareCollection = ({ onClose, collectionUid }) => {
             onClick={isCollectionLoading ? undefined : handleExportPostmanCollection}
           >
             {hasNonExportableRequestTypes.has && (
-              <div className="px-3 py-2 bg-yellow-50 w-full dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-400 text-xs border-b border-yellow-100 dark:border-yellow-800/20 flex items-center">
+              <div className="px-3 py-2 w-full flex items-center note-warning">
                 <IconAlertTriangle size={16} className="mr-2 flex-shrink-0" />
                 <span>
                   Note:
diff --git a/packages/bruno-app/src/components/Sidebar/ApiSpecs/ApiSpecBadge/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/ApiSpecs/ApiSpecBadge/StyledWrapper.js
deleted file mode 100644
index 54b81c4ec..000000000
--- a/packages/bruno-app/src/components/Sidebar/ApiSpecs/ApiSpecBadge/StyledWrapper.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .api-specs-badge {
-    margin-inline: 0.5rem;
-    background-color: ${(props) => props.theme.sidebar.badge.bg};
-    border-radius: 5px;
-  }
-`;
-
-export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/Sidebar/ApiSpecs/ApiSpecBadge/index.js b/packages/bruno-app/src/components/Sidebar/ApiSpecs/ApiSpecBadge/index.js
deleted file mode 100644
index 65022d1cf..000000000
--- a/packages/bruno-app/src/components/Sidebar/ApiSpecs/ApiSpecBadge/index.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { IconFileCode } from '@tabler/icons';
-import StyledWrapper from './StyledWrapper';
-
-const ApiSpecsBadge = () => {
-  return (
-    <StyledWrapper>
-      <div className="items-center mt-2 relative">
-        <div className="api-specs-badge flex items-center justify-between px-2">
-          <div className="flex items-center py-1 select-none">
-            <span className="mr-2">
-              <IconFileCode size={18} strokeWidth={1.5} />
-            </span>
-            <span>APIs</span>
-          </div>
-        </div>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default ApiSpecsBadge;
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/StyledWrapper.js
index a51b4390d..9c02ee4d2 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/StyledWrapper.js
@@ -5,7 +5,7 @@ const StyledWrapper = styled.div`
   height: 50vh;
   display: flex;
   flex-direction: column;
-  background-color: ${(props) => props.theme.collection.environment.settings.bg};
+  background-color: ${(props) => props.theme.background.base};
 
   .code-generator {
     display: flex;
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/StyledWrapper.js
index c45141ee0..5f1d4e962 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/StyledWrapper.js
@@ -25,7 +25,7 @@ const StyledWrapper = styled.div`
     display: inline-flex;
     align-items: center;
     padding: 6px 12px;
-    background-color: ${(props) => props.theme.requestTabs.active.bg};
+    background-color: ${(props) => props.theme.background.surface2};
     border: 1px solid ${(props) => props.theme.requestTabs.bottomBorder};
     border-radius: 4px;
     font-size: ${(props) => props.theme.font.size.sm};
diff --git a/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js b/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js
index 13f1635e6..f2546babe 100644
--- a/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/CreateCollection/index.js
@@ -320,12 +320,12 @@ const CreateCollection = ({ onClose, defaultLocation: propDefaultLocation }) =>
               </div>
               <div className="flex justify-end">
                 <span className="mr-2">
-                  <Button type="button" size="sm" color="secondary" variant="ghost" onClick={onClose}>
+                  <Button type="button" color="secondary" variant="ghost" onClick={onClose}>
                     Cancel
                   </Button>
                 </span>
                 <span>
-                  <Button type="submit" size="sm">
+                  <Button type="submit">
                     Create
                   </Button>
                 </span>
diff --git a/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/StyledWrapper.js
index 202b810e6..3de12e12b 100644
--- a/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/StyledWrapper.js
@@ -1,17 +1,18 @@
 import styled from 'styled-components';
+import { darken, rgba } from 'polished';
 
 const Wrapper = styled.div`
   .current-group {
-    background-color: ${(props) => props.theme.sidebar.badge.bg};
+    background-color: ${(props) => props.theme.background.surface1};
     border-radius: 4px;
-    padding: 0.4rem;
+    padding: 0.3rem 0.6rem;
     cursor: pointer;
-    border: 1px solid ${(props) => props.theme.sidebar.badge.border || 'transparent'};
+    border: 1px solid ${(props) => props.theme.background.surface2};
   }
 
   .current-group:hover {
-    background-color: ${(props) => props.theme.sidebar.badge.hoverBg || props.theme.sidebar.badge.bg};
-  }
+    background-color: ${(props) => darken(0.03, props.theme.background.surface1)};
+    border-color: ${(props) => darken(0.03, props.theme.background.surface2)};
 
   /* Fix dropdown positioning */
   [data-tippy-root] {
diff --git a/packages/bruno-app/src/components/StatusBar/ThemeDropdown/StyledWrapper.js b/packages/bruno-app/src/components/StatusBar/ThemeDropdown/StyledWrapper.js
new file mode 100644
index 000000000..8ee95f244
--- /dev/null
+++ b/packages/bruno-app/src/components/StatusBar/ThemeDropdown/StyledWrapper.js
@@ -0,0 +1,81 @@
+import styled from 'styled-components';
+import { rgba } from 'polished';
+
+const StyledWrapper = styled.div`
+  .theme-menu {
+    min-width: 160px;
+    padding: 4px 0;
+    background: ${(props) => props.theme.dropdown.bg};
+    border: 1px solid ${(props) => props.theme.dropdown.separator};
+    border-radius: ${(props) => props.theme.border.radius.md};
+    box-shadow: ${(props) => props.theme.dropdown.shadow};
+  }
+
+  .menu-label {
+    padding: 6px 12px 4px;
+    font-size: 11px;
+    font-weight: 500;
+    text-transform: uppercase;
+    color: ${(props) => props.theme.dropdown.mutedText};
+    letter-spacing: 0.5px;
+  }
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 12px;
+    cursor: pointer;
+    color: ${(props) => props.theme.dropdown.color};
+    font-size: ${(props) => props.theme.font.size.sm};
+
+    &:hover {
+      background: ${(props) => props.theme.dropdown.hoverBg};
+    }
+
+    &.active {
+      color: ${(props) => props.theme.dropdown.selectedColor};
+      background: ${(props) => rgba(props.theme.dropdown.selectedColor, 0.07)};
+    }
+
+    &.has-submenu {
+      padding-right: 8px;
+    }
+  }
+
+  .menu-item-icon {
+    margin-right: 8px;
+    opacity: 0.7;
+  }
+
+  .menu-item-label {
+    flex: 1;
+  }
+
+  .check-icon {
+    color: ${(props) => props.theme.dropdown.selectedColor};
+    margin-left: 8px;
+  }
+
+  .chevron-icon {
+    opacity: 0.6;
+    margin-left: 8px;
+  }
+
+  .menu-divider {
+    height: 1px;
+    background: ${(props) => props.theme.dropdown.separator};
+    margin: 4px 0;
+  }
+
+  .submenu {
+    min-width: 180px;
+    padding: 4px 0;
+    background: ${(props) => props.theme.dropdown.bg};
+    border: 1px solid ${(props) => props.theme.dropdown.separator};
+    border-radius: ${(props) => props.theme.border.radius.md};
+    box-shadow: ${(props) => props.theme.dropdown.shadow};
+  }
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/StatusBar/ThemeDropdown/index.js b/packages/bruno-app/src/components/StatusBar/ThemeDropdown/index.js
new file mode 100644
index 000000000..a25c1f680
--- /dev/null
+++ b/packages/bruno-app/src/components/StatusBar/ThemeDropdown/index.js
@@ -0,0 +1,181 @@
+import React, { useState } from 'react';
+import Tippy from '@tippyjs/react';
+import { IconChevronRight, IconCheck, IconSun, IconMoon, IconDeviceDesktop } from '@tabler/icons';
+import ToolHint from 'components/ToolHint';
+import { useTheme } from 'providers/Theme';
+import { getLightThemes, getDarkThemes } from 'themes/index';
+import StyledWrapper from './StyledWrapper';
+
+const ThemeDropdown = ({ children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [lightSubmenuOpen, setLightSubmenuOpen] = useState(false);
+  const [darkSubmenuOpen, setDarkSubmenuOpen] = useState(false);
+  const [tooltipEnabled, setTooltipEnabled] = useState(true);
+
+  const {
+    storedTheme,
+    setStoredTheme,
+    themeVariantLight,
+    themeVariantDark,
+    setThemeVariantLight,
+    setThemeVariantDark
+  } = useTheme();
+
+  const lightThemes = getLightThemes();
+  const darkThemes = getDarkThemes();
+
+  const handleModeSelect = (mode) => {
+    setStoredTheme(mode);
+  };
+
+  const handleThemeSelect = (themeId, isLight) => {
+    if (isLight) {
+      setThemeVariantLight(themeId);
+    } else {
+      setThemeVariantDark(themeId);
+    }
+    setIsOpen(false);
+    setLightSubmenuOpen(false);
+    setDarkSubmenuOpen(false);
+  };
+
+  const renderSubmenu = (themes, isLight, currentVariant) => (
+    <div className="submenu">
+      {themes.map((theme) => (
+        <div
+          key={theme.id}
+          className={`menu-item ${currentVariant === theme.id ? 'active' : ''}`}
+          onClick={() => handleThemeSelect(theme.id, isLight)}
+        >
+          <span className="menu-item-label">{theme.name}</span>
+          {currentVariant === theme.id && (
+            <IconCheck size={14} strokeWidth={2} className="check-icon" />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+
+  const menuContent = (
+    <StyledWrapper>
+      <div className="theme-menu">
+        {/* Mode Section */}
+        <div className="menu-label">Mode</div>
+        <div
+          className={`menu-item ${storedTheme === 'light' ? 'active' : ''}`}
+          onClick={() => handleModeSelect('light')}
+        >
+          <IconSun size={14} strokeWidth={1.5} className="menu-item-icon" />
+          <span className="menu-item-label">Light</span>
+          {storedTheme === 'light' && (
+            <IconCheck size={14} strokeWidth={2} className="check-icon" />
+          )}
+        </div>
+        <div
+          className={`menu-item ${storedTheme === 'dark' ? 'active' : ''}`}
+          onClick={() => handleModeSelect('dark')}
+        >
+          <IconMoon size={14} strokeWidth={1.5} className="menu-item-icon" />
+          <span className="menu-item-label">Dark</span>
+          {storedTheme === 'dark' && (
+            <IconCheck size={14} strokeWidth={2} className="check-icon" />
+          )}
+        </div>
+        <div
+          className={`menu-item ${storedTheme === 'system' ? 'active' : ''}`}
+          onClick={() => handleModeSelect('system')}
+        >
+          <IconDeviceDesktop size={14} strokeWidth={1.5} className="menu-item-icon" />
+          <span className="menu-item-label">System</span>
+          {storedTheme === 'system' && (
+            <IconCheck size={14} strokeWidth={2} className="check-icon" />
+          )}
+        </div>
+
+        <div className="menu-divider" />
+
+        {/* Light Themes with Submenu */}
+        <Tippy
+          content={renderSubmenu(lightThemes, true, themeVariantLight)}
+          placement="right-start"
+          interactive={true}
+          arrow={false}
+          offset={[0, 2]}
+          animation={false}
+          visible={lightSubmenuOpen}
+          onClickOutside={() => setLightSubmenuOpen(false)}
+          appendTo="parent"
+        >
+          <div
+            className="menu-item has-submenu"
+            onMouseEnter={() => {
+              setLightSubmenuOpen(true);
+              setDarkSubmenuOpen(false);
+            }}
+          >
+            <span className="menu-item-label">Light Themes</span>
+            <IconChevronRight size={14} strokeWidth={2} className="chevron-icon" />
+          </div>
+        </Tippy>
+
+        {/* Dark Themes with Submenu */}
+        <Tippy
+          content={renderSubmenu(darkThemes, false, themeVariantDark)}
+          placement="right-start"
+          interactive={true}
+          arrow={false}
+          offset={[0, 2]}
+          animation={false}
+          visible={darkSubmenuOpen}
+          onClickOutside={() => setDarkSubmenuOpen(false)}
+          appendTo="parent"
+        >
+          <div
+            className="menu-item has-submenu"
+            onMouseEnter={() => {
+              setDarkSubmenuOpen(true);
+              setLightSubmenuOpen(false);
+            }}
+          >
+            <span className="menu-item-label">Dark Themes</span>
+            <IconChevronRight size={14} strokeWidth={2} className="chevron-icon" />
+          </div>
+        </Tippy>
+      </div>
+    </StyledWrapper>
+  );
+
+  const handleOpen = () => {
+    setTooltipEnabled(false);
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setLightSubmenuOpen(false);
+    setDarkSubmenuOpen(false);
+    // Small delay before re-enabling tooltip to prevent flash
+    setTimeout(() => setTooltipEnabled(true), 100);
+  };
+
+  return (
+    <ToolHint text="Theme" toolhintId="ThemeDropdown" place="top" offset={10} hidden={!tooltipEnabled}>
+      <Tippy
+        content={menuContent}
+        placement="top-start"
+        interactive={true}
+        arrow={false}
+        animation={false}
+        visible={isOpen}
+        onClickOutside={handleClose}
+        appendTo="parent"
+      >
+        <div onClick={() => isOpen ? handleClose() : handleOpen()}>
+          {children}
+        </div>
+      </Tippy>
+    </ToolHint>
+  );
+};
+
+export default ThemeDropdown;
diff --git a/packages/bruno-app/src/components/StatusBar/index.js b/packages/bruno-app/src/components/StatusBar/index.js
index b41af0840..1482487df 100644
--- a/packages/bruno-app/src/components/StatusBar/index.js
+++ b/packages/bruno-app/src/components/StatusBar/index.js
@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { IconSettings, IconCookie, IconTool, IconSearch } from '@tabler/icons';
+import { IconSettings, IconCookie, IconTool, IconSearch, IconPalette } from '@tabler/icons';
 import Mousetrap from 'mousetrap';
 import { getKeyBindingsForActionAllOS } from 'providers/Hotkeys/keyMappings';
 import ToolHint from 'components/ToolHint';
 import Preferences from 'components/Preferences';
-import IconSidebarToggle from 'components/Icons/IconSidebarToggle';
 import Cookies from 'components/Cookies';
 import Notifications from 'components/Notifications';
 import Portal from 'components/Portal';
+import ThemeDropdown from './ThemeDropdown';
 import { showPreferences } from 'providers/ReduxStore/slices/app';
 import { openConsole } from 'providers/ReduxStore/slices/logs';
 import { useApp } from 'providers/App';
@@ -81,6 +81,17 @@ const StatusBar = () => {
               </button>
             </ToolHint>
 
+            <ThemeDropdown>
+              <button
+                className="status-bar-button"
+                data-trigger="theme"
+                tabIndex={0}
+                aria-label="Change Theme"
+              >
+                <IconPalette size={16} strokeWidth={1.5} aria-hidden="true" />
+              </button>
+            </ThemeDropdown>
+
             <ToolHint text="Notifications" toolhintId="Notifications" place="top" offset={10}>
               <div className="status-bar-button">
                 <Notifications />
diff --git a/packages/bruno-app/src/components/Table-v2/StyledWrapper.js b/packages/bruno-app/src/components/Table-v2/StyledWrapper.js
deleted file mode 100644
index 85efd5157..000000000
--- a/packages/bruno-app/src/components/Table-v2/StyledWrapper.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  table {
-    width: 100%;
-    display: grid;
-    overflow-y: hidden;
-    overflow-x: auto;
-    padding: 0 1.5px;
-    border-radius: 8px;
-
-    // for icon hover
-    position: inherit;
-
-    grid-template-columns: ${({ columns }) =>
-      columns?.[0]?.width
-        ? columns.map((col) => `${col?.width}`).join(' ')
-        : columns.map((col) => `${100 / columns.length}%`).join(' ')};
-  }
-
-  table thead,
-  table tbody,
-  table tr {
-    display: contents;
-    border: none;
-  }
-
-  table th {
-    position: relative;
-    border: none;
-    border-bottom: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77;
-    background: ${(props) => props.theme.examples.table.thead.bg};
-    color: ${(props) => props.theme.examples.table.thead.color};
-    font-weight: 400;
-
-    tr td {
-      border: none;
-      color: ${(props) => props.theme.examples.table.thead.color};
-      background: ${(props) => props.theme.examples.table.thead.bg};
-    }
-  }
-
-  table tr td {
-    padding: 0.5rem;
-    text-align: left;
-    border: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77;
-  }
-
-  tr {
-    transition: transform 0.2s ease-in-out;
-  }
-
-  tr.dragging {
-    opacity: 0.5;
-  }
-
-  tr.hovered {
-    transform: translateY(10px); /* Adjust the value as needed for the animation effect */
-  }
-
-  table tr th {
-    padding: 0.5rem;
-    text-align: left;
-    border-top: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77;
-    font-weight: 400;
-
-    &:nth-child(1) {
-      border-left: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77;
-    }
-
-    &:last-child {
-      border-right: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77;
-    }
-  }
-`;
-
-export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/Table-v2/index.js b/packages/bruno-app/src/components/Table-v2/index.js
deleted file mode 100644
index 5cd55525b..000000000
--- a/packages/bruno-app/src/components/Table-v2/index.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import { useState, useRef, useEffect, useCallback } from 'react';
-import StyledWrapper from './StyledWrapper';
-
-const Table = ({ minColumnWidth = 1, headers = [], children }) => {
-  const [activeColumnIndex, setActiveColumnIndex] = useState(null);
-  const tableRef = useRef(null);
-
-  const columns = headers?.map((item) => ({
-    ...item,
-    ref: useRef()
-  }));
-
-  const updateDivHeights = () => {
-    if (tableRef.current) {
-      const height = tableRef.current.offsetHeight;
-      columns.forEach((col) => {
-        if (col.ref.current) {
-          col.ref.current.querySelector('.resizer').style.height = `${height}px`;
-        }
-      });
-    }
-  };
-
-  useEffect(() => {
-    updateDivHeights();
-    window.addEventListener('resize', updateDivHeights);
-
-    return () => {
-      window.removeEventListener('resize', updateDivHeights);
-    };
-  }, [columns]);
-
-  useEffect(() => {
-    if (tableRef.current) {
-      const observer = new MutationObserver(updateDivHeights);
-      observer.observe(tableRef.current, { childList: true, subtree: true });
-
-      return () => {
-        observer.disconnect();
-      };
-    }
-  }, [columns]);
-
-  const handleMouseDown = (index) => (e) => {
-    setActiveColumnIndex(index);
-  };
-
-  const handleMouseMove = useCallback((e) => {
-    const gridColumns = columns.map((col, i) => {
-      if (i === activeColumnIndex) {
-        const width = e.clientX - col.ref?.current?.getBoundingClientRect()?.left;
-
-        if (width >= minColumnWidth) {
-          return `${width}px`;
-        }
-      }
-      return `${col.ref.current.offsetWidth}px`;
-    });
-
-    tableRef.current.style.gridTemplateColumns = `${gridColumns.join(' ')}`;
-  },
-  [activeColumnIndex, columns, minColumnWidth]);
-
-  const removeListeners = useCallback(() => {
-    window.removeEventListener('mousemove', handleMouseMove);
-    window.removeEventListener('mouseup', removeListeners);
-  }, [handleMouseMove]);
-
-  const handleMouseUp = useCallback(() => {
-    setActiveColumnIndex(null);
-    removeListeners?.();
-  }, [removeListeners]);
-
-  useEffect(() => {
-    if (activeColumnIndex !== null) {
-      window.addEventListener('mousemove', handleMouseMove);
-      window.addEventListener('mouseup', handleMouseUp);
-    }
-    return () => {
-      removeListeners();
-    };
-  }, [activeColumnIndex, handleMouseMove, handleMouseUp, removeListeners]);
-
-  return (
-    <StyledWrapper columns={columns}>
-      <div className="relative">
-        <table ref={tableRef} className="inherit">
-          <thead>
-            <tr>
-              {columns.map(({ ref, name }, i) => (
-                <th ref={ref} key={name} title={name}>
-                  <span>{name}</span>
-                  <div
-                    className="resizer absolute cursor-col-resize w-[4px] right-[-2px] top-0 z-10 opacity-50 hover:bg-blue-500 active:bg-blue-500"
-                    onMouseDown={handleMouseDown(i)}
-                  >
-                  </div>
-                </th>
-              ))}
-            </tr>
-          </thead>
-          {children}
-        </table>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default Table;
diff --git a/packages/bruno-app/src/components/Table/StyledWrapper.js b/packages/bruno-app/src/components/Table/StyledWrapper.js
index 5e7132c16..c94da291c 100644
--- a/packages/bruno-app/src/components/Table/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Table/StyledWrapper.js
@@ -25,14 +25,14 @@ const StyledWrapper = styled.div`
 
   table th {
     position: relative;
-    border-bottom: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77;
+    border-bottom: 1px solid ${(props) => props.theme.border.BORDER0};
   }
 
   table tr td {
     padding: 0.5rem;
     text-align: left;
-    border-top: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77;
-    border-right: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77;
+    border-top: 1px solid ${(props) => props.theme.border.BORDER0};
+    border-right: 1px solid ${(props) => props.theme.border.BORDER0};
   }
 
   tr {
@@ -50,11 +50,11 @@ const StyledWrapper = styled.div`
   table tr th {
     padding: 0.5rem;
     text-align: left;
-    border-top: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77;
-    border-right: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77;
+    border-top: 1px solid ${(props) => props.theme.border.BORDER0};
+    border-right: 1px solid ${(props) => props.theme.border.BORDER0};
 
     &:nth-child(1) {
-      border-left: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder}77;
+      border-left: 1px solid ${(props) => props.theme.border.BORDER0};
     }
   }
 `;
diff --git a/packages/bruno-app/src/components/TagList/StyledWrapper.js b/packages/bruno-app/src/components/TagList/StyledWrapper.js
index 2aa48f248..dffbcae51 100644
--- a/packages/bruno-app/src/components/TagList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/TagList/StyledWrapper.js
@@ -26,7 +26,7 @@ const StyledWrapper = styled.div`
     cursor: default;
 
     &:has(.tag-remove:hover) {
-      background-color: ${(props) => props.theme.requestTabs.active.bg};
+      background-color: ${(props) => props.theme.background.surface2};
       border-color: ${(props) => props.theme.requestTabs.active.border || props.theme.requestTabs.bottomBorder};
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       transform: translateY(-1px);
diff --git a/packages/bruno-app/src/components/ToolHint/StyledWrapper.js b/packages/bruno-app/src/components/ToolHint/StyledWrapper.js
deleted file mode 100644
index 8cbe85f38..000000000
--- a/packages/bruno-app/src/components/ToolHint/StyledWrapper.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  background-color: ${(props) => props.theme.sidebar.badge};
-  color: ${(props) => props.theme.text};
-`;
-
-export default Wrapper;
diff --git a/packages/bruno-app/src/components/ToolHint/index.js b/packages/bruno-app/src/components/ToolHint/index.js
index cc1f40d73..5da713159 100644
--- a/packages/bruno-app/src/components/ToolHint/index.js
+++ b/packages/bruno-app/src/components/ToolHint/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Tooltip as ReactToolHint } from 'react-tooltip';
-import StyledWrapper from './StyledWrapper';
 import { useTheme } from 'providers/Theme';
 
 const ToolHint = ({
@@ -20,8 +19,8 @@ const ToolHint = ({
   const { theme: contextTheme } = useTheme();
   const appliedTheme = theme || contextTheme;
 
-  const toolhintBackgroundColor = appliedTheme?.sidebar.badge.bg || 'black';
-  const toolhintTextColor = appliedTheme?.text || 'white';
+  const toolhintBackgroundColor = appliedTheme?.background.surface1;
+  const toolhintTextColor = appliedTheme?.text;
 
   const combinedToolhintStyle = {
     ...tooltipStyle,
@@ -40,21 +39,19 @@ const ToolHint = ({
     <>
       {!anchorSelect && <span id={toolhintId} className={className}>{children}</span>}
       {anchorSelect && children}
-
-      <StyledWrapper theme={appliedTheme}>
-        <ReactToolHint
-          {...toolhintProps_final}
-          content={anchorSelect ? undefined : text}
-          className="toolhint"
-          offset={offset}
-          place={place}
-          hidden={hidden}
-          positionStrategy={positionStrategy}
-          noArrow={true}
-          delayShow={delayShow}
-          style={combinedToolhintStyle}
-        />
-      </StyledWrapper>
+      <ReactToolHint
+        {...toolhintProps_final}
+        content={anchorSelect ? undefined : text}
+        className="toolhint"
+        offset={offset}
+        place={place}
+        hidden={hidden}
+        positionStrategy={positionStrategy}
+        noArrow={true}
+        delayShow={delayShow}
+        style={combinedToolhintStyle}
+        opacity={1}
+      />
     </>
   );
 };
diff --git a/packages/bruno-app/src/components/VariablesEditor/index.js b/packages/bruno-app/src/components/VariablesEditor/index.js
index ea02b1615..b74d630db 100644
--- a/packages/bruno-app/src/components/VariablesEditor/index.js
+++ b/packages/bruno-app/src/components/VariablesEditor/index.js
@@ -88,8 +88,8 @@ const VariablesEditor = ({ collection }) => {
 
   const reactInspectorTheme
     = displayedTheme === 'light'
-      ? { ...chromeLight, OBJECT_VALUE_STRING_COLOR: theme.variables.runtime.color }
-      : { ...chromeDark, OBJECT_VALUE_STRING_COLOR: theme.variables.runtime.color };
+      ? { ...chromeLight, OBJECT_VALUE_STRING_COLOR: theme.text.base }
+      : { ...chromeDark, OBJECT_VALUE_STRING_COLOR: theme.text.base };
 
   return (
     <StyledWrapper className="px-4 py-4 overflow-auto">
diff --git a/packages/bruno-app/src/components/WorkspaceHome/StyledWrapper.js b/packages/bruno-app/src/components/WorkspaceHome/StyledWrapper.js
index dbc673a8d..6415e4f3f 100644
--- a/packages/bruno-app/src/components/WorkspaceHome/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/StyledWrapper.js
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 const StyledWrapper = styled.div`
   .main-content {
@@ -67,7 +68,7 @@ const StyledWrapper = styled.div`
       color: ${(props) => props.theme.colors.text.green};
 
       &:hover {
-        background: ${(props) => props.theme.colors.text.green}1A;
+        background-color: ${(props) => rgba(props.theme.colors.text.green, 0.1)};
       }
     }
 
@@ -75,7 +76,7 @@ const StyledWrapper = styled.div`
       color: ${(props) => props.theme.colors.text.danger};
 
       &:hover {
-        background: ${(props) => props.theme.colors.text.danger}1A;
+        background-color: ${(props) => rgba(props.theme.colors.text.danger, 0.1)};
       }
     }
   }
@@ -93,21 +94,6 @@ const StyledWrapper = styled.div`
     min-width: 140px;
   }
 
-  .dropdown-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 10px;
-    cursor: pointer;
-    transition: background 0.15s;
-    color: ${(props) => props.theme.text};
-    font-size: ${(props) => props.theme.font.size.sm};
-
-    &:hover {
-      background: ${(props) => props.theme.listItem.hoverBg};
-    }
-  }
-
   .tab-content {
     flex: 1;
     overflow: hidden;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/StyledWrapper.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/StyledWrapper.js
index a024795df..efec586f9 100644
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/StyledWrapper.js
@@ -88,7 +88,7 @@ const StyledWrapper = styled.div`
     width: 52px;
     height: 52px;
     border-radius: 8px;
-    background: ${(props) => props.theme.workspace.card.bg};
+    background: ${(props) => props.theme.background.mantle};
     border: 1px solid ${(props) => props.theme.workspace.border};
     color: ${(props) => props.theme.colors.text.muted};
     margin-bottom: 16px;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.js
index b69047d02..ed6ce9f52 100644
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.js
@@ -8,6 +8,7 @@ import Markdown from 'components/MarkDown';
 import CodeEditor from 'components/CodeEditor';
 import StyledWrapper from './StyledWrapper';
 import { IconFileText, IconEdit, IconX } from '@tabler/icons';
+import Button from 'ui/Button';
 import toast from 'react-hot-toast';
 
 const WorkspaceDocs = ({ workspace }) => {
@@ -113,9 +114,9 @@ const WorkspaceDocs = ({ workspace }) => {
               <li>Key workflows</li>
               <li>Resources & FAQs</li>
             </ul>
-            <button className="add-docs-btn" onClick={handleAddDocumentation}>
+            <Button color="secondary" size="md" onClick={handleAddDocumentation}>
               Add Documentation
-            </button>
+            </Button>
           </div>
         )}
       </div>
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
index 30d294cee..e79d3dc77 100644
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
@@ -9,7 +9,7 @@ const Wrapper = styled.div`
   .table-container {
     overflow-y: auto;
     border-radius: 8px;
-    border: ${(props) => props.theme.workspace.environments.indentBorder};
+    border: solid 1px ${(props) => props.theme.border.border0};
   }
 
   table {
@@ -45,8 +45,8 @@ const Wrapper = styled.div`
       
       td {
         padding: 5px 10px !important;
-        border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
-        border-right: ${(props) => props.theme.workspace.environments.indentBorder};
+        border-bottom: solid 1px ${(props) => props.theme.border.border0};
+        border-right: ${(props) => props.theme.border.border0};
         
         &:last-child {
           border-right: none;
@@ -63,8 +63,8 @@ const Wrapper = styled.div`
         }
         
         td {
-          border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
-          border-right: ${(props) => props.theme.workspace.environments.indentBorder};
+          border-bottom: solid 1px ${(props) => props.theme.border.border0};
+          border-right: solid 1px ${(props) => props.theme.border.border0};
           
           &:last-child {
             border-right: none;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js
index 0fa99802c..567d56039 100644
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 const StyledWrapper = styled.div`
   display: flex;
@@ -174,7 +175,7 @@ const StyledWrapper = styled.div`
     }
     
     &.active {
-      background: ${(props) => props.theme.workspace.environments.activeBg};
+      background: ${(props) => props.theme.background.surface0};
       color: ${(props) => props.theme.text};
     }
     
@@ -250,19 +251,18 @@ const StyledWrapper = styled.div`
         transition: all 0.15s ease;
         
         &.save {
-          color: ${(props) => props.theme.textLink};
+          color: ${(props) => props.theme.colors.text.green};
           
           &:hover {
-            background: ${(props) => props.theme.listItem.hoverBg};
+            background: ${(props) => rgba(props.theme.colors.text.green, 0.1)};
           }
         }
         
         &.cancel {
-          color: ${(props) => props.theme.colors.text.muted};
+          color: ${(props) => props.theme.colors.text.danger};
           
           &:hover {
-            background: ${(props) => props.theme.listItem.hoverBg};
-            color: ${(props) => props.theme.text};
+            background: ${(props) => rgba(props.theme.colors.text.danger, 0.1)};
           }
         }
       }
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/StyledWrapper.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/StyledWrapper.js
index 95e8137a1..074f7ec9a 100644
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/StyledWrapper.js
@@ -11,8 +11,7 @@ const StyledWrapper = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
-    flex: 1;
+    padding-top: 10%;
     color: ${(props) => props.theme.colors.text.muted};
     
     svg {
@@ -32,22 +31,6 @@ const StyledWrapper = styled.div`
       gap: 8px;
     }
   }
-  
-  .shared-button {
-    padding: 5px 10px;
-    font-size: 12px;
-    border-radius: 5px;
-    border: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder};
-    background: ${(props) => props.theme.sidebar.bg};
-    color: ${(props) => props.theme.text};
-    cursor: pointer;
-    transition: all 0.1s ease;
-    
-    &:hover {
-      background: ${(props) => props.theme.listItem.hoverBg};
-      border-color: ${(props) => props.theme.textLink};
-    }
-  }
 `;
 
 export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/index.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/index.js
index c5c351ada..96914db8b 100644
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/index.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/index.js
@@ -6,18 +6,19 @@ import StyledWrapper from './StyledWrapper';
 import { IconFileAlert } from '@tabler/icons';
 import ImportEnvironmentModal from 'components/Environments/Common/ImportEnvironmentModal';
 import ExportEnvironmentModal from 'components/Environments/Common/ExportEnvironmentModal';
+import Button from 'ui/Button';
 
 const DefaultTab = ({ setTab }) => (
   <div className="empty-state">
     <IconFileAlert size={48} strokeWidth={1.5} />
     <div className="title">No Environments</div>
     <div className="actions">
-      <button className="shared-button" onClick={() => setTab('create')}>
+      <Button size="sm" color="secondary" onClick={() => setTab('create')}>
         Create Environment
-      </button>
-      <button className="shared-button" onClick={() => setTab('import')}>
+      </Button>
+      <Button size="sm" color="secondary" onClick={() => setTab('import')}>
         Import Environment
-      </button>
+      </Button>
     </div>
   </div>
 );
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/StyledWrapper.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/StyledWrapper.js
index f0cfdacb5..ba55f5a77 100644
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/StyledWrapper.js
@@ -97,25 +97,6 @@ const StyledWrapper = styled.div`
   .collection-dropdown {
     min-width: 120px;
   }
-
-  .dropdown-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 10px;
-    cursor: pointer;
-    transition: background 0.15s ease;
-    color: ${(props) => props.theme.text};
-    font-size: ${(props) => props.theme.font.size.sm};
-
-    &:hover {
-      background: ${(props) => props.theme.listItem.hoverBg};
-    }
-
-    &.dropdown-item-danger {
-      color: ${(props) => props.theme.colors.text.danger};
-    }
-  }
 `;
 
 export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/index.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/index.js
index 160f9ed68..359ce8c67 100644
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/index.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/index.js
@@ -288,7 +288,7 @@ const CollectionsList = ({ workspace }) => {
                       <span>Share</span>
                     </div>
                     <div
-                      className="dropdown-item dropdown-item-danger"
+                      className="dropdown-item delete-item"
                       onClick={(e) => {
                         e.stopPropagation();
                         handleRemoveCollection(collection);
diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/index.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/index.js
index 811819dcb..6fdd98336 100644
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/index.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/index.js
@@ -6,6 +6,7 @@ import toast from 'react-hot-toast';
 import CreateCollection from 'components/Sidebar/CreateCollection';
 import ImportCollection from 'components/Sidebar/ImportCollection';
 import ImportCollectionLocation from 'components/Sidebar/ImportCollectionLocation';
+import Button from 'ui/Button';
 import CollectionsList from './CollectionsList';
 import WorkspaceDocs from '../WorkspaceDocs';
 import StyledWrapper from './StyledWrapper';
@@ -107,18 +108,30 @@ const WorkspaceOverview = ({ workspace }) => {
           <div className="quick-actions-section">
             <div className="section-title">Quick Actions</div>
             <div className="quick-actions-buttons">
-              <button className="quick-action-btn" onClick={handleCreateCollection}>
-                <IconPlus size={14} strokeWidth={1.5} />
-                <span>Create Collection</span>
-              </button>
-              <button className="quick-action-btn" onClick={handleOpenCollection}>
-                <IconFolder size={14} strokeWidth={1.5} />
-                <span>Open Collection</span>
-              </button>
-              <button className="quick-action-btn" onClick={handleImportCollection}>
-                <IconDownload size={14} strokeWidth={1.5} />
-                <span>Import Collection</span>
-              </button>
+              <Button
+                color="secondary"
+                size="sm"
+                icon={<IconPlus size={14} strokeWidth={1.5} />}
+                onClick={handleCreateCollection}
+              >
+                Create Collection
+              </Button>
+              <Button
+                color="secondary"
+                size="sm"
+                icon={<IconFolder size={14} strokeWidth={1.5} />}
+                onClick={handleOpenCollection}
+              >
+                Open Collection
+              </Button>
+              <Button
+                color="secondary"
+                size="sm"
+                icon={<IconDownload size={14} strokeWidth={1.5} />}
+                onClick={handleImportCollection}
+              >
+                Import Collection
+              </Button>
             </div>
           </div>
 
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/app.js b/packages/bruno-app/src/providers/ReduxStore/slices/app.js
index ff7115565..dbf320381 100644
--- a/packages/bruno-app/src/providers/ReduxStore/slices/app.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/app.js
@@ -11,6 +11,7 @@ const initialState = {
   screenWidth: 500,
   showHomePage: false,
   showPreferences: false,
+  preferencesTab: null,
   showApiSpecPage: false,
   showManageWorkspacePage: false,
   isEnvironmentSettingsModalOpen: false,
@@ -95,7 +96,13 @@ export const appSlice = createSlice({
       state.showApiSpecPage = false;
     },
     showPreferences: (state, action) => {
-      state.showPreferences = action.payload;
+      if (typeof action.payload === 'object') {
+        state.showPreferences = action.payload.show;
+        state.preferencesTab = action.payload.tab || null;
+      } else {
+        state.showPreferences = action.payload;
+        state.preferencesTab = null;
+      }
     },
     updatePreferences: (state, action) => {
       state.preferences = action.payload;
diff --git a/packages/bruno-app/src/providers/Theme/index.js b/packages/bruno-app/src/providers/Theme/index.js
index 3c29f7fd9..6a51a492c 100644
--- a/packages/bruno-app/src/providers/Theme/index.js
+++ b/packages/bruno-app/src/providers/Theme/index.js
@@ -1,15 +1,22 @@
 import React from 'react';
+import { Validator } from 'jsonschema';
+import toast from 'react-hot-toast';
 import themes from 'themes/index';
+import themeSchema from 'themes/schema';
 import useLocalStorage from 'hooks/useLocalStorage/index';
 
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useState, useMemo } from 'react';
 import { ThemeProvider as SCThemeProvider } from 'styled-components';
 
+const validator = new Validator();
+
 export const ThemeContext = createContext();
 export const ThemeProvider = (props) => {
   const isBrowserThemeLight = window.matchMedia('(prefers-color-scheme: light)').matches;
   const [displayedTheme, setDisplayedTheme] = useState(isBrowserThemeLight ? 'light' : 'dark');
   const [storedTheme, setStoredTheme] = useLocalStorage('bruno.theme', 'system');
+  const [themeVariantLight, setThemeVariantLight] = useLocalStorage('bruno.themeVariantLight', 'light');
+  const [themeVariantDark, setThemeVariantDark] = useLocalStorage('bruno.themeVariantDark', 'dark');
   const toggleHtml = () => {
     const html = document.querySelector('html');
     if (html) {
@@ -45,14 +52,50 @@ export const ThemeProvider = (props) => {
   // storedTheme can have 3 values: 'light', 'dark', 'system'
   // displayedTheme can have 2 values: 'light', 'dark'
 
-  const theme = storedTheme === 'system' ? themes[displayedTheme] : themes[storedTheme];
-  const themeOptions = Object.keys(themes);
+  // Get the appropriate variant based on the current display mode
+  const theme = useMemo(() => {
+    const isLightMode = displayedTheme === 'light';
+    const variantName = isLightMode ? themeVariantLight : themeVariantDark;
+    const fallbackTheme = isLightMode ? themes.light : themes.dark;
+    const fallbackName = isLightMode ? 'light' : 'dark';
+
+    // Check if the variant exists in themes
+    const selectedTheme = themes[variantName];
+    if (!selectedTheme) {
+      // Only show toast if using a non-default variant that doesn't exist
+      if (variantName !== fallbackName) {
+        toast.error(`Theme "${variantName}" not found. Using default ${fallbackName} theme.`, {
+          duration: 4000,
+          id: `theme-not-found-${variantName}` // Prevent duplicate toasts
+        });
+      }
+      return fallbackTheme;
+    }
+
+    // Validate the theme against the schema
+    const validationResult = validator.validate(selectedTheme, themeSchema);
+    if (!validationResult.valid) {
+      const errors = validationResult.errors?.map((e) => e.stack).join(', ') || 'Unknown validation error';
+      console.error(`Theme "${variantName}" validation failed:`, errors);
+      toast.error(`Invalid theme "${variantName}". Using default ${fallbackName} theme.`, {
+        duration: 4000,
+        id: `theme-invalid-${variantName}` // Prevent duplicate toasts
+      });
+      return fallbackTheme;
+    }
+
+    return selectedTheme;
+  }, [displayedTheme, themeVariantLight, themeVariantDark]);
+
   const value = {
     theme,
-    themeOptions,
     storedTheme,
     displayedTheme,
-    setStoredTheme
+    setStoredTheme,
+    themeVariantLight,
+    setThemeVariantLight,
+    themeVariantDark,
+    setThemeVariantDark
   };
 
   return (
diff --git a/packages/bruno-app/src/styles/_buttons.scss b/packages/bruno-app/src/styles/_buttons.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/bruno-app/src/styles/app.scss b/packages/bruno-app/src/styles/app.scss
deleted file mode 100644
index 46e81fc09..000000000
--- a/packages/bruno-app/src/styles/app.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'buttons';
diff --git a/packages/bruno-app/src/styles/globals.css b/packages/bruno-app/src/styles/globals.css
index 7f0b49d31..2de90fee5 100644
--- a/packages/bruno-app/src/styles/globals.css
+++ b/packages/bruno-app/src/styles/globals.css
@@ -12,7 +12,6 @@
   --color-tab-inactive: rgb(155 155 155);
   --color-tab-active-border: #546de5;
   --color-layout-border: #dedede;
-  --color-text-link: #1663bb;
   --color-text-danger: rgb(185, 28, 28);
   --color-background-danger: #dc3545;
   --color-method-get: rgb(5, 150, 105);
diff --git a/packages/bruno-app/src/themes/PaletteViewer/Catppuccin.stories.jsx b/packages/bruno-app/src/themes/PaletteViewer/Catppuccin.stories.jsx
new file mode 100644
index 000000000..c92aab0b6
--- /dev/null
+++ b/packages/bruno-app/src/themes/PaletteViewer/Catppuccin.stories.jsx
@@ -0,0 +1,316 @@
+import React from 'react';
+
+// Catppuccin Latte (Light)
+const latte = {
+  name: 'Latte',
+  mode: 'light',
+  base: '#eff1f5',
+  accents: {
+    ROSEWATER: '#dc8a78',
+    FLAMINGO: '#dd7878',
+    PINK: '#ea76cb',
+    MAUVE: '#8839ef',
+    RED: '#d20f39',
+    MAROON: '#e64553',
+    PEACH: '#fe640b',
+    YELLOW: '#df8e1d',
+    GREEN: '#40a02b',
+    TEAL: '#179299',
+    SKY: '#04a5e5',
+    SAPPHIRE: '#209fb5',
+    BLUE: '#1e66f5',
+    LAVENDER: '#7287fd'
+  },
+  surface: {
+    TEXT: '#4c4f69',
+    SUBTEXT1: '#5c5f77',
+    SUBTEXT0: '#6c6f85',
+    OVERLAY2: '#7c7f93',
+    OVERLAY1: '#8c8fa1',
+    OVERLAY0: '#9ca0b0',
+    SURFACE2: '#acb0be',
+    SURFACE1: '#bcc0cc',
+    SURFACE0: '#ccd0da',
+    BASE: '#eff1f5',
+    MANTLE: '#e6e9ef',
+    CRUST: '#dce0e8'
+  }
+};
+
+// Catppuccin Frappé (Dark)
+const frappe = {
+  name: 'Frappé',
+  mode: 'dark',
+  base: '#303446',
+  accents: {
+    ROSEWATER: '#f2d5cf',
+    FLAMINGO: '#eebebe',
+    PINK: '#f4b8e4',
+    MAUVE: '#ca9ee6',
+    RED: '#e78284',
+    MAROON: '#ea999c',
+    PEACH: '#ef9f76',
+    YELLOW: '#e5c890',
+    GREEN: '#a6d189',
+    TEAL: '#81c8be',
+    SKY: '#99d1db',
+    SAPPHIRE: '#85c1dc',
+    BLUE: '#8caaee',
+    LAVENDER: '#babbf1'
+  },
+  surface: {
+    TEXT: '#c6d0f5',
+    SUBTEXT1: '#b5bfe2',
+    SUBTEXT0: '#a5adce',
+    OVERLAY2: '#949cbb',
+    OVERLAY1: '#838ba7',
+    OVERLAY0: '#737994',
+    SURFACE2: '#626880',
+    SURFACE1: '#51576d',
+    SURFACE0: '#414559',
+    BASE: '#303446',
+    MANTLE: '#292c3c',
+    CRUST: '#232634'
+  }
+};
+
+// Catppuccin Macchiato (Dark)
+const macchiato = {
+  name: 'Macchiato',
+  mode: 'dark',
+  base: '#24273a',
+  accents: {
+    ROSEWATER: '#f4dbd6',
+    FLAMINGO: '#f0c6c6',
+    PINK: '#f5bde6',
+    MAUVE: '#c6a0f6',
+    RED: '#ed8796',
+    MAROON: '#ee99a0',
+    PEACH: '#f5a97f',
+    YELLOW: '#eed49f',
+    GREEN: '#a6da95',
+    TEAL: '#8bd5ca',
+    SKY: '#91d7e3',
+    SAPPHIRE: '#7dc4e4',
+    BLUE: '#8aadf4',
+    LAVENDER: '#b7bdf8'
+  },
+  surface: {
+    TEXT: '#cad3f5',
+    SUBTEXT1: '#b8c0e0',
+    SUBTEXT0: '#a5adcb',
+    OVERLAY2: '#939ab7',
+    OVERLAY1: '#8087a2',
+    OVERLAY0: '#6e738d',
+    SURFACE2: '#5b6078',
+    SURFACE1: '#494d64',
+    SURFACE0: '#363a4f',
+    BASE: '#24273a',
+    MANTLE: '#1e2030',
+    CRUST: '#181926'
+  }
+};
+
+// Catppuccin Mocha (Dark)
+const mocha = {
+  name: 'Mocha',
+  mode: 'dark',
+  base: '#1e1e2e',
+  accents: {
+    ROSEWATER: '#f5e0dc',
+    FLAMINGO: '#f2cdcd',
+    PINK: '#f5c2e7',
+    MAUVE: '#cba6f7',
+    RED: '#f38ba8',
+    MAROON: '#eba0ac',
+    PEACH: '#fab387',
+    YELLOW: '#f9e2af',
+    GREEN: '#a6e3a1',
+    TEAL: '#94e2d5',
+    SKY: '#89dceb',
+    SAPPHIRE: '#74c7ec',
+    BLUE: '#89b4fa',
+    LAVENDER: '#b4befe'
+  },
+  surface: {
+    TEXT: '#cdd6f4',
+    SUBTEXT1: '#bac2de',
+    SUBTEXT0: '#a6adc8',
+    OVERLAY2: '#9399b2',
+    OVERLAY1: '#7f849c',
+    OVERLAY0: '#6c7086',
+    SURFACE2: '#585b70',
+    SURFACE1: '#45475a',
+    SURFACE0: '#313244',
+    BASE: '#1e1e2e',
+    MANTLE: '#181825',
+    CRUST: '#11111b'
+  }
+};
+
+const themes = [latte, frappe, macchiato, mocha];
+
+const ColorSwatch = ({ name, color, textColor }) => (
+  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '6px' }}>
+    <div
+      style={{
+        width: '56px',
+        height: '56px',
+        backgroundColor: color,
+        borderRadius: '8px',
+        border: '1px solid rgba(128,128,128,0.2)'
+      }}
+    />
+    <div style={{ textAlign: 'center' }}>
+      <div style={{ fontSize: '10px', fontWeight: 600, color: textColor }}>{name}</div>
+      <div style={{ fontSize: '9px', color: textColor, opacity: 0.7, fontFamily: 'monospace' }}>{color}</div>
+    </div>
+  </div>
+);
+
+const ThemeSection = ({ theme }) => {
+  const textColor = theme.mode === 'dark' ? '#cdd6f4' : '#4c4f69';
+  const mutedColor = theme.mode === 'dark' ? '#a6adc8' : '#6c6f85';
+
+  return (
+    <div
+      style={{
+        padding: '24px',
+        backgroundColor: theme.base,
+        borderRadius: '12px',
+        marginBottom: '24px'
+      }}
+    >
+      <h2 style={{ fontSize: '20px', fontWeight: 700, marginBottom: '4px', color: textColor }}>
+        Catppuccin {theme.name}
+      </h2>
+      <p style={{ fontSize: '12px', color: mutedColor, marginBottom: '20px' }}>
+        {theme.mode === 'light' ? 'Light theme' : 'Dark theme'} — Base: {theme.base}
+      </p>
+
+      <h3 style={{ fontSize: '14px', fontWeight: 600, marginBottom: '12px', color: textColor }}>
+        Accents
+      </h3>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', marginBottom: '24px' }}>
+        {Object.entries(theme.accents).map(([name, color]) => (
+          <ColorSwatch key={name} name={name} color={color} textColor={textColor} />
+        ))}
+      </div>
+
+      <h3 style={{ fontSize: '14px', fontWeight: 600, marginBottom: '12px', color: textColor }}>
+        Surface & Text
+      </h3>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px' }}>
+        {Object.entries(theme.surface).map(([name, color]) => (
+          <ColorSwatch key={name} name={name} color={color} textColor={textColor} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default {
+  title: 'Themes/Catppuccin',
+  parameters: {
+    layout: 'padded'
+  }
+};
+
+export const AllFlavors = {
+  render: () => (
+    <div style={{ padding: '24px', backgroundColor: '#1a1a2e', minHeight: '100vh' }}>
+      <h1 style={{ fontSize: '28px', fontWeight: 700, marginBottom: '8px', color: '#cdd6f4' }}>
+        Catppuccin Palette
+      </h1>
+      <p style={{ fontSize: '14px', color: '#a6adc8', marginBottom: '32px' }}>
+        All 4 flavors: Latte, Frappé, Macchiato, Mocha
+      </p>
+      {themes.map((theme) => (
+        <ThemeSection key={theme.name} theme={theme} />
+      ))}
+    </div>
+  )
+};
+
+export const Latte = {
+  render: () => (
+    <div style={{ padding: '24px', backgroundColor: '#dce0e8', minHeight: '100vh' }}>
+      <ThemeSection theme={latte} />
+    </div>
+  )
+};
+
+export const Frappe = {
+  render: () => (
+    <div style={{ padding: '24px', backgroundColor: '#232634', minHeight: '100vh' }}>
+      <ThemeSection theme={frappe} />
+    </div>
+  )
+};
+
+export const Macchiato = {
+  render: () => (
+    <div style={{ padding: '24px', backgroundColor: '#181926', minHeight: '100vh' }}>
+      <ThemeSection theme={macchiato} />
+    </div>
+  )
+};
+
+export const Mocha = {
+  render: () => (
+    <div style={{ padding: '24px', backgroundColor: '#11111b', minHeight: '100vh' }}>
+      <ThemeSection theme={mocha} />
+    </div>
+  )
+};
+
+export const AccentComparison = {
+  render: () => {
+    const accentNames = Object.keys(latte.accents);
+
+    return (
+      <div style={{ padding: '24px', backgroundColor: '#1a1a2e', minHeight: '100vh' }}>
+        <h2 style={{ fontSize: '20px', fontWeight: 700, marginBottom: '24px', color: '#cdd6f4' }}>
+          Accent Comparison Across Flavors
+        </h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <div style={{ display: 'flex', gap: '16px', marginBottom: '8px' }}>
+            <div style={{ width: '80px' }} />
+            {themes.map((t) => (
+              <div
+                key={t.name}
+                style={{
+                  width: '80px',
+                  textAlign: 'center',
+                  fontSize: '12px',
+                  fontWeight: 600,
+                  color: '#cdd6f4'
+                }}
+              >
+                {t.name}
+              </div>
+            ))}
+          </div>
+          {accentNames.map((name) => (
+            <div key={name} style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+              <div style={{ width: '80px', fontSize: '11px', fontWeight: 600, color: '#a6adc8' }}>
+                {name}
+              </div>
+              {themes.map((t) => (
+                <div
+                  key={t.name}
+                  style={{
+                    width: '80px',
+                    height: '32px',
+                    backgroundColor: t.accents[name],
+                    borderRadius: '4px'
+                  }}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+};
diff --git a/packages/bruno-app/src/themes/PaletteViewer/PaletteViewer.stories.jsx b/packages/bruno-app/src/themes/PaletteViewer/PaletteViewer.stories.jsx
new file mode 100644
index 000000000..1d8439133
--- /dev/null
+++ b/packages/bruno-app/src/themes/PaletteViewer/PaletteViewer.stories.jsx
@@ -0,0 +1,215 @@
+import React from 'react';
+
+// Light theme palette - 14 accent colors
+const palette = {
+  accents: {
+    PRIMARY: '#bd7a28',
+    RED: 'hsl(8 60% 52%)', // warm coral - NEW
+    ROSE: 'hsl(352 45% 50%)', // soft red (approved)
+    BROWN: 'hsl(28 55% 38%)', // warm brown (liked)
+    ORANGE: 'hsl(35 85% 42%)', // vibrant orange
+    YELLOW: 'hsl(45 75% 42%)', // golden yellow
+    LIME: 'hsl(85 45% 40%)', // yellow-green - NEW
+    GREEN: 'hsl(145 50% 36%)', // forest green
+    TEAL: 'hsl(178 50% 36%)', // true teal
+    CYAN: 'hsl(195 55% 42%)', // cyan-blue - NEW
+    BLUE: 'hsl(214 55% 45%)', // true blue (liked)
+    INDIGO: 'hsl(235 45% 45%)', // deep indigo
+    VIOLET: 'hsl(258 42% 50%)', // soft violet - NEW
+    PURPLE: 'hsl(280 45% 48%)', // rich purple
+    PINK: 'hsl(328 50% 48%)' // magenta-pink - NEW
+  },
+  system: {
+    CONTROL_ACCENT: '#b96f1d' // for accent-color
+  },
+  background: {
+    BASE: '#ffffff',
+    MANTLE: '#f8f8f8',
+    CRUST: '#f1f1f1',
+    SURFACE0: '#f1f1f1',
+    SURFACE1: '#eaeaea',
+    SURFACE2: '#e5e5e5'
+  },
+  text: {
+    BASE: '#343434',
+    SUBTEXT2: '#666666',
+    SUBTEXT1: '#838383',
+    SUBTEXT0: '#9B9B9B'
+  },
+  overlay: {
+    OVERLAY2: '#8b8b8b',
+    OVERLAY1: '#B0B0B0',
+    OVERLAY0: '#C0C0C0'
+  },
+  border: {
+    BORDER2: '#cccccc',
+    BORDER1: '#e5e5e5',
+    BORDER0: '#efefef'
+  },
+  utility: {
+    WHITE: '#ffffff',
+    BLACK: '#000000'
+  }
+};
+
+const ColorSwatch = ({ name, color, textColor = '#343434' }) => (
+  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
+    <div
+      style={{
+        width: '80px',
+        height: '80px',
+        backgroundColor: color,
+        borderRadius: '8px',
+        border: '1px solid #e5e5e5',
+        boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
+      }}
+    />
+    <div style={{ textAlign: 'center' }}>
+      <div style={{ fontSize: '11px', fontWeight: 600, color: textColor }}>{name}</div>
+      <div style={{ fontSize: '9px', color: '#666666', fontFamily: 'monospace' }}>{color}</div>
+    </div>
+  </div>
+);
+
+const ColorSection = ({ title, colors, textColor }) => (
+  <div style={{ marginBottom: '32px' }}>
+    <h3 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '16px', color: '#343434' }}>{title}</h3>
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
+      {Object.entries(colors).map(([name, color]) => (
+        <ColorSwatch key={name} name={name} color={color} textColor={textColor} />
+      ))}
+    </div>
+  </div>
+);
+
+export default {
+  title: 'Themes/Light Palette',
+  parameters: {
+    layout: 'padded'
+  }
+};
+
+export const Overview = {
+  render: () => (
+    <div style={{ padding: '24px', backgroundColor: '#ffffff', minHeight: '100vh' }}>
+      <h1 style={{ fontSize: '24px', fontWeight: 700, marginBottom: '8px', color: '#343434' }}>
+        Light Theme Palette
+      </h1>
+      <p style={{ fontSize: '14px', color: '#666666', marginBottom: '32px' }}>
+        14 accent colors with full hue coverage
+      </p>
+      <ColorSection title="Accents" colors={palette.accents} />
+      <ColorSection title="Background" colors={palette.background} />
+      <ColorSection title="Text" colors={palette.text} />
+      <ColorSection title="Overlay" colors={palette.overlay} />
+      <ColorSection title="Border" colors={palette.border} />
+      <ColorSection title="Utility" colors={palette.utility} />
+    </div>
+  )
+};
+
+export const Accents = {
+  render: () => (
+    <div style={{ padding: '24px', backgroundColor: '#ffffff' }}>
+      <h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '8px', color: '#343434' }}>
+        Accent Colors
+      </h2>
+      <p style={{ fontSize: '13px', color: '#666', marginBottom: '24px' }}>
+        Warm → Cool progression across the color wheel
+      </p>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
+        {Object.entries(palette.accents).map(([name, color]) => (
+          <ColorSwatch key={name} name={name} color={color} />
+        ))}
+      </div>
+    </div>
+  )
+};
+
+export const Background = {
+  render: () => (
+    <div style={{ padding: '24px', backgroundColor: '#ffffff' }}>
+      <h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '16px', color: '#343434' }}>
+        Background Colors
+      </h2>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
+        {Object.entries(palette.background).map(([name, color]) => (
+          <ColorSwatch key={name} name={name} color={color} />
+        ))}
+      </div>
+    </div>
+  )
+};
+
+export const Text = {
+  render: () => (
+    <div style={{ padding: '24px', backgroundColor: '#ffffff' }}>
+      <h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '16px', color: '#343434' }}>
+        Text Colors
+      </h2>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
+        {Object.entries(palette.text).map(([name, color]) => (
+          <div key={name} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
+            <div
+              style={{
+                width: '80px',
+                height: '80px',
+                backgroundColor: color,
+                borderRadius: '8px',
+                border: '1px solid #e5e5e5',
+                boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
+              }}
+            />
+            <div style={{ textAlign: 'center' }}>
+              <div style={{ fontSize: '11px', fontWeight: 600, color: '#343434' }}>{name}</div>
+              <div style={{ fontSize: '9px', color: '#666666', fontFamily: 'monospace' }}>{color}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+};
+
+export const HueWheel = {
+  render: () => {
+    const accents = Object.entries(palette.accents);
+    // Sort by hue for visualization
+    const sorted = [...accents].sort((a, b) => {
+      const hueA = parseInt(a[1].match(/hsl\((\d+)/)?.[1] || 0);
+      const hueB = parseInt(b[1].match(/hsl\((\d+)/)?.[1] || 0);
+      return hueA - hueB;
+    });
+
+    return (
+      <div style={{ padding: '24px', backgroundColor: '#ffffff' }}>
+        <h2 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '8px', color: '#343434' }}>
+          Hue Distribution
+        </h2>
+        <p style={{ fontSize: '13px', color: '#666', marginBottom: '24px' }}>
+          Colors sorted by hue value (0° → 360°)
+        </p>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          {sorted.map(([name, color]) => {
+            const hueMatch = color.match(/hsl\((\d+)/);
+            const hue = hueMatch ? parseInt(hueMatch[1]) : 0;
+            return (
+              <div key={name} style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+                <div style={{ width: '70px', fontSize: '12px', fontWeight: 600 }}>{name}</div>
+                <div style={{ width: '40px', fontSize: '11px', color: '#666', fontFamily: 'monospace' }}>{hue}°</div>
+                <div
+                  style={{
+                    width: `${(hue / 360) * 280 + 50}px`,
+                    height: '28px',
+                    backgroundColor: color,
+                    borderRadius: '4px'
+                  }}
+                />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+};
diff --git a/packages/bruno-app/src/themes/dark/catppuccin-frappe.js b/packages/bruno-app/src/themes/dark/catppuccin-frappe.js
new file mode 100644
index 000000000..aceeca994
--- /dev/null
+++ b/packages/bruno-app/src/themes/dark/catppuccin-frappe.js
@@ -0,0 +1,632 @@
+// Catppuccin Frappé - Dark Theme
+// Based on https://catppuccin.com/palette/
+
+const colors = {
+  // Catppuccin Frappé Palette
+  ROSEWATER: '#f2d5cf',
+  FLAMINGO: '#eebebe',
+  PINK: '#f4b8e4',
+  MAUVE: '#ca9ee6',
+  RED: '#e78284',
+  MAROON: '#ea999c',
+  PEACH: '#ef9f76',
+  YELLOW: '#e5c890',
+  GREEN: '#a6d189',
+  TEAL: '#81c8be',
+  SKY: '#99d1db',
+  SAPPHIRE: '#85c1dc',
+  BLUE: '#8caaee',
+  LAVENDER: '#babbf1',
+
+  TEXT: '#c6d0f5',
+  SUBTEXT1: '#b5bfe2',
+  SUBTEXT0: '#a5adce',
+  OVERLAY2: '#949cbb',
+  OVERLAY1: '#838ba7',
+  OVERLAY0: '#737994',
+  SURFACE2: '#626880',
+  SURFACE1: '#51576d',
+  SURFACE0: '#414559',
+  BASE: '#303446',
+  MANTLE: '#292c3c',
+  CRUST: '#232634',
+
+  WHITE: '#fff',
+  BLACK: '#000',
+
+  CODEMIRROR_TOKENS: {
+    DEFINITION: '#a6d189',
+    PROPERTY: '#8caaee',
+    STRING: '#e5c890',
+    NUMBER: '#ef9f76',
+    ATOM: '#f4b8e4',
+    VARIABLE: '#85c1dc',
+    KEYWORD: '#e78284',
+    COMMENT: '#737994',
+    OPERATOR: '#81c8be'
+  }
+};
+
+const catppuccinFrappeTheme = {
+  mode: 'dark',
+  brand: colors.MAUVE,
+  text: colors.TEXT,
+  textLink: colors.BLUE,
+  bg: colors.BASE,
+
+  accents: {
+    primary: colors.MAUVE
+  },
+
+  background: {
+    base: colors.BASE,
+    mantle: colors.MANTLE,
+    crust: colors.CRUST,
+    surface0: colors.SURFACE0,
+    surface1: colors.SURFACE1,
+    surface2: colors.SURFACE2
+  },
+
+  overlay: {
+    overlay2: colors.OVERLAY2,
+    overlay1: colors.OVERLAY1,
+    overlay0: colors.OVERLAY0
+  },
+
+  font: {
+    size: {
+      xs: '0.6875rem', // 11px
+      sm: '0.75rem', // 12px
+      base: '0.8125rem', // 13px
+      md: '0.875rem', // 14px
+      lg: '1rem', // 16px
+      xl: '1.125rem' // 18px
+    }
+  },
+
+  shadow: {
+    sm: '0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3)',
+    md: '0 2px 8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4)',
+    lg: '0 2px 12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4)'
+  },
+
+  border: {
+    radius: {
+      sm: '4px',
+      base: '6px',
+      md: '8px',
+      lg: '10px',
+      xl: '12px'
+    },
+    border2: colors.SURFACE2,
+    border1: colors.SURFACE1,
+    border0: colors.SURFACE0
+  },
+
+  colors: {
+    text: {
+      white: colors.WHITE,
+      green: colors.GREEN,
+      danger: colors.RED,
+      warning: colors.PEACH,
+      muted: colors.SUBTEXT0,
+      purple: colors.MAUVE,
+      yellow: colors.YELLOW,
+      subtext2: colors.TEXT,
+      subtext1: colors.SUBTEXT1,
+      subtext0: colors.SUBTEXT0
+    },
+    bg: {
+      danger: colors.MAROON
+    },
+    accent: colors.MAUVE
+  },
+
+  input: {
+    bg: colors.SURFACE0,
+    border: colors.SURFACE0,
+    focusBorder: colors.LAVENDER,
+    placeholder: {
+      color: colors.OVERLAY0,
+      opacity: 0.75
+    }
+  },
+
+  sidebar: {
+    color: colors.TEXT,
+    muted: colors.SUBTEXT0,
+    bg: colors.BASE,
+    dragbar: {
+      border: colors.SURFACE1,
+      activeBorder: colors.SURFACE2
+    },
+
+    search: {
+      border: '1px solid transparent',
+      bg: colors.SURFACE0
+    },
+
+    collection: {
+      item: {
+        bg: colors.SURFACE0,
+        hoverBg: colors.SURFACE1,
+        focusBorder: colors.LAVENDER,
+        indentBorder: `solid 1px ${colors.SURFACE2}`,
+        active: {
+          indentBorder: `solid 1px ${colors.MAUVE}`
+        },
+        example: {
+          iconColor: colors.OVERLAY1
+        }
+      }
+    },
+
+    dropdownIcon: {
+      color: colors.TEXT
+    }
+  },
+
+  dropdown: {
+    color: colors.TEXT,
+    iconColor: colors.SUBTEXT1,
+    bg: colors.MANTLE,
+    hoverBg: 'rgba(115, 121, 148, 0.16)',
+    shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
+    separator: colors.SURFACE1,
+    selectedColor: colors.MAUVE,
+    mutedText: colors.SUBTEXT0
+  },
+
+  workspace: {
+    accent: colors.MAUVE,
+    border: colors.SURFACE1,
+    button: {
+      bg: colors.SURFACE0
+    }
+  },
+
+  request: {
+    methods: {
+      get: colors.GREEN,
+      post: colors.BLUE,
+      put: colors.YELLOW,
+      delete: colors.RED,
+      patch: colors.PEACH,
+      options: colors.TEAL,
+      head: colors.SAPPHIRE
+    },
+
+    grpc: colors.SKY,
+    ws: colors.MAUVE,
+    gql: colors.PINK
+  },
+
+  requestTabPanel: {
+    url: {
+      bg: colors.BASE,
+      icon: colors.TEXT,
+      iconDanger: colors.RED,
+      border: `solid 1px ${colors.SURFACE0}`
+    },
+    dragbar: {
+      border: colors.SURFACE1,
+      activeBorder: colors.OVERLAY0
+    },
+    responseStatus: colors.TEXT,
+    responseOk: colors.GREEN,
+    responseError: colors.RED,
+    responsePending: colors.BLUE,
+    responseOverlayBg: 'rgba(48, 52, 70, 0.6)',
+
+    card: {
+      bg: colors.MANTLE,
+      border: 'transparent',
+      hr: colors.SURFACE0
+    },
+
+    graphqlDocsExplorer: {
+      bg: colors.BASE,
+      color: colors.TEXT
+    }
+  },
+
+  notifications: {
+    bg: colors.SURFACE0,
+    list: {
+      bg: colors.SURFACE0,
+      borderRight: colors.SURFACE2,
+      borderBottom: colors.SURFACE1,
+      hoverBg: colors.SURFACE1,
+      active: {
+        border: colors.BLUE,
+        bg: colors.SURFACE2,
+        hoverBg: colors.SURFACE2
+      }
+    }
+  },
+
+  modal: {
+    title: {
+      color: colors.TEXT,
+      bg: colors.MANTLE
+    },
+    body: {
+      color: colors.TEXT,
+      bg: colors.BASE
+    },
+    input: {
+      bg: colors.SURFACE0,
+      border: colors.SURFACE0,
+      focusBorder: colors.LAVENDER
+    },
+    backdrop: {
+      opacity: 0.2
+    }
+  },
+
+  button: {
+    secondary: {
+      color: colors.TEXT,
+      bg: colors.SURFACE0,
+      border: colors.SURFACE0,
+      hoverBorder: colors.OVERLAY0
+    },
+    close: {
+      color: colors.TEXT,
+      bg: 'transparent',
+      border: 'transparent',
+      hoverBorder: ''
+    },
+    disabled: {
+      color: colors.OVERLAY0,
+      bg: colors.SURFACE1,
+      border: colors.SURFACE1
+    },
+    danger: {
+      color: colors.CRUST,
+      bg: colors.RED,
+      border: colors.RED
+    }
+  },
+  button2: {
+    color: {
+      primary: {
+        bg: colors.MAUVE,
+        text: colors.CRUST,
+        border: colors.MAUVE
+      },
+      secondary: {
+        bg: colors.SURFACE0,
+        text: colors.TEXT,
+        border: colors.SURFACE1
+      },
+      success: {
+        bg: colors.GREEN,
+        text: colors.CRUST,
+        border: colors.GREEN
+      },
+      warning: {
+        bg: colors.PEACH,
+        text: colors.CRUST,
+        border: colors.PEACH
+      },
+      danger: {
+        bg: colors.RED,
+        text: colors.CRUST,
+        border: colors.RED
+      }
+    }
+  },
+
+  tabs: {
+    marginRight: '1.2rem',
+    active: {
+      fontWeight: 400,
+      color: colors.TEXT,
+      border: colors.MAUVE
+    },
+    secondary: {
+      active: {
+        bg: colors.SURFACE0,
+        color: colors.TEXT
+      },
+      inactive: {
+        bg: colors.SURFACE1,
+        color: colors.SUBTEXT0
+      }
+    }
+  },
+
+  requestTabs: {
+    color: colors.TEXT,
+    bg: colors.SURFACE0,
+    bottomBorder: colors.SURFACE1,
+    icon: {
+      color: colors.OVERLAY0,
+      hoverColor: colors.TEXT,
+      hoverBg: colors.BASE
+    },
+    example: {
+      iconColor: colors.OVERLAY1
+    },
+    shortTab: {
+      color: colors.TEXT,
+      bg: 'transparent',
+      hoverColor: colors.TEXT,
+      hoverBg: colors.SURFACE0
+    }
+  },
+
+  codemirror: {
+    bg: colors.BASE,
+    border: colors.BASE,
+    placeholder: {
+      color: colors.OVERLAY0,
+      opacity: 0.5
+    },
+    gutter: {
+      bg: colors.BASE
+    },
+    variable: {
+      valid: colors.GREEN,
+      invalid: colors.RED,
+      prompt: colors.BLUE,
+      info: {
+        color: colors.TEXT,
+        bg: colors.SURFACE0,
+        boxShadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
+        editorBg: colors.MANTLE,
+        iconColor: colors.OVERLAY0,
+        editorBorder: colors.SURFACE0,
+        editorFocusBorder: colors.LAVENDER,
+        editableDisplayHoverBg: 'rgba(198, 208, 245, 0.03)',
+        border: colors.SURFACE2
+      }
+    },
+    tokens: {
+      definition: colors.CODEMIRROR_TOKENS.DEFINITION,
+      property: colors.CODEMIRROR_TOKENS.PROPERTY,
+      string: colors.CODEMIRROR_TOKENS.STRING,
+      number: colors.CODEMIRROR_TOKENS.NUMBER,
+      atom: colors.CODEMIRROR_TOKENS.ATOM,
+      variable: colors.CODEMIRROR_TOKENS.VARIABLE,
+      keyword: colors.CODEMIRROR_TOKENS.KEYWORD,
+      comment: colors.CODEMIRROR_TOKENS.COMMENT,
+      operator: colors.CODEMIRROR_TOKENS.OPERATOR
+    },
+    searchLineHighlightCurrent: 'rgba(115, 121, 148, 0.18)',
+    searchMatch: colors.YELLOW,
+    searchMatchActive: colors.PEACH
+  },
+
+  table: {
+    border: colors.SURFACE0,
+    thead: {
+      color: colors.TEXT
+    },
+    striped: colors.SURFACE0,
+    input: {
+      color: colors.TEXT
+    }
+  },
+
+  plainGrid: {
+    hoverBg: colors.SURFACE0
+  },
+
+  scrollbar: {
+    color: colors.SURFACE0
+  },
+
+  dragAndDrop: {
+    border: colors.LAVENDER,
+    borderStyle: '2px solid',
+    hoverBg: 'rgba(186, 187, 241, 0.08)',
+    transition: 'all 0.1s ease'
+  },
+  infoTip: {
+    bg: colors.SURFACE0,
+    border: colors.SURFACE1,
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.5)'
+  },
+
+  statusBar: {
+    border: colors.SURFACE0,
+    color: colors.SUBTEXT0
+  },
+
+  console: {
+    bg: colors.BASE,
+    headerBg: colors.MANTLE,
+    contentBg: colors.BASE,
+    border: colors.SURFACE0,
+    titleColor: colors.TEXT,
+    countColor: colors.SUBTEXT0,
+    buttonColor: colors.TEXT,
+    buttonHoverBg: 'rgba(198, 208, 245, 0.1)',
+    buttonHoverColor: colors.TEXT,
+    messageColor: colors.TEXT,
+    timestampColor: colors.SUBTEXT0,
+    emptyColor: colors.SUBTEXT0,
+    logHoverBg: 'rgba(198, 208, 245, 0.05)',
+    resizeHandleHover: colors.BLUE,
+    resizeHandleActive: colors.BLUE,
+    dropdownBg: colors.MANTLE,
+    dropdownHeaderBg: colors.SURFACE0,
+    optionHoverBg: 'rgba(198, 208, 245, 0.05)',
+    optionLabelColor: colors.TEXT,
+    optionCountColor: colors.SUBTEXT0,
+    checkboxColor: colors.MAUVE,
+    scrollbarTrack: colors.MANTLE,
+    scrollbarThumb: colors.SURFACE2,
+    scrollbarThumbHover: colors.OVERLAY0
+  },
+
+  grpc: {
+    tabNav: {
+      container: {
+        bg: colors.CRUST
+      },
+      button: {
+        active: {
+          bg: colors.SURFACE0,
+          color: colors.TEXT
+        },
+        inactive: {
+          bg: 'transparent',
+          color: colors.SUBTEXT0
+        }
+      }
+    },
+    importPaths: {
+      header: {
+        text: colors.SUBTEXT0,
+        button: {
+          color: colors.SUBTEXT0,
+          hoverColor: colors.TEXT
+        }
+      },
+      error: {
+        bg: 'transparent',
+        text: colors.RED,
+        link: {
+          color: colors.RED,
+          hoverColor: colors.MAROON
+        }
+      },
+      item: {
+        bg: 'transparent',
+        hoverBg: 'rgba(198, 208, 245, 0.05)',
+        text: colors.TEXT,
+        icon: colors.SUBTEXT0,
+        checkbox: {
+          color: colors.TEXT
+        },
+        invalid: {
+          opacity: 0.6,
+          text: colors.RED
+        }
+      },
+      empty: {
+        text: colors.SUBTEXT0
+      },
+      button: {
+        bg: colors.SURFACE0,
+        color: colors.TEXT,
+        border: colors.SURFACE0,
+        hoverBorder: colors.OVERLAY0
+      }
+    },
+    protoFiles: {
+      header: {
+        text: colors.SUBTEXT0,
+        button: {
+          color: colors.SUBTEXT0,
+          hoverColor: colors.TEXT
+        }
+      },
+      error: {
+        bg: 'transparent',
+        text: colors.RED,
+        link: {
+          color: colors.RED,
+          hoverColor: colors.MAROON
+        }
+      },
+      item: {
+        bg: 'transparent',
+        hoverBg: 'rgba(198, 208, 245, 0.05)',
+        selected: {
+          bg: 'rgba(202, 158, 230, 0.2)',
+          border: colors.MAUVE
+        },
+        text: colors.TEXT,
+        secondaryText: colors.SUBTEXT0,
+        icon: colors.SUBTEXT0,
+        invalid: {
+          opacity: 0.6,
+          text: colors.RED
+        }
+      },
+      empty: {
+        text: colors.SUBTEXT0
+      },
+      button: {
+        bg: colors.SURFACE0,
+        color: colors.TEXT,
+        border: colors.SURFACE0,
+        hoverBorder: colors.OVERLAY0
+      }
+    }
+  },
+  deprecationWarning: {
+    bg: 'rgba(231, 130, 132, 0.1)',
+    border: 'rgba(231, 130, 132, 0.1)',
+    icon: colors.RED,
+    text: colors.SUBTEXT1
+  },
+
+  preferences: {
+    sidebar: {
+      border: colors.SURFACE1
+    }
+  },
+
+  examples: {
+    buttonBg: 'rgba(202, 158, 230, 0.1)',
+    buttonColor: colors.MAUVE,
+    buttonText: colors.CRUST,
+    buttonIconColor: colors.CRUST,
+    border: colors.SURFACE1,
+    urlBar: {
+      border: colors.SURFACE0,
+      bg: colors.MANTLE
+    },
+    table: {
+      thead: {
+        bg: colors.MANTLE,
+        color: colors.SUBTEXT0
+      }
+    },
+    checkbox: {
+      color: colors.CRUST
+    }
+  },
+
+  app: {
+    collection: {
+      toolbar: {
+        environmentSelector: {
+          bg: colors.BASE,
+          border: colors.SURFACE0,
+          icon: colors.MAUVE,
+          text: colors.TEXT,
+          caret: colors.SUBTEXT0,
+          separator: colors.SURFACE0,
+          hoverBg: colors.BASE,
+          hoverBorder: colors.SURFACE1,
+
+          noEnvironment: {
+            text: colors.SUBTEXT0,
+            bg: colors.BASE,
+            border: colors.SURFACE0,
+            hoverBg: colors.BASE,
+            hoverBorder: colors.SURFACE1
+          }
+        },
+        sandboxMode: {
+          safeMode: {
+            bg: 'rgba(166, 209, 137, 0.12)',
+            color: colors.GREEN
+          },
+          developerMode: {
+            bg: 'rgba(229, 200, 144, 0.11)',
+            color: colors.YELLOW
+          }
+        }
+      }
+    }
+  }
+};
+
+export default catppuccinFrappeTheme;
diff --git a/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js b/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js
new file mode 100644
index 000000000..81a73bee6
--- /dev/null
+++ b/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js
@@ -0,0 +1,632 @@
+// Catppuccin Macchiato - Dark Theme
+// Based on https://catppuccin.com/palette/
+
+const colors = {
+  // Catppuccin Macchiato Palette
+  ROSEWATER: '#f4dbd6',
+  FLAMINGO: '#f0c6c6',
+  PINK: '#f5bde6',
+  MAUVE: '#c6a0f6',
+  RED: '#ed8796',
+  MAROON: '#ee99a0',
+  PEACH: '#f5a97f',
+  YELLOW: '#eed49f',
+  GREEN: '#a6da95',
+  TEAL: '#8bd5ca',
+  SKY: '#91d7e3',
+  SAPPHIRE: '#7dc4e4',
+  BLUE: '#8aadf4',
+  LAVENDER: '#b7bdf8',
+
+  TEXT: '#cad3f5',
+  SUBTEXT1: '#b8c0e0',
+  SUBTEXT0: '#a5adcb',
+  OVERLAY2: '#939ab7',
+  OVERLAY1: '#8087a2',
+  OVERLAY0: '#6e738d',
+  SURFACE2: '#5b6078',
+  SURFACE1: '#494d64',
+  SURFACE0: '#363a4f',
+  BASE: '#24273a',
+  MANTLE: '#1e2030',
+  CRUST: '#181926',
+
+  WHITE: '#fff',
+  BLACK: '#000',
+
+  CODEMIRROR_TOKENS: {
+    DEFINITION: '#a6da95',
+    PROPERTY: '#8aadf4',
+    STRING: '#eed49f',
+    NUMBER: '#f5a97f',
+    ATOM: '#f5bde6',
+    VARIABLE: '#7dc4e4',
+    KEYWORD: '#ed8796',
+    COMMENT: '#6e738d',
+    OPERATOR: '#8bd5ca'
+  }
+};
+
+const catppuccinMacchiatoTheme = {
+  mode: 'dark',
+  brand: colors.MAUVE,
+  text: colors.TEXT,
+  textLink: colors.BLUE,
+  bg: colors.BASE,
+
+  accents: {
+    primary: colors.MAUVE
+  },
+
+  background: {
+    base: colors.BASE,
+    mantle: colors.MANTLE,
+    crust: colors.CRUST,
+    surface0: colors.SURFACE0,
+    surface1: colors.SURFACE1,
+    surface2: colors.SURFACE2
+  },
+
+  overlay: {
+    overlay2: colors.OVERLAY2,
+    overlay1: colors.OVERLAY1,
+    overlay0: colors.OVERLAY0
+  },
+
+  font: {
+    size: {
+      xs: '0.6875rem', // 11px
+      sm: '0.75rem', // 12px
+      base: '0.8125rem', // 13px
+      md: '0.875rem', // 14px
+      lg: '1rem', // 16px
+      xl: '1.125rem' // 18px
+    }
+  },
+
+  shadow: {
+    sm: '0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3)',
+    md: '0 2px 8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4)',
+    lg: '0 2px 12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4)'
+  },
+
+  border: {
+    radius: {
+      sm: '4px',
+      base: '6px',
+      md: '8px',
+      lg: '10px',
+      xl: '12px'
+    },
+    border2: colors.SURFACE2,
+    border1: colors.SURFACE1,
+    border0: colors.SURFACE0
+  },
+
+  colors: {
+    text: {
+      white: colors.WHITE,
+      green: colors.GREEN,
+      danger: colors.RED,
+      warning: colors.PEACH,
+      muted: colors.SUBTEXT0,
+      purple: colors.MAUVE,
+      yellow: colors.YELLOW,
+      subtext2: colors.TEXT,
+      subtext1: colors.SUBTEXT1,
+      subtext0: colors.SUBTEXT0
+    },
+    bg: {
+      danger: colors.MAROON
+    },
+    accent: colors.MAUVE
+  },
+
+  input: {
+    bg: colors.SURFACE0,
+    border: colors.SURFACE0,
+    focusBorder: colors.LAVENDER,
+    placeholder: {
+      color: colors.OVERLAY0,
+      opacity: 0.75
+    }
+  },
+
+  sidebar: {
+    color: colors.TEXT,
+    muted: colors.SUBTEXT0,
+    bg: colors.BASE,
+    dragbar: {
+      border: colors.SURFACE1,
+      activeBorder: colors.SURFACE2
+    },
+
+    search: {
+      border: '1px solid transparent',
+      bg: colors.SURFACE0
+    },
+
+    collection: {
+      item: {
+        bg: colors.SURFACE0,
+        hoverBg: colors.SURFACE1,
+        focusBorder: colors.LAVENDER,
+        indentBorder: `solid 1px ${colors.SURFACE2}`,
+        active: {
+          indentBorder: `solid 1px ${colors.MAUVE}`
+        },
+        example: {
+          iconColor: colors.OVERLAY1
+        }
+      }
+    },
+
+    dropdownIcon: {
+      color: colors.TEXT
+    }
+  },
+
+  dropdown: {
+    color: colors.TEXT,
+    iconColor: colors.SUBTEXT1,
+    bg: colors.MANTLE,
+    hoverBg: 'rgba(110, 115, 141, 0.16)',
+    shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
+    separator: colors.SURFACE1,
+    selectedColor: colors.MAUVE,
+    mutedText: colors.SUBTEXT0
+  },
+
+  workspace: {
+    accent: colors.MAUVE,
+    border: colors.SURFACE1,
+    button: {
+      bg: colors.SURFACE0
+    }
+  },
+
+  request: {
+    methods: {
+      get: colors.GREEN,
+      post: colors.BLUE,
+      put: colors.YELLOW,
+      delete: colors.RED,
+      patch: colors.PEACH,
+      options: colors.TEAL,
+      head: colors.SAPPHIRE
+    },
+
+    grpc: colors.SKY,
+    ws: colors.MAUVE,
+    gql: colors.PINK
+  },
+
+  requestTabPanel: {
+    url: {
+      bg: colors.BASE,
+      icon: colors.TEXT,
+      iconDanger: colors.RED,
+      border: `solid 1px ${colors.SURFACE0}`
+    },
+    dragbar: {
+      border: colors.SURFACE1,
+      activeBorder: colors.OVERLAY0
+    },
+    responseStatus: colors.TEXT,
+    responseOk: colors.GREEN,
+    responseError: colors.RED,
+    responsePending: colors.BLUE,
+    responseOverlayBg: 'rgba(36, 39, 58, 0.6)',
+
+    card: {
+      bg: colors.MANTLE,
+      border: 'transparent',
+      hr: colors.SURFACE0
+    },
+
+    graphqlDocsExplorer: {
+      bg: colors.BASE,
+      color: colors.TEXT
+    }
+  },
+
+  notifications: {
+    bg: colors.SURFACE0,
+    list: {
+      bg: colors.SURFACE0,
+      borderRight: colors.SURFACE2,
+      borderBottom: colors.SURFACE1,
+      hoverBg: colors.SURFACE1,
+      active: {
+        border: colors.BLUE,
+        bg: colors.SURFACE2,
+        hoverBg: colors.SURFACE2
+      }
+    }
+  },
+
+  modal: {
+    title: {
+      color: colors.TEXT,
+      bg: colors.MANTLE
+    },
+    body: {
+      color: colors.TEXT,
+      bg: colors.BASE
+    },
+    input: {
+      bg: colors.SURFACE0,
+      border: colors.SURFACE0,
+      focusBorder: colors.LAVENDER
+    },
+    backdrop: {
+      opacity: 0.2
+    }
+  },
+
+  button: {
+    secondary: {
+      color: colors.TEXT,
+      bg: colors.SURFACE0,
+      border: colors.SURFACE0,
+      hoverBorder: colors.OVERLAY0
+    },
+    close: {
+      color: colors.TEXT,
+      bg: 'transparent',
+      border: 'transparent',
+      hoverBorder: ''
+    },
+    disabled: {
+      color: colors.OVERLAY0,
+      bg: colors.SURFACE1,
+      border: colors.SURFACE1
+    },
+    danger: {
+      color: colors.CRUST,
+      bg: colors.RED,
+      border: colors.RED
+    }
+  },
+  button2: {
+    color: {
+      primary: {
+        bg: colors.MAUVE,
+        text: colors.CRUST,
+        border: colors.MAUVE
+      },
+      secondary: {
+        bg: colors.SURFACE0,
+        text: colors.TEXT,
+        border: colors.SURFACE1
+      },
+      success: {
+        bg: colors.GREEN,
+        text: colors.CRUST,
+        border: colors.GREEN
+      },
+      warning: {
+        bg: colors.PEACH,
+        text: colors.CRUST,
+        border: colors.PEACH
+      },
+      danger: {
+        bg: colors.RED,
+        text: colors.CRUST,
+        border: colors.RED
+      }
+    }
+  },
+
+  tabs: {
+    marginRight: '1.2rem',
+    active: {
+      fontWeight: 400,
+      color: colors.TEXT,
+      border: colors.MAUVE
+    },
+    secondary: {
+      active: {
+        bg: colors.SURFACE0,
+        color: colors.TEXT
+      },
+      inactive: {
+        bg: colors.SURFACE1,
+        color: colors.SUBTEXT0
+      }
+    }
+  },
+
+  requestTabs: {
+    color: colors.TEXT,
+    bg: colors.SURFACE0,
+    bottomBorder: colors.SURFACE1,
+    icon: {
+      color: colors.OVERLAY0,
+      hoverColor: colors.TEXT,
+      hoverBg: colors.BASE
+    },
+    example: {
+      iconColor: colors.OVERLAY1
+    },
+    shortTab: {
+      color: colors.TEXT,
+      bg: 'transparent',
+      hoverColor: colors.TEXT,
+      hoverBg: colors.SURFACE0
+    }
+  },
+
+  codemirror: {
+    bg: colors.BASE,
+    border: colors.BASE,
+    placeholder: {
+      color: colors.OVERLAY0,
+      opacity: 0.5
+    },
+    gutter: {
+      bg: colors.BASE
+    },
+    variable: {
+      valid: colors.GREEN,
+      invalid: colors.RED,
+      prompt: colors.BLUE,
+      info: {
+        color: colors.TEXT,
+        bg: colors.SURFACE0,
+        boxShadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
+        editorBg: colors.MANTLE,
+        iconColor: colors.OVERLAY0,
+        editorBorder: colors.SURFACE0,
+        editorFocusBorder: colors.LAVENDER,
+        editableDisplayHoverBg: 'rgba(202, 211, 245, 0.03)',
+        border: colors.SURFACE2
+      }
+    },
+    tokens: {
+      definition: colors.CODEMIRROR_TOKENS.DEFINITION,
+      property: colors.CODEMIRROR_TOKENS.PROPERTY,
+      string: colors.CODEMIRROR_TOKENS.STRING,
+      number: colors.CODEMIRROR_TOKENS.NUMBER,
+      atom: colors.CODEMIRROR_TOKENS.ATOM,
+      variable: colors.CODEMIRROR_TOKENS.VARIABLE,
+      keyword: colors.CODEMIRROR_TOKENS.KEYWORD,
+      comment: colors.CODEMIRROR_TOKENS.COMMENT,
+      operator: colors.CODEMIRROR_TOKENS.OPERATOR
+    },
+    searchLineHighlightCurrent: 'rgba(110, 115, 141, 0.18)',
+    searchMatch: colors.YELLOW,
+    searchMatchActive: colors.PEACH
+  },
+
+  table: {
+    border: colors.SURFACE0,
+    thead: {
+      color: colors.TEXT
+    },
+    striped: colors.SURFACE0,
+    input: {
+      color: colors.TEXT
+    }
+  },
+
+  plainGrid: {
+    hoverBg: colors.SURFACE0
+  },
+
+  scrollbar: {
+    color: colors.SURFACE0
+  },
+
+  dragAndDrop: {
+    border: colors.LAVENDER,
+    borderStyle: '2px solid',
+    hoverBg: 'rgba(183, 189, 248, 0.08)',
+    transition: 'all 0.1s ease'
+  },
+  infoTip: {
+    bg: colors.SURFACE0,
+    border: colors.SURFACE1,
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.5)'
+  },
+
+  statusBar: {
+    border: colors.SURFACE0,
+    color: colors.SUBTEXT0
+  },
+
+  console: {
+    bg: colors.BASE,
+    headerBg: colors.MANTLE,
+    contentBg: colors.BASE,
+    border: colors.SURFACE0,
+    titleColor: colors.TEXT,
+    countColor: colors.SUBTEXT0,
+    buttonColor: colors.TEXT,
+    buttonHoverBg: 'rgba(202, 211, 245, 0.1)',
+    buttonHoverColor: colors.TEXT,
+    messageColor: colors.TEXT,
+    timestampColor: colors.SUBTEXT0,
+    emptyColor: colors.SUBTEXT0,
+    logHoverBg: 'rgba(202, 211, 245, 0.05)',
+    resizeHandleHover: colors.BLUE,
+    resizeHandleActive: colors.BLUE,
+    dropdownBg: colors.MANTLE,
+    dropdownHeaderBg: colors.SURFACE0,
+    optionHoverBg: 'rgba(202, 211, 245, 0.05)',
+    optionLabelColor: colors.TEXT,
+    optionCountColor: colors.SUBTEXT0,
+    checkboxColor: colors.MAUVE,
+    scrollbarTrack: colors.MANTLE,
+    scrollbarThumb: colors.SURFACE2,
+    scrollbarThumbHover: colors.OVERLAY0
+  },
+
+  grpc: {
+    tabNav: {
+      container: {
+        bg: colors.CRUST
+      },
+      button: {
+        active: {
+          bg: colors.SURFACE0,
+          color: colors.TEXT
+        },
+        inactive: {
+          bg: 'transparent',
+          color: colors.SUBTEXT0
+        }
+      }
+    },
+    importPaths: {
+      header: {
+        text: colors.SUBTEXT0,
+        button: {
+          color: colors.SUBTEXT0,
+          hoverColor: colors.TEXT
+        }
+      },
+      error: {
+        bg: 'transparent',
+        text: colors.RED,
+        link: {
+          color: colors.RED,
+          hoverColor: colors.MAROON
+        }
+      },
+      item: {
+        bg: 'transparent',
+        hoverBg: 'rgba(202, 211, 245, 0.05)',
+        text: colors.TEXT,
+        icon: colors.SUBTEXT0,
+        checkbox: {
+          color: colors.TEXT
+        },
+        invalid: {
+          opacity: 0.6,
+          text: colors.RED
+        }
+      },
+      empty: {
+        text: colors.SUBTEXT0
+      },
+      button: {
+        bg: colors.SURFACE0,
+        color: colors.TEXT,
+        border: colors.SURFACE0,
+        hoverBorder: colors.OVERLAY0
+      }
+    },
+    protoFiles: {
+      header: {
+        text: colors.SUBTEXT0,
+        button: {
+          color: colors.SUBTEXT0,
+          hoverColor: colors.TEXT
+        }
+      },
+      error: {
+        bg: 'transparent',
+        text: colors.RED,
+        link: {
+          color: colors.RED,
+          hoverColor: colors.MAROON
+        }
+      },
+      item: {
+        bg: 'transparent',
+        hoverBg: 'rgba(202, 211, 245, 0.05)',
+        selected: {
+          bg: 'rgba(198, 160, 246, 0.2)',
+          border: colors.MAUVE
+        },
+        text: colors.TEXT,
+        secondaryText: colors.SUBTEXT0,
+        icon: colors.SUBTEXT0,
+        invalid: {
+          opacity: 0.6,
+          text: colors.RED
+        }
+      },
+      empty: {
+        text: colors.SUBTEXT0
+      },
+      button: {
+        bg: colors.SURFACE0,
+        color: colors.TEXT,
+        border: colors.SURFACE0,
+        hoverBorder: colors.OVERLAY0
+      }
+    }
+  },
+  deprecationWarning: {
+    bg: 'rgba(237, 135, 150, 0.1)',
+    border: 'rgba(237, 135, 150, 0.1)',
+    icon: colors.RED,
+    text: colors.SUBTEXT1
+  },
+
+  preferences: {
+    sidebar: {
+      border: colors.SURFACE1
+    }
+  },
+
+  examples: {
+    buttonBg: 'rgba(198, 160, 246, 0.1)',
+    buttonColor: colors.MAUVE,
+    buttonText: colors.CRUST,
+    buttonIconColor: colors.CRUST,
+    border: colors.SURFACE1,
+    urlBar: {
+      border: colors.SURFACE0,
+      bg: colors.MANTLE
+    },
+    table: {
+      thead: {
+        bg: colors.MANTLE,
+        color: colors.SUBTEXT0
+      }
+    },
+    checkbox: {
+      color: colors.CRUST
+    }
+  },
+
+  app: {
+    collection: {
+      toolbar: {
+        environmentSelector: {
+          bg: colors.BASE,
+          border: colors.SURFACE0,
+          icon: colors.MAUVE,
+          text: colors.TEXT,
+          caret: colors.SUBTEXT0,
+          separator: colors.SURFACE0,
+          hoverBg: colors.BASE,
+          hoverBorder: colors.SURFACE1,
+
+          noEnvironment: {
+            text: colors.SUBTEXT0,
+            bg: colors.BASE,
+            border: colors.SURFACE0,
+            hoverBg: colors.BASE,
+            hoverBorder: colors.SURFACE1
+          }
+        },
+        sandboxMode: {
+          safeMode: {
+            bg: 'rgba(166, 218, 149, 0.12)',
+            color: colors.GREEN
+          },
+          developerMode: {
+            bg: 'rgba(238, 212, 159, 0.11)',
+            color: colors.YELLOW
+          }
+        }
+      }
+    }
+  }
+};
+
+export default catppuccinMacchiatoTheme;
diff --git a/packages/bruno-app/src/themes/dark/catppuccin-mocha.js b/packages/bruno-app/src/themes/dark/catppuccin-mocha.js
new file mode 100644
index 000000000..6889277f4
--- /dev/null
+++ b/packages/bruno-app/src/themes/dark/catppuccin-mocha.js
@@ -0,0 +1,632 @@
+// Catppuccin Mocha - Dark Theme (Original)
+// Based on https://catppuccin.com/palette/
+
+const colors = {
+  // Catppuccin Mocha Palette
+  ROSEWATER: '#f5e0dc',
+  FLAMINGO: '#f2cdcd',
+  PINK: '#f5c2e7',
+  MAUVE: '#cba6f7',
+  RED: '#f38ba8',
+  MAROON: '#eba0ac',
+  PEACH: '#fab387',
+  YELLOW: '#f9e2af',
+  GREEN: '#a6e3a1',
+  TEAL: '#94e2d5',
+  SKY: '#89dceb',
+  SAPPHIRE: '#74c7ec',
+  BLUE: '#89b4fa',
+  LAVENDER: '#b4befe',
+
+  TEXT: '#cdd6f4',
+  SUBTEXT1: '#bac2de',
+  SUBTEXT0: '#a6adc8',
+  OVERLAY2: '#9399b2',
+  OVERLAY1: '#7f849c',
+  OVERLAY0: '#6c7086',
+  SURFACE2: '#585b70',
+  SURFACE1: '#45475a',
+  SURFACE0: '#313244',
+  BASE: '#1e1e2e',
+  MANTLE: '#181825',
+  CRUST: '#11111b',
+
+  WHITE: '#fff',
+  BLACK: '#000',
+
+  CODEMIRROR_TOKENS: {
+    DEFINITION: '#a6e3a1',
+    PROPERTY: '#89b4fa',
+    STRING: '#f9e2af',
+    NUMBER: '#fab387',
+    ATOM: '#f5c2e7',
+    VARIABLE: '#74c7ec',
+    KEYWORD: '#f38ba8',
+    COMMENT: '#6c7086',
+    OPERATOR: '#94e2d5'
+  }
+};
+
+const catppuccinMochaTheme = {
+  mode: 'dark',
+  brand: colors.MAUVE,
+  text: colors.TEXT,
+  textLink: colors.BLUE,
+  bg: colors.BASE,
+
+  accents: {
+    primary: colors.MAUVE
+  },
+
+  background: {
+    base: colors.BASE,
+    mantle: colors.MANTLE,
+    crust: colors.CRUST,
+    surface0: colors.SURFACE0,
+    surface1: colors.SURFACE1,
+    surface2: colors.SURFACE2
+  },
+
+  overlay: {
+    overlay2: colors.OVERLAY2,
+    overlay1: colors.OVERLAY1,
+    overlay0: colors.OVERLAY0
+  },
+
+  font: {
+    size: {
+      xs: '0.6875rem', // 11px
+      sm: '0.75rem', // 12px
+      base: '0.8125rem', // 13px
+      md: '0.875rem', // 14px
+      lg: '1rem', // 16px
+      xl: '1.125rem' // 18px
+    }
+  },
+
+  shadow: {
+    sm: '0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3)',
+    md: '0 2px 8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4)',
+    lg: '0 2px 12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4)'
+  },
+
+  border: {
+    radius: {
+      sm: '4px',
+      base: '6px',
+      md: '8px',
+      lg: '10px',
+      xl: '12px'
+    },
+    border2: colors.SURFACE2,
+    border1: colors.SURFACE1,
+    border0: colors.SURFACE0
+  },
+
+  colors: {
+    text: {
+      white: colors.WHITE,
+      green: colors.GREEN,
+      danger: colors.RED,
+      warning: colors.PEACH,
+      muted: colors.SUBTEXT0,
+      purple: colors.MAUVE,
+      yellow: colors.YELLOW,
+      subtext2: colors.TEXT,
+      subtext1: colors.SUBTEXT1,
+      subtext0: colors.SUBTEXT0
+    },
+    bg: {
+      danger: colors.MAROON
+    },
+    accent: colors.MAUVE
+  },
+
+  input: {
+    bg: colors.SURFACE0,
+    border: colors.SURFACE0,
+    focusBorder: colors.LAVENDER,
+    placeholder: {
+      color: colors.OVERLAY0,
+      opacity: 0.75
+    }
+  },
+
+  sidebar: {
+    color: colors.TEXT,
+    muted: colors.SUBTEXT0,
+    bg: colors.BASE,
+    dragbar: {
+      border: colors.SURFACE1,
+      activeBorder: colors.SURFACE2
+    },
+
+    search: {
+      border: '1px solid transparent',
+      bg: colors.SURFACE0
+    },
+
+    collection: {
+      item: {
+        bg: colors.SURFACE0,
+        hoverBg: colors.SURFACE1,
+        focusBorder: colors.LAVENDER,
+        indentBorder: `solid 1px ${colors.SURFACE2}`,
+        active: {
+          indentBorder: `solid 1px ${colors.MAUVE}`
+        },
+        example: {
+          iconColor: colors.OVERLAY1
+        }
+      }
+    },
+
+    dropdownIcon: {
+      color: colors.TEXT
+    }
+  },
+
+  dropdown: {
+    color: colors.TEXT,
+    iconColor: colors.SUBTEXT1,
+    bg: colors.MANTLE,
+    hoverBg: 'rgba(108, 112, 134, 0.16)',
+    shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
+    separator: colors.SURFACE1,
+    selectedColor: colors.MAUVE,
+    mutedText: colors.SUBTEXT0
+  },
+
+  workspace: {
+    accent: colors.MAUVE,
+    border: colors.SURFACE1,
+    button: {
+      bg: colors.SURFACE0
+    }
+  },
+
+  request: {
+    methods: {
+      get: colors.GREEN,
+      post: colors.BLUE,
+      put: colors.YELLOW,
+      delete: colors.RED,
+      patch: colors.PEACH,
+      options: colors.TEAL,
+      head: colors.SAPPHIRE
+    },
+
+    grpc: colors.SKY,
+    ws: colors.MAUVE,
+    gql: colors.PINK
+  },
+
+  requestTabPanel: {
+    url: {
+      bg: colors.BASE,
+      icon: colors.TEXT,
+      iconDanger: colors.RED,
+      border: `solid 1px ${colors.SURFACE0}`
+    },
+    dragbar: {
+      border: colors.SURFACE1,
+      activeBorder: colors.OVERLAY0
+    },
+    responseStatus: colors.TEXT,
+    responseOk: colors.GREEN,
+    responseError: colors.RED,
+    responsePending: colors.BLUE,
+    responseOverlayBg: 'rgba(30, 30, 46, 0.6)',
+
+    card: {
+      bg: colors.MANTLE,
+      border: 'transparent',
+      hr: colors.SURFACE0
+    },
+
+    graphqlDocsExplorer: {
+      bg: colors.BASE,
+      color: colors.TEXT
+    }
+  },
+
+  notifications: {
+    bg: colors.SURFACE0,
+    list: {
+      bg: colors.SURFACE0,
+      borderRight: colors.SURFACE2,
+      borderBottom: colors.SURFACE1,
+      hoverBg: colors.SURFACE1,
+      active: {
+        border: colors.BLUE,
+        bg: colors.SURFACE2,
+        hoverBg: colors.SURFACE2
+      }
+    }
+  },
+
+  modal: {
+    title: {
+      color: colors.TEXT,
+      bg: colors.MANTLE
+    },
+    body: {
+      color: colors.TEXT,
+      bg: colors.BASE
+    },
+    input: {
+      bg: colors.SURFACE0,
+      border: colors.SURFACE0,
+      focusBorder: colors.LAVENDER
+    },
+    backdrop: {
+      opacity: 0.2
+    }
+  },
+
+  button: {
+    secondary: {
+      color: colors.TEXT,
+      bg: colors.SURFACE0,
+      border: colors.SURFACE0,
+      hoverBorder: colors.OVERLAY0
+    },
+    close: {
+      color: colors.TEXT,
+      bg: 'transparent',
+      border: 'transparent',
+      hoverBorder: ''
+    },
+    disabled: {
+      color: colors.OVERLAY0,
+      bg: colors.SURFACE1,
+      border: colors.SURFACE1
+    },
+    danger: {
+      color: colors.CRUST,
+      bg: colors.RED,
+      border: colors.RED
+    }
+  },
+  button2: {
+    color: {
+      primary: {
+        bg: colors.MAUVE,
+        text: colors.CRUST,
+        border: colors.MAUVE
+      },
+      secondary: {
+        bg: colors.SURFACE0,
+        text: colors.TEXT,
+        border: colors.SURFACE1
+      },
+      success: {
+        bg: colors.GREEN,
+        text: colors.CRUST,
+        border: colors.GREEN
+      },
+      warning: {
+        bg: colors.PEACH,
+        text: colors.CRUST,
+        border: colors.PEACH
+      },
+      danger: {
+        bg: colors.RED,
+        text: colors.CRUST,
+        border: colors.RED
+      }
+    }
+  },
+
+  tabs: {
+    marginRight: '1.2rem',
+    active: {
+      fontWeight: 400,
+      color: colors.TEXT,
+      border: colors.MAUVE
+    },
+    secondary: {
+      active: {
+        bg: colors.SURFACE0,
+        color: colors.TEXT
+      },
+      inactive: {
+        bg: colors.SURFACE1,
+        color: colors.SUBTEXT0
+      }
+    }
+  },
+
+  requestTabs: {
+    color: colors.TEXT,
+    bg: colors.SURFACE0,
+    bottomBorder: colors.SURFACE1,
+    icon: {
+      color: colors.OVERLAY0,
+      hoverColor: colors.TEXT,
+      hoverBg: colors.BASE
+    },
+    example: {
+      iconColor: colors.OVERLAY1
+    },
+    shortTab: {
+      color: colors.TEXT,
+      bg: 'transparent',
+      hoverColor: colors.TEXT,
+      hoverBg: colors.SURFACE0
+    }
+  },
+
+  codemirror: {
+    bg: colors.BASE,
+    border: colors.BASE,
+    placeholder: {
+      color: colors.OVERLAY0,
+      opacity: 0.5
+    },
+    gutter: {
+      bg: colors.BASE
+    },
+    variable: {
+      valid: colors.GREEN,
+      invalid: colors.RED,
+      prompt: colors.BLUE,
+      info: {
+        color: colors.TEXT,
+        bg: colors.SURFACE0,
+        boxShadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
+        editorBg: colors.MANTLE,
+        iconColor: colors.OVERLAY0,
+        editorBorder: colors.SURFACE0,
+        editorFocusBorder: colors.LAVENDER,
+        editableDisplayHoverBg: 'rgba(205, 214, 244, 0.03)',
+        border: colors.SURFACE2
+      }
+    },
+    tokens: {
+      definition: colors.CODEMIRROR_TOKENS.DEFINITION,
+      property: colors.CODEMIRROR_TOKENS.PROPERTY,
+      string: colors.CODEMIRROR_TOKENS.STRING,
+      number: colors.CODEMIRROR_TOKENS.NUMBER,
+      atom: colors.CODEMIRROR_TOKENS.ATOM,
+      variable: colors.CODEMIRROR_TOKENS.VARIABLE,
+      keyword: colors.CODEMIRROR_TOKENS.KEYWORD,
+      comment: colors.CODEMIRROR_TOKENS.COMMENT,
+      operator: colors.CODEMIRROR_TOKENS.OPERATOR
+    },
+    searchLineHighlightCurrent: 'rgba(108, 112, 134, 0.18)',
+    searchMatch: colors.YELLOW,
+    searchMatchActive: colors.PEACH
+  },
+
+  table: {
+    border: colors.SURFACE0,
+    thead: {
+      color: colors.TEXT
+    },
+    striped: colors.SURFACE0,
+    input: {
+      color: colors.TEXT
+    }
+  },
+
+  plainGrid: {
+    hoverBg: colors.SURFACE0
+  },
+
+  scrollbar: {
+    color: colors.SURFACE0
+  },
+
+  dragAndDrop: {
+    border: colors.LAVENDER,
+    borderStyle: '2px solid',
+    hoverBg: 'rgba(180, 190, 254, 0.08)',
+    transition: 'all 0.1s ease'
+  },
+  infoTip: {
+    bg: colors.SURFACE0,
+    border: colors.SURFACE1,
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.5)'
+  },
+
+  statusBar: {
+    border: colors.SURFACE0,
+    color: colors.SUBTEXT0
+  },
+
+  console: {
+    bg: colors.BASE,
+    headerBg: colors.MANTLE,
+    contentBg: colors.BASE,
+    border: colors.SURFACE0,
+    titleColor: colors.TEXT,
+    countColor: colors.SUBTEXT0,
+    buttonColor: colors.TEXT,
+    buttonHoverBg: 'rgba(205, 214, 244, 0.1)',
+    buttonHoverColor: colors.TEXT,
+    messageColor: colors.TEXT,
+    timestampColor: colors.SUBTEXT0,
+    emptyColor: colors.SUBTEXT0,
+    logHoverBg: 'rgba(205, 214, 244, 0.05)',
+    resizeHandleHover: colors.BLUE,
+    resizeHandleActive: colors.BLUE,
+    dropdownBg: colors.MANTLE,
+    dropdownHeaderBg: colors.SURFACE0,
+    optionHoverBg: 'rgba(205, 214, 244, 0.05)',
+    optionLabelColor: colors.TEXT,
+    optionCountColor: colors.SUBTEXT0,
+    checkboxColor: colors.MAUVE,
+    scrollbarTrack: colors.MANTLE,
+    scrollbarThumb: colors.SURFACE2,
+    scrollbarThumbHover: colors.OVERLAY0
+  },
+
+  grpc: {
+    tabNav: {
+      container: {
+        bg: colors.CRUST
+      },
+      button: {
+        active: {
+          bg: colors.SURFACE0,
+          color: colors.TEXT
+        },
+        inactive: {
+          bg: 'transparent',
+          color: colors.SUBTEXT0
+        }
+      }
+    },
+    importPaths: {
+      header: {
+        text: colors.SUBTEXT0,
+        button: {
+          color: colors.SUBTEXT0,
+          hoverColor: colors.TEXT
+        }
+      },
+      error: {
+        bg: 'transparent',
+        text: colors.RED,
+        link: {
+          color: colors.RED,
+          hoverColor: colors.MAROON
+        }
+      },
+      item: {
+        bg: 'transparent',
+        hoverBg: 'rgba(205, 214, 244, 0.05)',
+        text: colors.TEXT,
+        icon: colors.SUBTEXT0,
+        checkbox: {
+          color: colors.TEXT
+        },
+        invalid: {
+          opacity: 0.6,
+          text: colors.RED
+        }
+      },
+      empty: {
+        text: colors.SUBTEXT0
+      },
+      button: {
+        bg: colors.SURFACE0,
+        color: colors.TEXT,
+        border: colors.SURFACE0,
+        hoverBorder: colors.OVERLAY0
+      }
+    },
+    protoFiles: {
+      header: {
+        text: colors.SUBTEXT0,
+        button: {
+          color: colors.SUBTEXT0,
+          hoverColor: colors.TEXT
+        }
+      },
+      error: {
+        bg: 'transparent',
+        text: colors.RED,
+        link: {
+          color: colors.RED,
+          hoverColor: colors.MAROON
+        }
+      },
+      item: {
+        bg: 'transparent',
+        hoverBg: 'rgba(205, 214, 244, 0.05)',
+        selected: {
+          bg: 'rgba(203, 166, 247, 0.2)',
+          border: colors.MAUVE
+        },
+        text: colors.TEXT,
+        secondaryText: colors.SUBTEXT0,
+        icon: colors.SUBTEXT0,
+        invalid: {
+          opacity: 0.6,
+          text: colors.RED
+        }
+      },
+      empty: {
+        text: colors.SUBTEXT0
+      },
+      button: {
+        bg: colors.SURFACE0,
+        color: colors.TEXT,
+        border: colors.SURFACE0,
+        hoverBorder: colors.OVERLAY0
+      }
+    }
+  },
+  deprecationWarning: {
+    bg: 'rgba(243, 139, 168, 0.1)',
+    border: 'rgba(243, 139, 168, 0.1)',
+    icon: colors.RED,
+    text: colors.SUBTEXT1
+  },
+
+  preferences: {
+    sidebar: {
+      border: colors.SURFACE1
+    }
+  },
+
+  examples: {
+    buttonBg: 'rgba(203, 166, 247, 0.1)',
+    buttonColor: colors.MAUVE,
+    buttonText: colors.CRUST,
+    buttonIconColor: colors.CRUST,
+    border: colors.SURFACE1,
+    urlBar: {
+      border: colors.SURFACE0,
+      bg: colors.MANTLE
+    },
+    table: {
+      thead: {
+        bg: colors.MANTLE,
+        color: colors.SUBTEXT0
+      }
+    },
+    checkbox: {
+      color: colors.CRUST
+    }
+  },
+
+  app: {
+    collection: {
+      toolbar: {
+        environmentSelector: {
+          bg: colors.BASE,
+          border: colors.SURFACE0,
+          icon: colors.MAUVE,
+          text: colors.TEXT,
+          caret: colors.SUBTEXT0,
+          separator: colors.SURFACE0,
+          hoverBg: colors.BASE,
+          hoverBorder: colors.SURFACE1,
+
+          noEnvironment: {
+            text: colors.SUBTEXT0,
+            bg: colors.BASE,
+            border: colors.SURFACE0,
+            hoverBg: colors.BASE,
+            hoverBorder: colors.SURFACE1
+          }
+        },
+        sandboxMode: {
+          safeMode: {
+            bg: 'rgba(166, 227, 161, 0.12)',
+            color: colors.GREEN
+          },
+          developerMode: {
+            bg: 'rgba(249, 226, 175, 0.11)',
+            color: colors.YELLOW
+          }
+        }
+      }
+    }
+  }
+};
+
+export default catppuccinMochaTheme;
diff --git a/packages/bruno-app/src/themes/dark/dark-monochrome.js b/packages/bruno-app/src/themes/dark/dark-monochrome.js
new file mode 100644
index 000000000..b23e6c50a
--- /dev/null
+++ b/packages/bruno-app/src/themes/dark/dark-monochrome.js
@@ -0,0 +1,619 @@
+const colors = {
+  BRAND: '#a3a3a3',
+  TEXT: '#d4d4d4',
+  TEXT_MUTED: '#858585',
+  TEXT_LINK: '#b0b0b0',
+  BG: '#1e1e1e',
+
+  GREEN: '#a3a3a3',
+  YELLOW: '#a3a3a3',
+  WHITE: '#fff',
+  BLACK: '#000',
+
+  GRAY_1: '#252526',
+  GRAY_2: '#3D3D3D',
+  GRAY_3: '#444444',
+  GRAY_4: '#666666',
+  GRAY_5: '#b0b0b0',
+  GRAY_6: '#cbcbcb',
+  GRAY_7: '#e5e5e5',
+  GRAY_8: '#eaeaea',
+  GRAY_9: '#f3f3f3',
+  GRAY_10: '#f8f8f8',
+
+  CODEMIRROR_TOKENS: {
+    DEFINITION: '#b0b0b0',
+    PROPERTY: '#a3a3a3',
+    STRING: '#c0c0c0',
+    NUMBER: '#b0b0b0',
+    ATOM: '#a3a3a3',
+    VARIABLE: '#b0b0b0',
+    KEYWORD: '#d4d4d4',
+    COMMENT: '#6a6a6a',
+    OPERATOR: '#d4d4d4'
+  }
+};
+
+const darkMonochromeTheme = {
+  mode: 'dark',
+  brand: colors.BRAND,
+  text: colors.TEXT,
+  textLink: colors.TEXT_LINK,
+  bg: colors.BG,
+
+  accents: {
+    primary: colors.BRAND
+  },
+
+  background: {
+    base: colors.BG,
+    mantle: colors.GRAY_1,
+    crust: '#333333',
+    surface0: colors.GRAY_2,
+    surface1: colors.GRAY_3,
+    surface2: colors.GRAY_4
+  },
+
+  overlay: {
+    overlay2: '#666666',
+    overlay1: '#555555',
+    overlay0: '#444444'
+  },
+
+  font: {
+    size: {
+      xs: '0.6875rem',
+      sm: '0.75rem',
+      base: '0.8125rem',
+      md: '0.875rem',
+      lg: '1rem',
+      xl: '1.125rem'
+    }
+  },
+
+  shadow: {
+    sm: '0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3)',
+    md: '0 2px 8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4)',
+    lg: '0 2px 12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4)'
+  },
+
+  border: {
+    radius: {
+      sm: '4px',
+      base: '6px',
+      md: '8px',
+      lg: '10px',
+      xl: '12px'
+    },
+    border2: colors.GRAY_4,
+    border1: colors.GRAY_3,
+    border0: colors.GRAY_2
+  },
+
+  colors: {
+    text: {
+      white: colors.WHITE,
+      green: '#a3a3a3',
+      danger: '#b0b0b0',
+      warning: '#a3a3a3',
+      muted: colors.TEXT_MUTED,
+      purple: '#a3a3a3',
+      yellow: colors.YELLOW,
+      subtext2: colors.GRAY_6,
+      subtext1: colors.GRAY_5,
+      subtext0: colors.GRAY_4
+    },
+    bg: {
+      danger: '#666666'
+    },
+    accent: colors.BRAND
+  },
+
+  input: {
+    bg: 'rgb(65, 65, 65)',
+    border: 'rgb(65, 65, 65)',
+    focusBorder: 'rgb(65, 65, 65)',
+    placeholder: {
+      color: '#a2a2a2',
+      opacity: 0.75
+    }
+  },
+
+  sidebar: {
+    color: '#ccc',
+    muted: '#9d9d9d',
+    bg: colors.GRAY_1,
+    dragbar: {
+      border: 'transparent',
+      activeBorder: colors.GRAY_4
+    },
+
+    search: {
+      border: '1px solid transparent',
+      bg: colors.GRAY_2
+    },
+
+    collection: {
+      item: {
+        bg: '#37373D',
+        hoverBg: '#2A2D2F',
+        focusBorder: '#4e4e4e',
+        indentBorder: 'solid 1px #585858',
+        active: {
+          indentBorder: 'solid 1px #4c4c4c'
+        },
+        example: {
+          iconColor: colors.GRAY_5
+        }
+      }
+    },
+
+    dropdownIcon: {
+      color: '#ccc'
+    }
+  },
+
+  dropdown: {
+    color: 'rgb(204, 204, 204)',
+    iconColor: 'rgb(204, 204, 204)',
+    bg: 'rgb(48, 48, 49)',
+    hoverBg: '#6A6A6A29',
+    shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
+    separator: '#444',
+    selectedColor: '#a3a3a3',
+    mutedText: '#9B9B9B'
+  },
+
+  workspace: {
+    accent: '#a3a3a3',
+    border: '#444',
+    button: {
+      bg: colors.GRAY_2
+    }
+  },
+
+  request: {
+    methods: {
+      get: '#a3a3a3',
+      post: '#b0b0b0',
+      put: '#9a9a9a',
+      delete: '#c0c0c0',
+      patch: '#9a9a9a',
+      options: '#8a8a8a',
+      head: '#9da5b4'
+    },
+
+    grpc: '#a3a3a3',
+    ws: '#b0b0b0',
+    gql: '#9a9a9a'
+  },
+
+  requestTabPanel: {
+    url: {
+      bg: colors.BG,
+      icon: 'rgb(204, 204, 204)',
+      iconDanger: '#b0b0b0',
+      border: `solid 1px ${colors.GRAY_3}`
+    },
+    dragbar: {
+      border: '#444',
+      activeBorder: '#8a8a8a'
+    },
+    responseStatus: '#ccc',
+    responseOk: '#a3a3a3',
+    responseError: '#b0b0b0',
+    responsePending: '#a3a3a3',
+    responseOverlayBg: 'rgba(30, 30, 30, 0.6)',
+
+    card: {
+      bg: '#252526',
+      border: 'transparent',
+      hr: '#424242'
+    },
+
+    graphqlDocsExplorer: {
+      bg: '#1e1e1e',
+      color: '#d4d4d4'
+    }
+  },
+
+  notifications: {
+    bg: colors.GRAY_3,
+    list: {
+      bg: '3D3D3D',
+      borderRight: '#4f4f4f',
+      borderBottom: '#545454',
+      hoverBg: '#434343',
+      active: {
+        border: '#a3a3a3',
+        bg: '#4f4f4f',
+        hoverBg: '#4f4f4f'
+      }
+    }
+  },
+
+  modal: {
+    title: {
+      color: '#ccc',
+      bg: 'rgb(38, 38, 39)'
+    },
+    body: {
+      color: '#ccc',
+      bg: 'rgb(48, 48, 49)'
+    },
+    input: {
+      bg: 'rgb(65, 65, 65)',
+      border: 'rgb(65, 65, 65)',
+      focusBorder: 'rgb(65, 65, 65)'
+    },
+    backdrop: {
+      opacity: 0.2
+    }
+  },
+
+  button: {
+    secondary: {
+      color: 'rgb(204, 204, 204)',
+      bg: '#525252',
+      border: '#525252',
+      hoverBorder: '#696969'
+    },
+    close: {
+      color: '#ccc',
+      bg: 'transparent',
+      border: 'transparent',
+      hoverBorder: ''
+    },
+    disabled: {
+      color: '#a5a5a5',
+      bg: '#626262',
+      border: '#626262'
+    },
+    danger: {
+      color: '#fff',
+      bg: '#666666',
+      border: '#666666'
+    }
+  },
+  button2: {
+    color: {
+      primary: {
+        bg: colors.BRAND,
+        text: colors.BLACK,
+        border: colors.BRAND
+      },
+      secondary: {
+        bg: colors.GRAY_4,
+        text: '#fff',
+        border: colors.GRAY_5
+      },
+      success: {
+        bg: '#666666',
+        text: '#fff',
+        border: '#666666'
+      },
+      warning: {
+        bg: '#858585',
+        text: '#1e1e1e',
+        border: '#858585'
+      },
+      danger: {
+        bg: '#737373',
+        text: '#fff',
+        border: '#737373'
+      }
+    }
+  },
+
+  tabs: {
+    marginRight: '1.2rem',
+    active: {
+      fontWeight: 400,
+      color: '#CCCCCC',
+      border: '#a3a3a3'
+    },
+    secondary: {
+      active: {
+        bg: '#2D2D2D',
+        color: '#CCCCCC'
+      },
+      inactive: {
+        bg: '#3F3F3F',
+        color: '#CCCCCC'
+      }
+    }
+  },
+
+  requestTabs: {
+    color: '#ccc',
+    bg: '#2A2D2F',
+    bottomBorder: '#444',
+    icon: {
+      color: '#9f9f9f',
+      hoverColor: 'rgb(204, 204, 204)',
+      hoverBg: '#1e1e1e'
+    },
+    example: {
+      iconColor: colors.GRAY_5
+    },
+    shortTab: {
+      color: '#ccc',
+      bg: 'transparent',
+      hoverColor: '#ccc',
+      hoverBg: colors.GRAY_3
+    }
+  },
+
+  codemirror: {
+    bg: colors.BG,
+    border: colors.BG,
+    placeholder: {
+      color: '#a2a2a2',
+      opacity: 0.5
+    },
+    gutter: {
+      bg: colors.BG
+    },
+    variable: {
+      valid: '#a3a3a3',
+      invalid: '#b0b0b0',
+      prompt: '#a3a3a3',
+      info: {
+        color: '#FFFFFF',
+        bg: '#343434',
+        boxShadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
+        editorBg: '#292929',
+        iconColor: '#989898',
+        editorBorder: colors.GRAY_3,
+        editorFocusBorder: '#CCCCCC',
+        editableDisplayHoverBg: 'rgba(255,255,255,0.03)',
+        border: '#4F4F4F'
+      }
+    },
+    tokens: {
+      definition: colors.CODEMIRROR_TOKENS.DEFINITION,
+      property: colors.CODEMIRROR_TOKENS.PROPERTY,
+      string: colors.CODEMIRROR_TOKENS.STRING,
+      number: colors.CODEMIRROR_TOKENS.NUMBER,
+      atom: colors.CODEMIRROR_TOKENS.ATOM,
+      variable: colors.CODEMIRROR_TOKENS.VARIABLE,
+      keyword: colors.CODEMIRROR_TOKENS.KEYWORD,
+      comment: colors.CODEMIRROR_TOKENS.COMMENT,
+      operator: colors.CODEMIRROR_TOKENS.OPERATOR
+    },
+    searchLineHighlightCurrent: 'rgba(120,120,120,0.18)',
+    searchMatch: '#a3a3a3',
+    searchMatchActive: '#d4d4d4'
+  },
+
+  table: {
+    border: '#333',
+    thead: {
+      color: 'rgb(204, 204, 204)'
+    },
+    striped: '#2A2D2F',
+    input: {
+      color: '#ccc'
+    }
+  },
+
+  plainGrid: {
+    hoverBg: colors.GRAY_3
+  },
+
+  scrollbar: {
+    color: 'rgb(52 51 49)'
+  },
+
+  dragAndDrop: {
+    border: '#666666',
+    borderStyle: '2px solid',
+    hoverBg: 'rgba(102, 102, 102, 0.08)',
+    transition: 'all 0.1s ease'
+  },
+  infoTip: {
+    bg: '#1f1f1f',
+    border: '#333333',
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.5)'
+  },
+
+  statusBar: {
+    border: '#323233',
+    color: 'rgb(169, 169, 169)'
+  },
+
+  console: {
+    bg: '#1e1e1e',
+    headerBg: '#2d2d30',
+    contentBg: '#1e1e1e',
+    border: '#3c3c3c',
+    titleColor: '#cccccc',
+    countColor: '#858585',
+    buttonColor: '#cccccc',
+    buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
+    buttonHoverColor: '#ffffff',
+    messageColor: '#cccccc',
+    timestampColor: '#858585',
+    emptyColor: '#858585',
+    logHoverBg: 'rgba(255, 255, 255, 0.05)',
+    resizeHandleHover: '#a3a3a3',
+    resizeHandleActive: '#a3a3a3',
+    dropdownBg: '#2d2d30',
+    dropdownHeaderBg: '#3c3c3c',
+    optionHoverBg: 'rgba(255, 255, 255, 0.05)',
+    optionLabelColor: '#cccccc',
+    optionCountColor: '#858585',
+    checkboxColor: colors.BRAND,
+    scrollbarTrack: '#2d2d30',
+    scrollbarThumb: '#5a5a5a',
+    scrollbarThumbHover: '#6a6a6a'
+  },
+
+  grpc: {
+    tabNav: {
+      container: {
+        bg: '#262626'
+      },
+      button: {
+        active: {
+          bg: '#404040',
+          color: '#ffffff'
+        },
+        inactive: {
+          bg: 'transparent',
+          color: '#a3a3a3'
+        }
+      }
+    },
+    importPaths: {
+      header: {
+        text: '#9d9d9d',
+        button: {
+          color: '#9d9d9d',
+          hoverColor: '#d4d4d4'
+        }
+      },
+      error: {
+        bg: 'transparent',
+        text: '#b0b0b0',
+        link: {
+          color: '#b0b0b0',
+          hoverColor: '#c0c0c0'
+        }
+      },
+      item: {
+        bg: 'transparent',
+        hoverBg: 'rgba(255, 255, 255, 0.05)',
+        text: '#d4d4d4',
+        icon: '#9d9d9d',
+        checkbox: {
+          color: '#d4d4d4'
+        },
+        invalid: {
+          opacity: 0.6,
+          text: '#b0b0b0'
+        }
+      },
+      empty: {
+        text: '#9d9d9d'
+      },
+      button: {
+        bg: '#525252',
+        color: '#d4d4d4',
+        border: '#525252',
+        hoverBorder: '#696969'
+      }
+    },
+    protoFiles: {
+      header: {
+        text: '#9d9d9d',
+        button: {
+          color: '#9d9d9d',
+          hoverColor: '#d4d4d4'
+        }
+      },
+      error: {
+        bg: 'transparent',
+        text: '#b0b0b0',
+        link: {
+          color: '#b0b0b0',
+          hoverColor: '#c0c0c0'
+        }
+      },
+      item: {
+        bg: 'transparent',
+        hoverBg: 'rgba(255, 255, 255, 0.05)',
+        selected: {
+          bg: 'rgba(163, 163, 163, 0.2)',
+          border: '#a3a3a3'
+        },
+        text: '#d4d4d4',
+        secondaryText: '#9d9d9d',
+        icon: '#9d9d9d',
+        invalid: {
+          opacity: 0.6,
+          text: '#b0b0b0'
+        }
+      },
+      empty: {
+        text: '#9d9d9d'
+      },
+      button: {
+        bg: '#525252',
+        color: '#d4d4d4',
+        border: '#525252',
+        hoverBorder: '#696969'
+      }
+    }
+  },
+  deprecationWarning: {
+    bg: 'rgba(176, 176, 176, 0.1)',
+    border: 'rgba(176, 176, 176, 0.1)',
+    icon: '#b0b0b0',
+    text: '#B8B8B8'
+  },
+
+  preferences: {
+    sidebar: {
+      border: '#444444'
+    }
+  },
+
+  examples: {
+    buttonBg: '#a3a3a31A',
+    buttonColor: '#a3a3a3',
+    buttonText: '#fff',
+    buttonIconColor: '#fff',
+    border: '#444',
+    urlBar: {
+      border: colors.GRAY_3,
+      bg: '#292929'
+    },
+    table: {
+      thead: {
+        bg: '#292929',
+        color: '#969696'
+      }
+    },
+    checkbox: {
+      color: '#000'
+    }
+  },
+
+  app: {
+    collection: {
+      toolbar: {
+        environmentSelector: {
+          bg: colors.BG,
+          border: colors.GRAY_3,
+          icon: colors.BRAND,
+          text: colors.TEXT,
+          caret: colors.TEXT_MUTED,
+          separator: colors.GRAY_3,
+          hoverBg: colors.BG,
+          hoverBorder: colors.GRAY_4,
+
+          noEnvironment: {
+            text: colors.TEXT_MUTED,
+            bg: colors.BG,
+            border: colors.GRAY_3,
+            hoverBg: colors.BG,
+            hoverBorder: colors.GRAY_4
+          }
+        },
+        sandboxMode: {
+          safeMode: {
+            bg: 'rgba(163, 163, 163, 0.12)',
+            color: '#a3a3a3'
+          },
+          developerMode: {
+            bg: 'rgba(163, 163, 163, 0.11)',
+            color: '#a3a3a3'
+          }
+        }
+      }
+    }
+  }
+};
+
+export default darkMonochromeTheme;
diff --git a/packages/bruno-app/src/themes/dark/dark-pastel.js b/packages/bruno-app/src/themes/dark/dark-pastel.js
new file mode 100644
index 000000000..42aa5c875
--- /dev/null
+++ b/packages/bruno-app/src/themes/dark/dark-pastel.js
@@ -0,0 +1,636 @@
+/**
+ * Dark Pastel Theme - "Nebula"
+ * A rich, dreamy dark theme with luminous pastel accents.
+ * Inspired by northern lights, night gardens, and starlit dreams.
+ * Deep enough to be easy on the eyes, vibrant enough to inspire.
+ */
+
+const colors = {
+  // Primary palette - glowing pastels against deep purple-black
+  BRAND: '#f0a6ca', // Soft rose - warm and inviting
+  TEXT: '#e8e0f0', // Lavender white - soft, readable
+  TEXT_MUTED: '#a89fc4', // Dusty lavender
+  TEXT_LINK: '#a8c5f0', // Soft periwinkle blue
+  BG: '#1a1625', // Deep plum-black
+
+  // Core colors
+  WHITE: '#ffffff',
+  BLACK: '#0d0a12',
+  SLATE: '#e8e0f0',
+
+  // Luminous pastels - glowing against darkness
+  GREEN: '#7dd3a8', // Mint glow
+  YELLOW: '#f0d77d', // Soft gold
+  RED: '#f0887d', // Coral blush
+  PURPLE: '#c4a6f0', // Lavender dream
+  BLUE: '#7db8f0', // Sky shimmer
+  PINK: '#f0a6ca', // Rose petal
+  ORANGE: '#f0b87d', // Peach sunset
+  TEAL: '#7dd3c9', // Aqua glow
+  MAGENTA: '#e09fd9', // Orchid
+
+  // Deep grayscale with purple undertones
+  GRAY_1: '#1f1a2e', // Deepest plum
+  GRAY_2: '#2a2440', // Dark violet
+  GRAY_3: '#352e4d', // Muted purple
+  GRAY_4: '#453d5c', // Dusty violet
+  GRAY_5: '#5c5478', // Medium violet
+  GRAY_6: '#7a7294', // Soft violet
+  GRAY_7: '#9890ad', // Light violet
+  GRAY_8: '#b8b0cc', // Pale violet
+  GRAY_9: '#d8d0e8', // Whisper violet
+  GRAY_10: '#f0e8ff', // Lightest violet
+
+  // CodeMirror syntax - a constellation of colors
+  CODEMIRROR_TOKENS: {
+    DEFINITION: '#7dd3a8', // Mint - definitions stand out fresh
+    PROPERTY: '#7db8f0', // Sky blue - clear and calm
+    STRING: '#f0a6ca', // Rose - strings feel warm
+    NUMBER: '#7dd3c9', // Teal - numbers are precise
+    ATOM: '#c4a6f0', // Lavender - atoms are special
+    VARIABLE: '#a8c5f0', // Periwinkle - variables flow
+    KEYWORD: '#e09fd9', // Orchid - keywords command attention
+    COMMENT: '#7a7294', // Muted violet - comments recede
+    OPERATOR: '#b8b0cc' // Pale violet - operators connect
+  }
+};
+
+const darkPastelTheme = {
+  mode: 'dark',
+  brand: colors.BRAND,
+  text: colors.TEXT,
+  textLink: colors.TEXT_LINK,
+  bg: colors.BG,
+
+  accents: {
+    primary: colors.BRAND
+  },
+
+  background: {
+    base: colors.BG,
+    mantle: colors.GRAY_1,
+    crust: colors.GRAY_2,
+    surface0: colors.GRAY_3,
+    surface1: colors.GRAY_4,
+    surface2: colors.GRAY_5
+  },
+
+  overlay: {
+    overlay2: colors.GRAY_6,
+    overlay1: '#555555',
+    overlay0: '#444444'
+  },
+
+  font: {
+    size: {
+      xs: '0.6875rem',
+      sm: '0.75rem',
+      base: '0.8125rem',
+      md: '0.875rem',
+      lg: '1rem',
+      xl: '1.125rem'
+    }
+  },
+
+  shadow: {
+    sm: '0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(196, 166, 240, 0.08)',
+    md: '0 2px 8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(196, 166, 240, 0.10)',
+    lg: '0 4px 16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(196, 166, 240, 0.12)'
+  },
+
+  border: {
+    radius: {
+      sm: '4px',
+      base: '6px',
+      md: '8px',
+      lg: '10px',
+      xl: '12px'
+    },
+    border2: colors.GRAY_5,
+    border1: colors.GRAY_4,
+    border0: colors.GRAY_3
+  },
+
+  colors: {
+    text: {
+      white: colors.WHITE,
+      green: colors.GREEN,
+      danger: colors.RED,
+      warning: colors.ORANGE,
+      muted: colors.TEXT_MUTED,
+      purple: colors.PURPLE,
+      yellow: colors.YELLOW,
+      subtext2: colors.GRAY_8,
+      subtext1: colors.GRAY_7,
+      subtext0: colors.GRAY_6
+    },
+    bg: {
+      danger: '#c4626a'
+    },
+    accent: colors.BRAND
+  },
+
+  input: {
+    bg: colors.GRAY_2,
+    border: colors.GRAY_4,
+    focusBorder: colors.BRAND,
+    placeholder: {
+      color: colors.GRAY_6,
+      opacity: 0.8
+    }
+  },
+
+  sidebar: {
+    color: colors.TEXT,
+    muted: colors.TEXT_MUTED,
+    bg: '#1d1928',
+    dragbar: {
+      border: colors.GRAY_3,
+      activeBorder: colors.BRAND
+    },
+    search: {
+      border: '1px solid transparent',
+      bg: colors.GRAY_2
+    },
+    collection: {
+      item: {
+        bg: colors.GRAY_2,
+        hoverBg: colors.GRAY_3,
+        focusBorder: colors.BRAND,
+        indentBorder: `solid 1px ${colors.GRAY_4}`,
+        active: {
+          indentBorder: `solid 1px ${colors.BRAND}50`
+        },
+        example: {
+          iconColor: colors.GRAY_6
+        }
+      }
+    },
+    dropdownIcon: {
+      color: colors.TEXT_MUTED
+    }
+  },
+
+  dropdown: {
+    color: colors.TEXT,
+    iconColor: colors.TEXT_MUTED,
+    bg: colors.GRAY_2,
+    hoverBg: colors.GRAY_3,
+    shadow: 'rgba(0, 0, 0, 0.5) 0px 6px 16px -2px',
+    separator: colors.GRAY_4,
+    selectedColor: colors.BRAND,
+    mutedText: colors.GRAY_6
+  },
+
+  workspace: {
+    accent: colors.BRAND,
+    border: colors.GRAY_4,
+    button: {
+      bg: colors.GRAY_3
+    }
+  },
+
+  request: {
+    methods: {
+      get: colors.GREEN, // Mint - success, retrieval
+      post: colors.PURPLE, // Lavender - creation
+      put: colors.ORANGE, // Peach - update
+      delete: colors.RED, // Coral - deletion
+      patch: colors.YELLOW, // Gold - modification
+      options: colors.TEAL, // Aqua - metadata
+      head: colors.BLUE // Sky - lightweight
+    },
+    grpc: '#9e8fd9', // Soft indigo
+    ws: colors.MAGENTA, // Orchid
+    gql: colors.PINK // Rose
+  },
+
+  requestTabPanel: {
+    url: {
+      bg: colors.BG,
+      icon: colors.TEXT_MUTED,
+      iconDanger: colors.RED,
+      border: `solid 1px ${colors.GRAY_4}`
+    },
+    dragbar: {
+      border: colors.GRAY_4,
+      activeBorder: colors.BRAND
+    },
+    responseStatus: colors.TEXT_MUTED,
+    responseOk: colors.GREEN,
+    responseError: colors.RED,
+    responsePending: colors.BLUE,
+    responseOverlayBg: 'rgba(26, 22, 37, 0.75)',
+    card: {
+      bg: colors.GRAY_1,
+      border: 'transparent',
+      hr: colors.GRAY_4
+    },
+    graphqlDocsExplorer: {
+      bg: colors.BG,
+      color: colors.TEXT
+    }
+  },
+
+  notifications: {
+    bg: colors.GRAY_3,
+    list: {
+      bg: colors.GRAY_2,
+      borderRight: colors.GRAY_4,
+      borderBottom: colors.GRAY_4,
+      hoverBg: colors.GRAY_3,
+      active: {
+        border: colors.BRAND,
+        bg: colors.GRAY_4,
+        hoverBg: colors.GRAY_4
+      }
+    }
+  },
+
+  modal: {
+    title: {
+      color: colors.TEXT,
+      bg: colors.GRAY_1
+    },
+    body: {
+      color: colors.TEXT,
+      bg: colors.GRAY_2
+    },
+    input: {
+      bg: colors.GRAY_3,
+      border: colors.GRAY_4,
+      focusBorder: colors.BRAND
+    },
+    backdrop: {
+      opacity: 0.5
+    }
+  },
+
+  button: {
+    secondary: {
+      color: colors.TEXT,
+      bg: colors.GRAY_4,
+      border: colors.GRAY_4,
+      hoverBorder: colors.GRAY_6
+    },
+    close: {
+      color: colors.TEXT,
+      bg: 'transparent',
+      border: 'transparent',
+      hoverBorder: ''
+    },
+    disabled: {
+      color: colors.GRAY_6,
+      bg: colors.GRAY_4,
+      border: colors.GRAY_4
+    },
+    danger: {
+      color: colors.WHITE,
+      bg: '#c4626a',
+      border: '#c4626a'
+    }
+  },
+
+  button2: {
+    color: {
+      primary: {
+        bg: colors.BRAND,
+        text: colors.BLACK,
+        border: colors.BRAND
+      },
+      secondary: {
+        bg: colors.GRAY_4,
+        text: colors.TEXT,
+        border: colors.GRAY_5
+      },
+      success: {
+        bg: colors.GREEN,
+        text: colors.BLACK,
+        border: colors.GREEN
+      },
+      warning: {
+        bg: colors.ORANGE,
+        text: colors.BLACK,
+        border: colors.ORANGE
+      },
+      danger: {
+        bg: colors.RED,
+        text: colors.WHITE,
+        border: colors.RED
+      }
+    }
+  },
+
+  tabs: {
+    marginRight: '1.2rem',
+    active: {
+      fontWeight: 400,
+      color: colors.TEXT,
+      border: colors.BRAND
+    },
+    secondary: {
+      active: {
+        bg: colors.GRAY_3,
+        color: colors.TEXT
+      },
+      inactive: {
+        bg: colors.GRAY_4,
+        color: colors.TEXT_MUTED
+      }
+    }
+  },
+
+  requestTabs: {
+    color: colors.TEXT,
+    bg: colors.GRAY_2,
+    bottomBorder: colors.GRAY_4,
+    icon: {
+      color: colors.GRAY_6,
+      hoverColor: colors.TEXT,
+      hoverBg: colors.GRAY_3
+    },
+    example: {
+      iconColor: colors.GRAY_6
+    },
+    shortTab: {
+      color: colors.TEXT_MUTED,
+      bg: 'transparent',
+      hoverColor: colors.TEXT,
+      hoverBg: colors.GRAY_3
+    }
+  },
+
+  codemirror: {
+    bg: colors.BG,
+    border: colors.BG,
+    placeholder: {
+      color: colors.GRAY_6,
+      opacity: 0.6
+    },
+    gutter: {
+      bg: colors.BG
+    },
+    variable: {
+      valid: colors.GREEN,
+      invalid: colors.RED,
+      prompt: colors.BLUE,
+      info: {
+        color: colors.TEXT,
+        bg: colors.GRAY_2,
+        boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
+        editorBg: colors.GRAY_3,
+        iconColor: colors.GRAY_6,
+        editorBorder: colors.GRAY_4,
+        editorFocusBorder: colors.BRAND,
+        editableDisplayHoverBg: colors.GRAY_3,
+        border: colors.GRAY_4
+      }
+    },
+    tokens: {
+      definition: colors.CODEMIRROR_TOKENS.DEFINITION,
+      property: colors.CODEMIRROR_TOKENS.PROPERTY,
+      string: colors.CODEMIRROR_TOKENS.STRING,
+      number: colors.CODEMIRROR_TOKENS.NUMBER,
+      atom: colors.CODEMIRROR_TOKENS.ATOM,
+      variable: colors.CODEMIRROR_TOKENS.VARIABLE,
+      keyword: colors.CODEMIRROR_TOKENS.KEYWORD,
+      comment: colors.CODEMIRROR_TOKENS.COMMENT,
+      operator: colors.CODEMIRROR_TOKENS.OPERATOR
+    },
+    searchLineHighlightCurrent: `${colors.BRAND}20`,
+    searchMatch: colors.YELLOW,
+    searchMatchActive: colors.ORANGE
+  },
+
+  table: {
+    border: colors.GRAY_4,
+    thead: {
+      color: colors.TEXT_MUTED
+    },
+    striped: colors.GRAY_2,
+    input: {
+      color: colors.TEXT
+    }
+  },
+
+  plainGrid: {
+    hoverBg: colors.GRAY_3
+  },
+
+  scrollbar: {
+    color: colors.GRAY_5
+  },
+
+  dragAndDrop: {
+    border: colors.BRAND,
+    borderStyle: '2px dashed',
+    hoverBg: `${colors.BRAND}10`,
+    transition: 'all 0.15s ease'
+  },
+
+  infoTip: {
+    bg: colors.GRAY_2,
+    border: colors.GRAY_4,
+    boxShadow: '0 4px 16px rgba(0, 0, 0, 0.4)'
+  },
+
+  statusBar: {
+    border: colors.GRAY_3,
+    color: colors.TEXT_MUTED
+  },
+
+  console: {
+    bg: colors.BG,
+    headerBg: colors.GRAY_2,
+    contentBg: colors.BG,
+    border: colors.GRAY_4,
+    titleColor: colors.TEXT,
+    countColor: colors.TEXT_MUTED,
+    buttonColor: colors.TEXT,
+    buttonHoverBg: colors.GRAY_3,
+    buttonHoverColor: colors.WHITE,
+    messageColor: colors.TEXT,
+    timestampColor: colors.TEXT_MUTED,
+    emptyColor: colors.TEXT_MUTED,
+    logHoverBg: colors.GRAY_2,
+    resizeHandleHover: colors.BRAND,
+    resizeHandleActive: colors.BRAND,
+    dropdownBg: colors.GRAY_2,
+    dropdownHeaderBg: colors.GRAY_3,
+    optionHoverBg: colors.GRAY_3,
+    optionLabelColor: colors.TEXT,
+    optionCountColor: colors.TEXT_MUTED,
+    checkboxColor: colors.BRAND,
+    scrollbarTrack: colors.GRAY_2,
+    scrollbarThumb: colors.GRAY_5,
+    scrollbarThumbHover: colors.GRAY_6
+  },
+
+  grpc: {
+    tabNav: {
+      container: {
+        bg: colors.GRAY_1
+      },
+      button: {
+        active: {
+          bg: colors.GRAY_3,
+          color: colors.TEXT
+        },
+        inactive: {
+          bg: 'transparent',
+          color: colors.TEXT_MUTED
+        }
+      }
+    },
+    importPaths: {
+      header: {
+        text: colors.TEXT_MUTED,
+        button: {
+          color: colors.TEXT_MUTED,
+          hoverColor: colors.TEXT
+        }
+      },
+      error: {
+        bg: 'transparent',
+        text: colors.RED,
+        link: {
+          color: colors.RED,
+          hoverColor: '#f5a09a'
+        }
+      },
+      item: {
+        bg: 'transparent',
+        hoverBg: colors.GRAY_3,
+        text: colors.TEXT,
+        icon: colors.TEXT_MUTED,
+        checkbox: {
+          color: colors.TEXT
+        },
+        invalid: {
+          opacity: 0.6,
+          text: colors.RED
+        }
+      },
+      empty: {
+        text: colors.TEXT_MUTED
+      },
+      button: {
+        bg: colors.GRAY_4,
+        color: colors.TEXT,
+        border: colors.GRAY_4,
+        hoverBorder: colors.GRAY_6
+      }
+    },
+    protoFiles: {
+      header: {
+        text: colors.TEXT_MUTED,
+        button: {
+          color: colors.TEXT_MUTED,
+          hoverColor: colors.TEXT
+        }
+      },
+      error: {
+        bg: 'transparent',
+        text: colors.RED,
+        link: {
+          color: colors.RED,
+          hoverColor: '#f5a09a'
+        }
+      },
+      item: {
+        bg: 'transparent',
+        hoverBg: colors.GRAY_3,
+        selected: {
+          bg: `${colors.BRAND}25`,
+          border: colors.BRAND
+        },
+        text: colors.TEXT,
+        secondaryText: colors.TEXT_MUTED,
+        icon: colors.TEXT_MUTED,
+        invalid: {
+          opacity: 0.6,
+          text: colors.RED
+        }
+      },
+      empty: {
+        text: colors.TEXT_MUTED
+      },
+      button: {
+        bg: colors.GRAY_4,
+        color: colors.TEXT,
+        border: colors.GRAY_4,
+        hoverBorder: colors.GRAY_6
+      }
+    }
+  },
+
+  deprecationWarning: {
+    bg: `${colors.ORANGE}18`,
+    border: `${colors.ORANGE}35`,
+    icon: colors.ORANGE,
+    text: colors.TEXT
+  },
+
+  preferences: {
+    sidebar: {
+      border: colors.GRAY_4
+    }
+  },
+
+  examples: {
+    buttonBg: `${colors.BRAND}20`,
+    buttonColor: colors.BRAND,
+    buttonText: colors.WHITE,
+    buttonIconColor: colors.WHITE,
+    border: colors.GRAY_4,
+    urlBar: {
+      border: colors.GRAY_4,
+      bg: colors.GRAY_2
+    },
+    table: {
+      thead: {
+        bg: colors.GRAY_2,
+        color: colors.TEXT_MUTED
+      }
+    },
+    checkbox: {
+      color: colors.BLACK
+    }
+  },
+
+  app: {
+    collection: {
+      toolbar: {
+        environmentSelector: {
+          bg: colors.BG,
+          border: colors.GRAY_4,
+          icon: colors.BRAND,
+          text: colors.TEXT,
+          caret: colors.TEXT_MUTED,
+          separator: colors.GRAY_4,
+          hoverBg: colors.BG,
+          hoverBorder: colors.GRAY_5,
+          noEnvironment: {
+            text: colors.TEXT_MUTED,
+            bg: colors.BG,
+            border: colors.GRAY_4,
+            hoverBg: colors.BG,
+            hoverBorder: colors.GRAY_5
+          }
+        },
+        sandboxMode: {
+          safeMode: {
+            bg: `${colors.GREEN}18`,
+            color: colors.GREEN
+          },
+          developerMode: {
+            bg: `${colors.ORANGE}18`,
+            color: colors.ORANGE
+          }
+        }
+      }
+    }
+  }
+};
+
+export default darkPastelTheme;
diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark/dark.js
similarity index 81%
rename from packages/bruno-app/src/themes/dark.js
rename to packages/bruno-app/src/themes/dark/dark.js
index de70578f4..869456c41 100644
--- a/packages/bruno-app/src/themes/dark.js
+++ b/packages/bruno-app/src/themes/dark/dark.js
@@ -1,4 +1,5 @@
 const colors = {
+  // BRAND: '#d9a342',
   BRAND: '#d9a342',
   TEXT: '#d4d4d4',
   TEXT_MUTED: '#858585',
@@ -23,23 +24,43 @@ const colors = {
 
   CODEMIRROR_TOKENS: {
     DEFINITION: '#9ccc9c', // Softer, brighter sage — better contrast
-    PROPERTY: '#7dcfff', // Soft sky blue, high clarity without being loud
-    STRING: '#d7ba7d', // VSCode-like warm string tone
-    NUMBER: '#4ec9b0', // Standard teal with higher clarity
-    ATOM: '#c586c0', // Brighter lavender, matches VSCode purple
-    VARIABLE: '#4fc1ff', // Clear aqua-blue (used widely in dark themes)
-    KEYWORD: '#c58679', // Coral-ish but muted to avoid eye strain
+    PROPERTY: 'hsl(202 90% 80% / 1)', // Soft sky blue, high clarity without being loud
+    STRING: 'hsl(41 50% 69% / 1)', // VSCode-like warm string tone
+    NUMBER: 'hsl(168 50% 57% / 1)', // Standard teal with higher clarity
+    ATOM: 'hsl(305 32% 69% / 1)', // Brighter lavender, matches VSCode purple
+    VARIABLE: 'hsl(201 90% 73% / 1)', // Clear aqua-blue (used widely in dark themes)
+    KEYWORD: 'hsl(10 36% 65% / 1)', // Coral-ish but muted to avoid eye strain
     COMMENT: '#6a9955', // Greenish-slate — very readable & subtle
     OPERATOR: '#d4d4d4' // Light gray — consistent with dark mode operators
   }
 };
 
 const darkTheme = {
+  mode: 'dark',
   brand: colors.BRAND,
   text: colors.TEXT,
   textLink: colors.TEXT_LINK,
   bg: colors.BG,
 
+  accents: {
+    primary: colors.BRAND
+  },
+
+  background: {
+    base: colors.BG,
+    mantle: colors.GRAY_1,
+    crust: '#333333',
+    surface0: colors.GRAY_2,
+    surface1: colors.GRAY_3,
+    surface2: colors.GRAY_4
+  },
+
+  overlay: {
+    overlay2: '#666666',
+    overlay1: '#555555',
+    overlay0: '#444444'
+  },
+
   font: {
     size: {
       xs: '0.6875rem', // 11px
@@ -64,16 +85,24 @@ const darkTheme = {
       md: '8px',
       lg: '10px',
       xl: '12px'
-    }
+    },
+    border2: colors.GRAY_4,
+    border1: colors.GRAY_3,
+    border0: colors.GRAY_2
   },
 
   colors: {
     text: {
+      white: colors.WHITE,
       green: colors.GREEN,
       danger: '#f06f57',
+      warning: '#f57c00',
       muted: colors.TEXT_MUTED,
       purple: '#cd56d6',
-      yellow: colors.YELLOW
+      yellow: colors.YELLOW,
+      subtext2: colors.GRAY_6,
+      subtext1: colors.GRAY_5,
+      subtext0: colors.GRAY_4
     },
     bg: {
       danger: '#d03544'
@@ -91,35 +120,15 @@ const darkTheme = {
     }
   },
 
-  variables: {
-    bg: 'rgb(48, 48, 49)',
-
-    name: {
-      color: '#569cd6'
-    },
-
-    runtime: {
-      color: 'rgb(255, 255, 255)'
-    }
-  },
-
-  menubar: {
-    bg: '#333333'
-  },
-
   sidebar: {
     color: '#ccc',
     muted: '#9d9d9d',
-    bg: colors.GRAY_1,
+    bg: colors.BG,
     dragbar: {
-      border: 'transparent',
+      border: colors.GRAY_2,
       activeBorder: colors.GRAY_4
     },
 
-    badge: {
-      bg: colors.GRAY_2
-    },
-
     search: {
       border: '1px solid transparent',
       bg: colors.GRAY_2
@@ -145,11 +154,6 @@ const darkTheme = {
     }
   },
 
-  welcome: {
-    heading: '#569cd6',
-    muted: '#9d9d9d'
-  },
-
   dropdown: {
     color: 'rgb(204, 204, 204)',
     iconColor: 'rgb(204, 204, 204)',
@@ -157,52 +161,22 @@ const darkTheme = {
     hoverBg: '#6A6A6A29',
     shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
     separator: '#444',
-    labelBg: '#4a4949',
-    selectedBg: '#d9a34214',
     selectedColor: '#d9a342',
-    mutedText: '#9B9B9B',
-    primaryText: '#D4D4D4',
-    secondaryText: '#9CA3AF',
-    headingText: '#FFFFFF'
-  },
-
-  listItem: {
-    hoverBg: '#2A2D2F',
-    activeBg: colors.GRAY_3
+    mutedText: '#9B9B9B'
   },
 
   workspace: {
     accent: '#D9A342',
     border: '#444',
-    borderMuted: '#585858',
-    card: {
-      bg: '#2A2D2F'
-    },
     button: {
-      bg: '#242424'
-    },
-    collection: {
-      header: {
-        indentBorder: 'solid 1px #444444'
-      },
-      item: {
-        indentBorder: 'solid 1px #313131'
-      }
-    },
-    environments: {
-      bg: '#212121',
-      indentBorder: 'solid 1px #313131',
-      activeBg: '#37373c',
-      search: {
-        bg: colors.GRAY_2
-      }
+      bg: colors.GRAY_2
     }
   },
 
   request: {
     methods: {
       get: '#5fbf7a', // Fresh jade — readable, calm success tone
-      post: '#b58adf', // Soft amethyst — cool, composed accent
+      post: 'hsl(270 49% 74% / 1)', // Soft amethyst — cool, composed accent
       put: '#d7a35a', // Warm amber-bronze — bridges BRAND + STRING
       delete: '#e06c75', // VSCode red — destructive but readable
       patch: '#d7a35a', // Same as PUT
@@ -220,17 +194,12 @@ const darkTheme = {
       bg: colors.BG,
       icon: 'rgb(204, 204, 204)',
       iconDanger: '#fa5343',
-      errorHoverBg: '#4a2a2a',
       border: `solid 1px ${colors.GRAY_3}`
     },
     dragbar: {
       border: '#444',
       activeBorder: '#8a8a8a'
     },
-    bodyModeSelect: {
-      color: 'transparent'
-    },
-    responseSendIcon: '#555',
     responseStatus: '#ccc',
     responseOk: '#8cd656',
     responseError: '#f06f57',
@@ -240,49 +209,15 @@ const darkTheme = {
     card: {
       bg: '#252526',
       border: 'transparent',
-      borderDark: '#8cd656',
       hr: '#424242'
     },
 
-    cardTable: {
-      border: '#333',
-      bg: '#252526',
-      table: {
-        thead: {
-          bg: colors.GRAY_2,
-          color: '#ccc'
-        }
-      }
-    },
     graphqlDocsExplorer: {
       bg: '#1e1e1e',
       color: '#d4d4d4'
     }
   },
 
-  collection: {
-    environment: {
-      bg: colors.GRAY_2,
-
-      settings: {
-        bg: colors.GRAY_2,
-        sidebar: {
-          bg: colors.GRAY_2,
-          borderRight: '#4f4f4f'
-        },
-        item: {
-          border: '#569cd6',
-          hoverBg: 'transparent',
-          active: {
-            bg: 'transparent',
-            hoverBg: 'transparent'
-          }
-        },
-        gridBorder: '#4f4f4f'
-      }
-    }
-  },
-
   notifications: {
     bg: colors.GRAY_3,
     list: {
@@ -301,8 +236,7 @@ const darkTheme = {
   modal: {
     title: {
       color: '#ccc',
-      bg: 'rgb(38, 38, 39)',
-      iconColor: '#ccc'
+      bg: 'rgb(38, 38, 39)'
     },
     body: {
       color: '#ccc',
@@ -315,9 +249,6 @@ const darkTheme = {
     },
     backdrop: {
       opacity: 0.2
-    },
-    closeButton: {
-      hoverBg: 'rgba(255, 255, 255, 0.1)'
     }
   },
 
@@ -349,23 +280,28 @@ const darkTheme = {
     color: {
       primary: {
         bg: colors.BRAND,
-        text: colors.BLACK
+        text: colors.BLACK,
+        border: colors.BRAND
       },
       secondary: {
-        bg: colors.GRAY_4,
-        text: '#fff'
+        bg: '#2a2a2a',
+        text: 'hsl(39 67% 64% / 1)',
+        border: '#3a3a3a'
       },
       success: {
         bg: '#059669',
-        text: '#fff'
+        text: '#fff',
+        border: '#059669'
       },
       warning: {
         bg: '#f59e0b',
-        text: '#1e1e1e'
+        text: '#1e1e1e',
+        border: '#f59e0b'
       },
       danger: {
         bg: '#f43f5e',
-        text: '#fff'
+        text: '#fff',
+        border: '#f43f5e'
       }
     }
   },
@@ -401,9 +337,6 @@ const darkTheme = {
     example: {
       iconColor: colors.GRAY_5
     },
-    active: {
-      bg: colors.GRAY_2
-    },
     shortTab: {
       color: '#ccc',
       bg: 'transparent',
@@ -479,12 +412,6 @@ const darkTheme = {
     hoverBg: 'rgba(102, 102, 102, 0.08)',
     transition: 'all 0.1s ease'
   },
-  tooltip: {
-    bg: '#1f1f1f',
-    color: '#ffffff',
-    shortcutColor: '#d9a342'
-  },
-
   infoTip: {
     bg: '#1f1f1f',
     border: '#333333',
diff --git a/packages/bruno-app/src/themes/dark/nord.js b/packages/bruno-app/src/themes/dark/nord.js
new file mode 100644
index 000000000..e1360371a
--- /dev/null
+++ b/packages/bruno-app/src/themes/dark/nord.js
@@ -0,0 +1,635 @@
+// Nord Theme for Bruno
+// https://www.nordtheme.com/
+//
+// Polar Night: nord0-nord3 (#2e3440, #3b4252, #434c5e, #4c566a)
+// Snow Storm: nord4-nord6 (#d8dee9, #e5e9f0, #eceff4)
+// Frost: nord7-nord10 (#8fbcbb, #88c0d0, #81a1c1, #5e81ac)
+// Aurora: nord11-nord15 (#bf616a, #d08770, #ebcb8b, #a3be8c, #b48ead)
+
+const colors = {
+  // Polar Night
+  NORD0: '#2e3440',
+  NORD1: '#3b4252',
+  NORD2: '#434c5e',
+  NORD3: '#4c566a',
+
+  // Snow Storm
+  NORD4: '#d8dee9',
+  NORD5: '#e5e9f0',
+  NORD6: '#eceff4',
+
+  // Frost
+  NORD7: '#8fbcbb',
+  NORD8: '#88c0d0',
+  NORD9: '#81a1c1',
+  NORD10: '#5e81ac',
+
+  // Aurora
+  NORD11: '#bf616a',
+  NORD12: '#d08770',
+  NORD13: '#ebcb8b',
+  NORD14: '#a3be8c',
+  NORD15: '#b48ead',
+
+  // Semantic aliases
+  BRAND: '#88c0d0',
+  TEXT: '#d8dee9',
+  TEXT_MUTED: '#7b88a1',
+  TEXT_LINK: '#88c0d0',
+  BG: '#2e3440',
+
+  WHITE: '#eceff4',
+  BLACK: '#2e3440',
+
+  CODEMIRROR_TOKENS: {
+    DEFINITION: '#a3be8c',
+    PROPERTY: '#88c0d0',
+    STRING: '#a3be8c',
+    NUMBER: '#b48ead',
+    ATOM: '#81a1c1',
+    VARIABLE: '#d8dee9',
+    KEYWORD: '#81a1c1',
+    COMMENT: '#616e88',
+    OPERATOR: '#81a1c1'
+  }
+};
+
+const nordTheme = {
+  mode: 'dark',
+  brand: colors.BRAND,
+  text: colors.TEXT,
+  textLink: colors.TEXT_LINK,
+  bg: colors.BG,
+
+  accents: {
+    primary: colors.BRAND
+  },
+
+  background: {
+    base: colors.NORD0,
+    mantle: colors.NORD1,
+    crust: colors.NORD2,
+    surface0: colors.NORD2,
+    surface1: colors.NORD3,
+    surface2: '#5d6b83'
+  },
+
+  overlay: {
+    overlay2: '#616e88',
+    overlay1: '#5d6b83',
+    overlay0: '#4c566a'
+  },
+
+  font: {
+    size: {
+      xs: '0.6875rem',
+      sm: '0.75rem',
+      base: '0.8125rem',
+      md: '0.875rem',
+      lg: '1rem',
+      xl: '1.125rem'
+    }
+  },
+
+  shadow: {
+    sm: '0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.2)',
+    md: '0 2px 8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3)',
+    lg: '0 2px 12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.3)'
+  },
+
+  border: {
+    radius: {
+      sm: '4px',
+      base: '6px',
+      md: '8px',
+      lg: '10px',
+      xl: '12px'
+    },
+    border2: colors.NORD3,
+    border1: colors.NORD2,
+    border0: colors.NORD1
+  },
+
+  colors: {
+    text: {
+      white: colors.WHITE,
+      green: colors.NORD14,
+      danger: colors.NORD11,
+      warning: colors.NORD12,
+      muted: colors.TEXT_MUTED,
+      purple: colors.NORD15,
+      yellow: colors.NORD13,
+      subtext2: colors.NORD4,
+      subtext1: colors.TEXT_MUTED,
+      subtext0: '#616e88'
+    },
+    bg: {
+      danger: colors.NORD11
+    },
+    accent: colors.BRAND
+  },
+
+  input: {
+    bg: colors.NORD1,
+    border: colors.NORD2,
+    focusBorder: colors.NORD8,
+    placeholder: {
+      color: colors.TEXT_MUTED,
+      opacity: 0.75
+    }
+  },
+
+  sidebar: {
+    color: colors.NORD4,
+    muted: colors.TEXT_MUTED,
+    bg: colors.BG,
+    dragbar: {
+      border: colors.NORD2,
+      activeBorder: colors.NORD3
+    },
+    search: {
+      border: '1px solid transparent',
+      bg: colors.NORD1
+    },
+    collection: {
+      item: {
+        bg: colors.NORD1,
+        hoverBg: colors.NORD2,
+        focusBorder: colors.NORD3,
+        indentBorder: `solid 1px ${colors.NORD3}`,
+        active: {
+          indentBorder: `solid 1px ${colors.NORD3}`
+        },
+        example: {
+          iconColor: colors.TEXT_MUTED
+        }
+      }
+    },
+    dropdownIcon: {
+      color: colors.NORD4
+    }
+  },
+
+  dropdown: {
+    color: colors.NORD4,
+    iconColor: colors.NORD4,
+    bg: colors.NORD1,
+    hoverBg: colors.NORD2,
+    shadow: 'rgba(0, 0, 0, 0.3) 0px 2px 8px',
+    separator: colors.NORD3,
+    selectedColor: colors.NORD8,
+    mutedText: colors.TEXT_MUTED
+  },
+
+  workspace: {
+    accent: colors.BRAND,
+    border: colors.NORD3,
+    button: {
+      bg: colors.NORD2
+    }
+  },
+
+  request: {
+    methods: {
+      get: colors.NORD14,
+      post: colors.NORD15,
+      put: colors.NORD13,
+      delete: colors.NORD11,
+      patch: colors.NORD12,
+      options: colors.NORD7,
+      head: colors.NORD9
+    },
+    grpc: colors.NORD8,
+    ws: colors.NORD13,
+    gql: colors.NORD15
+  },
+
+  requestTabPanel: {
+    url: {
+      bg: colors.BG,
+      icon: colors.NORD4,
+      iconDanger: colors.NORD11,
+      border: `solid 1px ${colors.NORD2}`
+    },
+    dragbar: {
+      border: colors.NORD3,
+      activeBorder: colors.NORD8
+    },
+    responseStatus: colors.NORD4,
+    responseOk: colors.NORD14,
+    responseError: colors.NORD11,
+    responsePending: colors.NORD8,
+    responseOverlayBg: 'rgba(46, 52, 64, 0.6)',
+    card: {
+      bg: colors.NORD1,
+      border: 'transparent',
+      hr: colors.NORD3
+    },
+    graphqlDocsExplorer: {
+      bg: colors.BG,
+      color: colors.NORD4
+    }
+  },
+
+  notifications: {
+    bg: colors.NORD2,
+    list: {
+      bg: colors.NORD1,
+      borderRight: colors.NORD3,
+      borderBottom: colors.NORD3,
+      hoverBg: colors.NORD2,
+      active: {
+        border: colors.NORD8,
+        bg: colors.NORD2,
+        hoverBg: colors.NORD2
+      }
+    }
+  },
+
+  modal: {
+    title: {
+      color: colors.NORD4,
+      bg: colors.NORD1
+    },
+    body: {
+      color: colors.NORD4,
+      bg: colors.NORD1
+    },
+    input: {
+      bg: colors.NORD2,
+      border: colors.NORD2,
+      focusBorder: colors.NORD8
+    },
+    backdrop: {
+      opacity: 0.3
+    }
+  },
+
+  button: {
+    secondary: {
+      color: colors.NORD4,
+      bg: colors.NORD10,
+      border: colors.NORD10,
+      hoverBorder: colors.NORD9
+    },
+    close: {
+      color: colors.NORD4,
+      bg: 'transparent',
+      border: 'transparent',
+      hoverBorder: ''
+    },
+    disabled: {
+      color: colors.TEXT_MUTED,
+      bg: colors.NORD3,
+      border: colors.NORD3
+    },
+    danger: {
+      color: colors.WHITE,
+      bg: colors.NORD11,
+      border: colors.NORD11
+    }
+  },
+
+  button2: {
+    color: {
+      primary: {
+        bg: colors.BRAND,
+        text: colors.NORD0,
+        border: colors.BRAND
+      },
+      secondary: {
+        bg: colors.NORD1,
+        text: colors.NORD4,
+        border: colors.NORD3
+      },
+      success: {
+        bg: colors.NORD14,
+        text: colors.NORD0,
+        border: colors.NORD14
+      },
+      warning: {
+        bg: colors.NORD13,
+        text: colors.NORD0,
+        border: colors.NORD13
+      },
+      danger: {
+        bg: colors.NORD11,
+        text: colors.NORD6,
+        border: colors.NORD11
+      }
+    }
+  },
+
+  tabs: {
+    marginRight: '1.2rem',
+    active: {
+      fontWeight: 400,
+      color: colors.NORD4,
+      border: colors.BRAND
+    },
+    secondary: {
+      active: {
+        bg: colors.NORD2,
+        color: colors.NORD4
+      },
+      inactive: {
+        bg: colors.NORD3,
+        color: colors.NORD4
+      }
+    }
+  },
+
+  requestTabs: {
+    color: colors.NORD4,
+    bg: colors.NORD1,
+    bottomBorder: colors.NORD3,
+    icon: {
+      color: colors.TEXT_MUTED,
+      hoverColor: colors.NORD4,
+      hoverBg: colors.NORD0
+    },
+    example: {
+      iconColor: colors.TEXT_MUTED
+    },
+    shortTab: {
+      color: colors.NORD4,
+      bg: 'transparent',
+      hoverColor: colors.NORD4,
+      hoverBg: colors.NORD2
+    }
+  },
+
+  codemirror: {
+    bg: colors.BG,
+    border: colors.BG,
+    placeholder: {
+      color: colors.TEXT_MUTED,
+      opacity: 0.5
+    },
+    gutter: {
+      bg: colors.BG
+    },
+    variable: {
+      valid: colors.NORD14,
+      invalid: colors.NORD11,
+      prompt: colors.NORD8,
+      info: {
+        color: colors.NORD6,
+        bg: colors.NORD2,
+        boxShadow: 'rgba(0, 0, 0, 0.3) 0px 2px 8px',
+        editorBg: colors.NORD1,
+        iconColor: colors.TEXT_MUTED,
+        editorBorder: colors.NORD3,
+        editorFocusBorder: colors.NORD4,
+        editableDisplayHoverBg: 'rgba(255, 255, 255, 0.03)',
+        border: colors.NORD3
+      }
+    },
+    tokens: {
+      definition: colors.CODEMIRROR_TOKENS.DEFINITION,
+      property: colors.CODEMIRROR_TOKENS.PROPERTY,
+      string: colors.CODEMIRROR_TOKENS.STRING,
+      number: colors.CODEMIRROR_TOKENS.NUMBER,
+      atom: colors.CODEMIRROR_TOKENS.ATOM,
+      variable: colors.CODEMIRROR_TOKENS.VARIABLE,
+      keyword: colors.CODEMIRROR_TOKENS.KEYWORD,
+      comment: colors.CODEMIRROR_TOKENS.COMMENT,
+      operator: colors.CODEMIRROR_TOKENS.OPERATOR
+    },
+    searchLineHighlightCurrent: 'rgba(136, 192, 208, 0.15)',
+    searchMatch: colors.NORD13,
+    searchMatchActive: colors.NORD12
+  },
+
+  table: {
+    border: colors.NORD2,
+    thead: {
+      color: colors.NORD4
+    },
+    striped: colors.NORD1,
+    input: {
+      color: colors.NORD4
+    }
+  },
+
+  plainGrid: {
+    hoverBg: colors.NORD2
+  },
+
+  scrollbar: {
+    color: colors.NORD2
+  },
+
+  dragAndDrop: {
+    border: colors.NORD3,
+    borderStyle: '2px solid',
+    hoverBg: 'rgba(76, 86, 106, 0.15)',
+    transition: 'all 0.1s ease'
+  },
+
+  infoTip: {
+    bg: colors.NORD1,
+    border: colors.NORD3,
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.4)'
+  },
+
+  statusBar: {
+    border: colors.NORD2,
+    color: colors.TEXT_MUTED
+  },
+
+  console: {
+    bg: colors.BG,
+    headerBg: colors.NORD1,
+    contentBg: colors.BG,
+    border: colors.NORD2,
+    titleColor: colors.NORD4,
+    countColor: colors.TEXT_MUTED,
+    buttonColor: colors.NORD4,
+    buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
+    buttonHoverColor: colors.NORD6,
+    messageColor: colors.NORD4,
+    timestampColor: colors.TEXT_MUTED,
+    emptyColor: colors.TEXT_MUTED,
+    logHoverBg: 'rgba(255, 255, 255, 0.05)',
+    resizeHandleHover: colors.NORD8,
+    resizeHandleActive: colors.NORD8,
+    dropdownBg: colors.NORD1,
+    dropdownHeaderBg: colors.NORD2,
+    optionHoverBg: 'rgba(255, 255, 255, 0.05)',
+    optionLabelColor: colors.NORD4,
+    optionCountColor: colors.TEXT_MUTED,
+    checkboxColor: colors.BRAND,
+    scrollbarTrack: colors.NORD1,
+    scrollbarThumb: colors.NORD3,
+    scrollbarThumbHover: colors.NORD9
+  },
+
+  grpc: {
+    tabNav: {
+      container: {
+        bg: colors.NORD1
+      },
+      button: {
+        active: {
+          bg: colors.NORD2,
+          color: colors.NORD6
+        },
+        inactive: {
+          bg: 'transparent',
+          color: colors.TEXT_MUTED
+        }
+      }
+    },
+    importPaths: {
+      header: {
+        text: colors.TEXT_MUTED,
+        button: {
+          color: colors.TEXT_MUTED,
+          hoverColor: colors.NORD4
+        }
+      },
+      error: {
+        bg: 'transparent',
+        text: colors.NORD11,
+        link: {
+          color: colors.NORD11,
+          hoverColor: '#d08770'
+        }
+      },
+      item: {
+        bg: 'transparent',
+        hoverBg: 'rgba(255, 255, 255, 0.05)',
+        text: colors.NORD4,
+        icon: colors.TEXT_MUTED,
+        checkbox: {
+          color: colors.NORD4
+        },
+        invalid: {
+          opacity: 0.6,
+          text: colors.NORD11
+        }
+      },
+      empty: {
+        text: colors.TEXT_MUTED
+      },
+      button: {
+        bg: colors.NORD10,
+        color: colors.NORD4,
+        border: colors.NORD10,
+        hoverBorder: colors.NORD9
+      }
+    },
+    protoFiles: {
+      header: {
+        text: colors.TEXT_MUTED,
+        button: {
+          color: colors.TEXT_MUTED,
+          hoverColor: colors.NORD4
+        }
+      },
+      error: {
+        bg: 'transparent',
+        text: colors.NORD11,
+        link: {
+          color: colors.NORD11,
+          hoverColor: '#d08770'
+        }
+      },
+      item: {
+        bg: 'transparent',
+        hoverBg: 'rgba(255, 255, 255, 0.05)',
+        selected: {
+          bg: 'rgba(136, 192, 208, 0.2)',
+          border: colors.BRAND
+        },
+        text: colors.NORD4,
+        secondaryText: colors.TEXT_MUTED,
+        icon: colors.TEXT_MUTED,
+        invalid: {
+          opacity: 0.6,
+          text: colors.NORD11
+        }
+      },
+      empty: {
+        text: colors.TEXT_MUTED
+      },
+      button: {
+        bg: colors.NORD10,
+        color: colors.NORD4,
+        border: colors.NORD10,
+        hoverBorder: colors.NORD9
+      }
+    }
+  },
+
+  deprecationWarning: {
+    bg: 'rgba(191, 97, 106, 0.1)',
+    border: 'rgba(191, 97, 106, 0.2)',
+    icon: colors.NORD11,
+    text: colors.NORD4
+  },
+
+  preferences: {
+    sidebar: {
+      border: colors.NORD3
+    }
+  },
+
+  examples: {
+    buttonBg: 'rgba(136, 192, 208, 0.1)',
+    buttonColor: colors.BRAND,
+    buttonText: colors.NORD6,
+    buttonIconColor: colors.NORD6,
+    border: colors.NORD3,
+    urlBar: {
+      border: colors.NORD2,
+      bg: colors.NORD1
+    },
+    table: {
+      thead: {
+        bg: colors.NORD1,
+        color: colors.TEXT_MUTED
+      }
+    },
+    checkbox: {
+      color: colors.NORD0
+    }
+  },
+
+  app: {
+    collection: {
+      toolbar: {
+        environmentSelector: {
+          bg: colors.BG,
+          border: colors.NORD2,
+          icon: colors.BRAND,
+          text: colors.TEXT,
+          caret: colors.TEXT_MUTED,
+          separator: colors.NORD2,
+          hoverBg: colors.BG,
+          hoverBorder: colors.NORD3,
+          noEnvironment: {
+            text: colors.TEXT_MUTED,
+            bg: colors.BG,
+            border: colors.NORD2,
+            hoverBg: colors.BG,
+            hoverBorder: colors.NORD3
+          }
+        },
+        sandboxMode: {
+          safeMode: {
+            bg: 'rgba(163, 190, 140, 0.12)',
+            color: colors.NORD14
+          },
+          developerMode: {
+            bg: 'rgba(235, 203, 139, 0.12)',
+            color: colors.NORD13
+          }
+        }
+      }
+    }
+  }
+};
+
+export default nordTheme;
diff --git a/packages/bruno-app/src/themes/dark/vscode.js b/packages/bruno-app/src/themes/dark/vscode.js
new file mode 100644
index 000000000..a332a358c
--- /dev/null
+++ b/packages/bruno-app/src/themes/dark/vscode.js
@@ -0,0 +1,637 @@
+// VS Code Dark+ Theme for Bruno
+// Based on the default Visual Studio Code Dark+ theme
+
+const colors = {
+  // VS Code Dark+ Core Colors
+  EDITOR_BG: '#1e1e1e',
+  SIDEBAR_BG: '#252526',
+  ACTIVITY_BAR_BG: '#333333',
+  PANEL_BG: '#1e1e1e',
+
+  // Text colors
+  TEXT: '#d4d4d4',
+  TEXT_MUTED: '#808080',
+  TEXT_LINK: '#3794ff',
+
+  // Brand - VS Code blue
+  BRAND: '#007acc',
+  BRAND_HOVER: '#1177bb',
+
+  // Semantic colors
+  GREEN: '#4ec9b0',
+  YELLOW: '#dcdcaa',
+  ORANGE: '#ce9178',
+  RED: '#f14c4c',
+  PURPLE: '#c586c0',
+  BLUE: '#569cd6',
+  CYAN: '#4fc1ff',
+
+  WHITE: '#ffffff',
+  BLACK: '#000000',
+
+  // Grays (VS Code specific)
+  GRAY_1: '#252526',
+  GRAY_2: '#2d2d2d',
+  GRAY_3: '#3c3c3c',
+  GRAY_4: '#474747',
+  GRAY_5: '#5a5a5a',
+  GRAY_6: '#6e6e6e',
+  GRAY_7: '#858585',
+  GRAY_8: '#a0a0a0',
+
+  // Borders
+  BORDER: '#454545',
+  BORDER_LIGHT: '#3c3c3c',
+
+  CODEMIRROR_TOKENS: {
+    DEFINITION: '#4ec9b0',
+    PROPERTY: '#9cdcfe',
+    STRING: '#ce9178',
+    NUMBER: '#b5cea8',
+    ATOM: '#569cd6',
+    VARIABLE: '#9cdcfe',
+    KEYWORD: '#c586c0',
+    COMMENT: '#6a9955',
+    OPERATOR: '#d4d4d4'
+  }
+};
+
+const vscodeDarkTheme = {
+  mode: 'dark',
+  brand: colors.BRAND,
+  text: colors.TEXT,
+  textLink: colors.TEXT_LINK,
+  bg: colors.EDITOR_BG,
+
+  accents: {
+    primary: colors.BRAND
+  },
+
+  background: {
+    base: colors.EDITOR_BG,
+    mantle: colors.SIDEBAR_BG,
+    crust: colors.GRAY_2,
+    surface0: colors.GRAY_3,
+    surface1: colors.GRAY_4,
+    surface2: colors.GRAY_5
+  },
+
+  overlay: {
+    overlay2: colors.GRAY_6,
+    overlay1: '#555555',
+    overlay0: '#444444'
+  },
+
+  font: {
+    size: {
+      xs: '0.6875rem',
+      sm: '0.75rem',
+      base: '0.8125rem',
+      md: '0.875rem',
+      lg: '1rem',
+      xl: '1.125rem'
+    }
+  },
+
+  shadow: {
+    sm: '0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3)',
+    md: '0 2px 8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4)',
+    lg: '0 2px 12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4)'
+  },
+
+  border: {
+    radius: {
+      sm: '4px',
+      base: '6px',
+      md: '8px',
+      lg: '10px',
+      xl: '12px'
+    },
+    border2: colors.GRAY_5,
+    border1: colors.BORDER,
+    border0: colors.BORDER_LIGHT
+  },
+
+  colors: {
+    text: {
+      white: colors.WHITE,
+      green: colors.GREEN,
+      danger: colors.RED,
+      warning: colors.ORANGE,
+      muted: colors.TEXT_MUTED,
+      purple: colors.PURPLE,
+      yellow: colors.YELLOW,
+      subtext2: colors.GRAY_8,
+      subtext1: colors.GRAY_7,
+      subtext0: colors.GRAY_6
+    },
+    bg: {
+      danger: '#f14c4c'
+    },
+    accent: colors.BRAND
+  },
+
+  input: {
+    bg: colors.GRAY_2,
+    border: colors.BORDER,
+    focusBorder: colors.BRAND,
+    placeholder: {
+      color: colors.TEXT_MUTED,
+      opacity: 0.75
+    }
+  },
+
+  sidebar: {
+    color: colors.TEXT,
+    muted: colors.TEXT_MUTED,
+    bg: colors.SIDEBAR_BG,
+    dragbar: {
+      border: colors.BORDER_LIGHT,
+      activeBorder: colors.GRAY_5
+    },
+    search: {
+      border: '1px solid transparent',
+      bg: colors.GRAY_2
+    },
+    collection: {
+      item: {
+        bg: colors.GRAY_2,
+        hoverBg: colors.GRAY_3,
+        focusBorder: colors.GRAY_4,
+        indentBorder: `solid 1px ${colors.BORDER}`,
+        active: {
+          indentBorder: `solid 1px ${colors.BORDER}`
+        },
+        example: {
+          iconColor: colors.GRAY_7
+        }
+      }
+    },
+    dropdownIcon: {
+      color: colors.TEXT
+    }
+  },
+
+  dropdown: {
+    color: colors.TEXT,
+    iconColor: colors.TEXT,
+    bg: colors.SIDEBAR_BG,
+    hoverBg: colors.GRAY_3,
+    shadow: 'rgba(0, 0, 0, 0.36) 0px 2px 8px',
+    separator: colors.BORDER,
+    selectedColor: colors.TEXT_LINK,
+    mutedText: colors.TEXT_MUTED
+  },
+
+  workspace: {
+    accent: colors.BRAND,
+    border: colors.BORDER,
+    button: {
+      bg: colors.GRAY_2
+    }
+  },
+
+  request: {
+    methods: {
+      get: colors.GREEN,
+      post: '#dcdcaa',
+      put: colors.ORANGE,
+      delete: colors.RED,
+      patch: colors.ORANGE,
+      options: colors.GRAY_7,
+      head: colors.BLUE
+    },
+    grpc: colors.CYAN,
+    ws: colors.YELLOW,
+    gql: colors.PURPLE
+  },
+
+  requestTabPanel: {
+    url: {
+      bg: colors.EDITOR_BG,
+      icon: colors.TEXT,
+      iconDanger: colors.RED,
+      border: `solid 1px ${colors.BORDER}`
+    },
+    dragbar: {
+      border: colors.BORDER,
+      activeBorder: colors.BRAND
+    },
+    responseStatus: colors.TEXT,
+    responseOk: colors.GREEN,
+    responseError: colors.RED,
+    responsePending: colors.BRAND,
+    responseOverlayBg: 'rgba(30, 30, 30, 0.6)',
+    card: {
+      bg: colors.SIDEBAR_BG,
+      border: 'transparent',
+      hr: colors.BORDER
+    },
+    graphqlDocsExplorer: {
+      bg: colors.EDITOR_BG,
+      color: colors.TEXT
+    }
+  },
+
+  notifications: {
+    bg: colors.GRAY_3,
+    list: {
+      bg: colors.GRAY_2,
+      borderRight: colors.BORDER,
+      borderBottom: colors.BORDER,
+      hoverBg: colors.GRAY_3,
+      active: {
+        border: colors.BRAND,
+        bg: colors.GRAY_3,
+        hoverBg: colors.GRAY_3
+      }
+    }
+  },
+
+  modal: {
+    title: {
+      color: colors.TEXT,
+      bg: colors.SIDEBAR_BG
+    },
+    body: {
+      color: colors.TEXT,
+      bg: colors.GRAY_2
+    },
+    input: {
+      bg: colors.GRAY_3,
+      border: colors.BORDER,
+      focusBorder: colors.BRAND
+    },
+    backdrop: {
+      opacity: 0.25
+    }
+  },
+
+  button: {
+    secondary: {
+      color: colors.WHITE,
+      bg: colors.GRAY_4,
+      border: colors.GRAY_4,
+      hoverBorder: colors.GRAY_5
+    },
+    close: {
+      color: colors.TEXT,
+      bg: 'transparent',
+      border: 'transparent',
+      hoverBorder: ''
+    },
+    disabled: {
+      color: colors.GRAY_6,
+      bg: colors.GRAY_4,
+      border: colors.GRAY_4
+    },
+    danger: {
+      color: colors.WHITE,
+      bg: colors.RED,
+      border: colors.RED
+    }
+  },
+
+  button2: {
+    color: {
+      primary: {
+        bg: colors.BRAND,
+        text: colors.WHITE,
+        border: colors.BRAND
+      },
+      secondary: {
+        bg: colors.GRAY_4,
+        text: colors.WHITE,
+        border: colors.GRAY_5
+      },
+      success: {
+        bg: '#388a34',
+        text: colors.WHITE,
+        border: '#388a34'
+      },
+      warning: {
+        bg: '#bf8803',
+        text: colors.BLACK,
+        border: '#bf8803'
+      },
+      danger: {
+        bg: colors.RED,
+        text: colors.WHITE,
+        border: colors.RED
+      }
+    }
+  },
+
+  tabs: {
+    marginRight: '1.2rem',
+    active: {
+      fontWeight: 400,
+      color: colors.TEXT,
+      border: colors.BRAND
+    },
+    secondary: {
+      active: {
+        bg: colors.GRAY_3,
+        color: colors.TEXT
+      },
+      inactive: {
+        bg: colors.GRAY_4,
+        color: colors.TEXT_MUTED
+      }
+    }
+  },
+
+  requestTabs: {
+    color: colors.TEXT,
+    bg: colors.SIDEBAR_BG,
+    bottomBorder: colors.BORDER,
+    icon: {
+      color: colors.TEXT_MUTED,
+      hoverColor: colors.TEXT,
+      hoverBg: colors.GRAY_3
+    },
+    example: {
+      iconColor: colors.GRAY_7
+    },
+    shortTab: {
+      color: colors.TEXT,
+      bg: 'transparent',
+      hoverColor: colors.TEXT,
+      hoverBg: colors.GRAY_3
+    }
+  },
+
+  codemirror: {
+    bg: colors.EDITOR_BG,
+    border: colors.EDITOR_BG,
+    placeholder: {
+      color: colors.TEXT_MUTED,
+      opacity: 0.5
+    },
+    gutter: {
+      bg: colors.EDITOR_BG
+    },
+    variable: {
+      valid: colors.GREEN,
+      invalid: colors.RED,
+      prompt: colors.BRAND,
+      info: {
+        color: colors.WHITE,
+        bg: colors.GRAY_3,
+        boxShadow: 'rgba(0, 0, 0, 0.36) 0px 2px 8px',
+        editorBg: colors.GRAY_2,
+        iconColor: colors.TEXT_MUTED,
+        editorBorder: colors.BORDER,
+        editorFocusBorder: colors.TEXT,
+        editableDisplayHoverBg: 'rgba(255, 255, 255, 0.03)',
+        border: colors.BORDER
+      }
+    },
+    tokens: {
+      definition: colors.CODEMIRROR_TOKENS.DEFINITION,
+      property: colors.CODEMIRROR_TOKENS.PROPERTY,
+      string: colors.CODEMIRROR_TOKENS.STRING,
+      number: colors.CODEMIRROR_TOKENS.NUMBER,
+      atom: colors.CODEMIRROR_TOKENS.ATOM,
+      variable: colors.CODEMIRROR_TOKENS.VARIABLE,
+      keyword: colors.CODEMIRROR_TOKENS.KEYWORD,
+      comment: colors.CODEMIRROR_TOKENS.COMMENT,
+      operator: colors.CODEMIRROR_TOKENS.OPERATOR
+    },
+    searchLineHighlightCurrent: 'rgba(255, 255, 0, 0.1)',
+    searchMatch: '#515c6a',
+    searchMatchActive: '#613214'
+  },
+
+  table: {
+    border: colors.BORDER_LIGHT,
+    thead: {
+      color: colors.TEXT
+    },
+    striped: colors.GRAY_2,
+    input: {
+      color: colors.TEXT
+    }
+  },
+
+  plainGrid: {
+    hoverBg: colors.GRAY_3
+  },
+
+  scrollbar: {
+    color: colors.GRAY_4
+  },
+
+  dragAndDrop: {
+    border: colors.BRAND,
+    borderStyle: '2px solid',
+    hoverBg: 'rgba(0, 122, 204, 0.1)',
+    transition: 'all 0.1s ease'
+  },
+
+  infoTip: {
+    bg: colors.SIDEBAR_BG,
+    border: colors.BORDER,
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.5)'
+  },
+
+  statusBar: {
+    border: colors.BORDER_LIGHT,
+    color: colors.TEXT_MUTED
+  },
+
+  console: {
+    bg: colors.EDITOR_BG,
+    headerBg: colors.SIDEBAR_BG,
+    contentBg: colors.EDITOR_BG,
+    border: colors.BORDER,
+    titleColor: colors.TEXT,
+    countColor: colors.TEXT_MUTED,
+    buttonColor: colors.TEXT,
+    buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
+    buttonHoverColor: colors.WHITE,
+    messageColor: colors.TEXT,
+    timestampColor: colors.TEXT_MUTED,
+    emptyColor: colors.TEXT_MUTED,
+    logHoverBg: 'rgba(255, 255, 255, 0.05)',
+    resizeHandleHover: colors.BRAND,
+    resizeHandleActive: colors.BRAND,
+    dropdownBg: colors.SIDEBAR_BG,
+    dropdownHeaderBg: colors.GRAY_3,
+    optionHoverBg: 'rgba(255, 255, 255, 0.05)',
+    optionLabelColor: colors.TEXT,
+    optionCountColor: colors.TEXT_MUTED,
+    checkboxColor: colors.BRAND,
+    scrollbarTrack: colors.SIDEBAR_BG,
+    scrollbarThumb: colors.GRAY_5,
+    scrollbarThumbHover: colors.GRAY_6
+  },
+
+  grpc: {
+    tabNav: {
+      container: {
+        bg: colors.GRAY_2
+      },
+      button: {
+        active: {
+          bg: colors.GRAY_3,
+          color: colors.WHITE
+        },
+        inactive: {
+          bg: 'transparent',
+          color: colors.TEXT_MUTED
+        }
+      }
+    },
+    importPaths: {
+      header: {
+        text: colors.TEXT_MUTED,
+        button: {
+          color: colors.TEXT_MUTED,
+          hoverColor: colors.TEXT
+        }
+      },
+      error: {
+        bg: 'transparent',
+        text: colors.RED,
+        link: {
+          color: colors.RED,
+          hoverColor: '#ff6b6b'
+        }
+      },
+      item: {
+        bg: 'transparent',
+        hoverBg: 'rgba(255, 255, 255, 0.05)',
+        text: colors.TEXT,
+        icon: colors.TEXT_MUTED,
+        checkbox: {
+          color: colors.TEXT
+        },
+        invalid: {
+          opacity: 0.6,
+          text: colors.RED
+        }
+      },
+      empty: {
+        text: colors.TEXT_MUTED
+      },
+      button: {
+        bg: colors.GRAY_4,
+        color: colors.TEXT,
+        border: colors.GRAY_4,
+        hoverBorder: colors.GRAY_5
+      }
+    },
+    protoFiles: {
+      header: {
+        text: colors.TEXT_MUTED,
+        button: {
+          color: colors.TEXT_MUTED,
+          hoverColor: colors.TEXT
+        }
+      },
+      error: {
+        bg: 'transparent',
+        text: colors.RED,
+        link: {
+          color: colors.RED,
+          hoverColor: '#ff6b6b'
+        }
+      },
+      item: {
+        bg: 'transparent',
+        hoverBg: 'rgba(255, 255, 255, 0.05)',
+        selected: {
+          bg: 'rgba(0, 122, 204, 0.2)',
+          border: colors.BRAND
+        },
+        text: colors.TEXT,
+        secondaryText: colors.TEXT_MUTED,
+        icon: colors.TEXT_MUTED,
+        invalid: {
+          opacity: 0.6,
+          text: colors.RED
+        }
+      },
+      empty: {
+        text: colors.TEXT_MUTED
+      },
+      button: {
+        bg: colors.GRAY_4,
+        color: colors.TEXT,
+        border: colors.GRAY_4,
+        hoverBorder: colors.GRAY_5
+      }
+    }
+  },
+
+  deprecationWarning: {
+    bg: 'rgba(241, 76, 76, 0.1)',
+    border: 'rgba(241, 76, 76, 0.2)',
+    icon: colors.RED,
+    text: colors.TEXT
+  },
+
+  preferences: {
+    sidebar: {
+      border: colors.BORDER
+    }
+  },
+
+  examples: {
+    buttonBg: 'rgba(0, 122, 204, 0.15)',
+    buttonColor: colors.TEXT_LINK,
+    buttonText: colors.WHITE,
+    buttonIconColor: colors.WHITE,
+    border: colors.BORDER,
+    urlBar: {
+      border: colors.BORDER,
+      bg: colors.GRAY_2
+    },
+    table: {
+      thead: {
+        bg: colors.GRAY_2,
+        color: colors.TEXT_MUTED
+      }
+    },
+    checkbox: {
+      color: colors.WHITE
+    }
+  },
+
+  app: {
+    collection: {
+      toolbar: {
+        environmentSelector: {
+          bg: colors.EDITOR_BG,
+          border: colors.BORDER,
+          icon: colors.BRAND,
+          text: colors.TEXT,
+          caret: colors.TEXT_MUTED,
+          separator: colors.BORDER,
+          hoverBg: colors.EDITOR_BG,
+          hoverBorder: colors.GRAY_5,
+          noEnvironment: {
+            text: colors.TEXT_MUTED,
+            bg: colors.EDITOR_BG,
+            border: colors.BORDER,
+            hoverBg: colors.EDITOR_BG,
+            hoverBorder: colors.GRAY_5
+          }
+        },
+        sandboxMode: {
+          safeMode: {
+            bg: 'rgba(78, 201, 176, 0.12)',
+            color: colors.GREEN
+          },
+          developerMode: {
+            bg: 'rgba(220, 220, 170, 0.12)',
+            color: colors.YELLOW
+          }
+        }
+      }
+    }
+  }
+};
+
+export default vscodeDarkTheme;
diff --git a/packages/bruno-app/src/themes/index.js b/packages/bruno-app/src/themes/index.js
index 753b40a3c..1f7ae1d9c 100644
--- a/packages/bruno-app/src/themes/index.js
+++ b/packages/bruno-app/src/themes/index.js
@@ -1,7 +1,103 @@
-import light from './light';
-import dark from './dark';
+import light from './light/light';
+import lightMonochrome from './light/light-monochrome';
+import lightPastel from './light/light-pastel';
+import catppuccinLatte from './light/catppuccin-latte';
+import vscodeLight from './light/vscode';
+import dark from './dark/dark';
+import darkMonochrome from './dark/dark-monochrome';
+import darkPastel from './dark/dark-pastel';
+import catppuccinFrappe from './dark/catppuccin-frappe';
+import catppuccinMacchiato from './dark/catppuccin-macchiato';
+import catppuccinMocha from './dark/catppuccin-mocha';
+import nord from './dark/nord';
+import vscodeDark from './dark/vscode';
 
-export default {
+const themes = {
   light,
-  dark
+  dark,
+  'light-monochrome': lightMonochrome,
+  'light-pastel': lightPastel,
+  'dark-monochrome': darkMonochrome,
+  'dark-pastel': darkPastel,
+  'catppuccin-latte': catppuccinLatte,
+  'catppuccin-frappe': catppuccinFrappe,
+  'catppuccin-macchiato': catppuccinMacchiato,
+  'catppuccin-mocha': catppuccinMocha,
+  nord,
+  'vscode-light': vscodeLight,
+  'vscode-dark': vscodeDark
 };
+
+// Theme metadata for UI display
+export const themeRegistry = {
+  'light': {
+    id: 'light',
+    name: 'Light',
+    mode: 'light'
+  },
+  'light-monochrome': {
+    id: 'light-monochrome',
+    name: 'Light Monochrome',
+    mode: 'light'
+  },
+  'light-pastel': {
+    id: 'light-pastel',
+    name: 'Aurora',
+    mode: 'light'
+  },
+  'catppuccin-latte': {
+    id: 'catppuccin-latte',
+    name: 'Catppuccin Latte',
+    mode: 'light'
+  },
+  'dark': {
+    id: 'dark',
+    name: 'Bruno Dark',
+    mode: 'dark'
+  },
+  'dark-monochrome': {
+    id: 'dark-monochrome',
+    name: 'Bruno Dark Monochrome',
+    mode: 'dark'
+  },
+  'dark-pastel': {
+    id: 'dark-pastel',
+    name: 'Bruno Dark Pastel',
+    mode: 'dark'
+  },
+  'catppuccin-frappe': {
+    id: 'catppuccin-frappe',
+    name: 'Catppuccin Frappé',
+    mode: 'dark'
+  },
+  'catppuccin-macchiato': {
+    id: 'catppuccin-macchiato',
+    name: 'Catppuccin Macchiato',
+    mode: 'dark'
+  },
+  'catppuccin-mocha': {
+    id: 'catppuccin-mocha',
+    name: 'Catppuccin Mocha',
+    mode: 'dark'
+  },
+  'nord': {
+    id: 'nord',
+    name: 'Nord',
+    mode: 'dark'
+  },
+  'vscode-light': {
+    id: 'vscode-light',
+    name: 'VS Code Light',
+    mode: 'light'
+  },
+  'vscode-dark': {
+    id: 'vscode-dark',
+    name: 'VS Code Dark',
+    mode: 'dark'
+  }
+};
+
+export const getLightThemes = () => Object.values(themeRegistry).filter((t) => t.mode === 'light');
+export const getDarkThemes = () => Object.values(themeRegistry).filter((t) => t.mode === 'dark');
+
+export default themes;
diff --git a/packages/bruno-app/src/themes/light/catppuccin-latte.js b/packages/bruno-app/src/themes/light/catppuccin-latte.js
new file mode 100644
index 000000000..20902f58c
--- /dev/null
+++ b/packages/bruno-app/src/themes/light/catppuccin-latte.js
@@ -0,0 +1,630 @@
+// Catppuccin Latte - Light Theme
+// Based on https://catppuccin.com/palette/
+
+const colors = {
+  // Catppuccin Latte Palette
+  ROSEWATER: '#dc8a78',
+  FLAMINGO: '#dd7878',
+  PINK: '#ea76cb',
+  MAUVE: '#8839ef',
+  RED: '#d20f39',
+  MAROON: '#e64553',
+  PEACH: '#fe640b',
+  YELLOW: '#df8e1d',
+  GREEN: '#40a02b',
+  TEAL: '#179299',
+  SKY: '#04a5e5',
+  SAPPHIRE: '#209fb5',
+  BLUE: '#1e66f5',
+  LAVENDER: '#7287fd',
+
+  TEXT: '#4c4f69',
+  SUBTEXT1: '#5c5f77',
+  SUBTEXT0: '#6c6f85',
+  OVERLAY2: '#7c7f93',
+  OVERLAY1: '#8c8fa1',
+  OVERLAY0: '#9ca0b0',
+  SURFACE2: '#acb0be',
+  SURFACE1: '#bcc0cc',
+  SURFACE0: '#ccd0da',
+  BASE: '#eff1f5',
+  MANTLE: '#e6e9ef',
+  CRUST: '#dce0e8',
+
+  WHITE: '#fff',
+  BLACK: '#000',
+
+  CODEMIRROR_TOKENS: {
+    DEFINITION: '#40a02b',
+    PROPERTY: '#1e66f5',
+    STRING: '#df8e1d',
+    NUMBER: '#fe640b',
+    ATOM: '#ea76cb',
+    VARIABLE: '#209fb5',
+    KEYWORD: '#d20f39',
+    COMMENT: '#6c6f85',
+    OPERATOR: '#179299'
+  }
+};
+
+const catppuccinLatteTheme = {
+  mode: 'light',
+  brand: colors.MAUVE,
+  text: colors.TEXT,
+  textLink: colors.BLUE,
+  bg: colors.BASE,
+
+  accents: {
+    primary: colors.MAUVE
+  },
+
+  background: {
+    base: colors.BASE,
+    mantle: colors.MANTLE,
+    crust: colors.CRUST,
+    surface0: colors.SURFACE0,
+    surface1: colors.SURFACE1,
+    surface2: colors.SURFACE2
+  },
+
+  overlay: {
+    overlay2: colors.OVERLAY2,
+    overlay1: colors.OVERLAY1,
+    overlay0: colors.OVERLAY0
+  },
+
+  font: {
+    size: {
+      xs: '0.6875rem', // 11px
+      sm: '0.75rem', // 12px
+      base: '0.8125rem', // 13px
+      md: '0.875rem', // 14px
+      lg: '1rem', // 16px
+      xl: '1.125rem' // 18px
+    }
+  },
+
+  shadow: {
+    sm: '0 1px 3px rgba(76, 79, 105, 0.12), 0 0 0 1px rgba(76, 79, 105, 0.05)',
+    md: '0 2px 8px rgba(76, 79, 105, 0.14), 0 0 0 1px rgba(76, 79, 105, 0.06)',
+    lg: '0 2px 12px rgba(76, 79, 105, 0.15), 0 0 0 1px rgba(76, 79, 105, 0.05)'
+  },
+
+  border: {
+    radius: {
+      sm: '4px',
+      base: '6px',
+      md: '8px',
+      lg: '10px',
+      xl: '12px'
+    },
+    border2: colors.SURFACE2,
+    border1: colors.SURFACE1,
+    border0: colors.SURFACE0
+  },
+
+  colors: {
+    text: {
+      white: colors.WHITE,
+      green: colors.GREEN,
+      danger: colors.RED,
+      warning: colors.PEACH,
+      muted: colors.SUBTEXT0,
+      purple: colors.MAUVE,
+      yellow: colors.YELLOW,
+      subtext2: colors.TEXT,
+      subtext1: colors.SUBTEXT1,
+      subtext0: colors.SUBTEXT0
+    },
+    bg: {
+      danger: colors.MAROON
+    },
+    accent: colors.MAUVE
+  },
+
+  input: {
+    bg: colors.SURFACE0,
+    border: colors.SURFACE1,
+    focusBorder: colors.LAVENDER,
+    placeholder: {
+      color: colors.OVERLAY0,
+      opacity: 0.8
+    }
+  },
+
+  sidebar: {
+    color: colors.TEXT,
+    muted: colors.SUBTEXT0,
+    bg: colors.MANTLE,
+    dragbar: {
+      border: colors.SURFACE0,
+      activeBorder: colors.SURFACE2
+    },
+
+    search: {
+      border: `1px solid ${colors.SURFACE1}`,
+      bg: colors.BASE
+    },
+
+    collection: {
+      item: {
+        bg: colors.SURFACE0,
+        hoverBg: colors.SURFACE1,
+        focusBorder: colors.LAVENDER,
+        indentBorder: `solid 1px ${colors.SURFACE1}`,
+        active: {
+          indentBorder: `solid 1px ${colors.MAUVE}`
+        },
+        example: {
+          iconColor: colors.OVERLAY1
+        }
+      }
+    },
+
+    dropdownIcon: {
+      color: colors.SUBTEXT1
+    }
+  },
+
+  dropdown: {
+    color: colors.TEXT,
+    iconColor: colors.SUBTEXT1,
+    bg: colors.BASE,
+    hoverBg: colors.SURFACE0,
+    shadow: 'rgba(76, 79, 105, 0.25) 0px 6px 12px -2px, rgba(76, 79, 105, 0.3) 0px 3px 7px -3px',
+    separator: colors.SURFACE1,
+    selectedColor: colors.MAUVE,
+    mutedText: colors.SUBTEXT0
+  },
+
+  workspace: {
+    accent: colors.MAUVE,
+    border: colors.SURFACE1,
+    button: {
+      bg: colors.SURFACE0
+    }
+  },
+
+  request: {
+    methods: {
+      get: colors.GREEN,
+      post: colors.BLUE,
+      put: colors.YELLOW,
+      delete: colors.RED,
+      patch: colors.PEACH,
+      options: colors.TEAL,
+      head: colors.SAPPHIRE
+    },
+
+    grpc: colors.SKY,
+    ws: colors.MAUVE,
+    gql: colors.PINK
+  },
+
+  requestTabPanel: {
+    url: {
+      bg: colors.BASE,
+      icon: colors.SUBTEXT1,
+      iconDanger: colors.RED,
+      border: `solid 1px ${colors.SURFACE1}`
+    },
+    dragbar: {
+      border: colors.SURFACE1,
+      activeBorder: colors.OVERLAY0
+    },
+    responseStatus: colors.SUBTEXT1,
+    responseOk: colors.GREEN,
+    responseError: colors.RED,
+    responsePending: colors.BLUE,
+    responseOverlayBg: 'rgba(239, 241, 245, 0.6)',
+    card: {
+      bg: colors.BASE,
+      border: colors.MANTLE,
+      hr: colors.SURFACE0
+    },
+    graphqlDocsExplorer: {
+      bg: colors.BASE,
+      color: colors.TEXT
+    }
+  },
+
+  notifications: {
+    bg: colors.BASE,
+    list: {
+      bg: colors.MANTLE,
+      borderRight: colors.SURFACE1,
+      borderBottom: colors.SURFACE1,
+      hoverBg: colors.SURFACE0,
+      active: {
+        border: colors.BLUE,
+        bg: colors.SURFACE1,
+        hoverBg: colors.SURFACE1
+      }
+    }
+  },
+
+  modal: {
+    title: {
+      color: colors.TEXT,
+      bg: colors.MANTLE
+    },
+    body: {
+      color: colors.TEXT,
+      bg: colors.BASE
+    },
+    input: {
+      bg: colors.SURFACE0,
+      border: colors.SURFACE1,
+      focusBorder: colors.LAVENDER
+    },
+    backdrop: {
+      opacity: 0.4
+    }
+  },
+
+  button: {
+    secondary: {
+      color: colors.TEXT,
+      bg: colors.SURFACE0,
+      border: colors.SURFACE1,
+      hoverBorder: colors.OVERLAY0
+    },
+    close: {
+      color: colors.TEXT,
+      bg: 'transparent',
+      border: 'transparent',
+      hoverBorder: ''
+    },
+    disabled: {
+      color: colors.OVERLAY0,
+      bg: colors.SURFACE1,
+      border: colors.SURFACE1
+    },
+    danger: {
+      color: colors.WHITE,
+      bg: colors.RED,
+      border: colors.RED
+    }
+  },
+  button2: {
+    color: {
+      primary: {
+        bg: colors.MAUVE,
+        text: colors.BASE,
+        border: colors.MAUVE
+      },
+      secondary: {
+        bg: colors.SURFACE1,
+        text: colors.TEXT,
+        border: colors.SURFACE2
+      },
+      success: {
+        bg: colors.GREEN,
+        text: colors.BASE,
+        border: colors.GREEN
+      },
+      warning: {
+        bg: colors.PEACH,
+        text: colors.BASE,
+        border: colors.PEACH
+      },
+      danger: {
+        bg: colors.RED,
+        text: colors.BASE,
+        border: colors.RED
+      }
+    }
+  },
+  tabs: {
+    marginRight: '1.2rem',
+    active: {
+      fontWeight: 400,
+      color: colors.TEXT,
+      border: colors.MAUVE
+    },
+    secondary: {
+      active: {
+        bg: colors.BASE,
+        color: colors.TEXT
+      },
+      inactive: {
+        bg: colors.SURFACE0,
+        color: colors.SUBTEXT0
+      }
+    }
+  },
+
+  requestTabs: {
+    color: colors.TEXT,
+    bg: colors.SURFACE0,
+    bottomBorder: colors.SURFACE1,
+    icon: {
+      color: colors.OVERLAY0,
+      hoverColor: colors.SUBTEXT1,
+      hoverBg: colors.SURFACE1
+    },
+    example: {
+      iconColor: colors.OVERLAY1
+    },
+    shortTab: {
+      color: colors.SUBTEXT1,
+      bg: colors.BASE,
+      hoverColor: colors.TEXT,
+      hoverBg: colors.SURFACE0
+    }
+  },
+
+  codemirror: {
+    bg: colors.BASE,
+    border: colors.BASE,
+    placeholder: {
+      color: colors.OVERLAY0,
+      opacity: 0.75
+    },
+    gutter: {
+      bg: colors.BASE
+    },
+    variable: {
+      valid: colors.GREEN,
+      invalid: colors.RED,
+      prompt: colors.BLUE,
+      info: {
+        color: colors.TEXT,
+        bg: colors.BASE,
+        boxShadow: '0 1px 3px rgba(76, 79, 105, 0.45)',
+        editorBg: colors.MANTLE,
+        iconColor: colors.OVERLAY0,
+        editorBorder: colors.SURFACE1,
+        editorFocusBorder: colors.LAVENDER,
+        editableDisplayHoverBg: 'rgba(76, 79, 105, 0.02)',
+        border: colors.SURFACE1
+      }
+    },
+    tokens: {
+      definition: colors.CODEMIRROR_TOKENS.DEFINITION,
+      property: colors.CODEMIRROR_TOKENS.PROPERTY,
+      string: colors.CODEMIRROR_TOKENS.STRING,
+      number: colors.CODEMIRROR_TOKENS.NUMBER,
+      atom: colors.CODEMIRROR_TOKENS.ATOM,
+      variable: colors.CODEMIRROR_TOKENS.VARIABLE,
+      keyword: colors.CODEMIRROR_TOKENS.KEYWORD,
+      comment: colors.CODEMIRROR_TOKENS.COMMENT,
+      operator: colors.CODEMIRROR_TOKENS.OPERATOR
+    },
+    searchLineHighlightCurrent: 'rgba(124, 127, 147, 0.10)',
+    searchMatch: colors.YELLOW,
+    searchMatchActive: colors.PEACH
+  },
+
+  table: {
+    border: colors.SURFACE1,
+    thead: {
+      color: colors.SUBTEXT1
+    },
+    striped: colors.MANTLE,
+    input: {
+      color: colors.TEXT
+    }
+  },
+
+  plainGrid: {
+    hoverBg: colors.SURFACE0
+  },
+
+  scrollbar: {
+    color: colors.OVERLAY0
+  },
+
+  dragAndDrop: {
+    border: colors.LAVENDER,
+    borderStyle: '2px solid',
+    hoverBg: 'rgba(114, 135, 253, 0.05)',
+    transition: 'all 0.1s ease'
+  },
+
+  infoTip: {
+    bg: colors.BASE,
+    border: colors.SURFACE1,
+    boxShadow: '0 4px 12px rgba(76, 79, 105, 0.15)'
+  },
+
+  statusBar: {
+    border: colors.SURFACE1,
+    color: colors.SUBTEXT0
+  },
+
+  console: {
+    bg: colors.BASE,
+    headerBg: colors.MANTLE,
+    contentBg: colors.BASE,
+    border: colors.SURFACE1,
+    titleColor: colors.TEXT,
+    countColor: colors.SUBTEXT0,
+    buttonColor: colors.SUBTEXT1,
+    buttonHoverBg: colors.SURFACE0,
+    buttonHoverColor: colors.TEXT,
+    messageColor: colors.TEXT,
+    timestampColor: colors.SUBTEXT0,
+    emptyColor: colors.SUBTEXT0,
+    logHoverBg: 'rgba(76, 79, 105, 0.03)',
+    resizeHandleHover: colors.BLUE,
+    resizeHandleActive: colors.BLUE,
+    dropdownBg: colors.BASE,
+    dropdownHeaderBg: colors.MANTLE,
+    optionHoverBg: colors.SURFACE0,
+    optionLabelColor: colors.TEXT,
+    optionCountColor: colors.SUBTEXT0,
+    checkboxColor: colors.MAUVE,
+    scrollbarTrack: colors.MANTLE,
+    scrollbarThumb: colors.SURFACE2,
+    scrollbarThumbHover: colors.OVERLAY0
+  },
+
+  grpc: {
+    tabNav: {
+      container: {
+        bg: colors.MANTLE
+      },
+      button: {
+        active: {
+          bg: colors.BASE,
+          color: colors.TEXT
+        },
+        inactive: {
+          bg: 'transparent',
+          color: colors.SUBTEXT0
+        }
+      }
+    },
+    importPaths: {
+      header: {
+        text: colors.SUBTEXT0,
+        button: {
+          color: colors.SUBTEXT0,
+          hoverColor: colors.TEXT
+        }
+      },
+      error: {
+        bg: 'transparent',
+        text: colors.RED,
+        link: {
+          color: colors.RED,
+          hoverColor: colors.MAROON
+        }
+      },
+      item: {
+        bg: 'transparent',
+        hoverBg: 'rgba(76, 79, 105, 0.05)',
+        text: colors.TEXT,
+        icon: colors.SUBTEXT0,
+        checkbox: {
+          color: colors.TEXT
+        },
+        invalid: {
+          opacity: 0.6,
+          text: colors.RED
+        }
+      },
+      empty: {
+        text: colors.SUBTEXT0
+      },
+      button: {
+        bg: colors.SURFACE0,
+        color: colors.TEXT,
+        border: colors.SURFACE1,
+        hoverBorder: colors.OVERLAY0
+      }
+    },
+    protoFiles: {
+      header: {
+        text: colors.SUBTEXT0,
+        button: {
+          color: colors.SUBTEXT0,
+          hoverColor: colors.TEXT
+        }
+      },
+      error: {
+        bg: 'transparent',
+        text: colors.RED,
+        link: {
+          color: colors.RED,
+          hoverColor: colors.MAROON
+        }
+      },
+      item: {
+        bg: 'transparent',
+        hoverBg: 'rgba(76, 79, 105, 0.05)',
+        selected: {
+          bg: 'rgba(136, 57, 239, 0.2)',
+          border: colors.MAUVE
+        },
+        text: colors.TEXT,
+        secondaryText: colors.SUBTEXT0,
+        icon: colors.SUBTEXT0,
+        invalid: {
+          opacity: 0.6,
+          text: colors.RED
+        }
+      },
+      empty: {
+        text: colors.SUBTEXT0
+      },
+      button: {
+        bg: colors.SURFACE0,
+        color: colors.TEXT,
+        border: colors.SURFACE1,
+        hoverBorder: colors.OVERLAY0
+      }
+    }
+  },
+  deprecationWarning: {
+    bg: 'rgba(210, 15, 57, 0.1)',
+    border: 'rgba(210, 15, 57, 0.1)',
+    icon: colors.RED,
+    text: colors.TEXT
+  },
+
+  preferences: {
+    sidebar: {
+      border: colors.SURFACE1
+    }
+  },
+
+  examples: {
+    buttonBg: 'rgba(136, 57, 239, 0.1)',
+    buttonColor: colors.MAUVE,
+    buttonText: colors.BASE,
+    buttonIconColor: colors.TEXT,
+    border: colors.SURFACE1,
+    urlBar: {
+      border: colors.SURFACE1,
+      bg: colors.MANTLE
+    },
+    table: {
+      thead: {
+        bg: colors.MANTLE,
+        color: colors.SUBTEXT1
+      }
+    },
+    checkbox: {
+      color: colors.BASE
+    }
+  },
+
+  app: {
+    collection: {
+      toolbar: {
+        environmentSelector: {
+          bg: colors.BASE,
+          border: colors.SURFACE1,
+          icon: colors.MAUVE,
+          text: colors.TEXT,
+          caret: colors.OVERLAY0,
+          separator: colors.SURFACE1,
+          hoverBg: colors.BASE,
+          hoverBorder: colors.SURFACE2,
+
+          noEnvironment: {
+            text: colors.SUBTEXT0,
+            bg: colors.BASE,
+            border: colors.SURFACE1,
+            hoverBg: colors.BASE,
+            hoverBorder: colors.SURFACE2
+          }
+        },
+        sandboxMode: {
+          safeMode: {
+            bg: 'rgba(64, 160, 43, 0.12)',
+            color: colors.GREEN
+          },
+          developerMode: {
+            bg: 'rgba(223, 142, 29, 0.15)',
+            color: colors.YELLOW
+          }
+        }
+      }
+    }
+  }
+};
+
+export default catppuccinLatteTheme;
diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light/light-monochrome.js
similarity index 65%
rename from packages/bruno-app/src/themes/light.js
rename to packages/bruno-app/src/themes/light/light-monochrome.js
index fc03d16c3..167d3ef55 100644
--- a/packages/bruno-app/src/themes/light.js
+++ b/packages/bruno-app/src/themes/light/light-monochrome.js
@@ -1,15 +1,15 @@
 const colors = {
-  BRAND: '#c7822e',
+  BRAND: '#525252',
   TEXT: 'rgb(52, 52, 52)',
-  TEXT_MUTED: '#838383',
-  TEXT_LINK: '#1663bb',
+  TEXT_MUTED: '#737373',
+  TEXT_LINK: '#404040',
   BACKGROUND: '#fff',
 
   WHITE: '#fff',
   BLACK: '#000',
   SLATE_BLACK: '#343434',
-  GREEN: '#047857',
-  YELLOW: '#c7822e',
+  GREEN: '#525252',
+  YELLOW: '#525252',
 
   GRAY_1: '#f8f8f8',
   GRAY_2: '#f3f3f3',
@@ -23,32 +23,52 @@ const colors = {
   GRAY_10: '#252526',
 
   CODEMIRROR_TOKENS: {
-    DEFINITION: '#566f4e', // Deep moss
-    PROPERTY: '#4b7bbb', // Muted azure
-    STRING: '#a06e3b', // Warm bronze
-    NUMBER: '#3d8b7c', // Muted jade
-    ATOM: '#8169ad', // Soft plum
-    VARIABLE: '#3f7b6f', // Deep teal
-    KEYWORD: '#b95d6a', // Muted ruby
-    COMMENT: '#8997aa', // Cool gray
-    OPERATOR: '#6b7a8f' // Slate blue
+    DEFINITION: '#525252',
+    PROPERTY: '#666666',
+    STRING: '#737373',
+    NUMBER: '#525252',
+    ATOM: '#666666',
+    VARIABLE: '#525252',
+    KEYWORD: '#404040',
+    COMMENT: '#a3a3a3',
+    OPERATOR: '#737373'
   }
 };
 
-const lightTheme = {
+const lightMonochromeTheme = {
+  mode: 'light',
   brand: colors.BRAND,
   text: colors.TEXT,
   textLink: colors.TEXT_LINK,
   bg: colors.BACKGROUND,
 
+  accents: {
+    primary: colors.BRAND
+  },
+
+  background: {
+    base: colors.BACKGROUND,
+    mantle: colors.GRAY_1,
+    crust: colors.GRAY_2,
+    surface0: colors.GRAY_3,
+    surface1: colors.GRAY_4,
+    surface2: colors.GRAY_5
+  },
+
+  overlay: {
+    overlay2: colors.GRAY_6,
+    overlay1: '#c0c0c0',
+    overlay0: '#d0d0d0'
+  },
+
   font: {
     size: {
-      xs: '0.6875rem', // 11px
-      sm: '0.75rem', // 12px
-      base: '0.8125rem', // 13px
-      md: '0.875rem', // 14px
-      lg: '1rem', // 16px
-      xl: '1.125rem' // 18px
+      xs: '0.6875rem',
+      sm: '0.75rem',
+      base: '0.8125rem',
+      md: '0.875rem',
+      lg: '1rem',
+      xl: '1.125rem'
     }
   },
 
@@ -65,22 +85,29 @@ const lightTheme = {
       md: '8px',
       lg: '10px',
       xl: '12px'
-    }
+    },
+    border2: colors.GRAY_5,
+    border1: colors.GRAY_4,
+    border0: colors.GRAY_3
   },
 
   colors: {
     text: {
-      green: colors.GREEN,
-      danger: '#B91C1C',
-      warning: '#f57c00',
+      white: '#fff',
+      green: '#525252',
+      danger: '#525252',
+      warning: '#525252',
       muted: '#838383',
-      purple: '#8e44ad',
-      yellow: colors.YELLOW
+      purple: '#525252',
+      yellow: colors.YELLOW,
+      subtext2: colors.GRAY_7,
+      subtext1: '#838383',
+      subtext0: '#9B9B9B'
     },
     bg: {
-      danger: '#dc3545'
+      danger: '#525252'
     },
-    accent: '#b96f1d'
+    accent: '#525252'
   },
 
   input: {
@@ -93,22 +120,6 @@ const lightTheme = {
     }
   },
 
-  menubar: {
-    bg: 'rgb(44, 44, 44)'
-  },
-
-  variables: {
-    bg: '#fff',
-
-    name: {
-      color: '#546de5'
-    },
-
-    runtime: {
-      color: 'rgb(0, 0, 0)'
-    }
-  },
-
   sidebar: {
     color: 'rgb(52, 52, 52)',
     muted: '#4b5563',
@@ -118,10 +129,6 @@ const lightTheme = {
       activeBorder: colors.GRAY_5
     },
 
-    badge: {
-      bg: '#eaeaea'
-    },
-
     search: {
       border: '1px solid rgb(211 211 211)',
       bg: '#fff'
@@ -147,11 +154,6 @@ const lightTheme = {
     }
   },
 
-  welcome: {
-    heading: '#737373',
-    muted: '#4b5563'
-  },
-
   dropdown: {
     color: 'rgb(48 48 48)',
     iconColor: 'rgb(75, 85, 99)',
@@ -159,133 +161,61 @@ const lightTheme = {
     hoverBg: '#e9ecef',
     shadow: 'rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px',
     separator: '#e7e7e7',
-    labelBg: '#f3f3f3',
-    selectedBg: '#D977060F',
-    selectedColor: '#D97706',
-    mutedText: '#9B9B9B',
-    primaryText: '#343434',
-    secondaryText: '#6B7280',
-    headingText: '#343434'
-  },
-
-  listItem: {
-    hoverBg: '#e7e7e7',
-    activeBg: '#dcdcdc'
+    selectedColor: '#525252',
+    mutedText: '#9B9B9B'
   },
 
   workspace: {
-    accent: '#D97706',
+    accent: '#525252',
     border: '#e7e7e7',
-    borderMuted: '#f3f3f3',
-    card: {
-      bg: '#fff'
-    },
     button: {
-      bg: '#f3f3f3'
-    },
-    collection: {
-      header: {
-        indentBorder: 'solid 1px #efefef'
-      },
-      item: {
-        indentBorder: 'solid 1px #f9f9f9'
-      }
-    },
-    environments: {
-      bg: '#fbfbfb',
-      indentBorder: 'solid 1px #efefef',
-      activeBg: '#eeeeee',
-      search: {
-        bg: '#fff'
-      }
+      bg: colors.GRAY_3
     }
   },
 
   request: {
     methods: {
-      get: '#3f8f7a', // Muted jade green (aligned with NUMBER / VARIABLE)
-      post: '#7c5aa8', // Soft plum (matches ATOM family)
-      put: '#b8742f', // Warm bronze (close to BRAND, slightly darker)
-      delete: '#a54b4b', // Muted brick red (fits KEYWORD ruby tone)
-      patch: '#b8742f', // Same as PUT (semantic consistency)
-      options: '#8a7a52', // Olive slate (neutral, non-invasive)
-      head: '#6b7a8f' // Slate blue (reuses OPERATOR tone)
+      get: '#525252',
+      post: '#525252',
+      put: '#737373',
+      delete: '#404040',
+      patch: '#737373',
+      options: '#8a8a8a',
+      head: '#6b6b6b'
     },
 
-    grpc: '#5b65c8', // Muted indigo (technical, calm)
-    ws: '#c28a2c', // Golden bronze (pairs with BRAND without overpowering)
-    gql: '#b04a8f' // Dusty magenta (softened GraphQL pink)
+    grpc: '#525252',
+    ws: '#737373',
+    gql: '#404040'
   },
 
   requestTabPanel: {
     url: {
       bg: colors.WHITE,
       icon: '#515151',
-      iconDanger: '#d91f11',
-      errorHoverBg: '#fef2f2',
+      iconDanger: '#404040',
       border: `solid 1px ${colors.GRAY_4}`
     },
     dragbar: {
       border: '#efefef',
       activeBorder: 'rgb(200, 200, 200)'
     },
-    bodyModeSelect: {
-      color: '#efefef'
-    },
-    responseSendIcon: 'rgb(209, 213, 219)',
     responseStatus: 'rgb(117 117 117)',
-    responseOk: '#047857',
-    responseError: 'rgb(185, 28, 28)',
-    responsePending: '#1663bb',
+    responseOk: '#525252',
+    responseError: '#404040',
+    responsePending: '#525252',
     responseOverlayBg: 'rgba(255, 255, 255, 0.6)',
     card: {
       bg: '#fff',
       border: '#f4f4f4',
       hr: '#f4f4f4'
     },
-    cardTable: {
-      border: '#efefef',
-      bg: '#fff',
-      table: {
-        thead: {
-          bg: 'rgb(249, 250, 251)',
-          color: 'rgb(75 85 99)'
-        }
-      }
-    },
     graphqlDocsExplorer: {
       bg: '#fff',
       color: 'rgb(52, 52, 52)'
     }
   },
 
-  collection: {
-    environment: {
-      bg: '#efefef',
-
-      settings: {
-        bg: 'white',
-        sidebar: {
-          bg: '#eaeaea',
-          borderRight: 'transparent'
-        },
-        item: {
-          border: '#546de5',
-          hoverBg: '#e4e4e4',
-          active: {
-            bg: '#dcdcdc',
-            hoverBg: '#dcdcdc'
-          }
-        },
-        gridBorder: '#f4f4f4'
-      }
-    },
-
-    sidebar: {
-      bg: '#eaeaea'
-    }
-  },
-
   notifications: {
     bg: 'white',
     list: {
@@ -294,7 +224,7 @@ const lightTheme = {
       borderBottom: '#d3d3d3',
       hoverBg: '#e4e4e4',
       active: {
-        border: '#546de5',
+        border: '#525252',
         bg: '#dcdcdc',
         hoverBg: '#dcdcdc'
       }
@@ -304,8 +234,7 @@ const lightTheme = {
   modal: {
     title: {
       color: 'rgb(86 86 86)',
-      bg: '#f1f1f1',
-      iconColor: 'black'
+      bg: '#f1f1f1'
     },
     body: {
       color: 'rgb(52, 52, 52)',
@@ -318,9 +247,6 @@ const lightTheme = {
     },
     backdrop: {
       opacity: 0.4
-    },
-    closeButton: {
-      hoverBg: 'rgba(0, 0, 0, 0.08)'
     }
   },
 
@@ -344,31 +270,36 @@ const lightTheme = {
     },
     danger: {
       color: '#fff',
-      bg: '#dc3545',
-      border: '#dc3545'
+      bg: '#525252',
+      border: '#525252'
     }
   },
   button2: {
     color: {
       primary: {
         bg: colors.BRAND,
-        text: '#fff'
+        text: '#fff',
+        border: colors.BRAND
       },
       secondary: {
         bg: '#e5e7eb',
-        text: colors.TEXT
+        text: colors.TEXT,
+        border: '#d1d5db'
       },
       success: {
-        bg: '#4f9a7d',
-        text: '#fff'
+        bg: '#525252',
+        text: '#fff',
+        border: '#525252'
       },
       warning: {
-        bg: '#c98b2b',
-        text: '#fff'
+        bg: '#737373',
+        text: '#fff',
+        border: '#737373'
       },
       danger: {
-        bg: '#d14f5b',
-        text: '#fff'
+        bg: '#404040',
+        text: '#fff',
+        border: '#404040'
       }
     }
   },
@@ -377,7 +308,7 @@ const lightTheme = {
     active: {
       fontWeight: 400,
       color: colors.SLATE_BLACK,
-      border: '#c7822e'
+      border: '#525252'
     },
     secondary: {
       active: {
@@ -403,9 +334,6 @@ const lightTheme = {
     example: {
       iconColor: colors.GRAY_7
     },
-    active: {
-      bg: '#e7e7e7'
-    },
     shortTab: {
       color: 'rgb(117 117 117)',
       bg: 'white',
@@ -425,9 +353,9 @@ const lightTheme = {
       bg: colors.WHITE
     },
     variable: {
-      valid: '#047857',
-      invalid: 'rgb(185, 28, 28)',
-      prompt: '#186ADE',
+      valid: '#525252',
+      invalid: '#404040',
+      prompt: '#525252',
       info: {
         color: '#343434',
         bg: '#FFFFFF',
@@ -452,8 +380,8 @@ const lightTheme = {
       operator: colors.CODEMIRROR_TOKENS.OPERATOR
     },
     searchLineHighlightCurrent: 'rgba(120,120,120,0.10)',
-    searchMatch: '#B8860B',
-    searchMatchActive: '#DAA520'
+    searchMatch: '#737373',
+    searchMatchActive: '#525252'
   },
 
   table: {
@@ -476,18 +404,12 @@ const lightTheme = {
   },
 
   dragAndDrop: {
-    border: '#8b8b8b', // Using the same gray as focusBorder from input
+    border: '#8b8b8b',
     borderStyle: '2px solid',
-    hoverBg: 'rgba(139, 139, 139, 0.05)', // Matching the border color with reduced opacity
+    hoverBg: 'rgba(139, 139, 139, 0.05)',
     transition: 'all 0.1s ease'
   },
 
-  tooltip: {
-    bg: '#374151',
-    color: '#ffffff',
-    shortcutColor: '#f59e0b'
-  },
-
   infoTip: {
     bg: 'white',
     border: '#e0e0e0',
@@ -512,8 +434,8 @@ const lightTheme = {
     timestampColor: '#6c757d',
     emptyColor: '#6c757d',
     logHoverBg: 'rgba(0, 0, 0, 0.03)',
-    resizeHandleHover: '#0d6efd',
-    resizeHandleActive: '#0d6efd',
+    resizeHandleHover: '#525252',
+    resizeHandleActive: '#525252',
     dropdownBg: '#ffffff',
     dropdownHeaderBg: '#f8f9fa',
     optionHoverBg: '#f8f9fa',
@@ -542,9 +464,6 @@ const lightTheme = {
       }
     },
     importPaths: {
-      container: {
-        bg: '#ffffff'
-      },
       header: {
         text: '#838383',
         button: {
@@ -554,10 +473,10 @@ const lightTheme = {
       },
       error: {
         bg: 'transparent',
-        text: '#B91C1C',
+        text: '#404040',
         link: {
-          color: '#B91C1C',
-          hoverColor: '#dc2626'
+          color: '#404040',
+          hoverColor: '#525252'
         }
       },
       item: {
@@ -570,7 +489,7 @@ const lightTheme = {
         },
         invalid: {
           opacity: 0.6,
-          text: '#B91C1C'
+          text: '#404040'
         }
       },
       empty: {
@@ -584,9 +503,6 @@ const lightTheme = {
       }
     },
     protoFiles: {
-      container: {
-        bg: '#ffffff'
-      },
       header: {
         text: '#838383',
         button: {
@@ -596,25 +512,25 @@ const lightTheme = {
       },
       error: {
         bg: 'transparent',
-        text: '#B91C1C',
+        text: '#404040',
         link: {
-          color: '#B91C1C',
-          hoverColor: '#dc2626'
+          color: '#404040',
+          hoverColor: '#525252'
         }
       },
       item: {
         bg: 'transparent',
         hoverBg: 'rgba(0, 0, 0, 0.05)',
         selected: {
-          bg: 'rgba(217, 119, 6, 0.2)',
-          border: '#d97706'
+          bg: 'rgba(82, 82, 82, 0.2)',
+          border: '#525252'
         },
         text: '#343434',
         secondaryText: '#838383',
         icon: '#838383',
         invalid: {
           opacity: 0.6,
-          text: '#B91C1C'
+          text: '#404040'
         }
       },
       empty: {
@@ -629,9 +545,9 @@ const lightTheme = {
     }
   },
   deprecationWarning: {
-    bg: 'rgba(217, 31, 17, 0.1)',
-    border: 'rgba(217, 31, 17, 0.1)',
-    icon: '#D91F11',
+    bg: 'rgba(64, 64, 64, 0.1)',
+    border: 'rgba(64, 64, 64, 0.1)',
+    icon: '#404040',
     text: '#343434'
   },
 
@@ -642,8 +558,8 @@ const lightTheme = {
   },
 
   examples: {
-    buttonBg: '#D977061A',
-    buttonColor: '#D97706',
+    buttonBg: '#5252521A',
+    buttonColor: '#525252',
     buttonText: '#fff',
     buttonIconColor: '#000',
     border: '#efefef',
@@ -685,12 +601,12 @@ const lightTheme = {
         },
         sandboxMode: {
           safeMode: {
-            bg: 'rgba(4, 120, 87, 0.12)',
-            color: colors.GREEN
+            bg: 'rgba(82, 82, 82, 0.12)',
+            color: '#525252'
           },
           developerMode: {
-            bg: 'rgba(204, 145, 73, 0.15)',
-            color: colors.YELLOW
+            bg: 'rgba(115, 115, 115, 0.15)',
+            color: '#737373'
           }
         }
       }
@@ -698,4 +614,4 @@ const lightTheme = {
   }
 };
 
-export default lightTheme;
+export default lightMonochromeTheme;
diff --git a/packages/bruno-app/src/themes/light/light-pastel.js b/packages/bruno-app/src/themes/light/light-pastel.js
new file mode 100644
index 000000000..f8568912a
--- /dev/null
+++ b/packages/bruno-app/src/themes/light/light-pastel.js
@@ -0,0 +1,634 @@
+/**
+ * Light Pastel Theme - "Serenity Bloom"
+ * Soft, deep pastels with warm undertones for a calm, refined look.
+ * Gentle contrast that stays readable and inviting.
+ */
+
+const colors = {
+  // Primary palette - soft yet deep
+  BRAND: '#d16c6c', // Dusty coral - warm but calm
+  TEXT: '#2b2f3a', // Deep charcoal with a violet hint
+  TEXT_MUTED: '#6e7380', // Muted slate
+  TEXT_LINK: '#3f7cac', // Steel blue
+  BACKGROUND: '#fdfaf7', // Warm ivory
+
+  // Core colors
+  WHITE: '#ffffff',
+  BLACK: '#17181f',
+  SLATE: '#1f2530',
+
+  // Soft pastels with depth
+  GREEN: '#3c9d7c', // Soft emerald
+  YELLOW: '#d2a13f', // Golden ochre
+  RED: '#c75b63', // Rosewood red
+  PURPLE: '#7a70b5', // Dusty periwinkle
+  BLUE: '#3a7cc4', // Muted azure
+  PINK: '#c57a92', // Dusty rose
+  ORANGE: '#dd8a52', // Muted amber
+  TEAL: '#3a8f98', // Steel teal
+
+  // Warm grayscale with soft contrast
+  GRAY_1: '#f7f4ef', // Near white with warmth
+  GRAY_2: '#f0ebe4', // Light greige
+  GRAY_3: '#e2dbd1', // Soft stone
+  GRAY_4: '#d3cabc', // Gentle taupe
+  GRAY_5: '#b8b0a3', // Mid greige
+  GRAY_6: '#8d8577', // Warm smoke
+  GRAY_7: '#6f675b', // Earthy brown-gray
+  GRAY_8: '#574f45', // Deep stone
+  GRAY_9: '#3f382f', // Charcoal brown
+  GRAY_10: '#29231d', // Deepest warm charcoal
+
+  // CodeMirror syntax - soft contrast with clarity
+  CODEMIRROR_TOKENS: {
+    DEFINITION: '#3c9d7c', // Soft emerald
+    PROPERTY: '#3a7cc4', // Muted azure
+    STRING: '#c75b63', // Rosewood
+    NUMBER: '#2d8fa1', // Dusty teal
+    ATOM: '#7a70b5', // Dusty periwinkle
+    VARIABLE: '#3f7cac', // Steel blue
+    KEYWORD: '#c57a92', // Dusty rose
+    COMMENT: '#9a9488', // Warm muted gray
+    OPERATOR: '#7c7a73' // Soft graphite
+  }
+};
+
+const lightPastelTheme = {
+  mode: 'light',
+  brand: colors.BRAND,
+  text: colors.TEXT,
+  textLink: colors.TEXT_LINK,
+  bg: colors.BACKGROUND,
+
+  accents: {
+    primary: colors.BRAND
+  },
+
+  background: {
+    base: colors.BACKGROUND,
+    mantle: colors.GRAY_1,
+    crust: colors.GRAY_2,
+    surface0: colors.GRAY_3,
+    surface1: colors.GRAY_4,
+    surface2: colors.GRAY_5
+  },
+
+  overlay: {
+    overlay2: colors.GRAY_6,
+    overlay1: '#c0c0c0',
+    overlay0: '#d0d0d0'
+  },
+
+  font: {
+    size: {
+      xs: '0.6875rem',
+      sm: '0.75rem',
+      base: '0.8125rem',
+      md: '0.875rem',
+      lg: '1rem',
+      xl: '1.125rem'
+    }
+  },
+
+  shadow: {
+    sm: '0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05)',
+    md: '0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06)',
+    lg: '0 4px 16px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05)'
+  },
+
+  border: {
+    radius: {
+      sm: '4px',
+      base: '6px',
+      md: '8px',
+      lg: '10px',
+      xl: '12px'
+    },
+    border2: colors.GRAY_4,
+    border1: colors.GRAY_3,
+    border0: colors.GRAY_2
+  },
+
+  colors: {
+    text: {
+      white: colors.WHITE,
+      green: colors.GREEN,
+      danger: colors.RED,
+      warning: colors.ORANGE,
+      muted: colors.TEXT_MUTED,
+      purple: colors.PURPLE,
+      yellow: colors.YELLOW,
+      subtext2: colors.GRAY_7,
+      subtext1: colors.TEXT_MUTED,
+      subtext0: colors.GRAY_6
+    },
+    bg: {
+      danger: colors.RED
+    },
+    accent: colors.BRAND
+  },
+
+  input: {
+    bg: colors.WHITE,
+    border: colors.GRAY_4,
+    focusBorder: colors.BRAND,
+    placeholder: {
+      color: colors.GRAY_6,
+      opacity: 0.8
+    }
+  },
+
+  sidebar: {
+    color: colors.TEXT,
+    muted: colors.TEXT_MUTED,
+    bg: colors.GRAY_1,
+    dragbar: {
+      border: colors.GRAY_4,
+      activeBorder: colors.BRAND
+    },
+    search: {
+      border: `1px solid ${colors.GRAY_4}`,
+      bg: colors.WHITE
+    },
+    collection: {
+      item: {
+        bg: colors.GRAY_2,
+        hoverBg: colors.GRAY_3,
+        focusBorder: colors.BRAND,
+        indentBorder: `solid 1px ${colors.GRAY_4}`,
+        active: {
+          indentBorder: `solid 1px ${colors.BRAND}40`
+        },
+        example: {
+          iconColor: colors.GRAY_7
+        }
+      }
+    },
+    dropdownIcon: {
+      color: colors.GRAY_7
+    }
+  },
+
+  dropdown: {
+    color: colors.TEXT,
+    iconColor: colors.GRAY_7,
+    bg: colors.GRAY_1,
+    hoverBg: colors.GRAY_2,
+    shadow: 'rgba(0, 0, 0, 0.15) 0px 6px 16px -2px, rgba(0, 0, 0, 0.1) 0px 3px 8px -3px',
+    separator: colors.GRAY_3,
+    selectedColor: colors.BRAND,
+    mutedText: colors.GRAY_6
+  },
+
+  workspace: {
+    accent: colors.BRAND,
+    border: colors.GRAY_3,
+    button: {
+      bg: colors.GRAY_3
+    }
+  },
+
+  request: {
+    methods: {
+      get: '#3c9d7c', // Soft emerald - success
+      post: '#7a70b5', // Dusty periwinkle - creation
+      put: '#dd8a52', // Muted amber - update
+      delete: '#c75b63', // Rosewood red - deletion
+      patch: '#3a8f98', // Steel teal - modification
+      options: '#2d8fa1', // Dusty teal - metadata
+      head: '#3a7cc4' // Muted azure - lightweight
+    },
+    grpc: '#7a70b5', // Dusty periwinkle
+    ws: '#c57a92', // Dusty rose
+    gql: '#7a70b5' // Dusty periwinkle
+  },
+
+  requestTabPanel: {
+    url: {
+      bg: 'transparent',
+      icon: colors.GRAY_7,
+      iconDanger: colors.RED,
+      border: `solid 1px ${colors.GRAY_4}`
+    },
+    dragbar: {
+      border: colors.GRAY_3,
+      activeBorder: colors.BRAND
+    },
+    responseStatus: colors.TEXT_MUTED,
+    responseOk: colors.GREEN,
+    responseError: colors.RED,
+    responsePending: colors.BLUE,
+    responseOverlayBg: 'rgba(254, 251, 255, 0.7)',
+    card: {
+      bg: colors.WHITE,
+      border: colors.GRAY_3,
+      hr: colors.GRAY_3
+    },
+    graphqlDocsExplorer: {
+      bg: colors.WHITE,
+      color: colors.TEXT
+    }
+  },
+
+  notifications: {
+    bg: colors.WHITE,
+    list: {
+      bg: colors.GRAY_2,
+      borderRight: 'transparent',
+      borderBottom: colors.GRAY_4,
+      hoverBg: colors.GRAY_3,
+      active: {
+        border: colors.BRAND,
+        bg: colors.GRAY_3,
+        hoverBg: colors.GRAY_3
+      }
+    }
+  },
+
+  modal: {
+    title: {
+      color: colors.TEXT,
+      bg: colors.GRAY_1
+    },
+    body: {
+      color: colors.TEXT,
+      bg: colors.WHITE
+    },
+    input: {
+      bg: colors.WHITE,
+      border: colors.GRAY_4,
+      focusBorder: colors.BRAND
+    },
+    backdrop: {
+      opacity: 0.35
+    }
+  },
+
+  button: {
+    secondary: {
+      color: colors.TEXT,
+      bg: colors.GRAY_2,
+      border: colors.GRAY_4,
+      hoverBorder: colors.GRAY_6
+    },
+    close: {
+      color: colors.TEXT,
+      bg: colors.WHITE,
+      border: colors.WHITE,
+      hoverBorder: ''
+    },
+    disabled: {
+      color: colors.GRAY_6,
+      bg: colors.GRAY_2,
+      border: colors.GRAY_3
+    },
+    danger: {
+      color: colors.WHITE,
+      bg: colors.RED,
+      border: colors.RED
+    }
+  },
+
+  button2: {
+    color: {
+      primary: {
+        bg: colors.BRAND,
+        text: colors.WHITE,
+        border: colors.BRAND
+      },
+      secondary: {
+        bg: colors.GRAY_3,
+        text: colors.TEXT,
+        border: colors.GRAY_4
+      },
+      success: {
+        bg: colors.GREEN,
+        text: colors.WHITE,
+        border: colors.GREEN
+      },
+      warning: {
+        bg: colors.ORANGE,
+        text: colors.WHITE,
+        border: colors.ORANGE
+      },
+      danger: {
+        bg: colors.RED,
+        text: colors.WHITE,
+        border: colors.RED
+      }
+    }
+  },
+
+  tabs: {
+    marginRight: '1.2rem',
+    active: {
+      fontWeight: 400,
+      color: colors.TEXT,
+      border: colors.BRAND
+    },
+    secondary: {
+      active: {
+        bg: colors.WHITE,
+        color: colors.TEXT
+      },
+      inactive: {
+        bg: colors.GRAY_2,
+        color: colors.TEXT_MUTED
+      }
+    }
+  },
+
+  requestTabs: {
+    color: colors.TEXT,
+    bg: colors.GRAY_1,
+    bottomBorder: colors.GRAY_3,
+    icon: {
+      color: colors.GRAY_6,
+      hoverColor: colors.TEXT,
+      hoverBg: colors.GRAY_3
+    },
+    example: {
+      iconColor: colors.GRAY_7
+    },
+    shortTab: {
+      color: colors.TEXT_MUTED,
+      bg: colors.WHITE,
+      hoverColor: colors.TEXT,
+      hoverBg: colors.GRAY_2
+    }
+  },
+
+  codemirror: {
+    bg: 'transparent',
+    border: colors.WHITE,
+    placeholder: {
+      color: colors.GRAY_6,
+      opacity: 0.75
+    },
+    gutter: {
+      bg: 'transparent'
+    },
+    variable: {
+      valid: colors.GREEN,
+      invalid: colors.RED,
+      prompt: colors.BLUE,
+      info: {
+        color: colors.TEXT,
+        bg: colors.WHITE,
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+        editorBg: colors.GRAY_1,
+        iconColor: colors.GRAY_6,
+        editorBorder: colors.GRAY_3,
+        editorFocusBorder: colors.BRAND,
+        editableDisplayHoverBg: colors.GRAY_1,
+        border: colors.GRAY_3
+      }
+    },
+    tokens: {
+      definition: colors.CODEMIRROR_TOKENS.DEFINITION,
+      property: colors.CODEMIRROR_TOKENS.PROPERTY,
+      string: colors.CODEMIRROR_TOKENS.STRING,
+      number: colors.CODEMIRROR_TOKENS.NUMBER,
+      atom: colors.CODEMIRROR_TOKENS.ATOM,
+      variable: colors.CODEMIRROR_TOKENS.VARIABLE,
+      keyword: colors.CODEMIRROR_TOKENS.KEYWORD,
+      comment: colors.CODEMIRROR_TOKENS.COMMENT,
+      operator: colors.CODEMIRROR_TOKENS.OPERATOR
+    },
+    searchLineHighlightCurrent: `${colors.BRAND}12`,
+    searchMatch: '#e5c27a',
+    searchMatchActive: '#d7b35f'
+  },
+
+  table: {
+    border: colors.GRAY_3,
+    thead: {
+      color: colors.TEXT_MUTED
+    },
+    striped: colors.GRAY_1,
+    input: {
+      color: colors.TEXT
+    }
+  },
+
+  plainGrid: {
+    hoverBg: colors.GRAY_2
+  },
+
+  scrollbar: {
+    color: colors.GRAY_5
+  },
+
+  dragAndDrop: {
+    border: colors.BRAND,
+    borderStyle: '2px dashed',
+    hoverBg: `${colors.BRAND}08`,
+    transition: 'all 0.15s ease'
+  },
+
+  infoTip: {
+    bg: colors.WHITE,
+    border: colors.GRAY_4,
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.12)'
+  },
+
+  statusBar: {
+    border: colors.GRAY_3,
+    color: colors.TEXT_MUTED
+  },
+
+  console: {
+    bg: colors.GRAY_1,
+    headerBg: colors.GRAY_1,
+    contentBg: colors.WHITE,
+    border: colors.GRAY_3,
+    titleColor: colors.TEXT,
+    countColor: colors.TEXT_MUTED,
+    buttonColor: colors.TEXT,
+    buttonHoverBg: colors.GRAY_2,
+    buttonHoverColor: colors.TEXT,
+    messageColor: colors.TEXT,
+    timestampColor: colors.TEXT_MUTED,
+    emptyColor: colors.TEXT_MUTED,
+    logHoverBg: colors.GRAY_1,
+    resizeHandleHover: colors.BRAND,
+    resizeHandleActive: colors.BRAND,
+    dropdownBg: colors.WHITE,
+    dropdownHeaderBg: colors.GRAY_1,
+    optionHoverBg: colors.GRAY_1,
+    optionLabelColor: colors.TEXT,
+    optionCountColor: colors.TEXT_MUTED,
+    checkboxColor: colors.BRAND,
+    scrollbarTrack: colors.GRAY_1,
+    scrollbarThumb: colors.GRAY_4,
+    scrollbarThumbHover: colors.GRAY_5
+  },
+
+  grpc: {
+    tabNav: {
+      container: {
+        bg: colors.GRAY_1
+      },
+      button: {
+        active: {
+          bg: colors.WHITE,
+          color: colors.TEXT
+        },
+        inactive: {
+          bg: 'transparent',
+          color: colors.TEXT_MUTED
+        }
+      }
+    },
+    importPaths: {
+      header: {
+        text: colors.TEXT_MUTED,
+        button: {
+          color: colors.TEXT_MUTED,
+          hoverColor: colors.TEXT
+        }
+      },
+      error: {
+        bg: 'transparent',
+        text: '#c75b63',
+        link: {
+          color: '#c75b63',
+          hoverColor: '#d98b8f'
+        }
+      },
+      item: {
+        bg: 'transparent',
+        hoverBg: colors.GRAY_2,
+        text: colors.TEXT,
+        icon: colors.TEXT_MUTED,
+        checkbox: {
+          color: colors.TEXT
+        },
+        invalid: {
+          opacity: 0.6,
+          text: '#c75b63'
+        }
+      },
+      empty: {
+        text: colors.TEXT_MUTED
+      },
+      button: {
+        bg: colors.GRAY_2,
+        color: colors.TEXT,
+        border: colors.GRAY_4,
+        hoverBorder: colors.GRAY_6
+      }
+    },
+    protoFiles: {
+      header: {
+        text: colors.TEXT_MUTED,
+        button: {
+          color: colors.TEXT_MUTED,
+          hoverColor: colors.TEXT
+        }
+      },
+      error: {
+        bg: 'transparent',
+        text: '#c75b63',
+        link: {
+          color: '#c75b63',
+          hoverColor: '#d98b8f'
+        }
+      },
+      item: {
+        bg: 'transparent',
+        hoverBg: colors.GRAY_2,
+        selected: {
+          bg: `${colors.BRAND}18`,
+          border: colors.BRAND
+        },
+        text: colors.TEXT,
+        secondaryText: colors.TEXT_MUTED,
+        icon: colors.TEXT_MUTED,
+        invalid: {
+          opacity: 0.6,
+          text: '#c75b63'
+        }
+      },
+      empty: {
+        text: colors.TEXT_MUTED
+      },
+      button: {
+        bg: colors.GRAY_2,
+        color: colors.TEXT,
+        border: colors.GRAY_4,
+        hoverBorder: colors.GRAY_6
+      }
+    }
+  },
+
+  deprecationWarning: {
+    bg: '#fef3c7',
+    border: '#fcd34d',
+    icon: '#d97706',
+    text: colors.TEXT
+  },
+
+  preferences: {
+    sidebar: {
+      border: colors.GRAY_3
+    }
+  },
+
+  examples: {
+    buttonBg: `${colors.BRAND}15`,
+    buttonColor: colors.BRAND,
+    buttonText: colors.WHITE,
+    buttonIconColor: colors.TEXT,
+    border: colors.GRAY_3,
+    urlBar: {
+      border: colors.GRAY_3,
+      bg: colors.GRAY_1
+    },
+    table: {
+      thead: {
+        bg: colors.GRAY_1,
+        color: colors.TEXT
+      }
+    },
+    checkbox: {
+      color: colors.WHITE
+    }
+  },
+
+  app: {
+    collection: {
+      toolbar: {
+        environmentSelector: {
+          bg: colors.WHITE,
+          border: colors.GRAY_4,
+          icon: colors.BRAND,
+          text: colors.TEXT,
+          caret: colors.GRAY_6,
+          separator: colors.GRAY_4,
+          hoverBg: colors.WHITE,
+          hoverBorder: colors.GRAY_5,
+          noEnvironment: {
+            text: colors.TEXT_MUTED,
+            bg: colors.WHITE,
+            border: colors.GRAY_4,
+            hoverBg: colors.WHITE,
+            hoverBorder: colors.GRAY_5
+          }
+        },
+        sandboxMode: {
+          safeMode: {
+            bg: `${colors.GREEN}18`,
+            color: colors.GREEN
+          },
+          developerMode: {
+            bg: `${colors.ORANGE}18`,
+            color: colors.ORANGE
+          }
+        }
+      }
+    }
+  }
+};
+
+export default lightPastelTheme;
diff --git a/packages/bruno-app/src/themes/light/light.js b/packages/bruno-app/src/themes/light/light.js
new file mode 100644
index 000000000..071a484df
--- /dev/null
+++ b/packages/bruno-app/src/themes/light/light.js
@@ -0,0 +1,645 @@
+const palette = {
+  accents: {
+    PRIMARY: '#bd7a28',
+    RED: 'hsl(8 60% 52%)', // warm coral - NEW
+    ROSE: 'hsl(352 45% 50%)', // soft red (approved)
+    BROWN: 'hsl(28 55% 38%)', // warm brown (liked)
+    ORANGE: 'hsl(35 85% 42%)', // vibrant orange
+    YELLOW: 'hsl(45 75% 42%)', // golden yellow
+    LIME: 'hsl(85 45% 40%)', // yellow-green - NEW
+    GREEN: 'hsl(145 50% 36%)', // forest green
+    TEAL: 'hsl(178 50% 36%)', // true teal
+    CYAN: 'hsl(195 55% 42%)', // cyan-blue - NEW
+    BLUE: 'hsl(214 55% 45%)', // true blue (liked)
+    INDIGO: 'hsl(235 45% 45%)', // deep indigo
+    VIOLET: 'hsl(258 42% 50%)', // soft violet - NEW
+    PURPLE: 'hsl(280 45% 48%)', // rich purple
+    PINK: 'hsl(328 50% 48%)' // magenta-pink - NEW
+  },
+  system: {
+    CONTROL_ACCENT: '#b96f1d' // for accent-color
+  },
+  background: {
+    BASE: '#ffffff',
+    MANTLE: '#f8f8f8',
+    CRUST: '#f6f6f6',
+    SURFACE0: '#f1f1f1',
+    SURFACE1: '#eaeaea',
+    SURFACE2: '#e5e5e5'
+  },
+  text: {
+    BASE: '#343434',
+    SUBTEXT2: '#666666',
+    SUBTEXT1: '#838383',
+    SUBTEXT0: '#9B9B9B'
+  },
+  overlay: {
+    OVERLAY2: '#8b8b8b',
+    OVERLAY1: '#B0B0B0',
+    OVERLAY0: '#C0C0C0'
+  },
+  border: {
+    BORDER2: '#cccccc',
+    BORDER1: '#e5e5e5',
+    BORDER0: '#efefef'
+  },
+  utility: {
+    WHITE: '#ffffff',
+    BLACK: '#000000'
+  }
+};
+
+const colors = {
+  CODEMIRROR_TOKENS: {
+    DEFINITION: palette.accents.INDIGO,
+    PROPERTY: palette.accents.BLUE,
+    STRING: palette.accents.BROWN,
+    NUMBER: palette.accents.GREEN,
+    ATOM: palette.accents.PURPLE,
+    VARIABLE: palette.accents.PINK,
+    KEYWORD: palette.accents.ROSE,
+    COMMENT: palette.text.SUBTEXT0,
+    OPERATOR: palette.accents.BLUE
+  }
+};
+
+const lightTheme = {
+  mode: 'light',
+  brand: palette.accents.PRIMARY,
+  text: palette.text.BASE,
+  textLink: palette.accents.BLUE,
+  bg: palette.background.BASE,
+
+  accents: {
+    primary: palette.accents.PRIMARY
+  },
+
+  background: {
+    base: palette.background.BASE,
+    mantle: palette.background.MANTLE,
+    crust: palette.background.CRUST,
+    surface2: palette.background.SURFACE2,
+    surface1: palette.background.SURFACE1,
+    surface0: palette.background.SURFACE0
+  },
+
+  overlay: {
+    overlay2: palette.overlay.OVERLAY2,
+    overlay1: palette.overlay.OVERLAY1,
+    overlay0: palette.overlay.OVERLAY0
+  },
+
+  font: {
+    size: {
+      xs: '0.6875rem', // 11px
+      sm: '0.75rem', // 12px
+      base: '0.8125rem', // 13px
+      md: '0.875rem', // 14px
+      lg: '1rem', // 16px
+      xl: '1.125rem' // 18px
+    }
+  },
+
+  shadow: {
+    sm: '0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05)',
+    md: '0 2px 8px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.06)',
+    lg: '0 2px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05)'
+  },
+
+  border: {
+    radius: {
+      sm: '4px',
+      base: '6px',
+      md: '8px',
+      lg: '10px',
+      xl: '12px'
+    },
+    border2: palette.border.BORDER2,
+    border1: palette.border.BORDER1,
+    border0: palette.border.BORDER0
+  },
+
+  colors: {
+    text: {
+      white: palette.utility.WHITE,
+      green: palette.accents.GREEN,
+      danger: palette.accents.RED,
+      warning: palette.accents.ORANGE,
+      muted: palette.text.SUBTEXT1,
+      purple: palette.accents.PURPLE,
+      yellow: palette.accents.YELLOW,
+      subtext2: palette.text.SUBTEXT2,
+      subtext1: palette.text.SUBTEXT1,
+      subtext0: palette.text.SUBTEXT0
+    },
+    bg: {
+      danger: palette.accents.RED
+    },
+    accent: palette.system.CONTROL_ACCENT
+  },
+
+  input: {
+    bg: palette.utility.WHITE,
+    border: palette.border.BORDER2,
+    focusBorder: palette.overlay.OVERLAY2,
+    placeholder: {
+      color: palette.overlay.OVERLAY1,
+      opacity: 0.8
+    }
+  },
+
+  sidebar: {
+    color: palette.text.BASE,
+    muted: palette.text.SUBTEXT1,
+    bg: palette.background.MANTLE,
+    dragbar: {
+      border: palette.background.SURFACE2,
+      activeBorder: palette.background.SURFACE2
+    },
+
+    search: {
+      border: `1px solid ${palette.border.BORDER2}`,
+      bg: palette.utility.WHITE
+    },
+
+    collection: {
+      item: {
+        bg: palette.background.SURFACE0,
+        hoverBg: palette.background.SURFACE0,
+        focusBorder: palette.border.BORDER2,
+        indentBorder: `solid 1px ${palette.border.BORDER1}`,
+        active: {
+          indentBorder: `solid 1px ${palette.border.BORDER1}`
+        },
+        example: {
+          iconColor: palette.text.SUBTEXT2
+        }
+      }
+    },
+
+    dropdownIcon: {
+      color: palette.text.SUBTEXT2
+    }
+  },
+
+  dropdown: {
+    color: palette.text.BASE,
+    iconColor: palette.text.SUBTEXT2,
+    bg: palette.utility.WHITE,
+    hoverBg: palette.background.CRUST,
+    shadow: 'rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px',
+    separator: palette.border.BORDER1,
+    selectedColor: palette.accents.PRIMARY,
+    mutedText: palette.text.SUBTEXT0
+  },
+
+  workspace: {
+    accent: palette.system.CONTROL_ACCENT,
+    border: palette.border.BORDER1,
+    button: {
+      bg: palette.background.MANTLE
+    }
+  },
+
+  request: {
+    methods: {
+      get: palette.accents.GREEN,
+      post: palette.accents.PURPLE,
+      put: palette.accents.ORANGE,
+      delete: palette.accents.RED,
+      patch: palette.accents.PURPLE,
+      options: palette.accents.TEAL,
+      head: palette.accents.CYAN
+    },
+
+    grpc: palette.accents.INDIGO,
+    ws: palette.accents.ORANGE,
+    gql: palette.accents.PINK
+  },
+
+  requestTabPanel: {
+    url: {
+      bg: palette.utility.WHITE,
+      icon: palette.text.SUBTEXT2,
+      iconDanger: palette.accents.RED,
+      border: `solid 1px ${palette.border.BORDER1}`
+    },
+    dragbar: {
+      border: palette.background.SURFACE2,
+      activeBorder: palette.border.BORDER2
+    },
+    responseStatus: palette.text.SUBTEXT1,
+    responseOk: palette.accents.GREEN,
+    responseError: palette.accents.RED,
+    responsePending: palette.accents.BLUE,
+    responseOverlayBg: 'rgba(255, 255, 255, 0.6)',
+    card: {
+      bg: palette.background.BASE,
+      border: palette.border.BORDER1,
+      hr: palette.border.BORDER1
+    },
+    graphqlDocsExplorer: {
+      bg: palette.background.BASE,
+      color: palette.text.BASE
+    }
+  },
+
+  notifications: {
+    bg: palette.background.BASE,
+    list: {
+      bg: palette.background.SURFACE0,
+      borderRight: 'transparent',
+      borderBottom: palette.border.BORDER2,
+      hoverBg: palette.background.SURFACE1,
+      active: {
+        border: palette.accents.BLUE,
+        bg: palette.background.SURFACE1,
+        hoverBg: palette.background.SURFACE2
+      }
+    }
+  },
+
+  modal: {
+    title: {
+      color: palette.text.BASE,
+      bg: palette.background.SURFACE0
+    },
+    body: {
+      color: palette.text.BASE,
+      bg: palette.background.BASE
+    },
+    input: {
+      bg: palette.background.BASE,
+      border: palette.border.BORDER2,
+      focusBorder: palette.overlay.OVERLAY2
+    },
+    backdrop: {
+      opacity: 0.4
+    }
+  },
+
+  button: {
+    secondary: {
+      color: '#212529',
+      bg: '#e2e6ea',
+      border: '#dae0e5',
+      hoverBorder: '#696969'
+    },
+    close: {
+      color: '212529',
+      bg: 'white',
+      border: 'white',
+      hoverBorder: ''
+    },
+    disabled: {
+      color: '#9f9f9f',
+      bg: palette.border.BORDER0,
+      border: 'rgb(234, 234, 234)'
+    },
+    danger: {
+      color: '#fff',
+      bg: '#dc3545',
+      border: '#dc3545'
+    }
+  },
+  button2: {
+    color: {
+      primary: {
+        bg: palette.accents.PRIMARY,
+        text: palette.utility.WHITE,
+        border: palette.accents.PRIMARY
+      },
+      secondary: {
+        bg: palette.background.MANTLE,
+        border: palette.border.BORDER2,
+        text: palette.text.BASE
+      },
+      success: {
+        bg: palette.accents.GREEN,
+        text: palette.utility.WHITE,
+        border: palette.accents.GREEN
+      },
+      warning: {
+        bg: palette.accents.ORANGE,
+        text: palette.utility.WHITE,
+        border: palette.accents.ORANGE
+      },
+      danger: {
+        bg: palette.accents.RED,
+        text: palette.utility.WHITE,
+        border: palette.accents.RED
+      }
+    }
+  },
+  tabs: {
+    marginRight: '1.2rem',
+    active: {
+      fontWeight: 400,
+      color: palette.text.BASE,
+      border: palette.accents.PRIMARY
+    },
+    secondary: {
+      active: {
+        bg: palette.background.BASE,
+        color: palette.text.BASE
+      },
+      inactive: {
+        bg: palette.background.SURFACE1,
+        color: palette.text.BASE
+      }
+    }
+  },
+
+  requestTabs: {
+    color: palette.text.BASE,
+    bg: palette.background.CRUST,
+    bottomBorder: palette.border.BORDER0,
+    icon: {
+      color: palette.text.SUBTEXT0,
+      hoverColor: palette.text.BASE,
+      hoverBg: palette.background.SURFACE1
+    },
+    example: {
+      iconColor: palette.text.SUBTEXT2
+    },
+    shortTab: {
+      color: palette.text.SUBTEXT1,
+      bg: palette.utility.WHITE,
+      hoverColor: palette.text.SUBTEXT2,
+      hoverBg: palette.background.SURFACE1
+    }
+  },
+
+  codemirror: {
+    bg: palette.utility.WHITE,
+    border: palette.utility.WHITE,
+    placeholder: {
+      color: palette.overlay.OVERLAY1,
+      opacity: 0.75
+    },
+    gutter: {
+      bg: palette.utility.WHITE
+    },
+    variable: {
+      valid: palette.accents.GREEN,
+      invalid: palette.accents.RED,
+      prompt: palette.accents.BLUE,
+      info: {
+        color: palette.text.BASE,
+        bg: palette.utility.WHITE,
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.45)',
+        editorBg: palette.background.CRUST,
+        iconColor: palette.text.SUBTEXT0,
+        editorBorder: palette.border.BORDER0,
+        editorFocusBorder: palette.text.SUBTEXT0,
+        editableDisplayHoverBg: 'rgba(0,0,0,0.02)',
+        border: palette.border.BORDER0
+      }
+    },
+    tokens: {
+      definition: colors.CODEMIRROR_TOKENS.DEFINITION,
+      property: colors.CODEMIRROR_TOKENS.PROPERTY,
+      string: colors.CODEMIRROR_TOKENS.STRING,
+      number: colors.CODEMIRROR_TOKENS.NUMBER,
+      atom: colors.CODEMIRROR_TOKENS.ATOM,
+      variable: colors.CODEMIRROR_TOKENS.VARIABLE,
+      keyword: colors.CODEMIRROR_TOKENS.KEYWORD,
+      comment: colors.CODEMIRROR_TOKENS.COMMENT,
+      operator: colors.CODEMIRROR_TOKENS.OPERATOR
+    },
+    searchLineHighlightCurrent: 'rgba(120,120,120,0.10)',
+    searchMatch: '#B8860B',
+    searchMatchActive: '#DAA520'
+  },
+
+  table: {
+    border: palette.border.BORDER0,
+    thead: {
+      color: palette.text.SUBTEXT2
+    },
+    striped: palette.background.SURFACE0,
+    input: {
+      color: palette.text.BASE
+    }
+  },
+
+  plainGrid: {
+    hoverBg: palette.background.CRUST
+  },
+
+  scrollbar: {
+    color: 'rgb(152 151 149)'
+  },
+
+  dragAndDrop: {
+    border: palette.overlay.OVERLAY2, // Using the same gray as focusBorder from input
+    borderStyle: '2px solid',
+    hoverBg: 'rgba(139, 139, 139, 0.05)', // Matching the border color with reduced opacity
+    transition: 'all 0.1s ease'
+  },
+
+  infoTip: {
+    bg: 'white',
+    border: palette.background.SURFACE1,
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'
+  },
+
+  statusBar: {
+    border: '#E9E9E9',
+    color: 'rgb(100, 100, 100)'
+  },
+  console: {
+    bg: '#f8f9fa',
+    headerBg: '#f8f9fa',
+    contentBg: '#ffffff',
+    border: '#dee2e6',
+    titleColor: '#212529',
+    countColor: '#6c757d',
+    buttonColor: '#495057',
+    buttonHoverBg: '#e9ecef',
+    buttonHoverColor: '#212529',
+    messageColor: '#212529',
+    timestampColor: '#6c757d',
+    emptyColor: '#6c757d',
+    logHoverBg: 'rgba(0, 0, 0, 0.03)',
+    resizeHandleHover: '#0d6efd',
+    resizeHandleActive: '#0d6efd',
+    dropdownBg: '#ffffff',
+    dropdownHeaderBg: '#f8f9fa',
+    optionHoverBg: '#f8f9fa',
+    optionLabelColor: '#212529',
+    optionCountColor: '#6c757d',
+    checkboxColor: palette.accents.PRIMARY,
+    scrollbarTrack: '#f8f9fa',
+    scrollbarThumb: '#ced4da',
+    scrollbarThumbHover: '#adb5bd'
+  },
+
+  grpc: {
+    tabNav: {
+      container: {
+        bg: '#f5f5f5'
+      },
+      button: {
+        active: {
+          bg: '#ffffff',
+          color: '#000000'
+        },
+        inactive: {
+          bg: 'transparent',
+          color: '#525252'
+        }
+      }
+    },
+    importPaths: {
+      header: {
+        text: '#838383',
+        button: {
+          color: '#838383',
+          hoverColor: '#343434'
+        }
+      },
+      error: {
+        bg: 'transparent',
+        text: '#B91C1C',
+        link: {
+          color: '#B91C1C',
+          hoverColor: '#dc2626'
+        }
+      },
+      item: {
+        bg: 'transparent',
+        hoverBg: 'rgba(0, 0, 0, 0.05)',
+        text: '#343434',
+        icon: '#838383',
+        checkbox: {
+          color: '#343434'
+        },
+        invalid: {
+          opacity: 0.6,
+          text: '#B91C1C'
+        }
+      },
+      empty: {
+        text: '#838383'
+      },
+      button: {
+        bg: '#e2e6ea',
+        color: '#212529',
+        border: '#dae0e5',
+        hoverBorder: '#696969'
+      }
+    },
+    protoFiles: {
+      header: {
+        text: '#838383',
+        button: {
+          color: '#838383',
+          hoverColor: '#343434'
+        }
+      },
+      error: {
+        bg: 'transparent',
+        text: '#B91C1C',
+        link: {
+          color: '#B91C1C',
+          hoverColor: '#dc2626'
+        }
+      },
+      item: {
+        bg: 'transparent',
+        hoverBg: 'rgba(0, 0, 0, 0.05)',
+        selected: {
+          bg: 'rgba(217, 119, 6, 0.2)',
+          border: '#d97706'
+        },
+        text: '#343434',
+        secondaryText: '#838383',
+        icon: '#838383',
+        invalid: {
+          opacity: 0.6,
+          text: '#B91C1C'
+        }
+      },
+      empty: {
+        text: '#838383'
+      },
+      button: {
+        bg: '#e2e6ea',
+        color: '#212529',
+        border: '#dae0e5',
+        hoverBorder: '#696969'
+      }
+    }
+  },
+  deprecationWarning: {
+    bg: 'rgba(217, 31, 17, 0.1)',
+    border: 'rgba(217, 31, 17, 0.1)',
+    icon: '#D91F11',
+    text: palette.text.BASE
+  },
+
+  preferences: {
+    sidebar: {
+      border: palette.border.BORDER0
+    }
+  },
+
+  examples: {
+    buttonBg: '#D977061A',
+    buttonColor: '#D97706',
+    buttonText: '#fff',
+    buttonIconColor: '#000',
+    border: palette.border.BORDER0,
+    urlBar: {
+      border: palette.border.BORDER0,
+      bg: '#F5F5F5'
+    },
+    table: {
+      thead: {
+        bg: '#f8f9fa',
+        color: '#212529'
+      }
+    },
+    checkbox: {
+      color: '#fff'
+    }
+  },
+
+  app: {
+    collection: {
+      toolbar: {
+        environmentSelector: {
+          bg: palette.utility.WHITE,
+          border: palette.border.BORDER1,
+          icon: palette.accents.PRIMARY,
+          text: palette.text.BASE,
+          caret: palette.overlay.OVERLAY1,
+          separator: palette.border.BORDER1,
+          hoverBg: palette.utility.WHITE,
+          hoverBorder: palette.border.BORDER2,
+
+          noEnvironment: {
+            text: palette.text.SUBTEXT1,
+            bg: palette.utility.WHITE,
+            border: palette.border.BORDER2,
+            hoverBg: palette.utility.WHITE,
+            hoverBorder: palette.overlay.OVERLAY1
+          }
+        },
+        sandboxMode: {
+          safeMode: {
+            bg: 'rgba(4, 120, 87, 0.12)',
+            color: palette.accents.GREEN
+          },
+          developerMode: {
+            bg: 'rgba(204, 145, 73, 0.15)',
+            color: palette.accents.YELLOW
+          }
+        }
+      }
+    }
+  }
+};
+
+export default lightTheme;
diff --git a/packages/bruno-app/src/themes/light/vscode.js b/packages/bruno-app/src/themes/light/vscode.js
new file mode 100644
index 000000000..bb2b85e4b
--- /dev/null
+++ b/packages/bruno-app/src/themes/light/vscode.js
@@ -0,0 +1,638 @@
+// VS Code Light+ Theme for Bruno
+// Based on the default Visual Studio Code Light+ theme
+
+const colors = {
+  // VS Code Light+ Core Colors
+  EDITOR_BG: '#ffffff',
+  SIDEBAR_BG: '#f3f3f3',
+  ACTIVITY_BAR_BG: '#2c2c2c',
+  PANEL_BG: '#ffffff',
+
+  // Text colors
+  TEXT: '#000000',
+  TEXT_SECONDARY: '#1f1f1f',
+  TEXT_MUTED: '#6e7681',
+  TEXT_LINK: '#006ab1',
+
+  // Brand - VS Code blue
+  BRAND: '#007acc',
+  BRAND_HOVER: '#0062a3',
+
+  // Semantic colors
+  GREEN: '#098658',
+  YELLOW: '#795e26',
+  ORANGE: '#a31515',
+  RED: '#cd3131',
+  PURPLE: '#af00db',
+  BLUE: '#0000ff',
+  CYAN: '#008080',
+
+  WHITE: '#ffffff',
+  BLACK: '#000000',
+
+  // Grays (VS Code Light specific)
+  GRAY_1: '#f3f3f3',
+  GRAY_2: '#e8e8e8',
+  GRAY_3: '#dddddd',
+  GRAY_4: '#d4d4d4',
+  GRAY_5: '#c6c6c6',
+  GRAY_6: '#a0a0a0',
+  GRAY_7: '#7a7a7a',
+  GRAY_8: '#5a5a5a',
+
+  // Borders
+  BORDER: '#e5e5e5',
+  BORDER_DARK: '#cecece',
+
+  CODEMIRROR_TOKENS: {
+    DEFINITION: '#267f99',
+    PROPERTY: '#0451a5',
+    STRING: '#a31515',
+    NUMBER: '#098658',
+    ATOM: '#0000ff',
+    VARIABLE: '#001080',
+    KEYWORD: '#af00db',
+    COMMENT: '#008000',
+    OPERATOR: '#000000'
+  }
+};
+
+const vscodeLightTheme = {
+  mode: 'light',
+  brand: colors.BRAND,
+  text: colors.TEXT,
+  textLink: colors.TEXT_LINK,
+  bg: colors.EDITOR_BG,
+
+  accents: {
+    primary: colors.BRAND
+  },
+
+  background: {
+    base: colors.EDITOR_BG,
+    mantle: colors.SIDEBAR_BG,
+    crust: colors.GRAY_2,
+    surface0: colors.GRAY_3,
+    surface1: colors.GRAY_4,
+    surface2: colors.GRAY_5
+  },
+
+  overlay: {
+    overlay2: colors.GRAY_6,
+    overlay1: '#c0c0c0',
+    overlay0: '#d0d0d0'
+  },
+
+  font: {
+    size: {
+      xs: '0.6875rem',
+      sm: '0.75rem',
+      base: '0.8125rem',
+      md: '0.875rem',
+      lg: '1rem',
+      xl: '1.125rem'
+    }
+  },
+
+  shadow: {
+    sm: '0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04)',
+    md: '0 2px 8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05)',
+    lg: '0 2px 12px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05)'
+  },
+
+  border: {
+    radius: {
+      sm: '4px',
+      base: '6px',
+      md: '8px',
+      lg: '10px',
+      xl: '12px'
+    },
+    border2: colors.GRAY_4,
+    border1: colors.BORDER,
+    border0: colors.GRAY_2
+  },
+
+  colors: {
+    text: {
+      white: colors.WHITE,
+      green: colors.GREEN,
+      danger: colors.RED,
+      warning: '#bf8803',
+      muted: colors.TEXT_MUTED,
+      purple: colors.PURPLE,
+      yellow: colors.YELLOW,
+      subtext2: colors.TEXT_SECONDARY,
+      subtext1: colors.TEXT_MUTED,
+      subtext0: colors.GRAY_7
+    },
+    bg: {
+      danger: colors.RED
+    },
+    accent: colors.BRAND
+  },
+
+  input: {
+    bg: colors.WHITE,
+    border: colors.BORDER_DARK,
+    focusBorder: colors.BRAND,
+    placeholder: {
+      color: colors.TEXT_MUTED,
+      opacity: 0.8
+    }
+  },
+
+  sidebar: {
+    color: colors.TEXT,
+    muted: colors.TEXT_MUTED,
+    bg: colors.SIDEBAR_BG,
+    dragbar: {
+      border: colors.BORDER,
+      activeBorder: colors.GRAY_5
+    },
+    search: {
+      border: `1px solid ${colors.BORDER_DARK}`,
+      bg: colors.WHITE
+    },
+    collection: {
+      item: {
+        bg: colors.GRAY_2,
+        hoverBg: colors.GRAY_3,
+        focusBorder: colors.GRAY_5,
+        indentBorder: `solid 1px ${colors.BORDER}`,
+        active: {
+          indentBorder: `solid 1px ${colors.BORDER}`
+        },
+        example: {
+          iconColor: colors.GRAY_7
+        }
+      }
+    },
+    dropdownIcon: {
+      color: colors.TEXT_SECONDARY
+    }
+  },
+
+  dropdown: {
+    color: colors.TEXT,
+    iconColor: colors.TEXT_SECONDARY,
+    bg: colors.WHITE,
+    hoverBg: colors.GRAY_2,
+    shadow: 'rgba(0, 0, 0, 0.16) 0px 6px 12px -2px, rgba(0, 0, 0, 0.1) 0px 3px 7px -3px',
+    separator: colors.BORDER,
+    selectedColor: colors.BRAND,
+    mutedText: colors.TEXT_MUTED
+  },
+
+  workspace: {
+    accent: colors.BRAND,
+    border: colors.BORDER,
+    button: {
+      bg: colors.GRAY_2
+    }
+  },
+
+  request: {
+    methods: {
+      get: colors.GREEN,
+      post: colors.YELLOW,
+      put: '#d18616',
+      delete: colors.RED,
+      patch: '#d18616',
+      options: colors.GRAY_7,
+      head: colors.BLUE
+    },
+    grpc: colors.CYAN,
+    ws: '#795e26',
+    gql: colors.PURPLE
+  },
+
+  requestTabPanel: {
+    url: {
+      bg: colors.WHITE,
+      icon: colors.TEXT_SECONDARY,
+      iconDanger: colors.RED,
+      border: `solid 1px ${colors.BORDER}`
+    },
+    dragbar: {
+      border: colors.BORDER,
+      activeBorder: colors.BRAND
+    },
+    responseStatus: colors.TEXT_SECONDARY,
+    responseOk: colors.GREEN,
+    responseError: colors.RED,
+    responsePending: colors.BRAND,
+    responseOverlayBg: 'rgba(255, 255, 255, 0.6)',
+    card: {
+      bg: colors.WHITE,
+      border: colors.BORDER,
+      hr: colors.BORDER
+    },
+    graphqlDocsExplorer: {
+      bg: colors.WHITE,
+      color: colors.TEXT
+    }
+  },
+
+  notifications: {
+    bg: colors.WHITE,
+    list: {
+      bg: colors.GRAY_2,
+      borderRight: 'transparent',
+      borderBottom: colors.BORDER,
+      hoverBg: colors.GRAY_3,
+      active: {
+        border: colors.BRAND,
+        bg: colors.GRAY_3,
+        hoverBg: colors.GRAY_3
+      }
+    }
+  },
+
+  modal: {
+    title: {
+      color: colors.TEXT_SECONDARY,
+      bg: colors.GRAY_1
+    },
+    body: {
+      color: colors.TEXT,
+      bg: colors.WHITE
+    },
+    input: {
+      bg: colors.WHITE,
+      border: colors.BORDER_DARK,
+      focusBorder: colors.BRAND
+    },
+    backdrop: {
+      opacity: 0.4
+    }
+  },
+
+  button: {
+    secondary: {
+      color: colors.TEXT,
+      bg: colors.GRAY_2,
+      border: colors.GRAY_4,
+      hoverBorder: colors.GRAY_5
+    },
+    close: {
+      color: colors.TEXT,
+      bg: colors.WHITE,
+      border: colors.WHITE,
+      hoverBorder: ''
+    },
+    disabled: {
+      color: colors.GRAY_6,
+      bg: colors.GRAY_2,
+      border: colors.BORDER
+    },
+    danger: {
+      color: colors.WHITE,
+      bg: colors.RED,
+      border: colors.RED
+    }
+  },
+
+  button2: {
+    color: {
+      primary: {
+        bg: colors.BRAND,
+        text: colors.WHITE,
+        border: colors.BRAND
+      },
+      secondary: {
+        bg: colors.GRAY_3,
+        text: colors.TEXT,
+        border: colors.GRAY_4
+      },
+      success: {
+        bg: colors.GREEN,
+        text: colors.WHITE,
+        border: colors.GREEN
+      },
+      warning: {
+        bg: '#bf8803',
+        text: colors.WHITE,
+        border: '#bf8803'
+      },
+      danger: {
+        bg: colors.RED,
+        text: colors.WHITE,
+        border: colors.RED
+      }
+    }
+  },
+
+  tabs: {
+    marginRight: '1.2rem',
+    active: {
+      fontWeight: 400,
+      color: colors.TEXT,
+      border: colors.BRAND
+    },
+    secondary: {
+      active: {
+        bg: colors.WHITE,
+        color: colors.TEXT
+      },
+      inactive: {
+        bg: colors.GRAY_2,
+        color: colors.TEXT_MUTED
+      }
+    }
+  },
+
+  requestTabs: {
+    color: colors.TEXT,
+    bg: colors.SIDEBAR_BG,
+    bottomBorder: colors.BORDER,
+    icon: {
+      color: colors.GRAY_6,
+      hoverColor: colors.TEXT_SECONDARY,
+      hoverBg: colors.GRAY_3
+    },
+    example: {
+      iconColor: colors.GRAY_7
+    },
+    shortTab: {
+      color: colors.TEXT_SECONDARY,
+      bg: colors.WHITE,
+      hoverColor: colors.TEXT_SECONDARY,
+      hoverBg: colors.GRAY_2
+    }
+  },
+
+  codemirror: {
+    bg: colors.WHITE,
+    border: colors.WHITE,
+    placeholder: {
+      color: colors.TEXT_MUTED,
+      opacity: 0.75
+    },
+    gutter: {
+      bg: colors.WHITE
+    },
+    variable: {
+      valid: colors.GREEN,
+      invalid: colors.RED,
+      prompt: colors.BRAND,
+      info: {
+        color: colors.TEXT,
+        bg: colors.WHITE,
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.3)',
+        editorBg: colors.GRAY_1,
+        iconColor: colors.GRAY_6,
+        editorBorder: colors.BORDER,
+        editorFocusBorder: colors.GRAY_6,
+        editableDisplayHoverBg: 'rgba(0, 0, 0, 0.02)',
+        border: colors.BORDER
+      }
+    },
+    tokens: {
+      definition: colors.CODEMIRROR_TOKENS.DEFINITION,
+      property: colors.CODEMIRROR_TOKENS.PROPERTY,
+      string: colors.CODEMIRROR_TOKENS.STRING,
+      number: colors.CODEMIRROR_TOKENS.NUMBER,
+      atom: colors.CODEMIRROR_TOKENS.ATOM,
+      variable: colors.CODEMIRROR_TOKENS.VARIABLE,
+      keyword: colors.CODEMIRROR_TOKENS.KEYWORD,
+      comment: colors.CODEMIRROR_TOKENS.COMMENT,
+      operator: colors.CODEMIRROR_TOKENS.OPERATOR
+    },
+    searchLineHighlightCurrent: 'rgba(255, 255, 0, 0.2)',
+    searchMatch: '#a8ac94',
+    searchMatchActive: '#f8e8a6'
+  },
+
+  table: {
+    border: colors.BORDER,
+    thead: {
+      color: colors.TEXT_SECONDARY
+    },
+    striped: colors.GRAY_1,
+    input: {
+      color: colors.BLACK
+    }
+  },
+
+  plainGrid: {
+    hoverBg: colors.GRAY_1
+  },
+
+  scrollbar: {
+    color: colors.GRAY_5
+  },
+
+  dragAndDrop: {
+    border: colors.BRAND,
+    borderStyle: '2px solid',
+    hoverBg: 'rgba(0, 122, 204, 0.08)',
+    transition: 'all 0.1s ease'
+  },
+
+  infoTip: {
+    bg: colors.WHITE,
+    border: colors.BORDER,
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'
+  },
+
+  statusBar: {
+    border: colors.BORDER,
+    color: colors.TEXT_MUTED
+  },
+
+  console: {
+    bg: colors.GRAY_1,
+    headerBg: colors.GRAY_1,
+    contentBg: colors.WHITE,
+    border: colors.BORDER,
+    titleColor: colors.TEXT,
+    countColor: colors.TEXT_MUTED,
+    buttonColor: colors.TEXT_SECONDARY,
+    buttonHoverBg: colors.GRAY_2,
+    buttonHoverColor: colors.TEXT,
+    messageColor: colors.TEXT,
+    timestampColor: colors.TEXT_MUTED,
+    emptyColor: colors.TEXT_MUTED,
+    logHoverBg: 'rgba(0, 0, 0, 0.03)',
+    resizeHandleHover: colors.BRAND,
+    resizeHandleActive: colors.BRAND,
+    dropdownBg: colors.WHITE,
+    dropdownHeaderBg: colors.GRAY_1,
+    optionHoverBg: colors.GRAY_1,
+    optionLabelColor: colors.TEXT,
+    optionCountColor: colors.TEXT_MUTED,
+    checkboxColor: colors.BRAND,
+    scrollbarTrack: colors.GRAY_1,
+    scrollbarThumb: colors.GRAY_4,
+    scrollbarThumbHover: colors.GRAY_5
+  },
+
+  grpc: {
+    tabNav: {
+      container: {
+        bg: colors.GRAY_1
+      },
+      button: {
+        active: {
+          bg: colors.WHITE,
+          color: colors.BLACK
+        },
+        inactive: {
+          bg: 'transparent',
+          color: colors.TEXT_SECONDARY
+        }
+      }
+    },
+    importPaths: {
+      header: {
+        text: colors.TEXT_MUTED,
+        button: {
+          color: colors.TEXT_MUTED,
+          hoverColor: colors.TEXT
+        }
+      },
+      error: {
+        bg: 'transparent',
+        text: colors.RED,
+        link: {
+          color: colors.RED,
+          hoverColor: '#e03e3e'
+        }
+      },
+      item: {
+        bg: 'transparent',
+        hoverBg: 'rgba(0, 0, 0, 0.05)',
+        text: colors.TEXT,
+        icon: colors.TEXT_MUTED,
+        checkbox: {
+          color: colors.TEXT
+        },
+        invalid: {
+          opacity: 0.6,
+          text: colors.RED
+        }
+      },
+      empty: {
+        text: colors.TEXT_MUTED
+      },
+      button: {
+        bg: colors.GRAY_2,
+        color: colors.TEXT,
+        border: colors.GRAY_4,
+        hoverBorder: colors.GRAY_5
+      }
+    },
+    protoFiles: {
+      header: {
+        text: colors.TEXT_MUTED,
+        button: {
+          color: colors.TEXT_MUTED,
+          hoverColor: colors.TEXT
+        }
+      },
+      error: {
+        bg: 'transparent',
+        text: colors.RED,
+        link: {
+          color: colors.RED,
+          hoverColor: '#e03e3e'
+        }
+      },
+      item: {
+        bg: 'transparent',
+        hoverBg: 'rgba(0, 0, 0, 0.05)',
+        selected: {
+          bg: 'rgba(0, 122, 204, 0.15)',
+          border: colors.BRAND
+        },
+        text: colors.TEXT,
+        secondaryText: colors.TEXT_MUTED,
+        icon: colors.TEXT_MUTED,
+        invalid: {
+          opacity: 0.6,
+          text: colors.RED
+        }
+      },
+      empty: {
+        text: colors.TEXT_MUTED
+      },
+      button: {
+        bg: colors.GRAY_2,
+        color: colors.TEXT,
+        border: colors.GRAY_4,
+        hoverBorder: colors.GRAY_5
+      }
+    }
+  },
+
+  deprecationWarning: {
+    bg: 'rgba(205, 49, 49, 0.1)',
+    border: 'rgba(205, 49, 49, 0.15)',
+    icon: colors.RED,
+    text: colors.TEXT
+  },
+
+  preferences: {
+    sidebar: {
+      border: colors.BORDER
+    }
+  },
+
+  examples: {
+    buttonBg: 'rgba(0, 122, 204, 0.1)',
+    buttonColor: colors.BRAND,
+    buttonText: colors.WHITE,
+    buttonIconColor: colors.BLACK,
+    border: colors.BORDER,
+    urlBar: {
+      border: colors.BORDER,
+      bg: colors.GRAY_1
+    },
+    table: {
+      thead: {
+        bg: colors.GRAY_1,
+        color: colors.TEXT
+      }
+    },
+    checkbox: {
+      color: colors.WHITE
+    }
+  },
+
+  app: {
+    collection: {
+      toolbar: {
+        environmentSelector: {
+          bg: colors.WHITE,
+          border: colors.BORDER,
+          icon: colors.BRAND,
+          text: colors.TEXT,
+          caret: colors.GRAY_6,
+          separator: colors.BORDER,
+          hoverBg: colors.WHITE,
+          hoverBorder: colors.GRAY_5,
+          noEnvironment: {
+            text: colors.TEXT_MUTED,
+            bg: colors.WHITE,
+            border: colors.BORDER,
+            hoverBg: colors.WHITE,
+            hoverBorder: colors.GRAY_5
+          }
+        },
+        sandboxMode: {
+          safeMode: {
+            bg: 'rgba(9, 134, 88, 0.12)',
+            color: colors.GREEN
+          },
+          developerMode: {
+            bg: 'rgba(121, 94, 38, 0.12)',
+            color: colors.YELLOW
+          }
+        }
+      }
+    }
+  }
+};
+
+export default vscodeLightTheme;
diff --git a/packages/bruno-app/src/themes/schema/index.js b/packages/bruno-app/src/themes/schema/index.js
new file mode 100644
index 000000000..eb886702f
--- /dev/null
+++ b/packages/bruno-app/src/themes/schema/index.js
@@ -0,0 +1,3 @@
+import { ossSchema } from './oss';
+
+export default ossSchema;
diff --git a/packages/bruno-app/src/themes/schema/oss.js b/packages/bruno-app/src/themes/schema/oss.js
new file mode 100644
index 000000000..a1815e21c
--- /dev/null
+++ b/packages/bruno-app/src/themes/schema/oss.js
@@ -0,0 +1,1173 @@
+export const ossSchema = {
+  type: 'object',
+  properties: {
+    mode: { type: 'string', description: 'Theme mode', enum: ['light', 'dark'] },
+    brand: { type: 'string', description: 'Primary brand color' },
+    text: { type: 'string', description: 'Default text color' },
+    textLink: { type: 'string', description: 'Link text color' },
+    bg: { type: 'string', description: 'Background color' },
+
+    accents: {
+      type: 'object',
+      properties: {
+        primary: { type: 'string', description: 'Primary accent color' }
+      },
+      required: ['primary'],
+      additionalProperties: false
+    },
+
+    background: {
+      type: 'object',
+      properties: {
+        base: { type: 'string', description: 'App canvas background' },
+        mantle: { type: 'string', description: 'Sidebars background' },
+        crust: { type: 'string', description: 'Panels background' },
+        surface0: { type: 'string', description: 'Cards background' },
+        surface1: { type: 'string', description: 'Raised elements background' },
+        surface2: { type: 'string', description: 'Borders / dividers' }
+      },
+      required: ['base', 'mantle', 'crust', 'surface0', 'surface1', 'surface2'],
+      additionalProperties: false
+    },
+
+    overlay: {
+      type: 'object',
+      properties: {
+        overlay2: { type: 'string', description: 'Overlay level 2' },
+        overlay1: { type: 'string', description: 'Overlay level 1' },
+        overlay0: { type: 'string', description: 'Overlay level 0' }
+      },
+      required: ['overlay2', 'overlay1', 'overlay0'],
+      additionalProperties: false
+    },
+
+    font: {
+      type: 'object',
+      properties: {
+        size: {
+          type: 'object',
+          properties: {
+            xs: { type: 'string', description: 'Extra small font size (11px)' },
+            sm: { type: 'string', description: 'Small font size (12px)' },
+            base: { type: 'string', description: 'Base font size (13px)' },
+            md: { type: 'string', description: 'Medium font size (14px)' },
+            lg: { type: 'string', description: 'Large font size (16px)' },
+            xl: { type: 'string', description: 'Extra large font size (18px)' }
+          },
+          required: ['xs', 'sm', 'base', 'md', 'lg', 'xl'],
+          additionalProperties: false
+        }
+      },
+      required: ['size'],
+      additionalProperties: false
+    },
+
+    shadow: {
+      type: 'object',
+      properties: {
+        sm: { type: 'string', description: 'Small shadow' },
+        md: { type: 'string', description: 'Medium shadow' },
+        lg: { type: 'string', description: 'Large shadow' }
+      },
+      required: ['sm', 'md', 'lg'],
+      additionalProperties: false
+    },
+
+    border: {
+      type: 'object',
+      properties: {
+        radius: {
+          type: 'object',
+          properties: {
+            sm: { type: 'string' },
+            base: { type: 'string' },
+            md: { type: 'string' },
+            lg: { type: 'string' },
+            xl: { type: 'string' }
+          },
+          required: ['sm', 'base', 'md', 'lg', 'xl'],
+          additionalProperties: false
+        },
+        border2: { type: 'string' },
+        border1: { type: 'string' },
+        border0: { type: 'string' }
+      },
+      required: ['radius', 'border2', 'border1', 'border0'],
+      additionalProperties: false
+    },
+
+    colors: {
+      type: 'object',
+      properties: {
+        text: {
+          type: 'object',
+          properties: {
+            white: { type: 'string' },
+            green: { type: 'string' },
+            danger: { type: 'string' },
+            warning: { type: 'string' },
+            muted: { type: 'string' },
+            purple: { type: 'string' },
+            yellow: { type: 'string' },
+            subtext2: { type: 'string' },
+            subtext1: { type: 'string' },
+            subtext0: { type: 'string' }
+          },
+          required: ['white', 'green', 'danger', 'warning', 'muted', 'purple', 'yellow', 'subtext2', 'subtext1', 'subtext0'],
+          additionalProperties: false
+        },
+        bg: {
+          type: 'object',
+          properties: {
+            danger: { type: 'string' }
+          },
+          required: ['danger'],
+          additionalProperties: false
+        },
+        accent: { type: 'string' }
+      },
+      required: ['text', 'bg', 'accent'],
+      additionalProperties: false
+    },
+
+    input: {
+      type: 'object',
+      properties: {
+        bg: { type: 'string' },
+        border: { type: 'string' },
+        focusBorder: { type: 'string' },
+        placeholder: {
+          type: 'object',
+          properties: {
+            color: { type: 'string' },
+            opacity: { type: 'number' }
+          },
+          required: ['color', 'opacity'],
+          additionalProperties: false
+        }
+      },
+      required: ['bg', 'border', 'focusBorder', 'placeholder'],
+      additionalProperties: false
+    },
+
+    sidebar: {
+      type: 'object',
+      properties: {
+        color: { type: 'string' },
+        muted: { type: 'string' },
+        bg: { type: 'string' },
+        dragbar: {
+          type: 'object',
+          properties: {
+            border: { type: 'string' },
+            activeBorder: { type: 'string' }
+          },
+          required: ['border', 'activeBorder'],
+          additionalProperties: false
+        },
+        search: {
+          type: 'object',
+          properties: {
+            border: { type: 'string' },
+            bg: { type: 'string' }
+          },
+          required: ['border', 'bg'],
+          additionalProperties: false
+        },
+        collection: {
+          type: 'object',
+          properties: {
+            item: {
+              type: 'object',
+              properties: {
+                bg: { type: 'string' },
+                hoverBg: { type: 'string' },
+                focusBorder: { type: 'string' },
+                indentBorder: { type: 'string' },
+                active: {
+                  type: 'object',
+                  properties: {
+                    indentBorder: { type: 'string' }
+                  },
+                  required: ['indentBorder'],
+                  additionalProperties: false
+                },
+                example: {
+                  type: 'object',
+                  properties: {
+                    iconColor: { type: 'string' }
+                  },
+                  required: ['iconColor'],
+                  additionalProperties: false
+                }
+              },
+              required: ['bg', 'hoverBg', 'focusBorder', 'indentBorder', 'active', 'example'],
+              additionalProperties: false
+            }
+          },
+          required: ['item'],
+          additionalProperties: false
+        },
+        dropdownIcon: {
+          type: 'object',
+          properties: {
+            color: { type: 'string' }
+          },
+          required: ['color'],
+          additionalProperties: false
+        }
+      },
+      required: ['color', 'muted', 'bg', 'dragbar', 'search', 'collection', 'dropdownIcon'],
+      additionalProperties: false
+    },
+
+    dropdown: {
+      type: 'object',
+      properties: {
+        color: { type: 'string' },
+        iconColor: { type: 'string' },
+        bg: { type: 'string' },
+        hoverBg: { type: 'string' },
+        shadow: { type: 'string' },
+        separator: { type: 'string' },
+        selectedColor: { type: 'string' },
+        mutedText: { type: 'string' }
+      },
+      required: ['color', 'iconColor', 'bg', 'hoverBg', 'shadow', 'separator', 'selectedColor', 'mutedText'],
+      additionalProperties: false
+    },
+
+    workspace: {
+      type: 'object',
+      properties: {
+        accent: { type: 'string' },
+        border: { type: 'string' },
+        button: {
+          type: 'object',
+          properties: {
+            bg: { type: 'string' }
+          },
+          required: ['bg'],
+          additionalProperties: false
+        }
+      },
+      required: ['accent', 'border', 'button'],
+      additionalProperties: false
+    },
+
+    request: {
+      type: 'object',
+      properties: {
+        methods: {
+          type: 'object',
+          properties: {
+            get: { type: 'string' },
+            post: { type: 'string' },
+            put: { type: 'string' },
+            delete: { type: 'string' },
+            patch: { type: 'string' },
+            options: { type: 'string' },
+            head: { type: 'string' }
+          },
+          required: ['get', 'post', 'put', 'delete', 'patch', 'options', 'head'],
+          additionalProperties: false
+        },
+        grpc: { type: 'string' },
+        ws: { type: 'string' },
+        gql: { type: 'string' }
+      },
+      required: ['methods', 'grpc', 'ws', 'gql'],
+      additionalProperties: false
+    },
+
+    requestTabPanel: {
+      type: 'object',
+      properties: {
+        url: {
+          type: 'object',
+          properties: {
+            bg: { type: 'string' },
+            icon: { type: 'string' },
+            iconDanger: { type: 'string' },
+            border: { type: 'string' }
+          },
+          required: ['bg', 'icon', 'iconDanger', 'border'],
+          additionalProperties: false
+        },
+        dragbar: {
+          type: 'object',
+          properties: {
+            border: { type: 'string' },
+            activeBorder: { type: 'string' }
+          },
+          required: ['border', 'activeBorder'],
+          additionalProperties: false
+        },
+        responseStatus: { type: 'string' },
+        responseOk: { type: 'string' },
+        responseError: { type: 'string' },
+        responsePending: { type: 'string' },
+        responseOverlayBg: { type: 'string' },
+        card: {
+          type: 'object',
+          properties: {
+            bg: { type: 'string' },
+            border: { type: 'string' },
+            hr: { type: 'string' }
+          },
+          required: ['bg', 'border', 'hr'],
+          additionalProperties: false
+        },
+        graphqlDocsExplorer: {
+          type: 'object',
+          properties: {
+            bg: { type: 'string' },
+            color: { type: 'string' }
+          },
+          required: ['bg', 'color'],
+          additionalProperties: false
+        }
+      },
+      required: ['url', 'dragbar', 'responseStatus', 'responseOk', 'responseError', 'responsePending', 'responseOverlayBg', 'card', 'graphqlDocsExplorer'],
+      additionalProperties: false
+    },
+
+    notifications: {
+      type: 'object',
+      properties: {
+        bg: { type: 'string' },
+        list: {
+          type: 'object',
+          properties: {
+            bg: { type: 'string' },
+            borderRight: { type: 'string' },
+            borderBottom: { type: 'string' },
+            hoverBg: { type: 'string' },
+            active: {
+              type: 'object',
+              properties: {
+                border: { type: 'string' },
+                bg: { type: 'string' },
+                hoverBg: { type: 'string' }
+              },
+              required: ['border', 'bg', 'hoverBg'],
+              additionalProperties: false
+            }
+          },
+          required: ['bg', 'borderRight', 'borderBottom', 'hoverBg', 'active'],
+          additionalProperties: false
+        }
+      },
+      required: ['bg', 'list'],
+      additionalProperties: false
+    },
+
+    modal: {
+      type: 'object',
+      properties: {
+        title: {
+          type: 'object',
+          properties: {
+            color: { type: 'string' },
+            bg: { type: 'string' }
+          },
+          required: ['color', 'bg'],
+          additionalProperties: false
+        },
+        body: {
+          type: 'object',
+          properties: {
+            color: { type: 'string' },
+            bg: { type: 'string' }
+          },
+          required: ['color', 'bg'],
+          additionalProperties: false
+        },
+        input: {
+          type: 'object',
+          properties: {
+            bg: { type: 'string' },
+            border: { type: 'string' },
+            focusBorder: { type: 'string' }
+          },
+          required: ['bg', 'border', 'focusBorder'],
+          additionalProperties: false
+        },
+        backdrop: {
+          type: 'object',
+          properties: {
+            opacity: { type: 'number' }
+          },
+          required: ['opacity'],
+          additionalProperties: false
+        }
+      },
+      required: ['title', 'body', 'input', 'backdrop'],
+      additionalProperties: false
+    },
+
+    button: {
+      type: 'object',
+      properties: {
+        secondary: {
+          type: 'object',
+          properties: {
+            color: { type: 'string' },
+            bg: { type: 'string' },
+            border: { type: 'string' },
+            hoverBorder: { type: 'string' }
+          },
+          required: ['color', 'bg', 'border', 'hoverBorder'],
+          additionalProperties: false
+        },
+        close: {
+          type: 'object',
+          properties: {
+            color: { type: 'string' },
+            bg: { type: 'string' },
+            border: { type: 'string' },
+            hoverBorder: { type: 'string' }
+          },
+          required: ['color', 'bg', 'border', 'hoverBorder'],
+          additionalProperties: false
+        },
+        disabled: {
+          type: 'object',
+          properties: {
+            color: { type: 'string' },
+            bg: { type: 'string' },
+            border: { type: 'string' }
+          },
+          required: ['color', 'bg', 'border'],
+          additionalProperties: false
+        },
+        danger: {
+          type: 'object',
+          properties: {
+            color: { type: 'string' },
+            bg: { type: 'string' },
+            border: { type: 'string' }
+          },
+          required: ['color', 'bg', 'border'],
+          additionalProperties: false
+        }
+      },
+      required: ['secondary', 'close', 'disabled', 'danger'],
+      additionalProperties: false
+    },
+
+    button2: {
+      type: 'object',
+      properties: {
+        color: {
+          type: 'object',
+          properties: {
+            primary: {
+              type: 'object',
+              properties: {
+                bg: { type: 'string' },
+                text: { type: 'string' },
+                border: { type: 'string' }
+              },
+              required: ['bg', 'text', 'border'],
+              additionalProperties: false
+            },
+            secondary: {
+              type: 'object',
+              properties: {
+                bg: { type: 'string' },
+                text: { type: 'string' },
+                border: { type: 'string' }
+              },
+              required: ['bg', 'text', 'border'],
+              additionalProperties: false
+            },
+            success: {
+              type: 'object',
+              properties: {
+                bg: { type: 'string' },
+                text: { type: 'string' },
+                border: { type: 'string' }
+              },
+              required: ['bg', 'text', 'border'],
+              additionalProperties: false
+            },
+            warning: {
+              type: 'object',
+              properties: {
+                bg: { type: 'string' },
+                text: { type: 'string' },
+                border: { type: 'string' }
+              },
+              required: ['bg', 'text', 'border'],
+              additionalProperties: false
+            },
+            danger: {
+              type: 'object',
+              properties: {
+                bg: { type: 'string' },
+                text: { type: 'string' },
+                border: { type: 'string' }
+              },
+              required: ['bg', 'text', 'border'],
+              additionalProperties: false
+            }
+          },
+          required: ['primary', 'secondary', 'success', 'warning', 'danger'],
+          additionalProperties: false
+        }
+      },
+      required: ['color'],
+      additionalProperties: false
+    },
+
+    tabs: {
+      type: 'object',
+      properties: {
+        marginRight: { type: 'string' },
+        active: {
+          type: 'object',
+          properties: {
+            fontWeight: { type: 'number' },
+            color: { type: 'string' },
+            border: { type: 'string' }
+          },
+          required: ['fontWeight', 'color', 'border'],
+          additionalProperties: false
+        },
+        secondary: {
+          type: 'object',
+          properties: {
+            active: {
+              type: 'object',
+              properties: {
+                bg: { type: 'string' },
+                color: { type: 'string' }
+              },
+              required: ['bg', 'color'],
+              additionalProperties: false
+            },
+            inactive: {
+              type: 'object',
+              properties: {
+                bg: { type: 'string' },
+                color: { type: 'string' }
+              },
+              required: ['bg', 'color'],
+              additionalProperties: false
+            }
+          },
+          required: ['active', 'inactive'],
+          additionalProperties: false
+        }
+      },
+      required: ['marginRight', 'active', 'secondary'],
+      additionalProperties: false
+    },
+
+    requestTabs: {
+      type: 'object',
+      properties: {
+        color: { type: 'string' },
+        bg: { type: 'string' },
+        bottomBorder: { type: 'string' },
+        icon: {
+          type: 'object',
+          properties: {
+            color: { type: 'string' },
+            hoverColor: { type: 'string' },
+            hoverBg: { type: 'string' }
+          },
+          required: ['color', 'hoverColor', 'hoverBg'],
+          additionalProperties: false
+        },
+        example: {
+          type: 'object',
+          properties: {
+            iconColor: { type: 'string' }
+          },
+          required: ['iconColor'],
+          additionalProperties: false
+        },
+        shortTab: {
+          type: 'object',
+          properties: {
+            color: { type: 'string' },
+            bg: { type: 'string' },
+            hoverColor: { type: 'string' },
+            hoverBg: { type: 'string' }
+          },
+          required: ['color', 'bg', 'hoverColor', 'hoverBg'],
+          additionalProperties: false
+        }
+      },
+      required: ['color', 'bg', 'bottomBorder', 'icon', 'example', 'shortTab'],
+      additionalProperties: false
+    },
+
+    codemirror: {
+      type: 'object',
+      properties: {
+        bg: { type: 'string' },
+        border: { type: 'string' },
+        placeholder: {
+          type: 'object',
+          properties: {
+            color: { type: 'string' },
+            opacity: { type: 'number' }
+          },
+          required: ['color', 'opacity'],
+          additionalProperties: false
+        },
+        gutter: {
+          type: 'object',
+          properties: {
+            bg: { type: 'string' }
+          },
+          required: ['bg'],
+          additionalProperties: false
+        },
+        variable: {
+          type: 'object',
+          properties: {
+            valid: { type: 'string' },
+            invalid: { type: 'string' },
+            prompt: { type: 'string' },
+            info: {
+              type: 'object',
+              properties: {
+                color: { type: 'string' },
+                bg: { type: 'string' },
+                boxShadow: { type: 'string' },
+                editorBg: { type: 'string' },
+                iconColor: { type: 'string' },
+                editorBorder: { type: 'string' },
+                editorFocusBorder: { type: 'string' },
+                editableDisplayHoverBg: { type: 'string' },
+                border: { type: 'string' }
+              },
+              required: ['color', 'bg', 'boxShadow', 'editorBg', 'iconColor', 'editorBorder', 'editorFocusBorder', 'editableDisplayHoverBg', 'border'],
+              additionalProperties: false
+            }
+          },
+          required: ['valid', 'invalid', 'prompt', 'info'],
+          additionalProperties: false
+        },
+        tokens: {
+          type: 'object',
+          properties: {
+            definition: { type: 'string' },
+            property: { type: 'string' },
+            string: { type: 'string' },
+            number: { type: 'string' },
+            atom: { type: 'string' },
+            variable: { type: 'string' },
+            keyword: { type: 'string' },
+            comment: { type: 'string' },
+            operator: { type: 'string' }
+          },
+          required: ['definition', 'property', 'string', 'number', 'atom', 'variable', 'keyword', 'comment', 'operator'],
+          additionalProperties: false
+        },
+        searchLineHighlightCurrent: { type: 'string' },
+        searchMatch: { type: 'string' },
+        searchMatchActive: { type: 'string' }
+      },
+      required: ['bg', 'border', 'placeholder', 'gutter', 'variable', 'tokens', 'searchLineHighlightCurrent', 'searchMatch', 'searchMatchActive'],
+      additionalProperties: false
+    },
+
+    table: {
+      type: 'object',
+      properties: {
+        border: { type: 'string' },
+        thead: {
+          type: 'object',
+          properties: {
+            color: { type: 'string' }
+          },
+          required: ['color'],
+          additionalProperties: false
+        },
+        striped: { type: 'string' },
+        input: {
+          type: 'object',
+          properties: {
+            color: { type: 'string' }
+          },
+          required: ['color'],
+          additionalProperties: false
+        }
+      },
+      required: ['border', 'thead', 'striped', 'input'],
+      additionalProperties: false
+    },
+
+    plainGrid: {
+      type: 'object',
+      properties: {
+        hoverBg: { type: 'string' }
+      },
+      required: ['hoverBg'],
+      additionalProperties: false
+    },
+
+    scrollbar: {
+      type: 'object',
+      properties: {
+        color: { type: 'string' }
+      },
+      required: ['color'],
+      additionalProperties: false
+    },
+
+    dragAndDrop: {
+      type: 'object',
+      properties: {
+        border: { type: 'string' },
+        borderStyle: { type: 'string' },
+        hoverBg: { type: 'string' },
+        transition: { type: 'string' }
+      },
+      required: ['border', 'borderStyle', 'hoverBg', 'transition'],
+      additionalProperties: false
+    },
+
+    infoTip: {
+      type: 'object',
+      properties: {
+        bg: { type: 'string' },
+        border: { type: 'string' },
+        boxShadow: { type: 'string' }
+      },
+      required: ['bg', 'border', 'boxShadow'],
+      additionalProperties: false
+    },
+
+    statusBar: {
+      type: 'object',
+      properties: {
+        border: { type: 'string' },
+        color: { type: 'string' }
+      },
+      required: ['border', 'color'],
+      additionalProperties: false
+    },
+
+    console: {
+      type: 'object',
+      properties: {
+        bg: { type: 'string' },
+        headerBg: { type: 'string' },
+        contentBg: { type: 'string' },
+        border: { type: 'string' },
+        titleColor: { type: 'string' },
+        countColor: { type: 'string' },
+        buttonColor: { type: 'string' },
+        buttonHoverBg: { type: 'string' },
+        buttonHoverColor: { type: 'string' },
+        messageColor: { type: 'string' },
+        timestampColor: { type: 'string' },
+        emptyColor: { type: 'string' },
+        logHoverBg: { type: 'string' },
+        resizeHandleHover: { type: 'string' },
+        resizeHandleActive: { type: 'string' },
+        dropdownBg: { type: 'string' },
+        dropdownHeaderBg: { type: 'string' },
+        optionHoverBg: { type: 'string' },
+        optionLabelColor: { type: 'string' },
+        optionCountColor: { type: 'string' },
+        checkboxColor: { type: 'string' },
+        scrollbarTrack: { type: 'string' },
+        scrollbarThumb: { type: 'string' },
+        scrollbarThumbHover: { type: 'string' }
+      },
+      required: ['bg', 'headerBg', 'contentBg', 'border', 'titleColor', 'countColor', 'buttonColor', 'buttonHoverBg', 'buttonHoverColor', 'messageColor', 'timestampColor', 'emptyColor', 'logHoverBg', 'resizeHandleHover', 'resizeHandleActive', 'dropdownBg', 'dropdownHeaderBg', 'optionHoverBg', 'optionLabelColor', 'optionCountColor', 'checkboxColor', 'scrollbarTrack', 'scrollbarThumb', 'scrollbarThumbHover'],
+      additionalProperties: false
+    },
+
+    grpc: {
+      type: 'object',
+      properties: {
+        tabNav: {
+          type: 'object',
+          properties: {
+            container: {
+              type: 'object',
+              properties: {
+                bg: { type: 'string' }
+              },
+              required: ['bg'],
+              additionalProperties: false
+            },
+            button: {
+              type: 'object',
+              properties: {
+                active: {
+                  type: 'object',
+                  properties: {
+                    bg: { type: 'string' },
+                    color: { type: 'string' }
+                  },
+                  required: ['bg', 'color'],
+                  additionalProperties: false
+                },
+                inactive: {
+                  type: 'object',
+                  properties: {
+                    bg: { type: 'string' },
+                    color: { type: 'string' }
+                  },
+                  required: ['bg', 'color'],
+                  additionalProperties: false
+                }
+              },
+              required: ['active', 'inactive'],
+              additionalProperties: false
+            }
+          },
+          required: ['container', 'button'],
+          additionalProperties: false
+        },
+        importPaths: {
+          type: 'object',
+          properties: {
+            header: {
+              type: 'object',
+              properties: {
+                text: { type: 'string' },
+                button: {
+                  type: 'object',
+                  properties: {
+                    color: { type: 'string' },
+                    hoverColor: { type: 'string' }
+                  },
+                  required: ['color', 'hoverColor'],
+                  additionalProperties: false
+                }
+              },
+              required: ['text', 'button'],
+              additionalProperties: false
+            },
+            error: {
+              type: 'object',
+              properties: {
+                bg: { type: 'string' },
+                text: { type: 'string' },
+                link: {
+                  type: 'object',
+                  properties: {
+                    color: { type: 'string' },
+                    hoverColor: { type: 'string' }
+                  },
+                  required: ['color', 'hoverColor'],
+                  additionalProperties: false
+                }
+              },
+              required: ['bg', 'text', 'link'],
+              additionalProperties: false
+            },
+            item: {
+              type: 'object',
+              properties: {
+                bg: { type: 'string' },
+                hoverBg: { type: 'string' },
+                text: { type: 'string' },
+                icon: { type: 'string' },
+                checkbox: {
+                  type: 'object',
+                  properties: {
+                    color: { type: 'string' }
+                  },
+                  required: ['color'],
+                  additionalProperties: false
+                },
+                invalid: {
+                  type: 'object',
+                  properties: {
+                    opacity: { type: 'number' },
+                    text: { type: 'string' }
+                  },
+                  required: ['opacity', 'text'],
+                  additionalProperties: false
+                }
+              },
+              required: ['bg', 'hoverBg', 'text', 'icon', 'checkbox', 'invalid'],
+              additionalProperties: false
+            },
+            empty: {
+              type: 'object',
+              properties: {
+                text: { type: 'string' }
+              },
+              required: ['text'],
+              additionalProperties: false
+            },
+            button: {
+              type: 'object',
+              properties: {
+                bg: { type: 'string' },
+                color: { type: 'string' },
+                border: { type: 'string' },
+                hoverBorder: { type: 'string' }
+              },
+              required: ['bg', 'color', 'border', 'hoverBorder'],
+              additionalProperties: false
+            }
+          },
+          required: ['header', 'error', 'item', 'empty', 'button'],
+          additionalProperties: false
+        },
+        protoFiles: {
+          type: 'object',
+          properties: {
+            header: {
+              type: 'object',
+              properties: {
+                text: { type: 'string' },
+                button: {
+                  type: 'object',
+                  properties: {
+                    color: { type: 'string' },
+                    hoverColor: { type: 'string' }
+                  },
+                  required: ['color', 'hoverColor'],
+                  additionalProperties: false
+                }
+              },
+              required: ['text', 'button'],
+              additionalProperties: false
+            },
+            error: {
+              type: 'object',
+              properties: {
+                bg: { type: 'string' },
+                text: { type: 'string' },
+                link: {
+                  type: 'object',
+                  properties: {
+                    color: { type: 'string' },
+                    hoverColor: { type: 'string' }
+                  },
+                  required: ['color', 'hoverColor'],
+                  additionalProperties: false
+                }
+              },
+              required: ['bg', 'text', 'link'],
+              additionalProperties: false
+            },
+            item: {
+              type: 'object',
+              properties: {
+                bg: { type: 'string' },
+                hoverBg: { type: 'string' },
+                selected: {
+                  type: 'object',
+                  properties: {
+                    bg: { type: 'string' },
+                    border: { type: 'string' }
+                  },
+                  required: ['bg', 'border'],
+                  additionalProperties: false
+                },
+                text: { type: 'string' },
+                secondaryText: { type: 'string' },
+                icon: { type: 'string' },
+                invalid: {
+                  type: 'object',
+                  properties: {
+                    opacity: { type: 'number' },
+                    text: { type: 'string' }
+                  },
+                  required: ['opacity', 'text'],
+                  additionalProperties: false
+                }
+              },
+              required: ['bg', 'hoverBg', 'selected', 'text', 'secondaryText', 'icon', 'invalid'],
+              additionalProperties: false
+            },
+            empty: {
+              type: 'object',
+              properties: {
+                text: { type: 'string' }
+              },
+              required: ['text'],
+              additionalProperties: false
+            },
+            button: {
+              type: 'object',
+              properties: {
+                bg: { type: 'string' },
+                color: { type: 'string' },
+                border: { type: 'string' },
+                hoverBorder: { type: 'string' }
+              },
+              required: ['bg', 'color', 'border', 'hoverBorder'],
+              additionalProperties: false
+            }
+          },
+          required: ['header', 'error', 'item', 'empty', 'button'],
+          additionalProperties: false
+        }
+      },
+      required: ['tabNav', 'importPaths', 'protoFiles'],
+      additionalProperties: false
+    },
+
+    deprecationWarning: {
+      type: 'object',
+      properties: {
+        bg: { type: 'string' },
+        border: { type: 'string' },
+        icon: { type: 'string' },
+        text: { type: 'string' }
+      },
+      required: ['bg', 'border', 'icon', 'text'],
+      additionalProperties: false
+    },
+
+    preferences: {
+      type: 'object',
+      properties: {
+        sidebar: {
+          type: 'object',
+          properties: {
+            border: { type: 'string' }
+          },
+          required: ['border'],
+          additionalProperties: false
+        }
+      },
+      required: ['sidebar'],
+      additionalProperties: false
+    },
+
+    examples: {
+      type: 'object',
+      properties: {
+        buttonBg: { type: 'string' },
+        buttonColor: { type: 'string' },
+        buttonText: { type: 'string' },
+        buttonIconColor: { type: 'string' },
+        border: { type: 'string' },
+        urlBar: {
+          type: 'object',
+          properties: {
+            border: { type: 'string' },
+            bg: { type: 'string' }
+          },
+          required: ['border', 'bg'],
+          additionalProperties: false
+        },
+        table: {
+          type: 'object',
+          properties: {
+            thead: {
+              type: 'object',
+              properties: {
+                bg: { type: 'string' },
+                color: { type: 'string' }
+              },
+              required: ['bg', 'color'],
+              additionalProperties: false
+            }
+          },
+          required: ['thead'],
+          additionalProperties: false
+        },
+        checkbox: {
+          type: 'object',
+          properties: {
+            color: { type: 'string' }
+          },
+          required: ['color'],
+          additionalProperties: false
+        }
+      },
+      required: ['buttonBg', 'buttonColor', 'buttonText', 'buttonIconColor', 'border', 'urlBar', 'table', 'checkbox'],
+      additionalProperties: false
+    },
+
+    app: {
+      type: 'object',
+      properties: {
+        collection: {
+          type: 'object',
+          properties: {
+            toolbar: {
+              type: 'object',
+              properties: {
+                environmentSelector: {
+                  type: 'object',
+                  properties: {
+                    bg: { type: 'string' },
+                    border: { type: 'string' },
+                    icon: { type: 'string' },
+                    text: { type: 'string' },
+                    caret: { type: 'string' },
+                    separator: { type: 'string' },
+                    hoverBg: { type: 'string' },
+                    hoverBorder: { type: 'string' },
+                    noEnvironment: {
+                      type: 'object',
+                      properties: {
+                        text: { type: 'string' },
+                        bg: { type: 'string' },
+                        border: { type: 'string' },
+                        hoverBg: { type: 'string' },
+                        hoverBorder: { type: 'string' }
+                      },
+                      required: ['text', 'bg', 'border', 'hoverBg', 'hoverBorder'],
+                      additionalProperties: false
+                    }
+                  },
+                  required: ['bg', 'border', 'icon', 'text', 'caret', 'separator', 'hoverBg', 'hoverBorder', 'noEnvironment'],
+                  additionalProperties: false
+                },
+                sandboxMode: {
+                  type: 'object',
+                  properties: {
+                    safeMode: {
+                      type: 'object',
+                      properties: {
+                        bg: { type: 'string' },
+                        color: { type: 'string' }
+                      },
+                      required: ['bg', 'color'],
+                      additionalProperties: false
+                    },
+                    developerMode: {
+                      type: 'object',
+                      properties: {
+                        bg: { type: 'string' },
+                        color: { type: 'string' }
+                      },
+                      required: ['bg', 'color'],
+                      additionalProperties: false
+                    }
+                  },
+                  required: ['safeMode', 'developerMode'],
+                  additionalProperties: false
+                }
+              },
+              required: ['environmentSelector', 'sandboxMode'],
+              additionalProperties: false
+            }
+          },
+          required: ['toolbar'],
+          additionalProperties: false
+        }
+      },
+      required: ['collection'],
+      additionalProperties: false
+    }
+  },
+  required: [
+    'mode', 'brand', 'text', 'textLink', 'bg', 'accents', 'background', 'overlay', 'font', 'shadow', 'border', 'colors', 'input',
+    'sidebar', 'dropdown', 'workspace', 'request',
+    'requestTabPanel', 'notifications', 'modal', 'button', 'button2', 'tabs',
+    'requestTabs', 'codemirror', 'table', 'plainGrid', 'scrollbar', 'dragAndDrop',
+    'infoTip', 'statusBar', 'console', 'grpc', 'deprecationWarning', 'preferences', 'examples', 'app'
+  ],
+  additionalProperties: false
+};
diff --git a/packages/bruno-app/src/ui/Button/StyledWrapper.js b/packages/bruno-app/src/ui/Button/StyledWrapper.js
index 1c5c49550..ac9ffaa58 100644
--- a/packages/bruno-app/src/ui/Button/StyledWrapper.js
+++ b/packages/bruno-app/src/ui/Button/StyledWrapper.js
@@ -43,7 +43,7 @@ const sizeStyles = {
   `,
   base: css`
     padding: 0.5rem 1rem;
-    font-size: ${(props) => props.theme.font.size.base};
+    font-size: ${(props) => props.theme.font.size.sm};
     gap: 0.5rem;
 
     .button-icon {
@@ -58,7 +58,7 @@ const sizeStyles = {
   `,
   md: css`
     padding: 0.625rem 1.125rem;
-    font-size: ${(props) => props.theme.font.size.md};
+    font-size: ${(props) => props.theme.font.size.sm};
     gap: 0.5rem;
 
     .button-icon {
@@ -73,7 +73,7 @@ const sizeStyles = {
   `,
   lg: css`
     padding: 0.75rem 1.5rem;
-    font-size: ${(props) => props.theme.font.size.md};
+    font-size: ${(props) => props.theme.font.size.base};
     gap: 0.75rem;
 
     .button-icon {
@@ -121,7 +121,7 @@ const getVariantStyles = (variant, color) => {
     return css`
       background-color: ${(props) => props.theme.button2.color[color].bg};
       color: ${(props) => props.theme.button2.color[color].text};
-      border: 1px solid ${(props) => props.theme.button2.color[color].bg};
+      border: 1px solid ${(props) => props.theme.button2.color[color].border};
 
       &:disabled {
         color: ${(props) => props.theme.button2.color[color].text} !important;
@@ -129,10 +129,9 @@ const getVariantStyles = (variant, color) => {
 
       &:hover:not(:disabled) {
         ${(props) => {
-          const bg = props.theme.button2.color[color].bg;
           return css`
-            background-color: ${darken(0.03, bg)};
-            border-color: ${darken(0.03, bg)};
+            background-color: ${darken(0.03, props.theme.button2.color[color].bg)};
+            border-color: ${darken(0.03, props.theme.button2.color[color].border)};
           `;
         }}
       }
diff --git a/packages/bruno-app/src/ui/ResponsiveTabs/StyledWrapper.js b/packages/bruno-app/src/ui/ResponsiveTabs/StyledWrapper.js
index e284d1b10..bc546c018 100644
--- a/packages/bruno-app/src/ui/ResponsiveTabs/StyledWrapper.js
+++ b/packages/bruno-app/src/ui/ResponsiveTabs/StyledWrapper.js
@@ -12,7 +12,7 @@ const StyledWrapper = styled.div`
     }
 
     .more-tabs {
-      color: var(--color-tab-inactive) !important;
+      color: ${(props) => props.theme.colors.text.subtext0} !important;
       border-bottom: solid 2px transparent;
     }
 
@@ -24,7 +24,7 @@ const StyledWrapper = styled.div`
       border: none;
       border-bottom: solid 2px transparent;
       margin-right: ${(props) => props.theme.tabs.marginRight};
-      color: var(--color-tab-inactive);
+      color: ${(props) => props.theme.colors.text.subtext0};
       cursor: pointer;
       white-space: nowrap;
       vertical-align: middle;