diff --git a/web/components.json b/web/components.json
index cbde1f415..9b3f594e5 100644
--- a/web/components.json
+++ b/web/components.json
@@ -4,7 +4,7 @@
   "rsc": true,
   "tsx": true,
   "tailwind": {
-    "config": "tailwind.config.js",
+    "config": "tailwind-themes/tailwind.config.js",
     "css": "src/app/globals.css",
     "baseColor": "neutral",
     "cssVariables": false,
diff --git a/web/package-lock.json b/web/package-lock.json
index e3a2b7f59..17eabc6fb 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -18,17 +18,17 @@
         "@radix-ui/react-accordion": "^1.2.2",
         "@radix-ui/react-checkbox": "^1.1.2",
         "@radix-ui/react-collapsible": "^1.1.2",
-        "@radix-ui/react-dialog": "^1.1.2",
-        "@radix-ui/react-dropdown-menu": "^2.1.4",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-dropdown-menu": "^2.1.6",
         "@radix-ui/react-label": "^2.1.1",
-        "@radix-ui/react-popover": "^1.1.2",
+        "@radix-ui/react-popover": "^1.1.6",
         "@radix-ui/react-radio-group": "^1.2.2",
         "@radix-ui/react-scroll-area": "^1.2.2",
-        "@radix-ui/react-select": "^2.1.2",
+        "@radix-ui/react-select": "^2.1.6",
         "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-slider": "^1.2.2",
-        "@radix-ui/react-slot": "^1.1.0",
-        "@radix-ui/react-switch": "^1.1.1",
+        "@radix-ui/react-slot": "^1.1.2",
+        "@radix-ui/react-switch": "^1.1.3",
         "@radix-ui/react-tabs": "^1.1.1",
         "@radix-ui/react-tooltip": "^1.1.3",
         "@sentry/nextjs": "^8.50.0",
@@ -53,6 +53,7 @@
         "lucide-react": "^0.454.0",
         "mdast-util-find-and-replace": "^3.0.1",
         "next": "^15.0.2",
+        "next-themes": "^0.4.4",
         "npm": "^10.8.0",
         "postcss": "^8.4.31",
         "posthog-js": "^1.176.0",
@@ -3800,6 +3801,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
@@ -3829,25 +3848,25 @@
       }
     },
     "node_modules/@radix-ui/react-dialog": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz",
-      "integrity": "sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.6.tgz",
+      "integrity": "sha512-/IVhJV5AceX620DUJ4uYVMymzsipdKBzo3edo+omeskCKGm9FRHM0ebIdbPnlQVJqyuHbuBltQUOG2mOTq2IYw==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/primitive": "1.1.0",
-        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
         "@radix-ui/react-context": "1.1.1",
-        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
         "@radix-ui/react-focus-guards": "1.1.1",
-        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-focus-scope": "1.1.2",
         "@radix-ui/react-id": "1.1.0",
-        "@radix-ui/react-portal": "1.1.2",
-        "@radix-ui/react-presence": "1.1.1",
-        "@radix-ui/react-primitive": "2.0.0",
-        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2",
         "@radix-ui/react-use-controllable-state": "1.1.0",
-        "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.6.0"
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -3864,6 +3883,27 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz",
+      "integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+      "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-context": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
@@ -3879,6 +3919,104 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz",
+      "integrity": "sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.4.tgz",
+      "integrity": "sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.2.tgz",
+      "integrity": "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
+      "integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
@@ -3921,17 +4059,17 @@
       }
     },
     "node_modules/@radix-ui/react-dropdown-menu": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.4.tgz",
-      "integrity": "sha512-iXU1Ab5ecM+yEepGAWK8ZhMyKX4ubFdCNtol4sT9D0OVErG9PNElfx3TQhjw7n7BC5nFVz68/5//clWy+8TXzA==",
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.6.tgz",
+      "integrity": "sha512-no3X7V5fD487wab/ZYSHXq3H37u4NVeLDKI/Ks724X/eEFSSEFYZxWgsIlr1UBeEyDaM29HM5x9p1Nv8DuTYPA==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.1",
         "@radix-ui/react-compose-refs": "1.1.1",
         "@radix-ui/react-context": "1.1.1",
         "@radix-ui/react-id": "1.1.0",
-        "@radix-ui/react-menu": "2.1.4",
-        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-menu": "2.1.6",
+        "@radix-ui/react-primitive": "2.0.2",
         "@radix-ui/react-use-controllable-state": "1.1.0"
       },
       "peerDependencies": {
@@ -3986,12 +4124,12 @@
       }
     },
     "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-primitive": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz",
-      "integrity": "sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
+      "integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-slot": "1.1.1"
+        "@radix-ui/react-slot": "1.1.2"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -4008,24 +4146,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-slot": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
-      "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-focus-guards": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
@@ -4042,12 +4162,13 @@
       }
     },
     "node_modules/@radix-ui/react-focus-scope": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz",
-      "integrity": "sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.2.tgz",
+      "integrity": "sha512-zxwE80FCU7lcXUGWkdt6XpTTCKPitG1XKOwViTxHVKIJhZl9MvIl2dVHeZENCWD9+EdWv05wlaEkRXUykU27RA==",
+      "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.0",
-        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
         "@radix-ui/react-use-callback-ref": "1.1.0"
       },
       "peerDependencies": {
@@ -4065,6 +4186,44 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-focus-scope/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+      "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
+      "integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
@@ -4162,29 +4321,29 @@
       }
     },
     "node_modules/@radix-ui/react-menu": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.4.tgz",
-      "integrity": "sha512-BnOgVoL6YYdHAG6DtXONaR29Eq4nvbi8rutrV/xlr3RQCMMb3yqP85Qiw/3NReozrSW+4dfLkK+rc1hb4wPU/A==",
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.6.tgz",
+      "integrity": "sha512-tBBb5CXDJW3t2mo9WlO7r6GTmWV0F0uzHZVFmlRmYpiSK1CDU5IKojP1pm7oknpBOrFZx/YgBRW9oorPO2S/Lg==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.1",
-        "@radix-ui/react-collection": "1.1.1",
+        "@radix-ui/react-collection": "1.1.2",
         "@radix-ui/react-compose-refs": "1.1.1",
         "@radix-ui/react-context": "1.1.1",
         "@radix-ui/react-direction": "1.1.0",
-        "@radix-ui/react-dismissable-layer": "1.1.3",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
         "@radix-ui/react-focus-guards": "1.1.1",
-        "@radix-ui/react-focus-scope": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.2",
         "@radix-ui/react-id": "1.1.0",
-        "@radix-ui/react-popper": "1.2.1",
-        "@radix-ui/react-portal": "1.1.3",
+        "@radix-ui/react-popper": "1.2.2",
+        "@radix-ui/react-portal": "1.1.4",
         "@radix-ui/react-presence": "1.1.2",
-        "@radix-ui/react-primitive": "2.0.1",
-        "@radix-ui/react-roving-focus": "1.1.1",
-        "@radix-ui/react-slot": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-roving-focus": "1.1.2",
+        "@radix-ui/react-slot": "1.1.2",
         "@radix-ui/react-use-callback-ref": "1.1.0",
-        "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "^2.6.1"
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -4208,12 +4367,12 @@
       "license": "MIT"
     },
     "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-arrow": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.1.tgz",
-      "integrity": "sha512-NaVpZfmv8SKeZbn4ijN2V3jlHA9ngBG16VnIIm22nUR0Yk8KUALyBxT3KYEUnNuch9sTE8UTsS3whzBgKOL30w==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.2.tgz",
+      "integrity": "sha512-G+KcpzXHq24iH0uGG/pF8LyzpFJYGD4RfLjCIBfGdSLXvjLHST31RUiRVrupIBMvIppMgSzQ6l66iAxl03tdlg==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-primitive": "2.0.1"
+        "@radix-ui/react-primitive": "2.0.2"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -4231,15 +4390,15 @@
       }
     },
     "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-collection": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.1.tgz",
-      "integrity": "sha512-LwT3pSho9Dljg+wY2KN2mrrh6y3qELfftINERIzBUO9e0N+t0oMTyn3k9iv+ZqgrwGkRnLpNJrsMv9BZlt2yuA==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.2.tgz",
+      "integrity": "sha512-9z54IEKRxIa9VityapoEYMuByaG42iSy1ZXlY2KcuLSEtq8x4987/N6m15ppoMffgZX72gER2uHe1D9Y6Unlcw==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.1",
         "@radix-ui/react-context": "1.1.1",
-        "@radix-ui/react-primitive": "2.0.1",
-        "@radix-ui/react-slot": "1.1.1"
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -4287,14 +4446,14 @@
       }
     },
     "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-dismissable-layer": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.3.tgz",
-      "integrity": "sha512-onrWn/72lQoEucDmJnr8uczSNTujT0vJnA/X5+3AkChVPowr8n1yvIKIabhWyMQeMvvmdpsvcyDqx3X1LEXCPg==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz",
+      "integrity": "sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.1",
         "@radix-ui/react-compose-refs": "1.1.1",
-        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-primitive": "2.0.2",
         "@radix-ui/react-use-callback-ref": "1.1.0",
         "@radix-ui/react-use-escape-keydown": "1.1.0"
       },
@@ -4313,42 +4472,17 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-focus-scope": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.1.tgz",
-      "integrity": "sha512-01omzJAYRxXdG2/he/+xy+c8a8gCydoQ1yOxnWNcRhrrBW5W+RQJ22EK1SaO8tb3WoUsuEw7mJjBozPzihDFjA==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.1",
-        "@radix-ui/react-primitive": "2.0.1",
-        "@radix-ui/react-use-callback-ref": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-popper": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.1.tgz",
-      "integrity": "sha512-3kn5Me69L+jv82EKRuQCXdYyf1DqHwD2U/sxoNgBGCB7K9TRc3bQamQ+5EPM9EvyPdli0W41sROd+ZU1dTCztw==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.2.tgz",
+      "integrity": "sha512-Rvqc3nOpwseCyj/rgjlJDYAgyfw7OC1tTkKn2ivhaMGcYt8FSBlahHOZak2i3QwkRXUXgGgzeEe2RuqeEHuHgA==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/react-dom": "^2.0.0",
-        "@radix-ui/react-arrow": "1.1.1",
+        "@radix-ui/react-arrow": "1.1.2",
         "@radix-ui/react-compose-refs": "1.1.1",
         "@radix-ui/react-context": "1.1.1",
-        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-primitive": "2.0.2",
         "@radix-ui/react-use-callback-ref": "1.1.0",
         "@radix-ui/react-use-layout-effect": "1.1.0",
         "@radix-ui/react-use-rect": "1.1.0",
@@ -4371,12 +4505,12 @@
       }
     },
     "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-portal": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.3.tgz",
-      "integrity": "sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.4.tgz",
+      "integrity": "sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-primitive": "2.0.2",
         "@radix-ui/react-use-layout-effect": "1.1.0"
       },
       "peerDependencies": {
@@ -4419,12 +4553,12 @@
       }
     },
     "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-primitive": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz",
-      "integrity": "sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
+      "integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-slot": "1.1.1"
+        "@radix-ui/react-slot": "1.1.2"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -4442,18 +4576,18 @@
       }
     },
     "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-roving-focus": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.1.tgz",
-      "integrity": "sha512-QE1RoxPGJ/Nm8Qmk0PxP8ojmoaS67i0s7hVssS7KuI2FQoc/uzVlZsqKfQvxPE6D8hICCPHJ4D88zNhT3OOmkw==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.2.tgz",
+      "integrity": "sha512-zgMQWkNO169GtGqRvYrzb0Zf8NhMHS2DuEB/TiEmVnpr5OqPU3i8lfbxaAmC2J/KYuIQxyoQQ6DxepyXp61/xw==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.1",
-        "@radix-ui/react-collection": "1.1.1",
+        "@radix-ui/react-collection": "1.1.2",
         "@radix-ui/react-compose-refs": "1.1.1",
         "@radix-ui/react-context": "1.1.1",
         "@radix-ui/react-direction": "1.1.0",
         "@radix-ui/react-id": "1.1.0",
-        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-primitive": "2.0.2",
         "@radix-ui/react-use-callback-ref": "1.1.0",
         "@radix-ui/react-use-controllable-state": "1.1.0"
       },
@@ -4472,70 +4606,27 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
-      "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-menu/node_modules/react-remove-scroll": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.2.tgz",
-      "integrity": "sha512-KmONPx5fnlXYJQqC62Q+lwIeAk64ws/cUw6omIumRzMRPqgnYqhSSti99nbj0Ry13bv7dF+BKn7NB+OqkdZGTw==",
-      "license": "MIT",
-      "dependencies": {
-        "react-remove-scroll-bar": "^2.3.7",
-        "react-style-singleton": "^2.2.1",
-        "tslib": "^2.1.0",
-        "use-callback-ref": "^1.3.3",
-        "use-sidecar": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-popover": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.2.tgz",
-      "integrity": "sha512-u2HRUyWW+lOiA2g0Le0tMmT55FGOEWHwPFt1EPfbLly7uXQExFo5duNKqG2DzmFXIdqOeNd+TpE8baHWJCyP9w==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.6.tgz",
+      "integrity": "sha512-NQouW0x4/GnkFJ/pRqsIS3rM/k97VzKnVb2jB7Gq7VEGPy5g7uNV1ykySFt7eWSp3i2uSGFwaJcvIRJBAHmmFg==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/primitive": "1.1.0",
-        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
         "@radix-ui/react-context": "1.1.1",
-        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
         "@radix-ui/react-focus-guards": "1.1.1",
-        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-focus-scope": "1.1.2",
         "@radix-ui/react-id": "1.1.0",
-        "@radix-ui/react-popper": "1.2.0",
-        "@radix-ui/react-portal": "1.1.2",
-        "@radix-ui/react-presence": "1.1.1",
-        "@radix-ui/react-primitive": "2.0.0",
-        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-popper": "1.2.2",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2",
         "@radix-ui/react-use-controllable-state": "1.1.0",
-        "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.6.0"
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -4552,6 +4643,50 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz",
+      "integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.2.tgz",
+      "integrity": "sha512-G+KcpzXHq24iH0uGG/pF8LyzpFJYGD4RfLjCIBfGdSLXvjLHST31RUiRVrupIBMvIppMgSzQ6l66iAxl03tdlg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+      "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-context": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
@@ -4567,6 +4702,136 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz",
+      "integrity": "sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-popper": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.2.tgz",
+      "integrity": "sha512-Rvqc3nOpwseCyj/rgjlJDYAgyfw7OC1tTkKn2ivhaMGcYt8FSBlahHOZak2i3QwkRXUXgGgzeEe2RuqeEHuHgA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.4.tgz",
+      "integrity": "sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.2.tgz",
+      "integrity": "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
+      "integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
@@ -4666,6 +4931,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-radio-group": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.2.2.tgz",
@@ -5019,32 +5302,32 @@
       }
     },
     "node_modules/@radix-ui/react-select": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.2.tgz",
-      "integrity": "sha512-rZJtWmorC7dFRi0owDmoijm6nSJH1tVw64QGiNIZ9PNLyBDtG+iAq+XGsya052At4BfarzY/Dhv9wrrUr6IMZA==",
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.6.tgz",
+      "integrity": "sha512-T6ajELxRvTuAMWH0YmRJ1qez+x4/7Nq7QIx7zJ0VK3qaEWdnWpNbEDnmWldG1zBDwqrLy5aLMUWcoGirVj5kMg==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/number": "1.1.0",
-        "@radix-ui/primitive": "1.1.0",
-        "@radix-ui/react-collection": "1.1.0",
-        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
         "@radix-ui/react-context": "1.1.1",
         "@radix-ui/react-direction": "1.1.0",
-        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
         "@radix-ui/react-focus-guards": "1.1.1",
-        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-focus-scope": "1.1.2",
         "@radix-ui/react-id": "1.1.0",
-        "@radix-ui/react-popper": "1.2.0",
-        "@radix-ui/react-portal": "1.1.2",
-        "@radix-ui/react-primitive": "2.0.0",
-        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-popper": "1.2.2",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2",
         "@radix-ui/react-use-callback-ref": "1.1.0",
         "@radix-ui/react-use-controllable-state": "1.1.0",
         "@radix-ui/react-use-layout-effect": "1.1.0",
         "@radix-ui/react-use-previous": "1.1.0",
-        "@radix-ui/react-visually-hidden": "1.1.0",
-        "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.6.0"
+        "@radix-ui/react-visually-hidden": "1.1.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -5061,6 +5344,76 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz",
+      "integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.2.tgz",
+      "integrity": "sha512-G+KcpzXHq24iH0uGG/pF8LyzpFJYGD4RfLjCIBfGdSLXvjLHST31RUiRVrupIBMvIppMgSzQ6l66iAxl03tdlg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-collection": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.2.tgz",
+      "integrity": "sha512-9z54IEKRxIa9VityapoEYMuByaG42iSy1ZXlY2KcuLSEtq8x4987/N6m15ppoMffgZX72gER2uHe1D9Y6Unlcw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+      "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-context": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
@@ -5076,6 +5429,135 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz",
+      "integrity": "sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-popper": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.2.tgz",
+      "integrity": "sha512-Rvqc3nOpwseCyj/rgjlJDYAgyfw7OC1tTkKn2ivhaMGcYt8FSBlahHOZak2i3QwkRXUXgGgzeEe2RuqeEHuHgA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.4.tgz",
+      "integrity": "sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
+      "integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.2.tgz",
+      "integrity": "sha512-1SzA4ns2M1aRlvxErqhLHsBHoS5eI5UUcI2awAMgGUp4LoaoWOKYmvqDY2s/tltuPkh3Yk77YF/r3IRj+Amx4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.0.tgz",
@@ -5236,12 +5718,12 @@
       }
     },
     "node_modules/@radix-ui/react-slot": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
-      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+      "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.0"
+        "@radix-ui/react-compose-refs": "1.1.1"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -5253,16 +5735,31 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-switch": {
+    "node_modules/@radix-ui/react-slot/node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.1.tgz",
-      "integrity": "sha512-diPqDDoBcZPSicYoMWdWx+bCPuTRH4QSp9J+65IvtdS0Kuzt67bI6n32vCj8q6NZmYW/ah+2orOtMwcX5eQwIg==",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+      "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.3.tgz",
+      "integrity": "sha512-1nc+vjEOQkJVsJtWPSiISGT6OKm4SiOdjMo+/icLxo2G4vxz1GntC5MzfL4v8ey9OEfw787QCD1y3mUv0NiFEQ==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/primitive": "1.1.0",
-        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
         "@radix-ui/react-context": "1.1.1",
-        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-primitive": "2.0.2",
         "@radix-ui/react-use-controllable-state": "1.1.0",
         "@radix-ui/react-use-previous": "1.1.0",
         "@radix-ui/react-use-size": "1.1.0"
@@ -5282,6 +5779,27 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz",
+      "integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+      "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-context": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
@@ -5297,6 +5815,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
+      "integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tabs": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.1.tgz",
@@ -5391,6 +5932,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
@@ -14399,6 +14958,16 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.4.tgz",
+      "integrity": "sha512-LDQ2qIOJF0VnuVrrMSMLrWGjRMkq+0mpgl6e0juCLqdJ+oo8Q84JRWT6Wh11VDQKkMMe+dVzDKLWs5n87T+PkQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -18184,23 +18753,23 @@
       }
     },
     "node_modules/react-remove-scroll": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz",
-      "integrity": "sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==",
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz",
+      "integrity": "sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==",
       "license": "MIT",
       "dependencies": {
-        "react-remove-scroll-bar": "^2.3.6",
-        "react-style-singleton": "^2.2.1",
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
         "tslib": "^2.1.0",
-        "use-callback-ref": "^1.3.0",
-        "use-sidecar": "^1.1.2"
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
       },
       "engines": {
         "node": ">=10"
       },
       "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -20297,9 +20866,9 @@
       }
     },
     "node_modules/use-sidecar": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
-      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
       "license": "MIT",
       "dependencies": {
         "detect-node-es": "^1.1.0",
@@ -20309,8 +20878,8 @@
         "node": ">=10"
       },
       "peerDependencies": {
-        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
diff --git a/web/package.json b/web/package.json
index 07ddf07d2..fc8fc16d4 100644
--- a/web/package.json
+++ b/web/package.json
@@ -4,7 +4,7 @@
   "version-comment": "version field must be SemVer or chromatic will barf",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -21,17 +21,17 @@
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-collapsible": "^1.1.2",
-    "@radix-ui/react-dialog": "^1.1.2",
-    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-radio-group": "^1.2.2",
     "@radix-ui/react-scroll-area": "^1.2.2",
-    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slider": "^1.2.2",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@sentry/nextjs": "^8.50.0",
@@ -56,6 +56,7 @@
     "lucide-react": "^0.454.0",
     "mdast-util-find-and-replace": "^3.0.1",
     "next": "^15.0.2",
+    "next-themes": "^0.4.4",
     "npm": "^10.8.0",
     "postcss": "^8.4.31",
     "posthog-js": "^1.176.0",
diff --git a/web/public/LiteLLM.jpg b/web/public/LiteLLM.jpg
deleted file mode 100644
index d6a77b2d1..000000000
Binary files a/web/public/LiteLLM.jpg and /dev/null differ
diff --git a/web/public/litellm.png b/web/public/litellm.png
new file mode 100644
index 000000000..dee2b21db
Binary files /dev/null and b/web/public/litellm.png differ
diff --git a/web/public/logo-dark.png b/web/public/logo-dark.png
new file mode 100644
index 000000000..8e897430e
Binary files /dev/null and b/web/public/logo-dark.png differ
diff --git a/web/public/logotype-dark.png b/web/public/logotype-dark.png
new file mode 100644
index 000000000..f321d0c6d
Binary files /dev/null and b/web/public/logotype-dark.png differ
diff --git a/web/src/app/admin/add-connector/page.tsx b/web/src/app/admin/add-connector/page.tsx
index 8d63f5d14..34dafc1b0 100644
--- a/web/src/app/admin/add-connector/page.tsx
+++ b/web/src/app/admin/add-connector/page.tsx
@@ -27,8 +27,12 @@ function SourceTile({
         w-40 
         cursor-pointer
         shadow-md
-        hover:bg-hover
-        ${preSelect ? "bg-hover subtle-pulse" : "bg-hover-light"}
+        hover:bg-accent-background-hovered
+        ${
+          preSelect
+            ? "bg-accent-background-hovered subtle-pulse"
+            : "bg-accent-background"
+        }
       `}
       href={sourceMetadata.adminUrl}
     >
diff --git a/web/src/app/admin/api-key/page.tsx b/web/src/app/admin/api-key/page.tsx
index ce02e6458..88ed04770 100644
--- a/web/src/app/admin/api-key/page.tsx
+++ b/web/src/app/admin/api-key/page.tsx
@@ -56,7 +56,7 @@ function NewApiKeyModal({
           <div className="flex mt-2">
             <b className="my-auto break-all">{apiKey}</b>
             <div
-              className="ml-2 my-auto p-2 hover:bg-hover rounded cursor-pointer"
+              className="ml-2 my-auto p-2 hover:bg-accent-background-hovered rounded cursor-pointer"
               onClick={() => {
                 setCopyClicked(true);
                 navigator.clipboard.writeText(apiKey);
@@ -179,7 +179,7 @@ function Main() {
                   flex 
                   mb-1 
                   w-fit 
-                  hover:bg-hover cursor-pointer
+                  hover:bg-accent-background-hovered cursor-pointer
                   p-2 
                   rounded-lg
                   border-border
@@ -203,7 +203,7 @@ function Main() {
                   flex 
                   mb-1 
                   w-fit 
-                  hover:bg-hover cursor-pointer
+                  hover:bg-accent-background-hovered cursor-pointer
                   p-2 
                   rounded-lg
                   border-border
diff --git a/web/src/app/admin/assistants/AssistantEditor.tsx b/web/src/app/admin/assistants/AssistantEditor.tsx
index 9947a9ff7..2bab0423f 100644
--- a/web/src/app/admin/assistants/AssistantEditor.tsx
+++ b/web/src/app/admin/assistants/AssistantEditor.tsx
@@ -825,10 +825,7 @@ export function AssistantEditor({
                               </TooltipProvider>
                             </div>
                           </div>
-                          <p
-                            className="text-sm text-subtle"
-                            style={{ color: "rgb(113, 114, 121)" }}
-                          >
+                          <p className="text-sm text-neutral-700 dark:text-neutral-400">
                             Attach additional unique knowledge to this assistant
                           </p>
                         </div>
@@ -1217,7 +1214,7 @@ export function AssistantEditor({
                           setFieldValue("label_ids", newLabelIds);
                         }}
                         itemComponent={({ option }) => (
-                          <div className="flex items-center justify-between px-4 py-3 text-sm hover:bg-hover cursor-pointer border-b border-border last:border-b-0">
+                          <div className="flex items-center justify-between px-4 py-3 text-sm hover:bg-accent-background-hovered cursor-pointer border-b border-border last:border-b-0">
                             <div
                               className="flex-grow"
                               onClick={() => {
@@ -1356,7 +1353,7 @@ export function AssistantEditor({
                 </>
               )}
 
-              <div className="mt-12 gap-x-2 w-full  justify-end flex">
+              <div className="mt-12 gap-x-2 w-full justify-end flex">
                 <Button
                   type="submit"
                   disabled={isSubmitting || isRequestSuccessful}
diff --git a/web/src/app/admin/assistants/HidableSection.tsx b/web/src/app/admin/assistants/HidableSection.tsx
index 3741e514b..d32866440 100644
--- a/web/src/app/admin/assistants/HidableSection.tsx
+++ b/web/src/app/admin/assistants/HidableSection.tsx
@@ -31,7 +31,7 @@ export function HidableSection({
   return (
     <div>
       <div
-        className="flex hover:bg-hover-light rounded cursor-pointer p-2"
+        className="flex hover:bg-accent-background rounded cursor-pointer p-2"
         onClick={() => setIsHidden(!isHidden)}
       >
         <SectionHeader includeMargin={false}>{sectionTitle}</SectionHeader>
diff --git a/web/src/app/admin/assistants/PersonaTable.tsx b/web/src/app/admin/assistants/PersonaTable.tsx
index a7064b844..30fda44ad 100644
--- a/web/src/app/admin/assistants/PersonaTable.tsx
+++ b/web/src/app/admin/assistants/PersonaTable.tsx
@@ -187,7 +187,9 @@ export function PersonasTable() {
                   }
                 }}
                 className={`px-1 py-0.5 rounded flex ${
-                  isEditable ? "hover:bg-hover cursor-pointer" : ""
+                  isEditable
+                    ? "hover:bg-accent-background-hovered cursor-pointer"
+                    : ""
                 } select-none w-fit`}
               >
                 <div className="my-auto w-12">
@@ -205,7 +207,7 @@ export function PersonasTable() {
                 <div className="mr-auto my-auto">
                   {!persona.builtin_persona && isEditable ? (
                     <div
-                      className="hover:bg-hover rounded p-1 cursor-pointer"
+                      className="hover:bg-accent-background-hovered rounded p-1 cursor-pointer"
                       onClick={() => openDeleteModal(persona)}
                     >
                       <TrashIcon />
diff --git a/web/src/app/admin/assistants/StarterMessageList.tsx b/web/src/app/admin/assistants/StarterMessageList.tsx
index fd10293d3..b7471269c 100644
--- a/web/src/app/admin/assistants/StarterMessageList.tsx
+++ b/web/src/app/admin/assistants/StarterMessageList.tsx
@@ -65,7 +65,7 @@ export default function StarterMessagesList({
             onClick={() => {
               arrayHelpers.remove(index);
             }}
-            className={`text-gray-400 hover:text-red-500 ${
+            className={`text-text-400 hover:text-red-500 ${
               index === values.length - 1 && !starterMessage.message
                 ? "opacity-50 cursor-not-allowed"
                 : ""
@@ -105,7 +105,7 @@ export default function StarterMessagesList({
                       4 ||
                     isRefreshing ||
                     !autoStarterMessageEnabled
-                      ? "bg-neutral-800 text-neutral-300 cursor-not-allowed"
+                      ? "bg-background-800 text-text-300 cursor-not-allowed"
                       : ""
                   }
                 `}
diff --git a/web/src/app/admin/assistants/page.tsx b/web/src/app/admin/assistants/page.tsx
index fc1a553e9..7acd03f8d 100644
--- a/web/src/app/admin/assistants/page.tsx
+++ b/web/src/app/admin/assistants/page.tsx
@@ -1,4 +1,3 @@
-"use client";
 import { PersonasTable } from "./PersonaTable";
 import Text from "@/components/ui/text";
 import Title from "@/components/ui/title";
diff --git a/web/src/app/admin/bots/SlackBotUpdateForm.tsx b/web/src/app/admin/bots/SlackBotUpdateForm.tsx
index cf90a124c..f63c2071a 100644
--- a/web/src/app/admin/bots/SlackBotUpdateForm.tsx
+++ b/web/src/app/admin/bots/SlackBotUpdateForm.tsx
@@ -92,9 +92,9 @@ export const ExistingSlackBotForm = ({
 
         <div className="flex flex-col" ref={dropdownRef}>
           <div className="flex items-center gap-4">
-            <div className="border rounded-lg border-gray-200">
+            <div className="border rounded-lg border-background-200">
               <div
-                className="flex items-center gap-2 cursor-pointer hover:bg-gray-100 p-2"
+                className="flex items-center gap-2 cursor-pointer hover:bg-background-100 p-2"
                 onClick={() => setIsExpanded(!isExpanded)}
               >
                 {isExpanded ? (
@@ -117,7 +117,7 @@ export const ExistingSlackBotForm = ({
           </div>
 
           {isExpanded && (
-            <div className="bg-white border rounded-lg border-gray-200 shadow-lg absolute mt-12 right-0 z-10 w-full md:w-3/4 lg:w-1/2">
+            <div className="bg-white border rounded-lg border-background-200 shadow-lg absolute mt-12 right-0 z-10 w-full md:w-3/4 lg:w-1/2">
               <div className="p-4">
                 <SlackTokensForm
                   isUpdate={true}
@@ -134,7 +134,7 @@ export const ExistingSlackBotForm = ({
         </div>
       </div>
       <div className="mt-2">
-        <div className="inline-block border rounded-lg border-gray-200 p-2">
+        <div className="inline-block border rounded-lg border-background-200 p-2">
           <Checkbox
             label="Enabled"
             checked={formValues.enabled}
diff --git a/web/src/app/admin/bots/[bot-id]/channels/SlackChannelConfigFormFields.tsx b/web/src/app/admin/bots/[bot-id]/channels/SlackChannelConfigFormFields.tsx
index a4c31a671..4f154a081 100644
--- a/web/src/app/admin/bots/[bot-id]/channels/SlackChannelConfigFormFields.tsx
+++ b/web/src/app/admin/bots/[bot-id]/channels/SlackChannelConfigFormFields.tsx
@@ -613,7 +613,7 @@ export function SlackChannelConfigFormFields({
                         <Link
                           key={ccpairinfo.id}
                           href={`/admin/connector/${ccpairinfo.id}`}
-                          className="flex items-center p-2 rounded-md hover:bg-gray-100 transition-colors"
+                          className="flex items-center p-2 rounded-md hover:bg-background-100 transition-colors"
                         >
                           <div className="mr-2">
                             <SourceIcon
diff --git a/web/src/app/admin/configuration/document-processing/page.tsx b/web/src/app/admin/configuration/document-processing/page.tsx
index 0274cc258..8cb011d83 100644
--- a/web/src/app/admin/configuration/document-processing/page.tsx
+++ b/web/src/app/admin/configuration/document-processing/page.tsx
@@ -84,7 +84,7 @@ function Main() {
             {isApiKeySet ? (
               <div className="w-full p-3 border rounded-md bg-background text-text flex items-center">
                 <span className="flex-grow">••••••••••••••••</span>
-                <Lock className="h-5 w-5 text-gray-400" />
+                <Lock className="h-5 w-5 text-text-400" />
               </div>
             ) : (
               <input
diff --git a/web/src/app/admin/configuration/llm/ConfiguredLLMProviderDisplay.tsx b/web/src/app/admin/configuration/llm/ConfiguredLLMProviderDisplay.tsx
index 5921a9a2a..3146d1da7 100644
--- a/web/src/app/admin/configuration/llm/ConfiguredLLMProviderDisplay.tsx
+++ b/web/src/app/admin/configuration/llm/ConfiguredLLMProviderDisplay.tsx
@@ -25,8 +25,7 @@ function LLMProviderUpdateModal({
 }) {
   const providerName = existingLlmProvider?.name
     ? `"${existingLlmProvider.name}"`
-    : null ||
-      llmProviderDescriptor?.display_name ||
+    : llmProviderDescriptor?.display_name ||
       llmProviderDescriptor?.name ||
       "Custom LLM Provider";
   return (
@@ -75,7 +74,7 @@ function LLMProviderDisplay({
   return (
     <div>
       {popup}
-      <div className="border border-border p-3 rounded w-96 flex shadow-md">
+      <div className="border border-border p-3 dark:bg-neutral-800 dark:border-neutral-700 rounded w-96 flex shadow-md">
         <div className="my-auto">
           <div className="font-bold">{providerName} </div>
           <div className="text-xs italic">({existingLlmProvider.provider})</div>
@@ -113,7 +112,7 @@ function LLMProviderDisplay({
         {existingLlmProvider && (
           <div className="my-auto ml-3">
             {existingLlmProvider.is_default_provider ? (
-              <Badge variant="orange">Default</Badge>
+              <Badge variant="agent">Default</Badge>
             ) : (
               <Badge variant="success">Enabled</Badge>
             )}
diff --git a/web/src/app/admin/configuration/llm/CustomLLMProviderUpdateForm.tsx b/web/src/app/admin/configuration/llm/CustomLLMProviderUpdateForm.tsx
index e70c5b7e2..0b175554d 100644
--- a/web/src/app/admin/configuration/llm/CustomLLMProviderUpdateForm.tsx
+++ b/web/src/app/admin/configuration/llm/CustomLLMProviderUpdateForm.tsx
@@ -348,7 +348,7 @@ export function CustomLLMProviderUpdateForm({
                           </div>
                           <div className="my-auto">
                             <FiX
-                              className="my-auto w-10 h-10 cursor-pointer hover:bg-hover rounded p-2"
+                              className="my-auto w-10 h-10 cursor-pointer hover:bg-accent-background-hovered rounded p-2"
                               onClick={() => arrayHelpers.remove(index)}
                             />
                           </div>
diff --git a/web/src/app/admin/configuration/llm/LLMConfiguration.tsx b/web/src/app/admin/configuration/llm/LLMConfiguration.tsx
index b1a82c789..933efa597 100644
--- a/web/src/app/admin/configuration/llm/LLMConfiguration.tsx
+++ b/web/src/app/admin/configuration/llm/LLMConfiguration.tsx
@@ -73,7 +73,7 @@ function DefaultLLMProviderDisplay({
   return (
     <div>
       {popup}
-      <div className="border border-border p-3 rounded w-96 flex shadow-md">
+      <div className="border border-border p-3 dark:bg-neutral-800 dark:border-neutral-700 rounded w-96 flex shadow-md">
         <div className="my-auto">
           <div className="font-bold">{providerName} </div>
         </div>
diff --git a/web/src/app/admin/configuration/llm/interfaces.ts b/web/src/app/admin/configuration/llm/interfaces.ts
index 5ad5704d5..897bfb896 100644
--- a/web/src/app/admin/configuration/llm/interfaces.ts
+++ b/web/src/app/admin/configuration/llm/interfaces.ts
@@ -12,6 +12,7 @@ import {
   OpenSourceIcon,
   AnthropicSVG,
   IconProps,
+  OpenAIISVG,
 } from "@/components/icons/icons";
 import { FaRobot } from "react-icons/fa";
 
@@ -104,7 +105,7 @@ export const getProviderIcon = (providerName: string, modelName?: string) => {
   switch (providerName) {
     case "openai":
       // Special cases for openai based on modelName
-      return modelNameToIcon(modelName || "", OpenAIIcon);
+      return modelNameToIcon(modelName || "", OpenAIISVG);
     case "anthropic":
       return AnthropicSVG;
     case "bedrock":
diff --git a/web/src/app/admin/configuration/search/page.tsx b/web/src/app/admin/configuration/search/page.tsx
index 7c5a0cdd7..126f1a6a4 100644
--- a/web/src/app/admin/configuration/search/page.tsx
+++ b/web/src/app/admin/configuration/search/page.tsx
@@ -111,14 +111,14 @@ function Main() {
                   <div className="space-y-4">
                     <div>
                       <Text className="font-semibold">Reranking Model</Text>
-                      <Text className="text-gray-700">
+                      <Text className="text-text-700">
                         {searchSettings.rerank_model_name || "Not set"}
                       </Text>
                     </div>
 
                     <div>
                       <Text className="font-semibold">Results to Rerank</Text>
-                      <Text className="text-gray-700">
+                      <Text className="text-text-700">
                         {searchSettings.num_rerank}
                       </Text>
                     </div>
@@ -127,7 +127,7 @@ function Main() {
                       <Text className="font-semibold">
                         Multilingual Expansion
                       </Text>
-                      <Text className="text-gray-700">
+                      <Text className="text-text-700">
                         {searchSettings.multilingual_expansion.length > 0
                           ? searchSettings.multilingual_expansion.join(", ")
                           : "None"}
@@ -136,7 +136,7 @@ function Main() {
 
                     <div>
                       <Text className="font-semibold">Multipass Indexing</Text>
-                      <Text className="text-gray-700">
+                      <Text className="text-text-700">
                         {searchSettings.multipass_indexing
                           ? "Enabled"
                           : "Disabled"}
@@ -147,7 +147,7 @@ function Main() {
                       <Text className="font-semibold">
                         Disable Reranking for Streaming
                       </Text>
-                      <Text className="text-gray-700">
+                      <Text className="text-text-700">
                         {searchSettings.disable_rerank_for_streaming
                           ? "Yes"
                           : "No"}
diff --git a/web/src/app/admin/connector/[ccPairId]/ConfigDisplay.tsx b/web/src/app/admin/connector/[ccPairId]/ConfigDisplay.tsx
index 74a4391e4..b205cb4c5 100644
--- a/web/src/app/admin/connector/[ccPairId]/ConfigDisplay.tsx
+++ b/web/src/app/admin/connector/[ccPairId]/ConfigDisplay.tsx
@@ -149,7 +149,7 @@ export function AdvancedConfigDisplay({
     <>
       <Title className="mt-8 mb-2">Advanced Configuration</Title>
       <CardSection>
-        <ul className="w-full text-sm divide-y divide-background-200 dark:divide-background-700">
+        <ul className="w-full text-sm divide-y divide-neutral-200 dark:divide-neutral-700">
           {pruneFreq && (
             <li
               key={0}
diff --git a/web/src/app/admin/connector/[ccPairId]/DeletionErrorStatus.tsx b/web/src/app/admin/connector/[ccPairId]/DeletionErrorStatus.tsx
index dbeb28cf6..22425b7a1 100644
--- a/web/src/app/admin/connector/[ccPairId]/DeletionErrorStatus.tsx
+++ b/web/src/app/admin/connector/[ccPairId]/DeletionErrorStatus.tsx
@@ -11,7 +11,7 @@ export default function DeletionErrorStatus({
         <h3 className="text-base font-medium">Deletion Error</h3>
         <div className="ml-2 relative group">
           <FiInfo className="h-4 w-4 text-error-600 cursor-help" />
-          <div className="absolute z-10 w-64 p-2 mt-2 text-sm bg-white rounded-md shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 border border-gray-200">
+          <div className="absolute z-10 w-64 p-2 mt-2 text-sm bg-white rounded-md shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 border border-background-200">
             This error occurred while attempting to delete the connector. You
             may re-attempt a deletion by clicking the &quot;Delete&quot; button.
           </div>
diff --git a/web/src/app/admin/connector/[ccPairId]/page.tsx b/web/src/app/admin/connector/[ccPairId]/page.tsx
index 72915426c..a539feaaf 100644
--- a/web/src/app/admin/connector/[ccPairId]/page.tsx
+++ b/web/src/app/admin/connector/[ccPairId]/page.tsx
@@ -293,7 +293,7 @@ function Main({ ccPairId }: { ccPairId: number }) {
         <b className="text-emphasis">{ccPair.num_docs_indexed}</b>
       </div>
       {!ccPair.is_editable_for_current_user && (
-        <div className="text-sm mt-2 text-neutral-500 italic">
+        <div className="text-sm mt-2 text-text-500 italic">
           {ccPair.access_type === "public"
             ? "Public connectors are not editable by curators."
             : ccPair.access_type === "sync"
diff --git a/web/src/app/admin/connectors/[connector]/NavigationRow.tsx b/web/src/app/admin/connectors/[connector]/NavigationRow.tsx
index ed322d9b1..2d23d6ae7 100644
--- a/web/src/app/admin/connectors/[connector]/NavigationRow.tsx
+++ b/web/src/app/admin/connectors/[connector]/NavigationRow.tsx
@@ -50,11 +50,10 @@ const NavigationRow = ({
           </SquareNavigationButton>
         )}
       </div>
-
       <div className="flex justify-center">
         {(formStep > 0 || noCredentials) && (
           <SquareNavigationButton
-            className="bg-accent text-white py-2.5 px-3.5 disabled:opacity-50"
+            className="bg-agent text-white py-2.5 px-3.5 disabled:opacity-50"
             disabled={!isValid}
             onClick={onSubmit}
           >
@@ -63,7 +62,6 @@ const NavigationRow = ({
           </SquareNavigationButton>
         )}
       </div>
-
       <div className="flex justify-end">
         {formStep === 0 && (
           <SquareNavigationButton
diff --git a/web/src/app/admin/connectors/[connector]/Sidebar.tsx b/web/src/app/admin/connectors/[connector]/Sidebar.tsx
index 5980decc9..4abbf26a4 100644
--- a/web/src/app/admin/connectors/[connector]/Sidebar.tsx
+++ b/web/src/app/admin/connectors/[connector]/Sidebar.tsx
@@ -96,7 +96,7 @@ export default function Sidebar() {
             <div className="mx-auto w-full max-w-2xl px-4 py-8">
               <div className="relative">
                 {connector != "file" && (
-                  <div className="absolute h-[85%] left-[6px] top-[8px] bottom-0 w-0.5 bg-gray-300"></div>
+                  <div className="absolute h-[85%] left-[6px] top-[8px] bottom-0 w-0.5 bg-background-300"></div>
                 )}
                 {settingSteps.map((step, index) => {
                   const allowed =
@@ -119,7 +119,7 @@ export default function Sidebar() {
                       <div className="flex-shrink-0 mr-4 z-10">
                         <div
                           className={`rounded-full h-3.5 w-3.5 flex items-center justify-center ${
-                            allowed ? "bg-blue-500" : "bg-gray-300"
+                            allowed ? "bg-blue-500" : "bg-background-300"
                           }`}
                         >
                           {formStep === index && (
@@ -129,7 +129,7 @@ export default function Sidebar() {
                       </div>
                       <div
                         className={`${
-                          index <= formStep ? "text-gray-800" : "text-gray-500"
+                          index <= formStep ? "text-text-800" : "text-text-500"
                         }`}
                       >
                         {step}
diff --git a/web/src/app/admin/connectors/[connector]/pages/ConnectorInput/NumberInput.tsx b/web/src/app/admin/connectors/[connector]/pages/ConnectorInput/NumberInput.tsx
index 0f19c22ad..89e01be60 100644
--- a/web/src/app/admin/connectors/[connector]/pages/ConnectorInput/NumberInput.tsx
+++ b/web/src/app/admin/connectors/[connector]/pages/ConnectorInput/NumberInput.tsx
@@ -16,7 +16,7 @@ export default function NumberInput({
 }) {
   return (
     <div className="w-full flex flex-col">
-      <label className="block text-base font-medium text-text-700 mb-1">
+      <label className="block text-base font-medium text-text-700 dark:text-neutral-100 mb-1">
         {label}
         {optional && <span className="text-text-500 ml-1">(optional)</span>}
       </label>
@@ -27,10 +27,10 @@ export default function NumberInput({
         name={name}
         min="-1"
         className={`mt-2 block w-full px-3 py-2 
-                bg-white border border-gray-300 rounded-md 
-                text-sm shadow-sm placeholder-gray-400
+                bg-[#fff] dark:bg-transparent border border-background-300 rounded-md 
+                text-sm shadow-sm placeholder-text-400
                 focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
-                disabled:bg-gray-50 disabled:text-gray-500 disabled:border-gray-200 disabled:shadow-none
+                disabled:bg-background-50 disabled:text-text-500 disabled:border-background-200 disabled:shadow-none
                 invalid:border-pink-500 invalid:text-pink-600
                 focus:invalid:border-pink-500 focus:invalid:ring-pink-500`}
       />
diff --git a/web/src/app/admin/connectors/[connector]/pages/formelements/NumberInput.tsx b/web/src/app/admin/connectors/[connector]/pages/formelements/NumberInput.tsx
index 5a9f5041b..9e1cf8dcf 100644
--- a/web/src/app/admin/connectors/[connector]/pages/formelements/NumberInput.tsx
+++ b/web/src/app/admin/connectors/[connector]/pages/formelements/NumberInput.tsx
@@ -30,10 +30,10 @@ export default function NumberInput({
         min="-1"
         value={value === 0 && showNeverIfZero ? "Never" : value}
         className={`mt-2 block w-full px-3 py-2 
-                bg-white border border-gray-300 rounded-md 
-                text-sm shadow-sm placeholder-gray-400
+                bg-white border border-background-300 rounded-md 
+                text-sm shadow-sm placeholder-text-400
                 focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
-                disabled:bg-gray-50 disabled:text-gray-500 disabled:border-gray-200 disabled:shadow-none
+                disabled:bg-background-50 disabled:text-text-500 disabled:border-background-200 disabled:shadow-none
                 invalid:border-pink-500 invalid:text-pink-600
                 focus:invalid:border-pink-500 focus:invalid:ring-pink-500`}
       />
diff --git a/web/src/app/admin/connectors/[connector]/pages/gdrive/Credential.tsx b/web/src/app/admin/connectors/[connector]/pages/gdrive/Credential.tsx
index c2bd0a253..3c9f8e59f 100644
--- a/web/src/app/admin/connectors/[connector]/pages/gdrive/Credential.tsx
+++ b/web/src/app/admin/connectors/[connector]/pages/gdrive/Credential.tsx
@@ -34,9 +34,9 @@ export const DriveJsonUpload = ({
     <>
       <input
         className={
-          "mr-3 text-sm text-gray-900 border border-gray-300 " +
-          "cursor-pointer bg-backgrournd dark:text-gray-400 focus:outline-none " +
-          "dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
+          "mr-3 text-sm text-text-900 border border-background-300 " +
+          "cursor-pointer bg-backgrournd dark:text-text-400 focus:outline-none " +
+          "dark:bg-background-700 dark:border-background-600 dark:placeholder-text-400"
         }
         type="file"
         accept=".json"
diff --git a/web/src/app/admin/connectors/[connector]/pages/gmail/Credential.tsx b/web/src/app/admin/connectors/[connector]/pages/gmail/Credential.tsx
index f9874658b..e189bb423 100644
--- a/web/src/app/admin/connectors/[connector]/pages/gmail/Credential.tsx
+++ b/web/src/app/admin/connectors/[connector]/pages/gmail/Credential.tsx
@@ -34,9 +34,9 @@ const DriveJsonUpload = ({
     <>
       <input
         className={
-          "mr-3 text-sm text-gray-900 border border-gray-300 overflow-visible " +
-          "cursor-pointer bg-background dark:text-gray-400 focus:outline-none " +
-          "dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
+          "mr-3 text-sm text-text-900 border border-background-300 overflow-visible " +
+          "cursor-pointer bg-background dark:text-text-400 focus:outline-none " +
+          "dark:bg-background-700 dark:border-background-600 dark:placeholder-text-400"
         }
         type="file"
         accept=".json"
diff --git a/web/src/app/admin/documents/explorer/Explorer.tsx b/web/src/app/admin/documents/explorer/Explorer.tsx
index 158860d6a..9ac1c2fda 100644
--- a/web/src/app/admin/documents/explorer/Explorer.tsx
+++ b/web/src/app/admin/documents/explorer/Explorer.tsx
@@ -50,7 +50,7 @@ const DocumentDisplay = ({
         </a>
       </div>
       <div className="flex flex-wrap gap-x-2 mt-1 text-xs">
-        <div className="px-1 py-0.5 bg-hover rounded flex">
+        <div className="px-1 py-0.5 bg-accent-background-hovered rounded flex">
           <p className="mr-1 my-auto">Boost:</p>
           <ScoreSection
             documentId={document.document_id}
@@ -77,7 +77,7 @@ const DocumentDisplay = ({
               });
             }
           }}
-          className="px-1 py-0.5 bg-hover hover:bg-hover-light rounded flex cursor-pointer select-none"
+          className="px-1 py-0.5 bg-accent-background-hovered hover:bg-accent-background rounded flex cursor-pointer select-none"
         >
           <div className="my-auto">
             {document.hidden ? (
@@ -169,7 +169,7 @@ export function Explorer({
     <div>
       {popup}
       <div className="justify-center py-2">
-        <div className="flex items-center w-full border-2 border-border rounded-lg px-4 py-2 focus-within:border-accent bg-background-search">
+        <div className="flex items-center w-full border-2 border-border rounded-lg px-4 py-2 focus-within:border-accent bg-background-search dark:bg-transparent">
           <MagnifyingGlass />
           <textarea
             autoFocus
@@ -221,7 +221,7 @@ export function Explorer({
         </div>
       )}
       {!query && (
-        <div className="flex text-emphasis mt-3">
+        <div className="flex text-text-darker mt-3">
           Search for a document above to modify its boost or hide it from
           searches.
         </div>
diff --git a/web/src/app/admin/documents/feedback/DocumentFeedbackTable.tsx b/web/src/app/admin/documents/feedback/DocumentFeedbackTable.tsx
index 14cae632b..af81a9d1c 100644
--- a/web/src/app/admin/documents/feedback/DocumentFeedbackTable.tsx
+++ b/web/src/app/admin/documents/feedback/DocumentFeedbackTable.tsx
@@ -37,7 +37,7 @@ const IsVisibleSection = ({
               );
               onUpdate(response);
             }}
-            className="flex text-error cursor-pointer hover:bg-hover py-1 px-2 w-fit rounded-full"
+            className="flex text-error cursor-pointer hover:bg-accent-background-hovered py-1 px-2 w-fit rounded-full"
           >
             <div className="select-none">Hidden</div>
             <div className="ml-1 my-auto">
@@ -53,7 +53,7 @@ const IsVisibleSection = ({
               );
               onUpdate(response);
             }}
-            className="flex cursor-pointer hover:bg-hover py-1 px-2 w-fit rounded-full"
+            className="flex cursor-pointer hover:bg-accent-background-hovered py-1 px-2 w-fit rounded-full"
           >
             <div className="my-auto select-none">Visible</div>
             <div className="ml-1 my-auto">
diff --git a/web/src/app/admin/documents/sets/DocumentSetCreationForm.tsx b/web/src/app/admin/documents/sets/DocumentSetCreationForm.tsx
index 020b54024..152a571b5 100644
--- a/web/src/app/admin/documents/sets/DocumentSetCreationForm.tsx
+++ b/web/src/app/admin/documents/sets/DocumentSetCreationForm.tsx
@@ -189,7 +189,7 @@ export const DocumentSetCreationForm = ({
                                   cursor-pointer ` +
                                     (isSelected
                                       ? " bg-background-strong"
-                                      : " hover:bg-hover")
+                                      : " hover:bg-accent-background-hovered")
                                   }
                                   onClick={() => {
                                     if (isSelected) {
@@ -305,7 +305,7 @@ export const DocumentSetCreationForm = ({
                               cursor-pointer ` +
                                 (isSelected
                                   ? " bg-background-strong"
-                                  : " hover:bg-hover")
+                                  : " hover:bg-accent-background-hovered")
                               }
                               onClick={() => {
                                 if (isSelected) {
diff --git a/web/src/app/admin/documents/sets/page.tsx b/web/src/app/admin/documents/sets/page.tsx
index 0a537c964..c0a65e438 100644
--- a/web/src/app/admin/documents/sets/page.tsx
+++ b/web/src/app/admin/documents/sets/page.tsx
@@ -55,7 +55,7 @@ const EditRow = ({
 
   if (!isEditable) {
     return (
-      <div className="text-emphasis font-medium my-auto p-1">
+      <div className="text-text-darkerfont-medium my-auto p-1">
         {documentSet.name}
       </div>
     );
@@ -68,7 +68,7 @@ const EditRow = ({
           <TooltipTrigger asChild>
             <div
               className={`
-              text-emphasis font-medium my-auto p-1 hover:bg-hover-light flex items-center select-none
+              text-text-darkerfont-medium my-auto p-1 hover:bg-accent-background flex items-center select-none
               ${documentSet.is_up_to_date ? "cursor-pointer" : "cursor-default"}
             `}
               style={{ wordBreak: "normal", overflowWrap: "break-word" }}
@@ -213,7 +213,7 @@ const DocumentSetTable = ({
                       </Badge>
                     ) : (
                       <Badge
-                        variant={isEditable ? "in_progress" : "outline"}
+                        variant={isEditable ? "private" : "default"}
                         icon={FiLock}
                       >
                         Private
diff --git a/web/src/app/admin/embeddings/EmbeddingModelSelectionForm.tsx b/web/src/app/admin/embeddings/EmbeddingModelSelectionForm.tsx
index f9d0368e1..08cf1809e 100644
--- a/web/src/app/admin/embeddings/EmbeddingModelSelectionForm.tsx
+++ b/web/src/app/admin/embeddings/EmbeddingModelSelectionForm.tsx
@@ -235,8 +235,8 @@ export function EmbeddingModelSelection({
           onClick={() => setModelTab(null)}
           className={`mr-4 p-2 font-bold  ${
             !modelTab
-              ? "rounded bg-background-900 text-text-100 underline"
-              : " hover:underline bg-background-100"
+              ? "rounded bg-background-900 dark:bg-neutral-900 text-text-100 dark:text-neutral-100 underline"
+              : " hover:underline bg-background-100 dark:bg-neutral-700"
           }`}
         >
           Current
@@ -246,8 +246,8 @@ export function EmbeddingModelSelection({
             onClick={() => setModelTab("cloud")}
             className={`mx-2 p-2 font-bold  ${
               modelTab == "cloud"
-                ? "rounded bg-background-900 text-text-100 underline"
-                : " hover:underline bg-background-100"
+                ? "rounded bg-background-900 dark:bg-neutral-900 text-text-100 dark:text-neutral-100 underline"
+                : " hover:underline bg-background-100 dark:bg-neutral-700"
             }`}
           >
             Cloud-based
@@ -258,8 +258,8 @@ export function EmbeddingModelSelection({
             onClick={() => setModelTab("open")}
             className={` mx-2 p-2 font-bold  ${
               modelTab == "open"
-                ? "rounded bg-background-900 text-text-100 underline"
-                : "hover:underline bg-background-100"
+                ? "rounded bg-background-900 dark:bg-neutral-900 text-text-100 dark:text-neutral-100 underline"
+                : "hover:underline bg-background-100 dark:bg-neutral-700"
             }`}
           >
             Self-hosted
diff --git a/web/src/app/admin/embeddings/RerankingFormPage.tsx b/web/src/app/admin/embeddings/RerankingFormPage.tsx
index 6bf887bc2..5f3480afc 100644
--- a/web/src/app/admin/embeddings/RerankingFormPage.tsx
+++ b/web/src/app/admin/embeddings/RerankingFormPage.tsx
@@ -177,8 +177,8 @@ const RerankingDetailsForm = forwardRef<
                         key={`${card.rerank_provider_type}-${card.modelName}`}
                         className={`p-4 border rounded-lg cursor-pointer transition-all duration-200 ${
                           isSelected
-                            ? "border-blue-500 bg-blue-50 shadow-md"
-                            : "border-gray-200 hover:border-blue-300 hover:shadow-sm"
+                            ? "border-blue-500 bg-blue-50 dark:bg-blue-900 dark:border-blue-700 shadow-md"
+                            : "border-background-200 hover:border-blue-300 hover:shadow-sm dark:border-neutral-700 dark:hover:border-blue-300"
                         }`}
                         onClick={() => {
                           if (
@@ -240,10 +240,10 @@ const RerankingDetailsForm = forwardRef<
                             </a>
                           )}
                         </div>
-                        <p className="text-sm text-gray-600 mb-2">
+                        <p className="text-sm text-text-600 mb-2">
                           {card.description}
                         </p>
-                        <div className="text-xs text-gray-500">
+                        <div className="text-xs text-text-500">
                           {card.cloud ? "Cloud-based" : "Self-hosted"}
                         </div>
                       </div>
diff --git a/web/src/app/admin/embeddings/pages/CloudEmbeddingPage.tsx b/web/src/app/admin/embeddings/pages/CloudEmbeddingPage.tsx
index 309c10a2a..2dacd5ba7 100644
--- a/web/src/app/admin/embeddings/pages/CloudEmbeddingPage.tsx
+++ b/web/src/app/admin/embeddings/pages/CloudEmbeddingPage.tsx
@@ -210,12 +210,12 @@ export default function CloudEmbeddingPage({
             )}
 
             {!liteLLMProvider && (
-              <CardSection className="mt-2 w-full max-w-4xl bg-gray-50 border border-gray-200">
+              <CardSection className="mt-2 w-full max-w-4xl bg-background-50 border border-background-200">
                 <div className="p-4">
                   <Text className="text-lg font-semibold mb-2">
                     API URL Required
                   </Text>
-                  <Text className="text-sm text-gray-600 mb-4">
+                  <Text className="text-sm text-text-600 mb-4">
                     Before you can add models, you need to provide an API URL
                     for your LiteLLM proxy. Click the &quot;Provide API
                     URL&quot; button above to set up your LiteLLM configuration.
@@ -313,16 +313,16 @@ export default function CloudEmbeddingPage({
                 Configure Azure OpenAI
               </button>
               <div className="mt-2 w-full max-w-4xl">
-                <CardSection className="p-4 border border-gray-200 rounded-lg shadow-sm">
+                <CardSection className="p-4 border border-background-200 rounded-lg shadow-sm">
                   <Text className="text-base font-medium mb-2">
                     Configure Azure OpenAI for Embeddings
                   </Text>
-                  <Text className="text-sm text-gray-600 mb-3">
+                  <Text className="text-sm text-text-600 mb-3">
                     Click &quot;Configure Azure OpenAI&quot; to set up Azure
                     OpenAI for embeddings.
                   </Text>
-                  <div className="flex items-center text-sm text-gray-700">
-                    <FiInfo className="text-gray-400 mr-2" size={16} />
+                  <div className="flex items-center text-sm text-text-700">
+                    <FiInfo className="text-text-400 mr-2" size={16} />
                     <Text>
                       You&apos;ll need: API version, base URL, API key, model
                       name, and deployment name.
@@ -339,7 +339,7 @@ export default function CloudEmbeddingPage({
                 </Text>
 
                 {azureProviderDetails ? (
-                  <CardSection className="bg-white shadow-sm border border-gray-200 rounded-lg">
+                  <CardSection className="bg-white shadow-sm border border-background-200 rounded-lg">
                     <div className="p-4 space-y-3">
                       <div className="flex justify-between">
                         <span className="font-medium">API Version:</span>
@@ -364,8 +364,8 @@ export default function CloudEmbeddingPage({
                     </button>
                   </CardSection>
                 ) : (
-                  <CardSection className="bg-gray-50 border border-gray-200 rounded-lg">
-                    <div className="p-4 text-gray-500 text-center">
+                  <CardSection className="bg-background-50 border border-background-200 rounded-lg">
+                    <div className="p-4 text-text-500 text-center">
                       No Azure provider has been configured yet.
                     </div>
                   </CardSection>
@@ -450,8 +450,8 @@ export function CloudModelCard({
     <div
       className={`p-4 w-96 border rounded-lg transition-all duration-200 ${
         enabled
-          ? "border-blue-500 bg-blue-50 shadow-md"
-          : "border-gray-300 hover:border-blue-300 hover:shadow-sm"
+          ? "border-blue-500 bg-blue-50 dark:bg-blue-950 shadow-md"
+          : "border-background-300 hover:border-blue-300 hover:shadow-sm"
       } ${!provider.configured && "opacity-80 hover:opacity-100"}`}
     >
       {popup}
@@ -465,7 +465,9 @@ export function CloudModelCard({
       )}
 
       <div className="flex items-center justify-between mb-3">
-        <h3 className="font-bold text-lg">{model.model_name}</h3>
+        <h3 className="font-bold dark:text-neutral-100 text-lg">
+          {model.model_name}
+        </h3>
         <div className="flex gap-x-2">
           {model.provider_type == EmbeddingProvider.LITELLM.toLowerCase() && (
             <button
@@ -487,10 +489,12 @@ export function CloudModelCard({
           </a>
         </div>
       </div>
-      <p className="text-sm text-gray-600 mb-2">{model.description}</p>
+      <p className="text-sm text-text-600 dark:text-neutral-400 mb-2">
+        {model.description}
+      </p>
       {model?.provider_type?.toLowerCase() !=
         EmbeddingProvider.LITELLM.toLowerCase() && (
-        <div className="text-xs text-gray-500 mb-2">
+        <div className="text-xs text-text-500 mb-2">
           ${model.pricePerMillion}/M tokens
         </div>
       )}
@@ -499,7 +503,7 @@ export function CloudModelCard({
           className={`w-full p-2 rounded-lg text-sm ${
             enabled
               ? "bg-background-125 border border-border cursor-not-allowed"
-              : "bg-background border border-border hover:bg-hover cursor-pointer"
+              : "bg-background border border-border hover:bg-accent-background-hovered cursor-pointer"
           }`}
           onClick={() => {
             if (enabled) {
diff --git a/web/src/app/admin/embeddings/pages/EmbeddingFormPage.tsx b/web/src/app/admin/embeddings/pages/EmbeddingFormPage.tsx
index 4995d9da9..78f603cf5 100644
--- a/web/src/app/admin/embeddings/pages/EmbeddingFormPage.tsx
+++ b/web/src/app/admin/embeddings/pages/EmbeddingFormPage.tsx
@@ -187,7 +187,7 @@ export default function EmbeddingForm() {
       return needsReIndex ? (
         <div className="flex mx-auto gap-x-1 ml-auto items-center">
           <button
-            className="enabled:cursor-pointer disabled:bg-accent/50 disabled:cursor-not-allowed bg-accent flex gap-x-1 items-center text-white py-2.5 px-3.5 text-sm font-regular rounded-sm"
+            className="enabled:cursor-pointer disabled:bg-accent/50 disabled:cursor-not-allowed bg-agent flex gap-x-1 items-center text-white py-2.5 px-3.5 text-sm font-regular rounded-sm"
             onClick={handleReindex}
           >
             Re-index
@@ -214,7 +214,7 @@ export default function EmbeddingForm() {
         </div>
       ) : (
         <button
-          className="enabled:cursor-pointer ml-auto disabled:bg-accent/50 disabled:cursor-not-allowed bg-accent flex mx-auto gap-x-1 items-center text-white py-2.5 px-3.5 text-sm font-regular rounded-sm"
+          className="enabled:cursor-pointer ml-auto disabled:bg-accent/50 disabled:cursor-not-allowed bg-agent flex mx-auto gap-x-1 items-center text-white py-2.5 px-3.5 text-sm font-regular rounded-sm"
           onClick={async () => {
             updateSearch();
             navigateToEmbeddingPage("search settings");
diff --git a/web/src/app/admin/indexing/[id]/IndexAttemptErrorsTable.tsx b/web/src/app/admin/indexing/[id]/IndexAttemptErrorsTable.tsx
index de68a4606..bea15555f 100644
--- a/web/src/app/admin/indexing/[id]/IndexAttemptErrorsTable.tsx
+++ b/web/src/app/admin/indexing/[id]/IndexAttemptErrorsTable.tsx
@@ -52,13 +52,13 @@ export function CustomModal({
                   setCopyClicked(true);
                   setTimeout(() => setCopyClicked(false), 2000);
                 }}
-                className="flex w-fit cursor-pointer hover:bg-hover-light p-2 border-border border rounded"
+                className="flex w-fit cursor-pointer hover:bg-accent-background p-2 border-border border rounded"
               >
                 Copy full content
                 <CopyIcon className="ml-2 my-auto" />
               </div>
             ) : (
-              <div className="flex w-fit hover:bg-hover-light p-2 border-border border rounded cursor-default">
+              <div className="flex w-fit hover:bg-accent-background p-2 border-border border rounded cursor-default">
                 Copied to clipboard
                 <CheckmarkIcon
                   className="my-auto ml-2 flex flex-shrink-0 text-success"
diff --git a/web/src/app/admin/indexing/status/CCPairIndexingStatusTable.tsx b/web/src/app/admin/indexing/status/CCPairIndexingStatusTable.tsx
index 2d432033c..2a1f5d6b0 100644
--- a/web/src/app/admin/indexing/status/CCPairIndexingStatusTable.tsx
+++ b/web/src/app/admin/indexing/status/CCPairIndexingStatusTable.tsx
@@ -59,7 +59,7 @@ function SummaryRow({
   return (
     <TableRow
       onClick={onToggle}
-      className="border-border group hover:bg-background-settings-hover bg-background-sidebar py-4 rounded-sm !border cursor-pointer"
+      className="border-border dark:hover:bg-neutral-800 dark:border-neutral-700 group hover:bg-background-settings-hover/20 bg-background-sidebar py-4 rounded-sm !border cursor-pointer"
     >
       <TableCell>
         <div className="text-xl flex items-center truncate ellipsis gap-x-2 font-semibold">
@@ -76,37 +76,26 @@ function SummaryRow({
       </TableCell>
 
       <TableCell>
-        <div className="text-sm text-gray-500">Total Connectors</div>
+        <div className="text-sm text-neutral-500 dark:text-neutral-300">
+          Total Connectors
+        </div>
         <div className="text-xl font-semibold">{summary.count}</div>
       </TableCell>
 
       <TableCell>
-        <div className="text-sm text-gray-500">Active Connectors</div>
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div className="flex items-center mt-1">
-                <div className="w-full bg-white rounded-full h-2 mr-2">
-                  <div
-                    className="bg-green-500 h-2 rounded-full"
-                    style={{ width: `${activePercentage}%` }}
-                  ></div>
-                </div>
-                <span className="text-sm font-medium whitespace-nowrap">
-                  {summary.active} ({activePercentage.toFixed(0)}%)
-                </span>
-              </div>
-            </TooltipTrigger>
-            <TooltipContent>
-              {summary.active} out of {summary.count} connectors are active
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+        <div className="text-sm text-neutral-500 dark:text-neutral-300">
+          Active Connectors
+        </div>
+        <p className="flex text-xl mx-auto font-semibold items-center text-lg mt-1">
+          {summary.active}/{summary.count}
+        </p>
       </TableCell>
 
       {isPaidEnterpriseFeaturesEnabled && (
         <TableCell>
-          <div className="text-sm text-gray-500">Public Connectors</div>
+          <div className="text-sm text-neutral-500 dark:text-neutral-300">
+            Public Connectors
+          </div>
           <p className="flex text-xl mx-auto font-semibold items-center text-lg mt-1">
             {summary.public}/{summary.count}
           </p>
@@ -114,14 +103,18 @@ function SummaryRow({
       )}
 
       <TableCell>
-        <div className="text-sm text-gray-500">Total Docs Indexed</div>
+        <div className="text-sm text-neutral-500 dark:text-neutral-300">
+          Total Docs Indexed
+        </div>
         <div className="text-xl font-semibold">
           {summary.totalDocsIndexed.toLocaleString()}
         </div>
       </TableCell>
 
       <TableCell>
-        <div className="text-sm text-gray-500">Errors</div>
+        <div className="text-sm text-neutral-500 dark:text-neutral-300">
+          Errors
+        </div>
 
         <div className="flex items-center text-lg gap-x-1 font-semibold">
           {summary.errors > 0 && <Warning className="text-error h-6 w-6" />}
@@ -178,7 +171,7 @@ function ConnectorRow({
         );
       case "not_started":
         return (
-          <Badge circle variant="purple">
+          <Badge circle variant="not_started">
             Scheduled
           </Badge>
         );
@@ -193,11 +186,13 @@ function ConnectorRow({
 
   return (
     <TableRow
-      className={`hover:bg-hover-light ${
-        invisible
-          ? "invisible !h-0 !-mb-10 !border-none"
-          : "!border !border-border"
-      }  w-full cursor-pointer relative `}
+      className={`
+border border-border dark:border-neutral-700
+        hover:bg-accent-background ${
+          invisible
+            ? "invisible !h-0 !-mb-10 !border-none"
+            : "!border border-border dark:border-neutral-700"
+        }  w-full cursor-pointer relative `}
       onClick={() => {
         router.push(`/admin/connector/${ccPairsIndexingStatus.cc_pair_id}`);
       }}
@@ -219,16 +214,13 @@ function ConnectorRow({
             </Badge>
           ) : ccPairsIndexingStatus.access_type === "sync" ? (
             <Badge
-              variant={isEditable ? "orange" : "default"}
+              variant={isEditable ? "auto-sync" : "default"}
               icon={FiRefreshCw}
             >
-              Sync
+              Auto-Sync
             </Badge>
           ) : (
-            <Badge
-              variant={isEditable ? "in_progress" : "default"}
-              icon={FiLock}
-            >
+            <Badge variant={isEditable ? "private" : "default"} icon={FiLock}>
               Private
             </Badge>
           )}
@@ -457,7 +449,10 @@ export function CCPairIndexingStatusTable({
                   />
                   {connectorsToggled[source] && (
                     <>
-                      <TableRow className="border border-border">
+                      <TableRow
+                        noHover
+                        className="border  !  border-border dark:border-neutral-700"
+                      >
                         <TableHead>Name</TableHead>
                         <TableHead>Last Indexed</TableHead>
                         <TableHead>Activity</TableHead>
diff --git a/web/src/app/admin/settings/AnonymousUserPath.tsx b/web/src/app/admin/settings/AnonymousUserPath.tsx
index b430b94d4..2c6e7c883 100644
--- a/web/src/app/admin/settings/AnonymousUserPath.tsx
+++ b/web/src/app/admin/settings/AnonymousUserPath.tsx
@@ -96,11 +96,11 @@ export function AnonymousUserPath({
   }
 
   return (
-    <div className="mt-4 ml-6 max-w-xl p-6 bg-white shadow-lg border border-gray-200 rounded-lg">
-      <h4 className="font-semibold text-lg text-gray-800 mb-3">
+    <div className="mt-4 ml-6 max-w-xl p-6 bg-white shadow-lg border border-background-200 rounded-lg">
+      <h4 className="font-semibold text-lg text-text-800 mb-3">
         Anonymous User Access
       </h4>
-      <p className="text-gray-600 text-sm mb-4">
+      <p className="text-text-600 text-sm mb-4">
         Enable this to allow non-authenticated users to access all documents
         indexed by public connectors in your workspace.
         {anonymousUserPath
@@ -115,12 +115,12 @@ export function AnonymousUserPath({
       ) : (
         <div className="flex flex-col gap-2 justify-center items-start">
           <div className="w-full flex-grow  flex items-center rounded-md shadow-sm">
-            <span className="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:text-sm h-10">
+            <span className="inline-flex items-center rounded-l-md border border-r-0 border-background-300 bg-background-50 px-3 text-text-500 sm:text-sm h-10">
               {settings?.webDomain}/anonymous/
             </span>
             <Input
               type="text"
-              className="block w-full flex-grow flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm h-10"
+              className="block w-full flex-grow flex-1 rounded-none rounded-r-md border-background-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm h-10"
               placeholder="your-custom-path"
               value={customPath ?? anonymousUserPath ?? ""}
               onChange={(e) => setCustomPath(e.target.value)}
diff --git a/web/src/app/admin/systeminfo/page.tsx b/web/src/app/admin/systeminfo/page.tsx
index dae7306d2..d8e326344 100644
--- a/web/src/app/admin/systeminfo/page.tsx
+++ b/web/src/app/admin/systeminfo/page.tsx
@@ -15,7 +15,7 @@ const Page = async () => {
 
   return (
     <div>
-      <div className="border-solid border-gray-600 border-b pb-2 mb-4 flex">
+      <div className="border-solid border-background-600 border-b pb-2 mb-4 flex">
         <NotebookIcon size={32} />
         <h1 className="text-3xl font-bold pl-2">Version</h1>
       </div>
diff --git a/web/src/app/admin/token-rate-limits/TokenRateLimitTables.tsx b/web/src/app/admin/token-rate-limits/TokenRateLimitTables.tsx
index 60e5b7275..9514abe33 100644
--- a/web/src/app/admin/token-rate-limits/TokenRateLimitTables.tsx
+++ b/web/src/app/admin/token-rate-limits/TokenRateLimitTables.tsx
@@ -109,7 +109,7 @@ export const TokenRateLimitTable = ({
                       }
                       className={`px-1 py-0.5 rounded select-none w-24 ${
                         isAdmin
-                          ? "hover:bg-hover-light cursor-pointer"
+                          ? "hover:bg-accent-background cursor-pointer"
                           : "opacity-50"
                       }`}
                     >
@@ -131,7 +131,7 @@ export const TokenRateLimitTable = ({
                   </div>
                 </TableCell>
                 {shouldRenderGroupName() && (
-                  <TableCell className="font-bold text-emphasis">
+                  <TableCell className="font-bold text-text-darker">
                     {tokenRateLimit.group_name}
                   </TableCell>
                 )}
diff --git a/web/src/app/admin/tools/ToolEditor.tsx b/web/src/app/admin/tools/ToolEditor.tsx
index ee8b1a9db..02e437989 100644
--- a/web/src/app/admin/tools/ToolEditor.tsx
+++ b/web/src/app/admin/tools/ToolEditor.tsx
@@ -139,7 +139,7 @@ function ToolForm({
             py-1 
             px-3 
             text-sm
-            hover:bg-hover-light
+            hover:bg-accent-background
           "
           onClick={() => {
             const definition = values.definition;
@@ -193,7 +193,7 @@ function ToolForm({
         <div className="my-4">
           <h3 className="text-base font-semibold mb-2">Available methods</h3>
           <div className="overflow-x-auto">
-            <table className="min-w-full bg-white border border-gray-200">
+            <table className="min-w-full bg-white border border-background-200">
               <thead>
                 <tr>
                   <th className="px-4 py-2 border-b">Name</th>
@@ -228,7 +228,7 @@ function ToolForm({
           <h3 className="text-xl font-bold mb-2 text-primary-600">
             Custom Headers
           </h3>
-          <p className="text-sm mb-6 text-gray-600 italic">
+          <p className="text-sm mb-6 text-text-600 italic">
             Specify custom headers for each request to this tool&apos;s API.
           </p>
           <FieldArray
@@ -240,17 +240,17 @@ function ToolForm({
                     (header: { key: string; value: string }, index: number) => (
                       <div
                         key={index}
-                        className="flex items-center space-x-2 bg-gray-50 p-3 rounded-lg shadow-sm"
+                        className="flex items-center space-x-2 bg-background-50 p-3 rounded-lg shadow-sm"
                       >
                         <Field
                           name={`customHeaders.${index}.key`}
                           placeholder="Header Key"
-                          className="flex-1 p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+                          className="flex-1 p-2 border border-background-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                         />
                         <Field
                           name={`customHeaders.${index}.value`}
                           placeholder="Header Value"
-                          className="flex-1 p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+                          className="flex-1 p-2 border border-background-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                         />
                         <Button
                           type="button"
diff --git a/web/src/app/admin/tools/ToolsTable.tsx b/web/src/app/admin/tools/ToolsTable.tsx
index 30bb8b34f..03948b649 100644
--- a/web/src/app/admin/tools/ToolsTable.tsx
+++ b/web/src/app/admin/tools/ToolsTable.tsx
@@ -76,7 +76,7 @@ export function ToolsTable({ tools }: { tools: ToolSnapshot[] }) {
                   {tool.in_code_tool_id === null ? (
                     <div className="my-auto">
                       <div
-                        className="hover:bg-hover rounded p-1 cursor-pointer"
+                        className="hover:bg-accent-background-hovered rounded p-1 cursor-pointer"
                         onClick={async () => {
                           const response = await deleteCustomTool(tool.id);
                           if (response.data) {
diff --git a/web/src/app/admin/users/page.tsx b/web/src/app/admin/users/page.tsx
index 759a54761..5a0d3009f 100644
--- a/web/src/app/admin/users/page.tsx
+++ b/web/src/app/admin/users/page.tsx
@@ -78,7 +78,6 @@ const UsersTables = ({
           </CardContent>
         </Card>
       </TabsContent>
-
       <TabsContent value="invited">
         <Card>
           <CardHeader>
diff --git a/web/src/app/anonymous/[id]/AnonymousPage.tsx b/web/src/app/anonymous/[id]/AnonymousPage.tsx
index 253bc79b7..062789f94 100644
--- a/web/src/app/anonymous/[id]/AnonymousPage.tsx
+++ b/web/src/app/anonymous/[id]/AnonymousPage.tsx
@@ -39,15 +39,15 @@ export default function AnonymousPage({
   }, []);
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+    <div className="flex flex-col items-center justify-center min-h-screen bg-background-100">
       <div className="bg-white p-8 rounded-lg shadow-md">
         <h1 className="text-2xl font-bold mb-4 text-center">
           Redirecting you to the chat page...
         </h1>
         <div className="flex justify-center">
-          <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-neutral-800"></div>
+          <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-background-800"></div>
         </div>
-        <p className="mt-4 text-gray-600 text-center">
+        <p className="mt-4 text-text-600 text-center">
           Please wait while we set up your anonymous session.
         </p>
       </div>
diff --git a/web/src/app/assistants/LargeBackButton.tsx b/web/src/app/assistants/LargeBackButton.tsx
index 3b52f36c5..0c932fcf1 100644
--- a/web/src/app/assistants/LargeBackButton.tsx
+++ b/web/src/app/assistants/LargeBackButton.tsx
@@ -8,7 +8,7 @@ export function LargeBackButton() {
   return (
     <div className="cursor-pointer" onClick={() => router.back()}>
       <FiChevronLeft
-        className="mr-1 my-auto p-1 hover:bg-hover rounded cursor-pointer"
+        className="mr-1 my-auto p-1 hover:bg-accent-background-hovered rounded cursor-pointer"
         size={32}
       />
     </div>
diff --git a/web/src/app/assistants/mine/AssistantCard.tsx b/web/src/app/assistants/mine/AssistantCard.tsx
index b9df48a26..be5d26320 100644
--- a/web/src/app/assistants/mine/AssistantCard.tsx
+++ b/web/src/app/assistants/mine/AssistantCard.tsx
@@ -48,9 +48,9 @@ export const AssistantBadge = ({
 }) => {
   return (
     <div
-      className={`h-4 px-1.5 py-1 text-[10px] flex-none bg-[#e6e3dd]/50 rounded-lg justify-center items-center gap-1 inline-flex ${className}`}
+      className={`h-4 px-1.5 py-1 text-[10px] flex-none bg-neutral-200/50 dark:bg-neutral-700 rounded-lg justify-center items-center gap-1 inline-flex ${className}`}
     >
-      <div className="text-[#4a4a4a] font-normal leading-[8px]">
+      <div className="text-text-800 font-normal leading-[8px]">
         {maxLength ? truncateString(text, maxLength) : text}
       </div>
     </div>
@@ -101,7 +101,7 @@ const AssistantCard: React.FC<{
   }, [persona.name]);
 
   return (
-    <div className="w-full p-2 overflow-visible pb-4 pt-3 bg-[#fefcf9] rounded shadow-[0px_0px_4px_0px_rgba(0,0,0,0.25)] flex flex-col">
+    <div className="w-full text-text-800 p-2 overflow-visible pb-4 pt-3 bg-transparent dark:bg-neutral-800/80 rounded shadow-[0px_0px_4px_0px_rgba(0,0,0,0.25)] flex flex-col">
       <div className="w-full flex">
         <div className="ml-2 flex-none mr-2 mt-1 w-10 h-10">
           <AssistantIcon assistant={persona} size="large" />
@@ -114,7 +114,7 @@ const AssistantCard: React.FC<{
                   <TooltipTrigger asChild>
                     <h3
                       ref={nameRef}
-                      className={` text-black line-clamp-1 break-all	 text-ellipsis leading-none font-semibold text-base lg-normal w-full overflow-hidden`}
+                      className={`text-neutral-900 dark:text-neutral-100 line-clamp-1 break-all	 text-ellipsis leading-none font-semibold text-base lg-normal w-full overflow-hidden`}
                     >
                       {persona.name}
                     </h3>
@@ -159,13 +159,13 @@ const AssistantCard: React.FC<{
                   <PopoverTrigger asChild>
                     <button
                       type="button"
-                      className="hover:bg-neutral-100 p-1 -my-1 rounded-full"
+                      className="hover:bg-neutral-200 dark:hover:bg-neutral-700 p-1 -my-1 rounded-full"
                     >
                       <FiMoreHorizontal size={16} />
                     </button>
                   </PopoverTrigger>
                   <PopoverContent
-                    className={`z-[10000] ${
+                    className={`z-[1000000] ${
                       activePopover === null ? "w-32" : "w-80"
                     } p-2`}
                   >
@@ -175,7 +175,7 @@ const AssistantCard: React.FC<{
                           onClick={isOwnedByUser ? handleEdit : undefined}
                           className={`w-full flex items-center text-left px-2 py-1 rounded ${
                             isOwnedByUser
-                              ? "hover:bg-neutral-100"
+                              ? "hover:bg-neutral-200 dark:hover:bg-neutral-700"
                               : "opacity-50 cursor-not-allowed"
                           }`}
                           disabled={!isOwnedByUser}
@@ -183,7 +183,7 @@ const AssistantCard: React.FC<{
                           <FiEdit size={12} className="inline mr-2" />
                           Edit
                         </button>
-                        {isPaidEnterpriseFeaturesEnabled && (
+                        {isPaidEnterpriseFeaturesEnabled && isOwnedByUser && (
                           <button
                             onClick={
                               isOwnedByUser
@@ -197,7 +197,7 @@ const AssistantCard: React.FC<{
                             }
                             className={`w-full text-left items-center px-2 py-1 rounded ${
                               isOwnedByUser
-                                ? "hover:bg-neutral-100"
+                                ? "hover:bg-neutral-200 dark:hover:bg-neutral-800"
                                 : "opacity-50 cursor-not-allowed"
                             }`}
                             disabled={!isOwnedByUser}
@@ -208,10 +208,10 @@ const AssistantCard: React.FC<{
                         )}
                         <button
                           onClick={isOwnedByUser ? handleDelete : undefined}
-                          className={`w-full text-left items-center px-2 py-1 rounded ${
+                          className={`w-full text-left  items-center  px-2 py-1 rounded ${
                             isOwnedByUser
-                              ? "hover:bg-neutral-100 text-red-600"
-                              : "opacity-50 cursor-not-allowed text-red-300"
+                              ? "hover:bg-neutral-200 dark:hover:bg-neutral- text-red-600 dark:text-red-400"
+                              : "opacity-50 cursor-not-allowed text-red-300 dark:text-red-500"
                           }`}
                           disabled={!isOwnedByUser}
                         >
@@ -251,13 +251,13 @@ const AssistantCard: React.FC<{
             )}
           </div>
 
-          <p className="text-black font-[350] mt-0 text-sm line-clamp-2 h-[2.7em]">
+          <p className="text-neutral-800 dark:text-neutral-200 font-[350] mt-0 text-sm line-clamp-2 h-[2.7em]">
             {persona.description || "\u00A0"}
           </p>
 
           <div className="flex flex-col ">
             <div className="my-1.5">
-              <p className="flex items-center text-black text-xs opacity-50">
+              <p className="flex items-center text-neutral-800 dark:text-neutral-200 text-xs opacity-50">
                 {persona.owner?.email || persona.builtin_persona ? (
                   <>
                     <span className="truncate">
@@ -302,7 +302,7 @@ const AssistantCard: React.FC<{
                       router.push(`/chat?assistantId=${persona.id}`);
                       closeModal();
                     }}
-                    className="hover:bg-neutral-100 hover:text-text px-2 py-1 gap-x-1 rounded border border-black flex items-center"
+                    className="hover:bg-neutral-100 dark:hover:bg-neutral-700 dark:bg-[#2E2E2D] hover:text-neutral-900 dark:hover:text-neutral-100 px-2 py-1 gap-x-1 rounded border border-neutral-400 dark:border-neutral-600 flex items-center"
                   >
                     <PencilIcon size={12} className="flex-none" />
                     <span className="text-xs">Start Chat</span>
@@ -324,15 +324,17 @@ const AssistantCard: React.FC<{
                         !pinned
                       );
                     }}
-                    className="hover:bg-neutral-100 px-2 group cursor-pointer py-1 gap-x-1 relative rounded border border-black flex items-center w-[65px]"
+                    className="hover:bg-neutral-100  dark:hover:bg-neutral-700 dark:bg-[#2E2E2D] px-2 group cursor-pointer py-1 gap-x-1 relative rounded border border-neutral-400 dark:border-neutral-600 flex items-center w-[65px]"
                   >
                     <PinnedIcon size={12} />
                     {!pinned ? (
-                      <p className="absolute w-full left-0 group-hover:text-black w-full text-center transform text-xs">
+                      <p className="absolute w-full left-0 group-hover:text-neutral-900 dark:group-hover:text-neutral-100 w-full text-center transform text-xs">
                         Pin
                       </p>
                     ) : (
-                      <p className="text-xs group-hover:text-black">Unpin</p>
+                      <p className="text-xs group-hover:text-neutral-900 dark:group-hover:text-neutral-100">
+                        Unpin
+                      </p>
                     )}
                   </div>
                 </TooltipTrigger>
@@ -348,5 +350,4 @@ const AssistantCard: React.FC<{
     </div>
   );
 };
-
 export default AssistantCard;
diff --git a/web/src/app/assistants/mine/AssistantModal.tsx b/web/src/app/assistants/mine/AssistantModal.tsx
index 30f446478..aa28ebbfc 100644
--- a/web/src/app/assistants/mine/AssistantModal.tsx
+++ b/web/src/app/assistants/mine/AssistantModal.tsx
@@ -23,8 +23,8 @@ export const AssistantBadgeSelector = ({
       className={`
         select-none ${
           selected
-            ? "bg-neutral-900 text-white"
-            : "bg-transparent text-neutral-900"
+            ? "bg-background-900 text-white"
+            : "bg-transparent text-text-900"
         } w-12 h-5 text-center px-1 py-0.5 rounded-lg cursor-pointer text-[12px] font-normal leading-[10px] border border-black justify-center items-center gap-1 inline-flex`}
       onClick={toggleFilter}
     >
@@ -118,7 +118,7 @@ export function AssistantModal({
   return (
     <Dialog open={true} onOpenChange={(open) => !open && hideModal()}>
       <DialogContent
-        className="p-0 overflow-hidden max-h-[80vh] max-w-none w-[95%] bg-background rounded-sm shadow-2xl transform transition-all duration-300 ease-in-out relative w-11/12 max-w-4xl pt-10 pb-10  px-10  overflow-hidden flex flex-col   max-w-4xl"
+        className="p-0  max-h-[80vh] max-w-none w-[95%] bg-background rounded-sm shadow-2xl transform transition-all duration-300 ease-in-out relative w-11/12 max-w-4xl pt-10 pb-10  px-10  overflow-hidden flex flex-col   max-w-4xl"
         style={{
           position: "fixed",
           top: "10vh",
@@ -127,15 +127,15 @@ export function AssistantModal({
           margin: 0,
         }}
       >
-        <div className="flex overflow-hidden flex-col h-full">
+        <div className="flex den flex-col h-full">
           <div className="flex flex-col sticky top-0 z-10">
             <div className="flex px-2 justify-between items-center gap-x-2 mb-0">
               <div className="h-12 w-full rounded-lg flex-col justify-center items-start gap-2.5 inline-flex">
-                <div className="h-12 rounded-md w-full shadow-[0px_0px_2px_0px_rgba(0,0,0,0.25)] border border-[#dcdad4] flex items-center px-3">
+                <div className="h-12 rounded-md w-full shadow-[0px_0px_2px_0px_rgba(0,0,0,0.25)] border border-background-300 flex items-center px-3">
                   {!isSearchFocused && (
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
-                      className="h-5 w-5 text-gray-400"
+                      className="h-5 w-5 text-text-400"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"
@@ -160,15 +160,15 @@ export function AssistantModal({
               </div>
               <button
                 onClick={() => router.push("/assistants/new")}
-                className="h-10 cursor-pointer px-6 py-3 bg-black rounded-md border border-black justify-center items-center gap-2.5 inline-flex"
+                className="h-10 cursor-pointer px-6 py-3 bg-background-800 hover:bg-black rounded-md border border-black justify-center items-center gap-2.5 inline-flex"
               >
-                <div className="text-[#fffcf4] text-lg font-normal leading-normal">
+                <div className="text-text-50 text-lg font-normal leading-normal">
                   Create
                 </div>
               </button>
             </div>
             <div className="px-2 flex py-4 items-center gap-x-2 flex-wrap">
-              <FilterIcon size={16} />
+              <FilterIcon className="text-text-800" size={16} />
               <AssistantBadgeSelector
                 text="Pinned"
                 selected={assistantFilters[AssistantFilter.Pinned]}
@@ -197,11 +197,11 @@ export function AssistantModal({
                 }
               />
             </div>
-            <div className="w-full border-t border-neutral-200" />
+            <div className="w-full border-t border-background-200" />
           </div>
 
           <div className="flex-grow overflow-y-auto">
-            <h2 className="text-2xl font-semibold text-gray-800 mb-2 px-4 py-2">
+            <h2 className="text-2xl font-semibold text-text-800 mb-2 px-4 py-2">
               Featured Assistants
             </h2>
 
@@ -219,7 +219,7 @@ export function AssistantModal({
                   </div>
                 ))
               ) : (
-                <div className="col-span-2 text-center text-gray-500">
+                <div className="col-span-2 text-center text-text-500">
                   No featured assistants match filters
                 </div>
               )}
@@ -227,7 +227,7 @@ export function AssistantModal({
 
             {allAssistants && allAssistants.length > 0 && (
               <>
-                <h2 className="text-2xl font-semibold text-gray-800 mt-4 mb-2 px-4 py-2">
+                <h2 className="text-2xl font-semibold text-text-800 mt-4 mb-2 px-4 py-2">
                   All Assistants
                 </h2>
 
diff --git a/web/src/app/assistants/mine/AssistantSharingModal.tsx b/web/src/app/assistants/mine/AssistantSharingModal.tsx
index e5478971d..c04348440 100644
--- a/web/src/app/assistants/mine/AssistantSharingModal.tsx
+++ b/web/src/app/assistants/mine/AssistantSharingModal.tsx
@@ -145,7 +145,7 @@ export function AssistantSharingModal({
 
           <div className="mb-8 flex flex-col gap-y-4">
             <h3 className="text-lg font-semibold">Current Status</h3>
-            <div className="bg-gray-50 rounded-lg">{sharedStatus}</div>
+            <div className="bg-background-50 rounded-lg">{sharedStatus}</div>
           </div>
 
           <div className="mb-8 flex flex-col gap-y-4">
@@ -175,8 +175,8 @@ export function AssistantSharingModal({
                 ]);
               }}
               itemComponent={({ option }) => (
-                <div className="flex items-center px-4 py-2.5 cursor-pointer hover:bg-gray-100">
-                  <UsersIcon className="mr-3 text-gray-500" />
+                <div className="flex items-center px-4 py-2.5 cursor-pointer hover:bg-background-100">
+                  <UsersIcon className="mr-3 text-text-500" />
                   <span className="flex-grow">{option.name}</span>
                   <FiPlus className="text-blue-500" />
                 </div>
@@ -186,7 +186,7 @@ export function AssistantSharingModal({
 
           {selectedUsers.length > 0 && (
             <div className="mb-6">
-              <h4 className="text-sm font-medium text-gray-700 mb-2">
+              <h4 className="text-sm font-medium text-text-700 mb-2">
                 Selected Users:
               </h4>
               <div className="flex flex-wrap gap-2">
diff --git a/web/src/app/assistants/mine/AssistantSharingPopover.tsx b/web/src/app/assistants/mine/AssistantSharingPopover.tsx
index 77ac5b921..2bd20e586 100644
--- a/web/src/app/assistants/mine/AssistantSharingPopover.tsx
+++ b/web/src/app/assistants/mine/AssistantSharingPopover.tsx
@@ -131,7 +131,7 @@ export function AssistantSharingPopover({
 
         <div className="mb-4">
           <h3 className="text-sm font-semibold mb-2">Current Status</h3>
-          <div className="bg-gray-50 rounded-lg p-2">{sharedStatus}</div>
+          <div className="bg-background-50 rounded-lg p-2">{sharedStatus}</div>
         </div>
 
         <div className="mb-4">
@@ -159,8 +159,8 @@ export function AssistantSharingPopover({
               ]);
             }}
             itemComponent={({ option }) => (
-              <div className="flex items-center px-4 py-2.5 cursor-pointer hover:bg-gray-100">
-                <UsersIcon className="mr-3 text-gray-500" />
+              <div className="flex items-center px-4 py-2.5 cursor-pointer hover:bg-background-100">
+                <UsersIcon className="mr-3 text-text-500" />
                 <span className="flex-grow">{option.name}</span>
                 <FiPlus className="text-blue-500" />
               </div>
@@ -170,7 +170,7 @@ export function AssistantSharingPopover({
 
         {selectedUsers.length > 0 && (
           <div className="mb-4">
-            <h4 className="text-xs font-medium text-gray-700 mb-2">
+            <h4 className="text-xs font-medium text-text-700 mb-2">
               Selected Users:
             </h4>
             <div className="flex flex-wrap gap-2">
diff --git a/web/src/app/assistants/mine/AssistantVisibilityPopover.tsx b/web/src/app/assistants/mine/AssistantVisibilityPopover.tsx
index d154c8bda..5b924c475 100644
--- a/web/src/app/assistants/mine/AssistantVisibilityPopover.tsx
+++ b/web/src/app/assistants/mine/AssistantVisibilityPopover.tsx
@@ -99,7 +99,7 @@ export function AssistantVisibilityPopover({
             {isUpdating && (
               <div className="ml-2 inline-flex items-center">
                 <ThreeDotsLoader />
-                <span className="ml-2 text-sm text-gray-600">Updating...</span>
+                <span className="ml-2 text-sm text-text-600">Updating...</span>
               </div>
             )}
           </Button>
@@ -134,8 +134,8 @@ export function AssistantVisibilityPopover({
               ]);
             }}
             itemComponent={({ option }) => (
-              <div className="flex items-center px-4 py-2.5 cursor-pointer hover:bg-gray-100">
-                <UsersIcon className="mr-3 text-gray-500" />
+              <div className="flex items-center px-4 py-2.5 cursor-pointer hover:bg-background-100">
+                <UsersIcon className="mr-3 text-text-500" />
                 <span className="flex-grow">{option.name}</span>
                 <FiPlus className="text-blue-500" />
               </div>
@@ -145,7 +145,7 @@ export function AssistantVisibilityPopover({
 
         {selectedUsers.length > 0 && (
           <div>
-            <h4 className="text-xs font-medium text-gray-700 mb-2">
+            <h4 className="text-xs font-medium text-text-700 mb-2">
               Selected Users:
             </h4>
             <div className="flex flex-wrap gap-2">
@@ -184,7 +184,7 @@ export function AssistantVisibilityPopover({
 
         <div>
           <h3 className="text-sm font-semibold mb-2">Currently Shared With</h3>
-          <div className="bg-gray-50 rounded-lg p-2">
+          <div className="bg-background-50 rounded-lg p-2">
             <AssistantSharedStatusDisplay
               size="md"
               assistant={assistant}
diff --git a/web/src/app/auth/impersonate/page.tsx b/web/src/app/auth/impersonate/page.tsx
index cb354c0b8..b2155aff9 100644
--- a/web/src/app/auth/impersonate/page.tsx
+++ b/web/src/app/auth/impersonate/page.tsx
@@ -111,7 +111,7 @@ export default function ImpersonatePage() {
 
               <button
                 type="submit"
-                className="w-full py-3 bg-accent text-white rounded-lg hover:bg-accent/90 transition-colors"
+                className="w-full py-3 bg-agent text-white rounded-lg hover:bg-accent/90 transition-colors"
               >
                 Impersonate User
               </button>
diff --git a/web/src/app/auth/login/LoginPage.tsx b/web/src/app/auth/login/LoginPage.tsx
index cc10e5b74..0499075b0 100644
--- a/web/src/app/auth/login/LoginPage.tsx
+++ b/web/src/app/auth/login/LoginPage.tsx
@@ -45,9 +45,9 @@ export default function LoginPage({
       {authTypeMetadata?.authType === "cloud" && (
         <div className="mt-4 w-full justify-center">
           <div className="flex items-center w-full my-4">
-            <div className="flex-grow border-t border-gray-300"></div>
-            <span className="px-4 text-gray-500">or</span>
-            <div className="flex-grow border-t border-gray-300"></div>
+            <div className="flex-grow border-t border-background-300"></div>
+            <span className="px-4 text-text-500">or</span>
+            <div className="flex-grow border-t border-background-300"></div>
           </div>
           <EmailPasswordForm shouldVerify={true} nextUrl={nextUrl} />
 
diff --git a/web/src/app/auth/login/SignInButton.tsx b/web/src/app/auth/login/SignInButton.tsx
index b2d1a15be..065c60de1 100644
--- a/web/src/app/auth/login/SignInButton.tsx
+++ b/web/src/app/auth/login/SignInButton.tsx
@@ -46,7 +46,7 @@ export function SignInButton({
 
   return (
     <a
-      className="mx-auto mb-4 mt-6 py-3 w-full text-text-100 bg-accent flex rounded cursor-pointer hover:bg-indigo-800"
+      className="mx-auto mb-4 mt-6 py-3 w-full text-neutral-100 bg-indigo-500 flex rounded cursor-pointer hover:bg-indigo-800"
       href={finalAuthorizeUrl}
     >
       {button}
diff --git a/web/src/app/auth/signup/ReferralSourceSelector.tsx b/web/src/app/auth/signup/ReferralSourceSelector.tsx
index 5f2acd9fb..f131773a9 100644
--- a/web/src/app/auth/signup/ReferralSourceSelector.tsx
+++ b/web/src/app/auth/signup/ReferralSourceSelector.tsx
@@ -51,7 +51,7 @@ const ReferralSourceSelector: React.FC<ReferralSourceSelectorProps> = ({
       <Select value={referralSource} onValueChange={handleChange}>
         <SelectTrigger
           id="referral-source"
-          className="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+          className="w-full border-background-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
         >
           <SelectValue placeholder="Select an option" />
         </SelectTrigger>
diff --git a/web/src/app/auth/signup/page.tsx b/web/src/app/auth/signup/page.tsx
index b508fd6f6..3d6dd7227 100644
--- a/web/src/app/auth/signup/page.tsx
+++ b/web/src/app/auth/signup/page.tsx
@@ -89,7 +89,7 @@ const Page = async (props: {
               <SignInButton authorizeUrl={authUrl} authType="cloud" />
               <div className="flex items-center w-full my-4">
                 <div className="flex-grow border-t border-background-300"></div>
-                <span className="px-4 text-gray-500">or</span>
+                <span className="px-4 text-text-500">or</span>
                 <div className="flex-grow border-t border-background-300"></div>
               </div>
             </div>
diff --git a/web/src/app/chat/ChatBanner.tsx b/web/src/app/chat/ChatBanner.tsx
index 71e90407d..d5cd8b3af 100644
--- a/web/src/app/chat/ChatBanner.tsx
+++ b/web/src/app/chat/ChatBanner.tsx
@@ -61,7 +61,7 @@ export function ChatBanner() {
       onMouseLeave={handleMouseLeave}
       aria-expanded={isExpanded}
     >
-      <div className="text-emphasis text-sm w-full">
+      <div className="text-text-darker text-sm w-full">
         {/* Padding for consistent spacing */}
         <div className="relative p-2">
           {/* Collapsible container */}
@@ -113,7 +113,7 @@ export function ChatBanner() {
             aria-label="Expand banner content"
             onClick={() => setIsExpanded(true)}
           >
-            <ChevronDownIcon className="h-3 w-3 text-emphasis" />
+            <ChevronDownIcon className="h-3 w-3 text-text-darker" />
           </button>
         )}
       </div>
diff --git a/web/src/app/chat/ChatPage.tsx b/web/src/app/chat/ChatPage.tsx
index 0915f22ec..490caebba 100644
--- a/web/src/app/chat/ChatPage.tsx
+++ b/web/src/app/chat/ChatPage.tsx
@@ -129,6 +129,7 @@ import {
   useOperatingSystem,
   useSidebarShortcut,
 } from "@/lib/browserUtilities";
+import { Button } from "@/components/ui/button";
 
 const TEMP_USER_MESSAGE_ID = -1;
 const TEMP_ASSISTANT_MESSAGE_ID = -2;
@@ -2260,7 +2261,7 @@ export function ChatPage({
         <AssistantModal hideModal={() => setShowAssistantsModal(false)} />
       )}
 
-      <div className="fixed inset-0 flex flex-col text-default">
+      <div className="fixed inset-0 flex flex-col text-text-dark">
         <div className="h-[100dvh] overflow-y-hidden">
           <div className="w-full">
             <div
@@ -2417,7 +2418,7 @@ export function ChatPage({
                           className={`
                           flex-none 
                           overflow-y-hidden 
-                          bg-background-100 
+                          bg-transparent
                           transition-all 
                           bg-opacity-80
                           duration-300 
@@ -2622,6 +2623,7 @@ export function ChatPage({
 
                                 return (
                                   <div
+                                    className="text-text"
                                     id={`message-${message.messageId}`}
                                     key={messageReactComponentKey}
                                     ref={
@@ -2963,6 +2965,9 @@ export function ChatPage({
                                 return (
                                   <div key={messageReactComponentKey}>
                                     <AIMessage
+                                      setPresentingDocument={
+                                        setPresentingDocument
+                                      }
                                       currentPersona={liveAssistant}
                                       messageId={message.messageId}
                                       content={
@@ -3005,6 +3010,7 @@ export function ChatPage({
                                 key={`${messageHistory.length}-${chatSessionIdRef.current}`}
                               >
                                 <AIMessage
+                                  setPresentingDocument={setPresentingDocument}
                                   key={-3}
                                   currentPersona={liveAssistant}
                                   alternativeAssistant={
@@ -3029,6 +3035,7 @@ export function ChatPage({
                             {loadingError && (
                               <div key={-1}>
                                 <AIMessage
+                                  setPresentingDocument={setPresentingDocument}
                                   currentPersona={liveAssistant}
                                   messageId={-1}
                                   content={
@@ -3153,7 +3160,7 @@ export function ChatPage({
                 <div className="mx-auto h-full flex">
                   <div
                     style={{ transition: "width 0.30s ease-out" }}
-                    className={`flex-none bg-transparent transition-all bg-opacity-80 duration-300 epase-in-out h-full
+                    className={`flex-none bg-transparent transition-all bg-opacity-80 duration-300 ease-in-out h-full
                         ${
                           toggledSidebar && !settings?.isMobile
                             ? "w-[250px] "
diff --git a/web/src/app/chat/ChatPersonaSelector.tsx b/web/src/app/chat/ChatPersonaSelector.tsx
index 5984ab36e..319de38eb 100644
--- a/web/src/app/chat/ChatPersonaSelector.tsx
+++ b/web/src/app/chat/ChatPersonaSelector.tsx
@@ -33,10 +33,14 @@ function PersonaItem({
           mx-1
           select-none 
           cursor-pointer 
-          text-emphasis
+          text-text-darker
           bg-background
-          hover:bg-hover-light
-          ${isSelected ? "bg-hover text-selected-emphasis" : ""}
+          hover:bg-accent-background
+          ${
+            isSelected
+              ? "bg-accent-background-hovered text-selected-emphasis"
+              : ""
+          }
         `}
         onClick={() => {
           onSelect(id);
@@ -51,7 +55,10 @@ function PersonaItem({
       </div>
       {isOwner && (
         <Link href={`/assistants/edit/${id}`} className="mx-2 my-auto">
-          <FiEdit2 className="hover:bg-hover p-0.5 my-auto" size={20} />
+          <FiEdit2
+            className="hover:bg-accent-background-hovered p-0.5 my-auto"
+            size={20}
+          />
         </Link>
       )}
     </div>
@@ -130,7 +137,7 @@ export function ChatPersonaSelector({
         </div>
       }
     >
-      <div className="select-none text-xl text-strong font-bold flex px-2 rounded cursor-pointer hover:bg-hover-light">
+      <div className="select-none text-xl text-strong font-bold flex px-2 rounded cursor-pointer hover:bg-accent-background">
         <div className="mt-auto">
           {currentlySelectedPersona?.name || "Default"}
         </div>
diff --git a/web/src/app/chat/ChatPopup.tsx b/web/src/app/chat/ChatPopup.tsx
index 0a355590f..9a05523ff 100644
--- a/web/src/app/chat/ChatPopup.tsx
+++ b/web/src/app/chat/ChatPopup.tsx
@@ -45,7 +45,7 @@ export function ChatPopup() {
     <Modal width="w-3/6 xl:w-[700px]" title={popupTitle}>
       <>
         <ReactMarkdown
-          className="prose max-w-full"
+          className="prose text-text-800 dark:text-neutral-100 max-w-full"
           components={{
             a: ({ node, ...props }) => (
               <a
diff --git a/web/src/app/chat/Refinement.tsx b/web/src/app/chat/Refinement.tsx
index df296eb8d..513b816c7 100644
--- a/web/src/app/chat/Refinement.tsx
+++ b/web/src/app/chat/Refinement.tsx
@@ -256,7 +256,7 @@ export const NoNewAnswerMessage = () => {
 
   return (
     <div
-      className="text-gray-600 text-sm transition-opacity duration-2000 ease-out"
+      className="text-text-600 text-sm transition-opacity duration-2000 ease-out"
       style={{ opacity: opacity }}
     >
       No new answer found...
@@ -338,7 +338,7 @@ export function StatusRefinement({
                 onMouseLeave={() => setToolTipHovered(false)}
                 side="bottom"
                 align="start"
-                className="w-fit p-4 bg-white border-2 border-border shadow-lg rounded-md"
+                className="w-fit p-4 bg-[#fff] border-2 border-border dark:border-neutral-800 shadow-lg rounded-md"
               >
                 {/* If not done, show the "Refining" box + a chevron */}
 
@@ -353,8 +353,9 @@ export function StatusRefinement({
                       <div className="w-3 h-3">
                         <StatusIndicator status={ToggleState.Done} />
                       </div>
-                      <span className="text-sm font-medium">
+                      <span className="text-neutral-800 text-sm font-medium">
                         {StreamingPhaseText[phase]}
+                        LLL
                       </span>
                     </div>
                   ))}
diff --git a/web/src/app/chat/RegenerateOption.tsx b/web/src/app/chat/RegenerateOption.tsx
index 34faef9f3..f947ebf78 100644
--- a/web/src/app/chat/RegenerateOption.tsx
+++ b/web/src/app/chat/RegenerateOption.tsx
@@ -40,9 +40,9 @@ export function RegenerateDropdown({
   };
 
   const Dropdown = (
-    <div className="overflow-y-auto py-2 min-w-fit bg-white dark:bg-gray-800 rounded-md shadow-lg">
+    <div className="overflow-y-auto border border-neutral-800  py-2 min-w-fit bg-neutral-50 dark:bg-neutral-900 rounded-md shadow-lg">
       <div className="mb-1 flex items-center justify-between px-4 pt-2">
-        <span className="text-sm text-text-500 dark:text-text-400">
+        <span className="text-sm text-neutral-600 dark:text-neutral-400">
           Regenerate with
         </span>
       </div>
@@ -50,8 +50,10 @@ export function RegenerateDropdown({
         <div
           key={option.value}
           role="menuitem"
-          className={`flex items-center m-1.5 p-1.5 text-sm cursor-pointer focus-visible:outline-0 group relative hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md my-0 px-3 mx-2 gap-2.5 py-3 !pr-3 ${
-            option.value === selected ? "bg-gray-100 dark:bg-gray-700" : ""
+          className={`flex items-center m-1.5 p-1.5 text-sm cursor-pointer focus-visible:outline-0 group relative hover:bg-neutral-200 dark:hover:bg-neutral-800 rounded-md my-0 px-3 mx-2 gap-2.5 py-3 !pr-3 ${
+            option.value === selected
+              ? "bg-neutral-200 dark:bg-neutral-800"
+              : ""
           }`}
           onClick={() => onSelect(option.value)}
         >
@@ -63,7 +65,7 @@ export function RegenerateDropdown({
             </div>
           </div>
           {option.value === selected && (
-            <FiCheck className="text-blue-500 dark:text-blue-400" />
+            <FiCheck className="text-neutral-700 dark:text-neutral-300" />
           )}
         </div>
       ))}
diff --git a/web/src/app/chat/documentSidebar/ChatDocumentDisplay.tsx b/web/src/app/chat/documentSidebar/ChatDocumentDisplay.tsx
index 7447b81c5..0e2c94931 100644
--- a/web/src/app/chat/documentSidebar/ChatDocumentDisplay.tsx
+++ b/web/src/app/chat/documentSidebar/ChatDocumentDisplay.tsx
@@ -50,7 +50,7 @@ export function DocumentMetadataBlock({
                 />
               ))}
             {metadataEntries.length > MAX_METADATA_ITEMS && (
-              <span className="ml-1 text-xs text-gray-500">...</span>
+              <span className="ml-1 text-xs text-text-500">...</span>
             )}
           </div>
         </>
@@ -82,8 +82,10 @@ export function ChatDocumentDisplay({
   return (
     <div className="desktop:max-w-[400px] opacity-100 w-full">
       <div
-        className={`flex relative flex-col px-3 py-2.5 gap-0.5 rounded-xl my-1 ${
-          isSelected ? "bg-[#ebe7de]" : "bg- hover:bg-[#ebe7de]/80"
+        className={`flex relative  flex-col px-3 py-2.5 gap-0.5  rounded-xl my-1 ${
+          isSelected
+            ? "bg-accent-background-hovered"
+            : " hover:bg-accent-background"
         }`}
       >
         <button
@@ -96,7 +98,7 @@ export function ChatDocumentDisplay({
             ) : (
               <SourceIcon sourceType={document.source_type} iconSize={18} />
             )}
-            <div className="line-clamp-1 text-text-900 text-sm font-semibold">
+            <div className="line-clamp-1 text-neutral-900 dark:text-neutral-300 text-sm font-semibold">
               {(document.semantic_identifier || document.document_id).length >
               (modal ? 30 : 40)
                 ? `${(document.semantic_identifier || document.document_id)
@@ -109,7 +111,7 @@ export function ChatDocumentDisplay({
             <DocumentMetadataBlock modal={modal} document={document} />
           )}
           <div
-            className={`line-clamp-3 text-sm font-normal leading-snug text-gray-600 ${
+            className={`line-clamp-3 text-sm font-normal leading-snug text-neutral-900 dark:text-neutral-300 ${
               hasMetadata ? "mt-2" : ""
             }`}
           >
diff --git a/web/src/app/chat/documentSidebar/DocumentResults.tsx b/web/src/app/chat/documentSidebar/DocumentResults.tsx
index 425c4c60d..7241fcd34 100644
--- a/web/src/app/chat/documentSidebar/DocumentResults.tsx
+++ b/web/src/app/chat/documentSidebar/DocumentResults.tsx
@@ -78,7 +78,9 @@ export const DocumentResults = forwardRef<HTMLDivElement, DocumentResultsProps>(
         <div
           id="onyx-chat-sidebar"
           className={`relative -mb-8 bg-background max-w-full ${
-            !modal ? "border-l border-t h-[105vh]  border-sidebar-border" : ""
+            !modal
+              ? "border-l border-t h-[105vh]  border-sidebar-border dark:border-neutral-700"
+              : ""
           }`}
           onClick={(e) => {
             if (e.target === e.currentTarget) {
diff --git a/web/src/app/chat/files/InputBarPreview.tsx b/web/src/app/chat/files/InputBarPreview.tsx
index 53b850768..d22cd1fd8 100644
--- a/web/src/app/chat/files/InputBarPreview.tsx
+++ b/web/src/app/chat/files/InputBarPreview.tsx
@@ -20,7 +20,7 @@ function DeleteButton({ onDelete }: { onDelete: () => void }) {
         -right-1
         cursor-pointer
         border-none
-        bg-hover
+        bg-accent-background-hovered
         p-.5
         rounded-full
         z-10
@@ -119,7 +119,7 @@ export function InputBarPreview({
         flex
         items-center
         px-2
-        bg-hover
+        bg-accent-background-hovered
         border
         gap-x-1.5
         border-border
@@ -164,7 +164,7 @@ export function InputBarPreview({
           className="
             cursor-pointer
             border-none
-            bg-hover
+            bg-accent-background-hovered
             rounded-full
             z-10
           "
diff --git a/web/src/app/chat/files/documents/DocumentPreview.tsx b/web/src/app/chat/files/documents/DocumentPreview.tsx
index 0237cf39c..6fa8013d9 100644
--- a/web/src/app/chat/files/documents/DocumentPreview.tsx
+++ b/web/src/app/chat/files/documents/DocumentPreview.tsx
@@ -27,7 +27,7 @@ export function DocumentPreview({
         ${alignBubble && "min-w-52 max-w-48"}
         flex
         items-center
-        bg-hover-light/50
+        bg-accent-background/50
         border
         border-border
         rounded-lg
@@ -80,10 +80,10 @@ export function DocumentPreview({
       {open && (
         <button
           onClick={() => open()}
-          className="ml-2 p-2 rounded-full hover:bg-gray-200 transition-colors duration-200"
+          className="ml-2 p-2 rounded-full hover:bg-background-200 transition-colors duration-200"
           aria-label="Expand document"
         >
-          <ExpandTwoIcon className="w-5 h-5 text-gray-600" />
+          <ExpandTwoIcon className="w-5 h-5 text-text-600" />
         </button>
       )}
     </div>
@@ -117,7 +117,7 @@ export function InputDocumentPreview({
         flex
         items-center
         p-2
-        bg-hover
+        bg-accent-background-hovered
         border
         border-border
         rounded-md
diff --git a/web/src/app/chat/files/images/InMessageImage.tsx b/web/src/app/chat/files/images/InMessageImage.tsx
index 6af28350b..817ccd0e9 100644
--- a/web/src/app/chat/files/images/InMessageImage.tsx
+++ b/web/src/app/chat/files/images/InMessageImage.tsx
@@ -16,7 +16,7 @@ export function InMessageImage({ fileId }: { fileId: string }) {
 
       <div className="relative w-full h-full max-w-96 max-h-96">
         {!imageLoaded && (
-          <div className="absolute inset-0 bg-gray-200 animate-pulse rounded-lg" />
+          <div className="absolute inset-0 bg-background-200 animate-pulse rounded-lg" />
         )}
 
         <img
diff --git a/web/src/app/chat/files/images/InputBarPreviewImage.tsx b/web/src/app/chat/files/images/InputBarPreviewImage.tsx
index 62945fb61..56202e295 100644
--- a/web/src/app/chat/files/images/InputBarPreviewImage.tsx
+++ b/web/src/app/chat/files/images/InputBarPreviewImage.tsx
@@ -20,7 +20,7 @@ export function InputBarPreviewImage({ fileId }: { fileId: string }) {
           border-none
           flex
           items-center
-          bg-hover
+          bg-accent-background-hovered
           border
           border-border
           rounded-md
diff --git a/web/src/app/chat/folders/FolderDropdown.tsx b/web/src/app/chat/folders/FolderDropdown.tsx
index faa8f4436..830020d04 100644
--- a/web/src/app/chat/folders/FolderDropdown.tsx
+++ b/web/src/app/chat/folders/FolderDropdown.tsx
@@ -189,7 +189,7 @@ export const FolderDropdown = forwardRef<HTMLDivElement, FolderDropdownProps>(
                     type="text"
                     value={newFolderName}
                     onChange={(e) => setNewFolderName(e.target.value)}
-                    className="text-sm font-medium bg-transparent outline-none w-full pb-1 border-b border-[#6c6c6c] transition-colors duration-200"
+                    className="text-sm font-medium bg-transparent outline-none w-full pb-1 border-b border-background-500 transition-colors duration-200"
                     onKeyDown={(e) => {
                       if (e.key === "Enter") {
                         handleEdit();
@@ -241,7 +241,7 @@ export const FolderDropdown = forwardRef<HTMLDivElement, FolderDropdownProps>(
                       </p>
                       <div className="flex justify-center gap-2">
                         <button
-                          className="px-3 py-1 text-sm bg-gray-200 rounded"
+                          className="px-3 py-1 text-sm bg-background-200 rounded"
                           onClick={handleCancelDelete}
                         >
                           Cancel
diff --git a/web/src/app/chat/folders/FolderList.tsx b/web/src/app/chat/folders/FolderList.tsx
index 144977e2c..1d63f943b 100644
--- a/web/src/app/chat/folders/FolderList.tsx
+++ b/web/src/app/chat/folders/FolderList.tsx
@@ -184,7 +184,7 @@ const FolderItem = ({
       onDragLeave={() => setIsDragOver(false)}
       onDrop={handleDrop}
       className={`transition duration-300 ease-in-out rounded-md ${
-        isDragOver ? "bg-hover" : ""
+        isDragOver ? "bg-accent-background-hovered" : ""
       }`}
     >
       <BasicSelectable fullWidth selected={false}>
@@ -261,7 +261,7 @@ const FolderItem = ({
                           </button>
                           <button
                             onClick={cancelDelete}
-                            className="bg-gray-300 hover:bg-gray-200 px-2 py-1 rounded text-xs"
+                            className="bg-background-300 hover:bg-background-200 px-2 py-1 rounded text-xs"
                           >
                             No
                           </button>
diff --git a/web/src/app/chat/input-prompts/InputPrompts.tsx b/web/src/app/chat/input-prompts/InputPrompts.tsx
index 043adf784..0cf6ce546 100644
--- a/web/src/app/chat/input-prompts/InputPrompts.tsx
+++ b/web/src/app/chat/input-prompts/InputPrompts.tsx
@@ -177,7 +177,7 @@ export default function InputPrompts() {
     };
 
     return (
-      <div className="border rounded-lg p-4 mb-4 relative">
+      <div className="border dark:border-none dark:bg-[#333333] rounded-lg p-4 mb-4 relative">
         {isEditing ? (
           <>
             <div className="absolute top-2 right-2">
@@ -234,8 +234,12 @@ export default function InputPrompts() {
             <div className="whitespace-pre-wrap">{prompt.content}</div>
             <div className="absolute top-2 right-2">
               <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" size="sm">
+                <DropdownMenuTrigger className="hover:bg-transparent" asChild>
+                  <Button
+                    className="!hover:bg-transparent"
+                    variant="ghost"
+                    size="sm"
+                  >
                     <MoreVertical size={14} />
                   </Button>
                 </DropdownMenuTrigger>
diff --git a/web/src/app/chat/input/AgenticToggle.tsx b/web/src/app/chat/input/AgenticToggle.tsx
index 679b59b44..6f82d8df8 100644
--- a/web/src/app/chat/input/AgenticToggle.tsx
+++ b/web/src/app/chat/input/AgenticToggle.tsx
@@ -62,16 +62,16 @@ export function AgenticToggle({
               className={`
                 ${
                   proSearchEnabled
-                    ? "border-[#D9D9D0] group-hover:border-black"
-                    : "border-[#D9D9D0] group-hover:border-black"
+                    ? "border-background-200 group-hover:border-[#000] dark:group-hover:border-neutral-300"
+                    : "border-background-200 group-hover:border-[#000] dark:group-hover:border-neutral-300"
                 }
-                 relative inline-flex h-[16px] w-8 items-center rounded-full transition-colors focus:outline-none border animate transition-all duration-200 border-[#D9D9D0] group-hover:border-[1px]  `}
+                 relative inline-flex h-[16px] w-8 items-center rounded-full transition-colors focus:outline-none border animate transition-all duration-200 border-background-200 group-hover:border-[1px]  `}
             >
               <span
                 className={`${
                   proSearchEnabled
                     ? "bg-agent translate-x-4 scale-75"
-                    : "bg-[#64645E] group-hover:bg-text translate-x-0.5 scale-75"
+                    : "bg-background-600 group-hover:bg-background-950 translate-x-0.5 scale-75"
                 }  inline-block h-[12px] w-[12px]  group-hover:scale-90 transform rounded-full transition-transform duration-200 ease-in-out`}
               />
             </div>
@@ -86,19 +86,19 @@ export function AgenticToggle({
         </TooltipTrigger>
         <TooltipContent
           side="top"
-          className="w-72 p-4 bg-white rounded-lg shadow-lg border border-gray-200"
+          className="w-72 p-4 bg-white rounded-lg shadow-lg border border-background-200 dark:border-neutral-900"
         >
           <div className="flex items-center space-x-2 mb-3">
-            <h3 className="text-sm font-semibold text-gray-900">
+            <h3 className="text-sm font-semibold text-text-900">
               Agent Search (BETA)
             </h3>
           </div>
-          <p className="text-xs text-gray-600 mb-2">
+          <p className="text-xs text-text-600 mb-2">
             Use AI agents to break down questions and run deep iterative
             research through promising pathways. Gives more thorough and
             accurate responses but takes slightly longer.
           </p>
-          <ul className="text-xs text-gray-600 list-disc list-inside">
+          <ul className="text-xs text-text-600 list-disc list-inside">
             <li>Improved accuracy of search results</li>
             <li>Less hallucinations</li>
             <li>More comprehensive answers</li>
diff --git a/web/src/app/chat/input/ChatInputBar.tsx b/web/src/app/chat/input/ChatInputBar.tsx
index 06c996eaa..8a056eb5f 100644
--- a/web/src/app/chat/input/ChatInputBar.tsx
+++ b/web/src/app/chat/input/ChatInputBar.tsx
@@ -83,7 +83,7 @@ export const SourceChip2 = ({
             className={`
             h-6
             px-2
-            bg-[#f1eee8]
+            bg-background-dark
             rounded-2xl
             justify-center
             items-center
@@ -95,13 +95,13 @@ export const SourceChip2 = ({
             <div className="w-[17px] h-4 p-[3px] flex-col justify-center items-center gap-2.5 inline-flex">
               <div className="h-2.5 relative">{icon}</div>
             </div>
-            <div className="text-[#4a4a4a] text-xs font-medium leading-normal">
+            <div className="text-text-800 text-xs font-medium leading-normal">
               {truncateTitle ? truncateString(title, 50) : title}
             </div>
             {onRemove && (
               <XIcon
                 size={12}
-                className="text-[#4a4a4a] ml-2 cursor-pointer"
+                className="text-text-800 ml-2 cursor-pointer"
                 onClick={(e: React.MouseEvent<SVGSVGElement>) => {
                   e.stopPropagation();
                   onRemove();
@@ -143,7 +143,7 @@ export const SourceChip = ({
         flex
         items-center
         px-1
-        bg-gray-background
+        bg-background-background
         text-xs
         text-text-darker
         border
@@ -432,7 +432,7 @@ export function ChatInputBar({
               ref={suggestionsRef}
               className="text-sm absolute w-[calc(100%-2rem)] top-0 transform -translate-y-full"
             >
-              <div className="rounded-lg py-1 sm-1.5 bg-background border border-border shadow-lg px-1.5 mt-2 z-10">
+              <div className="rounded-lg py-1 sm-1.5 bg-input-background border border-border dark:border-none shadow-lg px-1.5 mt-2 z-10">
                 {assistantTagOptions.map((currentAssistant, index) => (
                   <button
                     key={index}
@@ -476,7 +476,7 @@ export function ChatInputBar({
               ref={suggestionsRef}
               className="text-sm absolute inset-x-0 top-0 w-full transform -translate-y-full"
             >
-              <div className="rounded-lg py-1.5 bg-background border border-border shadow-lg mx-2 px-1.5 mt-2 rounded z-10">
+              <div className="rounded-lg py-1.5 bg-input-background dark:border-none border border-border shadow-lg mx-2 px-1.5 mt-2 rounded z-10">
                 {filteredPrompts.map(
                   (currentPrompt: InputPrompt, index: number) => (
                     <button
@@ -523,8 +523,11 @@ export function ChatInputBar({
               flex-col
               border
               shadow
-              border-[#DCDAD4]/60
+              bg-input-background
+              border-input-border
+              dark:border-none
               rounded-lg
+              overflow-hidden
               text-text-chatbar
               [&:has(textarea:focus)]::ring-1
               [&:has(textarea:focus)]::ring-black
@@ -578,8 +581,11 @@ export function ChatInputBar({
                 resize-none
                 rounded-lg
                 border-0
-                bg-background
-                placeholder:text-text-muted
+                bg-input-background
+                font-normal
+                text-base
+                leading-6
+                placeholder:text-input-text
                 ${
                   textAreaRef.current &&
                   textAreaRef.current.scrollHeight > MAX_INPUT_HEIGHT
@@ -590,10 +596,10 @@ export function ChatInputBar({
                 break-word
                 overscroll-contain
                 outline-none
-                placeholder-subtle
                 resize-none
                 px-5
                 py-4
+                dark:text-[#D4D4D4]
               `}
               autoFocus
               style={{ scrollbarWidth: "thin" }}
@@ -627,7 +633,7 @@ export function ChatInputBar({
               filterManager.selectedDocumentSets.length > 0 ||
               filterManager.selectedTags.length > 0 ||
               filterManager.selectedSources.length > 0) && (
-              <div className="flex bg-background gap-x-.5 px-2">
+              <div className="flex bg-input-background gap-x-.5 px-2">
                 <div className="flex gap-x-1 px-2 overflow-visible overflow-x-scroll items-end miniscroll">
                   {filterManager.selectedTags &&
                     filterManager.selectedTags.map((tag, index) => (
@@ -750,7 +756,7 @@ export function ChatInputBar({
               </div>
             )}
 
-            <div className="flex pr-4 pb-2 justify-between items-center w-full ">
+            <div className="flex pr-4 pb-2 justify-between bg-input-background items-center w-full ">
               <div className="space-x-1 flex  px-4 ">
                 <ChatInputOption
                   flexPriority="stiff"
@@ -813,8 +819,8 @@ export function ChatInputBar({
                     chatState == "toolBuilding" ||
                     chatState == "loading"
                       ? chatState != "streaming"
-                        ? "bg-background-400"
-                        : "bg-background-800"
+                        ? "bg-neutral-900 dark:bg-neutral-400 "
+                        : "bg-neutral-500 dark:bg-neutral-50"
                       : ""
                   } h-[22px] w-[22px] rounded-full`}
                   onClick={() => {
@@ -840,15 +846,15 @@ export function ChatInputBar({
                   chatState == "loading" ? (
                     <StopGeneratingIcon
                       size={8}
-                      className="text-emphasis m-auto text-white flex-none"
+                      className="text-neutral-50 dark:text-neutral-900 m-auto text-white flex-none"
                     />
                   ) : (
                     <SendIcon
                       size={22}
-                      className={`text-emphasis text-white p-1 my-auto rounded-full ${
+                      className={`text-neutral-50 dark:text-neutral-900 p-1 my-auto rounded-full ${
                         chatState == "input" && message
-                          ? "bg-submit-background"
-                          : "bg-disabled-submit-background"
+                          ? "bg-neutral-900 dark:bg-neutral-50"
+                          : "bg-neutral-500 dark:bg-neutral-400"
                       }`}
                     />
                   )}
diff --git a/web/src/app/chat/input/ChatInputOption.tsx b/web/src/app/chat/input/ChatInputOption.tsx
index 9387a110d..c6ac18242 100644
--- a/web/src/app/chat/input/ChatInputOption.tsx
+++ b/web/src/app/chat/input/ChatInputOption.tsx
@@ -44,10 +44,12 @@ export const ChatInputOption: React.FC<ChatInputOptionProps> = ({
             items-center 
             space-x-1
             group
-            text-text-700
-            !rounded-lg
+            rounded
+            text-input-text
             hover:bg-background-chat-hover
-            hover:text-emphasis
+            hover:text-neutral-900
+
+            dark:hover:text-neutral-50
             py-1.5
             px-2
             ${
@@ -65,15 +67,10 @@ export const ChatInputOption: React.FC<ChatInputOptionProps> = ({
           `}
             onClick={onClick}
           >
-            <Icon
-              size={size}
-              className="h-4 w-4 my-auto text-[#4a4a4a] group-hover:text-text flex-none"
-            />
+            <Icon size={size} className="h-4 w-4 my-auto  flex-none" />
             <div className={`flex items-center ${minimize && "mobile:hidden"}`}>
               {name && (
-                <span className="text-sm text-[#4a4a4a] group-hover:text-text break-all line-clamp-1">
-                  {name}
-                </span>
+                <span className="text-sm  break-all line-clamp-1">{name}</span>
               )}
               {toggle && (
                 <ChevronDownIcon className="flex-none ml-1" size={size - 4} />
diff --git a/web/src/app/chat/input/LLMPopover.tsx b/web/src/app/chat/input/LLMPopover.tsx
index bdf1112ca..eface2300 100644
--- a/web/src/app/chat/input/LLMPopover.tsx
+++ b/web/src/app/chat/input/LLMPopover.tsx
@@ -139,7 +139,7 @@ export default function LLMPopover({
       </PopoverTrigger>
       <PopoverContent
         align="start"
-        className="w-64 p-1 bg-background border border-gray-200 rounded-md shadow-lg flex flex-col"
+        className="w-64 p-1 bg-background border border-background-200 rounded-md shadow-lg flex flex-col"
       >
         <div className="flex-grow max-h-[300px] default-scrollbar overflow-y-auto">
           {llmOptions.map(({ name, icon, value }, index) => {
@@ -147,9 +147,9 @@ export default function LLMPopover({
               return (
                 <button
                   key={index}
-                  className={`w-full flex items-center gap-x-2 px-3 py-2 text-sm text-left hover:bg-gray-100 transition-colors duration-150 ${
+                  className={`w-full flex items-center gap-x-2 px-3 py-2 text-sm text-left hover:bg-background-100 dark:hover:bg-neutral-800 transition-colors duration-150 ${
                     currentLlm === name
-                      ? "bg-gray-100 text-text"
+                      ? "bg-background-100 dark:bg-neutral-900 text-text"
                       : "text-text-darker"
                   }`}
                   onClick={() => {
@@ -157,7 +157,11 @@ export default function LLMPopover({
                     setIsOpen(false);
                   }}
                 >
-                  {icon({ size: 16, className: "flex-none my-auto " })}
+                  {icon({
+                    size: 16,
+                    className: "flex-none my-auto text-black",
+                  })}
+                  asdfasdf
                   <span className="line-clamp-1 ">
                     {getDisplayNameForModel(name)}
                   </span>
@@ -193,7 +197,7 @@ export default function LLMPopover({
           })}
         </div>
         {user?.preferences?.temperature_override_enabled && (
-          <div className="mt-2 pt-2 border-t border-gray-200">
+          <div className="mt-2 pt-2 border-t border-background-200">
             <div className="w-full px-3 py-2">
               <Slider
                 value={[localTemperature]}
@@ -204,7 +208,7 @@ export default function LLMPopover({
                 onValueCommit={handleTemperatureChangeComplete}
                 className="w-full"
               />
-              <div className="flex justify-between text-xs text-gray-500 mt-2">
+              <div className="flex justify-between text-xs text-text-500 mt-2">
                 <span>Temperature (creativity)</span>
                 <span>{localTemperature.toFixed(1)}</span>
               </div>
diff --git a/web/src/app/chat/input/SelectedFilterDisplay.tsx b/web/src/app/chat/input/SelectedFilterDisplay.tsx
index 92d398ce9..9a8d952ec 100644
--- a/web/src/app/chat/input/SelectedFilterDisplay.tsx
+++ b/web/src/app/chat/input/SelectedFilterDisplay.tsx
@@ -40,7 +40,7 @@ const SelectedFilter = ({
       px-2 
       w-fit 
       select-none 
-      hover:bg-hover 
+      hover:bg-accent-background-hovered 
       bg-background 
       shadow-md 
     "
diff --git a/web/src/app/chat/input/SimplifiedChatInputBar.tsx b/web/src/app/chat/input/SimplifiedChatInputBar.tsx
index 5b546b7f9..63def620f 100644
--- a/web/src/app/chat/input/SimplifiedChatInputBar.tsx
+++ b/web/src/app/chat/input/SimplifiedChatInputBar.tsx
@@ -90,7 +90,7 @@ export function SimplifiedChatInputBar({
               flex
               flex-col
               border
-              border-[#E5E7EB]
+              border-background-200
               rounded-lg
               relative
               text-text-chatbar
@@ -232,10 +232,12 @@ export function SimplifiedChatInputBar({
           }}
         >
           <SendIcon
-            size={28}
-            className={`text-emphasis text-white p-1 rounded-full  ${
-              message ? "bg-submit-background" : "bg-disabled-submit-background"
-            } `}
+            size={22}
+            className={`text-neutral-50 dark:text-neutral-900 p-1 my-auto rounded-full ${
+              message
+                ? "bg-neutral-900 dark:bg-neutral-50"
+                : "bg-neutral-500 dark:bg-neutral-400"
+            }`}
           />
         </button>
       </div>
diff --git a/web/src/app/chat/message/AgenticMessage.tsx b/web/src/app/chat/message/AgenticMessage.tsx
index 56192e322..637a17671 100644
--- a/web/src/app/chat/message/AgenticMessage.tsx
+++ b/web/src/app/chat/message/AgenticMessage.tsx
@@ -680,7 +680,7 @@ function MessageSwitcher({
         onClick={currentPage === 1 ? undefined : handlePrevious}
       />
 
-      <span className="text-emphasis select-none">
+      <span className="text-text-darker select-none">
         {currentPage} / {totalPages}
       </span>
 
diff --git a/web/src/app/chat/message/CodeBlock.tsx b/web/src/app/chat/message/CodeBlock.tsx
index 5ab6b73b5..681e0822d 100644
--- a/web/src/app/chat/message/CodeBlock.tsx
+++ b/web/src/app/chat/message/CodeBlock.tsx
@@ -60,10 +60,10 @@ export const CodeBlock = memo(function CodeBlock({
       <span
         className={`
           font-mono 
-          text-gray-800 
-          bg-gray-50 
+          text-text-800 
+          bg-background-50 
           border 
-          border-gray-300 
+          border-background-300 
           rounded 
           align-bottom
           px-1
diff --git a/web/src/app/chat/message/ContinueMessage.tsx b/web/src/app/chat/message/ContinueMessage.tsx
index e60a13a53..91062f0ac 100644
--- a/web/src/app/chat/message/ContinueMessage.tsx
+++ b/web/src/app/chat/message/ContinueMessage.tsx
@@ -27,7 +27,7 @@ export function ContinueGenerating({
           </>
         </EmphasizedClickable>
         {showExplanation && (
-          <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap">
+          <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-1 bg-background-800 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap">
             LLM reached its token limit. Click to continue.
           </div>
         )}
diff --git a/web/src/app/chat/message/DocumentsDisplay.tsx b/web/src/app/chat/message/DocumentsDisplay.tsx
index d26bbc43c..af2c70736 100644
--- a/web/src/app/chat/message/DocumentsDisplay.tsx
+++ b/web/src/app/chat/message/DocumentsDisplay.tsx
@@ -12,9 +12,9 @@ const DocumentsDisplay: React.FC<DocumentsDisplayProps> = ({ documents }) => {
   const toggleExpand = () => setIsExpanded(!isExpanded);
 
   return (
-    <div className="w-full border border-gray-200 rounded-lg overflow-hidden">
+    <div className="w-full border border-background-200 rounded-lg overflow-hidden">
       <div
-        className="flex justify-between items-center p-4 bg-gray-50 cursor-pointer"
+        className="flex justify-between items-center p-4 bg-background-50 cursor-pointer"
         onClick={toggleExpand}
       >
         <h3 className="text-lg font-semibold">Sources</h3>
@@ -25,15 +25,15 @@ const DocumentsDisplay: React.FC<DocumentsDisplayProps> = ({ documents }) => {
           {documents.map((doc, index) => (
             <div
               key={index}
-              className="bg-white p-4 rounded-lg shadow-sm border border-gray-100"
+              className="bg-white p-4 rounded-lg shadow-sm border border-background-100"
             >
               <div className="flex items-start space-x-3">
-                <FiFile className="text-gray-400 mt-1" />
+                <FiFile className="text-text-400 mt-1" />
                 <div>
                   <h4 className="font-medium text-sm mb-1 line-clamp-1">
                     {doc.semantic_identifier || "Unknown Source"}
                   </h4>
-                  <p className="text-xs text-gray-600 line-clamp-3">
+                  <p className="text-xs text-text-600 line-clamp-3">
                     {doc.blurb}
                   </p>
                 </div>
diff --git a/web/src/app/chat/message/MemoizedTextComponents.tsx b/web/src/app/chat/message/MemoizedTextComponents.tsx
index c4f7da196..729fbb945 100644
--- a/web/src/app/chat/message/MemoizedTextComponents.tsx
+++ b/web/src/app/chat/message/MemoizedTextComponents.tsx
@@ -181,7 +181,7 @@ export const MemoizedParagraph = memo(
   function MemoizedParagraph({ children, fontSize }: any) {
     return (
       <p
-        className={`text-default my-0 ${
+        className={`text-neutral-900 dark:text-neutral-200 my-0 ${
           fontSize === "sm" ? "leading-tight text-sm" : ""
         }`}
       >
diff --git a/web/src/app/chat/message/Messages.tsx b/web/src/app/chat/message/Messages.tsx
index 242f89039..44892ebca 100644
--- a/web/src/app/chat/message/Messages.tsx
+++ b/web/src/app/chat/message/Messages.tsx
@@ -64,7 +64,8 @@ import { MemoizedAnchor, MemoizedParagraph } from "./MemoizedTextComponents";
 import { extractCodeText, preprocessLaTeX } from "./codeUtils";
 import ToolResult from "../../../components/tools/ToolResult";
 import CsvContent from "../../../components/tools/CSVContent";
-import SourceCard, { SeeMoreBlock } from "@/components/chat/sources/SourceCard";
+import { SeeMoreBlock } from "@/components/chat/sources/SourceCard";
+import { SourceCard } from "./SourcesDisplay";
 import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
 import "katex/dist/katex.min.css";
@@ -212,7 +213,7 @@ export const AIMessage = ({
   retrievalDisabled?: boolean;
   overriddenModel?: string;
   regenerate?: (modelOverRide: LlmOverride) => Promise<void>;
-  setPresentingDocument?: (document: OnyxDocument) => void;
+  setPresentingDocument: (document: OnyxDocument) => void;
 }) => {
   const toolCallGenerating = toolCall && !toolCall.tool_result;
 
@@ -341,6 +342,9 @@ export const AIMessage = ({
     () => ({
       a: anchorCallback,
       p: paragraphCallback,
+      b: ({ node, className, children }: any) => {
+        return <span className={className}>||||{children}</span>;
+      },
       code: ({ node, className, children }: any) => {
         const codeText = extractCodeText(
           node,
@@ -398,7 +402,7 @@ export const AIMessage = ({
     <div
       id={isComplete ? "onyx-ai-message" : undefined}
       ref={trackedElementRef}
-      className={`py-5 ml-4 lg:px-5 relative flex `}
+      className={`py-5 text-text ml-4 lg:px-5 relative flex `}
     >
       <div
         className={`mx-auto ${
@@ -406,7 +410,7 @@ export const AIMessage = ({
         }  max-w-message-max`}
       >
         <div className={`lg:mr-12 ${!shared && "mobile:ml-0 md:ml-8"}`}>
-          <div className="flex">
+          <div className="flex items-start">
             <AssistantIcon
               className="mobile:hidden"
               size={24}
@@ -496,7 +500,7 @@ export const AIMessage = ({
                                 .slice(0, 2)
                                 .map((doc: OnyxDocument, ind: number) => (
                                   <SourceCard
-                                    doc={doc}
+                                    document={doc}
                                     key={ind}
                                     setPresentingDocument={
                                       setPresentingDocument
@@ -650,6 +654,7 @@ export const AIMessage = ({
                               onClick={() => handleFeedback("dislike")}
                             />
                           </CustomTooltip>
+
                           {regenerate && (
                             <CustomTooltip
                               disabled={isRegenerateDropdownVisible}
@@ -796,7 +801,7 @@ function MessageSwitcher({
         onClick={currentPage === 1 ? undefined : handlePrevious}
       />
 
-      <span className="text-emphasis select-none">
+      <span className="text-text-darker select-none">
         {currentPage} / {totalPages}
       </span>
 
@@ -907,7 +912,7 @@ export const HumanMessage = ({
                         break-word
                         overscroll-contain
                         outline-none 
-                        placeholder-gray-400 
+                        placeholder-text-400 
                         resize-none
                         text-text-editing-message
                         pl-4
@@ -940,7 +945,7 @@ export const HumanMessage = ({
                         <button
                           className={`
                           w-fit
-                          bg-accent 
+                          bg-agent 
                           text-inverted 
                           text-sm
                           rounded-lg 
@@ -972,7 +977,7 @@ export const HumanMessage = ({
                           bg-background-strong 
                           text-sm
                           rounded-lg
-                          hover:bg-hover-emphasis
+                          hover:bg-accent-background-hovered-emphasis
                         `}
                           onClick={() => {
                             setEditedContent(content);
@@ -995,7 +1000,7 @@ export const HumanMessage = ({
                           <Tooltip>
                             <TooltipTrigger>
                               <HoverableIcon
-                                icon={<FiEdit2 className="text-gray-600" />}
+                                icon={<FiEdit2 className="text-text-600" />}
                                 onClick={() => {
                                   setIsEditing(true);
                                   setIsHovered(false);
@@ -1018,7 +1023,7 @@ export const HumanMessage = ({
                           !isEditing &&
                           (!files || files.length === 0)
                         ) && "ml-auto"
-                      } relative flex-none max-w-[70%] mb-auto whitespace-break-spaces rounded-3xl bg-user px-5 py-2.5`}
+                      } relative text-text flex-none max-w-[70%] mb-auto whitespace-break-spaces rounded-3xl bg-user px-5 py-2.5`}
                     >
                       {content}
                     </div>
diff --git a/web/src/app/chat/message/SearchSummary.tsx b/web/src/app/chat/message/SearchSummary.tsx
index 4fce7fa38..610613a6b 100644
--- a/web/src/app/chat/message/SearchSummary.tsx
+++ b/web/src/app/chat/message/SearchSummary.tsx
@@ -134,7 +134,7 @@ export function SearchSummary({
               ))}
             {Array.from(new Set(docs.map((doc) => doc.source_type))).length >
               3 && (
-              <div className="rounded-full bg-gray-200 w-3.5 h-3.5 flex items-center justify-center">
+              <div className="rounded-full bg-background-200 w-3.5 h-3.5 flex items-center justify-center">
                 <span className="text-[8px]">
                   +
                   {Array.from(new Set(docs.map((doc) => doc.source_type)))
@@ -225,7 +225,7 @@ export function SearchSummary({
               <Tooltip>
                 <TooltipTrigger asChild>
                   <button
-                    className="ml-2 -my-2 mobile:hidden hover:bg-hover p-1 rounded flex-shrink-0 group-hover:opacity-100 opacity-0"
+                    className="ml-2 -my-2 mobile:hidden hover:bg-accent-background-hovered p-1 rounded flex-shrink-0 group-hover:opacity-100 opacity-0"
                     onClick={() => {
                       setIsEditing(true);
                     }}
diff --git a/web/src/app/chat/message/SkippedSearch.tsx b/web/src/app/chat/message/SkippedSearch.tsx
index 159bdfc97..45e9b5fc0 100644
--- a/web/src/app/chat/message/SkippedSearch.tsx
+++ b/web/src/app/chat/message/SkippedSearch.tsx
@@ -25,7 +25,7 @@ export function SkippedSearch({
             <>
               <BasicClickable
                 onClick={handleForceSearch}
-                className="ml-auto mr-4 -my-1 text-xs mobile:hidden bg-background/80 rounded-md px-2 py-1 cursor-pointer"
+                className="ml-auto mr-4 -my-1 text-xs mobile:hidden bg-background/80 rounded-md px-2 py-1 cursor-pointer dark:hover:bg-neutral-700 dark:text-neutral-200"
               >
                 Force search?
               </BasicClickable>
diff --git a/web/src/app/chat/message/SourcesDisplay.tsx b/web/src/app/chat/message/SourcesDisplay.tsx
index bd2111473..15e3cd75a 100644
--- a/web/src/app/chat/message/SourcesDisplay.tsx
+++ b/web/src/app/chat/message/SourcesDisplay.tsx
@@ -15,7 +15,7 @@ interface SourcesDisplayProps {
   setPresentingDocument: (document: OnyxDocument) => void;
 }
 
-const SourceCard: React.FC<{
+export const SourceCard: React.FC<{
   document: OnyxDocument;
   hideDocumentDisplay?: boolean;
   setPresentingDocument: (document: OnyxDocument) => void;
@@ -33,15 +33,15 @@ const SourceCard: React.FC<{
       onClick={() =>
         openDocument(document, () => setPresentingDocument(document))
       }
-      className="w-full max-w-[260px] h-[80px] p-3 bg-[#f1eee8]
-             text-left hover:bg-[#ebe7de]
+      className="w-full max-w-[260px] h-[80px] p-3
+             text-left bg-accent-background hover:bg-accent-background-hovered dark:bg-accent-background-hovered dark:hover:bg-neutral-700/80
              cursor-pointer rounded-lg
              flex flex-col justify-between
              overflow-hidden"
     >
       <div
         className="
-        text-black text-xs
+        text-text-900 text-xs
         font-medium leading-tight
         whitespace-normal
         break-all
@@ -54,7 +54,7 @@ const SourceCard: React.FC<{
 
       <div className="flex items-center gap-1 mt-1">
         <ResultIcon doc={document} size={18} />
-        <div className="text-[#4a4a4a] text-xs leading-tight truncate flex-1 min-w-0">
+        <div className="text-text-700 text-xs leading-tight truncate flex-1 min-w-0">
           {truncatedIdentifier}
         </div>
       </div>
diff --git a/web/src/app/chat/message/SubQuestionsDisplay.tsx b/web/src/app/chat/message/SubQuestionsDisplay.tsx
index 55ca27547..58f571f96 100644
--- a/web/src/app/chat/message/SubQuestionsDisplay.tsx
+++ b/web/src/app/chat/message/SubQuestionsDisplay.tsx
@@ -317,7 +317,7 @@ const SubQuestionDisplay: React.FC<{
       <div
         className={`absolute left-[5px] ${
           isFirst ? "top-[15px]" : "top-0"
-        } bottom-0 w-[2px] bg-neutral-200
+        } bottom-0 w-[2px] bg-background-200
 
         ${isLast && !toggled ? "h-4" : "h-full"}`}
       />
@@ -331,7 +331,7 @@ const SubQuestionDisplay: React.FC<{
         </div>
         <div className="ml-8 w-full">
           <div
-            className="flex -mx-2 rounded-md px-2 hover:bg-[#F5F3ED] items-start py-1.5 my-.5 cursor-pointer"
+            className="flex -mx-2 rounded-md px-2 hover:bg-background-100 dark:hover:bg-neutral-800 items-start py-1.5 my-.5 cursor-pointer"
             onClick={() => setToggled(!toggled)}
           >
             <div className="text-black text-base font-medium leading-normal flex-grow pr-2">
@@ -359,7 +359,7 @@ const SubQuestionDisplay: React.FC<{
                 >
                   <div className="pl-0 pb-2">
                     <div className="mb-4 flex flex-col gap-2">
-                      <div className="text-[#4a4a4a] text-xs font-medium leading-normal">
+                      <div className="text-text-800 text-xs font-medium leading-normal">
                         Searching
                       </div>
                       <div className="flex flex-wrap gap-2">
@@ -376,7 +376,7 @@ const SubQuestionDisplay: React.FC<{
 
                     {(subQuestion?.is_complete || memoizedDocs?.length > 0) && (
                       <div className="mb-4 flex flex-col gap-2">
-                        <div className="text-[#4a4a4a] text-xs font-medium leading-normal">
+                        <div className="text-text-800 text-xs font-medium leading-normal">
                           Reading
                         </div>
                         <div className="flex flex-wrap gap-2">
@@ -413,7 +413,7 @@ const SubQuestionDisplay: React.FC<{
                       subQuestion?.answer?.length > 0) && (
                       <div className="flex flex-col gap-2">
                         <div
-                          className="text-[#4a4a4a] cursor-pointer items-center text-xs flex gap-x-1 font-medium leading-normal"
+                          className="text-text-800 cursor-pointer items-center text-xs flex gap-x-1 font-medium leading-normal"
                           onClick={() => setAnalysisToggled(!analysisToggled)}
                         >
                           Analyzing
@@ -447,7 +447,7 @@ const SubQuestionDisplay: React.FC<{
               >
                 <div className="pl-0">
                   <div className="flex flex-col gap-2">
-                    <div className="leading-none text-[#4a4a4a] text-xs font-medium">
+                    <div className="leading-none text-text-800 text-xs font-medium">
                       {temporaryDisplay?.tinyQuestion}
                     </div>
                   </div>
diff --git a/web/src/app/chat/modal/FeedbackModal.tsx b/web/src/app/chat/modal/FeedbackModal.tsx
index 6aeb725e0..6f9978973 100644
--- a/web/src/app/chat/modal/FeedbackModal.tsx
+++ b/web/src/app/chat/modal/FeedbackModal.tsx
@@ -55,7 +55,7 @@ export const FeedbackModal = ({
   return (
     <Modal onOutsideClick={onClose} width="w-full max-w-3xl">
       <>
-        <h2 className="text-2xl text-emphasis font-bold mb-4 flex">
+        <h2 className="text-2xl text-text-darker font-bold mb-4 flex">
           <div className="mr-1 my-auto">
             {feedbackType === "like" ? (
               <FilledLikeIcon
@@ -76,7 +76,7 @@ export const FeedbackModal = ({
           {predefinedFeedbackOptions.map((feedback, index) => (
             <button
               key={index}
-              className={`bg-background-dark hover:bg-hover text-default py-2 px-4 rounded m-1 
+              className={`bg-background-dark hover:bg-accent-background-hovered text-default py-2 px-4 rounded m-1 
                 ${predefinedFeedback === feedback && "ring-2 ring-accent/20"}`}
               onClick={() => handlePredefinedFeedback(feedback)}
             >
@@ -109,7 +109,7 @@ export const FeedbackModal = ({
 
         <div className="flex mt-2">
           <button
-            className="bg-accent text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none mx-auto"
+            className="bg-agent text-white py-2 px-4 rounded hover:bg-agent/50 focus:outline-none mx-auto"
             onClick={handleSubmit}
           >
             Submit feedback
diff --git a/web/src/app/chat/modal/MakePublicAssistantModal.tsx b/web/src/app/chat/modal/MakePublicAssistantModal.tsx
index a410453f6..a4bda3b47 100644
--- a/web/src/app/chat/modal/MakePublicAssistantModal.tsx
+++ b/web/src/app/chat/modal/MakePublicAssistantModal.tsx
@@ -15,7 +15,7 @@ export function MakePublicAssistantModal({
   return (
     <Modal onOutsideClick={onClose} width="max-w-3xl">
       <div className="space-y-6">
-        <h2 className="text-2xl font-bold text-emphasis">
+        <h2 className="text-2xl font-bold text-text-darker">
           {isPublic ? "Public Assistant" : "Make Assistant Public"}
         </h2>
 
diff --git a/web/src/app/chat/modal/ShareChatSessionModal.tsx b/web/src/app/chat/modal/ShareChatSessionModal.tsx
index e438f0a3c..52acaf4d4 100644
--- a/web/src/app/chat/modal/ShareChatSessionModal.tsx
+++ b/web/src/app/chat/modal/ShareChatSessionModal.tsx
@@ -13,6 +13,7 @@ import { usePopup } from "@/components/admin/connectors/Popup";
 import { structureValue } from "@/lib/llm/utils";
 import { LlmOverride } from "@/lib/hooks";
 import { Separator } from "@/components/ui/separator";
+import { AdvancedOptionsToggle } from "@/components/AdvancedOptionsToggle";
 
 function buildShareLink(chatSessionId: string) {
   const baseUrl = `${window.location.protocol}//${window.location.host}`;
@@ -99,14 +100,15 @@ export function ShareChatSessionModal({
       : ""
   );
   const { popup, setPopup } = usePopup();
+  const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
 
   return (
     <>
       {popup}
-      <Modal onOutsideClick={onClose} width="max-w-3xl">
+      <Modal onOutsideClick={onClose} width="w-full max-w-3xl">
         <>
           <div className="flex mb-4">
-            <h2 className="text-2xl text-emphasis font-bold flex my-auto">
+            <h2 className="text-2xl text-text-darker font-bold flex my-auto">
               Share link to Chat
             </h2>
           </div>
@@ -181,7 +183,7 @@ export function ShareChatSessionModal({
                       }
                     }}
                     size="sm"
-                    variant="submit"
+                    variant="secondary"
                   >
                     Generate and Copy Share Link
                   </Button>
@@ -191,47 +193,56 @@ export function ShareChatSessionModal({
           </div>
 
           <Separator className="my-4" />
-          <div className="mb-4">
-            <Callout type="notice" title="Seed New Chat">
-              Generate a link to a new chat session with the same settings as
-              this chat (including the assistant and model).
-            </Callout>
-          </div>
-          <div className="flex w-full justify-between">
-            <Button
-              icon={FiCopy}
-              onClick={async () => {
-                // NOTE: for "insecure" non-https setup, the `navigator.clipboard.writeText` may fail
-                // as the browser may not allow the clipboard to be accessed.
-                try {
-                  const seedLink = await generateSeedLink(
-                    message,
-                    assistantId,
-                    modelOverride
-                  );
-                  if (!seedLink) {
-                    setPopup({
-                      message: "Failed to generate seed link",
-                      type: "error",
-                    });
-                  } else {
-                    navigator.clipboard.writeText(seedLink);
-                    setPopup({
-                      message: "Link copied to clipboard!",
-                      type: "success",
-                    });
-                  }
-                } catch (e) {
-                  console.error(e);
-                  alert("Failed to generate or copy link.");
-                }
-              }}
-              size="sm"
-              variant="secondary"
-            >
-              Generate and Copy Seed Link
-            </Button>
-          </div>
+
+          <AdvancedOptionsToggle
+            showAdvancedOptions={showAdvancedOptions}
+            setShowAdvancedOptions={setShowAdvancedOptions}
+            title="Advanced Options"
+          />
+
+          {showAdvancedOptions && (
+            <>
+              <div className="mb-4">
+                <Callout type="notice" title="Seed New Chat">
+                  Generate a link to a new chat session with the same settings
+                  as this chat (including the assistant and model).
+                </Callout>
+              </div>
+              <div className="flex w-full justify-between">
+                <Button
+                  icon={FiCopy}
+                  onClick={async () => {
+                    try {
+                      const seedLink = await generateSeedLink(
+                        message,
+                        assistantId,
+                        modelOverride
+                      );
+                      if (!seedLink) {
+                        setPopup({
+                          message: "Failed to generate seed link",
+                          type: "error",
+                        });
+                      } else {
+                        navigator.clipboard.writeText(seedLink);
+                        setPopup({
+                          message: "Link copied to clipboard!",
+                          type: "success",
+                        });
+                      }
+                    } catch (e) {
+                      console.error(e);
+                      alert("Failed to generate or copy link.");
+                    }
+                  }}
+                  size="sm"
+                  variant="secondary"
+                >
+                  Generate and Copy Seed Link
+                </Button>
+              </div>
+            </>
+          )}
         </>
       </Modal>
     </>
diff --git a/web/src/app/chat/modal/ThemeToggle.tsx b/web/src/app/chat/modal/ThemeToggle.tsx
new file mode 100644
index 000000000..f26058c9b
--- /dev/null
+++ b/web/src/app/chat/modal/ThemeToggle.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import * as React from "react";
+import { Moon, Sun, Laptop } from "lucide-react";
+import { useTheme } from "next-themes";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function ModeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem
+          onClick={() => setTheme("light")}
+          className={
+            theme === "light" ? "bg-neutral-100 dark:bg-neutral-800" : ""
+          }
+        >
+          <Sun className="mr-2 h-4 w-4" />
+          <span>Light</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => setTheme("dark")}
+          className={
+            theme === "dark" ? "bg-neutral-100 dark:bg-neutral-800" : ""
+          }
+        >
+          <Moon className="mr-2 h-4 w-4" />
+          <span>Dark</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => setTheme("system")}
+          className={
+            theme === "system" ? "bg-neutral-100 dark:bg-neutral-800" : ""
+          }
+        >
+          <Laptop className="mr-2 h-4 w-4" />
+          <span>System</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/web/src/app/chat/modal/UserSettingsModal.tsx b/web/src/app/chat/modal/UserSettingsModal.tsx
index d5fccf3dd..269761bd3 100644
--- a/web/src/app/chat/modal/UserSettingsModal.tsx
+++ b/web/src/app/chat/modal/UserSettingsModal.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useRef } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { Modal } from "@/components/Modal";
 import { getDisplayNameForModel, LlmOverride } from "@/lib/hooks";
 import { LLMProviderDescriptor } from "@/app/admin/configuration/llm/interfaces";
@@ -15,6 +15,16 @@ import { SettingsContext } from "@/components/settings/SettingsProvider";
 import { useChatContext } from "@/components/context/ChatContext";
 import { InputPromptsSection } from "./InputPromptsSection";
 import { LLMSelector } from "@/components/llm/LLMSelector";
+import { ModeToggle } from "./ThemeToggle";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Monitor } from "lucide-react";
+import { useTheme } from "next-themes";
 
 export function UserSettingsModal({
   setPopup,
@@ -39,6 +49,8 @@ export function UserSettingsModal({
   } = useUser();
   const containerRef = useRef<HTMLDivElement>(null);
   const messageRef = useRef<HTMLDivElement>(null);
+  const { theme, setTheme } = useTheme();
+  const [selectedTheme, setSelectedTheme] = useState(theme);
 
   useEffect(() => {
     const container = containerRef.current;
@@ -155,16 +167,21 @@ export function UserSettingsModal({
       : user?.preferences?.auto_scroll;
 
   return (
-    <Modal onOutsideClick={onClose} width="rounded-lg w-full bg-white max-w-xl">
-      <>
-        <div className="flex mb-4">
-          <h2 className="text-2xl text-emphasis font-bold flex my-auto">
-            User settings
-          </h2>
+    <Modal onOutsideClick={onClose} width="rounded-lg w-full max-w-xl">
+      <div className="p-2">
+        <div>
+          <h2 className="text-2xl font-bold">User settings</h2>
         </div>
 
-        <div className="flex flex-col gap-y-2">
-          <div className="flex items-center gap-x-2">
+        <div className="space-y-6 py-4">
+          {/* Auto-scroll Section */}
+          <div className="flex items-center justify-between">
+            <div className="space-y-1">
+              <h4 className="text-base font-medium">Auto-scroll</h4>
+              <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                Automatically scroll to new content
+              </p>
+            </div>
             <Switch
               size="sm"
               checked={checked}
@@ -172,9 +189,16 @@ export function UserSettingsModal({
                 updateUserAutoScroll(checked);
               }}
             />
-            <Label className="text-sm">Enable auto-scroll</Label>
           </div>
-          <div className="flex items-center gap-x-2">
+
+          {/* Prompt Shortcuts Section */}
+          <div className="flex items-center justify-between">
+            <div className="space-y-1">
+              <h4 className="text-base font-medium">Prompt Shortcuts</h4>
+              <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                Enable keyboard shortcuts for prompts
+              </p>
+            </div>
             <Switch
               size="sm"
               checked={user?.preferences?.shortcut_enabled}
@@ -182,9 +206,16 @@ export function UserSettingsModal({
                 updateUserShortcuts(checked);
               }}
             />
-            <Label className="text-sm">Enable Prompt Shortcuts</Label>
           </div>
-          <div className="flex items-center gap-x-2">
+
+          {/* Temperature Override Section */}
+          <div className="flex items-center justify-between">
+            <div className="space-y-1">
+              <h4 className="text-base font-medium">Temperature Override</h4>
+              <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                Override default temperature settings
+              </p>
+            </div>
             <Switch
               size="sm"
               checked={user?.preferences?.temperature_override_enabled}
@@ -192,53 +223,69 @@ export function UserSettingsModal({
                 updateUserTemperatureOverrideEnabled(checked);
               }}
             />
-            <Label className="text-sm">Enable Temperature Override</Label>
           </div>
-        </div>
 
-        <Separator />
+          <Separator className="my-4" />
 
-        <h3 className="text-lg text-emphasis font-bold mb-2 ">Default Model</h3>
-        <div
-          className="w-full max-h-96 overflow-y-auto flex text-sm flex-col border rounded-md"
-          ref={containerRef}
-        >
-          <div
-            ref={messageRef}
-            className="sticky top-0 bg-background-100 p-2 text-xs text-emphasis font-medium"
-            style={{ display: "none" }}
-          >
-            Scroll to see all options
+          {/* Theme Section */}
+          <div className="space-y-3">
+            <h4 className="text-base font-medium">Theme</h4>
+            <Select
+              value={selectedTheme}
+              onValueChange={(value) => {
+                setSelectedTheme(value);
+                setTheme(value);
+              }}
+            >
+              <SelectTrigger className="w-full">
+                <div className="flex items-center gap-2">
+                  <Monitor className="h-4 w-4" />
+                  <SelectValue placeholder="Select theme" />
+                </div>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="system">System</SelectItem>
+                <SelectItem value="light">Light</SelectItem>
+                <SelectItem value="dark">Dark</SelectItem>
+              </SelectContent>
+            </Select>
           </div>
-          <LLMSelector
-            userSettings
-            llmProviders={llmProviders}
-            currentLlm={
-              defaultModelDestructured
-                ? structureValue(
-                    defaultModelDestructured.provider,
-                    "",
-                    defaultModelDestructured.modelName
-                  )
-                : null
-            }
-            requiresImageGeneration={false}
-            onSelect={(selected) => {
-              if (selected === null) {
-                handleChangedefaultModel(null);
-              } else {
-                const { modelName, provider, name } =
-                  destructureValue(selected);
-                if (modelName && name) {
-                  handleChangedefaultModel(
-                    structureValue(provider, "", modelName)
-                  );
-                }
+
+          <Separator className="my-4" />
+
+          {/* Default Model Section */}
+          <div className="space-y-3">
+            <h4 className="text-base font-medium">Default Model</h4>
+            <LLMSelector
+              userSettings
+              llmProviders={llmProviders}
+              currentLlm={
+                defaultModel
+                  ? structureValue(
+                      destructureValue(defaultModel).provider,
+                      "",
+                      destructureValue(defaultModel).modelName
+                    )
+                  : null
               }
-            }}
-          />
+              requiresImageGeneration={false}
+              onSelect={(selected) => {
+                if (selected === null) {
+                  handleChangedefaultModel(null);
+                } else {
+                  const { modelName, provider, name } =
+                    destructureValue(selected);
+                  if (modelName && name) {
+                    handleChangedefaultModel(
+                      structureValue(provider, "", modelName)
+                    );
+                  }
+                }
+              }}
+            />
+          </div>
         </div>
-      </>
+      </div>
     </Modal>
   );
 }
diff --git a/web/src/app/chat/nrf/NRFPage.tsx b/web/src/app/chat/nrf/NRFPage.tsx
index e7bf4e062..a1e2941b4 100644
--- a/web/src/app/chat/nrf/NRFPage.tsx
+++ b/web/src/app/chat/nrf/NRFPage.tsx
@@ -225,7 +225,7 @@ export default function NRFPage({
           onClick={toggleSettings}
           className="bg-white bg-opacity-70 rounded-full p-2.5 cursor-pointer hover:bg-opacity-80 transition-colors duration-200"
         >
-          <Menu size={12} className="text-neutral-900" />
+          <Menu size={12} className="text-text-900" />
         </button>
       </div>
 
@@ -238,7 +238,7 @@ export default function NRFPage({
             <div className="pointer-events-auto absolute top-[40%] left-1/2 -translate-x-1/2 -translate-y-1/2 text-center w-[90%] lg:max-w-3xl">
               <h1
                 className={`pl-2 text-xl text-left w-full mb-4 ${
-                  theme === "light" ? "text-neutral-800" : "text-white"
+                  theme === "light" ? "text-text-800" : "text-white"
                 }`}
               >
                 {isNight
@@ -364,7 +364,7 @@ export default function NRFPage({
                 Welcome to Onyx
               </h2>
               <Button
-                className="bg-accent w-full hover:bg-accent-hover text-white"
+                className="bg-agent w-full hover:bg-accent-hover text-white"
                 onClick={() => {
                   if (window.top) {
                     window.top.location.href = "/auth/login";
diff --git a/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx b/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx
index 9df1733dc..f4a1a565d 100644
--- a/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx
+++ b/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx
@@ -226,7 +226,7 @@ export function ChatSessionDisplay({
               <div
                 className={`flex  ${
                   isRenamingChat ? "-mr-2" : ""
-                } text-text-darker text-sm leading-normal relative gap-x-2`}
+                } text-text-dark text-sm leading-normal relative gap-x-2`}
               >
                 {isRenamingChat ? (
                   <div className="flex items-center w-full" ref={renamingRef}>
@@ -248,7 +248,7 @@ export function ChatSessionDisplay({
                         className="w-full text-sm bg-transparent border-b border-text-darker outline-none"
                       />
                     </div>
-                    <div className="flex text-[#6c6c6c] flex-none">
+                    <div className="flex text-text-500 flex-none">
                       <button onClick={onRename} className="p-1">
                         <FiCheck size={14} />
                       </button>
@@ -267,10 +267,10 @@ export function ChatSessionDisplay({
                     </div>
                   </div>
                 ) : (
-                  <p className="break-all font-normal overflow-hidden whitespace-nowrap w-full mr-3 relative">
+                  <p className="break-all font-normal overflow-hidden dark:text-[#D4D4D4] whitespace-nowrap w-full mr-3 relative">
                     {chatName || `Unnamed Chat`}
                     <span
-                      className={`absolute right-0 top-0 h-full w-8 bg-gradient-to-r from-transparent 
+                      className={`absolute right-0 top-0 h-full w-2 bg-gradient-to-r from-transparent 
                       ${
                         isSelected
                           ? "to-background-chat-selected"
@@ -325,7 +325,7 @@ export function ChatSessionDisplay({
                             }
                             popover={
                               <div
-                                className={`border border-border rounded-lg bg-background z-50 ${
+                                className={`border border-border text-text-dark rounded-lg bg-background z-50 ${
                                   isDeleteModalOpen ? "w-64" : "w-32"
                                 }`}
                               >
@@ -360,7 +360,7 @@ export function ChatSessionDisplay({
                                     </p>
                                     <div className="flex justify-center gap-2">
                                       <button
-                                        className="px-3 py-1 text-sm bg-gray-200 rounded"
+                                        className="px-3 py-1 text-sm bg-background-200 rounded"
                                         onClick={handleCancelDelete}
                                       >
                                         Cancel
diff --git a/web/src/app/chat/sessionSidebar/HistorySidebar.tsx b/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
index 5b5aa970a..7685072e6 100644
--- a/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
+++ b/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
@@ -142,13 +142,13 @@ const SortableAssistant: React.FC<SortableAssistantProps> = ({
             : ""
         } relative flex items-center gap-x-2 py-1 px-2 rounded-md`}
       >
-        <AssistantIcon assistant={assistant} size={20} className="flex-none" />
+        <AssistantIcon assistant={assistant} size={16} className="flex-none" />
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
               <p
                 ref={nameRef}
-                className="text-base text-left w-fit line-clamp-1 text-ellipsis text-black"
+                className="text-base text-left w-fit line-clamp-1 text-ellipsis text-black dark:text-[#D4D4D4]"
               >
                 {assistant.name}
               </p>
@@ -271,6 +271,8 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
             bg-background-sidebar
             w-full
             border-r 
+            dark:border-none
+            dark:text-[#D4D4D4]
             border-sidebar-border 
             flex 
             flex-col relative
@@ -291,7 +293,7 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
           {page == "chat" && (
             <div className="px-4 px-1 -mx-2 gap-y-1 flex-col text-text-history-sidebar-button flex gap-x-1.5 items-center items-center">
               <Link
-                className="w-full px-2 py-1 group rounded-md items-center hover:bg-hover cursor-pointer transition-all duration-150 flex gap-x-2"
+                className="w-full px-2 py-1 group rounded-md items-center hover:bg-accent-background-hovered cursor-pointer transition-all duration-150 flex gap-x-2"
                 href={
                   `/${page}` +
                   (currentChatSession
@@ -309,12 +311,12 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
               >
                 <NewChatIcon size={20} className="flex-none" />
                 <p className="my-auto flex font-normal  items-center ">
-                  Start New Chat
+                  New Chat
                 </p>
               </Link>
               {user?.preferences?.shortcut_enabled && (
                 <Link
-                  className="w-full px-2 py-1  rounded-md items-center hover:bg-hover cursor-pointer transition-all duration-150 flex gap-x-2"
+                  className="w-full px-2 py-1  rounded-md items-center hover:bg-accent-background-hovered cursor-pointer transition-all duration-150 flex gap-x-2"
                   href="/chat/input-prompts"
                 >
                   <DocumentIcon2
@@ -329,8 +331,8 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
             </div>
           )}
 
-          <div className="h-full relative overflow-x-hidden overflow-y-auto">
-            <div className="flex px-4 font-normal text-sm gap-x-2 leading-normal text-[#6c6c6c]/80 items-center font-normal leading-normal">
+          <div className="h-full  relative overflow-x-hidden overflow-y-auto">
+            <div className="flex px-4 font-normal text-sm gap-x-2 leading-normal text-text-500/80 dark:text-[#D4D4D4] items-center font-normal leading-normal">
               Assistants
             </div>
             <DndContext
@@ -373,7 +375,7 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
             <div className="w-full px-4">
               <button
                 onClick={() => setShowAssistantsModal(true)}
-                className="w-full cursor-pointer text-base text-black hover:bg-background-chat-hover flex items-center gap-x-2 py-1 px-2 rounded-md"
+                className="w-full cursor-pointer text-base text-black dark:text-[#D4D4D4] hover:bg-background-chat-hover flex items-center gap-x-2 py-1 px-2 rounded-md"
               >
                 Explore Assistants
               </button>
diff --git a/web/src/app/chat/sessionSidebar/PagesTab.tsx b/web/src/app/chat/sessionSidebar/PagesTab.tsx
index 2f5d09524..9a85f3693 100644
--- a/web/src/app/chat/sessionSidebar/PagesTab.tsx
+++ b/web/src/app/chat/sessionSidebar/PagesTab.tsx
@@ -318,7 +318,7 @@ export function PagesTab({
     <div className="flex flex-col gap-y-2 flex-grow">
       {popup}
       <div className="px-4 mt-2 group mr-2 bg-background-sidebar z-20">
-        <div className="flex justify-between text-sm gap-x-2 text-[#6c6c6c]/80 items-center font-normal leading-normal">
+        <div className="flex justify-between text-sm gap-x-2 text-text-300/80 items-center font-normal leading-normal">
           <p>Chats</p>
           <button
             onClick={handleCreateFolder}
@@ -332,7 +332,7 @@ export function PagesTab({
 
       {isCreatingFolder ? (
         <div className="px-4">
-          <div className="flex  overflow-visible items-center w-full text-[#6c6c6c] rounded-md p-1 relative">
+          <div className="flex  overflow-visible items-center w-full text-text-500 rounded-md p-1 relative">
             <Caret size={16} className="flex-none mr-1" />
             <input
               onKeyDown={(e) => {
@@ -343,7 +343,7 @@ export function PagesTab({
               ref={newFolderInputRef}
               type="text"
               placeholder="Enter group name"
-              className="text-sm font-medium bg-transparent outline-none w-full pb-1 border-b border-[#6c6c6c] transition-colors duration-200"
+              className="text-sm font-medium bg-transparent outline-none w-full pb-1 border-b border-background-500 transition-colors duration-200"
             />
             <div className="flex -my-1">
               <div
diff --git a/web/src/app/chat/shared/[chatId]/SharedChatDisplay.tsx b/web/src/app/chat/shared/[chatId]/SharedChatDisplay.tsx
index fb55aa99d..55942b15b 100644
--- a/web/src/app/chat/shared/[chatId]/SharedChatDisplay.tsx
+++ b/web/src/app/chat/shared/[chatId]/SharedChatDisplay.tsx
@@ -205,7 +205,7 @@ export function SharedChatDisplay({
                     <h1 className="text-3xl text-strong font-bold">
                       {chatSession.description || `Unnamed Chat`}
                     </h1>
-                    <p className=" text-emphasis">
+                    <p className=" text-text-darker">
                       {humanReadableFormat(chatSession.time_created)}
                     </p>
                     <div
diff --git a/web/src/app/chat/tools/GeneratingImageDisplay.tsx b/web/src/app/chat/tools/GeneratingImageDisplay.tsx
index 46df35d79..845755148 100644
--- a/web/src/app/chat/tools/GeneratingImageDisplay.tsx
+++ b/web/src/app/chat/tools/GeneratingImageDisplay.tsx
@@ -56,11 +56,11 @@ export default function GeneratingImageDisplay({ isCompleted = false }) {
   }, [isCompleted]);
 
   return (
-    <div className="object-cover object-center border border-neutral-200 bg-neutral-100 items-center justify-center overflow-hidden flex rounded-lg w-96 h-96 transition-opacity duration-300 opacity-100">
+    <div className="object-cover object-center border border-background-200 bg-background-100 items-center justify-center overflow-hidden flex rounded-lg w-96 h-96 transition-opacity duration-300 opacity-100">
       <div className="m-auto relative flex">
         <svg className="w-16 h-16 transform -rotate-90" viewBox="0 0 100 100">
           <circle
-            className="text-gray-200"
+            className="text-text-200"
             strokeWidth="8"
             stroke="currentColor"
             fill="transparent"
@@ -69,7 +69,7 @@ export default function GeneratingImageDisplay({ isCompleted = false }) {
             cy="50"
           />
           <circle
-            className="text-gray-800 transition-all duration-300"
+            className="text-text-800 transition-all duration-300"
             strokeWidth="8"
             strokeDasharray={276.46}
             strokeDashoffset={276.46 * (1 - progress / 100)}
@@ -83,7 +83,7 @@ export default function GeneratingImageDisplay({ isCompleted = false }) {
         </svg>
         <div className="absolute inset-0 flex items-center justify-center">
           <svg
-            className="w-6 h-6 text-neutral-500 animate-pulse-strong"
+            className="w-6 h-6 text-text-500 animate-pulse-strong"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
diff --git a/web/src/app/components/nrf/SettingsPanel.tsx b/web/src/app/components/nrf/SettingsPanel.tsx
index c61c35271..1d4d7fda1 100644
--- a/web/src/app/components/nrf/SettingsPanel.tsx
+++ b/web/src/app/components/nrf/SettingsPanel.tsx
@@ -18,12 +18,12 @@ const SidebarSwitch = ({
   label: string;
 }) => (
   <div className="flex justify-between items-center py-2">
-    <span className="text-sm text-gray-300">{label}</span>
+    <span className="text-sm text-text-300">{label}</span>
     <Switch
       checked={checked}
       onCheckedChange={onCheckedChange}
-      className="data-[state=checked]:bg-white data-[state=checked]:border-neutral-200 data-[state=unchecked]:bg-gray-600"
-      circleClassName="data-[state=checked]:bg-neutral-200"
+      className="data-[state=checked]:bg-white data-[state=checked]:border-background-200 data-[state=unchecked]:bg-background-600"
+      circleClassName="data-[state=checked]:bg-background-200"
     />
   </div>
 );
@@ -45,12 +45,12 @@ const RadioOption = ({
     <RadioGroupItem
       value={value}
       id={value}
-      className="mt-1 border border-gray-600 data-[state=checked]:border-white data-[state=checked]:bg-white"
+      className="mt-1 border border-background-600 data-[state=checked]:border-white data-[state=checked]:bg-white"
     />
     <Label htmlFor={value} className="flex flex-col">
-      <span className="text-sm text-gray-300">{label}</span>
+      <span className="text-sm text-text-300">{label}</span>
       {description && (
-        <span className="text-xs text-gray-500">{description}</span>
+        <span className="text-xs text-text-500">{description}</span>
       )}
     </Label>
   </div>
@@ -91,7 +91,7 @@ export const SettingsPanel = ({
 
   return (
     <div
-      className="fixed top-0 right-0 w-[360px] h-full bg-[#202124] text-gray-300 overflow-y-auto z-20 transition-transform duration-300 ease-in-out transform"
+      className="fixed top-0 right-0 w-[360px] h-full bg-background-800 text-text-300 overflow-y-auto z-20 transition-transform duration-300 ease-in-out transform"
       style={{
         transform: settingsOpen ? "translateX(0)" : "translateX(100%)",
         boxShadow: "-2px 0 10px rgba(0,0,0,0.3)",
@@ -105,7 +105,7 @@ export const SettingsPanel = ({
           <button
             aria-label="Close"
             onClick={toggleSettings}
-            className="text-gray-400 hover:text-white"
+            className="text-text-400 hover:text-white"
           >
             ✕
           </button>
diff --git a/web/src/app/ee/admin/billing/BillingInformationPage.tsx b/web/src/app/ee/admin/billing/BillingInformationPage.tsx
index 938108f9c..0d00b97be 100644
--- a/web/src/app/ee/admin/billing/BillingInformationPage.tsx
+++ b/web/src/app/ee/admin/billing/BillingInformationPage.tsx
@@ -81,11 +81,11 @@ export default function BillingInformationPage() {
 
   return (
     <div className="space-y-8">
-      <div className="bg-gray-50 rounded-lg p-8 border border-gray-200">
+      <div className="bg-background-50 rounded-lg p-8 border border-background-200">
         {popup}
 
-        <h2 className="text-2xl font-bold mb-6 text-gray-800 flex items-center">
-          {/* <CreditCard className="mr-4 text-gray-600" size={24} /> */}
+        <h2 className="text-2xl font-bold mb-6 text-text-800 flex items-center">
+          {/* <CreditCard className="mr-4 text-text-600" size={24} /> */}
           Subscription Details
         </h2>
 
@@ -93,12 +93,12 @@ export default function BillingInformationPage() {
           <div className="bg-white p-5 rounded-lg shadow-sm transition-all duration-300 hover:shadow-md">
             <div className="flex justify-between items-center">
               <div>
-                <p className="text-lg font-medium text-gray-700">Seats</p>
-                <p className="text-sm text-gray-500">
+                <p className="text-lg font-medium text-text-700">Seats</p>
+                <p className="text-sm text-text-500">
                   Number of licensed users
                 </p>
               </div>
-              <p className="text-xl font-semibold text-gray-900">
+              <p className="text-xl font-semibold text-text-900">
                 {billingInformation.seats}
               </p>
             </div>
@@ -107,14 +107,14 @@ export default function BillingInformationPage() {
           <div className="bg-white p-5 rounded-lg shadow-sm transition-all duration-300 hover:shadow-md">
             <div className="flex justify-between items-center">
               <div>
-                <p className="text-lg font-medium text-gray-700">
+                <p className="text-lg font-medium text-text-700">
                   Subscription Status
                 </p>
-                <p className="text-sm text-gray-500">
+                <p className="text-sm text-text-500">
                   Current state of your subscription
                 </p>
               </div>
-              <p className="text-xl font-semibold text-gray-900">
+              <p className="text-xl font-semibold text-text-900">
                 {statusToDisplay(billingInformation.subscription_status)}
               </p>
             </div>
@@ -123,14 +123,14 @@ export default function BillingInformationPage() {
           <div className="bg-white p-5 rounded-lg shadow-sm transition-all duration-300 hover:shadow-md">
             <div className="flex justify-between items-center">
               <div>
-                <p className="text-lg font-medium text-gray-700">
+                <p className="text-lg font-medium text-text-700">
                   Billing Start
                 </p>
-                <p className="text-sm text-gray-500">
+                <p className="text-sm text-text-500">
                   Start date of current billing cycle
                 </p>
               </div>
-              <p className="text-xl font-semibold text-gray-900">
+              <p className="text-xl font-semibold text-text-900">
                 {new Date(
                   billingInformation.billing_start
                 ).toLocaleDateString()}
@@ -141,12 +141,12 @@ export default function BillingInformationPage() {
           <div className="bg-white p-5 rounded-lg shadow-sm transition-all duration-300 hover:shadow-md">
             <div className="flex justify-between items-center">
               <div>
-                <p className="text-lg font-medium text-gray-700">Billing End</p>
-                <p className="text-sm text-gray-500">
+                <p className="text-lg font-medium text-text-700">Billing End</p>
+                <p className="text-sm text-text-500">
                   End date of current billing cycle
                 </p>
               </div>
-              <p className="text-xl font-semibold text-gray-900">
+              <p className="text-xl font-semibold text-text-900">
                 {new Date(billingInformation.billing_end).toLocaleDateString()}
               </p>
             </div>
@@ -165,21 +165,21 @@ export default function BillingInformationPage() {
 
         {billingInformation.subscription_status === "trialing" ? (
           <div className="bg-white p-5 rounded-lg shadow-sm transition-all duration-300 hover:shadow-md mt-8">
-            <p className="text-lg font-medium text-gray-700">
+            <p className="text-lg font-medium text-text-700">
               No cap on users during trial
             </p>
           </div>
         ) : (
           <div className="flex items-center space-x-4 mt-8">
             <div className="flex items-center space-x-4">
-              <p className="text-lg font-medium text-gray-700">
+              <p className="text-lg font-medium text-text-700">
                 Current Seats:
               </p>
-              <p className="text-xl font-semibold text-gray-900">
+              <p className="text-xl font-semibold text-text-900">
                 {billingInformation.seats}
               </p>
             </div>
-            <p className="text-sm text-gray-500">
+            <p className="text-sm text-text-500">
               Seats automatically update based on adding, removing, or inviting
               users.
             </p>
@@ -190,18 +190,18 @@ export default function BillingInformationPage() {
       <div className="bg-white p-5 rounded-lg shadow-sm transition-all duration-300 hover:shadow-md">
         <div className="flex justify-between items-center mb-4">
           <div>
-            <p className="text-lg font-medium text-gray-700">
+            <p className="text-lg font-medium text-text-700">
               Manage Subscription
             </p>
-            <p className="text-sm text-gray-500">
+            <p className="text-sm text-text-500">
               View your plan, update payment, or change subscription
             </p>
           </div>
-          <SettingsIcon className="text-gray-600" size={20} />
+          <SettingsIcon className="text-text-600" size={20} />
         </div>
         <button
           onClick={handleManageSubscription}
-          className="bg-gray-600 text-white px-4 py-2 rounded-md hover:bg-gray-700 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 font-medium shadow-sm text-sm flex items-center justify-center"
+          className="bg-background-600 text-white px-4 py-2 rounded-md hover:bg-background-700 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-text-500 focus:ring-opacity-50 font-medium shadow-sm text-sm flex items-center justify-center"
         >
           <ArrowFatUp className="mr-2" size={16} />
           Manage Subscription
diff --git a/web/src/app/ee/admin/groups/ConnectorEditor.tsx b/web/src/app/ee/admin/groups/ConnectorEditor.tsx
index a538d02f1..b8185f01a 100644
--- a/web/src/app/ee/admin/groups/ConnectorEditor.tsx
+++ b/web/src/app/ee/admin/groups/ConnectorEditor.tsx
@@ -33,7 +33,9 @@ export const ConnectorEditor = ({
           w-fit 
           flex 
           cursor-pointer ` +
-                (isSelected ? " bg-hover" : " hover:bg-hover-light")
+                (isSelected
+                  ? " bg-accent-background-hovered"
+                  : " hover:bg-accent-background")
               }
               onClick={() => {
                 if (isSelected) {
diff --git a/web/src/app/ee/admin/groups/UserEditor.tsx b/web/src/app/ee/admin/groups/UserEditor.tsx
index 799f35139..a878c9967 100644
--- a/web/src/app/ee/admin/groups/UserEditor.tsx
+++ b/web/src/app/ee/admin/groups/UserEditor.tsx
@@ -42,7 +42,7 @@ export const UserEditor = ({
                   py-1 
                   border 
                   border-border 
-                  hover:bg-hover-light 
+                  hover:bg-accent-background 
                   cursor-pointer`}
             >
               {selectedUser.email} <FiX className="ml-1 my-auto" />
@@ -72,7 +72,7 @@ export const UserEditor = ({
             ]);
           }}
           itemComponent={({ option }) => (
-            <div className="flex px-4 py-2.5 cursor-pointer hover:bg-hover">
+            <div className="flex px-4 py-2.5 cursor-pointer hover:bg-accent-background-hovered">
               <UsersIcon className="mr-2 my-auto" />
               {option.name}
               <div className="ml-auto my-auto">
diff --git a/web/src/app/ee/admin/groups/UserGroupsTable.tsx b/web/src/app/ee/admin/groups/UserGroupsTable.tsx
index e1197031a..a1b005433 100644
--- a/web/src/app/ee/admin/groups/UserGroupsTable.tsx
+++ b/web/src/app/ee/admin/groups/UserGroupsTable.tsx
@@ -74,7 +74,7 @@ export const UserGroupsTable = ({
                 <TableRow key={userGroup.id}>
                   <TableCell>
                     <Link
-                      className="whitespace-nowrap overflow-hidden text-ellipsis inline-flex items-center cursor-pointer p-2 rounded hover:bg-hover max-w-full"
+                      className="whitespace-nowrap overflow-hidden text-ellipsis inline-flex items-center cursor-pointer p-2 rounded hover:bg-accent-background-hovered max-w-full"
                       href={`/admin/groups/${userGroup.id}`}
                     >
                       <FiEdit2 className="mr-2 flex-shrink-0" />
@@ -247,7 +247,7 @@ export const UserGroupsTable = ({
                             <SimpleUserDisplay key={user.id} user={user} />
                           );
                         })}
-                      <div className="text-gray-300">
+                      <div className="text-text-300">
                         + {userGroup.users.length - MAX_USERS_TO_DISPLAY} more
                       </div>
                     </div>
@@ -257,7 +257,7 @@ export const UserGroupsTable = ({
               status: userGroup.is_up_to_date ? (
                 <div className="text-emerald-600">Up to date!</div>
               ) : (
-                <div className="text-gray-300 w-10">
+                <div className="text-text-300 w-10">
                   <LoadingAnimation text="Syncing" />
                 </div>
               ),
diff --git a/web/src/app/ee/admin/groups/[groupId]/AddConnectorForm.tsx b/web/src/app/ee/admin/groups/[groupId]/AddConnectorForm.tsx
index fa6afac67..a9ca6da14 100644
--- a/web/src/app/ee/admin/groups/[groupId]/AddConnectorForm.tsx
+++ b/web/src/app/ee/admin/groups/[groupId]/AddConnectorForm.tsx
@@ -49,7 +49,7 @@ export const AddConnectorForm: React.FC<AddConnectorFormProps> = ({
                   my-1 
                   border 
                   border-border 
-                  hover:bg-hover 
+                  hover:bg-accent-background-hovered 
                   cursor-pointer`}
               >
                 <ConnectorTitle
@@ -97,7 +97,7 @@ export const AddConnectorForm: React.FC<AddConnectorFormProps> = ({
               ]);
             }}
             itemComponent={({ option }) => (
-              <div className="flex px-4 py-2.5 hover:bg-hover cursor-pointer">
+              <div className="flex px-4 py-2.5 hover:bg-accent-background-hovered cursor-pointer">
                 <div className="my-auto">
                   <ConnectorTitle
                     ccPairId={option?.metadata?.ccPairId as number}
diff --git a/web/src/app/ee/admin/performance/query-history/DownloadAsCSV.tsx b/web/src/app/ee/admin/performance/query-history/DownloadAsCSV.tsx
index 1d5217da1..9ded18ead 100644
--- a/web/src/app/ee/admin/performance/query-history/DownloadAsCSV.tsx
+++ b/web/src/app/ee/admin/performance/query-history/DownloadAsCSV.tsx
@@ -4,7 +4,7 @@ export function DownloadAsCSV() {
   return (
     <a
       href="/api/admin/query-history-csv"
-      className="flex ml-auto py-2 px-4 border border-border h-fit cursor-pointer hover:bg-hover-light text-sm"
+      className="flex ml-auto py-2 px-4 border border-border h-fit cursor-pointer hover:bg-accent-background text-sm"
     >
       <FiDownload className="my-auto mr-2" />
       Download as CSV
diff --git a/web/src/app/ee/admin/performance/query-history/QueryHistoryTable.tsx b/web/src/app/ee/admin/performance/query-history/QueryHistoryTable.tsx
index c81c89b5a..981568b30 100644
--- a/web/src/app/ee/admin/performance/query-history/QueryHistoryTable.tsx
+++ b/web/src/app/ee/admin/performance/query-history/QueryHistoryTable.tsx
@@ -42,7 +42,7 @@ function QueryHistoryTableRow({
   return (
     <TableRow
       key={chatSessionMinimal.id}
-      className="hover:bg-hover-light cursor-pointer relative"
+      className="hover:bg-accent-background cursor-pointer relative"
     >
       <TableCell>
         <Text className="whitespace-normal line-clamp-5">
diff --git a/web/src/app/ee/admin/performance/usage/PersonaMessagesChart.tsx b/web/src/app/ee/admin/performance/usage/PersonaMessagesChart.tsx
index 2734f17ce..38c989dfb 100644
--- a/web/src/app/ee/admin/performance/usage/PersonaMessagesChart.tsx
+++ b/web/src/app/ee/admin/performance/usage/PersonaMessagesChart.tsx
@@ -147,13 +147,13 @@ export function PersonaMessagesChart({
     );
   } else if (selectedPersonaId === undefined) {
     content = (
-      <div className="h-80 text-gray-500 flex flex-col">
+      <div className="h-80 text-text-500 flex flex-col">
         <p className="m-auto">Select an assistant to view analytics</p>
       </div>
     );
   } else if (!personaMessagesData?.length) {
     content = (
-      <div className="h-80 text-gray-500 flex flex-col">
+      <div className="h-80 text-text-500 flex flex-col">
         <p className="m-auto">
           No data found for selected assistant in the specified time range
         </p>
diff --git a/web/src/app/ee/admin/standard-answer/page.tsx b/web/src/app/ee/admin/standard-answer/page.tsx
index 85071ca5d..c1f88bf78 100644
--- a/web/src/app/ee/admin/standard-answer/page.tsx
+++ b/web/src/app/ee/admin/standard-answer/page.tsx
@@ -78,7 +78,7 @@ const CategoryBubble = ({
       text-xs
       font-semibold
       text-emphasis
-      bg-hover
+      bg-accent-background-hovered
       rounded-full
       items-center
       w-fit
diff --git a/web/src/app/ee/admin/whitelabeling/ImageUpload.tsx b/web/src/app/ee/admin/whitelabeling/ImageUpload.tsx
index f9be5343c..7c3e5f08d 100644
--- a/web/src/app/ee/admin/whitelabeling/ImageUpload.tsx
+++ b/web/src/app/ee/admin/whitelabeling/ImageUpload.tsx
@@ -53,7 +53,7 @@ export function ImageUpload({
               }
             >
               <input {...getInputProps()} />
-              <b className="text-emphasis">
+              <b className="text-text-darker">
                 Drag and drop a .png or .jpg file, or click to select a file!
               </b>
             </div>
diff --git a/web/src/app/ee/admin/whitelabeling/WhitelabelingForm.tsx b/web/src/app/ee/admin/whitelabeling/WhitelabelingForm.tsx
index 66e5f93bf..6ffc03b1c 100644
--- a/web/src/app/ee/admin/whitelabeling/WhitelabelingForm.tsx
+++ b/web/src/app/ee/admin/whitelabeling/WhitelabelingForm.tsx
@@ -207,7 +207,7 @@ export function WhitelabelingForm() {
                   >
                     the docs
                   </Link>{" "}
-                  to see whitelabelling examples in action.
+                  to see whitelabeling examples in action.
                 </Text>
 
                 <TextFormField
diff --git a/web/src/app/ee/assistants/stats/[id]/AssistantStats.tsx b/web/src/app/ee/assistants/stats/[id]/AssistantStats.tsx
index f7f0fb244..659b10315 100644
--- a/web/src/app/ee/assistants/stats/[id]/AssistantStats.tsx
+++ b/web/src/app/ee/assistants/stats/[id]/AssistantStats.tsx
@@ -123,7 +123,7 @@ export function AssistantStats({ assistantId }: { assistantId: number }) {
     );
   } else if (!assistantStats?.daily_stats?.length) {
     content = (
-      <div className="h-80 text-gray-500 flex flex-col">
+      <div className="h-80 text-text-500 flex flex-col">
         <p className="m-auto">
           No data found for this assistant in the selected date range
         </p>
@@ -162,7 +162,7 @@ export function AssistantStats({ assistantId }: { assistantId: number }) {
                 )}
                 <div>
                   <h3 className="text-lg font-normal">{assistant?.name}</h3>
-                  <p className="text-sm text-gray-500">
+                  <p className="text-sm text-text-500">
                     {assistant?.description}
                   </p>
                 </div>
@@ -173,13 +173,13 @@ export function AssistantStats({ assistantId }: { assistantId: number }) {
             <CardContent className="pt-6">
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <p className="text-sm font-medium text-gray-500">
+                  <p className="text-sm font-medium text-text-500">
                     Total Messages
                   </p>
                   <p className="text-2xl font-normal">{totalMessages}</p>
                 </div>
                 <div>
-                  <p className="text-sm font-medium text-gray-500">
+                  <p className="text-sm font-medium text-text-500">
                     Total Unique Users
                   </p>
                   <p className="text-2xl font-normal">{totalUniqueUsers}</p>
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 7a7def4c2..9ce38fe2c 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -4,12 +4,62 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 48 96% 89%;
+
+    --input-text: #6c6c6b;
+
+    /* ---------------------------------
+    
+     * 1. Single set of neutral values
+     * --------------------------------- */
+    --neutral-50: #fafafa;
+    --neutral-100: #f5f5f5;
+    --neutral-125: #f1f2f4; /* You had background-125 & text-125 as #f1f2f4 */
+    --neutral-150: #eaeaea;
+    --neutral-200: #d4d4d4;
+    --neutral-300: #d4d4d4;
+    --neutral-400: #a3a3a3;
+    --neutral-500: #737373;
+    --neutral-600: #525252;
+    --neutral-600-border-dark: #525252;
+    --neutral-600: #525252;
+    --neutral-700: #404040;
+    --neutral-800: #262626;
+    --neutral-900: #111827;
+    --neutral-950: #0a0a0a;
+
+    --hover: var(--neutral-200);
+
+    /* -------------------------------------------------------
+     * 2. Keep special, custom, or near-duplicate background
+     * ------------------------------------------------------- */
+    --background: #fefcfa; /* slightly off-white, keep it */
+    --input-background: #fefcfa;
+    --input-border: #f1eee8;
+    --text-text: #f4f2ed;
+    --background-dark: #e9e6e0;
+    --new-background: #ebe7de;
+    --new-background-light: #d9d1c0;
+    --background-chatbar: #f5f3ee;
+    --background-chat-hover: #e6e3dd;
+    --background-chat-selected: #e6e3dd;
+    --background-sidebar: #f5f3ee;
+
+    /* borders & input (keep if not same as neutral) */
+    --border: #e5e7eb; /* slightly different than #e5e5e5 */
+    --border-light: #f5f5f5;
+    --border-medium: #d4d4d4;
+    --border-strong: #a3a3a3;
+    --border-dark: #525252;
+    --input: 0 0% 89.8%;
+
+    /* Additional single-purpose color vars remain */
     --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
+    --card: #ffffff;
+    --card-foreground: #0c0c0c;
+    --popover: #ffffff;
+    --popover-foreground: #0c0c0c;
     --primary: 0 0% 9%;
     --primary-foreground: 0 0% 98%;
     --secondary: 0 0% 96.1%;
@@ -18,232 +68,279 @@
     --muted-foreground: 0 0% 45.1%;
     --accent: 0 0% 96.1%;
     --accent-foreground: 0 0% 9%;
+    --accent-background: #f0eee8;
+    --accent-background-hovered: #e5e3dd;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
     --ring: 0 0% 3.9%;
     --radius: 0.5rem;
+
+    /* Some charts, links, etc. */
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-
-    --text-50: #fafafa;
-    /* neutral-50 - Very light gray */
-    --text-100: #f5f5f5;
-    /* neutral-100, lighter - Light gray */
-    --text-200: #e5e5e5;
-    /* neutral-200, light - Lighter gray */
-    --text-300: #d4d4d4;
-    /* neutral-300, stronger - Light medium gray */
-    --text-400: #a3a3a3;
-    /* neutral-400, medium - Medium gray */
-    --text-500: #737373;
-    /* neutral-500, darkMedium - Dark medium gray */
-    --text-600: #525252;
-    /* neutral-600, dark - Dark gray */
-    --text-700: #404040;
-    /* neutral-700, solid - Very dark gray */
-    --text-800: #262626;
-    /* neutral-800, solidDark - Nearly black */
-    --text-900: #111827;
-    /* neutral-900 - Very dark, almost black */
-    --text-950: #0a0a0a;
-    /* solidDark - Nearly pure black */
-
-    --background: #fefcfa;
-    /* --background: #fafafa; */
-
-    /* 50 - Almost white */
-    --background-100: #f5f5f5;
-    /* neutral-100 - Very light gray */
-    --background-125: #f1f2f4;
-    /* gray-125 - Light grayish */
-    --background-150: #eaeaea;
-    /* gray-150 - Light gray */
-    --background-200: #e5e5e5;
-    /* neutral-200 - Light medium gray */
-    --background-300: #d4d4d4;
-    /* neutral-300 - Medium light gray */
-    --background-400: #a3a3a3;
-    /* neutral-400 - Medium gray */
-    --background-500: #737373;
-    /* neutral-500 - Medium dark gray */
-    --background-600: #525252;
-    /* neutral-600 - Dark gray */
-    --background-700: #404040;
-    /* neutral-700 - Very dark gray */
-    --background-800: #262626;
-    /* neutral-800 - Nearly black */
-    --background-900: #111827;
-    /* gray-900 - Very dark, almost black */
-    --background-inverted: #000000;
-    /* black - Pure black */
-
-    --background-emphasis: #f6f7f8;
-    /* Very light grayish blue */
-    --background-strong: #eaecef;
-    /* Light grayish blue */
-    --border: #e5e7eb;
-    /* gray-200 - Light gray */
-    --border-light: #f5f5f5;
-    /* gray-100 - Very light gray */
-    --border-medium: #d4d4d4;
-    /* gray-300 - Medium light gray */
-    --border-strong: #a3a3a3;
-    /* gray-400 - Medium gray */
-    --border-dark: #525252;
-    /* neutral-600 - Dark gray */
-
     --link: #3b82f6;
-    /* blue-500 - Bright blue */
     --link-hover: #1d4ed8;
-    /* blue-700 - Dark blue */
+
+    /* Status, success, alerts, etc. */
     --error: #f87171;
-    /* red-500 - Bright red */
     --undo: #ef4444;
-    /* red-500 - Bright red */
     --success: #030706;
-    /* emerald-600 - Deep green */
     --light-success: #22c55e;
-    /* green-500 */
     --alert: #f59e0b;
-    /* amber-600 - Orange */
-    --accent: #6366f1;
-    /* indigo-500 - Bright indigo */
     --accent-hover: #4f46e5;
-    /* Darker indigo */
-
     --black: #000000;
-    /* Pure black */
     --white: #ffffff;
-    /* Pure white */
 
-    --code-text: #e0e0e0;
-    /* Light gray for code text */
+    /* Code syntax highlighting */
+    --code-text: #d4d4d4;
     --token-comment: #608b4e;
-    /* Muted green for comments */
     --token-punctuation: #d4d4d4;
-    /* Light gray for punctuation */
     --token-property: #569cd6;
-    /* Light blue for properties */
     --token-selector: #e07b53;
-    /* Soft orange for selectors */
     --token-atrule: #d18ad8;
-    /* Light purple for at-rules */
     --token-function: #f0e68c;
-    /* Light yellow for functions */
     --token-regex: #9cdcfe;
-    /* Light blue for regex */
     --token-attr-name: #9cdcfe;
-    /* Light blue for attribute names */
 
+    /* Misc. custom */
     --non-selectable: #f8d7da;
-    /* Light pink for non-selectable elements */
+    --non-selectable-border: #f5c2c7;
     --highlight-text: rgba(255, 245, 180, 0.5);
-    /* Very light yellow for highlighted text */
     --user-bubble: #f1eee8;
-    /* near gray-100 - Very light grayish */
     --ai-bubble: #272a2d;
-    /* Dark grayish for AI bubbles */
     --document-color: #f43f5e;
-    /* pink-500 - Bright pink for documents */
-
     --scrollbar-track: #f9fafb;
-    /* Very light gray for scrollbar track */
     --scrollbar-thumb: #e5e7eb;
-    /* Light gray for scrollbar thumb */
     --scrollbar-thumb-hover: #d1d5db;
-    /* Medium light gray for scrollbar thumb on hover */
     --scrollbar-dark-thumb: #989a9c;
-    /* Medium gray for dark scrollbar thumb */
     --scrollbar-dark-thumb-hover: #c7cdd2;
-    /* Light medium gray for dark scrollbar thumb on hover */
 
-    /* Adding missing colors from tailwind-themes/tailwind.config.js */
-    --tremor-brand-faint: #eff6ff;
-    /* blue-50 */
-    --tremor-brand-muted: #bfdbfe;
-    /* blue-200 */
-    --tremor-brand-subtle: #60a5fa;
-    /* blue-400 */
-    --tremor-brand-emphasis: #1d4ed8;
-    /* blue-700 */
-    --tremor-brand-inverted: #ffffff;
-    /* white */
-    --tremor-background-muted: #f9fafb;
-    /* gray-50 */
-    --tremor-background-subtle: #f3f4f6;
-    /* gray-100 */
-    --tremor-background-emphasis: #374151;
-    /* gray-700 */
-    --tremor-content-subtle: #9ca3af;
-    /* gray-400 */
-    --tremor-content-default: #4b5563;
-    /* gray-600 */
-    --tremor-content-emphasis: #374151;
-    /* gray-700 */
-    --tremor-content-strong: #111827;
-    /* gray-900 */
-    --tremor-content-inverted: #ffffff;
-    /* white */
-    --dark-tremor-brand-faint: #0b1229;
-    /* custom */
-    --dark-tremor-brand-muted: #172554;
-    /* blue-950 */
-    --dark-tremor-brand-subtle: #1e40af;
-    /* blue-800 */
-    --dark-tremor-brand-emphasis: #60a5fa;
-    /* blue-400 */
-    --dark-tremor-brand-inverted: #030712;
-    /* gray-950 */
-    --dark-tremor-background-muted: #131a2b;
-    /* custom */
-    --dark-tremor-background-subtle: #1f2937;
-    /* gray-800 */
-    --dark-tremor-background-default: #111827;
-    /* gray-900 */
-    --dark-tremor-background-emphasis: #d1d5db;
-    /* gray-300 */
-    --dark-tremor-content-subtle: #6b7280;
-    /* gray-500 */
-    --dark-tremor-content-default: #d1d5db;
-    /* gray-300 */
-    --dark-tremor-content-emphasis: #f3f4f6;
-    /* gray-100 */
-    --dark-tremor-content-strong: #f9fafb;
-    /* gray-50 */
-    --dark-tremor-content-inverted: #000000;
-    /* black */
-    --radius: 0.5rem;
+    /* agent references */
+    --agent-sidebar: #be5d0e;
+    --agent: #e47011;
+    --lighter-agent: #f59e0b;
+
+    /* Consolidated color variables */
+    --neutral-100-border-light: #f5f5f5;
+    --neutral-300-border-medium: #d4d4d4;
+    --neutral-400-border-strong: #a3a3a3;
+    --background-input-background: #fefcfa;
+    --background-chatbar-sidebar: #f5f3ee;
+    --background-chat-hover-selected: #e6e3dd;
+    --white-card-popover: #ffffff;
+    --card-popover-foreground: #0c0c0c;
+
+    /* Near-duplicates consolidated */
+    --neutral-200-border: #e5e6e6; /* Average of #e5e5e5 and #e5e7eb */
+    --off-white: #f3f1ec; /* Average of #f4f2ed, #f5f3ee, #f1eee8, #e9e6e0, #ebe7de */
+
+    /* Update references to use new consolidated variables */
+    --neutral-100: var(--neutral-100-border-light);
+    --border-light: var(--neutral-100-border-light);
+    --neutral-300: var(--neutral-300-border-medium);
+    --border-medium: var(--neutral-300-border-medium);
+    --neutral-400: var(--neutral-400-border-strong);
+    --border-strong: var(--neutral-400-border-strong);
+    --neutral-600: var(--neutral-600-border-dark);
+    --border-dark: var(--neutral-600-border-dark);
+    --background: var(--background-input-background);
+    --input-background: var(--background-input-background);
+    --background-chatbar: var(--background-chatbar-sidebar);
+    --background-sidebar: var(--background-chatbar-sidebar);
+    --background-chat-hover: var(--background-chat-hover-selected);
+    --background-chat-selected: var(--background-chat-hover-selected);
+    --white: var(--white-card-popover);
+    --card: var(--white-card-popover);
+    --popover: var(--white-card-popover);
+    --card-foreground: var(--card-popover-foreground);
+    --popover-foreground: var(--card-popover-foreground);
+
+    /* Update near-duplicates */
+    --neutral-200: var(--neutral-200-border);
+    --border: var(--neutral-200-border);
+    --text-text: var(--off-white);
+    --background-dark: var(--off-white);
+    --new-background: var(--off-white);
+    --user-bubble: var(--off-white);
   }
+
   .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
+    --tremor-brand-faint: #eff6ff;
+    --tremor-brand-muted: #bfdbfe;
+    --tremor-brand-subtle: #60a5fa;
+    --tremor-brand-default: #3b82f6;
+    --tremor-brand-emphasis: #1d4ed8;
+    --tremor-brand-inverted: #ffffff;
+    --tremor-background-muted: #f9fafb;
+    --tremor-background-subtle: #f3f4f6;
+    --tremor-background-default: #ffffff;
+    --tremor-background-emphasis: #374151;
+    --tremor-content-subtle: #9ca3af;
+    --tremor-content-default: #4b5563;
+    --tremor-content-emphasis: #374151;
+    --tremor-content-strong: #111827;
+    --tremor-content-inverted: #ffffff;
+
+    --dark-tremor-brand-faint: #0b1229;
+    --dark-tremor-brand-muted: #172554;
+    --dark-tremor-brand-subtle: #1e40af;
+    --dark-tremor-brand-emphasis: #60a5fa;
+    --dark-tremor-brand-inverted: #030712;
+    --dark-tremor-background-muted: #131a2b;
+    --dark-tremor-background-subtle: #1f2937;
+    --dark-tremor-background-default: #111827;
+    --dark-tremor-background-emphasis: #d1d5db;
+    --dark-tremor-content-subtle: #6b7280;
+    --dark-tremor-content-default: #d1d5db;
+    --dark-tremor-content-emphasis: #f3f4f6;
+    --dark-tremor-content-strong: #f9fafb;
+    --dark-tremor-content-inverted: #000000;
+
+    /* ---------------------------------
+     * 1. Single set of neutral values
+     *    (reversed for dark mode)
+     * --------------------------------- */
+    --inputoption: "#B4B4B4";
+    --neutral-50: #161616; /* darkest */
+    --neutral-100-border-light: #1a1a1a;
+    --neutral-125: #1f1f1f;
+    --neutral-150: #252525;
+    --neutral-200-border: #2c2c2c;
+    --neutral-300-border-medium: #404040;
+    --neutral-400-border-strong: #5a5a5a;
+    --neutral-500: #757575;
+    --neutral--neutral-600-border-dark: #a0a0a0;
+    --neutral-700: #bdbdbd;
+    --neutral-800: #d4d4d4;
+    --neutral-900: #d4d4d4;
+    --neutral-950: #f0f0f0; /* lightest */
+    --hover: #2c2c2c;
+
+    --input-text: #b4b4b4;
+
+    --text-darker: #f0f0f0;
+    --text-dark: #f0f0f0;
+    /* -------------------------------------------------------
+     * 2. Special / custom backgrounds (shifted to dark)
+     * ------------------------------------------------------- */
+    --background-input-background: #1f1f1f;
+    --input-background: #303030;
+    --input-border: #5a5a5a;
+
+    --text-text: #1d1d1d;
+    --background-dark: #252525;
+
+    /* --new-background: #fff; */
+    --new-background: #2c2c2c;
+    --new-background-light: #383838;
+
+    --background-chatbar-sidebar: #171717;
+    --background-chat-hover-selected: #3a3a3a;
+    --background-chat-selected: #2f2f2f;
+    --background-sidebar: #171717;
+    --black: #000000;
+
+    /* --accent-background: #181816; */
+    --accent-background: #333333;
+
+    --accent-background-hovered: #2f2f2f;
+
+    --text-darker: #f0f0f0;
+
+    /* borders & input (reversed scales) */
+    --neutral-200-border: #5a5a5a; /* was #e5e7eb */
+    --neutral-100-border-light: #6a6a6a; /* was #f5f5f5 */
+    --neutral-300-border-medium: #4a4a4a; /* was #d4d4d4 */
+    --neutral-400-border-strong: #3a3a3a; /* was #a3a3a3 */
+    --neutral-600-border-dark: #9ca3af; /* was #525252, now using Tailwind's neutral-400 */
+    --input: 0 0% 15%; /* (HSL) approx #262626 for dark input backgrounds */
+
+    /* Additional single-purpose color vars (inverted where sensible) */
+    --foreground: 0 0% 95%; /* light text on dark bg (was 0 0% 3.9%) */
+    --card: #1f1f1f;
+    --card-foreground: #f3f3f3;
+    --popover: #1f1f1f;
+    --popover-foreground: #f2f2f2;
+
+    /* You can invert "primary"/"secondary" or pick your own scales */
+    --primary: 0 0% 80%; /* lighter gray for emphasis */
+    --primary-foreground: 0 0% 10%; /* dark text if placed on "primary" */
+    --secondary: 0 0% 25%;
+    --secondary-foreground: 0 0% 90%;
+
+    --muted: 0 0% 25%;
+    --muted-foreground: 0 0% 65%; /* e.g. #aaaaaa */
+
+    --accent: 0 0% 25%;
+    --accent-foreground: 0 0% 90%;
+
+    /* Destructive remains red, but you could darken or lighten */
+    --destructive: #b91c1c; /* dark-ish red */
+    --destructive-foreground: #ffffff;
+
+    --ring: #f2f2f2; /* used for focus rings, keep a light highlight on dark bg */
+    --radius: 0.5rem;
+
+    /* Some charts, links, etc. – typically kept as-is, or tweak if desired */
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --link: #3b82f6;
+    --link-hover: #1d4ed8;
+
+    /* Status, success, alerts, etc. – can keep or adjust as needed */
+    --error: #f87171;
+    --undo: #ef4444;
+    --success: #22c55e; /* bright green stands out on dark */
+    --light-success: #86efac;
+    --alert: #f59e0b;
+    --accent-hover: #4f46e5;
+    --black: #ffffff;
+    --white-card-popover: #000000;
+
+    /* Code syntax highlighting – typically brighter/lighter for dark backgrounds */
+    --code-text: #d4d4d4;
+    --token-comment: #608b4e;
+    --token-punctuation: #d4d4d4;
+    --token-property: #569cd6;
+    --token-selector: #e07b53;
+    --token-atrule: #d18ad8;
+    --token-function: #f0e68c;
+    --token-regex: #9cdcfe;
+    --token-attr-name: #9cdcfe;
+
+    /* Misc. custom (tweaked to darker equivalents where it makes sense) */
+    --non-selectable: #5d1a1f; /* was #f8d7da - if needed on dark BG */
+    --non-selectable-border: #4a1215; /* was #f5c2c7 */
+    --highlight-text: rgba(
+      255,
+      245,
+      180,
+      0.5
+    ); /* still stands out as highlight */
+    --tw-prose-bold: #fff;
+
+    --off-white: #2a2a2a; /* was #f1eee8 */
+
+    --ai-bubble: #1f1f1f;
+    --document-color: #f43f5e; /* keep the same bright accent? */
+
+    /* Scrollbars, etc. */
+    --scrollbar-track: #1c1d1e;
+    --scrollbar-thumb: #3a3a3a;
+    --scrollbar-thumb-hover: #4a4a4a;
+    --scrollbar-dark-thumb: #666666;
+    --scrollbar-dark-thumb-hover: #909090;
+
+    /* Agent references */
+    --agent-sidebar: #be5d0e; /* You can keep or lighten/darken if desired */
+    --agent: #e47011;
+    --lighter-agent: #f59e0b;
   }
 }
 
@@ -408,6 +505,22 @@ textarea {
   animation: shimmerTransition 1.5s ease-out infinite;
 }
 
+.dark .loading-text {
+  color: #1a1a1a;
+
+  background: linear-gradient(
+    -90deg,
+    #5c5c5c 0%,
+    #ffffff 5%,
+    #5c5c5c 10%,
+    #5c5c5c 100%
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
 @keyframes shimmerTransition {
   0% {
     background-position: 100% 0;
@@ -538,3 +651,11 @@ ul > li > p {
   display: inline;
   /* Make paragraphs inline to reduce vertical space */
 }
+
+.dark strong {
+  color: white;
+}
+
+.dark li {
+  color: #e5e5e5;
+}
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index 384717715..8c38d5f04 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -24,6 +24,7 @@ import Script from "next/script";
 import { LogoType } from "@/components/logo/Logo";
 import { Hanken_Grotesk } from "next/font/google";
 import { WebVitals } from "./web-vitals";
+import { ThemeProvider } from "next-themes";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -74,7 +75,11 @@ export default async function RootLayout({
     combinedSettings?.settings.product_gating ?? GatingType.NONE;
 
   const getPageContent = async (content: React.ReactNode) => (
-    <html lang="en" className={`${inter.variable} ${hankenGrotesk.variable}`}>
+    <html
+      lang="en"
+      className={`${inter.variable} ${hankenGrotesk.variable}`}
+      suppressHydrationWarning
+    >
       <head>
         <meta
           name="viewport"
@@ -106,14 +111,18 @@ export default async function RootLayout({
           />
         )}
       </head>
+
       <body className={`relative ${inter.variable} font-hanken`}>
-        <div
-          className={`text-default min-h-screen bg-background ${
-            process.env.THEME_IS_DARK?.toLowerCase() === "true" ? "dark" : ""
-          }`}
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
         >
-          <PHProvider>{content}</PHProvider>
-        </div>
+          <div className="text-text min-h-screen bg-background">
+            <PHProvider>{content}</PHProvider>
+          </div>
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/web/src/components/BackButton.tsx b/web/src/components/BackButton.tsx
index efe4a086a..039f2c0f8 100644
--- a/web/src/components/BackButton.tsx
+++ b/web/src/components/BackButton.tsx
@@ -19,7 +19,7 @@ export function BackButton({
         my-auto 
         flex 
         mb-1 
-        hover:bg-hover-light 
+        hover:bg-accent-background 
         w-fit 
         p-1
         pr-2 
diff --git a/web/src/components/BasicClickable.tsx b/web/src/components/BasicClickable.tsx
index 496ff7dc1..52eec8ea7 100644
--- a/web/src/components/BasicClickable.tsx
+++ b/web/src/components/BasicClickable.tsx
@@ -19,7 +19,7 @@ export function BasicClickable({
         border-border
         rounded
         font-medium 
-        text-emphasis 
+        text-text-darker 
         text-sm
         relative
         px-1 py-1.5
@@ -27,7 +27,7 @@ export function BasicClickable({
         bg-background
         select-none
         overflow-hidden
-        hover:bg-hover-light
+        hover:bg-accent-background
         ${fullWidth ? "w-full" : ""}
         ${className ? className : ""}
         `}
@@ -64,7 +64,7 @@ export function EmphasizedClickable({
               : `min-h-[42px] py-2 px-4`
         }
         w-fit 
-        bg-hover
+        bg-accent-background-hovered
         border-1 border-border-medium border bg-background-100 
         text-sm
         rounded-lg
diff --git a/web/src/components/Bubble.tsx b/web/src/components/Bubble.tsx
index e717fe320..25f16276e 100644
--- a/web/src/components/Bubble.tsx
+++ b/web/src/components/Bubble.tsx
@@ -27,8 +27,8 @@ export function Bubble({
         (notSelectable
           ? " bg-background cursor-default"
           : isSelected
-            ? " bg-hover cursor-pointer"
-            : " bg-background hover:bg-hover-light cursor-pointer")
+            ? " bg-accent-background-hovered cursor-pointer"
+            : " bg-background hover:bg-accent-background cursor-pointer")
       }
       onClick={onClick}
     >
diff --git a/web/src/components/Button.tsx b/web/src/components/Button.tsx
index 651bf340a..5672469f1 100644
--- a/web/src/components/Button.tsx
+++ b/web/src/components/Button.tsx
@@ -24,7 +24,7 @@ export const Button = ({
         "font-medium rounded-md text-white " +
         "focus:outline-none focus:ring-2 " +
         "focus:ring-offset-2 focus:ring-red-500 mx-auto " +
-        (disabled ? "bg-gray-700 " : "bg-red-800 hover:bg-red-900 ") +
+        (disabled ? "bg-background-700 " : "bg-red-800 hover:bg-red-900 ") +
         className
       }
       onClick={onClick}
diff --git a/web/src/components/DeleteButton.tsx b/web/src/components/DeleteButton.tsx
index 498161c52..d181602c8 100644
--- a/web/src/components/DeleteButton.tsx
+++ b/web/src/components/DeleteButton.tsx
@@ -13,7 +13,11 @@ export function DeleteButton({
         my-auto 
         flex 
         mb-1 
-        ${disabled ? "cursor-default" : "hover:bg-hover cursor-pointer"} 
+        ${
+          disabled
+            ? "cursor-default"
+            : "hover:bg-accent-background-hovered cursor-pointer"
+        } 
         w-fit 
         p-2 
         rounded-lg
diff --git a/web/src/components/Dropdown.tsx b/web/src/components/Dropdown.tsx
index 109810678..83cdf26d9 100644
--- a/web/src/components/Dropdown.tsx
+++ b/web/src/components/Dropdown.tsx
@@ -33,14 +33,14 @@ function StandardDropdownOption<T>({
   return (
     <button
       onClick={() => handleSelect(option)}
-      className={`w-full text-left block px-4 py-2.5 text-sm bg-white hover:bg-gray-50 ${
-        index !== 0 ? "border-t border-gray-200" : ""
+      className={`w-full text-left block px-4 py-2.5 text-sm bg-white dark:bg-neutral-800 hover:bg-background-50 ${
+        index !== 0 ? "border-t border-background-200" : ""
       }`}
       role="menuitem"
     >
-      <p className="font-medium  text-xs text-gray-900">{option.name}</p>
+      <p className="font-medium  text-xs text-text-900">{option.name}</p>
       {option.description && (
-        <p className="text-xs text-gray-500">{option.description}</p>
+        <p className="text-xs text-text-500">{option.description}</p>
       )}
     </button>
   );
@@ -113,21 +113,21 @@ export function SearchMultiSelectDropdown({
             }
           }}
           onFocus={() => setIsOpen(true)}
-          className="inline-flex justify-between w-full px-4 py-2 text-sm bg-white text-gray-800 border border-gray-300 rounded-md shadow-sm"
+          className="inline-flex justify-between w-full px-4 py-2 text-sm bg-white dark:bg-transparent text-text-800 border border-background-300 rounded-md shadow-sm"
         />
         <button
           type="button"
-          className="absolute top-0 right-0 text-sm h-full px-2 border-l border-gray-300"
+          className="absolute top-0 right-0 text-sm h-full px-2 border-l border-background-300"
           aria-expanded={isOpen}
           aria-haspopup="true"
           onClick={() => setIsOpen(!isOpen)}
         >
-          <ChevronDownIcon className="my-auto w-4 h-4 text-gray-600" />
+          <ChevronDownIcon className="my-auto w-4 h-4 text-text-600" />
         </button>
       </div>
 
       {isOpen && (
-        <div className="absolute z-10 mt-1 w-full rounded-md shadow-lg bg-white border border-gray-300 max-h-60 overflow-y-auto">
+        <div className="absolute z-10 mt-1 w-full rounded-md shadow-lg bg-white border border-background-300 max-h-60 overflow-y-auto">
           <div
             role="menu"
             aria-orientation="vertical"
@@ -160,9 +160,9 @@ export function SearchMultiSelectDropdown({
                   option.name.toLowerCase() === searchTerm.toLowerCase()
               ) && (
                 <>
-                  <div className="border-t border-gray-300"></div>
+                  <div className="border-t border-background-300"></div>
                   <button
-                    className="w-full text-left flex items-center px-4 py-2 text-sm text-gray-800 hover:bg-gray-100"
+                    className="w-full text-left flex items-center px-4 py-2 text-sm text-text-800 hover:bg-background-100"
                     role="menuitem"
                     onClick={() => {
                       onCreate(searchTerm);
@@ -170,7 +170,7 @@ export function SearchMultiSelectDropdown({
                       setSearchTerm("");
                     }}
                   >
-                    <PlusIcon className="w-4 h-4 mr-2 text-gray-600" />
+                    <PlusIcon className="w-4 h-4 mr-2 text-text-600" />
                     Create label &quot;{searchTerm}&quot;
                   </button>
                 </>
@@ -178,7 +178,7 @@ export function SearchMultiSelectDropdown({
 
             {filteredOptions.length === 0 &&
               (!onCreate || searchTerm.trim() === "") && (
-                <div className="px-4 py-2.5 text-sm text-gray-500">
+                <div className="px-4 py-2.5 text-sm text-text-500">
                   No matches found
                 </div>
               )}
@@ -263,7 +263,8 @@ export function DefaultDropdownElement({
         cursor-pointer 
         bg-transparent 
         rounded
-        hover:bg-hover
+        text-text-dark
+        hover:bg-accent-background-hovered
       `}
       onClick={onSelect}
     >
@@ -447,7 +448,7 @@ export function ControlledPopup({
             border-border 
             z-30 
             rounded 
-            text-emphasis 
+            text-text-darker 
             shadow-lg`}
           style={{ transform: "translateY(calc(-100% - 5px))" }}
         >
diff --git a/web/src/components/EditButton.tsx b/web/src/components/EditButton.tsx
index a7c76017e..adf656d11 100644
--- a/web/src/components/EditButton.tsx
+++ b/web/src/components/EditButton.tsx
@@ -9,7 +9,7 @@ export function EditButton({ onClick }: { onClick: () => void }) {
         my-auto 
         flex 
         mb-1 
-        hover:bg-hover 
+        hover:bg-accent-background-hovered 
         w-fit 
         p-2 
         cursor-pointer 
diff --git a/web/src/components/EditableValue.tsx b/web/src/components/EditableValue.tsx
index c5c4a21d6..a86bff274 100644
--- a/web/src/components/EditableValue.tsx
+++ b/web/src/components/EditableValue.tsx
@@ -38,7 +38,7 @@ export function EditableValue({
               onSubmit(initialValue);
             }
           }}
-          className="border bg-background-strong border-gray-300 rounded py-1 px-1 w-12 h-4 my-auto"
+          className="border bg-background-strong border-background-300 rounded py-1 px-1 w-12 h-4 my-auto"
         />
         <div
           onClick={async () => {
@@ -58,7 +58,7 @@ export function EditableValue({
   return (
     <div className="h-full flex flex-col">
       <div
-        className="flex my-auto cursor-pointer hover:bg-hover rounded"
+        className="flex my-auto cursor-pointer hover:bg-accent-background-hovered rounded"
         onClick={() => setIsOpen(true)}
       >
         <div className={"flex " + (consistentWidth && " w-6")}>
diff --git a/web/src/components/Hoverable.tsx b/web/src/components/Hoverable.tsx
index cb5e4f583..aa7a47350 100644
--- a/web/src/components/Hoverable.tsx
+++ b/web/src/components/Hoverable.tsx
@@ -11,14 +11,17 @@ export const Hoverable: React.FC<{
 }> = ({ icon: Icon, active, hoverText, onClick, size = ICON_SIZE }) => {
   return (
     <div
-      className={`group relative flex items-center overflow-hidden  p-1.5  h-fit rounded-md cursor-pointer transition-all duration-300 ease-in-out hover:bg-hover`}
+      className={`group relative flex items-center overflow-hidden  p-1.5  h-fit rounded-md cursor-pointer transition-all duration-300 ease-in-out hover:bg-accent-background-hovered`}
       onClick={onClick}
     >
       <div className="flex items-center">
-        <Icon size={size} className="text-gray-600 shrink-0" />
+        <Icon
+          size={size}
+          className="hover:bg-background-chat-hover dark:text-[#B4B4B4] text-neutral-600  rounded h-fit cursor-pointer"
+        />
         {hoverText && (
           <div className="max-w-0 leading-none whitespace-nowrap overflow-hidden transition-all duration-300 ease-in-out group-hover:max-w-xs group-hover:ml-2">
-            <span className="text-xs  text-gray-700">{hoverText}</span>
+            <span className="text-xs text-text-700">{hoverText}</span>
           </div>
         )}
       </div>
@@ -32,7 +35,7 @@ export const HoverableIcon: React.FC<{
 }> = ({ icon, onClick }) => {
   return (
     <div
-      className="hover:bg-background-chat-hover p-1.5 rounded h-fit cursor-pointer"
+      className="hover:bg-background-chat-hover dark:text-[#B4B4B4] text-neutral-600 p-1.5 rounded h-fit cursor-pointer"
       onClick={onClick}
     >
       {icon}
diff --git a/web/src/components/IsPublicGroupSelector.tsx b/web/src/components/IsPublicGroupSelector.tsx
index 4db2c3686..f4ebcdf6c 100644
--- a/web/src/components/IsPublicGroupSelector.tsx
+++ b/web/src/components/IsPublicGroupSelector.tsx
@@ -87,7 +87,7 @@ export const IsPublicGroupSelector = <T extends IsPublicGroupSelectorFormType>({
             }
             disabled={!isAdmin}
             subtext={
-              <span className="block mt-2 text-sm text-gray-500">
+              <span className="block mt-2 text-sm text-text-600 dark:text-neutral-400">
                 If set, then this {objectName} will be usable by{" "}
                 <b>All {publicToWhom}</b>. Otherwise, only <b>Admins</b> and{" "}
                 <b>{publicToWhom}</b> who have explicitly been given access to
@@ -108,7 +108,7 @@ export const IsPublicGroupSelector = <T extends IsPublicGroupSelectorFormType>({
               </div>
             </div>
             {userGroupsIsLoading ? (
-              <div className="animate-pulse bg-gray-200 h-8 w-32 rounded"></div>
+              <div className="animate-pulse bg-background-200 h-8 w-32 rounded"></div>
             ) : (
               <Text className="mb-3">
                 {isAdmin || !enforceGroupSelection ? (
@@ -129,7 +129,7 @@ export const IsPublicGroupSelector = <T extends IsPublicGroupSelectorFormType>({
               render={(arrayHelpers: ArrayHelpers) => (
                 <div className="flex gap-2 flex-wrap mb-4">
                   {userGroupsIsLoading ? (
-                    <div className="animate-pulse bg-gray-200 h-8 w-32 rounded"></div>
+                    <div className="animate-pulse bg-background-200 h-8 w-32 rounded"></div>
                   ) : (
                     userGroups &&
                     userGroups.map((userGroup: UserGroup) => {
@@ -150,7 +150,9 @@ export const IsPublicGroupSelector = <T extends IsPublicGroupSelectorFormType>({
                         flex 
                         cursor-pointer 
                         ${
-                          isSelected ? "bg-background-strong" : "hover:bg-hover"
+                          isSelected
+                            ? "bg-background-strong"
+                            : "hover:bg-accent-background-hovered"
                         }
                       `}
                           onClick={() => {
diff --git a/web/src/components/MetadataBadge.tsx b/web/src/components/MetadataBadge.tsx
index bbae230c7..126418b0f 100644
--- a/web/src/components/MetadataBadge.tsx
+++ b/web/src/components/MetadataBadge.tsx
@@ -13,7 +13,7 @@ export function MetadataBadge({
       text-xs 
       text-strong
       flex
-      bg-hover 
+      bg-accent-background-hovered 
       rounded-full 
       px-1
       py-0.5 
diff --git a/web/src/components/Modal.tsx b/web/src/components/Modal.tsx
index 32055804b..9fb324c72 100644
--- a/web/src/components/Modal.tsx
+++ b/web/src/components/Modal.tsx
@@ -63,8 +63,8 @@ export function Modal({
     <div
       onMouseDown={handleMouseDown}
       className={cn(
-        `fixed inset-0 bg-black border boder-border bg-opacity-10 backdrop-blur-sm h-full
-        flex items-center justify-center z-[9999] transition-opacity duration-300 ease-in-out`
+        `fixed inset-0 bg-neutral-950/50 border border-neutral-200 dark:border-neutral-800 bg-opacity-30 backdrop-blur-sm h-full
+        flex items-center justify-center z-50 transition-opacity duration-300 ease-in-out`
       )}
     >
       <div
@@ -75,8 +75,8 @@ export function Modal({
           }
         }}
         className={`
-          bg-background 
-          text-emphasis 
+          bg-neutral-50 dark:bg-neutral-800
+          text-neutral-950 dark:text-neutral-50
           rounded 
           shadow-2xl 
           transform 
@@ -96,7 +96,7 @@ export function Modal({
           <div className="absolute top-2 right-2">
             <button
               onClick={onOutsideClick}
-              className="cursor-pointer text-text-500 hover:text-text-700 transition-colors duration-200 p-2"
+              className="cursor-pointer text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300 transition-colors duration-200 p-2"
               aria-label="Close modal"
             >
               <XIcon className="w-5 h-5" />
diff --git a/web/src/components/PageSelector.tsx b/web/src/components/PageSelector.tsx
index cf81b8f3c..8ab800905 100644
--- a/web/src/components/PageSelector.tsx
+++ b/web/src/components/PageSelector.tsx
@@ -62,7 +62,7 @@ const PageLink = ({
     leading-5 
     -ml-px 
     border-border
-    ${!unclickable ? "hover:bg-hover" : ""}
+    ${!unclickable ? "hover:bg-accent-background-hovered" : ""}
     ${!unclickable ? "cursor-pointer" : ""}
     first:ml-0 
     first:rounded-l-md 
diff --git a/web/src/components/SearchResultIcon.tsx b/web/src/components/SearchResultIcon.tsx
index c5902fcfd..cf4ea7759 100644
--- a/web/src/components/SearchResultIcon.tsx
+++ b/web/src/components/SearchResultIcon.tsx
@@ -54,7 +54,7 @@ export function SearchResultIcon({ url }: { url: string }) {
   }
 
   return (
-    <div className="rounded-full w-[18px] h-[18px] overflow-hidden bg-gray-200">
+    <div className="rounded-full w-[18px] h-[18px] overflow-hidden bg-background-200">
       <img
         height={18}
         width={18}
diff --git a/web/src/components/Spinner.tsx b/web/src/components/Spinner.tsx
index 702d61328..4d5bc9907 100644
--- a/web/src/components/Spinner.tsx
+++ b/web/src/components/Spinner.tsx
@@ -3,7 +3,7 @@ import "./spinner.css";
 export const Spinner = () => {
   return (
     <div className="fixed top-0 left-0 z-50 w-screen h-screen bg-black bg-opacity-50 flex items-center justify-center">
-      <div className="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 h-8 w-8"></div>
+      <div className="loader ease-linear rounded-full border-8 border-t-8 border-background-200 h-8 w-8"></div>
     </div>
   );
 };
diff --git a/web/src/components/TemporaryLoadingModal.tsx b/web/src/components/TemporaryLoadingModal.tsx
index 6f45aac46..9db77962f 100644
--- a/web/src/components/TemporaryLoadingModal.tsx
+++ b/web/src/components/TemporaryLoadingModal.tsx
@@ -4,10 +4,12 @@ export default function TemporaryLoadingModal({
   content: string;
 }) {
   return (
-    <div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-30">
-      <div className="bg-white rounded-xl p-8 shadow-2xl flex items-center space-x-6">
-        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-neutral-950"></div>
-        <p className="text-xl font-medium text-gray-800">{content}</p>
+    <div className="fixed inset-0 flex items-center justify-center z-50 bg-neutral-900 bg-opacity-30 dark:bg-neutral-950 dark:bg-opacity-50">
+      <div className="bg-neutral-100 dark:bg-neutral-800 rounded-xl p-8 shadow-2xl flex items-center space-x-6">
+        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-background-950 dark:border-background-50"></div>
+        <p className="text-xl font-medium text-neutral-800 dark:text-neutral-100">
+          {content}
+        </p>
       </div>
     </div>
   );
diff --git a/web/src/components/UserDropdown.tsx b/web/src/components/UserDropdown.tsx
index 256986c1e..84197f800 100644
--- a/web/src/components/UserDropdown.tsx
+++ b/web/src/components/UserDropdown.tsx
@@ -35,7 +35,7 @@ const DropdownOption: React.FC<DropdownOptionProps> = ({
   openInNewTab,
 }) => {
   const content = (
-    <div className="flex py-1.5 text-sm px-2 gap-x-2 text-t text-sm cursor-pointer rounded hover:bg-[#f1eee8]">
+    <div className="flex py-1.5 text-sm px-2 gap-x-2 text-black text-sm cursor-pointer rounded hover:bg-background-300">
       {icon}
       {label}
     </div>
@@ -140,7 +140,7 @@ export function UserDropdown({
             <div
               className="
                 my-auto
-                bg-userdropdown-background
+                bg-background-900
                 ring-2
                 ring-transparent
                 group-hover:ring-background-300/50
@@ -175,6 +175,7 @@ export function UserDropdown({
                 border 
                 border-border 
                 bg-background
+                dark:bg-[#2F2F2F]
                 rounded-lg
                 shadow-lg 
                 flex 
diff --git a/web/src/components/admin/CardSection.tsx b/web/src/components/admin/CardSection.tsx
index d9686738e..68dbef2ba 100644
--- a/web/src/components/admin/CardSection.tsx
+++ b/web/src/components/admin/CardSection.tsx
@@ -11,7 +11,7 @@ export default function CardSection({
   return (
     <div
       className={cn(
-        "p-6 border bg-white rounded border-border-strong/80",
+        "p-6 border bg-[#fff] dark:bg-neutral-800 rounded border-neutral-200 dark:border-neutral-700",
         className
       )}
     >
diff --git a/web/src/components/admin/ClientLayout.tsx b/web/src/components/admin/ClientLayout.tsx
index e9250c899..254413d26 100644
--- a/web/src/components/admin/ClientLayout.tsx
+++ b/web/src/components/admin/ClientLayout.tsx
@@ -75,7 +75,7 @@ export function ClientLayout({
           />
         )}
 
-        <div className="flex-none text-text-settings-sidebar bg-background-sidebar w-[250px] overflow-x-hidden z-20 pt-2 pb-8 h-full border-r border-border miniscroll overflow-auto">
+        <div className="default-scrollbar flex-none text-text-settings-sidebar bg-background-sidebar w-[250px] overflow-x-hidden z-20 pt-2 pb-8 h-full border-r border-border dark:border-none miniscroll overflow-auto">
           <AdminSidebar
             collections={[
               {
@@ -85,7 +85,7 @@ export function ClientLayout({
                     name: (
                       <div className="flex">
                         <NotebookIconSkeleton
-                          className="text-icon-settings-sidebar"
+                          className="text-text-700"
                           size={18}
                         />
                         <div className="ml-1">Existing Connectors</div>
@@ -97,7 +97,7 @@ export function ClientLayout({
                     name: (
                       <div className="flex">
                         <ConnectorIconSkeleton
-                          className="text-icon-settings-sidebar"
+                          className="text-text-700"
                           size={18}
                         />
                         <div className="ml-1.5">Add Connector</div>
@@ -114,7 +114,7 @@ export function ClientLayout({
                     name: (
                       <div className="flex">
                         <DocumentSetIconSkeleton
-                          className="text-icon-settings-sidebar"
+                          className="text-text-700"
                           size={18}
                         />
                         <div className="ml-1">Document Sets</div>
@@ -126,7 +126,7 @@ export function ClientLayout({
                     name: (
                       <div className="flex">
                         <ZoomInIconSkeleton
-                          className="text-icon-settings-sidebar"
+                          className="text-text-700"
                           size={18}
                         />
                         <div className="ml-1">Explorer</div>
@@ -138,7 +138,7 @@ export function ClientLayout({
                     name: (
                       <div className="flex">
                         <ThumbsUpIconSkeleton
-                          className="text-icon-settings-sidebar"
+                          className="text-text-700"
                           size={18}
                         />
                         <div className="ml-1">Feedback</div>
@@ -155,7 +155,7 @@ export function ClientLayout({
                     name: (
                       <div className="flex">
                         <AssistantsIconSkeleton
-                          className="text-icon-settings-sidebar"
+                          className="text-text-700"
                           size={18}
                         />
                         <div className="ml-1">Assistants</div>
@@ -168,7 +168,7 @@ export function ClientLayout({
                         {
                           name: (
                             <div className="flex">
-                              <SlackIconSkeleton className="text-icon-settings-sidebar" />
+                              <SlackIconSkeleton className="text-text-700" />
                               <div className="ml-1">Slack Bots</div>
                             </div>
                           ),
@@ -178,7 +178,7 @@ export function ClientLayout({
                           name: (
                             <div className="flex">
                               <ToolIconSkeleton
-                                className="text-icon-settings-sidebar"
+                                className="text-text-700"
                                 size={18}
                               />
                               <div className="ml-1">Tools</div>
@@ -194,7 +194,7 @@ export function ClientLayout({
                           name: (
                             <div className="flex">
                               <ClipboardIcon
-                                className="text-icon-settings-sidebar"
+                                className="text-text-700"
                                 size={18}
                               />
                               <div className="ml-1">Standard Answers</div>
@@ -215,7 +215,7 @@ export function ClientLayout({
                           name: (
                             <div className="flex">
                               <GroupsIconSkeleton
-                                className="text-icon-settings-sidebar"
+                                className="text-text-700"
                                 size={18}
                               />
                               <div className="ml-1">Groups</div>
@@ -236,7 +236,7 @@ export function ClientLayout({
                           name: (
                             <div className="flex">
                               <CpuIconSkeleton
-                                className="text-icon-settings-sidebar"
+                                className="text-text-700"
                                 size={18}
                               />
                               <div className="ml-1">LLM</div>
@@ -248,7 +248,7 @@ export function ClientLayout({
                           error: settings?.settings.needs_reindexing,
                           name: (
                             <div className="flex">
-                              <SearchIcon className="text-icon-settings-sidebar" />
+                              <SearchIcon className="text-text-700" />
                               <div className="ml-1">Search Settings</div>
                             </div>
                           ),
@@ -257,7 +257,7 @@ export function ClientLayout({
                         {
                           name: (
                             <div className="flex">
-                              <DocumentIcon2 className="text-icon-settings-sidebar" />
+                              <DocumentIcon2 className="text-text-700" />
                               <div className="ml-1">Document Processing</div>
                             </div>
                           ),
@@ -272,7 +272,7 @@ export function ClientLayout({
                           name: (
                             <div className="flex">
                               <UsersIconSkeleton
-                                className="text-icon-settings-sidebar"
+                                className="text-text-700"
                                 size={18}
                               />
                               <div className="ml-1">Users</div>
@@ -286,7 +286,7 @@ export function ClientLayout({
                                 name: (
                                   <div className="flex">
                                     <GroupsIconSkeleton
-                                      className="text-icon-settings-sidebar"
+                                      className="text-text-700"
                                       size={18}
                                     />
                                     <div className="ml-1">Groups</div>
@@ -300,7 +300,7 @@ export function ClientLayout({
                           name: (
                             <div className="flex">
                               <KeyIconSkeleton
-                                className="text-icon-settings-sidebar"
+                                className="text-text-700"
                                 size={18}
                               />
                               <div className="ml-1">API Keys</div>
@@ -312,7 +312,7 @@ export function ClientLayout({
                           name: (
                             <div className="flex">
                               <ShieldIconSkeleton
-                                className="text-icon-settings-sidebar"
+                                className="text-text-700"
                                 size={18}
                               />
                               <div className="ml-1">Token Rate Limits</div>
@@ -331,7 +331,7 @@ export function ClientLayout({
                                 name: (
                                   <div className="flex">
                                     <FiActivity
-                                      className="text-icon-settings-sidebar"
+                                      className="text-text-700"
                                       size={18}
                                     />
                                     <div className="ml-1">Usage Statistics</div>
@@ -343,7 +343,7 @@ export function ClientLayout({
                                 name: (
                                   <div className="flex">
                                     <DatabaseIconSkeleton
-                                      className="text-icon-settings-sidebar"
+                                      className="text-text-700"
                                       size={18}
                                     />
                                     <div className="ml-1">Query History</div>
@@ -355,7 +355,7 @@ export function ClientLayout({
                                 name: (
                                   <div className="flex">
                                     <FiBarChart2
-                                      className="text-icon-settings-sidebar"
+                                      className="text-text-700"
                                       size={18}
                                     />
                                     <div className="ml-1">Custom Analytics</div>
@@ -374,7 +374,7 @@ export function ClientLayout({
                           name: (
                             <div className="flex">
                               <SettingsIconSkeleton
-                                className="text-icon-settings-sidebar"
+                                className="text-text-700"
                                 size={18}
                               />
                               <div className="ml-1">Workspace Settings</div>
@@ -388,7 +388,7 @@ export function ClientLayout({
                                 name: (
                                   <div className="flex">
                                     <PaintingIconSkeleton
-                                      className="text-icon-settings-sidebar"
+                                      className="text-text-700"
                                       size={18}
                                     />
                                     <div className="ml-1">Whitelabeling</div>
@@ -404,7 +404,7 @@ export function ClientLayout({
                                 name: (
                                   <div className="flex">
                                     <MdOutlineCreditCard
-                                      className="text-icon-settings-sidebar"
+                                      className="text-text-700"
                                       size={18}
                                     />
                                     <div className="ml-1">Billing</div>
diff --git a/web/src/components/admin/Title.tsx b/web/src/components/admin/Title.tsx
index b5e69677c..daedc331b 100644
--- a/web/src/components/admin/Title.tsx
+++ b/web/src/components/admin/Title.tsx
@@ -19,7 +19,7 @@ export function AdminPageTitle({
         <HealthCheckBanner />
       </div>
       <div className="w-full flex">
-        <h1 className="text-3xl text-text-800 font-bold flex gap-x-2">
+        <h1 className="text-3xl text-text-900 font-bold flex gap-x-2">
           {icon} {title}
         </h1>
         {farRightElement && <div className="ml-auto">{farRightElement}</div>}
diff --git a/web/src/components/admin/connectors/AccessTypeGroupSelector.tsx b/web/src/components/admin/connectors/AccessTypeGroupSelector.tsx
index 3bd16a804..e9bc31597 100644
--- a/web/src/components/admin/connectors/AccessTypeGroupSelector.tsx
+++ b/web/src/components/admin/connectors/AccessTypeGroupSelector.tsx
@@ -110,7 +110,7 @@ export function AccessTypeGroupSelector({
               </div>
             </div>
             {userGroupsIsLoading ? (
-              <div className="animate-pulse bg-gray-200 h-8 w-32 rounded"></div>
+              <div className="animate-pulse bg-background-200 h-8 w-32 rounded"></div>
             ) : (
               <Text className="mb-3">
                 {isAdmin ? (
@@ -131,7 +131,7 @@ export function AccessTypeGroupSelector({
               render={(arrayHelpers: ArrayHelpers) => (
                 <div className="flex gap-2 flex-wrap mb-4">
                   {userGroupsIsLoading ? (
-                    <div className="animate-pulse bg-gray-200 h-8 w-32 rounded"></div>
+                    <div className="animate-pulse bg-background-200 h-8 w-32 rounded"></div>
                   ) : (
                     userGroups &&
                     userGroups.map((userGroup: UserGroup) => {
@@ -152,7 +152,7 @@ export function AccessTypeGroupSelector({
                             ${
                               isSelected
                                 ? "bg-background-strong"
-                                : "hover:bg-hover"
+                                : "hover:bg-accent-background-hovered"
                             }
                         `}
                           onClick={() => {
diff --git a/web/src/components/admin/connectors/AdminSidebar.tsx b/web/src/components/admin/connectors/AdminSidebar.tsx
index df4d239b9..9e1506d9a 100644
--- a/web/src/components/admin/connectors/AdminSidebar.tsx
+++ b/web/src/components/admin/connectors/AdminSidebar.tsx
@@ -49,7 +49,7 @@ export function AdminSidebar({ collections }: { collections: Collection[] }) {
         </div>
         <div className="flex w-full justify-center">
           <Link href="/chat">
-            <button className="text-sm hover:bg-background-settings-hover flex items-center block w-52 py-2.5 flex px-2 text-left hover:bg-opacity-80 cursor-pointer rounded">
+            <button className="text-sm text-text-700 hover:bg-background-settings-hover dark:hover:bg-neutral-800 flex items-center block w-52 py-2.5 flex px-2 text-left hover:bg-opacity-80 cursor-pointer rounded">
               <CgArrowsExpandUpLeft className="my-auto" size={18} />
               <p className="ml-1 break-words line-clamp-2 ellipsis leading-none">
                 Exit Admin
@@ -62,27 +62,15 @@ export function AdminSidebar({ collections }: { collections: Collection[] }) {
             className="flex flex-col items-center justify-center w-full"
             key={collectionInd}
           >
-            <h2 className="text-xs text-text-settings-sidebar-strong w-52 font-bold pb-2">
+            <h2 className="text-xs text-text-800 w-52 font-bold pb-2">
               <div>{collection.name}</div>
             </h2>
             {collection.items.map((item) => (
               <Link key={item.link} href={item.link}>
                 <button
-                  className={`text-sm block flex gap-x-2 items-center w-52 py-2.5 px-2 text-left hover:bg-background-settings-hover rounded`}
+                  className={`text-sm text-text-700 block flex gap-x-2 items-center w-52 py-2.5 px-2 text-left hover:bg-background-settings-hover dark:hover:bg-neutral-800 rounded`}
                 >
                   {item.name}
-                  {item.error && (
-                    <TooltipProvider>
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <WarningCircle size={18} className="text-error" />
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          Navigate here to update your search settings
-                        </TooltipContent>
-                      </Tooltip>
-                    </TooltipProvider>
-                  )}
                 </button>
               </Link>
             ))}
@@ -91,10 +79,10 @@ export function AdminSidebar({ collections }: { collections: Collection[] }) {
       </nav>
       {combinedSettings.webVersion && (
         <div
-          className="flex flex-col mt-6 items-center justify-center w-full"
+          className="flex flex-col mt-12 items-center justify-center w-full"
           key={"onyxVersion"}
         >
-          <h2 className="text-xs text-text w-52 font-medium pb-2">
+          <h2 className="text-xs text-text/40 w-52 font-medium">
             Onyx version: {combinedSettings.webVersion}
           </h2>
         </div>
diff --git a/web/src/components/admin/connectors/BasicTable.tsx b/web/src/components/admin/connectors/BasicTable.tsx
index 8fae28e1d..569896836 100644
--- a/web/src/components/admin/connectors/BasicTable.tsx
+++ b/web/src/components/admin/connectors/BasicTable.tsx
@@ -26,7 +26,7 @@ export const BasicTable: FC<BasicTableProps> = ({
     <div>
       <table className="w-full table-auto">
         <thead>
-          <tr className="text-left bg-gray-700">
+          <tr className="text-left bg-background-700">
             {columns.map((column, index) => {
               const isRightAligned = column?.alignment === "right";
               return (
@@ -55,7 +55,7 @@ export const BasicTable: FC<BasicTableProps> = ({
               key={rowIndex}
               className={
                 "text-sm" +
-                (onSelect ? " hover:bg-gray-800 cursor-pointer" : "")
+                (onSelect ? " hover:bg-background-800 cursor-pointer" : "")
               }
               onClick={() => onSelect && onSelect(row)}
             >
@@ -67,7 +67,7 @@ export const BasicTable: FC<BasicTableProps> = ({
                     className={
                       (column.width ? `w-${column.width} ` : "") +
                       (isRightAligned ? "flex" : "") +
-                      "py-2 px-4 border-b border-gray-800"
+                      "py-2 px-4 border-b border-background-800"
                     }
                   >
                     <div>{row[column.key]}</div>
diff --git a/web/src/components/admin/connectors/Field.tsx b/web/src/components/admin/connectors/Field.tsx
index 3d1d4219a..9f2763afd 100644
--- a/web/src/components/admin/connectors/Field.tsx
+++ b/web/src/components/admin/connectors/Field.tsx
@@ -1,3 +1,4 @@
+"use client";
 import {
   ArrayHelpers,
   ErrorMessage,
@@ -76,7 +77,11 @@ export function LabelWithTooltip({
 }
 
 export function SubLabel({ children }: { children: string | JSX.Element }) {
-  return <div className="text-sm text-text-dark/80 mb-2">{children}</div>;
+  return (
+    <div className="text-sm text-neutral-600 dark:text-neutral-300 mb-2">
+      {children}
+    </div>
+  );
 }
 
 export function ManualErrorMessage({ children }: { children: string }) {
@@ -254,21 +259,44 @@ export function TextFormField({
           id={name}
           className={`
             ${small && sizeClass.input}
-            border 
-            border-border 
-            rounded-md
+            flex
+            h-10
             w-full 
-            py-2 
+            rounded-md
+            border 
+            border-neutral-200
+            bg-white
             px-3 
+            py-2 
             mt-1
+            text-base
+
+            file:border-0
+            file:bg-transparent
+            file:text-sm
+            file:font-medium
+            file:text-neutral-950
+            placeholder:text-neutral-500
             placeholder:font-description 
             placeholder:${sizeClass.placeholder}
             caret-accent
-            placeholder:text-text-muted
+            focus-visible:outline-none
+            focus-visible:ring-1
+            focus-visible:ring-lighter-agent
+            focus-visible:ring-offset-1
+            disabled:cursor-not-allowed
+            disabled:opacity-50
+            md:text-sm
+            dark:border-neutral-700
+            dark:bg-transparent
+            dark:ring-offset-neutral-950
+            dark:file:text-neutral-50
+            dark:placeholder:text-neutral-400
+
             ${heightString}
             ${sizeClass.input}
-            ${disabled ? " bg-background-strong" : " bg-white/80"}
-            ${isCode ? " font-mono" : ""}
+            ${disabled ? "bg-neutral-100 dark:bg-neutral-800" : ""}
+            ${isCode ? "font-mono" : ""}
             ${className}
           `}
           disabled={disabled}
@@ -386,24 +414,24 @@ export const MarkdownFormField = ({
   return (
     <div className="flex flex-col space-y-4 mb-4">
       <Label>{label}</Label>
-      <div className="border border-gray-300 rounded-md">
-        <div className="flex items-center justify-between px-4 py-2 bg-gray-100 rounded-t-md">
+      <div className="border border-background-300 rounded-md">
+        <div className="flex items-center justify-between px-4 py-2 bg-background-100 rounded-t-md">
           <div className="flex items-center space-x-2">
-            <FaMarkdown className="text-gray-500" />
-            <span className="text-sm font-semibold text-gray-600">
+            <FaMarkdown className="text-text-500" />
+            <span className="text-sm font-semibold text-text-600">
               Markdown
             </span>
           </div>
           <button
             type="button"
             onClick={togglePreview}
-            className="text-sm font-semibold text-gray-600 hover:text-gray-800 focus:outline-none"
+            className="text-sm font-semibold text-text-600 hover:text-text-800 focus:outline-none"
           >
             {isPreviewOpen ? "Write" : "Preview"}
           </button>
         </div>
         {isPreviewOpen ? (
-          <div className="p-4 border-t border-gray-300">
+          <div className="p-4 border-t border-background-300">
             <ReactMarkdown className="prose" remarkPlugins={[remarkGfm]}>
               {field.value}
             </ReactMarkdown>
@@ -414,7 +442,7 @@ export const MarkdownFormField = ({
               {...field}
               rows={2}
               placeholder={placeholder}
-              className={`w-full p-2 border border-border rounded-md border-gray-300`}
+              className={`w-full p-2 border border-border rounded-md border-background-300`}
             />
           </div>
         )}
@@ -505,6 +533,7 @@ export const BooleanFormField = ({
               }`}</Label>
               {tooltip && <ToolTipDetails>{tooltip}</ToolTipDetails>}
             </div>
+
             {subtext && <SubLabel>{subtext}</SubLabel>}
           </div>
         )}
@@ -578,7 +607,7 @@ export function TextArrayField<T extends Yup.AnyObject>({
                     <div className="my-auto">
                       {index >= minFields ? (
                         <FiX
-                          className="my-auto w-10 h-10 cursor-pointer hover:bg-hover rounded p-2"
+                          className="my-auto w-10 h-10 cursor-pointer hover:bg-accent-background-hovered rounded p-2"
                           onClick={() => arrayHelpers.remove(index)}
                         />
                       ) : (
diff --git a/web/src/components/admin/connectors/FileUpload.tsx b/web/src/components/admin/connectors/FileUpload.tsx
index 090862c69..fe950655f 100644
--- a/web/src/components/admin/connectors/FileUpload.tsx
+++ b/web/src/components/admin/connectors/FileUpload.tsx
@@ -50,7 +50,7 @@ export const FileUpload: FC<FileUploadProps> = ({
               }
             >
               <input {...getInputProps()} />
-              <b className="text-emphasis">
+              <b className="text-text-darker">
                 {message ||
                   `Drag and drop ${
                     multiple ? "some files" : "a file"
diff --git a/web/src/components/admin/connectors/Popup.tsx b/web/src/components/admin/connectors/Popup.tsx
index 1f17ee372..1e945edfd 100644
--- a/web/src/components/admin/connectors/Popup.tsx
+++ b/web/src/components/admin/connectors/Popup.tsx
@@ -4,15 +4,16 @@ import { cn } from "@/lib/utils";
 import { Check, CheckCircle, XCircle } from "lucide-react";
 import { Warning } from "@phosphor-icons/react";
 import { NEXT_PUBLIC_INCLUDE_ERROR_POPUP_SUPPORT_LINK } from "@/lib/constants";
+
 const popupVariants = cva(
-  "fixed bottom-4 left-4 p-4 rounded-lg shadow-xl text-white z-[10000] flex items-center space-x-3 transition-all duration-300 ease-in-out",
+  "fixed bottom-4 left-4 p-4 rounded-lg shadow-xl text-[#fff] z-[10000] flex items-center space-x-3 transition-all duration-300 ease-in-out",
   {
     variants: {
       type: {
-        success: "bg-green-500",
-        error: "bg-red-500",
-        info: "bg-blue-500",
-        warning: "bg-yellow-500",
+        success: "bg-green-500 dark:bg-green-600",
+        error: "bg-red-500 dark:bg-red-600",
+        info: "bg-blue-500 dark:bg-blue-600",
+        warning: "bg-yellow-500 dark:bg-yellow-600",
       },
     },
     defaultVariants: {
@@ -69,7 +70,7 @@ export const Popup: React.FC<PopupSpec> = ({ message, type }) => (
             href="https://join.slack.com/t/onyx-dot-app/shared_invite/zt-2twesxdr6-5iQitKZQpgq~hYIZ~dv3KA"
             target="_blank"
             rel="noopener noreferrer"
-            className="underline hover:text-red-100"
+            className="underline hover:text-red-100 dark:hover:text-red-200"
           >
             Join our community
           </a>{" "}
diff --git a/web/src/components/admin/users/SignedUpUserTable.tsx b/web/src/components/admin/users/SignedUpUserTable.tsx
index d9dfec9e4..08d2735f2 100644
--- a/web/src/components/admin/users/SignedUpUserTable.tsx
+++ b/web/src/components/admin/users/SignedUpUserTable.tsx
@@ -138,7 +138,7 @@ const SignedUpUserTable = ({
           <SelectTrigger className="w-[260px] h-[34px] bg-neutral">
             <SelectValue />
           </SelectTrigger>
-          <SelectContent className="bg-neutral-50">
+          <SelectContent className="bg-background-50">
             <SelectItem value="all">All Status</SelectItem>
             <SelectItem value="true">Active</SelectItem>
             <SelectItem value="false">Inactive</SelectItem>
@@ -152,13 +152,13 @@ const SignedUpUserTable = ({
                 : "All Roles"}
             </SelectValue>
           </SelectTrigger>
-          <SelectContent className="bg-neutral-50">
+          <SelectContent className="bg-background-50">
             {Object.entries(USER_ROLE_LABELS)
               .filter(([role]) => role !== UserRole.EXT_PERM_USER)
               .map(([role, label]) => (
                 <div
                   key={role}
-                  className="flex items-center space-x-2 px-2 py-1.5 cursor-pointer hover:bg-gray-200"
+                  className="flex items-center space-x-2 px-2 py-1.5 cursor-pointer hover:bg-background-200"
                   onClick={() => toggleRole(role as UserRole)}
                 >
                   <input
@@ -176,7 +176,7 @@ const SignedUpUserTable = ({
         {selectedRoles.map((role) => (
           <button
             key={role}
-            className="border border-neutral-300 bg-neutral p-1 rounded text-sm hover:bg-neutral-200"
+            className="border border-background-300 bg-neutral p-1 rounded text-sm hover:bg-background-200"
             onClick={() => removeRole(role)}
             style={{ padding: "2px 8px" }}
           >
diff --git a/web/src/components/assistants/AssistantIcon.tsx b/web/src/components/assistants/AssistantIcon.tsx
index fc3be339f..d48e3e938 100644
--- a/web/src/components/assistants/AssistantIcon.tsx
+++ b/web/src/components/assistants/AssistantIcon.tsx
@@ -53,7 +53,7 @@ export function generateIdenticon(str: string, dimension: number) {
             y={yPos - 0.5}
             width={cellSize + 1}
             height={cellSize + 1}
-            fill="black"
+            fill="currentColor"
           />
         );
 
@@ -67,7 +67,7 @@ export function generateIdenticon(str: string, dimension: number) {
               y={yPos - 0.5}
               width={cellSize + 1}
               height={cellSize + 1}
-              fill="black"
+              fill="currentColor"
             />
           );
         }
@@ -120,14 +120,16 @@ export function AssistantIcon({
           }
         })();
 
-  const wrapperClass = border ? "ring ring-[1px] ring-border-strong" : "";
+  const wrapperClass = border
+    ? "ring text-[#000] dark:text-[#fff] ring-[1px] ring-border-strong"
+    : "";
   const style = { width: dimension, height: dimension };
 
   return (
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger asChild>
-          <div className={className}>
+          <div className={className + " text-[#000] dark:text-[#fff]"}>
             {assistant.id == -3 ? (
               <ArtAsistantIcon size={dimension} />
             ) : assistant.id == 0 ? (
diff --git a/web/src/components/assistants/StarterMessage.tsx b/web/src/components/assistants/StarterMessage.tsx
index c5100ec45..16911a7bb 100644
--- a/web/src/components/assistants/StarterMessage.tsx
+++ b/web/src/components/assistants/StarterMessage.tsx
@@ -44,11 +44,15 @@ export function StarterMessages({
                     className={`
                       relative flex ${!isMobile ? "w-40" : "w-full max-w-52"}
                       shadow
-                      border-[#DCDAD4]/60
+                      border-background-300/60
                       flex-col gap-2 rounded-md
-                      text-text-dark hover:text-text
+                      text-input-text hover:text-text
                       border
-                      bg-background-starter-message
+
+                      dark:bg-transparent
+                      dark:border-neutral-700
+                      dark:hover:bg-background-150
+                      font-normal
                       px-3 py-2
                       text-start align-to text-wrap
                       text-[15px] shadow-xs transition
diff --git a/web/src/components/auth/AuthFlowContainer.tsx b/web/src/components/auth/AuthFlowContainer.tsx
index 446e8e79f..9b22a0596 100644
--- a/web/src/components/auth/AuthFlowContainer.tsx
+++ b/web/src/components/auth/AuthFlowContainer.tsx
@@ -10,12 +10,12 @@ export default function AuthFlowContainer({
 }) {
   return (
     <div className="p-4 flex flex-col items-center justify-center min-h-screen bg-background">
-      <div className="w-full max-w-md bg-black pt-8 pb-6 px-8 mx-4 gap-y-4 bg-white flex items-center flex-col rounded-xl shadow-lg border border-bacgkround-100">
+      <div className="w-full max-w-md bg-black pt-8 pb-6 px-8 mx-4 gap-y-4 bg-white flex items-center dark:border-none flex-col rounded-xl shadow-lg border border-bacgkround-100 gap-y-2 ">
         <Logo width={70} height={70} />
-        {children}
+        <div className="mt-4  w-full">{children}</div>
       </div>
       {authState === "login" && (
-        <div className="text-sm mt-4 text-center w-full text-neutral-900 font-medium mx-auto">
+        <div className="text-sm mt-4 text-center w-full text-text-900 font-medium mx-auto">
           Don&apos;t have an account?{" "}
           <Link
             href="/auth/signup"
@@ -26,7 +26,7 @@ export default function AuthFlowContainer({
         </div>
       )}
       {authState === "signup" && (
-        <div className="text-sm mt-4 text-center w-full text-neutral-800 font-medium mx-auto">
+        <div className="text-sm mt-4 text-center w-full text-text-800 font-medium mx-auto">
           Already have an account?{" "}
           <Link
             href="/auth/login"
diff --git a/web/src/components/chat/Header.tsx b/web/src/components/chat/Header.tsx
index 4892fec90..199d7a0cc 100644
--- a/web/src/components/chat/Header.tsx
+++ b/web/src/components/chat/Header.tsx
@@ -10,6 +10,7 @@ import { ChatBanner } from "@/app/chat/ChatBanner";
 import LogoWithText from "../header/LogoWithText";
 import { NewChatIcon } from "../icons/icons";
 import { SettingsContext } from "../settings/SettingsProvider";
+import { ModeToggle } from "@/app/chat/modal/ThemeToggle";
 
 export default function FunctionalHeader({
   page,
@@ -139,7 +140,7 @@ export default function FunctionalHeader({
             {setSharingModalVisible && !hideUserDropdown && (
               <div
                 onClick={() => setSharingModalVisible(true)}
-                className="mobile:hidden mr-2 my-auto rounded-full p-1 cursor-pointer hover:bg-hover-light"
+                className="mobile:hidden mr-2 my-auto rounded-full p-1 cursor-pointer hover:bg-accent-background"
               >
                 <FiShare2 size="18" />
               </div>
diff --git a/web/src/components/chat/Notifications.tsx b/web/src/components/chat/Notifications.tsx
index ec443e33a..8f6e0a451 100644
--- a/web/src/components/chat/Notifications.tsx
+++ b/web/src/components/chat/Notifications.tsx
@@ -133,7 +133,7 @@ export const Notifications = ({
     <div className="w-full">
       <button
         onClick={navigateToDropdown}
-        className="absolute right-2 text-background-600 hover:text-background-900 transition-colors duration-150 ease-in-out rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"
+        className="absolute right-2 text-text-600 hover:text-text-900 transition-colors duration-150 ease-in-out rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"
         aria-label="Back"
       >
         <XIcon className="w-5 h-5" />
@@ -154,7 +154,7 @@ export const Notifications = ({
               return (
                 <div
                   key={notification.id}
-                  className="w-72 px-4 py-3 border-b last:border-b-0 hover:bg-gray-50 transition duration-150 ease-in-out"
+                  className="w-72 px-4 py-3 border-b last:border-b-0 hover:bg-background-50 transition duration-150 ease-in-out"
                 >
                   <div className="flex items-start">
                     {persona && (
@@ -163,18 +163,18 @@ export const Notifications = ({
                       </div>
                     )}
                     <div className="flex-grow">
-                      <p className="font-semibold text-sm text-gray-800">
+                      <p className="font-semibold text-sm text-text-800">
                         New Assistant Shared: {persona?.name}
                       </p>
                       {persona?.description && (
-                        <p className="text-xs text-gray-600 mt-1">
+                        <p className="text-xs text-text-600 mt-1">
                           {persona.description}
                         </p>
                       )}
                       {persona && (
                         <div className="mt-2">
                           {persona.tools.length > 0 && (
-                            <p className="text-xs text-gray-500">
+                            <p className="text-xs text-text-500">
                               Tools:{" "}
                               {persona.tools
                                 .map((tool) => tool.name)
@@ -182,7 +182,7 @@ export const Notifications = ({
                             </p>
                           )}
                           {persona.document_sets.length > 0 && (
-                            <p className="text-xs text-gray-500">
+                            <p className="text-xs text-text-500">
                               Document Sets:{" "}
                               {persona.document_sets
                                 .map((set) => set.name)
@@ -190,7 +190,7 @@ export const Notifications = ({
                             </p>
                           )}
                           {persona.llm_model_version_override && (
-                            <p className="text-xs text-gray-500">
+                            <p className="text-xs text-text-500">
                               Model: {persona.llm_model_version_override}
                             </p>
                           )}
@@ -209,7 +209,7 @@ export const Notifications = ({
                     </button>
                     <button
                       onClick={() => dismissNotification(notification.id)}
-                      className="px-3 py-1 text-sm font-medium text-gray-600 hover:text-gray-800 transition duration-150 ease-in-out"
+                      className="px-3 py-1 text-sm font-medium text-text-600 hover:text-text-800 transition duration-150 ease-in-out"
                     >
                       Dismiss
                     </button>
@@ -223,7 +223,7 @@ export const Notifications = ({
           </div>
         )
       ) : (
-        <div className="px-4 py-3 text-center text-gray-600">
+        <div className="px-4 py-3 text-center text-text-600">
           No new notifications
         </div>
       )}
diff --git a/web/src/components/chat/sources/SourceCard.tsx b/web/src/components/chat/sources/SourceCard.tsx
index 13be7651c..d28b6548d 100644
--- a/web/src/components/chat/sources/SourceCard.tsx
+++ b/web/src/components/chat/sources/SourceCard.tsx
@@ -26,34 +26,34 @@ export const ResultIcon = ({
   );
 };
 
-export default function SourceCard({
-  doc,
-  setPresentingDocument,
-}: {
-  doc: OnyxDocument;
-  setPresentingDocument?: (document: OnyxDocument) => void;
-}) {
-  return (
-    <div
-      key={doc.document_id}
-      onClick={() => openDocument(doc, setPresentingDocument)}
-      className="cursor-pointer h-[80px] text-left overflow-hidden flex flex-col gap-0.5 rounded-lg px-3 py-2 bg-[#f1eee8] hover:bg-[#ebe7de] w-[200px]"
-    >
-      <div className="line-clamp-1 font-semibold text-ellipsis text-text-900  flex h-6 items-center gap-2 text-sm">
-        {doc.is_internet || doc.source_type === "web" ? (
-          <WebResultIcon url={doc.link} />
-        ) : (
-          <SourceIcon sourceType={doc.source_type} iconSize={18} />
-        )}
-        <p>{truncateString(doc.semantic_identifier || doc.document_id, 20)}</p>
-      </div>
-      <div className="line-clamp-2 text-sm font-semibold"></div>
-      <div className="line-clamp-2 text-sm font-normal leading-snug text-text-700">
-        {doc.blurb}
-      </div>
-    </div>
-  );
-}
+// export default function SourceCard({
+//   doc,
+//   setPresentingDocument,
+// }: {
+//   doc: OnyxDocument;
+//   setPresentingDocument?: (document: OnyxDocument) => void;
+// }) {
+//   return (
+//     <div
+//       key={doc.document_id}
+//       onClick={() => openDocument(doc, setPresentingDocument)}
+//       className="cursor-pointer h-[80px] text-left overflow-hidden flex flex-col gap-0.5 rounded-lg px-3 py-2 bg-accent-background hover:bg-accent-background-hovered w-[200px]"
+//     >
+//       <div className="line-clamp-1 font-semibold text-ellipsis text-text-900  flex h-6 items-center gap-2 text-sm">
+//         {doc.is_internet || doc.source_type === "web" ? (
+//           <WebResultIcon url={doc.link} />
+//         ) : (
+//           <SourceIcon sourceType={doc.source_type} iconSize={18} />
+//         )}
+//         <p>{truncateString(doc.semantic_identifier || doc.document_id, 20)}</p>
+//       </div>
+//       <div className="line-clamp-2 text-sm font-semibold"></div>
+//       <div className="line-clamp-2 text-sm font-normal leading-snug text-text-700">
+//         {doc.blurb}
+//       </div>
+//     </div>
+//   );
+// }
 
 interface SeeMoreBlockProps {
   toggleDocumentSelection: () => void;
@@ -154,7 +154,7 @@ export function SeeMoreBlock({
     <button
       onClick={toggleDocumentSelection}
       className={`w-full ${fullWidth ? "w-full" : "max-w-[200px]"}
-        h-[80px] p-3 border border-[1.5px] border-[#D9D1c0] bg-[#f1eee8] text-left hover:bg-[#ebe7de] cursor-pointer rounded-lg flex flex-col justify-between overflow-hidden`}
+        h-[80px] p-3 border border-[1.5px] border-new-background-light   text-left bg-accent-background hover:bg-accent-background-hovered dark:bg-accent-background-hovered dark:hover:bg-neutral-700/80 cursor-pointer rounded-lg flex flex-col justify-between overflow-hidden`}
     >
       <div className="flex items-center gap-1">
         {docs.length > 2 && iconsToRender.map((icon, index) => icon)}
diff --git a/web/src/components/credentials/actions/ModifyCredential.tsx b/web/src/components/credentials/actions/ModifyCredential.tsx
index 7dded01b7..76b07d37e 100644
--- a/web/src/components/credentials/actions/ModifyCredential.tsx
+++ b/web/src/components/credentials/actions/ModifyCredential.tsx
@@ -62,12 +62,12 @@ const CredentialSelectionTable = ({
     <div className="w-full max-h-[50vh] overflow-auto">
       <table className="w-full text-sm border-collapse">
         <thead className="sticky top-0 w-full">
-          <tr className="bg-gray-100">
-            <th className="p-2 text-left font-medium text-gray-600"></th>
-            <th className="p-2 text-left font-medium text-gray-600">ID</th>
-            <th className="p-2 text-left font-medium text-gray-600">Name</th>
-            <th className="p-2 text-left font-medium text-gray-600">Created</th>
-            <th className="p-2 text-left font-medium text-gray-600">
+          <tr className="bg-background-100">
+            <th className="p-2 text-left font-medium text-text-600"></th>
+            <th className="p-2 text-left font-medium text-text-600">ID</th>
+            <th className="p-2 text-left font-medium text-text-600">Name</th>
+            <th className="p-2 text-left font-medium text-text-600">Created</th>
+            <th className="p-2 text-left font-medium text-text-600">
               Last Updated
             </th>
             <th />
@@ -84,7 +84,10 @@ const CredentialSelectionTable = ({
                 (editableCredential) => editableCredential.id === credential.id
               );
               return (
-                <tr key={credential.id} className="border-b hover:bg-gray-50">
+                <tr
+                  key={credential.id}
+                  className="border-b hover:bg-background-50"
+                >
                   <td className="min-w-[60px] p-2">
                     {!selected ? (
                       <input
@@ -247,9 +250,9 @@ export default function ModifyCredential({
                 onClick={() => {
                   onCreateNew();
                 }}
-                className="bg-neutral-500 disabled:border-transparent 
-              transition-colors duration-150 ease-in disabled:bg-neutral-300 
-              disabled:hover:bg-neutral-300 hover:bg-neutral-600 cursor-pointer"
+                className="bg-background-500 disabled:border-transparent 
+              transition-colors duration-150 ease-in disabled:bg-background-300 
+              disabled:hover:bg-background-300 hover:bg-background-600 cursor-pointer"
               >
                 <div className="flex gap-x-2 items-center w-full border-none">
                   <NewChatIcon className="text-white" />
diff --git a/web/src/components/documentSet/DocumentSetSelectable.tsx b/web/src/components/documentSet/DocumentSetSelectable.tsx
index 941029b03..a289b06aa 100644
--- a/web/src/components/documentSet/DocumentSetSelectable.tsx
+++ b/web/src/components/documentSet/DocumentSetSelectable.tsx
@@ -44,7 +44,11 @@ export function DocumentSetSelectable({
               ${disabled ? "bg-background" : ""}
               flex 
               cursor-pointer 
-              ${isSelected ? "bg-hover" : "bg-background hover:bg-hover-light"}
+              ${
+                isSelected
+                  ? "bg-accent-background-hovered"
+                  : "bg-background hover:bg-accent-background"
+              }
             `}
             onClick={disabled ? undefined : onSelect}
           >
diff --git a/web/src/components/embedding/EmbeddingSidebar.tsx b/web/src/components/embedding/EmbeddingSidebar.tsx
index 35099093c..e474b58ec 100644
--- a/web/src/components/embedding/EmbeddingSidebar.tsx
+++ b/web/src/components/embedding/EmbeddingSidebar.tsx
@@ -19,10 +19,9 @@ export default function EmbeddingSidebar() {
   const settingSteps = ["Embedding Model", "Reranking Model", "Advanced"];
 
   return (
-    <div className="flex bg-background text-default">
+    <div className="flex bg-background-sidebar text-default">
       <div
         className={`flex-none
-                  bg-background-100
                   h-screen
                   transition-all
                   bg-opacity-80
@@ -31,7 +30,7 @@ export default function EmbeddingSidebar() {
                   w-[250px]
                   `}
       >
-        <div className="fixed h-full left-0 top-0 bg-background-100 w-[250px]">
+        <div className="fixed h-full left-0 top-0 bg- w-[250px]">
           <div className="ml-4 mr-3 flex flex gap-x-1 items-center mt-2 my-auto text-text-700 text-xl">
             <div className="mr-1 my-auto h-6 w-6">
               <Logo height={24} width={24} />
@@ -49,7 +48,7 @@ export default function EmbeddingSidebar() {
           <div className="mx-3 mt-6 gap-y-1 flex-col flex gap-x-1.5 items-center items-center">
             <Link
               href={"/admin/configuration/search"}
-              className="w-full p-2 bg-white border-border border rounded items-center hover:bg-background-200 cursor-pointer transition-all duration-150 flex gap-x-2"
+              className="w-full p-2 bg-[#fff] dark:bg-neutral-950 border-border border dark:border-neutral-800 dark:hover:bg-neutral-900 rounded items-center hover:bg-background-200 cursor-pointer transition-all duration-150 flex gap-x-2"
             >
               <SettingsIcon className="flex-none " />
               <p className="my-auto flex items-center text-sm">
@@ -61,7 +60,7 @@ export default function EmbeddingSidebar() {
           <div className="h-full flex">
             <div className="mx-auto w-full max-w-2xl px-4 py-8">
               <div className="relative">
-                <div className="absolute h-[85%] left-[6px] top-[8px] bottom-0 w-0.5 bg-gray-300"></div>
+                <div className="absolute h-[85%] left-[6px] top-[8px] bottom-0 w-0.5 bg-background-300"></div>
                 {settingSteps.map((step, index) => {
                   return (
                     <div
@@ -80,7 +79,7 @@ export default function EmbeddingSidebar() {
                       </div>
                       <div
                         className={`${
-                          index <= formStep ? "text-gray-800" : "text-gray-500"
+                          index <= formStep ? "text-text-800" : "text-text-500"
                         }`}
                       >
                         {step}
diff --git a/web/src/components/embedding/ModelSelector.tsx b/web/src/components/embedding/ModelSelector.tsx
index 22f5bc9b6..385b0cf66 100644
--- a/web/src/components/embedding/ModelSelector.tsx
+++ b/web/src/components/embedding/ModelSelector.tsx
@@ -22,7 +22,7 @@ export function ModelPreview({
   return (
     <CardSection
       className={`shadow-md ${
-        display ? "bg-inverted rounded-lg p-4" : "bg-hover-light p-2"
+        display ? "bg-inverted rounded-lg p-4" : "bg-accent-background p-2"
       } w-96 flex flex-col`}
     >
       <div className="font-bold text-lg flex">{model.model_name}</div>
@@ -50,8 +50,8 @@ export function ModelOption({
     <div
       className={`p-4 w-96 border rounded-lg transition-all duration-200 ${
         selected
-          ? "border-blue-500 bg-blue-50 shadow-md"
-          : "border-gray-200 hover:border-blue-300 hover:shadow-sm"
+          ? "border-blue-500 bg-blue-50 dark:bg-blue-900 dark:border-blue-700 shadow-md"
+          : "border-background-200 hover:border-blue-300 hover:shadow-sm"
       }`}
     >
       <div className="flex items-center justify-between mb-3">
@@ -69,12 +69,12 @@ export function ModelOption({
           </a>
         )}
       </div>
-      <p className="text-sm k text-gray-600 text-left mb-2">
+      <p className="text-sm k text-text-600 dark:text-neutral-400 text-left mb-2">
         {model.description ||
           currentModelCopy?.description ||
           "Custom model—no description is available."}
       </p>
-      <div className="text-xs text-gray-500">
+      <div className="text-xs text-text-500">
         {model.isDefault ? "Default" : "Self-hosted"}
       </div>
       {onSelect && (
@@ -83,7 +83,7 @@ export function ModelOption({
             className={`w-full p-2 rounded-lg text-sm ${
               selected
                 ? "bg-background-125 border border-border cursor-not-allowed"
-                : "bg-background border border-border hover:bg-hover cursor-pointer"
+                : "bg-background border border-border hover:bg-accent-background-hovered cursor-pointer"
             }`}
             onClick={(e) => {
               e.stopPropagation();
diff --git a/web/src/components/extension/Shortcuts.tsx b/web/src/components/extension/Shortcuts.tsx
index a1581c792..294e9e673 100644
--- a/web/src/components/extension/Shortcuts.tsx
+++ b/web/src/components/extension/Shortcuts.tsx
@@ -142,7 +142,7 @@ export const NewShortCutModal = ({
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-[95%] sm:max-w-[425px] bg-neutral-900 border-none text-white">
+      <DialogContent className="max-w-[95%] sm:max-w-[425px] bg-background-900 border-none text-white">
         <DialogHeader>
           <DialogTitle>
             {editingShortcut ? "Edit Shortcut" : "Add New Shortcut"}
@@ -158,7 +158,7 @@ export const NewShortCutModal = ({
             <div className="flex flex-col space-y-2">
               <Label
                 htmlFor="name"
-                className="text-sm font-medium text-neutral-300"
+                className="text-sm font-medium text-text-300"
               >
                 Name
               </Label>
@@ -166,14 +166,14 @@ export const NewShortCutModal = ({
                 id="name"
                 value={name}
                 onChange={(e) => setName(e.target.value)}
-                className="w-full bg-neutral-800 border-neutral-700 text-white"
+                className="w-full bg-background-800 border-background-700 text-white"
                 placeholder="Enter shortcut name"
               />
             </div>
             <div className="flex flex-col space-y-2">
               <Label
                 htmlFor="url"
-                className="text-sm font-medium text-neutral-300"
+                className="text-sm font-medium text-text-300"
               >
                 URL
               </Label>
@@ -181,7 +181,7 @@ export const NewShortCutModal = ({
                 id="url"
                 value={url}
                 onChange={handleUrlChange}
-                className={`bg-neutral-800 border-neutral-700 text-white ${
+                className={`bg-background-800 border-background-700 text-white ${
                   !isValidUrl && url ? "border-red-500" : ""
                 }`}
                 placeholder="https://example.com"
@@ -191,7 +191,7 @@ export const NewShortCutModal = ({
               )}
             </div>
             <div className="flex items-center space-x-2">
-              <Label className="text-sm font-medium text-neutral-300">
+              <Label className="text-sm font-medium text-text-300">
                 Favicon Preview:
               </Label>
               <div className="w-8 h-8 relative flex items-center justify-center">
@@ -246,7 +246,7 @@ export const MaxShortcutsReachedModal = ({
       onOutsideClick={onClose}
     >
       <div className="flex flex-col gap-4">
-        <p className="text-left text-neutral-900">
+        <p className="text-left text-text-900">
           You&apos;ve reached the maximum limit of 8 shortcuts. To add a new
           shortcut, please remove an existing one.
         </p>
diff --git a/web/src/components/filters/SourceSelector.tsx b/web/src/components/filters/SourceSelector.tsx
index 79303460c..4402eabf7 100644
--- a/web/src/components/filters/SourceSelector.tsx
+++ b/web/src/components/filters/SourceSelector.tsx
@@ -106,7 +106,7 @@ export function SourceSelector({
         showDocSidebar ? "4xl:block" : "!block"
       } duration-1000 flex ease-out transition-all transform origin-top-right`}
     >
-      <button onClick={() => toggleFilters()} className="flex text-emphasis">
+      <button onClick={() => toggleFilters()} className="flex text-text-darker">
         <h2 className="font-bold my-auto">Filters</h2>
         <FiFilter className="my-auto ml-2" size="16" />
       </button>
@@ -124,7 +124,7 @@ export function SourceSelector({
                         e.stopPropagation();
                         setTimeRange(null);
                       }}
-                      className="text-sm text-gray-500 hover:text-gray-700"
+                      className="text-sm text-text-500 hover:text-text-700"
                     >
                       Clear
                     </button>
@@ -203,8 +203,8 @@ export function SourceSelector({
                         (selectedSources
                           .map((source) => source.internalName)
                           .includes(source.internalName)
-                          ? "bg-hover"
-                          : "hover:bg-hover-light")
+                          ? "bg-accent-background-hovered"
+                          : "hover:bg-accent-background")
                       }
                       onClick={() => handleSelect(source)}
                     >
@@ -235,8 +235,8 @@ export function SourceSelector({
                         "flex cursor-pointer w-full items-center " +
                         "py-1.5 rounded-lg px-2 " +
                         (selectedDocumentSets.includes(documentSet.name)
-                          ? "bg-hover"
-                          : "hover:bg-hover-light")
+                          ? "bg-accent-background-hovered"
+                          : "hover:bg-accent-background")
                       }
                       onClick={() => handleDocumentSetSelect(documentSet.name)}
                     >
@@ -280,7 +280,7 @@ export function SelectedBubble({
     <div
       className={
         "flex cursor-pointer items-center border border-border " +
-        "py-1 my-1.5 rounded-lg px-2 w-fit hover:bg-hover"
+        "py-1 my-1.5 rounded-lg px-2 w-fit hover:bg-accent-background-hovered"
       }
       onClick={onClick}
     >
@@ -506,7 +506,7 @@ export function HorizontalSourceSelector({
               cursor-pointer
               w-fit
               gap-x-1
-              hover:bg-hover
+              hover:bg-accent-background-hovered
               flex
               items-center
               bg-background-search-filter
diff --git a/web/src/components/header/HeaderTitle.tsx b/web/src/components/header/HeaderTitle.tsx
index 1a18e5173..bf4c1dc7d 100644
--- a/web/src/components/header/HeaderTitle.tsx
+++ b/web/src/components/header/HeaderTitle.tsx
@@ -21,7 +21,7 @@ export function HeaderTitle({
         backgroundToggled
           ? "text-text-sidebar-toggled-header"
           : "text-text-sidebar-header"
-      } break-words text-left line-clamp-2 ellipsis text-strong overflow-hidden leading-none font-bold`}
+      } break-words dark:text-[#fff] text-left line-clamp-2 ellipsis text-strong overflow-hidden leading-none font-bold`}
     >
       {children}
     </h1>
diff --git a/web/src/components/header/LogoWithText.tsx b/web/src/components/header/LogoWithText.tsx
index e9f2148ce..645482014 100644
--- a/web/src/components/header/LogoWithText.tsx
+++ b/web/src/components/header/LogoWithText.tsx
@@ -73,7 +73,7 @@ export default function LogoWithText({
         <div
           className={`${
             showArrow ? "desktop:hidden" : "invisible"
-          } break-words inline-block w-fit text-text-700 text-xl`}
+          } break-words inline-block w-fit text-text-700 dark:text-neutral-300 text-xl`}
         >
           <LogoComponent
             enterpriseSettings={enterpriseSettings!}
diff --git a/web/src/components/icons/icons.tsx b/web/src/components/icons/icons.tsx
index 63302fb27..ab060cacc 100644
--- a/web/src/components/icons/icons.tsx
+++ b/web/src/components/icons/icons.tsx
@@ -44,7 +44,7 @@ import geminiSVG from "../../../public/Gemini.svg";
 import metaSVG from "../../../public/Meta.svg";
 import mistralSVG from "../../../public/Mistral.svg";
 import openSourceIcon from "../../../public/OpenSource.png";
-import litellmIcon from "../../../public/LiteLLM.jpg";
+import litellmIcon from "../../../public/litellm.png";
 
 import awsWEBP from "../../../public/Amazon.webp";
 import azureIcon from "../../../public/Azure.png";
@@ -100,6 +100,27 @@ export interface LogoIconProps extends IconProps {
   src: string | StaticImageData;
 }
 
+export const OpenAIISVG = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => (
+  <svg
+    fill="currentColor"
+    width={size}
+    style={{ width: `${size}px`, height: `${size}px` }}
+    height={size}
+    className={`w-[${size}px] h-[${size}px] ` + className}
+    viewBox="0 0 24 24"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill="currentColor"
+      d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"
+    />
+  </svg>
+);
+
 export const LogoIcon = ({
   size = 16,
   className = defaultTailwindCSS,
@@ -1070,7 +1091,7 @@ export const BookstackIcon = ({
   size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => {
-  return <SiBookstack size={size} className={className + " text-[#0288D1]"} />;
+  return <SiBookstack size={size} className={className} />;
 };
 
 export const ConfluenceIcon = ({
@@ -2766,7 +2787,7 @@ export const PinnedIcon = ({
     >
       <path
         d="M5.33165 8.74445L1 13M2.33282 5.46113L8.4591 11.4798L9.58999 10.3688L9.32809 7.88941L13 4.83L9.10152 1L5.98673 4.6074L3.46371 4.3501L2.33282 5.46113Z"
-        stroke="black"
+        stroke="currentColor"
         strokeWidth="1.2"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -2774,6 +2795,61 @@ export const PinnedIcon = ({
     </svg>
   );
 };
+export const OnyxLogoTypeIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  const aspectRatio = 2640 / 733; // Calculate the aspect ratio of the original SVG
+  const height = size / aspectRatio; // Calculate the height based on the aspect ratio
+
+  return (
+    <svg
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={height}
+      viewBox="0 0 2640 733"
+      style={{ width: `${size}px`, height: `${height}px` }}
+      className={`w-[${size}px] h-[${height}px] ` + className}
+    >
+      <path
+        d="M0 0 C33.33 0 66.66 0 101 0 C116.0557783 38.21851415 116.0557783 38.21851415 122.9375 56 C123.73628808 58.06186447 124.53511763 60.12371288 125.33398438 62.18554688 C132.03825266 79.49433582 138.7196772 96.811945 145.40026855 114.12988281 C154.13201714 136.7646467 162.89604763 159.38677068 171.67333984 182.00390625 C175.22064578 191.14500491 178.76491946 200.28727941 182.30947876 209.42944336 C184.28953371 214.53634164 186.26977615 219.64316721 188.25 224.75 C189.04166757 226.79166632 189.83333424 228.83333298 190.625 230.875 C191.2128125 232.3909375 191.2128125 232.3909375 191.8125 233.9375 C193 237 194.1875 240.0625 195.375 243.125 C195.96267654 244.6405825 195.96267654 244.6405825 196.56222534 246.18678284 C197.35481547 248.23083697 198.14739765 250.27489418 198.93997192 252.31895447 C200.90494473 257.38661809 202.8700505 262.45423006 204.83544922 267.52172852 C208.56750336 277.14472477 212.29807286 286.76829035 216.02435303 296.39352417 C217.79675153 300.97152352 219.56985562 305.54924943 221.34301758 310.12695312 C222.19314439 312.32229107 223.04292035 314.51776492 223.89233398 316.71337891 C225.06537285 319.74545515 226.2395878 322.77707344 227.4140625 325.80859375 C227.93916916 327.16729836 227.93916916 327.16729836 228.47488403 328.55345154 C228.79464203 329.37813431 229.11440002 330.20281708 229.44384766 331.05249023 C229.72185211 331.77073471 229.99985657 332.48897919 230.2862854 333.22898865 C230.99698266 335.06102535 230.99698266 335.06102535 232 337 C246.56988259 292.81493181 261.13820056 248.62935087 275.6875 204.4375 C275.96156803 203.60505013 276.23563606 202.77260025 276.51800919 201.91492462 C279.01707729 194.32423703 281.51604488 186.73351636 284.01490784 179.14276123 C289.17792065 163.45917323 294.3418852 147.77589867 299.50601101 132.09267712 C302.59609693 122.70820373 305.68610876 113.32370595 308.77612305 103.93920898 C309.06425106 103.06415274 309.35237907 102.18909649 309.64923823 101.28752339 C311.15291036 96.72081077 312.65658203 92.154098 314.16025352 87.58738518 C316.88233858 79.32030053 319.60442781 71.05321725 322.32651675 62.78613389 C323.81240457 58.27343827 325.29829211 53.76074257 326.78417969 49.24804688 C327.37414551 47.45629883 327.96411133 45.66455078 328.55407715 43.87280273 C328.84746979 42.98175842 329.14086243 42.09071411 329.44314575 41.17266846 C333.96209717 27.44844564 338.48104858 13.72422282 343 0 C367.99937294 -0.58538238 392.99771191 -1.02550978 418.00257015 -1.2953043 C429.6146466 -1.42393963 441.22245313 -1.59910139 452.83178711 -1.88598633 C462.95725523 -2.13608217 473.07963139 -2.29665662 483.20810229 -2.35221237 C488.56749218 -2.38467268 493.91804247 -2.46022203 499.27458 -2.64325142 C532.79129476 -3.74490236 532.79129476 -3.74490236 540.42525101 2.4351387 C546.11597516 7.94072522 549.54345055 14.7896396 552.64213753 22.00372505 C554.56104941 26.23801807 557.12001289 29.84116876 559.875 33.5625 C560.74382604 34.81477537 561.60901068 36.06959387 562.46875 37.328125 C563.09330078 38.23401367 563.09330078 38.23401367 563.73046875 39.15820312 C565.94759045 42.37473507 568.16143251 45.59352145 570.375 48.8125 C571.04861572 49.79198608 571.04861572 49.79198608 571.73583984 50.79125977 C575.88812976 56.8318215 580.02612448 62.88212951 584.16357422 68.93286133 C587.60197218 73.96013108 591.04732974 78.98252305 594.5 84 C598.50958746 89.82679816 602.50756794 95.66143452 606.5 101.5 C618.66861604 119.30630862 618.66861604 119.30630862 631 137 C633.93322556 134.22886427 636.18623177 131.43481587 638.37109375 128.046875 C639.0165918 127.05220215 639.66208984 126.0575293 640.32714844 125.03271484 C641.37177246 123.407771 641.37177246 123.407771 642.4375 121.75 C643.18594341 120.594188 643.93498196 119.43876119 644.68457031 118.28369141 C645.87691047 116.4461905 647.06885448 114.60844385 648.25906372 112.76956177 C652.45578077 106.28625376 656.69365977 99.83021026 660.93508911 93.37609863 C662.7114261 90.67277816 664.48642899 87.96858282 666.26145935 85.2644043 C667.61103107 83.20841458 668.96077303 81.15253671 670.31054688 79.09667969 C672.96271903 75.05695522 675.61427434 71.01682617 678.265625 66.9765625 C678.69839752 66.31709122 679.13117004 65.65761993 679.57705688 64.97816467 C681.74925116 61.66806158 683.92132765 58.35788126 686.09326172 55.04760742 C690.15895391 48.85129621 694.22565727 42.65565607 698.29595947 36.46237183 C700.1986006 33.5672177 702.10066371 30.67168405 704.00268555 27.77612305 C704.90132401 26.4084212 705.80023926 25.04090117 706.69946289 23.67358398 C707.95401163 21.76593684 709.20756431 19.8576384 710.4609375 17.94921875 C711.55293981 16.28790204 712.64697455 14.62713955 713.79142761 13.00151062 C715.12629684 10.93344915 715.12629684 10.93344915 716.04707336 8.15730286 C717.64187545 4.52163394 718.9067278 2.5270255 722 0 C729.20177109 -2.08840248 737.15310869 -1.27358726 744.55859375 -1.07421875 C746.79057478 -1.05369084 749.02260553 -1.0380382 751.25465393 -1.02705383 C757.11679012 -0.98514255 762.97590648 -0.87717399 768.83685303 -0.75531006 C774.82246038 -0.64258465 780.808558 -0.59250224 786.79492188 -0.53710938 C798.53127155 -0.41929536 810.26538425 -0.23167118 822 0 C820.553704 3.75941534 818.91642122 6.80235597 816.5859375 10.09765625 C815.91151611 11.05768555 815.23709473 12.01771484 814.54223633 13.00683594 C813.82704834 14.01520508 813.11186035 15.02357422 812.375 16.0625 C810.9067251 18.15176282 809.43926664 20.24159965 807.97265625 22.33203125 C807.27543457 23.32412598 806.57821289 24.3162207 805.85986328 25.33837891 C803.18180282 29.17090911 800.59870181 33.0586811 798.0234375 36.9609375 C795.36316557 40.95648105 792.65120576 44.91561926 789.9375 48.875 C789.38537842 49.6805835 788.83325684 50.48616699 788.2644043 51.31616211 C787.41616089 52.55378296 787.41616089 52.55378296 786.55078125 53.81640625 C782.9003326 59.14263677 779.26155213 64.47677492 775.625 69.8125 C774.68829468 71.18668091 774.68829468 71.18668091 773.73266602 72.58862305 C771.82164232 75.39232337 769.91079192 78.19614172 768 81 C760.31372146 92.27869313 752.62415374 103.55504107 744.91357422 114.81713867 C740.76838789 120.87310547 736.63288078 126.93563003 732.5 133 C727.8399646 139.83788867 723.17469524 146.67212488 718.5 153.5 C713.24267506 161.1793747 707.99177778 168.86311662 702.75732422 176.55810547 C699.43988066 181.43315548 696.10700963 186.29662341 692.75 191.14453125 C691.71431885 192.64632935 691.71431885 192.64632935 690.65771484 194.1784668 C689.32948516 196.10380959 687.99666621 198.02599664 686.65869141 199.94458008 C686.06233887 200.81107178 685.46598633 201.67756348 684.8515625 202.5703125 C684.05999756 203.71137451 684.05999756 203.71137451 683.25244141 204.87548828 C681.95654959 207.07370477 681.15461584 208.44868613 681 211 C682.21715668 213.50960961 682.21715668 213.50960961 684.16796875 216.109375 C684.91224121 217.17607422 685.65651367 218.24277344 686.42333984 219.34179688 C686.83807556 219.92791748 687.25281128 220.51403809 687.68011475 221.11791992 C690.08556959 224.54795949 692.40329624 228.03742521 694.73828125 231.515625 C695.80171139 233.09175087 696.86569251 234.66750512 697.93017578 236.24291992 C698.48030334 237.05731537 699.03043091 237.87171082 699.597229 238.71078491 C700.44628815 239.96769638 700.44628815 239.96769638 701.3125 241.25 C702.50508189 243.01600738 703.69762671 244.78203979 704.89013672 246.5480957 C707.36330739 250.21070426 709.83663631 253.87320589 712.31005859 257.53564453 C715.83911575 262.76143727 719.36703433 267.98799773 722.89453125 273.21484375 C734.27251271 290.07392081 745.65406902 306.93057002 757.0425415 323.78256226 C765.76190859 336.68512283 774.4756335 349.59148371 783.18685913 362.49954224 C789.4720778 371.81275642 795.75900144 381.1248105 802.05078125 390.43359375 C802.62283295 391.2799942 803.19488464 392.12639465 803.78427124 392.9984436 C806.50812915 397.0285268 809.23231545 401.0583874 811.95703125 405.08789062 C813.83882414 407.87084107 815.7184406 410.65523891 817.59619141 413.44091797 C819.06398292 415.61794403 820.54021307 417.78797899 822.02490234 419.95361328 C822.57742676 420.76427246 823.12995117 421.57493164 823.69921875 422.41015625 C824.15514404 423.07281494 824.61106934 423.73547363 825.08081055 424.41821289 C826 426 826 426 826 428 C812.7186023 428.55849244 799.44003393 428.98365536 786.14924622 429.24349213 C779.97546122 429.36828224 773.80975625 429.5371114 767.640625 429.81054688 C724.95337975 431.65373323 724.95337975 431.65373323 716.75460434 424.41446114 C712.04037734 419.35447539 709.3798801 413.28122189 707.07299805 406.84484863 C705.66007111 403.09874371 703.78648606 400.42885338 701.359375 397.2578125 C700.75101807 396.39043457 700.14266113 395.52305664 699.51586914 394.62939453 C698.93313232 393.80294434 698.35039551 392.97649414 697.75 392.125 C692.61911083 384.79623086 687.57133526 377.42388622 682.63208008 369.96484375 C678.44807504 363.6523053 674.20014438 357.38466408 669.9375 351.125 C669.22142578 350.073125 668.50535156 349.02125 667.76757812 347.9375 C666.27717369 345.74859181 664.78664067 343.55977184 663.29589844 341.37109375 C650.09138869 321.98362059 636.97651467 302.54099407 624 283 C620.63667007 286.25172952 618.2102807 289.63210501 615.8125 293.625 C611.27686126 301.02497708 606.57303832 308.30539272 601.8125 315.5625 C601.07558406 316.68651154 600.33868638 317.81053504 599.60180664 318.93457031 C598.4901004 320.62998761 597.37820842 322.32528213 596.2658844 324.02029419 C592.58359576 329.63180255 588.91534424 335.25241454 585.25 340.875 C584.63568115 341.81714355 584.0213623 342.75928711 583.38842773 343.72998047 C577.781703 352.33079027 572.18575556 360.93858921 566.59277344 369.54833984 C564.98145814 372.02854037 563.36971782 374.50846414 561.7578125 376.98828125 C561.22019287 377.81537598 560.68257324 378.6424707 560.12866211 379.49462891 C559.04623436 381.15972763 557.96371539 382.82476707 556.88110352 384.48974609 C554.13288848 388.7166856 551.38679308 392.94497671 548.64453125 397.17578125 C543.54752725 405.03601526 538.4393602 412.88782053 533.25 420.6875 C532.83145752 421.31760986 532.41291504 421.94771973 531.98168945 422.59692383 C529.12379488 426.87620512 529.12379488 426.87620512 528 428 C524.8949275 428.09533653 521.81213542 428.12551126 518.70678711 428.11352539 C517.73128403 428.11367142 516.75578094 428.11381744 515.75071716 428.1139679 C512.50957047 428.11326833 509.26848046 428.10547391 506.02734375 428.09765625 C503.78674857 428.09579222 501.54615298 428.09436825 499.30555725 428.09336853 C493.3954049 428.08954213 487.48527695 428.0797108 481.57513428 428.06866455 C475.54944183 428.05845306 469.52374547 428.05387147 463.49804688 428.04882812 C451.66535384 428.03808864 439.83267894 428.02101076 428 428 C429.38759602 424.40646837 430.89676703 421.46843574 433.1328125 418.32421875 C433.76622559 417.42566162 434.39963867 416.52710449 435.05224609 415.60131836 C435.73625488 414.6397583 436.42026367 413.67819824 437.125 412.6875 C442.99768374 404.34860964 448.74795589 395.9440765 454.375 387.4375 C459.22154648 380.12019918 464.15866216 372.91643864 469.3125 365.8125 C473.01095468 360.63466345 476.4858559 355.30363446 480 350 C484.97233364 342.4956293 490.02639754 335.09874934 495.3125 327.8125 C499.01095468 322.63466345 502.4858559 317.30363446 506 312 C510.97233364 304.4956293 516.02639754 297.09874934 521.3125 289.8125 C525.01095468 284.63466345 528.4858559 279.30363446 532 274 C536.96973115 266.49955704 542.02030355 259.1059207 547.3046875 251.82421875 C551.75049226 245.60043968 555.91137952 239.17416483 560.1171875 232.78710938 C560.76171875 231.81193359 561.40625 230.83675781 562.0703125 229.83203125 C562.70614258 228.86990723 563.34197266 227.9077832 563.99707031 226.91650391 C566.71903045 222.95300613 569.65142849 219.15949055 572.62451172 215.3815918 C574.17664131 213.1750609 574.17664131 213.1750609 573.94384766 211.0390625 C572.66324387 208.27248134 571.07159907 205.87694269 569.34375 203.36328125 C568.7827359 202.54166252 568.7827359 202.54166252 568.21038818 201.70344543 C566.97900566 199.90268667 565.73951427 198.10766881 564.5 196.3125 C563.63580164 195.05167482 562.77220246 193.79043875 561.90917969 192.52880859 C560.13808681 189.94102732 558.36412106 187.35525348 556.58789062 184.77099609 C552.78670296 179.23720439 549.02026713 173.6798895 545.25 168.125 C537.51068925 156.74271199 529.75657459 145.37052708 522 134 C513.43731085 121.4477725 504.88308804 108.88986605 496.34082031 96.32373047 C489.2374038 85.87553272 482.11978682 75.43704638 475 65 C472.54146006 61.3959742 470.08312899 57.7918061 467.625 54.1875 C466.71524414 52.85380371 466.71524414 52.85380371 465.78710938 51.49316406 C462.33719761 46.43389556 458.89251854 41.37111171 455.453125 36.3046875 C454.68278621 35.17032452 453.91244119 34.03596578 453.14208984 32.90161133 C451.66751494 30.73020867 450.19405483 28.55806342 448.72119141 26.38549805 C445.20779569 21.21120144 441.66428168 16.06868536 438 11 C435.08364827 18.08863373 432.46200954 25.24489145 429.98046875 32.49609375 C429.60532639 33.58542709 429.23018402 34.67476044 428.84367371 35.79710388 C428.04037885 38.13038493 427.23816706 40.46403908 426.43695068 42.79803467 C424.3028893 49.01424033 422.16062809 55.22762113 420.01953125 61.44140625 C419.58991089 62.68893677 419.16029053 63.93646729 418.71765137 65.22180176 C414.96449345 76.11593334 411.17746429 86.99799684 407.375 97.875 C402.06285691 113.07626901 396.77421708 128.28553048 391.5 143.5 C386.28337043 158.54605188 381.05918969 173.58940169 375.8125 188.625 C375.51695221 189.4720047 375.22140442 190.3190094 374.91690063 191.19168091 C371.55933516 200.81292478 368.19842817 210.43299977 364.83585358 220.05249405 C362.28588913 227.3473167 359.73645342 234.64232401 357.1875 241.9375 C356.95257339 242.60984428 356.71764679 243.28218857 356.4756012 243.97490692 C349.06020798 265.19824903 341.68382863 286.43477977 334.33886719 307.68261719 C329.1266949 322.75869322 323.8879652 337.82528061 318.62036133 352.88208008 C315.27876751 362.43837041 311.96295893 372.00296953 308.67578125 381.578125 C286.91538109 444.91097327 286.91538109 444.91097327 276 463 C275.62584961 463.62052246 275.25169922 464.24104492 274.86621094 464.88037109 C264.62809287 481.55301222 251.42718504 495.89386772 237.94189453 509.96533203 C234.91302457 513.13890536 231.92528159 516.35029604 228.9375 519.5625 C224.13395104 524.71676262 219.32059266 529.86167518 214.5 535 C209.06399618 540.79503813 203.63494056 546.5964599 198.21679688 552.40820312 C195.22343867 555.61901301 192.22641742 558.82626083 189.22265625 562.02734375 C188.5994751 562.69241943 187.97629395 563.35749512 187.33422852 564.04272461 C186.15490895 565.30115732 184.974497 566.55856768 183.79272461 567.81469727 C183.25268799 568.39147217 182.71265137 568.96824707 182.15625 569.5625 C181.69025391 570.05878906 181.22425781 570.55507813 180.74414062 571.06640625 C179.01041791 572.88440751 179.01041791 572.88440751 177.90902519 574.69213963 C175.8242579 577.65667667 174.21232765 579.67328349 170.63210678 580.63813591 C167.68494552 580.86195595 164.80898166 580.86588305 161.85400391 580.79467773 C160.7412207 580.79569992 159.6284375 580.79672211 158.48193359 580.79777527 C154.81249657 580.79290759 151.14556352 580.73849841 147.4765625 580.68359375 C144.92924356 580.67053481 142.38190702 580.66057204 139.83456421 580.65357971 C133.82063293 580.62960552 127.80777254 580.57446934 121.79426992 580.50413328 C114.27317501 580.41808165 106.75193337 580.3798694 99.23046875 580.34179688 C85.81961581 580.27370262 72.41071531 580.13347157 59 580 C59 550.3 59 520.6 59 490 C102.6875 489.625 102.6875 489.625 116.40893555 489.52197266 C120.51884962 489.48199967 120.51884962 489.48199967 124.6287384 489.43954468 C126.43897042 489.42202512 128.2492402 489.40814891 130.05952454 489.39730835 C149.0629029 489.27840054 166.5526309 489.00809099 181 475 C194.03833167 460.33187687 198.69268726 438.59464263 204.69360352 420.32080078 C205.61021258 417.53517626 206.53373079 414.75186488 207.45752525 411.96861649 C209.36609119 406.21746858 211.26957235 400.46460988 213.16162109 394.70800781 C213.4935849 393.69925598 213.82554871 392.69050415 214.16757202 391.65118408 C214.85646855 389.4571306 215.44224984 387.23100064 216 385 C194.88 385 173.76 385 152 385 C141.07422789 357.73568794 130.22141622 330.44397546 119.42333984 303.12890625 C115.84670474 294.08207047 112.26544029 285.03706728 108.68447876 275.99194336 C106.70612518 270.9947057 104.72807827 265.99734665 102.75 261 C101.9583348 258.99999942 101.16666813 256.99999942 100.375 255 C79 201 79 201 57.625 147 C57.23311493 146.00997482 56.84122986 145.01994965 56.43746948 143.99992371 C55.64590381 142.00017831 54.85433887 140.00043262 54.06277466 138.00068665 C52.08206882 132.99678884 50.1013502 127.99289609 48.12060547 122.98901367 C44.57655061 114.03576268 41.03256326 105.08248502 37.48910522 96.1289978 C36.31684935 93.16703084 35.14450913 90.20509727 33.97216797 87.24316406 C32.41610715 83.31168029 30.86049218 79.38002051 29.30517578 75.44824219 C25.18391305 65.03169504 21.05482122 54.61830871 16.91510391 44.20908165 C15.209152 39.91857313 13.50497312 35.62735984 11.80047607 31.33627319 C10.855479 28.95880946 9.90956649 26.58170939 8.96270752 24.20498657 C7.64735757 20.90317604 6.33508189 17.60015896 5.0234375 14.296875 C4.62960876 13.31069687 4.23578003 12.32451874 3.83001709 11.30845642 C3.47022766 10.40067947 3.11043823 9.49290253 2.73974609 8.55761719 C2.42621185 7.76973816 2.11267761 6.98185913 1.78964233 6.17010498 C1 4 1 4 0 0 Z "
+        fill="currentColor"
+        transform="translate(1814,153)"
+      />
+      <path
+        d="M0 0 C0.83810211 -0.00701431 1.67620422 -0.01402863 2.53970337 -0.02125549 C5.23095126 -0.03866647 7.92197909 -0.04510809 10.61328125 -0.046875 C11.53273529 -0.04754974 12.45218933 -0.04822449 13.39950562 -0.04891968 C27.10769148 -0.03292448 40.46897884 0.34679399 53.92578125 3.203125 C54.75158691 3.37473145 55.57739258 3.54633789 56.42822266 3.72314453 C104.10137996 13.9446933 148.92015889 40.48134523 178.92578125 79.203125 C179.34972168 79.74533691 179.77366211 80.28754883 180.21044922 80.84619141 C214.41902295 124.87863761 228.47978789 178.81199691 222.328125 234.04736328 C216.03894851 283.37618327 192.43364033 325.71878914 158.61669922 361.41503906 C156.70289786 363.4388163 154.80039938 365.47290577 152.8984375 367.5078125 C151.4911795 369.01069209 150.08362987 370.51329867 148.67578125 372.015625 C148.02633545 372.70906006 147.37688965 373.40249512 146.70776367 374.11694336 C142.79169615 378.27866642 138.80498502 382.35314517 134.73291016 386.36254883 C132.92273746 388.20622512 131.22818343 390.1135503 129.55078125 392.078125 C126.80956676 395.26995009 123.91892237 398.24615477 120.92578125 401.203125 C117.99459934 404.09904458 115.16174951 407.00555071 112.48828125 410.140625 C108.70337756 414.57591787 104.54438343 418.61510611 100.37890625 422.6875 C97.94357318 424.99986008 97.94357318 424.99986008 96.62890625 427.31640625 C93.86386929 430.37950912 90.26049646 431.30794193 86.42578125 432.640625 C85.58136475 432.9406543 84.73694824 433.24068359 83.86694336 433.54980469 C62.3934153 441.0136629 40.93860537 444.75407348 18.19897461 444.59423828 C15.49216208 444.57814807 12.7868463 444.59421089 10.08007812 444.61328125 C-6.01970762 444.63290793 -21.99241242 442.8557798 -37.63671875 438.953125 C-38.9196582 438.63734497 -38.9196582 438.63734497 -40.22851562 438.31518555 C-73.32229062 429.88088614 -103.90200102 413.51357452 -128.91796875 390.20703125 C-130.92123799 388.34529733 -132.97995172 386.5858134 -135.07421875 384.828125 C-154.24034916 368.0002625 -168.35310867 345.10704354 -179.07421875 322.203125 C-179.59628906 321.11128906 -180.11835937 320.01945312 -180.65625 318.89453125 C-202.21048168 271.52071861 -202.79727805 213.17787182 -185.1484375 164.46484375 C-173.82008821 134.91287097 -155.84930804 107.17499298 -133.02246094 85.15234375 C-131.20497442 83.33394621 -129.53527624 81.46208081 -127.87109375 79.50390625 C-123.31051112 74.2512437 -118.35061936 69.42985833 -113.390625 64.55859375 C-110.00540165 61.21009977 -106.70976617 57.84651831 -103.60546875 54.234375 C-98.95475676 48.82891889 -93.82732379 43.910037 -88.74609375 38.9140625 C-83.96514754 34.18190146 -79.43948442 29.32013896 -75.07421875 24.203125 C-58.15046977 4.62939398 -24.77048816 0.13949758 0 0 Z M-81.671875 121.2109375 C-94.10751856 136.69988541 -102.42216287 153.91873058 -107.07421875 173.203125 C-107.39390625 174.45867187 -107.71359375 175.71421875 -108.04296875 177.0078125 C-112.75673366 198.0535558 -112.41571877 224.33468929 -107.07421875 245.203125 C-106.88617676 246.00073242 -106.69813477 246.79833984 -106.50439453 247.62011719 C-100.71613874 271.9059255 -89.23935154 293.26409368 -73.07421875 312.203125 C-72.04748047 313.41355469 -72.04748047 313.41355469 -71 314.6484375 C-47.9494122 341.05108564 -16.13936948 358.84287521 19.16259766 361.36279297 C46.59081946 362.79636518 74.17716739 354.47585384 94.92578125 336.203125 C95.74433594 335.52765625 96.56289062 334.8521875 97.40625 334.15625 C122.65186519 312.70726221 135.23054033 279.47024623 137.92578125 247.203125 C140.27625709 205.810847 128.67037622 165.12304253 100.8671875 133.6796875 C97.94939935 130.45922612 94.94396318 127.329408 91.92578125 124.203125 C91.04019531 123.22279297 91.04019531 123.22279297 90.13671875 122.22265625 C68.61718618 98.99259674 35.0082485 85.21932478 4.04296875 82.9140625 C-29.14695206 82.12553306 -59.95156963 96.35755729 -81.671875 121.2109375 Z "
+        fill="currentColor"
+        transform="translate(1161.07421875,144.796875)"
+      />
+      <path
+        d="M0 0 C0.74490189 -0.00988449 1.48980377 -0.01976898 2.25727844 -0.029953 C50.02685431 -0.53245128 90.51113055 12.36122444 125.65625 45.61328125 C146.70645987 67.4971628 159.37409264 96.78597762 165.71875 126.11328125 C165.91766846 127.02053955 166.11658691 127.92779785 166.3215332 128.86254883 C170.15662585 147.76819 170.25182679 166.81619532 170.19580078 186.02832031 C170.1941145 188.77015288 170.195468 191.51198208 170.19668579 194.2538147 C170.19772564 200.1150116 170.19154441 205.97616338 170.18021011 211.83734894 C170.16383422 220.31123842 170.15873487 228.78510646 170.15623413 237.25901005 C170.1518758 251.01318047 170.13861771 264.76732693 170.11962891 278.52148438 C170.10122157 291.86848838 170.08708894 305.21548584 170.07861328 318.5625 C170.07808783 319.3876303 170.07756239 320.2127606 170.07702102 321.06289485 C170.07441061 325.20305393 170.07188327 329.34321306 170.06939721 333.48337221 C170.0487228 367.7350298 170.01188474 401.98664275 169.96875 436.23828125 C140.59875 436.23828125 111.22875 436.23828125 80.96875 436.23828125 C80.95416748 428.65384033 80.93958496 421.06939941 80.92456055 413.25512695 C80.87567801 388.91549748 80.8122347 364.5759265 80.73976372 340.23635652 C80.72849718 336.4480173 80.71735847 332.65967772 80.70629883 328.87133789 C80.7029933 327.74017644 80.7029933 327.74017644 80.699621 326.58616325 C80.66436498 314.41742491 80.6394351 302.24868662 80.61840298 290.07991634 C80.59654727 277.56940716 80.56340542 265.05896355 80.52004844 252.54851025 C80.49369883 244.84508894 80.47588106 237.14174914 80.46940396 229.43828508 C80.46346619 223.5053007 80.44173435 217.57243578 80.41447449 211.6395092 C80.4057624 209.22466949 80.4019573 206.80980564 80.40374184 204.39495087 C80.4208244 170.57795098 75.59013237 132.77364554 50.84375 107.36328125 C34.74804984 91.64278331 13.31965625 84.3749888 -8.90625 83.86328125 C-34.71741699 84.44989868 -58.6296742 92.74617622 -77.03125 111.23828125 C-97.237198 132.83991951 -104.16021891 163.32200101 -104.18946838 192.12161255 C-104.19440636 193.17146265 -104.19934434 194.22131275 -104.20443195 195.30297649 C-104.21970325 198.7958956 -104.22813927 202.28879648 -104.23657227 205.78173828 C-104.24615895 208.29549823 -104.25616949 210.8092566 -104.26657104 213.32301331 C-104.28796255 218.72218414 -104.30642312 224.12135215 -104.32217598 229.52054214 C-104.34495666 237.32671637 -104.37308777 245.13286423 -104.40249526 252.93901597 C-104.45007113 265.60614219 -104.49336218 278.27327924 -104.53393555 290.94042969 C-104.57334155 303.24024294 -104.61477987 315.54004659 -104.65893555 327.83984375 C-104.66165982 328.59890039 -104.66438409 329.35795702 -104.66719092 330.14001538 C-104.68087124 333.94824732 -104.69459134 337.75647912 -104.70833123 341.56471086 C-104.82213871 373.12254876 -104.928189 404.68040597 -105.03125 436.23828125 C-134.73125 436.23828125 -164.43125 436.23828125 -195.03125 436.23828125 C-195.03125 294.99828125 -195.03125 153.75828125 -195.03125 8.23828125 C-165.33125 8.23828125 -135.63125 8.23828125 -105.03125 8.23828125 C-104.70125 27.37828125 -104.37125 46.51828125 -104.03125 66.23828125 C-100.56625 62.27828125 -100.56625 62.27828125 -97.03125 58.23828125 C-95.71682638 56.88630267 -94.3877664 55.54802123 -93.03125 54.23828125 C-90.43142817 51.67837991 -87.96856602 49.07048585 -85.59375 46.30078125 C-83.02459729 43.31026409 -80.33807744 40.50711441 -77.53125 37.73828125 C-74.12798063 34.381002 -70.9630553 30.91038954 -67.85546875 27.28125 C-65.09061865 24.1848547 -62.12088088 21.30582671 -59.14453125 18.4140625 C-56.95404037 16.28178654 -56.95404037 16.28178654 -55.265625 13.66015625 C-52.22091621 10.35994742 -49.19424393 9.4613871 -44.96875 8.17578125 C-43.7923999 7.80126831 -43.7923999 7.80126831 -42.59228516 7.41918945 C-28.8051804 3.17101218 -14.455506 0.15855111 0 0 Z "
+        fill="currentColor"
+        transform="translate(1630.03125,144.76171875)"
+      />
+      <path
+        d="M0 0 C2.38143646 0.95204965 4.66474801 1.93938584 6.9765625 3.03515625 C7.64632111 3.34503983 8.31607971 3.6549234 9.00613403 3.97419739 C10.45502737 4.64529835 11.90244088 5.31960167 13.34851074 5.99676514 C17.28525304 7.83974485 21.23314298 9.65859946 25.1796875 11.48046875 C25.99570435 11.85790222 26.81172119 12.23533569 27.65246582 12.62420654 C35.24684457 16.13041351 42.88818173 19.52557216 50.54144287 22.90084839 C64.74910513 29.16757199 78.87098464 35.60271852 92.95608521 42.1399231 C105.56993927 47.99156219 118.24093862 53.69850855 130.96044922 59.31640625 C141.80271707 64.10701193 152.57447648 69.02171692 163.30908203 74.05004883 C176.83057762 80.36079749 190.48865925 86.36485514 204.13589478 92.39733887 C209.77491735 94.89295962 215.39430951 97.4303158 221 100 C218.28771101 103.3023264 214.68401289 104.73818118 210.87890625 106.44921875 C210.15992157 106.77874039 209.44093689 107.10826202 208.70016479 107.44776917 C206.32395617 108.53442542 203.94335827 109.61107376 201.5625 110.6875 C199.8937747 111.44783214 198.22523897 112.20858047 196.55688477 112.96972656 C184.46077963 118.47742824 172.31861067 123.88115312 160.16287231 129.25570679 C149.25806702 134.07726202 138.42334852 139.02302429 127.62548828 144.08056641 C118.40661512 148.38323273 109.11928332 152.51689675 99.8125 156.625 C85.61505373 162.89310403 71.51530598 169.35473837 57.44631958 175.90567017 C43.06084311 182.6030892 28.62983404 189.18383697 14.11132812 195.58837891 C11.89012859 196.59614536 9.68730279 197.64481766 7.49804688 198.72021484 C6.34884766 199.28047363 5.19964844 199.84073242 4.015625 200.41796875 C2.98211914 200.93512451 1.94861328 201.45228027 0.88378906 201.98510742 C-4.62279823 203.92304201 -8.86034932 201.32394333 -13.87890625 198.96484375 C-14.5500798 198.65496017 -15.22125336 198.3450766 -15.9127655 198.02580261 C-17.36723373 197.35384474 -18.82063255 196.6795683 -20.27307129 196.00323486 C-24.22484546 194.16367398 -28.18489354 192.34208919 -32.14453125 190.51953125 C-33.37319412 189.95338104 -33.37319412 189.95338104 -34.62667847 189.37579346 C-42.23342215 185.87754887 -49.88260613 182.47916104 -57.54244995 179.09915161 C-71.74878884 172.83015312 -85.87122674 166.39716911 -99.95608521 159.8600769 C-112.56993927 154.00843781 -125.24093862 148.30149145 -137.96044922 142.68359375 C-148.80271707 137.89298807 -159.57447648 132.97828308 -170.30908203 127.94995117 C-183.83057762 121.63920251 -197.48865925 115.63514486 -211.13589478 109.60266113 C-216.77491735 107.10704038 -222.39430951 104.5696842 -228 102 C-228 101.34 -228 100.68 -228 100 C-208.96990129 91.17964828 -189.93885123 82.36818675 -170.78076172 73.82861328 C-161.47189338 69.67450975 -152.20210363 65.43917651 -142.9375 61.1875 C-131.07933174 55.74614873 -119.18362405 50.39867978 -107.25 45.125 C-93.78985391 39.17645246 -80.41172146 33.06564376 -67.0640564 26.86914062 C-53.2803913 20.47294082 -39.42766418 14.24567147 -25.51953125 8.125 C-24.451689 7.65401886 -24.451689 7.65401886 -23.36227417 7.17352295 C-22.00264694 6.57412276 -20.64226143 5.97643894 -19.28103638 5.38067627 C-15.88988516 3.88548315 -12.61399874 2.28385617 -9.37109375 0.4921875 C-5.40397836 -1.26382418 -4.14424383 -1.00602452 0 0 Z "
+        fill="currentColor"
+        transform="translate(370,530)"
+      />
+      <path
+        d="M0 0 C0.66 0 1.32 0 2 0 C2.49177734 1.08901611 2.98355469 2.17803223 3.49023438 3.30004883 C5.82583784 8.47131121 8.16271888 13.64199569 10.5 18.8125 C11.1440831 20.23746796 11.1440831 20.23746796 11.80117798 21.69122314 C17.56255614 34.43493377 23.35557963 47.16343967 29.1875 59.875 C34.84426524 72.20531301 40.38209701 84.58434871 45.86605835 96.99237061 C51.491098 109.7096263 57.28584746 122.34285838 63.1399231 134.95608521 C68.98729551 147.56074197 74.69461887 160.22071051 80.30331421 172.93325806 C83.73255225 180.70451144 87.18470715 188.46070308 90.78125 196.15625 C91.08258347 196.80116898 91.38391693 197.44608795 91.69438171 198.11054993 C93.09709069 201.10689714 94.50811603 204.09885205 95.92895508 207.08666992 C96.89529608 209.13646028 97.84393722 211.19473257 98.77075195 213.26269531 C99.53558928 214.96584448 100.340312 216.65232793 101.20385742 218.30761719 C102.82112021 221.85443625 103.25171734 224.02496081 102.2644043 227.84936523 C100.89490649 231.28525401 99.33501246 234.56337031 97.6875 237.875 C97.08394375 239.14365358 96.48351527 240.41379921 95.88598633 241.68530273 C94.6079002 244.39657917 93.31518067 247.1001516 92.01171875 249.79931641 C88.97291652 256.11391361 86.08523772 262.49773801 83.18356323 268.87615967 C82.17658153 271.08646584 81.16519854 273.29470891 80.15258789 275.50244141 C75.39486895 285.8826618 70.74044648 296.30586887 66.125 306.75 C60.17346804 320.2168991 54.05840043 333.6011398 47.8600769 346.95608521 C42.01090383 359.56462351 36.30648975 372.23032779 30.69064331 384.94433594 C25.73533892 396.1584162 20.66458506 407.30938882 15.46435547 418.41210938 C13.01949874 423.63461434 10.60006476 428.86378165 8.265625 434.13671875 C7.84788818 435.07966797 7.43015137 436.02261719 6.99975586 436.99414062 C6.2317571 438.73639073 5.46917521 440.48104306 4.71313477 442.22851562 C2.21791802 447.89104099 2.21791802 447.89104099 0 449 C-0.49177734 447.91098389 -0.98355469 446.82196777 -1.49023438 445.69995117 C-3.82583784 440.52868879 -6.16271888 435.35800431 -8.5 430.1875 C-9.1440831 428.76253204 -9.1440831 428.76253204 -9.80117798 427.30877686 C-15.56255614 414.56506623 -21.35557963 401.83656033 -27.1875 389.125 C-32.84426524 376.79468699 -38.38209701 364.41565129 -43.86605835 352.00762939 C-49.491098 339.2903737 -55.28584746 326.65714162 -61.1399231 314.04391479 C-66.98706511 301.43975468 -72.69064335 288.77890485 -78.30331421 276.0687561 C-83.86081736 263.48797197 -89.5903795 250.99709236 -95.42578125 238.54296875 C-95.87518066 237.57149902 -96.32458008 236.6000293 -96.78759766 235.59912109 C-97.52203805 234.02464417 -98.27253158 232.45733968 -99.05224609 230.90478516 C-101.06073153 226.74847773 -101.058315 224.44564743 -100 220 C-98.9051726 217.32807666 -97.76859972 214.74954149 -96.52734375 212.1484375 C-96.17302277 211.38980408 -95.81870178 210.63117065 -95.4536438 209.84954834 C-94.68832412 208.21224451 -93.91982052 206.57642592 -93.14846802 204.94195557 C-91.07013421 200.536397 -89.01636484 196.11940553 -86.9609375 191.703125 C-86.54068802 190.80147614 -86.12043854 189.89982727 -85.68745422 188.97085571 C-81.70296337 180.4032542 -77.86973 171.77244911 -74.0625 163.125 C-67.89901873 149.14644535 -61.53024284 135.27083115 -55.08288574 121.42114258 C-49.55431376 109.54347648 -44.10418211 97.63853569 -38.77392578 85.67041016 C-34.6402172 76.39728479 -30.42243936 67.16472421 -26.1875 57.9375 C-19.69862154 43.79766493 -13.34130735 29.60226131 -7.05151367 15.37280273 C-6.56479942 14.27269363 -6.56479942 14.27269363 -6.06825256 13.15036011 C-5.46374124 11.78344765 -4.86011273 10.41614428 -4.2575531 9.04837036 C-2.90739365 5.99434024 -1.53001919 2.9685345 0 0 Z "
+        fill="currentColor"
+        transform="translate(630,142)"
+      />
+      <path
+        d="M0 0 C1.13596367 0.53154945 1.13596367 0.53154945 2.2948761 1.07383728 C3.92670528 1.8383391 5.55663215 2.60691215 7.18481445 3.37915039 C11.57252393 5.45952627 15.97461317 7.50911219 20.375 9.5625 C21.27314423 9.98254303 22.17128845 10.40258606 23.09664917 10.83535767 C31.6971507 14.84948123 40.36487536 18.70248537 49.05078125 22.52734375 C62.43733488 28.43202972 75.73694697 34.50823224 89.00796509 40.66781616 C101.62145533 46.51926381 114.29209559 52.22601825 127.01123047 57.84375 C137.84988029 62.63275707 148.61877392 67.54432958 159.34887695 72.57299805 C170.87702047 77.95536258 182.50845376 83.10132797 194.1484375 88.23632812 C195.26818466 88.73107132 195.26818466 88.73107132 196.41055298 89.23580933 C197.80543467 89.85186781 199.20088087 90.46665049 200.59701538 91.0798645 C204.47199906 92.79105126 208.27717754 94.60307504 212.05078125 96.52734375 C209.59313167 99.35932021 207.05995942 100.60773538 203.64453125 102.1015625 C202.5268335 102.59567627 201.40913574 103.08979004 200.25756836 103.59887695 C199.65637177 103.86092926 199.05517517 104.12298157 198.4357605 104.39297485 C195.14623395 105.82723974 191.8669883 107.28475893 188.5859375 108.73828125 C187.89133926 109.04520401 187.19674103 109.35212677 186.48109436 109.66835022 C179.34665426 112.82575529 172.25712358 116.078926 165.1685791 119.33773804 C152.58690391 125.12051151 139.96611591 130.8053081 127.30078125 136.40234375 C113.83388215 142.35387571 100.44964145 148.46894332 87.09469604 154.66726685 C74.48659661 160.51623633 61.82221311 166.22268356 49.10745239 171.83569336 C40.21719767 175.76149695 31.35526206 179.73409599 22.55737305 183.86328125 C20.21016739 184.95764843 17.85494954 186.03502065 15.49145508 187.09375 C10.51434084 189.33336075 5.85003191 191.54497084 1.3671875 194.671875 C-3.30730917 197.72084874 -7.25844068 199.72627585 -12.94921875 199.52734375 C-23.91430744 196.67263963 -33.99692197 191.14492923 -44.03320312 186.00878906 C-51.25110541 182.33103456 -58.63040917 179.00552317 -66.00054932 175.64694214 C-68.46494274 174.52015431 -70.92435712 173.38316395 -73.38232422 172.24243164 C-84.14816407 167.24638345 -94.96523227 162.37963223 -105.82421875 157.58984375 C-119.8016631 151.42376281 -133.67832456 145.05761594 -147.52807617 138.61022949 C-159.38552399 133.0910683 -171.27090755 127.65184616 -183.21728516 122.32763672 C-192.30244078 118.2755355 -201.36266404 114.17084064 -210.41143799 110.03817749 C-211.95754069 109.33209836 -213.50388028 108.62653771 -215.05047607 107.92153931 C-229.86361928 101.16739681 -229.86361928 101.16739681 -236.94921875 97.52734375 C-235.40297635 94.43485896 -232.39497667 93.77224326 -229.34765625 92.46484375 C-228.65664825 92.16175293 -227.96564026 91.85866211 -227.25369263 91.54638672 C-225.74393793 90.88455358 -224.2329626 90.22549976 -222.72094727 89.56884766 C-218.60037978 87.77824555 -214.48968429 85.96528311 -210.37890625 84.15234375 C-209.52000793 83.77392334 -208.66110962 83.39550293 -207.77618408 83.00561523 C-198.61515962 78.9581325 -189.53116958 74.74850321 -180.44921875 70.52734375 C-167.01842822 64.29113497 -153.53427189 58.19365562 -139.98876953 52.2109375 C-129.12430747 47.41052541 -118.33093631 42.48485397 -107.57421875 37.4465332 C-97.61688065 32.79925504 -87.5769861 28.35132497 -77.52438354 23.91497803 C-62.64355788 17.34143391 -47.88025245 10.52383118 -33.13793945 3.64599609 C-32.29394592 3.25265076 -31.44995239 2.85930542 -30.5803833 2.45404053 C-29.00215581 1.71812923 -27.42451866 0.98095001 -25.84759521 0.24224854 C-24.47254039 -0.39926056 -23.09459654 -1.03463223 -21.71316528 -1.66229248 C-20.25193276 -2.33358828 -18.81033767 -3.04744289 -17.37475586 -3.77197266 C-11.1460286 -5.57131309 -5.51697816 -2.65206409 0 0 Z "
+        fill="currentColor"
+        transform="translate(378.94921875,4.47265625)"
+      />
+      <path
+        d="M0 0 C3.16996538 2.64292957 4.58615167 5.99846112 6.23046875 9.68359375 C6.53747711 10.35750656 6.84448547 11.03141937 7.16079712 11.72575378 C8.17637287 13.96004264 9.18196727 16.19867546 10.1875 18.4375 C10.9047181 20.02088535 11.62241858 21.60405227 12.34057617 23.18701172 C17.557798 34.70815066 22.67921543 46.2717554 27.79125977 57.83984375 C33.68037773 71.1576613 39.77125553 84.37649769 45.91656494 97.57775879 C51.44532587 109.45578979 56.8956508 121.36108914 62.22607422 133.32958984 C66.02968777 141.86221489 69.90147058 150.36145132 73.79812622 158.85189819 C79.85693235 172.05571719 85.84366894 185.28973626 91.75 198.5625 C92.08842926 199.32144562 92.42685852 200.08039124 92.77554321 200.86233521 C93.10460663 201.60071625 93.43367004 202.33909729 93.77270508 203.09985352 C94.09215591 203.81593277 94.41160675 204.53201202 94.74073792 205.26979065 C95.35400396 206.65889757 95.95876734 208.05179432 96.55430603 209.44859314 C97.7667374 212.29076343 98.99862324 214.99771075 100.59277344 217.6484375 C102.08152337 220.2828054 102.78334997 221.96992389 103 225 C101.30365246 230.98647292 98.55822083 236.34364945 95.75 241.875 C94.95333102 243.50968153 94.16075039 245.14636126 93.37207031 246.78491211 C92.14947833 249.32297049 90.92414575 251.85931053 89.68548584 254.38957214 C85.82877172 262.27058347 82.25905167 270.2638989 78.74108887 278.30059814 C73.29272578 290.73506591 67.67777702 303.08043961 61.91943359 315.37451172 C57.61676727 324.59338488 53.48310325 333.88071668 49.375 343.1875 C43.49553804 356.50466014 37.45637596 369.74030384 31.3125 382.9375 C25.72169773 394.94841853 20.15935153 406.96859091 14.75 419.0625 C13.96882813 420.80793091 13.96882813 420.80793091 13.171875 422.58862305 C10.99165126 427.47731698 8.8303365 432.37253116 6.72265625 437.29296875 C6.22717285 438.44623657 6.22717285 438.44623657 5.72167969 439.62280273 C4.89684505 441.55265885 4.0825803 443.48702409 3.26953125 445.421875 C2 448 2 448 0 449 C-7.04441853 434.01047326 -13.93744829 418.96464382 -20.625 403.8125 C-26.50431543 390.49528108 -32.5434519 377.25960921 -38.6875 364.0625 C-44.62674464 351.30464185 -50.50063799 338.5258406 -56.22607422 325.67041016 C-60.35978255 316.39728534 -64.57752914 307.16470924 -68.8125 297.9375 C-75.12666444 284.17885184 -81.31788127 270.36887768 -87.42114258 256.51538086 C-87.73030106 255.81563644 -88.03945953 255.11589203 -88.35798645 254.39494324 C-88.9687589 253.01216297 -89.57766625 251.62855725 -90.18461609 250.24409485 C-91.79991779 246.58830932 -93.48746332 242.98697332 -95.28125 239.41503906 C-95.65664917 238.65667755 -96.03204834 237.89831604 -96.41882324 237.11697388 C-97.13902339 235.67054754 -97.87361421 234.23116094 -98.62512207 232.80075073 C-100.93690087 228.13205351 -101.37203683 225.20640287 -100 220 C-99.02397272 217.48373378 -98.01543578 215.10715429 -96.859375 212.6796875 C-96.54119812 211.99202301 -96.22302124 211.30435852 -95.89520264 210.59585571 C-94.85494485 208.35168255 -93.8023705 206.11351491 -92.75 203.875 C-91.6452649 201.49798118 -90.54383244 199.11944845 -89.44238281 196.74090576 C-88.69802847 195.13432195 -87.952581 193.52824417 -87.20605469 191.92266846 C-83.90135901 184.81214026 -80.68880328 177.66331233 -77.5 170.5 C-72.45966554 159.20686063 -67.32682016 147.95859258 -62.16937256 136.71862793 C-57.07024954 125.59897477 -52.0696608 114.4390986 -47.125 103.25 C-41.17615106 89.78917193 -35.06527632 76.41023562 -28.86813354 63.06204224 C-22.49936999 49.33854294 -16.29910784 35.54638709 -10.21289062 21.6953125 C-6.98775083 14.36937414 -3.69282015 7.10586496 0 0 Z "
+        fill="currentColor"
+        transform="translate(101,142)"
+      />
+    </svg>
+  );
+};
 
 export const OnyxIcon = ({
   size = 16,
@@ -2791,7 +2867,7 @@ export const OnyxIcon = ({
         fillRule="evenodd"
         clipRule="evenodd"
         d="M27.9998 0L10.8691 7.76944L27.9998 15.5389L45.1305 7.76944L27.9998 0ZM27.9998 40.4611L10.8691 48.2306L27.9998 56L45.1305 48.2306L27.9998 40.4611ZM48.2309 10.8691L56.0001 28.0003L48.2309 45.1314L40.4617 28.0003L48.2309 10.8691ZM15.5385 28.0001L7.76923 10.869L0 28.0001L7.76923 45.1313L15.5385 28.0001Z"
-        fill="black"
+        fill="currentColor"
       />
     </svg>
   );
@@ -2970,7 +3046,7 @@ export const ArtAsistantIcon = ({
     >
       <path
         d="M12 1.5C9.98656 1.4999 8.01555 2.07871 6.32185 3.16743C4.62815 4.25616 3.28318 5.8089 2.44724 7.6406C1.6113 9.47231 1.31963 11.5057 1.60699 13.4986C1.89435 15.4914 2.74862 17.3596 4.068 18.8805L10.422 12.6285C10.8429 12.2144 11.4096 11.9824 12 11.9824C12.5904 11.9824 13.1571 12.2144 13.578 12.6285L19.932 18.8805C21.2514 17.3596 22.1056 15.4914 22.393 13.4986C22.6804 11.5057 22.3887 9.47231 21.5528 7.6406C20.7168 5.8089 19.3719 4.25616 17.6782 3.16743C15.9845 2.07871 14.0134 1.4999 12 1.5ZM12 22.5C14.5238 22.5042 16.9639 21.5952 18.87 19.941L12.525 13.6965C12.3848 13.5591 12.1963 13.4821 12 13.4821C11.8037 13.4821 11.6152 13.5591 11.475 13.6965L5.13 19.941C7.03607 21.5952 9.47619 22.5042 12 22.5ZM0 12C0 8.8174 1.26428 5.76516 3.51472 3.51472C5.76516 1.26428 8.8174 0 12 0C15.1826 0 18.2348 1.26428 20.4853 3.51472C22.7357 5.76516 24 8.8174 24 12C24 15.1826 22.7357 18.2348 20.4853 20.4853C18.2348 22.7357 15.1826 24 12 24C8.8174 24 5.76516 22.7357 3.51472 20.4853C1.26428 18.2348 0 15.1826 0 12ZM16.5 8.25C16.5 8.05109 16.421 7.86032 16.2803 7.71967C16.1397 7.57902 15.9489 7.5 15.75 7.5C15.5511 7.5 15.3603 7.57902 15.2197 7.71967C15.079 7.86032 15 8.05109 15 8.25C15 8.44891 15.079 8.63968 15.2197 8.78033C15.3603 8.92098 15.5511 9 15.75 9C15.9489 9 16.1397 8.92098 16.2803 8.78033C16.421 8.63968 16.5 8.44891 16.5 8.25ZM18 8.25C18 8.54547 17.9418 8.83806 17.8287 9.11104C17.7157 9.38402 17.5499 9.63206 17.341 9.84099C17.1321 10.0499 16.884 10.2157 16.611 10.3287C16.3381 10.4418 16.0455 10.5 15.75 10.5C15.4545 10.5 15.1619 10.4418 14.889 10.3287C14.616 10.2157 14.3679 10.0499 14.159 9.84099C13.9501 9.63206 13.7843 9.38402 13.6713 9.11104C13.5582 8.83806 13.5 8.54547 13.5 8.25C13.5 7.65326 13.7371 7.08097 14.159 6.65901C14.581 6.23705 15.1533 6 15.75 6C16.3467 6 16.919 6.23705 17.341 6.65901C17.7629 7.08097 18 7.65326 18 8.25Z"
-        fill="black"
+        fill="currentColor"
       />
     </svg>
   );
@@ -2994,12 +3070,12 @@ export const GeneralAssistantIcon = ({
         width="22.7"
         height="22.7"
         rx="11.35"
-        stroke="black"
+        stroke="currentColor"
         strokeWidth="1.3"
       />
       <path
         d="M8.06264 10.3125C8.06253 9.66355 8.22283 9.02463 8.52926 8.45258C8.83569 7.88054 9.27876 7.3931 9.81906 7.03363C10.3594 6.67415 10.9801 6.4538 11.6261 6.39216C12.2722 6.33052 12.9234 6.42951 13.5219 6.68032C14.1204 6.93113 14.6477 7.32598 15.0568 7.82976C15.4659 8.33353 15.7441 8.93061 15.8667 9.56787C15.9893 10.2051 15.9525 10.8628 15.7596 11.4824C15.5667 12.102 15.2236 12.6644 14.7609 13.1194C14.5438 13.3331 14.3525 13.611 14.2603 13.9474L13.8721 15.375H10.1281L9.73889 13.9474C9.64847 13.6321 9.47612 13.3464 9.23939 13.1194C8.86681 12.753 8.57088 12.3161 8.36885 11.8342C8.16682 11.3523 8.06272 10.835 8.06264 10.3125ZM10.4364 16.5H13.5639L13.3715 17.211C13.3389 17.3301 13.2681 17.4351 13.1699 17.5099C13.0717 17.5847 12.9516 17.6252 12.8281 17.625H11.1721C11.0487 17.6252 10.9286 17.5847 10.8304 17.5099C10.7322 17.4351 10.6614 17.3301 10.6288 17.211L10.4364 16.5ZM12.0001 5.25C10.9954 5.25017 10.0134 5.5493 9.17925 6.10932C8.34506 6.66934 7.69637 7.46491 7.31577 8.39477C6.93516 9.32463 6.83985 10.3467 7.04197 11.3309C7.24409 12.3151 7.7345 13.2169 8.45076 13.9215C8.54562 14.0093 8.61549 14.1207 8.65326 14.2444L9.54426 17.5069C9.64173 17.8639 9.85387 18.179 10.148 18.4037C10.4422 18.6283 10.802 18.75 11.1721 18.75H12.8281C13.1983 18.75 13.5581 18.6283 13.8523 18.4037C14.1464 18.179 14.3585 17.8639 14.456 17.5069L15.3459 14.2444C15.384 14.1206 15.4542 14.0092 15.5495 13.9215C16.2658 13.2169 16.7562 12.3151 16.9583 11.3309C17.1604 10.3467 17.0651 9.32463 16.6845 8.39477C16.3039 7.46491 15.6552 6.66934 14.821 6.10932C13.9868 5.5493 13.0049 5.25017 12.0001 5.25Z"
-        fill="black"
+        fill="currentColor"
       />
     </svg>
   );
@@ -3023,12 +3099,12 @@ export const SearchAssistantIcon = ({
         width="22.7"
         height="22.7"
         rx="11.35"
-        stroke="black"
+        stroke="currentColor"
         strokeWidth="1.3"
       />
       <path
         d="M17.0667 18L12.8667 13.8C12.5333 14.0667 12.15 14.2778 11.7167 14.4333C11.2833 14.5889 10.8222 14.6667 10.3333 14.6667C9.12222 14.6667 8.09733 14.2471 7.25867 13.408C6.42 12.5689 6.00044 11.544 6 10.3333C5.99956 9.12267 6.41911 8.09778 7.25867 7.25867C8.09822 6.41956 9.12311 6 10.3333 6C11.5436 6 12.5687 6.41956 13.4087 7.25867C14.2487 8.09778 14.668 9.12267 14.6667 10.3333C14.6667 10.8222 14.5889 11.2833 14.4333 11.7167C14.2778 12.15 14.0667 12.5333 13.8 12.8667L18 17.0667L17.0667 18ZM10.3333 13.3333C11.1667 13.3333 11.8751 13.0418 12.4587 12.4587C13.0422 11.8756 13.3338 11.1671 13.3333 10.3333C13.3329 9.49956 13.0413 8.79133 12.4587 8.20867C11.876 7.626 11.1676 7.33422 10.3333 7.33333C9.49911 7.33244 8.79089 7.62422 8.20867 8.20867C7.62644 8.79311 7.33467 9.50133 7.33333 10.3333C7.332 11.1653 7.62378 11.8738 8.20867 12.4587C8.79356 13.0436 9.50178 13.3351 10.3333 13.3333Z"
-        fill="black"
+        fill="currentColor"
       />
     </svg>
   );
@@ -3042,7 +3118,7 @@ export const CirclingArrowIcon = ({
     <svg
       style={{ width: `${size}px`, height: `${size}px` }}
       className={`w-[${size}px] h-[${size}px] ` + className}
-      fill="black"
+      fill="currentColor"
       version="1.1"
       id="Capa_1"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/web/src/components/llm/ApiKeyModal.tsx b/web/src/components/llm/ApiKeyModal.tsx
index 76a3edbe9..995f348f0 100644
--- a/web/src/components/llm/ApiKeyModal.tsx
+++ b/web/src/components/llm/ApiKeyModal.tsx
@@ -31,7 +31,7 @@ export const ApiKeyModal = ({
       onOutsideClick={hide ? () => hide() : undefined}
     >
       <>
-        <div className="mb-5 text-sm text-gray-700">
+        <div className="mb-5 text-sm text-neutral-700 dark:text-neutral-200">
           Please provide an API Key – you can always change this or switch
           models later.
           <br />
diff --git a/web/src/components/llm/LLMSelector.tsx b/web/src/components/llm/LLMSelector.tsx
index 4434824ce..d9b24f5a8 100644
--- a/web/src/components/llm/LLMSelector.tsx
+++ b/web/src/components/llm/LLMSelector.tsx
@@ -85,7 +85,7 @@ export const LLMSelector: React.FC<LLMSelectorProps> = ({
           <span>{userSettings ? "System Default" : "User Default"}</span>
           {userSettings && (
             <span className=" my-auto font-normal ml-1">
-              ({defaultModelDisplayName})
+              ({defaultModelDisplayName}) asdf
             </span>
           )}
         </SelectItem>
diff --git a/web/src/components/logo/FixedLogo.tsx b/web/src/components/logo/FixedLogo.tsx
index 743015517..6201390fb 100644
--- a/web/src/components/logo/FixedLogo.tsx
+++ b/web/src/components/logo/FixedLogo.tsx
@@ -30,7 +30,7 @@ export const LogoComponent = memo(function LogoComponent({
       onClick={isAdmin ? () => router.push("/chat") : () => {}}
       className={`max-w-[200px]
         ${!show && "mobile:hidden"}
-       flex items-center gap-x-1`}
+       flex text-text-900 items-center gap-x-1`}
     >
       {enterpriseSettings && enterpriseSettings.application_name ? (
         <>
diff --git a/web/src/components/logo/Logo.tsx b/web/src/components/logo/Logo.tsx
index eef2e2962..e147b822a 100644
--- a/web/src/components/logo/Logo.tsx
+++ b/web/src/components/logo/Logo.tsx
@@ -2,7 +2,8 @@
 
 import { useContext } from "react";
 import { SettingsContext } from "../settings/SettingsProvider";
-import Image from "next/image";
+import { useTheme } from "next-themes";
+import { OnyxIcon, OnyxLogoTypeIcon } from "../icons/icons";
 
 export function Logo({
   height,
@@ -25,7 +26,10 @@ export function Logo({
   ) {
     return (
       <div style={{ height, width }} className={className}>
-        <Image src="/logo.png" alt="Logo" width={width} height={height} />
+        <OnyxIcon
+          size={height}
+          className={`${className} dark:text-[#fff] text-[#000]`}
+        />
       </div>
     );
   }
@@ -47,16 +51,9 @@ export function Logo({
 
 export function LogoType() {
   return (
-    <Image
-      priority
-      className="max-h-8 w-full mr-auto "
-      src="/logotype.png"
-      alt="Logo"
-      width={2640}
-      height={733}
-      style={{ objectFit: "contain", width: "100%", height: "100%" }}
-      loading="eager"
-      unoptimized={true}
+    <OnyxLogoTypeIcon
+      size={115}
+      className={`items-center w-full dark:text-[#fff]`}
     />
   );
 }
diff --git a/web/src/components/modals/EditPropertyModal.tsx b/web/src/components/modals/EditPropertyModal.tsx
index c3ebd81c5..7b91b5dde 100644
--- a/web/src/components/modals/EditPropertyModal.tsx
+++ b/web/src/components/modals/EditPropertyModal.tsx
@@ -38,7 +38,7 @@ const EditPropertyModal = ({
       >
         {({ isSubmitting, isValid, values }) => (
           <Form className="items-stretch">
-            <h2 className="text-2xl text-emphasis font-bold mb-3 flex items-center">
+            <h2 className="text-2xl text-text-darker font-bold mb-3 flex items-center">
               <EditIcon size={20} className="mr-2" />
               Edit {propertyTitle}
             </h2>
diff --git a/web/src/components/modals/ExceptionTraceModal.tsx b/web/src/components/modals/ExceptionTraceModal.tsx
index fc88b44d3..f1b4aea58 100644
--- a/web/src/components/modals/ExceptionTraceModal.tsx
+++ b/web/src/components/modals/ExceptionTraceModal.tsx
@@ -27,13 +27,13 @@ export default function ExceptionTraceModal({
                 setCopyClicked(true);
                 setTimeout(() => setCopyClicked(false), 2000);
               }}
-              className="flex w-fit cursor-pointer hover:bg-hover-light p-2 border-border border rounded"
+              className="flex w-fit cursor-pointer hover:bg-accent-background p-2 border-border border rounded"
             >
               Copy full trace
               <CopyIcon className="ml-2 my-auto" />
             </div>
           ) : (
-            <div className="flex w-fit hover:bg-hover-light p-2 border-border border rounded cursor-default">
+            <div className="flex w-fit hover:bg-accent-background p-2 border-border border rounded cursor-default">
               Copied to clipboard
               <CheckmarkIcon
                 className="my-auto ml-2 flex flex-shrink-0 text-success"
diff --git a/web/src/components/modals/NoAssistantModal.tsx b/web/src/components/modals/NoAssistantModal.tsx
index 94d20aadb..564666dff 100644
--- a/web/src/components/modals/NoAssistantModal.tsx
+++ b/web/src/components/modals/NoAssistantModal.tsx
@@ -4,16 +4,16 @@ export const NoAssistantModal = ({ isAdmin }: { isAdmin: boolean }) => {
   return (
     <Modal width="bg-white max-w-2xl rounded-lg shadow-xl text-center">
       <>
-        <h2 className="text-3xl font-bold text-gray-800 mb-4">
+        <h2 className="text-3xl font-bold text-text-800 mb-4">
           No Assistant Available
         </h2>
-        <p className="text-gray-600 mb-6">
+        <p className="text-text-600 mb-6">
           You currently have no assistant configured. To use this feature, you
           need to take action.
         </p>
         {isAdmin ? (
           <>
-            <p className="text-gray-600 mb-6">
+            <p className="text-text-600 mb-6">
               As an administrator, you can create a new assistant by visiting
               the admin panel.
             </p>
@@ -27,7 +27,7 @@ export const NoAssistantModal = ({ isAdmin }: { isAdmin: boolean }) => {
             </button>
           </>
         ) : (
-          <p className="text-gray-600 mb-2">
+          <p className="text-text-600 mb-2">
             Please contact your administrator to configure an assistant for you.
           </p>
         )}
diff --git a/web/src/components/popover/DefaultPopover.tsx b/web/src/components/popover/DefaultPopover.tsx
index ff017d972..4656caae1 100644
--- a/web/src/components/popover/DefaultPopover.tsx
+++ b/web/src/components/popover/DefaultPopover.tsx
@@ -44,7 +44,7 @@ export function DefaultPopover(props: {
             .map((child, index) => (
               <div
                 key={index}
-                className="cursor-pointer text-left text-sm p-2 hover:bg-hover-light"
+                className="cursor-pointer text-left text-sm p-2 hover:bg-accent-background"
                 onClick={() => setPopoverOpen(false)}
               >
                 {child}
diff --git a/web/src/components/popup/Popup.tsx b/web/src/components/popup/Popup.tsx
index 3582efa3a..3e0f04a3a 100644
--- a/web/src/components/popup/Popup.tsx
+++ b/web/src/components/popup/Popup.tsx
@@ -129,9 +129,15 @@ const Popup: React.FC<PopupProps> = ({
       {isOpen && (
         <div
           ref={popupRef}
-          className={`absolute bg-white border border-gray-200  rounded-lg shadow-lg ${
+          className={`absolute bg-white border border-background-200  rounded-lg shadow-lg ${
             !removePadding && "p-4"
-          } ${!settings?.isMobile ? (tab ? "w-[400px] " : "min-w-[400px]") : "w-[250px]"}`}
+          } ${
+            !settings?.isMobile
+              ? tab
+                ? "w-[400px] "
+                : "min-w-[400px]"
+              : "w-[250px]"
+          }`}
           style={getPopupStyle()}
         >
           {content(closePopup, contentRef)}
diff --git a/web/src/components/search/DateRangeSelector.tsx b/web/src/components/search/DateRangeSelector.tsx
index 75f6de2c5..58ae4a308 100644
--- a/web/src/components/search/DateRangeSelector.tsx
+++ b/web/src/components/search/DateRangeSelector.tsx
@@ -42,14 +42,14 @@ export function DateRangeSelector({
             border 
             border-border 
             cursor-pointer 
-            hover:bg-hover`}
+            hover:bg-accent-background-hovered`}
         >
           <FiCalendar className="flex-none my-auto mr-2" />{" "}
           <p className="line-clamp-1">
             {isHorizontal ? (
               "Date"
             ) : value?.selectValue ? (
-              <div className="text-emphasis">{value.selectValue}</div>
+              <div className="text-text-darker">{value.selectValue}</div>
             ) : (
               "Any time..."
             )}
diff --git a/web/src/components/search/DocumentDisplay.tsx b/web/src/components/search/DocumentDisplay.tsx
index 16beeed12..f0a861c4a 100644
--- a/web/src/components/search/DocumentDisplay.tsx
+++ b/web/src/components/search/DocumentDisplay.tsx
@@ -437,7 +437,7 @@ export function CompactDocumentCard({
       onClick={() => {
         openDocument(document, updatePresentingDocument);
       }}
-      className="max-w-[250px]  gap-y-0 cursor-pointer pb-0 pt-0 mt-0 flex gap-y-0  flex-col  content-start items-start gap-0 "
+      className="max-w-[200px]  gap-y-0 cursor-pointer pb-0 pt-0 mt-0 flex gap-y-0  flex-col  content-start items-start gap-0 "
     >
       <div className="text-sm  !pb-0 !mb-0 font-semibold flex  items-center gap-x-1 text-text-900 pt-0 mt-0 truncate w-full">
         {icon}
@@ -446,14 +446,14 @@ export function CompactDocumentCard({
           "..."}
       </div>
       {document.blurb && (
-        <div className="text-xs mb-0 text-gray-600 line-clamp-2">
+        <div className="text-xs mb-0 text-neutral-600 dark:text-neutral-300 line-clamp-2">
           {document.blurb}
         </div>
       )}
       {document.updated_at && (
         <div className=" flex mt-0 pt-0 items-center justify-between w-full ">
           {!isNaN(new Date(document.updated_at).getTime()) && (
-            <span className="text-xs text-gray-500">
+            <span className="text-xs text-text-500">
               Updated {new Date(document.updated_at).toLocaleDateString()}
             </span>
           )}
@@ -478,15 +478,15 @@ export function CompactQuestionCard({
       <div className="text-sm !pb-0 !mb-0 font-semibold flex items-center gap-x-1 text-text-900 pt-0 mt-0 truncate w-full">
         Question
       </div>
-      <div className="text-xs mb-0 text-gray-600 line-clamp-2">
+      <div className="text-xs mb-0 text-text-600 line-clamp-2">
         {question.question}
       </div>
       <div className="flex mt-0 pt-0 items-center justify-between w-full">
-        <span className="text-xs text-gray-500">
+        <span className="text-xs text-text-500">
           {question.context_docs?.top_documents.length || 0} context docs
         </span>
         {question.sub_queries && (
-          <span className="text-xs text-gray-500">
+          <span className="text-xs text-text-500">
             {question.sub_queries.length} subqueries
           </span>
         )}
diff --git a/web/src/components/search/PersonaSelector.tsx b/web/src/components/search/PersonaSelector.tsx
index 2c00a97e8..17456ddc2 100644
--- a/web/src/components/search/PersonaSelector.tsx
+++ b/web/src/components/search/PersonaSelector.tsx
@@ -46,7 +46,7 @@ export function PersonaSelector({
         </div>
       }
     >
-      <div className="select-none text-sm font-bold flex text-emphasis px-2 py-1.5 cursor-pointer w-fit hover:bg-hover rounded">
+      <div className="select-none text-sm font-bold flex text-text-darker px-2 py-1.5 cursor-pointer w-fit hover:bg-accent-background-hovered rounded">
         {currentlySelectedPersona?.name || "Default"}
         <FiChevronDown className="my-auto ml-2" />
       </div>
diff --git a/web/src/components/search/QAFeedback.tsx b/web/src/components/search/QAFeedback.tsx
index 8f65e1342..83dededea 100644
--- a/web/src/components/search/QAFeedback.tsx
+++ b/web/src/components/search/QAFeedback.tsx
@@ -56,9 +56,9 @@ const QAFeedback = ({
       className={"cursor-pointer " + paddingY}
     >
       {feedbackType === "like" ? (
-        <ThumbsUpIcon className="my-auto flex flex-shrink-0 text-gray-500" />
+        <ThumbsUpIcon className="my-auto flex flex-shrink-0 text-text-500" />
       ) : (
-        <ThumbsDownIcon className="my-auto flex flex-shrink-0 text-gray-500" />
+        <ThumbsDownIcon className="my-auto flex flex-shrink-0 text-text-500" />
       )}
     </div>
   );
diff --git a/web/src/components/search/SearchBar.tsx b/web/src/components/search/SearchBar.tsx
index 167ad42e9..04f0cd54b 100644
--- a/web/src/components/search/SearchBar.tsx
+++ b/web/src/components/search/SearchBar.tsx
@@ -221,12 +221,12 @@ export const FullSearchBar = ({
               className="flex my-auto cursor-pointer"
             >
               <SendIcon
-                size={28}
-                className={`text-emphasis ${
-                  disabled || !query
-                    ? "bg-disabled-submit-background"
-                    : "bg-submit-background"
-                } text-white p-1 rounded-full`}
+                size={22}
+                className={`text-neutral-50 dark:text-neutral-900 p-1 my-auto rounded-full ${
+                  query
+                    ? "bg-neutral-900 dark:bg-neutral-50"
+                    : "bg-neutral-500 dark:bg-neutral-400"
+                }`}
               />
             </button>
           </div>
@@ -268,7 +268,7 @@ export const SearchBar = ({ query, setQuery, onSearch }: SearchBarProps) => {
   return (
     <div className="flex text-text-chatbar justify-center">
       <div className="flex items-center w-full opacity-100 border-2 border-border rounded-lg px-4 py-2 focus-within:border-accent bg-background-search">
-        <MagnifyingGlass className="text-emphasis" />
+        <MagnifyingGlass className="text-text-darker" />
         <textarea
           autoFocus
           className="flex-grow ml-2 h-6 placeholder:text-text-chatbar-subtle outline-none placeholder-default overflow-hidden whitespace-normal resize-none"
diff --git a/web/src/components/search/filtering/FilterDropdown.tsx b/web/src/components/search/filtering/FilterDropdown.tsx
index 4cffbc54a..1cb6817e4 100644
--- a/web/src/components/search/filtering/FilterDropdown.tsx
+++ b/web/src/components/search/filtering/FilterDropdown.tsx
@@ -65,11 +65,11 @@ export function FilterDropdown({
                       cursor-pointer
                       flex-none
                       w-full
-                      text-emphasis
+                      text-text-darker
                       items-center
                       gap-x-1
                       ${dropdownColor || "bg-background"}
-                      hover:bg-hover
+                      hover:bg-accent-background-hovered
                       ${
                         ind === options.length - 1
                           ? ""
@@ -108,7 +108,7 @@ export function FilterDropdown({
             border-border
             cursor-pointer 
             ${backgroundColor || "bg-background"}
-            hover:bg-hover-light`}
+            hover:bg-accent-background`}
         >
           <div className="flex-none my-auto">{icon}</div>
           {selected.length === 0 || resetValues ? (
diff --git a/web/src/components/search/filtering/FilterPopup.tsx b/web/src/components/search/filtering/FilterPopup.tsx
index 1577eeeeb..17727fd57 100644
--- a/web/src/components/search/filtering/FilterPopup.tsx
+++ b/web/src/components/search/filtering/FilterPopup.tsx
@@ -73,8 +73,8 @@ export function FilterPopup({
     <li
       className={`px-3 py-2 flex items-center gap-x-2 cursor-pointer transition-colors duration-200 ${
         selectedFilter === category
-          ? "bg-gray-100 text-gray-900"
-          : "text-gray-600 hover:bg-gray-50"
+          ? "bg-background-100 text-text-900"
+          : "text-text-600 hover:bg-background-50"
       }`}
       onMouseDown={() => {
         setSelectedFilter(category);
@@ -124,7 +124,7 @@ export function FilterPopup({
                 )
               )
             }
-            className="text-gray-600 hover:text-gray-800"
+            className="text-text-600 hover:text-text-800"
           >
             <FiChevronLeft size={20} />
           </button>
@@ -144,14 +144,14 @@ export function FilterPopup({
                 )
               )
             }
-            className="text-gray-600 hover:text-gray-800"
+            className="text-text-600 hover:text-text-800"
           >
             <FiChevronRight size={20} />
           </button>
         </div>
         <div className="grid grid-cols-7 gap-1 text-center mb-2">
           {days.map((day) => (
-            <div key={day} className="text-xs font-medium text-gray-400">
+            <div key={day} className="text-xs font-medium text-text-400">
               {day}
             </div>
           ))}
@@ -173,12 +173,12 @@ export function FilterPopup({
               <button
                 key={index + 1}
                 className={`w-8 h-8 text-sm rounded-full flex items-center justify-center
-                  ${isInRange ? "bg-blue-100" : "hover:bg-gray-100"}
+                  ${isInRange ? "bg-blue-100" : "hover:bg-background-100"}
                   ${isStart || isEnd ? "bg-blue-500 text-white" : ""}
                   ${
                     isInRange && !isStart && !isEnd
                       ? "text-blue-600"
-                      : "text-gray-700"
+                      : "text-text-700"
                   }
                 `}
                 onClick={() => {
@@ -259,7 +259,7 @@ export function FilterPopup({
         align="start"
       >
         <div className="flex h-[325px]">
-          <div className="w-1/3 border-r border-gray-200 p-2">
+          <div className="w-1/3 border-r border-background-200 p-2">
             <ul className="space-y-1">
               <FilterOption
                 category={FilterCategories.date}
@@ -294,13 +294,13 @@ export function FilterPopup({
               <div className="p-4">
                 {renderCalendar()}
                 {filterManager.timeRange ? (
-                  <div className="mt-2 text-xs text-gray-600">
+                  <div className="mt-2 text-xs text-text-600">
                     Selected:{" "}
                     {filterManager.timeRange.from.toLocaleDateString()} -{" "}
                     {filterManager.timeRange.to.toLocaleDateString()}
                   </div>
                 ) : (
-                  <div className="mt-2 text-xs text-gray-600">
+                  <div className="mt-2 text-xs text-text-600">
                     No time restriction selected
                   </div>
                 )}
@@ -398,24 +398,24 @@ export function FilterPopup({
           >
             Clear Filters
           </Button>
-          <div className="text-xs text-gray-500 flex items-center space-x-1">
+          <div className="text-xs text-text-500 flex items-center space-x-1">
             {filterManager.selectedSources.length > 0 && (
-              <span className="bg-gray-100 px-1.5 py-0.5 rounded-full">
+              <span className="bg-background-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded-full">
                 {filterManager.selectedSources.length} sources
               </span>
             )}
             {filterManager.selectedDocumentSets.length > 0 && (
-              <span className="bg-gray-100 px-1.5 py-0.5 rounded-full">
+              <span className="bg-background-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded-full">
                 {filterManager.selectedDocumentSets.length} sets
               </span>
             )}
             {filterManager.selectedTags.length > 0 && (
-              <span className="bg-gray-100 px-1.5 py-0.5 rounded-full">
+              <span className="bg-background-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded-full">
                 {filterManager.selectedTags.length} tags
               </span>
             )}
             {filterManager.timeRange && (
-              <span className="bg-gray-100 px-1.5 py-0.5 rounded-full">
+              <span className="bg-background-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded-full">
                 Date range
               </span>
             )}
diff --git a/web/src/components/search/filtering/HorizontalSourceSelector.tsx b/web/src/components/search/filtering/HorizontalSourceSelector.tsx
index da59fd01e..cf40880db 100644
--- a/web/src/components/search/filtering/HorizontalSourceSelector.tsx
+++ b/web/src/components/search/filtering/HorizontalSourceSelector.tsx
@@ -99,7 +99,7 @@ export function HorizontalSourceSelector({
             className="
               flex items-center space-x-1 border 
               border-border rounded-lg px-3 py-1.5 
-              hover:bg-hover text-sm cursor-pointer
+              hover:bg-accent-background-hovered text-sm cursor-pointer
               bg-background-search-filter
             "
           >
diff --git a/web/src/components/search/filtering/TagFilter.tsx b/web/src/components/search/filtering/TagFilter.tsx
index df7de45d0..13b54d5d4 100644
--- a/web/src/components/search/filtering/TagFilter.tsx
+++ b/web/src/components/search/filtering/TagFilter.tsx
@@ -18,8 +18,8 @@ export const SelectableDropdown = ({
       key={value}
       className={`p-2 flex gap-x-2 items-center rounded cursor-pointer transition-colors duration-200 ${
         selected
-          ? "bg-gray-200 dark:bg-gray-700"
-          : "hover:bg-gray-100 dark:hover:bg-gray-800"
+          ? "bg-background-200 dark:bg-neutral-800"
+          : "hover:bg-background-100 dark:hover:bg-neutral-800"
       }`}
       onClick={toggle}
     >
diff --git a/web/src/components/search/results/Citation.tsx b/web/src/components/search/results/Citation.tsx
index 7e463c8d3..2d07b1a37 100644
--- a/web/src/components/search/results/Citation.tsx
+++ b/web/src/components/search/results/Citation.tsx
@@ -43,7 +43,7 @@ export function Citation({
     <TooltipProvider delayDuration={0}>
       <Tooltip>
         <TooltipTrigger asChild>
-          <div
+          <span
             onClick={() => {
               document_info?.document
                 ? openDocument(
@@ -56,14 +56,17 @@ export function Citation({
             }}
             className="inline-flex items-center cursor-pointer transition-all duration-200 ease-in-out"
           >
-            <span className="flex items-center justify-center w-5 h-5 text-[11px] font-medium text-gray-700 bg-neutral-100 rounded-full border border-gray-300 hover:bg-gray-200 hover:text-gray-900 shadow-sm">
+            <span
+              className="flex items-center justify-center  px-1 h-4 text-[10px] font-medium text-text-700 bg-background-100 rounded-full border border-background-300 hover:bg-background-200 hover:text-text-900 shadow-sm"
+              style={{ transform: "translateY(-10%)", lineHeight: "1" }}
+            >
               {innerText}
             </span>
-          </div>
+          </span>
         </TooltipTrigger>
         <TooltipContent
+          className="dark:border dark:!bg-[#000] border-neutral-700"
           width="mb-2 max-w-lg"
-          className="border-2 border-border shadow-lg bg-white"
         >
           {document_info?.document ? (
             <CompactDocumentCard
diff --git a/web/src/components/search/results/QuotesSection.tsx b/web/src/components/search/results/QuotesSection.tsx
index 0ea207270..ad3ffb2f6 100644
--- a/web/src/components/search/results/QuotesSection.tsx
+++ b/web/src/components/search/results/QuotesSection.tsx
@@ -32,7 +32,7 @@ const QuoteDisplay = ({ quoteInfo }: { quoteInfo: Quote }) => {
                 }, 1000);
               }}
             >
-              <div className="p-1 rounded hover:bg-hover cursor-pointer">
+              <div className="p-1 rounded hover:bg-accent-background-hovered cursor-pointer">
                 {copyClicked ? (
                   <CheckmarkIcon
                     className="my-auto flex flex-shrink-0"
@@ -48,7 +48,7 @@ const QuoteDisplay = ({ quoteInfo }: { quoteInfo: Quote }) => {
       )}
       <button className="text-sm flex w-fit">
         <a
-          className="flex max-w-[250px] shrink box-border p-2 border border-border rounded-lg hover:bg-hover-light"
+          className="flex max-w-[250px] shrink box-border p-2 border border-border rounded-lg hover:bg-accent-background"
           href={quoteInfo.link || undefined}
           target="_blank"
           rel="noopener noreferrer"
@@ -105,7 +105,7 @@ export const QuotesSection = (props: QuotesSectionProps) => {
     <ResponseSection
       status={status}
       header={
-        <div className="ml-2 text-emphasis font-bold">
+        <div className="ml-2 text-text-darker font-bold">
           {<QuotesHeader {...props} />}
         </div>
       }
diff --git a/web/src/components/search/results/ResponseSection.tsx b/web/src/components/search/results/ResponseSection.tsx
index 8226024c7..f46ac867c 100644
--- a/web/src/components/search/results/ResponseSection.tsx
+++ b/web/src/components/search/results/ResponseSection.tsx
@@ -54,7 +54,7 @@ export const ResponseSection = ({
         p-1 
         rounded  
         select-none 
-        ${isNotControllable ? "" : "hover:bg-gray-800 cursor-pointer"}`}
+        ${isNotControllable ? "" : "hover:bg-background-800 cursor-pointer"}`}
         onClick={() => {
           if (!isNotControllable) {
             if (isOpen === null) {
@@ -69,7 +69,7 @@ export const ResponseSection = ({
         }}
       >
         <div className="my-auto">{icon}</div>
-        <div className="my-auto text-sm text-gray-200">{header}</div>
+        <div className="my-auto text-sm text-text-200">{header}</div>
       </div>
       {finalIsOpen && <div className="pb-1 mx-2 text-sm mb-1">{body}</div>}
     </div>
diff --git a/web/src/components/theme/ThemeProvider.tsx b/web/src/components/theme/ThemeProvider.tsx
new file mode 100644
index 000000000..189a2b1a1
--- /dev/null
+++ b/web/src/components/theme/ThemeProvider.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
diff --git a/web/src/components/tooltip/CustomTooltip.tsx b/web/src/components/tooltip/CustomTooltip.tsx
index c595c4527..af447de92 100644
--- a/web/src/components/tooltip/CustomTooltip.tsx
+++ b/web/src/components/tooltip/CustomTooltip.tsx
@@ -131,18 +131,18 @@ export const CustomTooltip = ({
         !disabled &&
         createPortal(
           <div
-            className={`min-w-8 fixed z-[1000]
+            className={`z-[100] overflow-hidden rounded-md text-neutral-50 
               ${className}
-              ${citation ? "max-w-[350px]" : "w-40"} ${
+              ${citation ? "max-w-[350px]" : "max-w-40"} ${
                 large ? (medium ? "w-88" : "w-96") : line && "max-w-64 w-auto"
               } 
-            transform -translate-x-1/2 text-sm 
+            transform -translate-x-1/2 text-xs
             ${
               light
-                ? "text-text-800 bg-background-200"
-                : "text-white bg-background-800"
+                ? "bg-neutral-200 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-50"
+                : "bg-neutral-900 dark:bg-neutral-200 text-neutral-50 dark:text-neutral-900"
             } 
-            rounded-lg shadow-lg`}
+            px-2 py-1.5 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2`}
             style={{
               top: `${tooltipPosition.top}px`,
               left: `${tooltipPosition.left}px`,
@@ -153,7 +153,11 @@ export const CustomTooltip = ({
                 className={`absolute w-3 h-3 ${
                   position === "top" ? "bottom-1.5" : "-top-1.5"
                 } left-1/2 transform -translate-x-1/2 rotate-45 
-                ${light ? "bg-background-200" : "bg-background-800"}`}
+                ${
+                  light
+                    ? "bg-neutral-200 dark:bg-neutral-800"
+                    : "bg-neutral-900 dark:bg-neutral-200"
+                }`}
               />
             )}
             <div
@@ -170,6 +174,7 @@ export const CustomTooltip = ({
                   : {}
               }
             >
+              lll
               {content}
             </div>
           </div>,
diff --git a/web/src/components/ui/CheckField.tsx b/web/src/components/ui/CheckField.tsx
index d3a62ced4..ca21bb688 100644
--- a/web/src/components/ui/CheckField.tsx
+++ b/web/src/components/ui/CheckField.tsx
@@ -54,11 +54,11 @@ export const CheckFormField: React.FC<CheckFieldProps> = ({
           onChange?.(Boolean(checked));
         }}
         className={cn(
-          "peer shrink-0 rounded-sm border border-neutral-200 bg-white ring-offset-white " +
+          "peer shrink-0 rounded-sm border border-background-200 bg-white ring-offset-white " +
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 " +
             "focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 " +
             "data-[state=checked]:bg-neutral-900 data-[state=checked]:text-neutral-50 " +
-            "dark:border-neutral-800 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300 " +
+            "dark:border-background-800 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300 " +
             "dark:data-[state=checked]:bg-neutral-50 dark:data-[state=checked]:text-neutral-900",
           sizeClasses[size]
         )}
diff --git a/web/src/components/ui/SlideOverModal.tsx b/web/src/components/ui/SlideOverModal.tsx
index 64457360a..76c60236c 100644
--- a/web/src/components/ui/SlideOverModal.tsx
+++ b/web/src/components/ui/SlideOverModal.tsx
@@ -46,7 +46,7 @@ const SlideOverModal = ({
       <div className="absolute inset-0 overflow-hidden">
         {/* Overlay */}
         <div
-          className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+          className="absolute inset-0 bg-neutral-500 bg-opacity-75 transition-opacity"
           onClick={() => onOpenChange(false)}
         ></div>
 
@@ -57,7 +57,7 @@ const SlideOverModal = ({
                 <div className="flex items-start justify-end">
                   <button
                     type="button"
-                    className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                    className="rounded-md bg-white text-neutral-400 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                     onClick={() => onOpenChange(false)}
                   >
                     <span className="sr-only">Close panel</span>
diff --git a/web/src/components/ui/alert.tsx b/web/src/components/ui/alert.tsx
index b8dfe73a6..74b63b270 100644
--- a/web/src/components/ui/alert.tsx
+++ b/web/src/components/ui/alert.tsx
@@ -4,14 +4,14 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border border-neutral-200 p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-neutral-950 dark:border-neutral-800 dark:[&>svg]:text-neutral-50",
+  "relative w-full rounded-lg border border-background-200 p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-neutral-950 dark:border-background-800 dark:[&>svg]:text-neutral-50",
   {
     variants: {
       variant: {
         info: "border-black/50 dark:border-black dark:border-black/50 dark:dark:border-black",
 
         default:
-          "bg-background-50 text-text-darker dark:bg-background-950 dark:text-text",
+          "bg-neutral-50 text-neutral-darker dark:bg-neutral-950 dark:text-text",
         destructive:
           "border-red-500/50 text-red-500 dark:border-red-500 [&>svg]:text-red-500 dark:border-red-900/50 dark:text-red-900 dark:dark:border-red-900 dark:[&>svg]:text-red-900",
       },
diff --git a/web/src/components/ui/badge.tsx b/web/src/components/ui/badge.tsx
index 9ade7c74c..2dc1d17d2 100644
--- a/web/src/components/ui/badge.tsx
+++ b/web/src/components/ui/badge.tsx
@@ -4,36 +4,40 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border border-neutral-200 px-2.5 py-0.5 text-xs font-normal transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 dark:border-neutral-800 dark:focus:ring-neutral-300",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-normal transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 dark:focus:ring-neutral-300",
   {
     variants: {
       variant: {
-        "agent-faded":
-          "border-neutral-200 bg-neutral-100 text-neutral-600 hover:bg-neutral-200",
-        agent:
-          "border-orange-200 bg-orange-50 text-orange-600 hover:bg-orange-75 dark:bg-orange-900 dark:text-neutral-50 dark:hover:bg-orange-850",
-
-        canceled:
-          "border-gray-200 bg-gray-50 text-gray-600 hover:bg-gray-75 dark:bg-gray-900 dark:text-neutral-50 dark:hover:bg-gray-850",
-        orange:
-          "border-orange-200 bg-orange-50 text-orange-600 hover:bg-orange-75 dark:bg-orange-900 dark:text-neutral-50 dark:hover:bg-orange-850",
-        paused:
-          "border-amber-200 bg-amber-50 text-amber-600 hover:bg-amber-75 dark:bg-amber-900 dark:text-neutral-50 dark:hover:bg-amber-850",
-        in_progress:
-          "border-blue-200 bg-blue-50 text-blue-600 hover:bg-blue-75 dark:bg-blue-900 dark:text-neutral-50 dark:hover:bg-blue-850",
-
-        purple:
-          "border-purple-400 bg-purple-50 text-purple-600 hover:bg-purple-75 dark:bg-purple-900 dark:text-neutral-50 dark:hover:bg-purple-850",
-        success:
-          "border-green-200 bg-emerald-50 text-green-600 hover:bg-emerald-75 dark:bg-green-900 dark:text-neutral-50 dark:hover:bg-green-850",
-        default:
-          "border-neutral-200 bg-neutral-50 text-neutral-600 hover:bg-neutral-75 dark:bg-neutral-900 dark:text-neutral-50 dark:hover:bg-neutral-850",
-        secondary:
-          "border-neutral-200 bg-neutral-50 text-neutral-600 hover:bg-neutral-75 dark:bg-neutral-900 dark:text-neutral-50 dark:hover:bg-neutral-850",
-        destructive:
-          "border-red-200 bg-red-50 text-red-600 hover:bg-red-75 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-850",
         outline:
-          "border-neutral-200 bg-neutral-50 text-neutral-600 hover:bg-neutral-75 dark:bg-neutral-900 dark:text-neutral-50 dark:hover:bg-neutral-850",
+          "border-neutral-200 bg-neutral-50 text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-50",
+        purple:
+          "border-purple-200 bg-purple-50 text-purple-700 dark:border-purple-700 dark:bg-purple-900 dark:text-purple-100",
+        public:
+          "border-green-200 bg-green-50 text-green-700 dark:border-green-700 dark:bg-green-900 dark:text-green-100",
+        private:
+          "border-yellow-200 bg-yellow-50 text-yellow-700 dark:border-yellow-600 dark:bg-yellow-700 dark:text-yellow-100",
+        "auto-sync":
+          "border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-100",
+        agent:
+          "border-orange-200 bg-orange-50 text-orange-600 dark:border-orange-800 dark:bg-orange-600/20 dark:text-neutral-200",
+        "agent-faded":
+          "border-neutral-200 bg-neutral-50 text-neutral-600 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50",
+        canceled:
+          "border-gray-200 bg-gray-50 text-gray-600 dark:border-gray-700 dark:bg-gray-900 dark:text-neutral-50",
+        paused:
+          "border-yellow-200 bg-yellow-50 text-yellow-700 dark:border-yellow-600 dark:bg-yellow-700 dark:text-yellow-100",
+        in_progress:
+          "border-blue-200 bg-blue-50 text-blue-600 dark:border-blue-700 dark:bg-blue-900 dark:text-neutral-50",
+        success:
+          "border-green-200 bg-emerald-50 text-green-600 dark:border-green-600 dark:bg-green-900 dark:text-green-50",
+        default:
+          "border-neutral-200 bg-neutral-50 text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-50",
+        secondary:
+          "border-neutral-200 bg-neutral-50 text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-50",
+        destructive:
+          "border-red-200 bg-red-50 text-red-600 dark:border-red-700 dark:bg-red-900 dark:text-neutral-50",
+        not_started:
+          "border-neutral-200 bg-neutral-50 text-neutral-600 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100",
       },
     },
     defaultVariants: {
@@ -45,6 +49,7 @@ const badgeVariants = cva(
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof badgeVariants> {}
+
 function Badge({
   className,
   variant,
@@ -61,18 +66,23 @@ function Badge({
   const sizeClasses = {
     sm: "px-2.5 py-0.5 text-xs",
     md: "px-3 py-1 text-sm",
-    xs: "px-1.5 py-0.25 text-[.5rem]", // Made xs smaller
+    xs: "px-1.5 py-0.25 text-[.5rem]",
   };
 
   return (
     <div
-      className={cn(badgeVariants({ variant }), sizeClasses[size], className)}
+      className={cn(
+        "flex-none inline-flex items-center whitespace-nowrap overflow-hidden",
+        badgeVariants({ variant }),
+        sizeClasses[size],
+        className
+      )}
       {...props}
     >
       {Icon && (
         <Icon
           className={cn(
-            "mr-1",
+            "mr-1 flex-shrink-0",
             size === "sm" ? "h-3 w-3" : size === "xs" ? "h-2 w-2" : "h-4 w-4"
           )}
         />
@@ -80,12 +90,12 @@ function Badge({
       {circle && (
         <div
           className={cn(
-            "mr-2 rounded-full bg-current opacity-80",
+            "mr-2 rounded-full bg-current opacity-80 flex-shrink-0",
             size === "xs" ? "h-2 w-2" : "h-2.5 w-2.5"
           )}
         />
       )}
-      {props.children}
+      <span className="truncate">{props.children}</span>
     </div>
   );
 }
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
index 0daaf7af7..6a6d46630 100644
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@@ -5,54 +5,54 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300",
+  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded text-sm font-medium ring-offset-[#fff] transition-colors focus-visible:outline-none  disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         success:
-          "bg-green-100 text-green-600 hover:bg-green-500/90 dark:bg-blue-500 dark:text-neutral-50 dark:hover:bg-green-900/90",
+          "bg-green-100 text-green-600 hover:bg-green-500/90 dark:bg-green-700 dark:text-green-100 dark:hover:bg-green-600/90",
         "success-reverse":
-          "bg-[#2BAD30] text-white hover:bg-[#45a049] dark:bg-[#2E7D32] dark:text-white dark:hover:bg-[#1B5E20]",
+          "bg-green-600 text-[#fff] hover:bg-green-700 dark:bg-green-700 dark:text-green-100 dark:hover:bg-green-600",
         default:
-          "bg-neutral-900 border-border text-neutral-50 hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90",
+          "bg-neutral-900 border-border text-neutral-50 hover:bg-neutral-900/90 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-neutral-200",
         "default-reverse":
-          "bg-neutral-50 border-border text-neutral-900 hover:bg-neutral-50/90 dark:bg-neutral-900 dark:text-neutral-50 dark:hover:bg-neutral-900/90",
+          "bg-neutral-50 border-border text-neutral-900 hover:bg-neutral-50/90 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-700",
         destructive:
-          "bg-red-500 text-neutral-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/90",
+          "bg-red-500 text-neutral-50 hover:bg-red-500/90 dark:bg-red-700 dark:hover:bg-red-600",
         "destructive-reverse":
-          "bg-neutral-50 text-red-500 hover:bg-neutral-50/90 dark:bg-neutral-50 dark:text-red-900 dark:hover:bg-neutral-50/90",
+          "bg-neutral-50 text-red-500 hover:bg-neutral-50/90 dark:bg-red-100 dark:text-red-700 dark:hover:bg-red-200",
         outline:
-          "border border-neutral-300 bg-white hover:bg-neutral-50 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
+          "border border-neutral-300 bg-[#fff] hover:bg-neutral-50 hover:text-neutral-900 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:hover:text-neutral-50",
         create:
-          "border border-neutral-300 bg-background-50 text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900 transition-colors duration-200 ease-in-out shadow-sm dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-neutral-100",
+          "border border-neutral-300 bg-neutral-50 text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900 transition-colors duration-200 ease-in-out shadow-sm dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-neutral-50",
         "outline-reverse":
-          "border border-neutral-300 bg-neutral-900 hover:bg-neutral-800 hover:text-neutral-50 dark:border-neutral-800 dark:bg-white dark:hover:bg-neutral-50 dark:hover:text-neutral-900",
+          "border border-neutral-300 bg-neutral-900 hover:bg-neutral-800 hover:text-neutral-50 dark:border-neutral-600 dark:bg-neutral-100 dark:hover:bg-neutral-200 dark:hover:text-neutral-900",
         secondary:
-          "bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
+          "bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-700 dark:text-neutral-100 dark:hover:bg-neutral-600",
         "secondary-reverse":
-          "bg-neutral-900 text-neutral-100 hover:bg-neutral-900/80 dark:bg-neutral-50 dark:text-neutral-800 dark:hover:bg-neutral-50/80",
+          "bg-neutral-900 text-neutral-100 hover:bg-neutral-900/80 dark:bg-neutral-200 dark:text-neutral-800 dark:hover:bg-neutral-300",
         ghost:
-          "hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
+          "hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-transparent dark:hover:text-neutral-50",
         "ghost-reverse":
-          "hover:bg-neutral-800 hover:text-neutral-50 dark:hover:bg-neutral-100 dark:hover:text-neutral-900",
-        link: "text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50",
+          "hover:bg-neutral-800 hover:text-neutral-50 dark:hover:bg-neutral-200 dark:hover:text-neutral-900",
+        link: "text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-100",
         "link-reverse":
           "text-neutral-50 underline-offset-4 hover:underline dark:text-neutral-900",
         submit:
-          "bg-green-500 text-inverted hover:bg-green-600/90 dark:bg-neutral-50 dark:text-blue-500 dark:hover:bg-green-100/90",
+          "bg-green-500 text-neutral-50 hover:bg-green-600/90 dark:bg-green-700 dark:hover:bg-green-600",
         "submit-reverse":
-          "bg-neutral-50 text-blue-600 hover:bg-neutral-50/80 dark:bg-neutral-50 dark:text-blue-600 dark:hover:bg-neutral-50/90",
+          "bg-neutral-50 text-blue-600 hover:bg-neutral-50/80 dark:bg-blue-100 dark:text-blue-800 dark:hover:bg-blue-200",
         navigate:
-          "bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700",
+          "bg-blue-500 text-[#fff] hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600",
         "navigate-reverse":
-          "bg-white text-blue-500 hover:bg-blue-50 dark:bg-blue-100 dark:hover:bg-blue-200",
+          "bg-[#fff] text-blue-500 hover:bg-blue-50 dark:bg-blue-100 dark:text-blue-800 dark:hover:bg-blue-200",
         update:
-          "border border-neutral-300 bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
+          "border border-neutral-300 bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-100 dark:hover:bg-neutral-600",
         "update-reverse":
-          "bg-neutral-900 text-neutral-100 hover:bg-neutral-900/80 dark:bg-neutral-50 dark:text-neutral-800 dark:hover:bg-neutral-50/80",
-        next: "bg-neutral-700 text-neutral-50 hover:bg-neutral-700/90 dark:bg-neutral-600 dark:text-neutral-50 dark:hover:bg-neutral-600/90",
+          "bg-neutral-900 text-neutral-100 hover:bg-neutral-900/80 dark:bg-neutral-200 dark:text-neutral-800 dark:hover:bg-neutral-300",
+        next: "bg-neutral-700 text-neutral-50 hover:bg-neutral-700/90 dark:bg-neutral-300 dark:text-neutral-900 dark:hover:bg-neutral-400",
         "next-reverse":
-          "bg-neutral-50 text-neutral-700 hover:bg-neutral-50/90 dark:bg-neutral-50 dark:text-neutral-600 dark:hover:bg-neutral-50/90",
+          "bg-neutral-50 text-neutral-700 hover:bg-neutral-50/90 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700",
       },
       size: {
         default: "h-10 px-4 py-2",
@@ -73,6 +73,13 @@ const buttonVariants = cva(
   }
 );
 
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
@@ -115,12 +122,14 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
     if (tooltip) {
       return (
-        <div className="relative group">
-          {button}
-          <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-neutral-800 text-white text-sm rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
-            {tooltip}
-          </div>
-        </div>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>{button}</TooltipTrigger>
+            <TooltipContent showTick={true}>
+              <p>{tooltip}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       );
     }
 
diff --git a/web/src/components/ui/calendar.tsx b/web/src/components/ui/calendar.tsx
index 6e3854d97..b0f17124c 100644
--- a/web/src/components/ui/calendar.tsx
+++ b/web/src/components/ui/calendar.tsx
@@ -34,33 +34,33 @@ function Calendar({
         table: "w-full border-collapse space-y-1",
         head_row: "flex",
         head_cell:
-          "text-calendar-text-muted rounded-md w-9 font-normal text-[0.8rem] dark:text-calendar-text-muted-dark",
+          "text-neutral-500 rounded-md w-9 font-normal text-[0.8rem] dark:text-neutral-400",
         row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-calendar-bg-outside-selected [&:has([aria-selected])]:bg-calendar-bg-selected first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 dark:[&:has([aria-selected].day-outside)]:bg-calendar-bg-outside-selected-dark dark:[&:has([aria-selected])]:bg-calendar-bg-selected-dark",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-neutral-100/50 [&:has([aria-selected])]:bg-neutral-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 dark:[&:has([aria-selected].day-outside)]:bg-neutral-800/50 dark:[&:has([aria-selected])]:bg-neutral-800",
         day: cn(
           buttonVariants({ variant: "ghost" }),
           "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
         ),
-        day_range_end:
-          "day-range-end bg-calendar-range-end !text-calendar-text-end",
+        day_range_end: "day-range-end",
         day_selected:
-          "bg text-calendar-text-selected hover:bg-calendar-bg-selected hover:text-calendar-text-selected  dark:bg-calendar-bg-selected-dark dark:text-calendar-text-selected-dark dark:hover:bg-calendar-bg-selected-dark dark:hover:text-calendar-text-selected-dark ",
+          "bg-neutral-900 text-neutral-50 hover:bg-neutral-900 hover:text-neutral-50 focus:bg-neutral-900 focus:text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50 dark:hover:text-neutral-900 dark:focus:bg-neutral-50 dark:focus:text-neutral-900",
         day_today:
-          "bg-calendar-today-bg text-calendar-today-text dark:bg-calendar-today-bg-dark dark:text-calendar-today-text-dark",
+          "bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-50",
         day_outside:
-          "day-outside text-calendar-text-muted opacity-50 aria-selected:bg-calendar-bg-outside-selected aria-selected:text-calendar-text-muted aria-selected:opacity-30 dark:text-calendar-text-muted-dark dark:aria-selected:bg-calendar-bg-outside-selected-dark dark:aria-selected:text-calendar-text-muted-dark",
-        day_disabled:
-          "text-calendar-text-muted opacity-50 dark:text-calendar-text-muted-dark",
+          "day-outside text-neutral-500 aria-selected:bg-neutral-100/50 aria-selected:text-neutral-500 dark:text-neutral-400 dark:aria-selected:bg-neutral-800/50 dark:aria-selected:text-neutral-400",
+        day_disabled: "text-neutral-500 opacity-50 dark:text-neutral-400",
         day_range_middle:
-          "aria-selected:bg-calendar-range-middle aria-selected:text-calendar-text-in-range dark:aria-selected:bg-calendar-range-middle-dark dark:aria-selected:text-calendar-text-in-range-dark",
+          "aria-selected:bg-neutral-100 aria-selected:text-neutral-900 dark:aria-selected:bg-neutral-800 dark:aria-selected:text-neutral-50",
         day_hidden: "invisible",
-        day_range_start:
-          "bg-calendar-background-selected ring-calendar-ring-selected ring text-text-900",
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
+        ),
       }}
       {...props}
     />
diff --git a/web/src/components/ui/callout.tsx b/web/src/components/ui/callout.tsx
index 5b45aab72..5ccd3d6b7 100644
--- a/web/src/components/ui/callout.tsx
+++ b/web/src/components/ui/callout.tsx
@@ -6,7 +6,6 @@ interface CalloutProps {
   type?: "default" | "warning" | "danger" | "notice";
   className?: string;
 }
-
 export function Callout({
   children,
   icon,
@@ -21,9 +20,12 @@ export function Callout({
         "my-6 flex items-start rounded-md border border-l-4 p-4",
         className,
         {
-          "border-rose-300 bg-rose-50": type === "danger",
-          "border-amber-300 bg-amber-50": type === "warning",
-          "border-sky-300 bg-sky-50": type === "notice",
+          "border-rose-300 bg-rose-50 dark:border-rose-500 dark:bg-rose-950/50":
+            type === "danger",
+          "border-amber-300 bg-amber-50 dark:border-amber-700 dark:bg-amber-900/30":
+            type === "warning",
+          "border-sky-300 bg-sky-50 dark:border-sky-500 dark:bg-sky-950/50":
+            type === "notice",
         }
       )}
       {...props}
@@ -31,9 +33,11 @@ export function Callout({
       {icon && <span className="mr-4 text-2xl">{icon}</span>}
       <div className="flex-1">
         {title && (
-          <div className="font-medium mb-1 flex items-center">{title}</div>
+          <div className="font-medium mb-1 flex items-center dark:text-[#fff]">
+            {title}
+          </div>
         )}
-        {children}
+        <div className="dark:text-gray-300">{children}</div>
       </div>
     </div>
   );
diff --git a/web/src/components/ui/card.tsx b/web/src/components/ui/card.tsx
index 46a47e15c..7b1399b60 100644
--- a/web/src/components/ui/card.tsx
+++ b/web/src/components/ui/card.tsx
@@ -30,10 +30,10 @@ const CardHeader = React.forwardRef<
 CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <h3
+  <div
     ref={ref}
     className={cn(
       "text-2xl font-semibold leading-none tracking-tight",
@@ -45,10 +45,10 @@ const CardTitle = React.forwardRef<
 CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <p
+  <div
     ref={ref}
     className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}
     {...props}
diff --git a/web/src/components/ui/chart.tsx b/web/src/components/ui/chart.tsx
index deb443f62..1531fb132 100644
--- a/web/src/components/ui/chart.tsx
+++ b/web/src/components/ui/chart.tsx
@@ -179,7 +179,7 @@ const ChartTooltipContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-neutral-200 border-neutral-200/50 bg-white px-2.5 py-1.5 text-xs shadow-xl dark:border-neutral-800 dark:border-neutral-800/50 dark:bg-neutral-950",
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-background-200 border-background-200/50 bg-white px-2.5 py-1.5 text-xs shadow-xl dark:border-background-800 dark:border-background-800/50 dark:bg-neutral-950",
           className
         )}
       >
diff --git a/web/src/components/ui/checkbox.tsx b/web/src/components/ui/checkbox.tsx
index 82fa21a79..295b7364e 100644
--- a/web/src/components/ui/checkbox.tsx
+++ b/web/src/components/ui/checkbox.tsx
@@ -26,11 +26,11 @@ export const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Root
       ref={ref}
       className={cn(
-        "peer shrink-0 rounded-sm border border-neutral-200 bg-white ring-offset-white " +
+        "peer shrink-0 rounded-sm border border-background-200 bg-white ring-offset-white " +
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 " +
           "focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 " +
           "data-[state=checked]:bg-neutral-900 data-[state=checked]:text-neutral-50 " +
-          "dark:border-neutral-800 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300 " +
+          "dark:border-background-800 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300 " +
           "dark:data-[state=checked]:bg-neutral-50 dark:data-[state=checked]:text-neutral-900",
         sizeClasses[size],
         className
diff --git a/web/src/components/ui/dialog.tsx b/web/src/components/ui/dialog.tsx
index f8439aa9b..c35990af7 100644
--- a/web/src/components/ui/dialog.tsx
+++ b/web/src/components/ui/dialog.tsx
@@ -21,25 +21,26 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/50  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-neutral-950/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
   />
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
     hideCloseIcon?: boolean;
   }
->(({ className, children, hideCloseIcon = false, ...props }, ref) => (
+>(({ className, children, hideCloseIcon, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-neutral-50 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-900",
         className
       )}
       {...props}
diff --git a/web/src/components/ui/drawer.tsx b/web/src/components/ui/drawer.tsx
index 600f949cf..d5d4cdd67 100644
--- a/web/src/components/ui/drawer.tsx
+++ b/web/src/components/ui/drawer.tsx
@@ -43,7 +43,7 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950",
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border border-background-200 bg-white dark:border-background-800 dark:bg-neutral-950",
         className
       )}
       {...props}
diff --git a/web/src/components/ui/fully_wrapped_tabs.tsx b/web/src/components/ui/fully_wrapped_tabs.tsx
index 49d2586f6..6b85037d3 100644
--- a/web/src/components/ui/fully_wrapped_tabs.tsx
+++ b/web/src/components/ui/fully_wrapped_tabs.tsx
@@ -19,10 +19,10 @@ const TabsList = React.forwardRef<
         "flex w-full",
         "items-center",
         "justify-center",
-        "bg-background-150",
-        "text-text-500",
-        "dark:bg-background-800",
-        "dark:text-text-400",
+        "bg-neutral-150",
+        "text-neutral-500",
+        "dark:bg-neutral-800",
+        "dark:text-neutral-400",
         "rounded-t-lg",
       ].join(" "),
       className
diff --git a/web/src/components/ui/input.tsx b/web/src/components/ui/input.tsx
index bc891a3a8..e69fd4666 100644
--- a/web/src/components/ui/input.tsx
+++ b/web/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-10 w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-base ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-neutral-950 placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-neutral-800 dark:bg-neutral-950 dark:ring-offset-neutral-950 dark:file:text-neutral-50 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300",
           className
         )}
         ref={ref}
diff --git a/web/src/components/ui/popover.tsx b/web/src/components/ui/popover.tsx
index 10c383032..9b31c3a22 100644
--- a/web/src/components/ui/popover.tsx
+++ b/web/src/components/ui/popover.tsx
@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border border-neutral-200 bg-white p-4 text-neutral-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+        "z-[1000000] w-72 rounded-md border border-neutral-200 bg-white p-4 text-neutral-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
         className
       )}
       {...props}
diff --git a/web/src/components/ui/radio-group.tsx b/web/src/components/ui/radio-group.tsx
index 5b736eb69..5aac65d13 100644
--- a/web/src/components/ui/radio-group.tsx
+++ b/web/src/components/ui/radio-group.tsx
@@ -28,7 +28,7 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square h-3.5 w-3.5 rounded-full border border-neutral-200 border-neutral-900 text-neutral-900 ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-800 dark:border-neutral-50 dark:text-neutral-50 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300",
+        "aspect-square h-3.5 w-3.5 rounded-full border border-background-200 border-background-900 text-neutral-900 ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-background-800 dark:border-background-50 dark:text-neutral-50 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300",
         className
       )}
       {...props}
diff --git a/web/src/components/ui/select.tsx b/web/src/components/ui/select.tsx
index 83c406fa6..a17f5effc 100644
--- a/web/src/components/ui/select.tsx
+++ b/web/src/components/ui/select.tsx
@@ -5,6 +5,7 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 
 import { cn } from "@/lib/utils";
+import { FC } from "react";
 
 const Select = SelectPrimitive.Root;
 
@@ -19,7 +20,8 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 dark:border-neutral-800 dark:bg-neutral-950 dark:ring-offset-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-neutral-300",
+      `flex h-10 w-full items-center justify-between rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 
+      [&>span]:line-clamp-1 dark:border-neutral-700 dark:bg-neutral-900 dark:ring-offset-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-neutral-300`,
       className
     )}
     {...props}
@@ -39,8 +41,7 @@ const SelectScrollUpButton = React.forwardRef<
   <SelectPrimitive.ScrollUpButton
     ref={ref}
     className={cn(
-      "absolute top-0 left-0 right-0 z-10 flex cursor-default items-center justify-center h-8",
-      "bg-gradient-to-b from-white to-transparent dark:from-neutral-950 dark:to-transparent",
+      "flex cursor-default items-center justify-center py-1",
       className
     )}
     {...props}
@@ -57,8 +58,7 @@ const SelectScrollDownButton = React.forwardRef<
   <SelectPrimitive.ScrollDownButton
     ref={ref}
     className={cn(
-      "absolute bottom-0 left-0 right-0 z-10 flex cursor-default items-center justify-center h-8",
-      "bg-gradient-to-t from-white to-transparent dark:from-neutral-950 dark:to-transparent",
+      "flex cursor-default items-center justify-center py-1",
       className
     )}
     {...props}
@@ -68,6 +68,7 @@ const SelectScrollDownButton = React.forwardRef<
 ));
 SelectScrollDownButton.displayName =
   SelectPrimitive.ScrollDownButton.displayName;
+
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
@@ -78,7 +79,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white text-neutral-950 shadow-md dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white text-neutral-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-50",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
@@ -89,7 +90,7 @@ const SelectContent = React.forwardRef<
       <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
-          "relative p-1",
+          "p-1",
           position === "popper" &&
             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
         )}
@@ -117,22 +118,32 @@ SelectLabel.displayName = SelectPrimitive.Label.displayName;
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
-    icon?: React.ElementType;
-    selected?: boolean;
     hideCheck?: boolean;
+    icon?:
+      | React.ReactNode
+      | FC<{ size?: number | undefined; className?: string | undefined }>;
+    selected?: boolean;
   }
->(({ className, children, icon: Icon, selected, hideCheck, ...props }, ref) => (
+>(({ className, children, hideCheck, icon, selected, ...props }, ref) => (
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
       className
     )}
     {...props}
   >
-    {!selected && Icon && (
+    {icon && (
       <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-        <Icon className="h-4 w-4" />
+        {typeof icon === "function" ? icon({ size: 16, className: "" }) : icon}
+      </span>
+    )}
+
+    {!hideCheck && selected && (
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <Check className="h-4 w-4" />
+        </SelectPrimitive.ItemIndicator>
       </span>
     )}
 
diff --git a/web/src/components/ui/slider.tsx b/web/src/components/ui/slider.tsx
index 0f8d16f5f..c21dfb0f1 100644
--- a/web/src/components/ui/slider.tsx
+++ b/web/src/components/ui/slider.tsx
@@ -20,7 +20,7 @@ const Slider = React.forwardRef<
     <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-neutral-100 dark:bg-neutral-800">
       <SliderPrimitive.Range className="absolute h-full bg-neutral-900 dark:bg-neutral-50" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-3 w-3 rounded-full border border-neutral-900 bg-white ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-50 dark:bg-neutral-950 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300" />
+    <SliderPrimitive.Thumb className="block h-3 w-3 rounded-full border border-background-900 bg-white ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset disabled:pointer-events-none disabled:opacity-50 dark:border-background-50 dark:bg-neutral-950 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300" />
   </SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
diff --git a/web/src/components/ui/switch.tsx b/web/src/components/ui/switch.tsx
index 36c3cee7b..852d55f6d 100644
--- a/web/src/components/ui/switch.tsx
+++ b/web/src/components/ui/switch.tsx
@@ -44,8 +44,8 @@ export const Switch = React.forwardRef<
           "focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 " +
           "data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200 " +
           "dark:focus-visible:ring-neutral-300 dark:focus-visible:ring-offset-neutral-950 " +
-          "dark:data-[state=checked]:bg-neutral-50 dark:data-[state=unchecked]:bg-neutral-800",
-        sizeClasses[size],
+          "dark:data-[state=checked]:bg-neutral-200 dark:data-[state=unchecked]:bg-neutral-700 " +
+          sizeClasses[size],
         className
       )}
       {...props}
@@ -63,7 +63,7 @@ export const Switch = React.forwardRef<
   );
 });
 
-Switch.displayName = "Switch";
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
 interface SwitchFieldProps extends Omit<BaseSwitchProps, "checked"> {
   name: string;
diff --git a/web/src/components/ui/table.tsx b/web/src/components/ui/table.tsx
index 25756a80c..b6614f952 100644
--- a/web/src/components/ui/table.tsx
+++ b/web/src/components/ui/table.tsx
@@ -53,12 +53,14 @@ TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
+  React.HTMLAttributes<HTMLTableRowElement> & { noHover?: boolean }
+>(({ className, noHover, ...props }, ref) => (
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-neutral-100/50 data-[state=selected]:bg-neutral-100 dark:hover:bg-neutral-800/50 dark:data-[state=selected]:bg-neutral-800",
+      `border-b transition-colors  data-[state=selected]:bg-neutral-100 dark:data-[state=selected]:bg-neutral-800 ${
+        noHover ? "" : "dark:hover:bg-neutral-800/80 hover:bg-neutral-100/50"
+      }`,
       className
     )}
     {...props}
@@ -73,7 +75,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-neutral-800 [&:has([role=checkbox])]:pr-0 dark:text-neutral-400",
+      "h-12 px-4 text-left align-middle font-medium text-neutral-500 [&:has([role=checkbox])]:pr-0 dark:text-neutral-400",
       className
     )}
     {...props}
diff --git a/web/src/components/ui/textarea.tsx b/web/src/components/ui/textarea.tsx
index 41ba48b38..3f01d8eb2 100644
--- a/web/src/components/ui/textarea.tsx
+++ b/web/src/components/ui/textarea.tsx
@@ -16,7 +16,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             "w-full",
             "rounded-md",
             "border",
-            "border-neutral-200",
+            "border-background-200",
             "bg-white",
             "px-3",
             "py-2",
@@ -29,11 +29,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             // "focus-visible:ring-offset-2",
             "disabled:cursor-not-allowed",
             "disabled:opacity-50",
-            "dark:border-neutral-800",
-            "dark:bg-neutral-950",
-            "dark:ring-offset-neutral-950",
-            "dark:placeholder:text-neutral-400",
-            "dark:focus-visible:ring-neutral-300",
           ].join(" "),
           className
         )}
diff --git a/web/src/components/ui/title.tsx b/web/src/components/ui/title.tsx
index 61853cf62..1f673e052 100644
--- a/web/src/components/ui/title.tsx
+++ b/web/src/components/ui/title.tsx
@@ -12,7 +12,7 @@ export default function Title({
   return (
     <h1
       className={cn(
-        "text-lg text-text-800 font-medium",
+        "text-lg text-neutral-800 dark:text-neutral-200 font-medium",
         size === "lg" && "text-2xl",
         size === "md" && "text-xl",
         size === "sm" && "text-lg",
diff --git a/web/src/components/ui/tooltip.tsx b/web/src/components/ui/tooltip.tsx
index f9bb494c6..0c04f5f0d 100644
--- a/web/src/components/ui/tooltip.tsx
+++ b/web/src/components/ui/tooltip.tsx
@@ -22,22 +22,54 @@ const TooltipContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
     width?: string;
     backgroundColor?: string;
+    showTick?: boolean;
+    tickSide?: "top" | "bottom" | "left" | "right";
   }
->(({ className, sideOffset = 4, width, backgroundColor, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      `z-50 overflow-hidden rounded-md text-white  ${
-        backgroundColor || "bg-black"
-      }
-      ${width || "max-w-sm"}
-       px-2 py-1.5 text-xs shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 `,
-      className
-    )}
-    {...props}
-  />
-));
+>(
+  (
+    {
+      className,
+      sideOffset = 4,
+      width,
+      backgroundColor,
+      showTick = false,
+      tickSide = "bottom",
+      ...props
+    },
+    ref
+  ) => (
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        `z-[100] overflow-hidden rounded-md text-neutral-50 ${
+          backgroundColor ||
+          "bg-neutral-900 dark:bg-neutral-200 dark:text-neutral-900"
+        }
+      ${width || "max-w-40"}
+      
+       px-2 py-1.5 text-xs shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2`,
+        className
+      )}
+      {...props}
+    >
+      {showTick && (
+        <div
+          className={`absolute w-2 h-2 bg-inherit rotate-45 ${
+            tickSide === "top"
+              ? "-top-1 left-1/2 -translate-x-1/2"
+              : tickSide === "bottom"
+                ? "-bottom-1 left-1/2 -translate-x-1/2"
+                : tickSide === "left"
+                  ? "-left-1 top-1/2 -translate-y-1/2"
+                  : "-right-1 top-1/2 -translate-y-1/2"
+          }`}
+        />
+      )}
+      {props.children}
+    </TooltipPrimitive.Content>
+  )
+);
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/web/tailwind-themes/tailwind.config.js b/web/tailwind-themes/tailwind.config.js
index 76c7e1295..931f4a8f0 100644
--- a/web/tailwind-themes/tailwind.config.js
+++ b/web/tailwind-themes/tailwind.config.js
@@ -44,7 +44,7 @@ module.exports = {
       },
 
       gradientColorStops: {
-        "neutral-10": "#e5e5e5 5%",
+        "neutral-10": "var(--neutral-10) 5%",
       },
       screens: {
         "2xl": "1420px",
@@ -79,7 +79,7 @@ module.exports = {
       },
       colors: {
         // code styling
-        "code-bg": "var(--black)",
+        "code-bg": "#000",
         "code-text": "var(--code-text)",
         "token-comment": "var(--token-comment)",
         "token-punctuation": "var(--token-punctuation)",
@@ -91,167 +91,166 @@ module.exports = {
         "token-attr-name": "var(--token-attr-name)",
         "non-selectable": "var(--non-selectable)",
 
-        "gray-background": "#F4F2ED",
+        "gray-background": "var(--gray-background)",
+
+        "new-background": "var(--new-background)",
+        "new-background-light": "var(--new-background-light)",
+        warning: "hsl(var(--warning))",
+        "warning-foreground": "hsl(var(--warning-foreground))",
+
+        "input-text": "var(--input-text)",
 
         // background
-        background: "#FEFCFA",
-        "background-dark": "#F1EEE8",
-        "background-100": "var(--background-100)",
-        "background-125": "var(--background-125)",
-        "background-150": "var(--background-150)",
-        "background-200": "var(--background-200)",
-        "background-300": "var(--background-300)",
-        "background-400": "var(--background-400)",
-        "background-500": "var(--background-500)",
-        "background-600": "var(--background-600)",
-        "background-700": "var(--background-700)",
-        "background-800": "var(--background-800)",
-        "background-900": "var(--background-900)",
+        background: "var(--background-input-background)",
+        "input-border": "var(--input-border)",
+        "input-background": "var(--input-background)",
+        "input-option": "var(--input-option)",
+        "input-option-hover": "var(--input-option-hover)",
+        "accent-background": "var(--accent-background)",
+        "accent-background-hovered": "var(--accent-background-hovered)",
+        "background-dark": "var(--off-white)",
+        "background-100": "var(--neutral-100-border-light)",
+        "background-125": "var(--neutral-125)",
+        "background-150": "var(--neutral-150)",
+        "background-200": "var(--neutral-200-border)",
+        "background-300": "var(--neutral-300-border-medium)",
+        "background-400": "var(--neutral-400-border-strong)",
+        "background-500": "var(--neutral-500)",
+        "background-600": "var(--neutral-600-border-dark)",
+        "background-700": "var(--neutral-700)",
+        "background-800": "var(--neutral-800)",
+        "background-900": "var(--neutral-900)",
+
+        "gray-background": "var(--neutral-100-border-light)",
+        "gray-background-dark": "var(--neutral-200-border)",
+        "gray-background-100": "var(--neutral-100-border-light)",
+        "gray-background-125": "var(--neutral-125)",
+        "gray-background-150": "var(--neutral-150)",
+        "gray-background-200": "var(--neutral-200-border)",
+        "gray-background-300": "var(--neutral-300-border-medium)",
+        "gray-background-400": "var(--neutral-400-border-strong)",
+        "gray-background-500": "var(--neutral-500)",
+        "gray-background-600": "var(--neutral-600-border-dark)",
+        "gray-background-700": "var(--neutral-700)",
+        "gray-background-800": "var(--neutral-800)",
+        "gray-background-900": "var(--neutral-900)",
+
+        "text-history-sidebar-button": "var(--text-800)",
 
         "background-inverted": "var(--background-inverted)",
         "background-emphasis": "var(--background-emphasis)",
         "background-strong": "var(--background-strong)",
-        "background-search": "var(--white)",
+        "background-search": "var(--white-card-popover)",
 
-        "background-history-sidebar-button-hover": "var(--background-200)",
-        "text-history-sidebar-button": "var(--text-800)",
-        "divider-history-sidebar-bar": "var(--border)",
+        "background-history-sidebar-button-hover": "var(--neutral-200-border)",
+        "divider-history-sidebar-bar": "var(--neutral-200-border)",
         "text-mobile-sidebar": "var(--text-800)",
-        "background-search-filter": "var(--background-100)",
-        "background-search-filter-dropdown": "var(--background-100)",
+        "background-search-filter": "var(--neutral-100-border-light)",
+        "background-search-filter-dropdown": "var(--neutral-100-border-light)",
+        "tw-prose-bold": "var(--text-800)",
 
-        "user-bubble": "var(--user-bubble)",
+        "user-bubble": "var(--off-white)",
 
         // colors for sidebar in chat, search, and manage settings
 
-        "background-chatbar": "#F5F3EE",
+        "background-chatbar": "var(--background-chatbar-sidebar)",
         "text-sidebar": "var(--text-500)",
 
-        "toggled-background": "var(--background-400)",
-        "untoggled-background": "var(--background-200)",
-        "background-starter-message": "var(--background)",
-        "background-starter-message-hover": "var(--background-100)",
+        "toggled-background": "var(--neutral-400-border-strong)",
+        "untoggled-background": "var(--neutral-200-border)",
+        "background-starter-message": "var(--background-input-background)",
+        "background-starter-message-hover": "var(--neutral-100-border-light)",
 
         "text-sidebar-toggled-header": "var(--text-800)",
         "text-sidebar-header": "var(--text-800)",
 
-        "background-back-button": "var(--background-200)",
-        "text-back-button": "var(--text-800)",
+        "background-back-button": "var(--neutral-200-border)",
+        "text-back-button": "var(--neutral-800)",
 
         // Settings
-        "text-sidebar-subtle": "var(--text-500)",
-        "icon-settings-sidebar": "var(--text-600)",
-        "text-settings-sidebar": "var(--text-600)",
-        "text-settings-sidebar-strong": "var(--text-900)",
-        "background-settings-hover": "var(--background-200)",
+        "text-sidebar-subtle": "var(--neutral-500)",
+        "icon-settings-sidebar": "var(--neutral-600-border-dark)",
+        "text-settings-sidebar": "var(--neutral-600-border-dark)",
+        "text-settings-sidebar-strong": "var(--neutral-900)",
+        "background-settings-hover": "var(--neutral-200-border)",
 
         "text-application-toggled": "var(--text-800)",
         "text-application-untoggled": "var(--text-500)",
         "text-application-untoggled-hover": "var(--text-700)",
 
-        "background-chat-hover": "#E6E3DD",
-        "background-chat-selected": "#E6E3DD",
+        "background-chat-hover": "var(--background-chat-hover-selected)",
+        "background-chat-selected": "var(--background-chat-hover-selected)",
+        black: "var(--black)",
+        white: "var(--white-card-popover)",
 
         // Background for chat messages (user bubbles)
-        user: "var(--user-bubble)",
+        user: "var(--off-white)",
 
-        "userdropdown-background": "var(--background-800)",
-        "text-mobile-sidebar-toggled": "var(--text-800)",
-        "text-mobile-sidebar-untoggled": "var(--text-500)",
-        "text-editing-message": "var(--text-800)",
-        "background-sidebar": "#F5F3EE",
-        "background-search-filter": "var(--background-100)",
+        "userdropdown-background": "var(--neutral-800)",
+        "text-mobile-sidebar-toggled": "var(--neutral-800)",
+        "text-mobile-sidebar-untoggled": "var(--neutral-500)",
+        "text-editing-message": "var(--neutral-800)",
+        "background-sidebar": "var(--background-chatbar-sidebar)",
+        "background-search-filter": "var(--neutral-100-border-light)",
         "background-search-filter-dropdown": "var(--background-hover)",
 
-        "background-toggle": "var(--background-100)",
+        "background-toggle": "var(--neutral-100-border-light)",
 
         // Colors for the search toggle buttons
         "background-agentic-toggled": "var(--light-success)",
         "background-agentic-untoggled": "var(--undo)",
-        "text-agentic-toggled": "var(--text-800)",
-        "text-agentic-untoggled": "var(--white)",
-        "text-chatbar-subtle": "#9c9c96",
-        "text-chatbar": "var(--text-800)",
+        "text-agentic-toggled": "var(--neutral-800)",
+        "text-agentic-untoggled": "var(--white-card-popover)",
+        "text-chatbar-subtle": "var(--text-chatbar-subtle)",
+        "text-chatbar": "var(--neutral-800)",
 
         // Color for the star indicator on high quality search results.
-        "star-indicator": "var(--background-100)",
+        "star-indicator": "var(--neutral-100-border-light)",
 
         // Backgrounds for submit buttons on search and chat
-        "submit-background": "var(--background-800)",
-        "disabled-submit-background": "var(--background-400)",
+        "submit-background": "var(--neutral-800)",
+        "disabled-submit-background": "var(--neutral-400-border-strong)",
 
-        input: "var(--white)",
+        input: "var(--white-card-popover)",
 
-        text: "#000000",
-        "text-darker": "#282828",
-        "text-dark": "#4A4A4A",
-        "text-muted": "#6C6C6B",
-        "text-gray": "#6c6c6c",
+        text: "var(--neutral-900)",
+        "text-darker": "var(--text-darker)",
+        "text-dark": "var(--text-dark)",
+        "sidebar-border": "var(--neutral-200-border)",
+        "text-gray": "var(--text-gray)",
 
-        // background: "#F1EEE8",
+        "text-light": "var(--text-light)",
 
-        "text-light": "#9c9c96",
-
-        "text-50": "var(--text-50)",
-        "text-100": "var(--text-100)",
-        "text-200": "var(--text-200)",
-        "text-300": "var(--text-300)",
-        "text-400": "var(--text-400)",
-        "text-500": "var(--text-500)",
-        "text-600": "var(--text-600)",
-        "text-700": "var(--text-700)",
-        "text-800": "var(--text-800)",
-        "text-900": "var(--text-900)",
-        "text-950": "var(--text-950)",
-        // Light mode
-        // Light mode
-        "calendar-bg-selected": "var(--background-800)",
-        "calendar-bg-outside-selected": "var(--background-200)",
-        "calendar-text-muted": "var(--text-400)",
-        "calendar-text-selected": "var(--white)",
-        "calendar-range-middle": "var(--neutral-800)",
-        "calendar-range-end": "var(--white)",
-        "calendar-text-in-range": "var(--text-200)",
-        "calendar-text-end": "var(--text-900)",
-
-        // Dark mode
-        "calendar-bg-outside-selected-dark": "var(--background-700)",
-        "calendar-text-muted-dark": "var(--text-500)",
-        "calendar-text-selected-dark": "var(--white)",
-        "calendar-range-middle-dark": "var(--background-800)",
-        "calendar-text-in-range-dark": "var(--text-200)",
-
-        // Hover effects
-        "calendar-hover-bg": "var(--background-200)",
-        "calendar-hover-bg-dark": "var(--background-700)",
-        "calendar-hover-text": "var(--text-800)",
-        "calendar-hover-text-dark": "var(--text-200)",
-
-        // Today's date
-        "calendar-today-bg": "var(--background-100)",
-        "calendar-today-bg-dark": "var(--background-800)",
-        "calendar-today-text": "var(--text-800)",
-        "calendar-today-text-dark": "var(--text-200)",
-        "calendar-background-selected": "var(--white)",
-        "calendar-ring-selected": "var(--background-900)",
+        "text-50": "var(--neutral-50)",
+        "text-100": "var(--neutral-100-border-light)",
+        "text-200": "var(--neutral-200-border)",
+        "text-300": "var(--neutral-300-border-medium)",
+        "text-400": "var(--neutral-400-border-strong)",
+        "text-500": "var(--neutral-500)",
+        "text-600": "var(--neutral-600-border-dark)",
+        "text-700": "var(--neutral-700)",
+        "text-800": "var(--neutral-800)",
+        "text-900": "var(--neutral-900)",
+        "text-950": "var(--neutral-950)",
+        "text-muted": "var(--p)",
 
         "user-text": "var(--text-800)",
 
         description: "var(--text-400)",
-        subtle: "var(--text-500)",
+        subtle: "var(--neutral-600-border-dark)",
         default: "var(--text-600)",
         emphasis: "var(--text-700)",
         strong: "var(--text-900)",
 
         // borders
-        border: "var(--border)",
-        "border-light": "var(--border-light)",
-        "border-medium": "var(--border-medium)",
-        "border-strong": "var(--border-strong)",
-        "border-dark": "var(--border-dark)",
-        "non-selectable-border": "#f5c2c7",
+        border: "var(--neutral-200-border)",
+        "border-light": "var(--neutral-100-border-light)",
+        "border-medium": "var(--neutral-300-border-medium)",
+        "border-strong": "var(--neutral-400-border-strong)",
+        "border-dark": "var(--neutral-600-border-dark)",
+        "non-selectable-border": "var(--non-selectable-border)",
 
-        inverted: "var(--white)",
+        inverted: "var(--white-card-popover)",
         link: "var(--link)",
         "link-hover": "var(--link-hover)",
 
@@ -260,20 +259,16 @@ module.exports = {
         success: "var(--success)",
         alert: "var(--alert)",
         accent: "var(--accent)",
-        // -        agent: "#6C6AD6",
-        "agent-sidebar": "#BE5D0E",
-        agent: "#E47011",
-        // agent: "#FE8B09",
-
-        // agent: "#6C6AD6",
-        // agent: "#FE8B09",
+        "agent-sidebar": "var(--agent-sidebar)",
+        agent: "var(--agent)",
+        "lighter-agent": "var(--lighter-agent)",
 
         // hover
-        "hover-light": "#F1EEE8",
-        "hover-lightish": "var(--background-125)",
+        "hover-light": "var(--hover-light)",
+        "hover-lightish": "var(--neutral-125)",
 
-        hover: "#E6E3DD",
-        "hover-emphasis": "var(--background-300)",
+        hover: "var(--hover)",
+        "hover-emphasis": "var(--neutral-300-border-medium)",
         "accent-hover": "var(--accent-hover)",
 
         // keyword highlighting
@@ -302,21 +297,21 @@ module.exports = {
             faint: "var(--tremor-brand-faint)",
             muted: "var(--tremor-brand-muted)",
             subtle: "var(--tremor-brand-subtle)",
-            DEFAULT: "#3b82f6", // blue-500
+            DEFAULT: "var(--tremor-brand-default)",
             emphasis: "var(--tremor-brand-emphasis)",
             inverted: "var(--tremor-brand-inverted)",
           },
           background: {
             muted: "var(--tremor-background-muted)",
             subtle: "var(--tremor-background-subtle)",
-            DEFAULT: "#ffffff", // white
+            DEFAULT: "var(--tremor-background-default)",
             emphasis: "var(--tremor-background-emphasis)",
           },
           border: {
-            DEFAULT: "#e5e7eb", // gray-200
+            DEFAULT: "var(--tremor-border-default)",
           },
           ring: {
-            DEFAULT: "#e5e7eb", // gray-200
+            DEFAULT: "var(--tremor-ring-default)",
           },
           content: {
             subtle: "var(--tremor-content-subtle)",
@@ -332,7 +327,7 @@ module.exports = {
             faint: "var(--dark-tremor-brand-faint)",
             muted: "var(--dark-tremor-brand-muted)",
             subtle: "var(--dark-tremor-brand-subtle)",
-            DEFAULT: "#3b82f6", // blue-500
+            DEFAULT: "var(--dark-tremor-brand-default)",
             emphasis: "var(--dark-tremor-brand-emphasis)",
             inverted: "var(--dark-tremor-brand-inverted)",
           },
@@ -343,10 +338,10 @@ module.exports = {
             emphasis: "var(--dark-tremor-background-emphasis)",
           },
           border: {
-            DEFAULT: "#1f2937", // gray-800
+            DEFAULT: "var(--dark-tremor-border-default)",
           },
           ring: {
-            DEFAULT: "#1f2937", // gray-800
+            DEFAULT: "var(--dark-tremor-ring-default)",
           },
           content: {
             subtle: "var(--dark-tremor-content-subtle)",
@@ -356,6 +351,7 @@ module.exports = {
             inverted: "var(--dark-tremor-content-inverted)",
           },
         },
+        foreground: "var(--foreground)",
       },
       boxShadow: {
         // light
@@ -393,36 +389,36 @@ module.exports = {
       },
       calendar: {
         // Light mode
-        "bg-selected": "#4B5563",
-        "bg-outside-selected": "rgba(75, 85, 99, 0.2)",
-        "text-muted": "#6B7280",
-        "text-selected": "#FFFFFF",
-        "range-start": "#000000",
-        "range-middle": "#F3F4F6",
-        "range-end": "#000000",
-        "text-in-range": "#1F2937",
+        "bg-selected": "var(--calendar-bg-selected)",
+        "bg-outside-selected": "var(--calendar-bg-outside-selected)",
+        "text-muted": "var(--calendar-text-muted)",
+        "text-selected": "var(--calendar-text-selected)",
+        "range-start": "var(--calendar-range-start)",
+        "range-middle": "var(--calendar-range-middle)",
+        "range-end": "var(--calendar-range-end)",
+        "text-in-range": "var(--calendar-text-in-range)",
 
         // Dark mode
-        "bg-selected-dark": "#6B7280",
-        "bg-outside-selected-dark": "rgba(107, 114, 128, 0.2)",
-        "text-muted-dark": "#9CA3AF",
-        "text-selected-dark": "#F3F4F6",
-        "range-start-dark": "#374151",
-        "range-middle-dark": "#4B5563",
-        "range-end-dark": "#374151",
-        "text-in-range-dark": "#E5E7EB",
+        "bg-selected-dark": "var(--calendar-bg-selected-dark)",
+        "bg-outside-selected-dark": "var(--calendar-bg-outside-selected-dark)",
+        "text-muted-dark": "var(--calendar-text-muted-dark)",
+        "text-selected-dark": "var(--calendar-text-selected-dark)",
+        "range-start-dark": "var(--calendar-range-start-dark)",
+        "range-middle-dark": "var(--calendar-range-middle-dark)",
+        "range-end-dark": "var(--calendar-range-end-dark)",
+        "text-in-range-dark": "var(--calendar-text-in-range-dark)",
 
         // Hover effects
-        "hover-bg": "#9CA3AF",
-        "hover-bg-dark": "#6B7280",
-        "hover-text": "#374151",
-        "hover-text-dark": "#E5E7EB",
+        "hover-bg": "var(--calendar-hover-bg)",
+        "hover-bg-dark": "var(--calendar-hover-bg-dark)",
+        "hover-text": "var(--calendar-hover-text)",
+        "hover-text-dark": "var(--calendar-hover-text-dark)",
 
         // Today's date
-        "today-bg": "#D1D5DB",
-        "today-bg-dark": "#4B5563",
-        "today-text": "#374151",
-        "today-text-dark": "#D1D5DB",
+        "today-bg": "var(--calendar-today-bg)",
+        "today-bg-dark": "var(--calendar-today-bg-dark)",
+        "today-text": "var(--calendar-today-text)",
+        "today-text-dark": "var(--calendar-today-text-dark)",
       },
     },
   },