diff --git a/.github/workflows/dev-build.yaml b/.github/workflows/dev-build.yaml
index e7acd4e53..ce6f6f9d3 100644
--- a/.github/workflows/dev-build.yaml
+++ b/.github/workflows/dev-build.yaml
@@ -6,7 +6,7 @@ concurrency:
 
 on:
   push:
-    branches: ['2602-page-load-speed'] # put your current branch to create a build. Core team only.
+    branches: ['light-mode-1'] # put your current branch to create a build. Core team only.
     paths-ignore:
       - '**.md'
       - 'cloud-deployments/*'
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 6ce42fadb..e692cd303 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -16,6 +16,7 @@ import i18n from "./i18n";
 import { PfpProvider } from "./PfpContext";
 import { LogoProvider } from "./LogoContext";
 import { FullScreenLoader } from "./components/Preloader";
+import { ThemeProvider } from "./ThemeContext";
 
 const Main = lazy(() => import("@/pages/Main"));
 const InvitePage = lazy(() => import("@/pages/Invite"));
@@ -70,139 +71,149 @@ const FineTuningWalkthrough = lazy(() => import("@/pages/FineTuning"));
 
 export default function App() {
   return (
-    <Suspense fallback={<FullScreenLoader />}>
-      <ContextWrapper>
-        <LogoProvider>
-          <PfpProvider>
-            <I18nextProvider i18n={i18n}>
-              <Routes>
-                <Route path="/" element={<PrivateRoute Component={Main} />} />
-                <Route path="/login" element={<Login />} />
-                <Route path="/sso/simple" element={<SimpleSSOPassthrough />} />
+    <ThemeProvider>
+      <Suspense fallback={<FullScreenLoader />}>
+        <ContextWrapper>
+          <LogoProvider>
+            <PfpProvider>
+              <I18nextProvider i18n={i18n}>
+                <Routes>
+                  <Route path="/" element={<PrivateRoute Component={Main} />} />
+                  <Route path="/login" element={<Login />} />
+                  <Route
+                    path="/sso/simple"
+                    element={<SimpleSSOPassthrough />}
+                  />
 
-                <Route
-                  path="/workspace/:slug/settings/:tab"
-                  element={<ManagerRoute Component={WorkspaceSettings} />}
-                />
-                <Route
-                  path="/workspace/:slug"
-                  element={<PrivateRoute Component={WorkspaceChat} />}
-                />
-                <Route
-                  path="/workspace/:slug/t/:threadSlug"
-                  element={<PrivateRoute Component={WorkspaceChat} />}
-                />
-                <Route path="/accept-invite/:code" element={<InvitePage />} />
+                  <Route
+                    path="/workspace/:slug/settings/:tab"
+                    element={<ManagerRoute Component={WorkspaceSettings} />}
+                  />
+                  <Route
+                    path="/workspace/:slug"
+                    element={<PrivateRoute Component={WorkspaceChat} />}
+                  />
+                  <Route
+                    path="/workspace/:slug/t/:threadSlug"
+                    element={<PrivateRoute Component={WorkspaceChat} />}
+                  />
+                  <Route path="/accept-invite/:code" element={<InvitePage />} />
 
-                {/* Admin */}
-                <Route
-                  path="/settings/llm-preference"
-                  element={<AdminRoute Component={GeneralLLMPreference} />}
-                />
-                <Route
-                  path="/settings/transcription-preference"
-                  element={
-                    <AdminRoute Component={GeneralTranscriptionPreference} />
-                  }
-                />
-                <Route
-                  path="/settings/audio-preference"
-                  element={<AdminRoute Component={GeneralAudioPreference} />}
-                />
-                <Route
-                  path="/settings/embedding-preference"
-                  element={
-                    <AdminRoute Component={GeneralEmbeddingPreference} />
-                  }
-                />
-                <Route
-                  path="/settings/text-splitter-preference"
-                  element={
-                    <AdminRoute Component={EmbeddingTextSplitterPreference} />
-                  }
-                />
-                <Route
-                  path="/settings/vector-database"
-                  element={<AdminRoute Component={GeneralVectorDatabase} />}
-                />
-                <Route
-                  path="/settings/agents"
-                  element={<AdminRoute Component={AdminAgents} />}
-                />
-                <Route
-                  path="/settings/event-logs"
-                  element={<AdminRoute Component={AdminLogs} />}
-                />
-                <Route
-                  path="/settings/embed-config"
-                  element={<AdminRoute Component={EmbedConfigSetup} />}
-                />
-                <Route
-                  path="/settings/embed-chats"
-                  element={<AdminRoute Component={EmbedChats} />}
-                />
-                {/* Manager */}
-                <Route
-                  path="/settings/security"
-                  element={<ManagerRoute Component={GeneralSecurity} />}
-                />
-                <Route
-                  path="/settings/privacy"
-                  element={<AdminRoute Component={PrivacyAndData} />}
-                />
-                <Route
-                  path="/settings/appearance"
-                  element={<ManagerRoute Component={GeneralAppearance} />}
-                />
-                <Route
-                  path="/settings/beta-features"
-                  element={<AdminRoute Component={ExperimentalFeatures} />}
-                />
-                <Route
-                  path="/settings/api-keys"
-                  element={<AdminRoute Component={GeneralApiKeys} />}
-                />
-                <Route
-                  path="/settings/browser-extension"
-                  element={<ManagerRoute Component={GeneralBrowserExtension} />}
-                />
-                <Route
-                  path="/settings/workspace-chats"
-                  element={<ManagerRoute Component={GeneralChats} />}
-                />
-                <Route
-                  path="/settings/invites"
-                  element={<ManagerRoute Component={AdminInvites} />}
-                />
-                <Route
-                  path="/settings/users"
-                  element={<ManagerRoute Component={AdminUsers} />}
-                />
-                <Route
-                  path="/settings/workspaces"
-                  element={<ManagerRoute Component={AdminWorkspaces} />}
-                />
-                {/* Onboarding Flow */}
-                <Route path="/onboarding" element={<OnboardingFlow />} />
-                <Route path="/onboarding/:step" element={<OnboardingFlow />} />
+                  {/* Admin */}
+                  <Route
+                    path="/settings/llm-preference"
+                    element={<AdminRoute Component={GeneralLLMPreference} />}
+                  />
+                  <Route
+                    path="/settings/transcription-preference"
+                    element={
+                      <AdminRoute Component={GeneralTranscriptionPreference} />
+                    }
+                  />
+                  <Route
+                    path="/settings/audio-preference"
+                    element={<AdminRoute Component={GeneralAudioPreference} />}
+                  />
+                  <Route
+                    path="/settings/embedding-preference"
+                    element={
+                      <AdminRoute Component={GeneralEmbeddingPreference} />
+                    }
+                  />
+                  <Route
+                    path="/settings/text-splitter-preference"
+                    element={
+                      <AdminRoute Component={EmbeddingTextSplitterPreference} />
+                    }
+                  />
+                  <Route
+                    path="/settings/vector-database"
+                    element={<AdminRoute Component={GeneralVectorDatabase} />}
+                  />
+                  <Route
+                    path="/settings/agents"
+                    element={<AdminRoute Component={AdminAgents} />}
+                  />
+                  <Route
+                    path="/settings/event-logs"
+                    element={<AdminRoute Component={AdminLogs} />}
+                  />
+                  <Route
+                    path="/settings/embed-config"
+                    element={<AdminRoute Component={EmbedConfigSetup} />}
+                  />
+                  <Route
+                    path="/settings/embed-chats"
+                    element={<AdminRoute Component={EmbedChats} />}
+                  />
+                  {/* Manager */}
+                  <Route
+                    path="/settings/security"
+                    element={<ManagerRoute Component={GeneralSecurity} />}
+                  />
+                  <Route
+                    path="/settings/privacy"
+                    element={<AdminRoute Component={PrivacyAndData} />}
+                  />
+                  <Route
+                    path="/settings/appearance"
+                    element={<ManagerRoute Component={GeneralAppearance} />}
+                  />
+                  <Route
+                    path="/settings/beta-features"
+                    element={<AdminRoute Component={ExperimentalFeatures} />}
+                  />
+                  <Route
+                    path="/settings/api-keys"
+                    element={<AdminRoute Component={GeneralApiKeys} />}
+                  />
+                  <Route
+                    path="/settings/browser-extension"
+                    element={
+                      <ManagerRoute Component={GeneralBrowserExtension} />
+                    }
+                  />
+                  <Route
+                    path="/settings/workspace-chats"
+                    element={<ManagerRoute Component={GeneralChats} />}
+                  />
+                  <Route
+                    path="/settings/invites"
+                    element={<ManagerRoute Component={AdminInvites} />}
+                  />
+                  <Route
+                    path="/settings/users"
+                    element={<ManagerRoute Component={AdminUsers} />}
+                  />
+                  <Route
+                    path="/settings/workspaces"
+                    element={<ManagerRoute Component={AdminWorkspaces} />}
+                  />
+                  {/* Onboarding Flow */}
+                  <Route path="/onboarding" element={<OnboardingFlow />} />
+                  <Route
+                    path="/onboarding/:step"
+                    element={<OnboardingFlow />}
+                  />
 
-                {/* Experimental feature pages  */}
-                {/* Live Document Sync feature */}
-                <Route
-                  path="/settings/beta-features/live-document-sync/manage"
-                  element={<AdminRoute Component={LiveDocumentSyncManage} />}
-                />
+                  {/* Experimental feature pages  */}
+                  {/* Live Document Sync feature */}
+                  <Route
+                    path="/settings/beta-features/live-document-sync/manage"
+                    element={<AdminRoute Component={LiveDocumentSyncManage} />}
+                  />
 
-                <Route
-                  path="/fine-tuning"
-                  element={<AdminRoute Component={FineTuningWalkthrough} />}
-                />
-              </Routes>
-              <ToastContainer />
-            </I18nextProvider>
-          </PfpProvider>
-        </LogoProvider>
-      </ContextWrapper>
-    </Suspense>
+                  <Route
+                    path="/fine-tuning"
+                    element={<AdminRoute Component={FineTuningWalkthrough} />}
+                  />
+                </Routes>
+                <ToastContainer />
+              </I18nextProvider>
+            </PfpProvider>
+          </LogoProvider>
+        </ContextWrapper>
+      </Suspense>
+    </ThemeProvider>
   );
 }
diff --git a/frontend/src/LogoContext.jsx b/frontend/src/LogoContext.jsx
index 014c6a6be..8d4ff82dd 100644
--- a/frontend/src/LogoContext.jsx
+++ b/frontend/src/LogoContext.jsx
@@ -1,6 +1,8 @@
 import { createContext, useEffect, useState } from "react";
 import AnythingLLM from "./media/logo/anything-llm.png";
-import DefaultLoginLogo from "./media/illustrations/login-logo.svg";
+import AnythingLLMDark from "./media/logo/anything-llm-dark.png";
+import DefaultLoginLogoLight from "./media/illustrations/login-logo.svg";
+import DefaultLoginLogoDark from "./media/illustrations/login-logo-light.svg";
 import System from "./models/system";
 
 export const LogoContext = createContext();
@@ -9,6 +11,10 @@ export function LogoProvider({ children }) {
   const [logo, setLogo] = useState("");
   const [loginLogo, setLoginLogo] = useState("");
   const [isCustomLogo, setIsCustomLogo] = useState(false);
+  const DefaultLoginLogo =
+    localStorage.getItem("theme") !== "default"
+      ? DefaultLoginLogoDark
+      : DefaultLoginLogoLight;
 
   useEffect(() => {
     async function fetchInstanceLogo() {
@@ -19,12 +25,16 @@ export function LogoProvider({ children }) {
           setLoginLogo(isCustomLogo ? logoURL : DefaultLoginLogo);
           setIsCustomLogo(isCustomLogo);
         } else {
-          setLogo(AnythingLLM);
+          localStorage.getItem("theme") !== "default"
+            ? setLogo(AnythingLLMDark)
+            : setLogo(AnythingLLM);
           setLoginLogo(DefaultLoginLogo);
           setIsCustomLogo(false);
         }
       } catch (err) {
-        setLogo(AnythingLLM);
+        localStorage.getItem("theme") !== "default"
+          ? setLogo(AnythingLLMDark)
+          : setLogo(AnythingLLM);
         setLoginLogo(DefaultLoginLogo);
         setIsCustomLogo(false);
         console.error("Failed to fetch logo:", err);
diff --git a/frontend/src/ThemeContext.jsx b/frontend/src/ThemeContext.jsx
new file mode 100644
index 000000000..f9a5c685f
--- /dev/null
+++ b/frontend/src/ThemeContext.jsx
@@ -0,0 +1,16 @@
+import React, { createContext, useContext } from "react";
+import { useTheme } from "./hooks/useTheme";
+
+const ThemeContext = createContext();
+
+export function ThemeProvider({ children }) {
+  const themeValue = useTheme();
+
+  return (
+    <ThemeContext.Provider value={themeValue}>{children}</ThemeContext.Provider>
+  );
+}
+
+export function useThemeContext() {
+  return useContext(ThemeContext);
+}
diff --git a/frontend/src/components/ChatBubble/index.jsx b/frontend/src/components/ChatBubble/index.jsx
index c5a1f1907..4ffc3d085 100644
--- a/frontend/src/components/ChatBubble/index.jsx
+++ b/frontend/src/components/ChatBubble/index.jsx
@@ -1,14 +1,14 @@
 import React from "react";
 import UserIcon from "../UserIcon";
 import { userFromStorage } from "@/utils/request";
-import { AI_BACKGROUND_COLOR, USER_BACKGROUND_COLOR } from "@/utils/constants";
 
 export default function ChatBubble({ message, type, popMsg }) {
   const isUser = type === "user";
-  const backgroundColor = isUser ? USER_BACKGROUND_COLOR : AI_BACKGROUND_COLOR;
 
   return (
-    <div className={`flex justify-center items-end w-full ${backgroundColor}`}>
+    <div
+      className={`flex justify-center items-end w-full bg-theme-bg-secondary`}
+    >
       <div className={`py-8 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col`}>
         <div className="flex gap-x-5">
           <UserIcon
diff --git a/frontend/src/components/ContextualSaveBar/index.jsx b/frontend/src/components/ContextualSaveBar/index.jsx
index c94a06c9f..42d149085 100644
--- a/frontend/src/components/ContextualSaveBar/index.jsx
+++ b/frontend/src/components/ContextualSaveBar/index.jsx
@@ -10,18 +10,18 @@ export default function ContextualSaveBar({
   return (
     <div className="fixed top-0 left-0 right-0 h-14 bg-dark-input flex items-center justify-end px-4 z-[999]">
       <div className="absolute ml-4 left-0 md:left-1/2 transform md:-translate-x-1/2 flex items-center gap-x-2">
-        <Warning size={18} className="text-white" />
-        <p className="text-white font-medium text-xs">Unsaved Changes</p>
+        <Warning size={18} className="text-[#FFFFFF]" />
+        <p className="text-[#FFFFFF] font-medium text-xs">Unsaved Changes</p>
       </div>
       <div className="flex items-center gap-x-2">
         <button
-          className="border-none text-white font-medium text-sm px-[10px] py-[6px] rounded-md bg-white/5 hover:bg-white/10"
+          className="border-none text-theme-text-primary font-medium text-sm px-[10px] py-[6px] rounded-md bg-theme-bg-secondary hover:bg-theme-bg-primary"
           onClick={onCancel}
         >
           Cancel
         </button>
         <button
-          className="border-none text-dark-text font-medium text-sm px-[10px] py-[6px] rounded-md bg-primary-button hover:bg-[#3DB5E8]"
+          className="border-none text-theme-text-primary font-medium text-sm px-[10px] py-[6px] rounded-md bg-primary-button hover:bg-primary-button-hover"
           onClick={onSave}
         >
           Save
diff --git a/frontend/src/components/DefaultChat/index.jsx b/frontend/src/components/DefaultChat/index.jsx
index d542f309f..e3087d1b1 100644
--- a/frontend/src/components/DefaultChat/index.jsx
+++ b/frontend/src/components/DefaultChat/index.jsx
@@ -15,7 +15,6 @@ import ChatBubble from "../ChatBubble";
 import System from "@/models/system";
 import UserIcon from "../UserIcon";
 import { userFromStorage } from "@/utils/request";
-import { AI_BACKGROUND_COLOR, USER_BACKGROUND_COLOR } from "@/utils/constants";
 import useUser from "@/hooks/useUser";
 import { useTranslation, Trans } from "react-i18next";
 import Appearance from "@/models/appearance";
@@ -43,239 +42,136 @@ export default function DefaultChatContainer() {
 
   const MESSAGES = [
     <React.Fragment key="msg1">
-      <div
-        className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR} md:mt-0 mt-[40px]`}
-      >
-        <div
-          className={`pt-10 pb-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col`}
-        >
-          <div className="flex gap-x-5">
-            <UserIcon user={{ uid: "system" }} role={"assistant"} />
-
-            <span
-              className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
-            >
-              {t("welcomeMessage.part1")}
-            </span>
-          </div>
-        </div>
-      </div>
+      <MessageContainer>
+        <MessageContent>
+          <UserIcon user={{ uid: "system" }} role={"assistant"} />
+          <MessageText>{t("welcomeMessage.part1")}</MessageText>
+        </MessageContent>
+      </MessageContainer>
     </React.Fragment>,
 
     <React.Fragment key="msg2">
-      <div
-        className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
-      >
-        <div
-          className={`pb-4 pt-2 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col`}
-        >
-          <div className="flex gap-x-5">
-            <UserIcon user={{ uid: "system" }} role={"assistant"} />
-
-            <span
-              className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
-            >
-              {t("welcomeMessage.part2")}
-            </span>
-          </div>
-        </div>
-      </div>
+      <MessageContainer>
+        <MessageContent>
+          <UserIcon user={{ uid: "system" }} role={"assistant"} />
+          <MessageText>{t("welcomeMessage.part2")}</MessageText>
+        </MessageContent>
+      </MessageContainer>
     </React.Fragment>,
 
     <React.Fragment key="msg3">
-      <div
-        className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
-      >
-        <div
-          className={`pt-2 pb-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col`}
-        >
-          <div className="flex gap-x-5">
-            <UserIcon user={{ uid: "system" }} role={"assistant"} />
-            <div>
-              <span
-                className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
+      <MessageContainer>
+        <MessageContent>
+          <UserIcon user={{ uid: "system" }} role={"assistant"} />
+          <div>
+            <MessageText>{t("welcomeMessage.part3")}</MessageText>
+            <a
+              href={paths.github()}
+              target="_blank"
+              rel="noreferrer"
+              className="mt-5 w-fit transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white light:border-black/50 light:text-theme-text-primary text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
+            >
+              <GitMerge className="h-4 w-4" />
+              <p>{t("welcomeMessage.githubIssue")}</p>
+            </a>
+          </div>
+        </MessageContent>
+      </MessageContainer>
+    </React.Fragment>,
+
+    <React.Fragment key="msg4">
+      <MessageContainer>
+        <MessageContent>
+          <UserIcon user={{ uid: userFromStorage()?.username }} role={"user"} />
+          <MessageText>{t("welcomeMessage.user1")}</MessageText>
+        </MessageContent>
+      </MessageContainer>
+    </React.Fragment>,
+
+    <React.Fragment key="msg5">
+      <MessageContainer>
+        <MessageContent>
+          <UserIcon user={{ uid: "system" }} role={"assistant"} />
+          <div>
+            <MessageText>{t("welcomeMessage.part4")}</MessageText>
+
+            {(!user || user?.role !== "default") && (
+              <button
+                onClick={showNewWsModal}
+                className="mt-5 w-fit transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white light:border-black/50 light:text-theme-text-primary text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
               >
-                {t("welcomeMessage.part3")}
-              </span>
+                <Plus className="h-4 w-4" />
+                <p>{t("welcomeMessage.createWorkspace")}</p>
+              </button>
+            )}
+          </div>
+        </MessageContent>
+      </MessageContainer>
+    </React.Fragment>,
+
+    <React.Fragment key="msg6">
+      <MessageContainer>
+        <MessageContent>
+          <UserIcon user={{ uid: userFromStorage()?.username }} role={"user"} />
+          <MessageText>{t("welcomeMessage.user2")}</MessageText>
+        </MessageContent>
+      </MessageContainer>
+    </React.Fragment>,
+
+    <React.Fragment key="msg7">
+      <MessageContainer>
+        <MessageContent>
+          <UserIcon user={{ uid: "system" }} role={"assistant"} />
+          <MessageText>
+            <Trans
+              i18nKey="welcomeMessage.part5"
+              components={{
+                i: <i />,
+                br: <br />,
+              }}
+            />
+          </MessageText>
+        </MessageContent>
+      </MessageContainer>
+    </React.Fragment>,
+
+    <React.Fragment key="msg8">
+      <MessageContainer>
+        <MessageContent>
+          <UserIcon user={{ uid: userFromStorage()?.username }} role={"user"} />
+          <MessageText>{t("welcomeMessage.user3")}</MessageText>
+        </MessageContent>
+      </MessageContainer>
+    </React.Fragment>,
+
+    <React.Fragment key="msg9">
+      <MessageContainer>
+        <MessageContent>
+          <UserIcon user={{ uid: "system" }} role={"assistant"} />
+          <div>
+            <MessageText>{t("welcomeMessage.part6")}</MessageText>
+
+            <div className="flex flex-col md:flex-row items-start md:items-center gap-1 md:gap-4">
               <a
                 href={paths.github()}
                 target="_blank"
                 rel="noreferrer"
-                className="mt-5 w-fit transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
+                className="mt-5 w-fit transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white light:border-black/50 light:text-theme-text-primary text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
               >
-                <GitMerge className="h-4 w-4" />
-                <p>{t("welcomeMessage.githubIssue")}</p>
+                <GithubLogo className="h-4 w-4" />
+                <p>{t("welcomeMessage.starOnGithub")}</p>
+              </a>
+              <a
+                href={paths.mailToMintplex()}
+                className="mt-5 w-fit transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white light:border-black/50 light:text-theme-text-primary text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
+              >
+                <EnvelopeSimple className="h-4 w-4" />
+                <p>{t("welcomeMessage.contact")}</p>
               </a>
             </div>
           </div>
-        </div>
-      </div>
-    </React.Fragment>,
-
-    <React.Fragment key="msg4">
-      <div
-        className={`flex justify-center items-end w-full ${USER_BACKGROUND_COLOR}`}
-      >
-        <div
-          className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col`}
-        >
-          <div className="flex gap-x-5">
-            <UserIcon
-              user={{ uid: userFromStorage()?.username }}
-              role={"user"}
-            />
-
-            <span
-              className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
-            >
-              {t("welcomeMessage.user1")}
-            </span>
-          </div>
-        </div>
-      </div>
-    </React.Fragment>,
-
-    <React.Fragment key="msg5">
-      <div
-        className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
-      >
-        <div
-          className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col`}
-        >
-          <div className="flex gap-x-5">
-            <UserIcon user={{ uid: "system" }} role={"assistant"} />
-            <div>
-              <span
-                className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
-              >
-                {t("welcomeMessage.part4")}
-              </span>
-
-              {(!user || user?.role !== "default") && (
-                <button
-                  onClick={showNewWsModal}
-                  className="mt-5 w-fit transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-                >
-                  <Plus className="h-4 w-4" />
-                  <p>{t("welcomeMessage.createWorkspace")}</p>
-                </button>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </React.Fragment>,
-
-    <React.Fragment key="msg6">
-      <div
-        className={`flex justify-center items-end w-full ${USER_BACKGROUND_COLOR}`}
-      >
-        <div
-          className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col`}
-        >
-          <div className="flex gap-x-5">
-            <UserIcon
-              user={{ uid: userFromStorage()?.username }}
-              role={"user"}
-            />
-
-            <span
-              className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
-            >
-              {t("welcomeMessage.user2")}
-            </span>
-          </div>
-        </div>
-      </div>
-    </React.Fragment>,
-
-    <React.Fragment key="msg7">
-      <div
-        className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
-      >
-        <div
-          className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col`}
-        >
-          <div className="flex gap-x-5">
-            <UserIcon user={{ uid: "system" }} role={"assistant"} />
-
-            <span
-              className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
-            >
-              <Trans
-                i18nKey="welcomeMessage.part5"
-                components={{
-                  i: <i />,
-                  br: <br />,
-                }}
-              />
-            </span>
-          </div>
-        </div>
-      </div>
-    </React.Fragment>,
-
-    <React.Fragment key="msg8">
-      <div
-        className={`flex justify-center items-end w-full ${USER_BACKGROUND_COLOR}`}
-      >
-        <div
-          className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col`}
-        >
-          <div className="flex gap-x-5">
-            <UserIcon
-              user={{ uid: userFromStorage()?.username }}
-              role={"user"}
-            />
-
-            <span
-              className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
-            >
-              {t("welcomeMessage.user3")}
-            </span>
-          </div>
-        </div>
-      </div>
-    </React.Fragment>,
-
-    <React.Fragment key="msg9">
-      <div
-        className={`flex justify-center items-end w-full ${AI_BACKGROUND_COLOR}`}
-      >
-        <div
-          className={`py-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col`}
-        >
-          <div className="flex gap-x-5">
-            <UserIcon user={{ uid: "system" }} role={"assistant"} />
-            <div>
-              <span
-                className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
-              >
-                {t("welcomeMessage.part6")}
-              </span>
-
-              <div className="flex flex-col md:flex-row items-start md:items-center gap-1 md:gap-4">
-                <a
-                  href={paths.github()}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="mt-5 w-fit transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-                >
-                  <GithubLogo className="h-4 w-4" />
-                  <p>{t("welcomeMessage.starOnGithub")}</p>
-                </a>
-                <a
-                  href={paths.mailToMintplex()}
-                  className="mt-5 w-fit transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-                >
-                  <EnvelopeSimple className="h-4 w-4" />
-                  <p>{t("welcomeMessage.contact")}</p>
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+        </MessageContent>
+      </MessageContainer>
     </React.Fragment>,
   ];
 
@@ -307,7 +203,7 @@ export default function DefaultChatContainer() {
   return (
     <div
       style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-      className={`relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full border-2 border-outline overflow-y-scroll ${
+      className={`transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary light:border-[1px] light:border-theme-sidebar-border w-full h-full overflow-y-scroll ${
         showScrollbar ? "show-scrollbar" : "no-scroll"
       }`}
     >
@@ -335,3 +231,25 @@ export default function DefaultChatContainer() {
     </div>
   );
 }
+
+function MessageContainer({ children }) {
+  return (
+    <div className="flex justify-center items-end w-full">
+      <div className="py-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function MessageContent({ children }) {
+  return <div className="flex gap-x-5">{children}</div>;
+}
+
+function MessageText({ children }) {
+  return (
+    <span className="text-white/80 light:text-theme-text-primary font-light text-[14px] flex flex-col gap-y-1 mt-2">
+      {children}
+    </span>
+  );
+}
diff --git a/frontend/src/components/EditingChatBubble/index.jsx b/frontend/src/components/EditingChatBubble/index.jsx
index 38eeb4e83..feabd4c6e 100644
--- a/frontend/src/components/EditingChatBubble/index.jsx
+++ b/frontend/src/components/EditingChatBubble/index.jsx
@@ -16,7 +16,9 @@ export default function EditingChatBubble({
 
   return (
     <div>
-      <p className={`text-xs text-[#D3D4D4] ${isUser ? "text-right" : ""}`}>
+      <p
+        className={`text-xs text-white light:text-black/80 ${isUser ? "text-right" : ""}`}
+      >
         {isUser ? t("common.user") : t("appearance.message.assistant")}
       </p>
       <div
@@ -25,7 +27,7 @@ export default function EditingChatBubble({
         }`}
       >
         <button
-          className={`transition-all duration-300 absolute z-10 text-white rounded-full hover:bg-neutral-700 hover:border-white border-transparent border shadow-lg ${
+          className={`transition-all duration-300 absolute z-10 text-white rounded-full hover:bg-neutral-700 light:hover:invert hover:border-white border-transparent border shadow-lg ${
             isUser ? "right-0 mr-2" : "ml-2"
           }`}
           style={{ top: "6px", [isUser ? "right" : "left"]: "290px" }}
@@ -49,13 +51,13 @@ export default function EditingChatBubble({
                 setIsEditing(false);
               }}
               autoFocus
-              className={`w-full ${
+              className={`w-full light:text-white ${
                 isUser ? "bg-[#41444C] text-white" : "bg-[#2E3036] text-white"
               }`}
             />
           ) : (
             tempMessage && (
-              <p className=" font-[500] md:font-semibold text-sm md:text-base break-words">
+              <p className=" font-[500] md:font-semibold text-sm md:text-base break-words light:invert">
                 {tempMessage}
               </p>
             )
diff --git a/frontend/src/components/EmbeddingSelection/AzureAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/AzureAiOptions/index.jsx
index 6a15e1ab6..ccba035db 100644
--- a/frontend/src/components/EmbeddingSelection/AzureAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/AzureAiOptions/index.jsx
@@ -9,7 +9,7 @@ export default function AzureAiOptions({ settings }) {
           <input
             type="url"
             name="AzureOpenAiEndpoint"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="https://my-azure.openai.azure.com"
             defaultValue={settings?.AzureOpenAiEndpoint}
             required={true}
@@ -25,7 +25,7 @@ export default function AzureAiOptions({ settings }) {
           <input
             type="password"
             name="AzureOpenAiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Azure OpenAI API Key"
             defaultValue={settings?.AzureOpenAiKey ? "*".repeat(20) : ""}
             required={true}
@@ -41,7 +41,7 @@ export default function AzureAiOptions({ settings }) {
           <input
             type="text"
             name="AzureOpenAiEmbeddingModelPref"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Azure OpenAI embedding model deployment name"
             defaultValue={settings?.AzureOpenAiEmbeddingModelPref}
             required={true}
diff --git a/frontend/src/components/EmbeddingSelection/CohereOptions/index.jsx b/frontend/src/components/EmbeddingSelection/CohereOptions/index.jsx
index ba54bb9a5..c5153fd04 100644
--- a/frontend/src/components/EmbeddingSelection/CohereOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/CohereOptions/index.jsx
@@ -9,7 +9,7 @@ export default function CohereEmbeddingOptions({ settings }) {
           <input
             type="password"
             name="CohereApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Cohere API Key"
             defaultValue={settings?.CohereApiKey ? "*".repeat(20) : ""}
             required={true}
@@ -24,7 +24,7 @@ export default function CohereEmbeddingOptions({ settings }) {
           <select
             name="EmbeddingModelPref"
             required={true}
-            className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+            className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
           >
             <optgroup label="Available embedding models">
               {[
diff --git a/frontend/src/components/EmbeddingSelection/EmbedderItem/index.jsx b/frontend/src/components/EmbeddingSelection/EmbedderItem/index.jsx
index de9413572..22003f771 100644
--- a/frontend/src/components/EmbeddingSelection/EmbedderItem/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/EmbedderItem/index.jsx
@@ -9,8 +9,8 @@ export default function EmbedderItem({
   return (
     <div
       onClick={() => onClick(value)}
-      className={`w-full p-2 rounded-md hover:cursor-pointer hover:bg-white/10 ${
-        checked ? "bg-white/10" : ""
+      className={`w-full p-2 rounded-md hover:cursor-pointer hover:bg-theme-bg-secondary ${
+        checked ? "bg-theme-bg-secondary" : ""
       }`}
     >
       <input
diff --git a/frontend/src/components/EmbeddingSelection/GenericOpenAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/GenericOpenAiOptions/index.jsx
index f37161c20..e524a263e 100644
--- a/frontend/src/components/EmbeddingSelection/GenericOpenAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/GenericOpenAiOptions/index.jsx
@@ -9,7 +9,7 @@ export default function GenericOpenAiEmbeddingOptions({ settings }) {
           <input
             type="url"
             name="EmbeddingBasePath"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="https://api.openai.com/v1"
             defaultValue={settings?.EmbeddingBasePath}
             required={true}
@@ -24,7 +24,7 @@ export default function GenericOpenAiEmbeddingOptions({ settings }) {
           <input
             type="text"
             name="EmbeddingModelPref"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="text-embedding-ada-002"
             defaultValue={settings?.EmbeddingModelPref}
             required={true}
@@ -39,7 +39,7 @@ export default function GenericOpenAiEmbeddingOptions({ settings }) {
           <input
             type="number"
             name="EmbeddingModelMaxChunkLength"
-            className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="8192"
             min={1}
             onScroll={(e) => e.target.blur()}
@@ -59,7 +59,7 @@ export default function GenericOpenAiEmbeddingOptions({ settings }) {
           <input
             type="password"
             name="GenericOpenAiEmbeddingApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="sk-mysecretkey"
             defaultValue={
               settings?.GenericOpenAiEmbeddingApiKey ? "*".repeat(20) : ""
diff --git a/frontend/src/components/EmbeddingSelection/LMStudioOptions/index.jsx b/frontend/src/components/EmbeddingSelection/LMStudioOptions/index.jsx
index 9b31add91..4cf95168b 100644
--- a/frontend/src/components/EmbeddingSelection/LMStudioOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/LMStudioOptions/index.jsx
@@ -38,7 +38,7 @@ export default function LMStudioEmbeddingOptions({ settings }) {
           <input
             type="number"
             name="EmbeddingModelMaxChunkLength"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="8192"
             min={1}
             value={maxChunkLength}
@@ -94,7 +94,7 @@ export default function LMStudioEmbeddingOptions({ settings }) {
             <input
               type="url"
               name="EmbeddingBasePath"
-              className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+              className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
               placeholder="http://localhost:1234/v1"
               value={basePathValue.value}
               required={true}
@@ -150,7 +150,7 @@ function LMStudioModelSelection({ settings, basePath = null }) {
         <select
           name="EmbeddingModelPref"
           disabled={true}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             {!!basePath
@@ -174,7 +174,7 @@ function LMStudioModelSelection({ settings, basePath = null }) {
       <select
         name="EmbeddingModelPref"
         required={true}
-        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
       >
         {customModels.length > 0 && (
           <optgroup label="Your loaded models">
diff --git a/frontend/src/components/EmbeddingSelection/LiteLLMOptions/index.jsx b/frontend/src/components/EmbeddingSelection/LiteLLMOptions/index.jsx
index 22b2f5cae..d13e4e577 100644
--- a/frontend/src/components/EmbeddingSelection/LiteLLMOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/LiteLLMOptions/index.jsx
@@ -19,7 +19,7 @@ export default function LiteLLMOptions({ settings }) {
           <input
             type="url"
             name="LiteLLMBasePath"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="http://127.0.0.1:4000"
             defaultValue={settings?.LiteLLMBasePath}
             required={true}
@@ -41,7 +41,7 @@ export default function LiteLLMOptions({ settings }) {
           <input
             type="number"
             name="EmbeddingModelMaxChunkLength"
-            className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="8192"
             min={1}
             onScroll={(e) => e.target.blur()}
@@ -61,7 +61,7 @@ export default function LiteLLMOptions({ settings }) {
           <input
             type="password"
             name="LiteLLMAPIKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="sk-mysecretkey"
             defaultValue={settings?.LiteLLMAPIKey ? "*".repeat(20) : ""}
             autoComplete="off"
@@ -107,7 +107,7 @@ function LiteLLMModelSelection({ settings, basePath = null, apiKey = null }) {
         <select
           name="EmbeddingModelPref"
           disabled={true}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             {basePath?.includes("/v1")
@@ -130,7 +130,7 @@ function LiteLLMModelSelection({ settings, basePath = null, apiKey = null }) {
       <select
         name="EmbeddingModelPref"
         required={true}
-        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
       >
         {customModels.length > 0 && (
           <optgroup label="Your loaded models">
diff --git a/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
index 988eebac4..3493bede8 100644
--- a/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/LocalAiOptions/index.jsx
@@ -36,7 +36,7 @@ export default function LocalAiOptions({ settings }) {
           <input
             type="number"
             name="EmbeddingModelMaxChunkLength"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="1000"
             min={1}
             onScroll={(e) => e.target.blur()}
@@ -55,7 +55,7 @@ export default function LocalAiOptions({ settings }) {
           <input
             type="password"
             name="LocalAiApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="sk-mysecretkey"
             defaultValue={settings?.LocalAiApiKey ? "*".repeat(20) : ""}
             autoComplete="off"
@@ -106,7 +106,7 @@ export default function LocalAiOptions({ settings }) {
             <input
               type="url"
               name="EmbeddingBasePath"
-              className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+              className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
               placeholder="http://localhost:8080/v1"
               value={basePathValue.value}
               required={true}
@@ -154,7 +154,7 @@ function LocalAIModelSelection({ settings, apiKey = null, basePath = null }) {
         <select
           name="EmbeddingModelPref"
           disabled={true}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             {basePath?.includes("/v1")
@@ -174,7 +174,7 @@ function LocalAIModelSelection({ settings, apiKey = null, basePath = null }) {
       <select
         name="EmbeddingModelPref"
         required={true}
-        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
       >
         {customModels.length > 0 && (
           <optgroup label="Your loaded models">
diff --git a/frontend/src/components/EmbeddingSelection/OllamaOptions/index.jsx b/frontend/src/components/EmbeddingSelection/OllamaOptions/index.jsx
index a182c6daa..49a111c2a 100644
--- a/frontend/src/components/EmbeddingSelection/OllamaOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/OllamaOptions/index.jsx
@@ -41,7 +41,7 @@ export default function OllamaEmbeddingOptions({ settings }) {
           <input
             type="number"
             name="EmbeddingModelMaxChunkLength"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="8192"
             min={1}
             value={maxChunkLength}
@@ -97,7 +97,7 @@ export default function OllamaEmbeddingOptions({ settings }) {
             <input
               type="url"
               name="EmbeddingBasePath"
-              className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+              className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
               placeholder="http://127.0.0.1:11434"
               value={basePathValue.value}
               required={true}
@@ -149,7 +149,7 @@ function OllamaEmbeddingModelSelection({ settings, basePath = null }) {
         <select
           name="EmbeddingModelPref"
           disabled={true}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             {!!basePath
@@ -173,7 +173,7 @@ function OllamaEmbeddingModelSelection({ settings, basePath = null }) {
       <select
         name="EmbeddingModelPref"
         required={true}
-        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
       >
         {customModels.length > 0 && (
           <optgroup label="Your loaded models">
diff --git a/frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx
index 79cb2dc5d..ace2dd6e8 100644
--- a/frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/OpenAiOptions/index.jsx
@@ -9,7 +9,7 @@ export default function OpenAiOptions({ settings }) {
           <input
             type="password"
             name="OpenAiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="OpenAI API Key"
             defaultValue={settings?.OpenAiKey ? "*".repeat(20) : ""}
             required={true}
@@ -24,7 +24,7 @@ export default function OpenAiOptions({ settings }) {
           <select
             name="EmbeddingModelPref"
             required={true}
-            className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+            className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
           >
             <optgroup label="Available embedding models">
               {[
diff --git a/frontend/src/components/EmbeddingSelection/VoyageAiOptions/index.jsx b/frontend/src/components/EmbeddingSelection/VoyageAiOptions/index.jsx
index b55fc6743..d16e456d3 100644
--- a/frontend/src/components/EmbeddingSelection/VoyageAiOptions/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/VoyageAiOptions/index.jsx
@@ -9,7 +9,7 @@ export default function VoyageAiOptions({ settings }) {
           <input
             type="password"
             name="VoyageAiApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Voyage AI API Key"
             defaultValue={settings?.VoyageAiApiKey ? "*".repeat(20) : ""}
             required={true}
@@ -25,7 +25,7 @@ export default function VoyageAiOptions({ settings }) {
             name="EmbeddingModelPref"
             required={true}
             defaultValue={settings?.EmbeddingModelPref}
-            className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+            className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
           >
             <optgroup label="Available embedding models">
               {[
diff --git a/frontend/src/components/Footer/index.jsx b/frontend/src/components/Footer/index.jsx
index 095aeba91..420f173f9 100644
--- a/frontend/src/components/Footer/index.jsx
+++ b/frontend/src/components/Footer/index.jsx
@@ -53,12 +53,16 @@ export default function Footer() {
               href={paths.github()}
               target="_blank"
               rel="noreferrer"
-              className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+              className="transition-all duration-300 p-2 rounded-full bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover"
               aria-label="Find us on Github"
               data-tooltip-id="footer-item"
               data-tooltip-content="View source code on Github"
             >
-              <GithubLogo weight="fill" className="h-5 w-5 " />
+              <GithubLogo
+                weight="fill"
+                className="h-5 w-5"
+                color="var(--theme-sidebar-footer-icon-fill)"
+              />
             </a>
           </div>
           <div className="flex w-fit">
@@ -66,12 +70,16 @@ export default function Footer() {
               href={paths.docs()}
               target="_blank"
               rel="noreferrer"
-              className="w-fit transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+              className="transition-all duration-300 p-2 rounded-full bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover"
               aria-label="Docs"
               data-tooltip-id="footer-item"
               data-tooltip-content="Open AnythingLLM help docs"
             >
-              <BookOpen weight="fill" className="h-5 w-5 " />
+              <BookOpen
+                weight="fill"
+                className="h-5 w-5"
+                color="var(--theme-sidebar-footer-icon-fill)"
+              />
             </a>
           </div>
           <div className="flex w-fit">
@@ -79,14 +87,15 @@ export default function Footer() {
               href={paths.discord()}
               target="_blank"
               rel="noreferrer"
-              className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+              className="transition-all duration-300 p-2 rounded-full bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover"
               aria-label="Join our Discord server"
               data-tooltip-id="footer-item"
               data-tooltip-content="Join the AnythingLLM Discord"
             >
               <DiscordLogo
                 weight="fill"
-                className="h-5 w-5 stroke-slate-200 group-hover:stroke-slate-200"
+                className="h-5 w-5"
+                color="var(--theme-sidebar-footer-icon-fill)"
               />
             </a>
           </div>
@@ -111,13 +120,14 @@ export default function Footer() {
             href={item.url}
             target="_blank"
             rel="noreferrer"
-            className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+            className="transition-all duration-300 p-2 rounded-full bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover"
           >
             {React.createElement(
               ICON_COMPONENTS?.[item.icon] ?? ICON_COMPONENTS.Info,
               {
                 weight: "fill",
                 className: "h-5 w-5",
+                color: "var(--theme-sidebar-footer-icon-fill)",
               }
             )}
           </a>
diff --git a/frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx b/frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx
index d66d36673..2f42c57c5 100644
--- a/frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/AnthropicAiOptions/index.jsx
@@ -9,7 +9,7 @@ export default function AnthropicAiOptions({ settings }) {
           <input
             type="password"
             name="AnthropicApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Anthropic Claude-2 API Key"
             defaultValue={settings?.AnthropicApiKey ? "*".repeat(20) : ""}
             required={true}
@@ -27,7 +27,7 @@ export default function AnthropicAiOptions({ settings }) {
               name="AnthropicModelPref"
               defaultValue={settings?.AnthropicModelPref || "claude-2"}
               required={true}
-              className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+              className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
             >
               {[
                 "claude-instant-1.2",
diff --git a/frontend/src/components/LLMSelection/ApiPieOptions/index.jsx b/frontend/src/components/LLMSelection/ApiPieOptions/index.jsx
index 9bb16ae3d..9799bf15d 100644
--- a/frontend/src/components/LLMSelection/ApiPieOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/ApiPieOptions/index.jsx
@@ -12,7 +12,7 @@ export default function ApiPieLLMOptions({ settings }) {
           <input
             type="password"
             name="ApipieLLMApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="APIpie API Key"
             defaultValue={settings?.ApipieLLMApiKey ? "*".repeat(20) : ""}
             required={true}
@@ -60,7 +60,7 @@ function APIPieModelSelection({ settings }) {
         <select
           name="ApipieLLMModelPref"
           disabled={true}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             -- loading available models --
@@ -78,7 +78,7 @@ function APIPieModelSelection({ settings }) {
       <select
         name="ApipieLLMModelPref"
         required={true}
-        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
       >
         {Object.keys(groupedModels)
           .sort()
diff --git a/frontend/src/components/LLMSelection/AwsBedrockLLMOptions/index.jsx b/frontend/src/components/LLMSelection/AwsBedrockLLMOptions/index.jsx
index 569ec4395..0620879f8 100644
--- a/frontend/src/components/LLMSelection/AwsBedrockLLMOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/AwsBedrockLLMOptions/index.jsx
@@ -36,16 +36,20 @@ export default function AwsBedrockLLMOptions({ settings }) {
           value={useSessionToken ? "sessionToken" : "iam"}
         />
         <div className="flex flex-col w-full">
-          <label className="text-white text-sm font-semibold block mb-3">
+          <label className="text-theme-text-primary text-sm font-semibold block mb-3">
             Use session token
           </label>
-          <p className="text-white/50 text-sm">
+          <p className="text-theme-text-secondary text-sm">
             Select the method to authenticate with AWS Bedrock.
           </p>
         </div>
-        <div className="flex items-center justify-start gap-x-4 bg-zinc-900 p-2.5 rounded-lg w-fit">
+        <div className="flex items-center justify-start gap-x-4 bg-theme-settings-input-bg p-2.5 rounded-lg w-fit">
           <span
-            className={`text-sm ${!useSessionToken ? "text-white" : "text-white/50"}`}
+            className={`text-sm ${
+              !useSessionToken
+                ? "text-theme-text-primary"
+                : "text-theme-text-secondary"
+            }`}
           >
             IAM
           </span>
@@ -56,10 +60,14 @@ export default function AwsBedrockLLMOptions({ settings }) {
               checked={useSessionToken}
               onChange={(e) => setUseSessionToken(e.target.checked)}
             />
-            <div className="w-11 h-6 bg-zinc-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-button"></div>
+            <div className="w-11 h-6 bg-[#4b5563] light:bg-[#e5e7eb] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-[#d1d5db] light:after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-button"></div>
           </label>
           <span
-            className={`text-sm ${useSessionToken ? "text-white" : "text-white/50"}`}
+            className={`text-sm ${
+              useSessionToken
+                ? "text-theme-text-primary"
+                : "text-theme-text-secondary"
+            }`}
           >
             Session Token
           </span>
@@ -74,7 +82,7 @@ export default function AwsBedrockLLMOptions({ settings }) {
           <input
             type="password"
             name="AwsBedrockLLMAccessKeyId"
-            className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="AWS Bedrock IAM User Access ID"
             defaultValue={
               settings?.AwsBedrockLLMAccessKeyId ? "*".repeat(20) : ""
@@ -91,7 +99,7 @@ export default function AwsBedrockLLMOptions({ settings }) {
           <input
             type="password"
             name="AwsBedrockLLMAccessKey"
-            className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="AWS Bedrock IAM User Access Key"
             defaultValue={
               settings?.AwsBedrockLLMAccessKey ? "*".repeat(20) : ""
@@ -103,13 +111,13 @@ export default function AwsBedrockLLMOptions({ settings }) {
         </div>
         {useSessionToken && (
           <div className="flex flex-col w-60">
-            <label className="text-white text-sm font-semibold block mb-3">
+            <label className="text-theme-text-primary text-sm font-semibold block mb-3">
               AWS Bedrock Session Token
             </label>
             <input
               type="password"
               name="AwsBedrockLLMSessionToken"
-              className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+              className="bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
               placeholder="AWS Bedrock Session Token"
               defaultValue={
                 settings?.AwsBedrockLLMSessionToken ? "*".repeat(20) : ""
@@ -128,7 +136,7 @@ export default function AwsBedrockLLMOptions({ settings }) {
             name="AwsBedrockLLMRegion"
             defaultValue={settings?.AwsBedrockLLMRegion || "us-west-2"}
             required={true}
-            className="border-none bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+            className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           >
             {AWS_REGIONS.map((region) => {
               return (
@@ -151,7 +159,7 @@ export default function AwsBedrockLLMOptions({ settings }) {
               <input
                 type="text"
                 name="AwsBedrockLLMModel"
-                className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                 placeholder="Model id from AWS eg: meta.llama3.1-v0.1"
                 defaultValue={settings?.AwsBedrockLLMModel}
                 required={true}
@@ -166,7 +174,7 @@ export default function AwsBedrockLLMOptions({ settings }) {
               <input
                 type="number"
                 name="AwsBedrockLLMTokenLimit"
-                className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                 placeholder="Content window limit (eg: 4096)"
                 min={1}
                 onScroll={(e) => e.target.blur()}
diff --git a/frontend/src/components/LLMSelection/AzureAiOptions/index.jsx b/frontend/src/components/LLMSelection/AzureAiOptions/index.jsx
index c04f9f3fd..341338a1d 100644
--- a/frontend/src/components/LLMSelection/AzureAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/AzureAiOptions/index.jsx
@@ -9,7 +9,7 @@ export default function AzureAiOptions({ settings }) {
           <input
             type="url"
             name="AzureOpenAiEndpoint"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="https://my-azure.openai.azure.com"
             defaultValue={settings?.AzureOpenAiEndpoint}
             required={true}
@@ -25,7 +25,7 @@ export default function AzureAiOptions({ settings }) {
           <input
             type="password"
             name="AzureOpenAiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Azure OpenAI API Key"
             defaultValue={settings?.AzureOpenAiKey ? "*".repeat(20) : ""}
             required={true}
@@ -41,7 +41,7 @@ export default function AzureAiOptions({ settings }) {
           <input
             type="text"
             name="AzureOpenAiModelPref"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Azure OpenAI chat model deployment name"
             defaultValue={settings?.AzureOpenAiModelPref}
             required={true}
@@ -59,7 +59,7 @@ export default function AzureAiOptions({ settings }) {
           <select
             name="AzureOpenAiTokenLimit"
             defaultValue={settings?.AzureOpenAiTokenLimit || 4096}
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             required={true}
           >
             <option value={4096}>4,096 (gpt-3.5-turbo)</option>
diff --git a/frontend/src/components/LLMSelection/CohereAiOptions/index.jsx b/frontend/src/components/LLMSelection/CohereAiOptions/index.jsx
index 1a564b69a..a87168474 100644
--- a/frontend/src/components/LLMSelection/CohereAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/CohereAiOptions/index.jsx
@@ -9,7 +9,7 @@ export default function CohereAiOptions({ settings }) {
           <input
             type="password"
             name="CohereApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Cohere API Key"
             defaultValue={settings?.CohereApiKey ? "*".repeat(20) : ""}
             required={true}
@@ -25,7 +25,7 @@ export default function CohereAiOptions({ settings }) {
             name="CohereModelPref"
             defaultValue={settings?.CohereModelPref || "command-r"}
             required={true}
-            className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+            className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
           >
             {[
               "command-r",
diff --git a/frontend/src/components/LLMSelection/DeepSeekOptions/index.jsx b/frontend/src/components/LLMSelection/DeepSeekOptions/index.jsx
index 5c83d65a9..66f402e69 100644
--- a/frontend/src/components/LLMSelection/DeepSeekOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/DeepSeekOptions/index.jsx
@@ -16,7 +16,7 @@ export default function DeepSeekOptions({ settings }) {
         <input
           type="password"
           name="DeepSeekApiKey"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+          className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="DeepSeek API Key"
           defaultValue={settings?.DeepSeekApiKey ? "*".repeat(20) : ""}
           required={true}
@@ -65,7 +65,7 @@ function DeepSeekModelSelection({ apiKey, settings }) {
         <select
           name="DeepSeekModelPref"
           disabled={true}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             -- loading available models --
@@ -83,7 +83,7 @@ function DeepSeekModelSelection({ apiKey, settings }) {
       <select
         name="DeepSeekModelPref"
         required={true}
-        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
       >
         {models.map((model) => (
           <option
diff --git a/frontend/src/components/LLMSelection/FireworksAiOptions/index.jsx b/frontend/src/components/LLMSelection/FireworksAiOptions/index.jsx
index e61e4fc4b..cc5b2906d 100644
--- a/frontend/src/components/LLMSelection/FireworksAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/FireworksAiOptions/index.jsx
@@ -11,7 +11,7 @@ export default function FireworksAiOptions({ settings }) {
         <input
           type="password"
           name="FireworksAiLLMApiKey"
-          className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+          className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="Fireworks AI API Key"
           defaultValue={settings?.FireworksAiLLMApiKey ? "*".repeat(20) : ""}
           required={true}
@@ -58,7 +58,7 @@ function FireworksAiModelSelection({ settings }) {
         <select
           name="FireworksAiLLMModelPref"
           disabled={true}
-          className="border-none bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="border-none bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             -- loading available models --
@@ -76,7 +76,7 @@ function FireworksAiModelSelection({ settings }) {
       <select
         name="FireworksAiLLMModelPref"
         required={true}
-        className="border-none bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="border-none bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
       >
         {Object.keys(groupedModels)
           .sort()
diff --git a/frontend/src/components/LLMSelection/GeminiLLMOptions/index.jsx b/frontend/src/components/LLMSelection/GeminiLLMOptions/index.jsx
index 5e7a4d785..f3635977a 100644
--- a/frontend/src/components/LLMSelection/GeminiLLMOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/GeminiLLMOptions/index.jsx
@@ -9,7 +9,7 @@ export default function GeminiLLMOptions({ settings }) {
           <input
             type="password"
             name="GeminiLLMApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Google Gemini API Key"
             defaultValue={settings?.GeminiLLMApiKey ? "*".repeat(20) : ""}
             required={true}
@@ -28,7 +28,7 @@ export default function GeminiLLMOptions({ settings }) {
                 name="GeminiLLMModelPref"
                 defaultValue={settings?.GeminiLLMModelPref || "gemini-pro"}
                 required={true}
-                className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+                className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
               >
                 <optgroup label="Stable Models">
                   {[
@@ -70,7 +70,7 @@ export default function GeminiLLMOptions({ settings }) {
                   settings?.GeminiSafetySetting || "BLOCK_MEDIUM_AND_ABOVE"
                 }
                 required={true}
-                className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+                className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
               >
                 <option value="BLOCK_NONE">None</option>
                 <option value="BLOCK_ONLY_HIGH">Block few</option>
diff --git a/frontend/src/components/LLMSelection/GenericOpenAiOptions/index.jsx b/frontend/src/components/LLMSelection/GenericOpenAiOptions/index.jsx
index a00db7c02..8e7822f40 100644
--- a/frontend/src/components/LLMSelection/GenericOpenAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/GenericOpenAiOptions/index.jsx
@@ -9,7 +9,7 @@ export default function GenericOpenAiOptions({ settings }) {
           <input
             type="url"
             name="GenericOpenAiBasePath"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="eg: https://proxy.openai.com"
             defaultValue={settings?.GenericOpenAiBasePath}
             required={true}
@@ -24,7 +24,7 @@ export default function GenericOpenAiOptions({ settings }) {
           <input
             type="password"
             name="GenericOpenAiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Generic service API Key"
             defaultValue={settings?.GenericOpenAiKey ? "*".repeat(20) : ""}
             required={false}
@@ -39,7 +39,7 @@ export default function GenericOpenAiOptions({ settings }) {
           <input
             type="text"
             name="GenericOpenAiModelPref"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Model id used for chat requests"
             defaultValue={settings?.GenericOpenAiModelPref}
             required={true}
@@ -55,7 +55,7 @@ export default function GenericOpenAiOptions({ settings }) {
           <input
             type="number"
             name="GenericOpenAiTokenLimit"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Content window limit (eg: 4096)"
             min={1}
             onScroll={(e) => e.target.blur()}
@@ -71,7 +71,7 @@ export default function GenericOpenAiOptions({ settings }) {
           <input
             type="number"
             name="GenericOpenAiMaxTokens"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Max tokens per request (eg: 1024)"
             min={1}
             defaultValue={settings?.GenericOpenAiMaxTokens || 1024}
diff --git a/frontend/src/components/LLMSelection/GroqAiOptions/index.jsx b/frontend/src/components/LLMSelection/GroqAiOptions/index.jsx
index 4dd923d61..43c8f0038 100644
--- a/frontend/src/components/LLMSelection/GroqAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/GroqAiOptions/index.jsx
@@ -14,7 +14,7 @@ export default function GroqAiOptions({ settings }) {
         <input
           type="password"
           name="GroqApiKey"
-          className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+          className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="Groq API Key"
           defaultValue={settings?.GroqApiKey ? "*".repeat(20) : ""}
           required={true}
@@ -67,7 +67,7 @@ function GroqAIModelSelection({ apiKey, settings }) {
         <select
           name="GroqModelPref"
           disabled={true}
-          className="border-none bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="border-none bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             --loading available models--
@@ -88,7 +88,7 @@ function GroqAIModelSelection({ apiKey, settings }) {
       <select
         name="GroqModelPref"
         required={true}
-        className="border-none bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="border-none bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
       >
         {customModels.length > 0 && (
           <optgroup label="Available models">
diff --git a/frontend/src/components/LLMSelection/HuggingFaceOptions/index.jsx b/frontend/src/components/LLMSelection/HuggingFaceOptions/index.jsx
index d4c2fa349..caf259169 100644
--- a/frontend/src/components/LLMSelection/HuggingFaceOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/HuggingFaceOptions/index.jsx
@@ -9,7 +9,7 @@ export default function HuggingFaceOptions({ settings }) {
           <input
             type="url"
             name="HuggingFaceLLMEndpoint"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="https://example.endpoints.huggingface.cloud"
             defaultValue={settings?.HuggingFaceLLMEndpoint}
             required={true}
@@ -24,7 +24,7 @@ export default function HuggingFaceOptions({ settings }) {
           <input
             type="password"
             name="HuggingFaceLLMAccessToken"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="HuggingFace Access Token"
             defaultValue={
               settings?.HuggingFaceLLMAccessToken ? "*".repeat(20) : ""
@@ -41,7 +41,7 @@ export default function HuggingFaceOptions({ settings }) {
           <input
             type="number"
             name="HuggingFaceLLMTokenLimit"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="4096"
             min={1}
             onScroll={(e) => e.target.blur()}
diff --git a/frontend/src/components/LLMSelection/KoboldCPPOptions/index.jsx b/frontend/src/components/LLMSelection/KoboldCPPOptions/index.jsx
index 57fedc62b..cd60a9a2e 100644
--- a/frontend/src/components/LLMSelection/KoboldCPPOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/KoboldCPPOptions/index.jsx
@@ -41,7 +41,7 @@ export default function KoboldCPPOptions({ settings }) {
           <input
             type="number"
             name="KoboldCPPTokenLimit"
-            className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="4096"
             min={1}
             value={tokenLimit}
@@ -97,7 +97,7 @@ export default function KoboldCPPOptions({ settings }) {
             <input
               type="url"
               name="KoboldCPPBasePath"
-              className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+              className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
               placeholder="http://127.0.0.1:5000/v1"
               value={basePathValue.value}
               required={true}
@@ -153,7 +153,7 @@ function KoboldCPPModelSelection({ settings, basePath = null }) {
         <select
           name="KoboldCPPModelPref"
           disabled={true}
-          className="border-none bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="border-none bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             {basePath?.includes("/v1")
@@ -177,7 +177,7 @@ function KoboldCPPModelSelection({ settings, basePath = null }) {
       <select
         name="KoboldCPPModelPref"
         required={true}
-        className="border-none bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="border-none bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
       >
         {customModels.map((model) => (
           <option
diff --git a/frontend/src/components/LLMSelection/LLMItem/index.jsx b/frontend/src/components/LLMSelection/LLMItem/index.jsx
index e96c5f3ea..ef773ff66 100644
--- a/frontend/src/components/LLMSelection/LLMItem/index.jsx
+++ b/frontend/src/components/LLMSelection/LLMItem/index.jsx
@@ -9,8 +9,8 @@ export default function LLMItem({
   return (
     <div
       onClick={() => onClick(value)}
-      className={`w-full p-2 rounded-md hover:cursor-pointer hover:bg-white/10 ${
-        checked ? "bg-white/10" : ""
+      className={`w-full p-2 rounded-md hover:cursor-pointer hover:bg-theme-bg-secondary ${
+        checked ? "bg-theme-bg-secondary" : ""
       }`}
     >
       <input
diff --git a/frontend/src/components/LLMSelection/LMStudioOptions/index.jsx b/frontend/src/components/LLMSelection/LMStudioOptions/index.jsx
index 2f0d95f6e..1d6f8d56c 100644
--- a/frontend/src/components/LLMSelection/LMStudioOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/LMStudioOptions/index.jsx
@@ -56,7 +56,7 @@ export default function LMStudioOptions({ settings, showAlert = false }) {
           <input
             type="number"
             name="LMStudioTokenLimit"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="4096"
             defaultChecked="4096"
             min={1}
@@ -113,7 +113,7 @@ export default function LMStudioOptions({ settings, showAlert = false }) {
             <input
               type="url"
               name="LMStudioBasePath"
-              className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+              className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
               placeholder="http://localhost:1234/v1"
               value={basePathValue.value}
               required={true}
@@ -169,7 +169,7 @@ function LMStudioModelSelection({ settings, basePath = null }) {
         <select
           name="LMStudioModelPref"
           disabled={true}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             {!!basePath
@@ -193,7 +193,7 @@ function LMStudioModelSelection({ settings, basePath = null }) {
       <select
         name="LMStudioModelPref"
         required={true}
-        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
       >
         {customModels.length > 0 && (
           <optgroup label="Your loaded models">
diff --git a/frontend/src/components/LLMSelection/LiteLLMOptions/index.jsx b/frontend/src/components/LLMSelection/LiteLLMOptions/index.jsx
index 2e8792ba9..732a3d1cf 100644
--- a/frontend/src/components/LLMSelection/LiteLLMOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/LiteLLMOptions/index.jsx
@@ -17,7 +17,7 @@ export default function LiteLLMOptions({ settings }) {
           <input
             type="url"
             name="LiteLLMBasePath"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="http://127.0.0.1:4000"
             defaultValue={settings?.LiteLLMBasePath}
             required={true}
@@ -39,7 +39,7 @@ export default function LiteLLMOptions({ settings }) {
           <input
             type="number"
             name="LiteLLMTokenLimit"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="4096"
             min={1}
             onScroll={(e) => e.target.blur()}
@@ -59,7 +59,7 @@ export default function LiteLLMOptions({ settings }) {
           <input
             type="password"
             name="LiteLLMAPIKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="sk-mysecretkey"
             defaultValue={settings?.LiteLLMAPIKey ? "*".repeat(20) : ""}
             autoComplete="off"
@@ -105,7 +105,7 @@ function LiteLLMModelSelection({ settings, basePath = null, apiKey = null }) {
         <select
           name="LiteLLMModelPref"
           disabled={true}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             {basePath?.includes("/v1")
@@ -125,7 +125,7 @@ function LiteLLMModelSelection({ settings, basePath = null, apiKey = null }) {
       <select
         name="LiteLLMModelPref"
         required={true}
-        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
       >
         {customModels.length > 0 && (
           <optgroup label="Your loaded models">
diff --git a/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx b/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx
index 7ecb0efb5..a9cde3c27 100644
--- a/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/LocalAiOptions/index.jsx
@@ -56,7 +56,7 @@ export default function LocalAiOptions({ settings, showAlert = false }) {
               <input
                 type="number"
                 name="LocalAiTokenLimit"
-                className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                 placeholder="4096"
                 min={1}
                 onScroll={(e) => e.target.blur()}
@@ -77,7 +77,7 @@ export default function LocalAiOptions({ settings, showAlert = false }) {
           <input
             type="password"
             name="LocalAiApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="sk-mysecretkey"
             defaultValue={settings?.LocalAiApiKey ? "*".repeat(20) : ""}
             autoComplete="off"
@@ -128,7 +128,7 @@ export default function LocalAiOptions({ settings, showAlert = false }) {
             <input
               type="url"
               name="LocalAiBasePath"
-              className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+              className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
               placeholder="http://localhost:8080/v1"
               value={basePathValue.value}
               required={true}
@@ -176,7 +176,7 @@ function LocalAIModelSelection({ settings, basePath = null, apiKey = null }) {
         <select
           name="LocalAiModelPref"
           disabled={true}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             {basePath?.includes("/v1")
@@ -196,7 +196,7 @@ function LocalAIModelSelection({ settings, basePath = null, apiKey = null }) {
       <select
         name="LocalAiModelPref"
         required={true}
-        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
       >
         {customModels.length > 0 && (
           <optgroup label="Your loaded models">
diff --git a/frontend/src/components/LLMSelection/MistralOptions/index.jsx b/frontend/src/components/LLMSelection/MistralOptions/index.jsx
index d0172fa53..5d29bd960 100644
--- a/frontend/src/components/LLMSelection/MistralOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/MistralOptions/index.jsx
@@ -14,7 +14,7 @@ export default function MistralOptions({ settings }) {
         <input
           type="password"
           name="MistralApiKey"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+          className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="Mistral API Key"
           defaultValue={settings?.MistralApiKey ? "*".repeat(20) : ""}
           required={true}
@@ -62,7 +62,7 @@ function MistralModelSelection({ apiKey, settings }) {
         <select
           name="MistralModelPref"
           disabled={true}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             {!!apiKey
@@ -82,7 +82,7 @@ function MistralModelSelection({ apiKey, settings }) {
       <select
         name="MistralModelPref"
         required={true}
-        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
       >
         {customModels.length > 0 && (
           <optgroup label="Available Mistral Models">
diff --git a/frontend/src/components/LLMSelection/NativeLLMOptions/index.jsx b/frontend/src/components/LLMSelection/NativeLLMOptions/index.jsx
index 5e5548d3a..1f31123b4 100644
--- a/frontend/src/components/LLMSelection/NativeLLMOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/NativeLLMOptions/index.jsx
@@ -43,7 +43,7 @@ function NativeModelSelection({ settings }) {
         <select
           name="NativeLLMModelPref"
           disabled={true}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             -- waiting for models --
@@ -62,7 +62,7 @@ function NativeModelSelection({ settings }) {
         <select
           name="NativeLLMModelPref"
           required={true}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
         >
           {customModels.length > 0 && (
             <optgroup label="Your loaded models">
@@ -88,7 +88,7 @@ function NativeModelSelection({ settings }) {
         <input
           type="number"
           name="NativeLLMTokenLimit"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+          className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="4096"
           min={1}
           onScroll={(e) => e.target.blur()}
diff --git a/frontend/src/components/LLMSelection/NovitaLLMOptions/index.jsx b/frontend/src/components/LLMSelection/NovitaLLMOptions/index.jsx
index 26e1fe04b..f1ca7f914 100644
--- a/frontend/src/components/LLMSelection/NovitaLLMOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/NovitaLLMOptions/index.jsx
@@ -4,16 +4,16 @@ import { useState, useEffect } from "react";
 
 export default function NovitaLLMOptions({ settings }) {
   return (
-    <div className="flex flex-col gap-y-4 mt-1.5">
-      <div className="flex gap-[36px]">
+    <div className="w-full flex flex-col gap-y-7">
+      <div className="w-full flex items-start gap-[36px] mt-1.5">
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-3">
+          <label className="text-theme-text-primary text-sm font-semibold block mb-3">
             Novita API Key
           </label>
           <input
             type="password"
             name="NovitaLLMApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Novita API Key"
             defaultValue={settings?.NovitaLLMApiKey ? "*".repeat(20) : ""}
             required={true}
@@ -35,27 +35,29 @@ function AdvancedControls({ settings }) {
 
   return (
     <div className="flex flex-col gap-y-4">
-      <button
-        type="button"
-        onClick={() => setShowAdvancedControls(!showAdvancedControls)}
-        className="text-white hover:text-white/70 flex items-center text-sm"
-      >
-        {showAdvancedControls ? "Hide" : "Show"} advanced controls
-        {showAdvancedControls ? (
-          <CaretUp size={14} className="ml-1" />
-        ) : (
-          <CaretDown size={14} className="ml-1" />
-        )}
-      </button>
+      <div className="flex justify-start">
+        <button
+          type="button"
+          onClick={() => setShowAdvancedControls(!showAdvancedControls)}
+          className="text-theme-text-primary hover:text-theme-text-secondary flex items-center text-sm"
+        >
+          {showAdvancedControls ? "Hide" : "Show"} advanced settings
+          {showAdvancedControls ? (
+            <CaretUp size={14} className="ml-1" />
+          ) : (
+            <CaretDown size={14} className="ml-1" />
+          )}
+        </button>
+      </div>
       <div hidden={!showAdvancedControls}>
         <div className="flex flex-col w-60">
-          <label className="text-white text-sm font-semibold block mb-3">
+          <label className="text-theme-text-primary text-sm font-semibold block mb-3">
             Stream Timeout (ms)
           </label>
           <input
             type="number"
             name="NovitaLLMTimeout"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Timeout value between token responses to auto-timeout the stream"
             defaultValue={settings?.NovitaLLMTimeout ?? 500}
             autoComplete="off"
@@ -63,6 +65,9 @@ function AdvancedControls({ settings }) {
             min={500}
             step={1}
           />
+          <p className="text-xs leading-[18px] font-base text-theme-text-primary text-opacity-60 mt-2">
+            Timeout value between token responses to auto-timeout the stream.
+          </p>
         </div>
       </div>
     </div>
@@ -83,10 +88,8 @@ function NovitaModelSelection({ settings }) {
           acc[model.organization].push(model);
           return acc;
         }, {});
-
         setGroupedModels(modelsByOrganization);
       }
-
       setLoading(false);
     }
     findCustomModels();
@@ -95,13 +98,13 @@ function NovitaModelSelection({ settings }) {
   if (loading || Object.keys(groupedModels).length === 0) {
     return (
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-3">
+        <label className="text-theme-text-primary text-sm font-semibold block mb-3">
           Chat Model Selection
         </label>
         <select
           name="NovitaLLMModelPref"
           disabled={true}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-theme-settings-input-bg text-theme-text-primary border-theme-border text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             -- loading available models --
@@ -113,13 +116,13 @@ function NovitaModelSelection({ settings }) {
 
   return (
     <div className="flex flex-col w-60">
-      <label className="text-white text-sm font-semibold block mb-3">
+      <label className="text-theme-text-primary text-sm font-semibold block mb-3">
         Chat Model Selection
       </label>
       <select
         name="NovitaLLMModelPref"
         required={true}
-        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-theme-settings-input-bg text-theme-text-primary border-theme-border text-sm rounded-lg block w-full p-2.5"
       >
         {Object.keys(groupedModels)
           .sort()
diff --git a/frontend/src/components/LLMSelection/OllamaLLMOptions/index.jsx b/frontend/src/components/LLMSelection/OllamaLLMOptions/index.jsx
index 9bd95bca7..6f3c98b74 100644
--- a/frontend/src/components/LLMSelection/OllamaLLMOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/OllamaLLMOptions/index.jsx
@@ -40,7 +40,7 @@ export default function OllamaLLMOptions({ settings }) {
           <input
             type="number"
             name="OllamaLLMTokenLimit"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="4096"
             defaultChecked="4096"
             min={1}
@@ -97,7 +97,7 @@ export default function OllamaLLMOptions({ settings }) {
             <input
               type="url"
               name="OllamaLLMBasePath"
-              className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+              className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
               placeholder="http://127.0.0.1:11434"
               value={basePathValue.value}
               required={true}
@@ -118,7 +118,7 @@ export default function OllamaLLMOptions({ settings }) {
             <select
               name="OllamaLLMKeepAliveSeconds"
               required={true}
-              className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+              className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
               defaultValue={settings?.OllamaLLMKeepAliveSeconds ?? "300"}
             >
               <option value="0">No cache</option>
@@ -153,7 +153,7 @@ export default function OllamaLLMOptions({ settings }) {
             <select
               name="OllamaLLMPerformanceMode"
               required={true}
-              className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+              className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
               value={performanceMode}
               onChange={(e) => setPerformanceMode(e.target.value)}
             >
@@ -223,7 +223,7 @@ function OllamaLLMModelSelection({ settings, basePath = null }) {
         <select
           name="OllamaLLMModelPref"
           disabled={true}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             {!!basePath
@@ -247,7 +247,7 @@ function OllamaLLMModelSelection({ settings, basePath = null }) {
       <select
         name="OllamaLLMModelPref"
         required={true}
-        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
       >
         {customModels.length > 0 && (
           <optgroup label="Your loaded models">
diff --git a/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx b/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx
index f52965cd4..6b2611233 100644
--- a/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/OpenAiOptions/index.jsx
@@ -14,7 +14,7 @@ export default function OpenAiOptions({ settings }) {
         <input
           type="password"
           name="OpenAiKey"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+          className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="OpenAI API Key"
           defaultValue={settings?.OpenAiKey ? "*".repeat(20) : ""}
           required={true}
@@ -66,7 +66,7 @@ function OpenAIModelSelection({ apiKey, settings }) {
         <select
           name="OpenAiModelPref"
           disabled={true}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             -- loading available models --
@@ -84,7 +84,7 @@ function OpenAIModelSelection({ apiKey, settings }) {
       <select
         name="OpenAiModelPref"
         required={true}
-        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
       >
         {Object.keys(groupedModels)
           .sort()
diff --git a/frontend/src/components/LLMSelection/OpenRouterOptions/index.jsx b/frontend/src/components/LLMSelection/OpenRouterOptions/index.jsx
index f19956645..369bd0501 100644
--- a/frontend/src/components/LLMSelection/OpenRouterOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/OpenRouterOptions/index.jsx
@@ -13,7 +13,7 @@ export default function OpenRouterOptions({ settings }) {
           <input
             type="password"
             name="OpenRouterApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="OpenRouter API Key"
             defaultValue={settings?.OpenRouterApiKey ? "*".repeat(20) : ""}
             required={true}
@@ -55,7 +55,7 @@ function AdvancedControls({ settings }) {
           <input
             type="number"
             name="OpenRouterTimeout"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Timeout value between token responses to auto-timeout the stream"
             defaultValue={settings?.OpenRouterTimeout ?? 500}
             autoComplete="off"
@@ -101,7 +101,7 @@ function OpenRouterModelSelection({ settings }) {
         <select
           name="OpenRouterModelPref"
           disabled={true}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             -- loading available models --
@@ -119,7 +119,7 @@ function OpenRouterModelSelection({ settings }) {
       <select
         name="OpenRouterModelPref"
         required={true}
-        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
       >
         {Object.keys(groupedModels)
           .sort()
diff --git a/frontend/src/components/LLMSelection/PerplexityOptions/index.jsx b/frontend/src/components/LLMSelection/PerplexityOptions/index.jsx
index 8f4d1d05b..fc2c23f89 100644
--- a/frontend/src/components/LLMSelection/PerplexityOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/PerplexityOptions/index.jsx
@@ -11,7 +11,7 @@ export default function PerplexityOptions({ settings }) {
         <input
           type="password"
           name="PerplexityApiKey"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+          className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="Perplexity API Key"
           defaultValue={settings?.PerplexityApiKey ? "*".repeat(20) : ""}
           required={true}
@@ -49,7 +49,7 @@ function PerplexityModelSelection({ settings }) {
         <select
           name="PerplexityModelPref"
           disabled={true}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             -- loading available models --
@@ -67,7 +67,7 @@ function PerplexityModelSelection({ settings }) {
       <select
         name="PerplexityModelPref"
         required={true}
-        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
       >
         {customModels.length > 0 && (
           <optgroup label="Available Perplexity Models">
diff --git a/frontend/src/components/LLMSelection/TextGenWebUIOptions/index.jsx b/frontend/src/components/LLMSelection/TextGenWebUIOptions/index.jsx
index 55e9c86fc..e64cd2cd5 100644
--- a/frontend/src/components/LLMSelection/TextGenWebUIOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/TextGenWebUIOptions/index.jsx
@@ -8,7 +8,7 @@ export default function TextGenWebUIOptions({ settings }) {
         <input
           type="url"
           name="TextGenWebUIBasePath"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+          className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="http://127.0.0.1:5000/v1"
           defaultValue={settings?.TextGenWebUIBasePath}
           required={true}
@@ -23,7 +23,7 @@ export default function TextGenWebUIOptions({ settings }) {
         <input
           type="number"
           name="TextGenWebUITokenLimit"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+          className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="Content window limit (eg: 4096)"
           min={1}
           onScroll={(e) => e.target.blur()}
@@ -39,7 +39,7 @@ export default function TextGenWebUIOptions({ settings }) {
         <input
           type="password"
           name="TextGenWebUIAPIKey"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+          className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="TextGen Web UI API Key"
           defaultValue={settings?.TextGenWebUIAPIKey ? "*".repeat(20) : ""}
           autoComplete="off"
diff --git a/frontend/src/components/LLMSelection/TogetherAiOptions/index.jsx b/frontend/src/components/LLMSelection/TogetherAiOptions/index.jsx
index ef1651c89..4765633cf 100644
--- a/frontend/src/components/LLMSelection/TogetherAiOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/TogetherAiOptions/index.jsx
@@ -11,7 +11,7 @@ export default function TogetherAiOptions({ settings }) {
         <input
           type="password"
           name="TogetherAiApiKey"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+          className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="Together AI API Key"
           defaultValue={settings?.TogetherAiApiKey ? "*".repeat(20) : ""}
           required={true}
@@ -58,7 +58,7 @@ function TogetherAiModelSelection({ settings }) {
         <select
           name="TogetherAiModelPref"
           disabled={true}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             -- loading available models --
@@ -76,7 +76,7 @@ function TogetherAiModelSelection({ settings }) {
       <select
         name="TogetherAiModelPref"
         required={true}
-        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
       >
         {Object.keys(groupedModels)
           .sort()
diff --git a/frontend/src/components/LLMSelection/XAiLLMOptions/index.jsx b/frontend/src/components/LLMSelection/XAiLLMOptions/index.jsx
index d760a8ba4..a17cf1385 100644
--- a/frontend/src/components/LLMSelection/XAiLLMOptions/index.jsx
+++ b/frontend/src/components/LLMSelection/XAiLLMOptions/index.jsx
@@ -14,7 +14,7 @@ export default function XAILLMOptions({ settings }) {
         <input
           type="password"
           name="XAIApiKey"
-          className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+          className="bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="xAI API Key"
           defaultValue={settings?.XAIApiKey ? "*".repeat(20) : ""}
           required={true}
@@ -61,19 +61,19 @@ function XAIModelSelection({ apiKey, settings }) {
   if (loading) {
     return (
       <div className="flex flex-col w-60">
-        <label className="text-white text-sm font-semibold block mb-3">
+        <label className="text-theme-text-primary text-sm font-semibold block mb-3">
           Chat Model Selection
         </label>
         <select
           name="XAIModelPref"
           disabled={true}
-          className="border-none bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-theme-settings-input-bg text-theme-text-primary border-theme-border text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             --loading available models--
           </option>
         </select>
-        <p className="text-xs leading-[18px] font-base text-white text-opacity-60 mt-2">
+        <p className="text-xs leading-[18px] font-base text-theme-text-primary opacity-60 mt-2">
           Enter a valid API key to view all available models for your account.
         </p>
       </div>
@@ -82,13 +82,13 @@ function XAIModelSelection({ apiKey, settings }) {
 
   return (
     <div className="flex flex-col w-60">
-      <label className="text-white text-sm font-semibold block mb-3">
+      <label className="text-theme-text-primary text-sm font-semibold block mb-3">
         Chat Model Selection
       </label>
       <select
         name="XAIModelPref"
         required={true}
-        className="border-none bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-theme-settings-input-bg text-theme-text-primary border-theme-border text-sm rounded-lg block w-full p-2.5"
       >
         {customModels.length > 0 && (
           <optgroup label="Available models">
@@ -106,7 +106,7 @@ function XAIModelSelection({ apiKey, settings }) {
           </optgroup>
         )}
       </select>
-      <p className="text-xs leading-[18px] font-base text-white text-opacity-60 mt-2">
+      <p className="text-xs leading-[18px] font-base text-theme-text-primary opacity-60 mt-2">
         Select the xAI model you want to use for your conversations.
       </p>
     </div>
diff --git a/frontend/src/components/ModalWrapper/index.jsx b/frontend/src/components/ModalWrapper/index.jsx
index b780e5731..7c45c22c5 100644
--- a/frontend/src/components/ModalWrapper/index.jsx
+++ b/frontend/src/components/ModalWrapper/index.jsx
@@ -1,7 +1,7 @@
 import { createPortal } from "react-dom";
 /**
  * @typedef {Object} ModalWrapperProps
- * @property {import("react").ReactComponentElement} children - The DOM/JSX to render 
+ * @property {import("react").ReactComponentElement} children - The DOM/JSX to render
  * @property {boolean} isOpen - Option that renders the modal
  * @property {boolean} noPortal - (default: false) Used for creating sub-DOM modals that need to be rendered as a child element instead of a modal placed at the root
  * Note: This can impact the bg-overlay presentation due to conflicting DOM positions so if using this property you should
@@ -17,14 +17,14 @@ export default function ModalWrapper({ children, isOpen, noPortal = false }) {
 
   if (noPortal) {
     return (
-      <div className="bg-black/60 backdrop-blur-sm fixed top-0 left-0 outline-none w-screen h-screen flex items-center justify-center z-30">
+      <div className="bg-black/60 backdrop-blur-sm fixed top-0 left-0 outline-none w-screen h-screen flex items-center justify-center z-99">
         {children}
       </div>
     );
   }
 
   return createPortal(
-    <div className="bg-black/60 backdrop-blur-sm fixed top-0 left-0 outline-none w-screen h-screen flex items-center justify-center z-30">
+    <div className="bg-black/60 backdrop-blur-sm fixed top-0 left-0 outline-none w-screen h-screen flex items-center justify-center z-99">
       {children}
     </div>,
     document.getElementById("root")
diff --git a/frontend/src/components/Modals/DisplayRecoveryCodeModal/index.jsx b/frontend/src/components/Modals/DisplayRecoveryCodeModal/index.jsx
index 4a3751385..f8f56eb29 100644
--- a/frontend/src/components/Modals/DisplayRecoveryCodeModal/index.jsx
+++ b/frontend/src/components/Modals/DisplayRecoveryCodeModal/index.jsx
@@ -2,6 +2,7 @@ import showToast from "@/utils/toast";
 import { DownloadSimple, Key } from "@phosphor-icons/react";
 import { saveAs } from "file-saver";
 import { useState } from "react";
+import ModalWrapper from "@/components/ModalWrapper";
 
 export default function RecoveryCodeModal({
   recoveryCodes,
@@ -32,55 +33,59 @@ export default function RecoveryCodeModal({
   };
 
   return (
-    <div className="inline-block bg-secondary rounded-lg text-left overflow-hidden shadow-xl transform transition-all border-2 border-[#BCC9DB]/10 w-[600px] mx-4">
-      <div className="md:py-[35px] md:px-[50px] py-[28px] px-[20px]">
-        <div className="flex gap-x-2">
-          <Key size={24} className="text-white" weight="bold" />
-          <h3
-            className="text-lg leading-6 font-medium text-white"
-            id="modal-headline"
-          >
-            Recovery Codes
-          </h3>
+    <ModalWrapper isOpen={true}>
+      <div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
+        <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+          <div className="w-full flex gap-x-2 items-center">
+            <Key size={24} className="text-white" weight="bold" />
+            <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+              Recovery Codes
+            </h3>
+          </div>
         </div>
-        <div className="mt-4">
-          <p className="text-sm text-white flex flex-col">
-            In order to reset your password in the future, you will need these
-            recovery codes. Download or copy your recovery codes to save them.{" "}
-            <br />
-            <b className="mt-4">These recovery codes are only shown once!</b>
-          </p>
-          <div
-            className="bg-dark-highlight text-white hover:text-primary-button
-                 flex items-center justify-center rounded-md mt-6 cursor-pointer"
-            onClick={handleCopyToClipboard}
-          >
-            <ul className="space-y-2 md:p-6 p-4">
-              {recoveryCodes.map((code, index) => (
-                <li key={index} className="md:text-sm text-xs">
-                  {code}
-                </li>
-              ))}
-            </ul>
+        <div
+          className="h-full w-full overflow-y-auto"
+          style={{ maxHeight: "calc(100vh - 200px)" }}
+        >
+          <div className="py-7 px-9 space-y-2 flex-col">
+            <p className="text-sm text-white flex flex-col">
+              In order to reset your password in the future, you will need these
+              recovery codes. Download or copy your recovery codes to save them.{" "}
+              <br />
+              <b className="mt-4">These recovery codes are only shown once!</b>
+            </p>
+            <div
+              className="bg-theme-settings-input-bg text-white hover:text-primary-button
+                   flex items-center justify-center rounded-md mt-6 cursor-pointer"
+              onClick={handleCopyToClipboard}
+            >
+              <ul className="space-y-2 md:p-6 p-4">
+                {recoveryCodes.map((code, index) => (
+                  <li key={index} className="md:text-sm text-xs">
+                    {code}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+          <div className="flex w-full justify-end items-center p-6 space-x-2 border-t border-theme-modal-border rounded-b">
+            <button
+              type="button"
+              className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm flex items-center gap-x-2"
+              onClick={downloadClicked ? handleClose : downloadRecoveryCodes}
+            >
+              {downloadClicked ? (
+                "Close"
+              ) : (
+                <>
+                  <DownloadSimple weight="bold" size={18} />
+                  <p>Download</p>
+                </>
+              )}
+            </button>
           </div>
         </div>
       </div>
-      <div className="flex w-full justify-center items-center p-3 space-x-2 rounded-b border-gray-500/50 -mt-4 mb-4">
-        <button
-          type="button"
-          className="transition-all duration-300 text-xs md:w-[500px] md:h-[34px] h-[48px] w-full m-2 font-semibold rounded-lg bg-primary-button hover:bg-secondary border-2 border-transparent hover:border-primary-button hover:text-white whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)] flex justify-center items-center gap-x-2"
-          onClick={downloadClicked ? handleClose : downloadRecoveryCodes}
-        >
-          {downloadClicked ? (
-            "Close"
-          ) : (
-            <>
-              <DownloadSimple weight="bold" size={18} />
-              <p>Download</p>
-            </>
-          )}
-        </button>
-      </div>
-    </div>
+    </ModalWrapper>
   );
 }
diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/ConnectorOption/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/ConnectorOption/index.jsx
index e0b10e050..ad1211e98 100644
--- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/ConnectorOption/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/ConnectorOption/index.jsx
@@ -9,8 +9,8 @@ export default function ConnectorOption({
   return (
     <button
       onClick={() => setSelectedConnector(slug)}
-      className={`flex text-left gap-x-3.5 items-center py-2 px-4 hover:bg-white/10 ${
-        selectedConnector === slug ? "bg-white/10" : ""
+      className={`flex text-left gap-x-3.5 items-center py-2 px-4 hover:bg-theme-file-picker-hover ${
+        selectedConnector === slug ? "bg-theme-file-picker-hover" : ""
       } rounded-lg cursor-pointer w-full`}
     >
       <img src={image} alt={name} className="w-[40px] h-[40px] rounded-md" />
diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Confluence/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Confluence/index.jsx
index 736f2cded..77158dc9b 100644
--- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Confluence/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Confluence/index.jsx
@@ -58,18 +58,18 @@ export default function ConfluenceOptions() {
               <div className="flex flex-col pr-10">
                 <div className="flex flex-col gap-y-1 mb-4">
                   <label className="text-white text-sm font-bold flex gap-x-2 items-center">
-                    <p className="font-bold text-white">
+                    <p className="font-bold text-theme-text-primary">
                       Confluence deployment type
                     </p>
                   </label>
-                  <p className="text-xs font-normal text-white/50">
+                  <p className="text-xs font-normal text-theme-text-secondary">
                     Determine if your Confluence instance is hosted on Atlassian
                     cloud or self-hosted.
                   </p>
                 </div>
                 <select
                   name="isCloud"
-                  className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                  className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   required={true}
                   autoComplete="off"
                   spellCheck={false}
@@ -85,14 +85,14 @@ export default function ConfluenceOptions() {
                   <label className="text-white text-sm font-bold flex gap-x-2 items-center">
                     <p className="font-bold text-white">Confluence base URL</p>
                   </label>
-                  <p className="text-xs font-normal text-white/50">
+                  <p className="text-xs font-normal text-theme-text-secondary">
                     This is the base URL of your Confluence space.
                   </p>
                 </div>
                 <input
                   type="url"
                   name="baseUrl"
-                  className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                  className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="eg: https://example.atlassian.net, http://localhost:8211, etc..."
                   required={true}
                   autoComplete="off"
@@ -104,7 +104,7 @@ export default function ConfluenceOptions() {
                   <label className="text-white text-sm font-bold">
                     Confluence space key
                   </label>
-                  <p className="text-xs font-normal text-white/50">
+                  <p className="text-xs font-normal text-theme-text-secondary">
                     This is the spaces key of your confluence instance that will
                     be used. Usually begins with ~
                   </p>
@@ -112,7 +112,7 @@ export default function ConfluenceOptions() {
                 <input
                   type="text"
                   name="spaceKey"
-                  className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                  className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="eg: ~7120208c08555d52224113949698b933a3bb56"
                   required={true}
                   autoComplete="off"
@@ -124,14 +124,14 @@ export default function ConfluenceOptions() {
                   <label className="text-white text-sm font-bold">
                     Confluence Username
                   </label>
-                  <p className="text-xs font-normal text-white/50">
+                  <p className="text-xs font-normal text-theme-text-secondary">
                     Your Confluence username.
                   </p>
                 </div>
                 <input
                   type="text"
                   name="username"
-                  className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                  className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="jdoe@example.com"
                   required={true}
                   autoComplete="off"
@@ -153,7 +153,7 @@ export default function ConfluenceOptions() {
                     <Tooltip
                       delayHide={300}
                       id="access-token-tooltip"
-                      className="max-w-xs"
+                      className="max-w-xs z-99"
                       clickable={true}
                     >
                       <p className="text-sm">
@@ -172,14 +172,14 @@ export default function ConfluenceOptions() {
                       </p>
                     </Tooltip>
                   </label>
-                  <p className="text-xs font-normal text-white/50">
+                  <p className="text-xs font-normal text-theme-text-secondary">
                     Access token for authentication.
                   </p>
                 </div>
                 <input
                   type="password"
                   name="accessToken"
-                  className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                  className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="abcd1234"
                   required={true}
                   autoComplete="off"
@@ -198,7 +198,7 @@ export default function ConfluenceOptions() {
               {loading ? "Collecting pages..." : "Submit"}
             </button>
             {loading && (
-              <p className="text-xs text-white/50">
+              <p className="text-xs text-theme-text-secondary">
                 Once complete, all pages will be available for embedding into
                 workspaces.
               </p>
diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Github/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Github/index.jsx
index 8b10f664b..4cc23e30d 100644
--- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Github/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Github/index.jsx
@@ -70,14 +70,14 @@ export default function GithubOptions() {
                   <label className="text-white text-sm font-bold">
                     GitHub Repo URL
                   </label>
-                  <p className="text-xs font-normal text-white/50">
+                  <p className="text-xs font-normal text-theme-text-secondary">
                     Url of the GitHub repo you wish to collect.
                   </p>
                 </div>
                 <input
                   type="url"
                   name="repo"
-                  className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                  className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="https://github.com/Mintplex-Labs/anything-llm"
                   required={true}
                   autoComplete="off"
@@ -90,19 +90,21 @@ export default function GithubOptions() {
                 <div className="flex flex-col gap-y-1 mb-4">
                   <label className="text-white font-bold text-sm flex gap-x-2 items-center">
                     <p className="font-bold text-white">Github Access Token</p>{" "}
-                    <p className="text-xs text-white/50 font-light flex items-center">
-                      optional
+                    <p className="text-xs font-light flex items-center">
+                      <span className="text-theme-text-secondary">
+                        optional
+                      </span>
                       <PATTooltip accessToken={accessToken} />
                     </p>
                   </label>
-                  <p className="text-xs font-normal text-white/50">
+                  <p className="text-xs font-normal text-theme-text-secondary">
                     Access Token to prevent rate limiting.
                   </p>
                 </div>
                 <input
                   type="text"
                   name="accessToken"
-                  className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                  className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="github_pat_1234_abcdefg"
                   required={false}
                   autoComplete="off"
@@ -122,7 +124,7 @@ export default function GithubOptions() {
                 <label className="text-white text-sm flex gap-x-2 items-center">
                   <p className="text-white text-sm font-bold">File Ignores</p>
                 </label>
-                <p className="text-xs font-normal text-white/50">
+                <p className="text-xs font-normal text-theme-text-secondary">
                   List in .gitignore format to ignore specific files during
                   collection. Press enter after each entry you want to save.
                 </p>
@@ -133,9 +135,9 @@ export default function GithubOptions() {
                 name="ignores"
                 placeholder="!*.js, images/*, .DS_Store, bin/*"
                 classNames={{
-                  tag: "bg-blue-300/10 text-zinc-800",
+                  tag: "bg-theme-settings-input-bg light:bg-black/10 bg-blue-300/10 text-zinc-800",
                   input:
-                    "flex bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none",
+                    "flex p-1 !bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none",
                 }}
               />
             </div>
@@ -191,14 +193,14 @@ function GitHubBranchSelection({ repo, accessToken }) {
       <div className="flex flex-col w-60">
         <div className="flex flex-col gap-y-1 mb-4">
           <label className="text-white text-sm font-bold">Branch</label>
-          <p className="text-xs font-normal text-white/50">
+          <p className="text-xs font-normal text-theme-text-secondary">
             Branch you wish to collect files from.
           </p>
         </div>
         <select
           name="branch"
           required={true}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-theme-settings-input-bg border-gray-500 text-white focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             -- loading available branches --
@@ -212,14 +214,14 @@ function GitHubBranchSelection({ repo, accessToken }) {
     <div className="flex flex-col w-60">
       <div className="flex flex-col gap-y-1 mb-4">
         <label className="text-white text-sm font-bold">Branch</label>
-        <p className="text-xs font-normal text-white/50">
+        <p className="text-xs font-normal text-theme-text-secondary">
           Branch you wish to collect files from.
         </p>
       </div>
       <select
         name="branch"
         required={true}
-        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-theme-settings-input-bg border-gray-500 text-white focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-lg block w-full p-2.5"
       >
         {allBranches.map((branch) => {
           return (
@@ -276,7 +278,7 @@ function PATTooltip({ accessToken }) {
       <Tooltip
         delayHide={300}
         id="access-token-tooltip"
-        className="max-w-xs"
+        className="max-w-xs z-99"
         clickable={true}
       >
         <p className="text-sm">
diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Gitlab/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Gitlab/index.jsx
index 29522edc7..a820ac3ca 100644
--- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Gitlab/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Gitlab/index.jsx
@@ -24,11 +24,10 @@ export default function GitlabOptions() {
     try {
       setLoading(true);
       showToast(
-        `Fetching all files for repo ${repo} - this may take a while.`,
+        "Fetching all files for repo - this may take a while.",
         "info",
         { clear: true, autoClose: false }
       );
-
       const { data, error } = await System.dataConnectors.gitlab.collect({
         repo: form.get("repo"),
         accessToken: form.get("accessToken"),
@@ -71,40 +70,41 @@ export default function GitlabOptions() {
                   <label className="text-white text-sm font-bold">
                     GitLab Repo URL
                   </label>
-                  <p className="text-xs font-normal text-white/50">
+                  <p className="text-xs font-normal text-theme-text-secondary">
                     URL of the GitLab repo you wish to collect.
                   </p>
                 </div>
                 <input
                   type="url"
                   name="repo"
-                  className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                  className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="https://gitlab.com/gitlab-org/gitlab"
                   required={true}
                   autoComplete="off"
                   onChange={(e) => setRepo(e.target.value)}
                   onBlur={() => setSettings({ ...settings, repo })}
                   spellCheck={false}
-                  rows={2}
                 />
               </div>
               <div className="flex flex-col pr-10">
                 <div className="flex flex-col gap-y-1 mb-4">
                   <label className="text-white font-bold text-sm flex gap-x-2 items-center">
                     <p className="font-bold text-white">GitLab Access Token</p>{" "}
-                    <p className="text-xs text-white/50 font-light flex items-center">
-                      optional
+                    <p className="text-xs font-light flex items-center">
+                      <span className="text-theme-text-secondary">
+                        optional
+                      </span>
                       <PATTooltip accessToken={accessToken} />
                     </p>
                   </label>
-                  <p className="text-xs font-normal text-white/50">
+                  <p className="text-xs font-normal text-theme-text-secondary">
                     Access Token to prevent rate limiting.
                   </p>
                 </div>
                 <input
                   type="text"
                   name="accessToken"
-                  className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-full p-2.5"
+                  className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="glpat-XXXXXXXXXXXXXXXXXXXX"
                   required={false}
                   autoComplete="off"
@@ -148,7 +148,7 @@ export default function GitlabOptions() {
                 <label className="text-white text-sm flex gap-x-2 items-center">
                   <p className="text-white text-sm font-bold">File Ignores</p>
                 </label>
-                <p className="text-xs font-normal text-white/50">
+                <p className="text-xs font-normal text-theme-text-secondary">
                   List in .gitignore format to ignore specific files during
                   collection. Press enter after each entry you want to save.
                 </p>
@@ -159,9 +159,9 @@ export default function GitlabOptions() {
                 name="ignores"
                 placeholder="!*.js, images/*, .DS_Store, bin/*"
                 classNames={{
-                  tag: "bg-blue-300/10 text-zinc-800",
+                  tag: "bg-theme-settings-input-bg light:bg-black/10 bg-blue-300/10 text-zinc-800",
                   input:
-                    "flex bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white",
+                    "flex p-1 !bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none",
                 }}
               />
             </div>
@@ -217,14 +217,14 @@ function GitLabBranchSelection({ repo, accessToken }) {
       <div className="flex flex-col w-60">
         <div className="flex flex-col gap-y-1 mb-4">
           <label className="text-white text-sm font-bold">Branch</label>
-          <p className="text-xs font-normal text-white/50">
+          <p className="text-xs font-normal text-theme-text-secondary">
             Branch you wish to collect files from.
           </p>
         </div>
         <select
           name="branch"
           required={true}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-theme-settings-input-bg border-gray-500 text-white focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             -- loading available branches --
@@ -238,14 +238,14 @@ function GitLabBranchSelection({ repo, accessToken }) {
     <div className="flex flex-col w-60">
       <div className="flex flex-col gap-y-1 mb-4">
         <label className="text-white text-sm font-bold">Branch</label>
-        <p className="text-xs font-normal text-white/50">
+        <p className="text-xs font-normal text-theme-text-secondary">
           Branch you wish to collect files from.
         </p>
       </div>
       <select
         name="branch"
         required={true}
-        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-theme-settings-input-bg border-gray-500 text-white focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-lg block w-full p-2.5"
       >
         {allBranches.map((branch) => {
           return (
@@ -302,7 +302,7 @@ function PATTooltip({ accessToken }) {
       <Tooltip
         delayHide={300}
         id="access-token-tooltip"
-        className="max-w-xs"
+        className="max-w-xs z-99"
         clickable={true}
       >
         <p className="text-sm">
diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/WebsiteDepth/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/WebsiteDepth/index.jsx
index f0017dab9..85ee4f75e 100644
--- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/WebsiteDepth/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/WebsiteDepth/index.jsx
@@ -57,14 +57,14 @@ export default function WebsiteDepthOptions() {
                   <label className="text-white text-sm font-bold">
                     Website URL
                   </label>
-                  <p className="text-xs font-normal text-white/50">
+                  <p className="text-xs font-normal text-theme-text-secondary">
                     URL of the website you want to scrape.
                   </p>
                 </div>
                 <input
                   type="url"
                   name="url"
-                  className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                  className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="https://example.com"
                   required={true}
                   autoComplete="off"
@@ -74,7 +74,7 @@ export default function WebsiteDepthOptions() {
               <div className="flex flex-col pr-10">
                 <div className="flex flex-col gap-y-1 mb-4">
                   <label className="text-white text-sm font-bold">Depth</label>
-                  <p className="text-xs font-normal text-white/50">
+                  <p className="text-xs font-normal text-theme-text-secondary">
                     This is the number of child-links that the worker should
                     follow from the origin URL.
                   </p>
@@ -84,7 +84,7 @@ export default function WebsiteDepthOptions() {
                   name="depth"
                   min="1"
                   max="5"
-                  className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                  className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   required={true}
                   defaultValue="1"
                 />
@@ -94,7 +94,7 @@ export default function WebsiteDepthOptions() {
                   <label className="text-white text-sm font-bold">
                     Max Links
                   </label>
-                  <p className="text-xs font-normal text-white/50">
+                  <p className="text-xs font-normal text-theme-text-secondary">
                     Maximum number of links to scrape.
                   </p>
                 </div>
@@ -102,7 +102,7 @@ export default function WebsiteDepthOptions() {
                   type="number"
                   name="maxLinks"
                   min="1"
-                  className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                  className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   required={true}
                   defaultValue="20"
                 />
@@ -121,7 +121,7 @@ export default function WebsiteDepthOptions() {
               {loading ? "Scraping website..." : "Submit"}
             </button>
             {loading && (
-              <p className="text-xs text-white/50">
+              <p className="text-xs text-theme-text-secondary">
                 Once complete, all scraped pages will be available for embedding
                 into workspaces in the document picker.
               </p>
diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Youtube/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Youtube/index.jsx
index d0e68249e..4f4ec4e9d 100644
--- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Youtube/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Youtube/index.jsx
@@ -52,14 +52,14 @@ export default function YoutubeOptions() {
                   <label className="text-white text-sm font-bold">
                     YouTube Video URL
                   </label>
-                  <p className="text-xs font-normal text-white/50">
+                  <p className="text-xs font-normal text-theme-text-secondary">
                     URL of the YouTube video you wish to transcribe.
                   </p>
                 </div>
                 <input
                   type="url"
                   name="url"
-                  className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                  className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="https://youtube.com/watch?v=abc123"
                   required={true}
                   autoComplete="off"
@@ -78,7 +78,7 @@ export default function YoutubeOptions() {
               {loading ? "Collecting transcript..." : "Collect transcript"}
             </button>
             {loading && (
-              <p className="text-xs text-white/50 max-w-sm">
+              <p className="text-xs text-theme-text-secondary max-w-sm">
                 Once complete, the transcription will be available for embedding
                 into workspaces in the document picker.
               </p>
diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/index.jsx
index 9df6dd7d8..647a026f6 100644
--- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/index.jsx
@@ -64,7 +64,7 @@ export default function DataConnectors() {
           <input
             type="text"
             placeholder="Search data connectors"
-            className="border-none bg-zinc-600 z-20 pl-10 h-[38px] rounded-full w-full px-4 py-1 text-sm border-2 border-slate-300/40 outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white"
+            className="border-none z-20 pl-10 h-[38px] rounded-full w-full px-4 py-1 text-sm border-2 border-slate-300/40 outline-none focus:outline-primary-button active:outline-primary-button outline-none placeholder:text-theme-settings-input-placeholder text-white bg-theme-settings-input-bg"
             autoComplete="off"
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/ContextMenu/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/ContextMenu/index.jsx
index 5515d8b46..c093982e7 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/ContextMenu/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/ContextMenu/index.jsx
@@ -60,17 +60,17 @@ export default function ContextMenu({
         left: `${contextMenu.x}px`,
         zIndex: 1000,
       }}
-      className="bg-zinc-800 border border-zinc-700 rounded-md shadow-lg"
+      className="bg-theme-bg-secondary border border-theme-modal-border rounded-md shadow-lg"
     >
       <button
         onClick={toggleSelectAll}
-        className="block w-full text-left px-4 py-2 text-sm text-white hover:bg-zinc-700"
+        className="block w-full text-left px-4 py-2 text-sm text-theme-text-primary hover:bg-theme-file-picker-hover"
       >
         {isAllSelected() ? "Unselect All" : "Select All"}
       </button>
       <button
         onClick={closeContextMenu}
-        className="block w-full text-left px-4 py-2 text-sm text-white hover:bg-zinc-700"
+        className="block w-full text-left px-4 py-2 text-sm text-theme-text-primary hover:bg-theme-file-picker-hover"
       >
         Cancel
       </button>
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FileRow/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FileRow/index.jsx
index 663c73d56..ab1e4bd12 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FileRow/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FileRow/index.jsx
@@ -10,8 +10,8 @@ export default function FileRow({ item, selected, toggleSelection }) {
   return (
     <tr
       onClick={() => toggleSelection(item)}
-      className={`text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer file-row ${
-        selected ? "selected" : ""
+      className={`text-theme-text-primary text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-theme-file-picker-hover cursor-pointer file-row ${
+        selected ? "selected light:text-white" : ""
       }`}
     >
       <div
@@ -24,7 +24,9 @@ export default function FileRow({ item, selected, toggleSelection }) {
         })}
       >
         <div
-          className="shrink-0 w-3 h-3 rounded border-[1px] border-white flex justify-center items-center cursor-pointer"
+          className={`shrink-0 w-3 h-3 rounded border-[1px] border-white ${
+            selected ? "text-white" : "text-theme-text-primary light:invert"
+          } flex justify-center items-center cursor-pointer`}
           role="checkbox"
           aria-checked={selected}
           tabIndex={0}
@@ -41,7 +43,7 @@ export default function FileRow({ item, selected, toggleSelection }) {
       </div>
       <div className="col-span-2 flex justify-end items-center">
         {item?.cached && (
-          <div className="bg-white/10 rounded-3xl">
+          <div className="bg-theme-settings-input-active rounded-3xl">
             <p className="text-xs px-2 py-0.5">Cached</p>
           </div>
         )}
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FolderRow/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FolderRow/index.jsx
index 7e2dfffee..21b663def 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FolderRow/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FolderRow/index.jsx
@@ -22,13 +22,19 @@ export default function FolderRow({
     <>
       <tr
         onClick={onRowClick}
-        className={`text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 bg-dark-highlight hover:bg-sky-500/20 cursor-pointer w-full file-row ${
-          selected ? "selected" : ""
+        className={`text-theme-text-primary text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-theme-file-picker-hover cursor-pointer file-row ${
+          selected ? "selected light:text-white !text-white" : ""
         }`}
       >
-        <div className="col-span-6 flex gap-x-[4px] items-center">
+        <div
+          className={`col-span-6 flex gap-x-[4px] items-center ${
+            selected ? "!text-white" : "text-theme-text-primary"
+          }`}
+        >
           <div
-            className="shrink-0 w-3 h-3 rounded border-[1px] border-white flex justify-center items-center cursor-pointer"
+            className={`shrink-0 w-3 h-3 rounded border-[1px] border-white ${
+              selected ? "text-white" : "text-theme-text-primary light:invert"
+            } flex justify-center items-center cursor-pointer`}
             role="checkbox"
             aria-checked={selected}
             tabIndex={0}
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/NewFolderModal/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/NewFolderModal/index.jsx
index 47ad85b05..419e7b2d9 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/NewFolderModal/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/NewFolderModal/index.jsx
@@ -29,24 +29,25 @@ export default function NewFolderModal({ closeModal, files, setFiles }) {
   };
 
   return (
-    <div className="relative w-full max-w-xl max-h-full">
-      <div className="relative bg-main-gradient rounded-lg shadow">
-        <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
-          <h3 className="text-xl font-semibold text-white">
-            Create New Folder
-          </h3>
+    <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
+      <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
+        <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+          <div className="w-full flex gap-x-2 items-center">
+            <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+              Create New Folder
+            </h3>
+          </div>
           <button
             onClick={closeModal}
             type="button"
-            className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
-            data-modal-hide="staticModal"
+            className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
           >
-            <X className="text-gray-300 text-lg" />
+            <X size={24} weight="bold" className="text-white" />
           </button>
         </div>
-        <form onSubmit={handleCreate}>
-          <div className="p-6 space-y-6 flex h-full w-full">
-            <div className="w-full flex flex-col gap-y-4">
+        <div className="p-6">
+          <form onSubmit={handleCreate}>
+            <div className="space-y-4">
               <div>
                 <label
                   htmlFor="folderName"
@@ -57,7 +58,7 @@ export default function NewFolderModal({ closeModal, files, setFiles }) {
                 <input
                   name="folderName"
                   type="text"
-                  className="bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                  className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="Enter folder name"
                   required={true}
                   autoComplete="off"
@@ -67,23 +68,23 @@ export default function NewFolderModal({ closeModal, files, setFiles }) {
               </div>
               {error && <p className="text-red-400 text-sm">Error: {error}</p>}
             </div>
-          </div>
-          <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
-            <button
-              onClick={closeModal}
-              type="button"
-              className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300"
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-            >
-              Create Folder
-            </button>
-          </div>
-        </form>
+            <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
+              <button
+                onClick={closeModal}
+                type="button"
+                className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+              >
+                Create Folder
+              </button>
+            </div>
+          </form>
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx
index d87ae66c8..ceecb1a3a 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx
@@ -200,7 +200,7 @@ function Directory({
                 type="search"
                 placeholder="Search for document"
                 onChange={handleSearch}
-                className="search-input bg-zinc-900 text-white placeholder-white/40 text-sm rounded-lg pl-9 pr-2.5 py-2 w-[250px] h-[32px]"
+                className="search-input bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-lg pl-9 pr-2.5 py-2 w-[250px] h-[32px] light:border-theme-modal-border light:border"
               />
               <MagnifyingGlass
                 size={14}
@@ -209,18 +209,22 @@ function Directory({
               />
             </div>
             <button
-              className="flex items-center gap-x-2 cursor-pointer px-[14px] py-[7px] -mr-[14px] rounded-lg hover:bg-[#222628]/60 z-20 relative"
+              className="flex items-center gap-x-2 cursor-pointer px-[14px] py-[7px] -mr-[14px] rounded-lg hover:bg-theme-sidebar-subitem-hover z-20 relative"
               onClick={openFolderModal}
             >
-              <Plus size={18} weight="bold" color="#D3D4D4" />
-              <div className="text-[#D3D4D4] text-xs font-bold leading-[18px]">
+              <Plus
+                size={18}
+                weight="bold"
+                className="text-theme-text-primary light:text-[#0ba5ec]"
+              />
+              <div className="text-theme-text-primary light:text-[#0ba5ec] text-xs font-bold leading-[18px]">
                 New Folder
               </div>
             </button>
           </div>
 
-          <div className="relative w-[560px] h-[310px] bg-zinc-900 rounded-2xl overflow-hidden">
-            <div className="absolute top-0 left-0 right-0 z-10 rounded-t-2xl text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20 shadow-lg bg-zinc-900">
+          <div className="relative w-[560px] h-[310px] bg-theme-settings-input-bg rounded-2xl overflow-hidden border border-theme-modal-border">
+            <div className="absolute top-0 left-0 right-0 z-10 rounded-t-2xl text-theme-text-primary text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20 shadow-md bg-theme-settings-input-bg">
               <p className="col-span-6">Name</p>
             </div>
 
@@ -228,7 +232,7 @@ function Directory({
               {loading ? (
                 <div className="w-full h-full flex items-center justify-center flex-col gap-y-5">
                   <PreLoader />
-                  <p className="text-white/80 text-sm font-semibold animate-pulse text-center w-1/3">
+                  <p className="text-white text-sm font-semibold animate-pulse text-center w-1/3">
                     {loadingMessage}
                   </p>
                 </div>
@@ -260,13 +264,13 @@ function Directory({
             </div>
             {amountSelected !== 0 && (
               <div className="absolute bottom-[12px] left-0 right-0 flex justify-center pointer-events-none">
-                <div className="mx-auto bg-white/40 rounded-lg py-1 px-2 pointer-events-auto">
+                <div className="mx-auto bg-white/40 light:bg-white rounded-lg py-1 px-2 pointer-events-auto light:shadow-lg">
                   <div className="flex flex-row items-center gap-x-2">
                     <button
                       onClick={moveToWorkspace}
                       onMouseEnter={() => setHighlightWorkspace(true)}
                       onMouseLeave={() => setHighlightWorkspace(false)}
-                      className="border-none text-sm font-semibold bg-white h-[30px] px-2.5 rounded-lg hover:text-white hover:bg-neutral-800/80"
+                      className="border-none text-sm font-semibold bg-white light:bg-[#E0F2FE] h-[30px] px-2.5 rounded-lg hover:bg-neutral-800/80 hover:text-white light:text-[#026AA2] light:hover:bg-[#026AA2] light:hover:text-white"
                     >
                       Move to Workspace
                     </button>
@@ -275,9 +279,9 @@ function Directory({
                         onClick={() =>
                           setShowFolderSelection(!showFolderSelection)
                         }
-                        className="border-none text-sm font-semibold bg-white h-[32px] w-[32px] rounded-lg text-dark-text hover:bg-neutral-800/80 flex justify-center items-center group"
+                        className="border-none text-sm font-semibold bg-white light:bg-[#E0F2FE] h-[32px] w-[32px] rounded-lg text-dark-text hover:bg-neutral-800/80 hover:text-white light:text-[#026AA2] light:hover:bg-[#026AA2] light:hover:text-white flex justify-center items-center group"
                       >
-                        <MoveToFolderIcon className="text-dark-text group-hover:text-white" />
+                        <MoveToFolderIcon className="text-dark-text light:text-[#026AA2] group-hover:text-white" />
                       </button>
                       {showFolderSelection && (
                         <FolderSelectionPopup
@@ -291,7 +295,7 @@ function Directory({
                     </div>
                     <button
                       onClick={deleteFiles}
-                      className="border-none text-sm font-semibold bg-white h-[32px] w-[32px] rounded-lg text-dark-text hover:text-white hover:bg-neutral-800/80 flex justify-center items-center"
+                      className="border-none text-sm font-semibold bg-white light:bg-[#E0F2FE] h-[32px] w-[32px] rounded-lg text-dark-text hover:bg-neutral-800/80 hover:text-white light:text-[#026AA2] light:hover:bg-[#026AA2] light:hover:text-white flex justify-center items-center"
                     >
                       <Trash size={18} weight="bold" />
                     </button>
@@ -340,13 +344,13 @@ function DirectoryTooltips() {
       id="directory-item"
       place="bottom"
       delayShow={800}
-      className="tooltip invert z-99"
+      className="tooltip invert light:invert-0 z-99 max-w-[200px]"
       render={({ content }) => {
         const data = safeJsonParse(content, null);
         if (!data) return null;
         return (
           <div className="text-xs">
-            <p className="text-white">{data.title}</p>
+            <p className="text-white light:invert font-medium">{data.title}</p>
             <div className="flex mt-1 gap-x-2">
               <p className="">
                 Date: <b>{data.date}</b>
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx
index 104d45a16..64a5bd9b7 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx
@@ -112,7 +112,7 @@ function FileUploadProgressComponent({
     <div
       className={`${
         isFadingOut ? "file-upload-fadeout" : "file-upload"
-      } h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-white/5 border border-white/40`}
+      } h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-white border border-white/40 shadow-md`}
     >
       <div className="w-6 h-6 flex-shrink-0">
         {status !== "complete" ? (
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/index.jsx
index 8996829c1..798284e24 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/index.jsx
@@ -78,15 +78,17 @@ export default function UploadFile({
   return (
     <div>
       <div
-        className={`w-[560px] border-2 border-dashed rounded-2xl bg-zinc-900/50 p-3 ${
-          ready ? "cursor-pointer" : "cursor-not-allowed"
-        } hover:bg-zinc-900/90`}
+        className={`w-[560px] border-2 border-dashed light:border-[#686C6F] rounded-2xl bg-theme-bg-primary transition-colors duration-300 p-3 ${
+          ready
+            ? " light:bg-[#E0F2FE] cursor-pointer hover:bg-theme-bg-secondary light:hover:bg-transparent"
+            : "cursor-not-allowed"
+        }`}
         {...getRootProps()}
       >
         <input {...getInputProps()} />
         {ready === false ? (
           <div className="flex flex-col items-center justify-center h-full">
-            <CloudArrowUp className="w-8 h-8 text-white/80" />
+            <CloudArrowUp className="w-8 h-8 text-white/80 light:invert" />
             <div className="text-white text-opacity-80 text-sm font-semibold py-1">
               Document Processor Unavailable
             </div>
@@ -97,7 +99,7 @@ export default function UploadFile({
           </div>
         ) : files.length === 0 ? (
           <div className="flex flex-col items-center justify-center">
-            <CloudArrowUp className="w-8 h-8 text-white/80" />
+            <CloudArrowUp className="w-8 h-8 text-white/80 light:invert" />
             <div className="text-white text-opacity-80 text-sm font-semibold py-1">
               Click to upload or drag and drop
             </div>
@@ -133,7 +135,7 @@ export default function UploadFile({
           disabled={fetchingUrl}
           name="link"
           type="url"
-          className="disabled:bg-zinc-600 disabled:text-slate-300 bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-3/4 p-2.5"
+          className="disabled:bg-theme-settings-input-bg disabled:text-theme-settings-input-placeholder bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-3/4 p-2.5"
           placeholder={"https://example.com"}
           autoComplete="off"
         />
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
index 496702fc2..72d226c74 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
@@ -56,9 +56,13 @@ export default function WorkspaceFileRow({
   const isMovedItem = movedItems?.some((movedItem) => movedItem.id === item.id);
   return (
     <div
-      className={`items-center h-[34px] text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 ${
-        !disableSelection ? "hover:bg-sky-500/20 cursor-pointer" : ""
-      } ${isMovedItem ? "bg-green-800/40" : "file-row"} ${selected ? "selected" : ""}`}
+      className={`text-theme-text-primary text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 h-[34px] items-center ${
+        !disableSelection
+          ? "hover:bg-theme-file-picker-hover cursor-pointer"
+          : ""
+      } ${isMovedItem ? "bg-green-800/40" : "file-row"} ${
+        selected ? "selected light:text-white" : ""
+      }`}
       onClick={toggleRowSelection}
     >
       <div
@@ -73,7 +77,9 @@ export default function WorkspaceFileRow({
         <div className="shrink-0 w-3 h-3">
           {!disableSelection ? (
             <div
-              className="w-full h-full rounded border-[1px] border-white flex justify-center items-center cursor-pointer"
+              className={`shrink-0 w-3 h-3 rounded border-[1px] border-white ${
+                selected ? "text-white" : "text-theme-text-primary light:invert"
+              } flex justify-center items-center cursor-pointer`}
               role="checkbox"
               aria-checked={selected}
               tabIndex={0}
@@ -158,7 +164,7 @@ const PinItemToWorkspace = memo(({ workspace, docPath, item }) => {
     <div
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
-      className="flex gap-x-2 items-center hover:bg-main-gradient p-[2px] rounded ml-2"
+      className="flex gap-x-2 items-center hover:bg-theme-file-picker-hover p-[2px] rounded ml-2"
     >
       <PushPin
         data-tooltip-id="pin-document"
@@ -224,7 +230,7 @@ const WatchForChanges = memo(({ workspace, docPath, item }) => {
     <div
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
-      className="flex gap-x-2 items-center hover:bg-main-gradient p-[2px] rounded ml-2"
+      className="flex gap-x-2 items-center hover:bg-theme-file-picker-hover p-[2px] rounded ml-2"
     >
       <Eye
         data-tooltip-id="watch-changes"
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
index b54f29cc1..b2897f439 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
@@ -3,7 +3,7 @@ import { dollarFormat } from "@/utils/numbers";
 import WorkspaceFileRow from "./WorkspaceFileRow";
 import { memo, useEffect, useState } from "react";
 import ModalWrapper from "@/components/ModalWrapper";
-import { Eye, PushPin } from "@phosphor-icons/react";
+import { Eye, PushPin, X } from "@phosphor-icons/react";
 import { SEEN_DOC_PIN_ALERT, SEEN_WATCH_ALERT } from "@/utils/constants";
 import paths from "@/utils/paths";
 import { Link } from "react-router-dom";
@@ -93,8 +93,8 @@ function WorkspaceDirectory({
             {workspace.name}
           </h3>
         </div>
-        <div className="relative w-[560px] h-[445px] bg-zinc-900 rounded-2xl mt-5">
-          <div className="text-white/80 text-xs grid grid-cols-12 py-2 px-3.5 border-b border-white/20 bg-zinc-900 sticky top-0 z-10 rounded-t-2xl">
+        <div className="relative w-[560px] h-[445px] bg-theme-settings-input-bg rounded-2xl mt-5 border border-theme-modal-border">
+          <div className="text-white/80 text-xs grid grid-cols-12 py-2 px-3.5 border-b border-white/20 bg-theme-settings-input-bg sticky top-0 z-10 rounded-t-2xl shadow-lg">
             <div className="col-span-10 flex items-center gap-x-[4px]">
               <div className="shrink-0 w-3 h-3" />
               <p className="ml-[7px]">Name</p>
@@ -103,7 +103,7 @@ function WorkspaceDirectory({
           </div>
           <div className="w-full h-[calc(100%-40px)] flex items-center justify-center flex-col gap-y-5">
             <PreLoader />
-            <p className="text-white/80 text-sm font-semibold animate-pulse text-center w-1/3">
+            <p className="text-white text-sm font-semibold animate-pulse text-center w-1/3">
               {loadingMessage}
             </p>
           </div>
@@ -126,13 +126,13 @@ function WorkspaceDirectory({
               highlightWorkspace ? "border-4 border-cyan-300/80 z-[999]" : ""
             }`}
           />
-          <div className="relative w-full h-full bg-zinc-900 rounded-2xl overflow-hidden">
-            <div className="text-white/80 text-xs grid grid-cols-12 py-2 px-3.5 border-b border-white/20 bg-zinc-900 sticky top-0 z-10">
+          <div className="relative w-full h-full bg-theme-settings-input-bg rounded-2xl overflow-hidden border border-theme-modal-border">
+            <div className="text-white/80 text-xs grid grid-cols-12 py-2 px-3.5 border-b border-white/20 bg-theme-settings-input-bg sticky top-0 z-10 shadow-md">
               <div className="col-span-10 flex items-center gap-x-[4px]">
                 {!hasChanges &&
                 files.items.some((folder) => folder.items.length > 0) ? (
                   <div
-                    className="shrink-0 w-3 h-3 rounded border-[1px] border-white flex justify-center items-center cursor-pointer"
+                    className={`shrink-0 w-3 h-3 rounded border-[1px] border-white text-theme-text-primary light:invert flex justify-center items-center cursor-pointer`}
                     role="checkbox"
                     aria-checked={
                       Object.keys(selectedItems).length ===
@@ -153,7 +153,7 @@ function WorkspaceDirectory({
                 ) : (
                   <div className="shrink-0 w-3 h-3" />
                 )}
-                <p className="ml-[7px]">Name</p>
+                <p className="ml-[7px] light:text-theme-text-primary">Name</p>
               </div>
               <p className="col-span-2" />
             </div>
@@ -187,13 +187,14 @@ function WorkspaceDirectory({
                 </div>
               )}
             </div>
+
             {Object.keys(selectedItems).length > 0 && !hasChanges && (
               <div className="absolute bottom-[12px] left-0 right-0 flex justify-center pointer-events-none">
-                <div className="mx-auto bg-white/40 rounded-lg py-1 px-2 pointer-events-auto">
+                <div className="mx-auto bg-white/40 light:bg-white rounded-lg py-1 px-2 pointer-events-auto light:shadow-lg">
                   <div className="flex flex-row items-center gap-x-2">
                     <button
                       onClick={toggleSelectAll}
-                      className="border-none text-sm font-semibold bg-white h-[30px] px-2.5 rounded-lg hover:text-white hover:bg-neutral-800/80"
+                      className="border-none text-sm font-semibold bg-white light:bg-[#E0F2FE] h-[30px] px-2.5 rounded-lg hover:bg-neutral-800/80 hover:text-white light:text-[#026AA2] light:hover:bg-[#026AA2] light:hover:text-white"
                     >
                       {Object.keys(selectedItems).length ===
                       files.items.reduce(
@@ -205,7 +206,7 @@ function WorkspaceDirectory({
                     </button>
                     <button
                       onClick={removeSelectedItems}
-                      className="border-none text-sm font-semibold bg-white h-[30px] px-2.5 rounded-lg hover:text-white hover:bg-neutral-800/80"
+                      className="border-none text-sm font-semibold bg-white light:bg-[#E0F2FE] h-[30px] px-2.5 rounded-lg hover:bg-neutral-800/80 hover:text-white light:text-[#026AA2] light:hover:bg-[#026AA2] light:hover:text-white"
                     >
                       Remove Selected
                     </button>
@@ -268,17 +269,20 @@ const PinAlert = memo(() => {
 
   return (
     <ModalWrapper isOpen={showAlert} noPortal={true}>
-      <div className="relative w-full max-w-2xl max-h-full">
-        <div className="relative bg-main-gradient rounded-lg shadow">
-          <div className="flex items-start justify-between p-4 rounded-t border-gray-500/50">
-            <div className="flex items-center gap-2">
-              <PushPin className="text-red-600 text-lg w-6 h-6" weight="fill" />
-              <h3 className="text-xl font-semibold text-white">
-                What is document pinning?
-              </h3>
-            </div>
+      <div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
+        <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+          <div className="flex items-center gap-2">
+            <PushPin
+              className="text-theme-text-primary text-lg w-6 h-6"
+              weight="regular"
+            />
+            <h3 className="text-xl font-semibold text-white">
+              What is document pinning?
+            </h3>
           </div>
-          <div className="w-full p-6 text-white text-md flex flex-col gap-y-2">
+        </div>
+        <div className="py-7 px-9 space-y-2 flex-col">
+          <div className="w-full text-white text-md flex flex-col gap-y-2">
             <p>
               When you <b>pin</b> a document in AnythingLLM we will inject the
               entire content of the document into your prompt window for your
@@ -294,16 +298,14 @@ const PinAlert = memo(() => {
               in a click.
             </p>
           </div>
-
-          <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
-            <button disabled={true} className="invisible" />
-            <button
-              onClick={dismissAlert}
-              className="border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-            >
-              Okay, got it
-            </button>
-          </div>
+        </div>
+        <div className="flex w-full justify-end items-center p-6 space-x-2 border-t border-theme-modal-border rounded-b">
+          <button
+            onClick={dismissAlert}
+            className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+          >
+            Okay, got it
+          </button>
         </div>
       </div>
     </ModalWrapper>
@@ -330,20 +332,20 @@ const DocumentWatchAlert = memo(() => {
 
   return (
     <ModalWrapper isOpen={showAlert} noPortal={true}>
-      <div className="relative w-full max-w-2xl max-h-full">
-        <div className="relative bg-main-gradient rounded-lg shadow">
-          <div className="flex items-start justify-between p-4 rounded-t border-gray-500/50">
-            <div className="flex items-center gap-2">
-              <Eye
-                className="text-yellow-600 text-lg w-6 h-6"
-                weight="regular"
-              />
-              <h3 className="text-xl font-semibold text-white">
-                What does watching a document do?
-              </h3>
-            </div>
+      <div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
+        <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+          <div className="flex items-center gap-2">
+            <Eye
+              className="text-theme-text-primary text-lg w-6 h-6"
+              weight="regular"
+            />
+            <h3 className="text-xl font-semibold text-white">
+              What does watching a document do?
+            </h3>
           </div>
-          <div className="w-full p-6 text-white text-md flex flex-col gap-y-2">
+        </div>
+        <div className="py-7 px-9 space-y-2 flex-col">
+          <div className="w-full text-white text-md flex flex-col gap-y-2">
             <p>
               When you <b>watch</b> a document in AnythingLLM we will{" "}
               <i>automatically</i> sync your document content from it's original
@@ -365,16 +367,14 @@ const DocumentWatchAlert = memo(() => {
               admin view.
             </p>
           </div>
-
-          <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
-            <button disabled={true} className="invisible" />
-            <button
-              onClick={dismissAlert}
-              className="border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-            >
-              Okay, got it
-            </button>
-          </div>
+        </div>
+        <div className="flex w-full justify-end items-center p-6 space-x-2 border-t border-theme-modal-border rounded-b">
+          <button
+            onClick={dismissAlert}
+            className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+          >
+            Okay, got it
+          </button>
         </div>
       </div>
     </ModalWrapper>
@@ -410,13 +410,15 @@ function WorkspaceDocumentTooltips() {
         id="ws-directory-item"
         place="bottom"
         delayShow={800}
-        className="tooltip invert z-99"
+        className="tooltip invert light:invert-0 z-99 max-w-[200px]"
         render={({ content }) => {
           const data = safeJsonParse(content, null);
           if (!data) return null;
           return (
             <div className="text-xs">
-              <p className="text-white">{data.title}</p>
+              <p className="text-white light:invert font-medium">
+                {data.title}
+              </p>
               <div className="flex mt-1 gap-x-2">
                 <p className="">
                   Date: <b>{data.date}</b>
diff --git a/frontend/src/components/Modals/ManageWorkspace/index.jsx b/frontend/src/components/Modals/ManageWorkspace/index.jsx
index fe3f539b9..2dba258ab 100644
--- a/frontend/src/components/Modals/ManageWorkspace/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/index.jsx
@@ -7,6 +7,7 @@ import { isMobile } from "react-device-detect";
 import useUser from "../../../hooks/useUser";
 import DocumentSettings from "./Documents";
 import DataConnectors from "./DataConnectors";
+import ModalWrapper from "@/components/ModalWrapper";
 
 const noop = () => {};
 const ManageWorkspace = ({ hideModal = noop, providedSlug = null }) => {
@@ -36,31 +37,44 @@ const ManageWorkspace = ({ hideModal = noop, providedSlug = null }) => {
 
   if (isMobile) {
     return (
-      <div className="w-screen h-screen fixed top-0 left-0 flex justify-center items-center z-99">
-        <div className="backdrop h-full w-full absolute top-0 z-10" />
-        <div className={`absolute max-h-full transition duration-300 z-20`}>
-          <div className="relative max-w-lg mx-auto bg-main-gradient rounded-[12px] shadow border-2 border-slate-300/10">
-            <div className="p-6">
-              <h1 className="text-white text-lg font-semibold">
+      <ModalWrapper isOpen={true}>
+        <div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
+          <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+            <div className="w-full flex gap-x-2 items-center">
+              <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
                 Editing "{workspace.name}"
-              </h1>
-              <p className="text-white mt-4">
+              </h3>
+            </div>
+            <button
+              onClick={hideModal}
+              type="button"
+              className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
+            >
+              <X size={24} weight="bold" className="text-white" />
+            </button>
+          </div>
+          <div
+            className="h-full w-full overflow-y-auto"
+            style={{ maxHeight: "calc(100vh - 200px)" }}
+          >
+            <div className="py-7 px-9 space-y-2 flex-col">
+              <p className="text-white">
                 Editing these settings are only available on a desktop device.
                 Please access this page on your desktop to continue.
               </p>
-              <div className="mt-6 flex justify-end">
-                <button
-                  onClick={hideModal}
-                  type="button"
-                  className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-                >
-                  Dismiss
-                </button>
-              </div>
             </div>
           </div>
+          <div className="flex w-full justify-end items-center p-6 space-x-2 border-t border-theme-modal-border rounded-b">
+            <button
+              onClick={hideModal}
+              type="button"
+              className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+            >
+              Dismiss
+            </button>
+          </div>
         </div>
-      </div>
+      </ModalWrapper>
     );
   }
 
@@ -68,14 +82,14 @@ const ManageWorkspace = ({ hideModal = noop, providedSlug = null }) => {
     <div className="w-screen h-screen fixed top-0 left-0 flex justify-center items-center z-99">
       <div className="backdrop h-full w-full absolute top-0 z-10" />
       <div className="absolute max-h-full w-fit transition duration-300 z-20 md:overflow-y-auto py-10">
-        <div className="relative bg-main-gradient rounded-[12px] shadow border-2 border-slate-300/10">
-          <div className="flex items-start justify-between p-2 rounded-t border-gray-500/50 relative">
+        <div className="relative bg-theme-bg-secondary rounded-[12px] shadow border-2 border-theme-modal-border">
+          <div className="flex items-start justify-between p-2 rounded-t border-theme-modal-border relative">
             <button
               onClick={hideModal}
               type="button"
-              className="z-50 text-gray-400 bg-transparent rounded-lg text-sm p-1.5 ml-auto inline-flex items-center hover:border-white/60 bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+              className="z-29 text-white bg-transparent rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
             >
-              <X className="text-gray-300 text-lg" />
+              <X size={20} weight="bold" className="text-white" />
             </button>
           </div>
 
@@ -102,23 +116,23 @@ export default memo(ManageWorkspace);
 const ModalTabSwitcher = ({ selectedTab, setSelectedTab }) => {
   return (
     <div className="w-full flex justify-center z-10 relative">
-      <div className="gap-x-2 flex justify-center -mt-[68px] mb-10 bg-sidebar-button p-1 rounded-xl shadow border-2 border-slate-300/10 w-fit">
+      <div className="gap-x-2 flex justify-center -mt-[68px] mb-10 bg-theme-bg-secondary p-1 rounded-xl shadow border-2 border-theme-modal-border w-fit">
         <button
           onClick={() => setSelectedTab("documents")}
-          className={`px-4 py-2 rounded-[8px] font-semibold text-white hover:bg-switch-selected hover:bg-opacity-60 ${
+          className={`px-4 py-2 rounded-[8px] font-semibold hover:bg-theme-modal-border hover:bg-opacity-60 ${
             selectedTab === "documents"
-              ? "bg-switch-selected shadow-md font-bold"
-              : "bg-sidebar-button text-white/20 font-medium hover:text-white"
+              ? "bg-theme-modal-border font-bold text-white light:bg-[#E0F2FE] light:text-[#026AA2]"
+              : "text-white/20 font-medium hover:text-white light:bg-white light:text-[#535862] light:hover:bg-[#E0F2FE]"
           }`}
         >
           Documents
         </button>
         <button
           onClick={() => setSelectedTab("dataConnectors")}
-          className={`px-4 py-2 rounded-[8px] font-semibold text-white hover:bg-switch-selected hover:bg-opacity-60 ${
+          className={`px-4 py-2 rounded-[8px] font-semibold hover:bg-theme-modal-border hover:bg-opacity-60 ${
             selectedTab === "dataConnectors"
-              ? "bg-switch-selected shadow-md font-bold"
-              : "bg-sidebar-button text-white/20 font-medium hover:text-white"
+              ? "bg-theme-modal-border font-bold text-white light:bg-[#E0F2FE] light:text-[#026AA2]"
+              : "text-white/20 font-medium hover:text-white light:bg-white light:text-[#535862] light:hover:bg-[#E0F2FE]"
           }`}
         >
           Data Connectors
diff --git a/frontend/src/components/Modals/NewWorkspace.jsx b/frontend/src/components/Modals/NewWorkspace.jsx
index 87edef9d7..42812436b 100644
--- a/frontend/src/components/Modals/NewWorkspace.jsx
+++ b/frontend/src/components/Modals/NewWorkspace.jsx
@@ -3,6 +3,7 @@ import { X } from "@phosphor-icons/react";
 import Workspace from "@/models/workspace";
 import paths from "@/utils/paths";
 import { useTranslation } from "react-i18next";
+import ModalWrapper from "@/components/ModalWrapper";
 
 const noop = () => false;
 export default function NewWorkspaceModal({ hideModal = noop }) {
@@ -23,27 +24,28 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
   };
 
   return (
-    <div className="fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] h-full bg-black bg-opacity-50 flex items-center justify-center">
-      <div
-        className="flex fixed top-0 left-0 right-0 w-full h-full"
-        onClick={hideModal}
-      />
-      <div className="relative w-[500px] max-h-full">
-        <div className="relative bg-modal-gradient rounded-lg shadow-md border-2 border-accent">
-          <div className="flex items-start justify-between p-4 border-b rounded-t border-white/10">
-            <h3 className="text-xl font-semibold text-white">
+    <ModalWrapper isOpen={true}>
+      <div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
+        <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+          <div className="w-full flex gap-x-2 items-center">
+            <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
               {t("new-workspace.title")}
             </h3>
-            <button
-              onClick={hideModal}
-              type="button"
-              className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
-            >
-              <X className="text-gray-300 text-lg" />
-            </button>
           </div>
+          <button
+            onClick={hideModal}
+            type="button"
+            className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
+          >
+            <X size={24} weight="bold" className="text-white" />
+          </button>
+        </div>
+        <div
+          className="h-full w-full overflow-y-auto"
+          style={{ maxHeight: "calc(100vh - 200px)" }}
+        >
           <form ref={formEl} onSubmit={handleCreate}>
-            <div className="p-6 space-y-6 flex h-full w-full">
+            <div className="py-7 px-9 space-y-2 flex-col">
               <div className="w-full flex flex-col gap-y-4">
                 <div>
                   <label
@@ -56,7 +58,7 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
                     name="name"
                     type="text"
                     id="name"
-                    className="bg-zinc-900 w-full text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                    className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                     placeholder={t("new-workspace.placeholder")}
                     required={true}
                     autoComplete="off"
@@ -67,10 +69,10 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
                 )}
               </div>
             </div>
-            <div className="flex w-full justify-end items-center p-6 space-x-2 border-t border-white/10 rounded-b">
+            <div className="flex w-full justify-end items-center p-6 space-x-2 border-t border-theme-modal-border rounded-b">
               <button
                 type="submit"
-                className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
+                className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
               >
                 Save
               </button>
@@ -78,7 +80,7 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
           </form>
         </div>
       </div>
-    </div>
+    </ModalWrapper>
   );
 }
 
diff --git a/frontend/src/components/Modals/Password/MultiUserAuth.jsx b/frontend/src/components/Modals/Password/MultiUserAuth.jsx
index c89f0cff5..f1b173d97 100644
--- a/frontend/src/components/Modals/Password/MultiUserAuth.jsx
+++ b/frontend/src/components/Modals/Password/MultiUserAuth.jsx
@@ -32,14 +32,14 @@ const RecoveryForm = ({ onSubmit, setShowRecoveryForm }) => {
   return (
     <form
       onSubmit={handleSubmit}
-      className="flex flex-col justify-center items-center relative rounded-2xl md:bg-login-gradient md:shadow-[0_4px_14px_rgba(0,0,0,0.25)] md:px-8 px-0 py-4 w-full md:w-fit mt-10 md:mt-0"
+      className="flex flex-col justify-center items-center relative rounded-2xl border-none bg-theme-bg-secondary md:shadow-[0_4px_14px_rgba(0,0,0,0.25)] md:px-8 px-0 py-4 w-full md:w-fit mt-10 md:mt-0"
     >
       <div className="flex items-start justify-between pt-11 pb-9 w-screen md:w-full md:px-12 px-6 ">
         <div className="flex flex-col gap-y-4 w-full">
-          <h3 className="text-4xl md:text-lg font-bold text-white text-center md:text-left">
+          <h3 className="text-4xl md:text-lg font-bold text-theme-text-primary text-center md:text-left">
             {t("login.password-reset.title")}
           </h3>
-          <p className="text-sm text-white/90 md:text-left md:max-w-[300px] px-4 md:px-0 text-center">
+          <p className="text-sm text-theme-text-secondary md:text-left md:max-w-[300px] px-4 md:px-0 text-center">
             {t("login.password-reset.description")}
           </p>
         </div>
@@ -56,7 +56,7 @@ const RecoveryForm = ({ onSubmit, setShowRecoveryForm }) => {
               placeholder={t("login.multi-user.placeholder-username")}
               value={username}
               onChange={(e) => setUsername(e.target.value)}
-              className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]"
+              className="bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]"
               required
             />
           </div>
@@ -76,7 +76,7 @@ const RecoveryForm = ({ onSubmit, setShowRecoveryForm }) => {
                   onChange={(e) =>
                     handleRecoveryCodeChange(index, e.target.value)
                   }
-                  className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]"
+                  className="bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]"
                   required
                 />
               </div>
@@ -115,7 +115,7 @@ const ResetPasswordForm = ({ onSubmit }) => {
   return (
     <form
       onSubmit={handleSubmit}
-      className="flex flex-col justify-center items-center relative rounded-2xl md:bg-login-gradient md:shadow-[0_4px_14px_rgba(0,0,0,0.25)] md:px-12 px-0 py-4 w-full md:w-fit -mt-24 md:-mt-28"
+      className="flex flex-col justify-center items-center relative rounded-2xl bg-theme-bg-secondary md:shadow-[0_4px_14px_rgba(0,0,0,0.25)] md:px-8 px-0 py-4 w-full md:w-fit mt-10 md:mt-0"
     >
       <div className="flex items-start justify-between pt-11 pb-9 w-screen md:w-full md:px-12 px-6">
         <div className="flex flex-col gap-y-4 w-full">
@@ -136,7 +136,7 @@ const ResetPasswordForm = ({ onSubmit }) => {
               placeholder="New Password"
               value={newPassword}
               onChange={(e) => setNewPassword(e.target.value)}
-              className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]"
+              className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
               required
             />
           </div>
@@ -147,7 +147,7 @@ const ResetPasswordForm = ({ onSubmit }) => {
               placeholder="Confirm Password"
               value={confirmPassword}
               onChange={(e) => setConfirmPassword(e.target.value)}
-              className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]"
+              className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
               required
             />
           </div>
@@ -281,18 +281,18 @@ export default function MultiUserAuth() {
   return (
     <>
       <form onSubmit={handleLogin}>
-        <div className="flex flex-col justify-center items-center relative rounded-2xl md:bg-login-gradient md:shadow-[0_4px_14px_rgba(0,0,0,0.25)] md:px-12 py-12 -mt-4 md:mt-0">
+        <div className="flex flex-col justify-center items-center relative rounded-2xl bg-theme-bg-secondary md:shadow-[0_4px_14px_rgba(0,0,0,0.25)] md:px-12 py-12 -mt-4 md:mt-0">
           <div className="flex items-start justify-between pt-11 pb-9 rounded-t">
             <div className="flex items-center flex-col gap-y-4">
               <div className="flex gap-x-1">
                 <h3 className="text-md md:text-2xl font-bold text-white text-center white-space-nowrap hidden md:block">
                   {t("login.multi-user.welcome")}
                 </h3>
-                <p className="text-4xl md:text-2xl font-bold bg-gradient-to-r from-[#75D6FF] via-[#FFFFFF] to-[#FFFFFF] bg-clip-text text-transparent">
+                <p className="text-4xl md:text-2xl font-bold bg-gradient-to-r from-[#75D6FF] via-[#FFFFFF] light:via-[#75D6FF] to-[#FFFFFF] light:to-[#75D6FF] bg-clip-text text-transparent">
                   {customAppName || "AnythingLLM"}
                 </p>
               </div>
-              <p className="text-sm text-white/90 text-center">
+              <p className="text-sm text-theme-text-secondary text-center">
                 {t("login.sign-in.start")} {customAppName || "AnythingLLM"}{" "}
                 {t("login.sign-in.end")}
               </p>
@@ -305,7 +305,7 @@ export default function MultiUserAuth() {
                   name="username"
                   type="text"
                   placeholder={t("login.multi-user.placeholder-username")}
-                  className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]"
+                  className="bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]"
                   required={true}
                   autoComplete="off"
                 />
@@ -315,7 +315,7 @@ export default function MultiUserAuth() {
                   name="password"
                   type="password"
                   placeholder={t("login.multi-user.placeholder-password")}
-                  className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]"
+                  className="bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]"
                   required={true}
                   autoComplete="off"
                 />
diff --git a/frontend/src/components/Modals/Password/SingleUserAuth.jsx b/frontend/src/components/Modals/Password/SingleUserAuth.jsx
index 0b1730ce8..a645dcf7b 100644
--- a/frontend/src/components/Modals/Password/SingleUserAuth.jsx
+++ b/frontend/src/components/Modals/Password/SingleUserAuth.jsx
@@ -70,18 +70,18 @@ export default function SingleUserAuth() {
   return (
     <>
       <form onSubmit={handleLogin}>
-        <div className="flex flex-col justify-center items-center relative rounded-2xl md:bg-login-gradient md:shadow-[0_4px_14px_rgba(0,0,0,0.25)] md:px-12 py-12 -mt-36 md:-mt-10">
+        <div className="flex flex-col justify-center items-center relative rounded-2xl bg-theme-bg-secondary md:shadow-[0_4px_14px_rgba(0,0,0,0.25)] md:px-12 py-12 -mt-36 md:-mt-10">
           <div className="flex items-start justify-between pt-11 pb-9 rounded-t">
             <div className="flex items-center flex-col gap-y-4">
               <div className="flex gap-x-1">
                 <h3 className="text-md md:text-2xl font-bold text-white text-center white-space-nowrap hidden md:block">
                   {t("login.multi-user.welcome")}
                 </h3>
-                <p className="text-4xl md:text-2xl font-bold bg-gradient-to-r from-[#75D6FF] via-[#FFFFFF] to-[#FFFFFF] bg-clip-text text-transparent">
+                <p className="text-4xl md:text-2xl font-bold bg-gradient-to-r from-[#75D6FF] via-[#FFFFFF] light:via-[#75D6FF] to-[#FFFFFF] light:to-[#75D6FF] bg-clip-text text-transparent">
                   {customAppName || "AnythingLLM"}
                 </p>
               </div>
-              <p className="text-sm text-white/90 text-center">
+              <p className="text-sm text-theme-text-secondary text-center">
                 {t("login.sign-in.start")} {customAppName || "AnythingLLM"}{" "}
                 {t("login.sign-in.end")}
               </p>
@@ -94,12 +94,11 @@ export default function SingleUserAuth() {
                   name="password"
                   type="password"
                   placeholder="Password"
-                  className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]"
+                  className="bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]"
                   required={true}
                   autoComplete="off"
                 />
               </div>
-
               {error && <p className="text-red-400 text-sm">Error: {error}</p>}
             </div>
           </div>
@@ -109,13 +108,15 @@ export default function SingleUserAuth() {
               type="submit"
               className="md:text-primary-button md:bg-transparent text-dark-text text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-primary-button md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-primary-button bg-primary-button focus:z-10 w-full"
             >
-              {loading ? "Validating..." : "Login"}
+              {loading
+                ? t("login.multi-user.validating")
+                : t("login.multi-user.login")}
             </button>
           </div>
         </div>
       </form>
 
-      <ModalWrapper isOpen={isRecoveryCodeModalOpen}>
+      <ModalWrapper isOpen={isRecoveryCodeModalOpen} noPortal={true}>
         <RecoveryCodeModal
           recoveryCodes={recoveryCodes}
           onDownloadComplete={handleDownloadComplete}
diff --git a/frontend/src/components/Modals/Password/index.jsx b/frontend/src/components/Modals/Password/index.jsx
index 7010fc660..6f3f24e7f 100644
--- a/frontend/src/components/Modals/Password/index.jsx
+++ b/frontend/src/components/Modals/Password/index.jsx
@@ -13,7 +13,7 @@ import illustration from "@/media/illustrations/login-illustration.svg";
 export default function PasswordModal({ mode = "single" }) {
   const { loginLogo } = useLogo();
   return (
-    <div className="fixed top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] h-full bg-[#25272C] flex flex-col md:flex-row items-center justify-center">
+    <div className="fixed top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] h-full bg-theme-bg-primary flex flex-col md:flex-row items-center justify-center">
       <div
         style={{
           background: `
@@ -33,13 +33,13 @@ export default function PasswordModal({ mode = "single" }) {
           alt="login illustration"
         />
       </div>
-      <div className="flex flex-col items-center justify-center h-full w-full md:w-1/2 z-50 relative -mt-20">
+      <div className="flex flex-col items-center justify-center h-full w-full md:w-1/2 z-50 relative md:-mt-20 mt-0 !border-none bg-theme-bg-secondary md:bg-transparent">
         <img
           src={loginLogo}
           alt="Logo"
           className={`hidden relative md:flex rounded-2xl w-fit m-4 z-30 ${
             mode === "single" ? "md:top-2" : "md:top-12"
-          } absolute max-h-[65px] md:bg-login-gradient md:shadow-[0_4px_14px_rgba(0,0,0,0.25)]`}
+          } absolute max-h-[65px]`}
           style={{ objectFit: "contain" }}
         />
         {mode === "single" ? <SingleUserAuth /> : <MultiUserAuth />}
diff --git a/frontend/src/components/Preloader.jsx b/frontend/src/components/Preloader.jsx
index 4a81437bd..ce175828c 100644
--- a/frontend/src/components/Preloader.jsx
+++ b/frontend/src/components/Preloader.jsx
@@ -10,9 +10,9 @@ export function FullScreenLoader() {
   return (
     <div
       id="preloader"
-      className="fixed left-0 top-0 z-999999 flex h-screen w-screen items-center justify-center bg-sidebar"
+      className="fixed left-0 top-0 z-999999 flex h-screen w-screen items-center justify-center bg-theme-bg-primary"
     >
-      <div className="h-16 w-16 animate-spin rounded-full border-4 border-solid border-primary border-t-transparent"></div>
+      <div className="h-16 w-16 animate-spin rounded-full border-4 border-solid border-[var(--theme-loader)] border-t-transparent"></div>
     </div>
   );
 }
diff --git a/frontend/src/components/SettingsButton/index.jsx b/frontend/src/components/SettingsButton/index.jsx
index 6ce4fad15..98140bc8b 100644
--- a/frontend/src/components/SettingsButton/index.jsx
+++ b/frontend/src/components/SettingsButton/index.jsx
@@ -15,12 +15,16 @@ export default function SettingsButton() {
       <div className="flex w-fit">
         <Link
           to={paths.home()}
-          className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+          className="transition-all duration-300 p-2 rounded-full bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover"
           aria-label="Home"
           data-tooltip-id="footer-item"
           data-tooltip-content="Back to workspaces"
         >
-          <ArrowUUpLeft className="h-5 w-5" weight="fill" />
+          <ArrowUUpLeft
+            className="h-5 w-5"
+            weight="fill"
+            color="var(--theme-sidebar-footer-icon-fill)"
+          />
         </Link>
       </div>
     );
@@ -29,12 +33,17 @@ export default function SettingsButton() {
     <div className="flex w-fit">
       <Link
         to={paths.settings.appearance()}
-        className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+        className="transition-all duration-300 p-2 rounded-full bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover"
+        // className="transition-all duration-300 p-2 rounded-full  bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
         aria-label="Settings"
         data-tooltip-id="footer-item"
         data-tooltip-content="Open settings"
       >
-        <Wrench className="h-5 w-5" weight="fill" />
+        <Wrench
+          className="h-5 w-5"
+          weight="fill"
+          color="var(--theme-sidebar-footer-icon-fill)"
+        />
       </Link>
     </div>
   );
diff --git a/frontend/src/components/SettingsSidebar/MenuOption/index.jsx b/frontend/src/components/SettingsSidebar/MenuOption/index.jsx
index 3834549ea..7b2e42931 100644
--- a/frontend/src/components/SettingsSidebar/MenuOption/index.jsx
+++ b/frontend/src/components/SettingsSidebar/MenuOption/index.jsx
@@ -66,15 +66,15 @@ export default function MenuOption({
           rounded-[6px]
           ${
             isActive
-              ? "bg-white/5 font-medium border-outline"
-              : "hover:bg-white/5"
+              ? "bg-theme-sidebar-subitem-selected font-medium border-outline"
+              : "hover:bg-theme-sidebar-subitem-hover"
           }
         `}
       >
         <Link
           to={href}
           className={`flex flex-grow items-center px-[12px] h-[32px] font-medium ${
-            isChild ? "text-white/70 hover:text-white" : "text-white"
+            isChild ? "hover:text-white" : "text-white light:text-black"
           }`}
           onClick={hasChildren ? handleClick : undefined}
         >
@@ -83,7 +83,9 @@ export default function MenuOption({
             className={`${
               isChild ? "text-xs" : "text-sm"
             } leading-loose whitespace-nowrap overflow-hidden ml-2 ${
-              isActive ? "text-white" : ""
+              isActive
+                ? "text-white font-semibold"
+                : "text-white light:text-black"
             } ${!icon && "pl-5"}`}
           >
             {btnText}
@@ -94,7 +96,8 @@ export default function MenuOption({
             <CaretRight
               size={16}
               weight="bold"
-              className={`transition-transform ${
+              // color={isExpanded ? "#000000" : "var(--theme-sidebar-subitem-icon)"}
+              className={`transition-transform text-white light:text-black ${
                 isExpanded ? "rotate-90" : ""
               }`}
             />
diff --git a/frontend/src/components/SettingsSidebar/index.jsx b/frontend/src/components/SettingsSidebar/index.jsx
index 46eba5db9..bb2d32b2d 100644
--- a/frontend/src/components/SettingsSidebar/index.jsx
+++ b/frontend/src/components/SettingsSidebar/index.jsx
@@ -13,7 +13,6 @@ import {
   Toolbox,
 } from "@phosphor-icons/react";
 import useUser from "@/hooks/useUser";
-import { USER_BACKGROUND_COLOR } from "@/utils/constants";
 import { isMobile } from "react-device-detect";
 import Footer from "../Footer";
 import { Link } from "react-router-dom";
@@ -47,10 +46,10 @@ export default function SettingsSidebar() {
   if (isMobile) {
     return (
       <>
-        <div className="fixed top-0 left-0 right-0 z-10 flex justify-between items-center px-4 py-2 bg-sidebar text-slate-200 shadow-lg h-16">
+        <div className="fixed top-0 left-0 right-0 z-10 flex justify-between items-center px-4 py-2 bg-theme-bg-sidebar light:bg-white text-theme-text-secondary shadow-lg h-16">
           <button
             onClick={() => setShowSidebar(true)}
-            className="rounded-md p-2 flex items-center justify-center text-slate-200"
+            className="rounded-md p-2 flex items-center justify-center text-theme-text-secondary"
           >
             <List className="h-6 w-6" />
           </button>
@@ -75,12 +74,12 @@ export default function SettingsSidebar() {
               showBgOverlay
                 ? "transition-all opacity-1"
                 : "transition-none opacity-0"
-            }  duration-500 fixed top-0 left-0 ${USER_BACKGROUND_COLOR} bg-opacity-75 w-screen h-screen`}
+            }  duration-500 fixed top-0 left-0 bg-theme-bg-secondary bg-opacity-75 w-screen h-screen`}
             onClick={() => setShowSidebar(false)}
           />
           <div
             ref={sidebarRef}
-            className="h-[100vh] fixed top-0 left-0 rounded-r-[26px] bg-sidebar w-[80%] p-[18px]"
+            className="h-[100vh] fixed top-0 left-0 rounded-r-[26px] bg-theme-bg-sidebar w-[80%] p-[18px]"
           >
             <div className="w-full h-full flex flex-col overflow-x-hidden items-between">
               {/* Header Information */}
@@ -96,7 +95,7 @@ export default function SettingsSidebar() {
                 <div className="flex gap-x-2 items-center text-slate-500 shrink-0">
                   <a
                     href={paths.home()}
-                    className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+                    className="transition-all duration-300 p-2 rounded-full text-white bg-theme-action-menu-bg hover:bg-theme-action-menu-item-hover hover:border-slate-100 hover:border-opacity-50 border-transparent border"
                   >
                     <House className="h-4 w-4" />
                   </a>
@@ -105,7 +104,7 @@ export default function SettingsSidebar() {
 
               {/* Primary Body */}
               <div className="h-full flex flex-col w-full justify-between pt-4 overflow-y-scroll no-scroll">
-                <div className="h-auto md:sidebar-items md:dark:sidebar-items">
+                <div className="h-auto md:sidebar-items">
                   <div className="flex flex-col gap-y-4 pb-[60px] overflow-y-scroll no-scroll">
                     <SidebarOptions user={user} t={t} />
                     <div className="h-[1.5px] bg-[#3D4147] mx-3 mt-[14px]" />
@@ -115,14 +114,14 @@ export default function SettingsSidebar() {
                         user?.hasOwnProperty("role") && user.role !== "admin"
                       }
                       to={paths.settings.privacy()}
-                      className="text-darker hover:text-white text-xs leading-[18px] mx-3"
+                      className="text-theme-text-secondary hover:text-white text-xs leading-[18px] mx-3"
                     >
                       {t("settings.privacy")}
                     </Link>
                   </div>
                 </div>
               </div>
-              <div className="absolute bottom-2 left-0 right-0 pt-2 bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md">
+              <div className="absolute bottom-2 left-0 right-0 pt-2 bg-theme-bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md">
                 <Footer />
               </div>
             </div>
@@ -148,10 +147,10 @@ export default function SettingsSidebar() {
         </Link>
         <div
           ref={sidebarRef}
-          className="transition-all duration-500 relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px] p-[10px] h-[calc(100%-76px)]"
+          className="transition-all duration-500 relative m-[16px] rounded-[16px] bg-theme-bg-sidebar border-[2px] border-theme-sidebar-border light:border-none min-w-[250px] p-[10px] h-[calc(100%-76px)]"
         >
           <div className="w-full h-full flex flex-col overflow-x-hidden items-between min-w-[235px]">
-            <div className="text-white text-opacity-60 text-sm font-medium uppercase mt-[4px] mb-0 ml-2">
+            <div className="text-theme-text-secondary text-sm font-medium uppercase mt-[4px] mb-0 ml-2">
               {t("settings.title")}
             </div>
             <div className="relative h-[calc(100%-60px)] flex flex-col w-full justify-between pt-[10px] overflow-y-scroll no-scroll">
@@ -165,14 +164,14 @@ export default function SettingsSidebar() {
                       user?.hasOwnProperty("role") && user.role !== "admin"
                     }
                     to={paths.settings.privacy()}
-                    className="text-darker hover:text-white text-xs leading-[18px] mx-3"
+                    className="text-theme-text-secondary hover:text-white hover:light:text-theme-text-primary text-xs leading-[18px] mx-3"
                   >
                     {t("settings.privacy")}
                   </Link>
                 </div>
               </div>
             </div>
-            <div className="absolute bottom-0 left-0 right-0 pt-4 pb-3 rounded-b-[16px] bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md z-10">
+            <div className="absolute bottom-0 left-0 right-0 pt-4 pb-3 rounded-b-[16px] bg-theme-bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md z-10">
               <Footer />
             </div>
           </div>
@@ -201,7 +200,7 @@ function SupportEmail() {
   return (
     <Link
       to={supportEmail}
-      className="text-darker hover:text-white text-xs leading-[18px] mx-3 mt-1"
+      className="text-theme-text-secondary hover:text-white hover:light:text-theme-text-primary text-xs leading-[18px] mx-3 mt-1"
     >
       {t("settings.contact")}
     </Link>
diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx
index c4062102e..89d17ec6a 100644
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx
+++ b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx
@@ -33,7 +33,7 @@ export default function ThreadItem({
 
   return (
     <div
-      className="w-full relative flex h-[38px] items-center border-none hover:bg-slate-600/20 rounded-lg"
+      className="w-full relative flex h-[38px] items-center border-none rounded-lg"
       role="listitem"
     >
       {/* Curved line Element and leader if required */}
@@ -41,9 +41,9 @@ export default function ThreadItem({
         style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }}
         className={`${
           isActive
-            ? "border-l-2 border-b-2 border-white"
-            : "border-l border-b border-slate-300"
-        } h-[50%] absolute top-0 z-10 left-2 rounded-bl-lg`}
+            ? "border-l-2 border-b-2 border-white light:border-theme-sidebar-border z-30"
+            : "border-l border-b border-[#6F6F71] light:border-theme-sidebar-border z-10"
+        } h-[50%] absolute top-0 left-2 rounded-bl-lg`}
       ></div>
       {/* Downstroke border for next item */}
       {hasNext && (
@@ -51,9 +51,9 @@ export default function ThreadItem({
           style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }}
           className={`${
             idx <= activeIdx && !isActive
-              ? "border-l-2 border-white"
-              : "border-l border-slate-300"
-          } h-[100%] absolute top-0 z-1 left-2`}
+              ? "border-l-2 border-white light:border-theme-sidebar-border z-20"
+              : "border-l border-[#6F6F71] light:border-theme-sidebar-border z-10"
+          } h-[100%] absolute top-0 left-2`}
         ></div>
       )}
 
@@ -62,11 +62,15 @@ export default function ThreadItem({
         style={{ width: THREAD_CALLOUT_DETAIL_WIDTH + 8 }}
         className="h-full"
       />
-      <div className="flex w-full items-center justify-between pr-2 group relative">
+      <div
+        className={`flex w-full items-center justify-between pr-2 group relative ${isActive ? "bg-[var(--theme-sidebar-thread-selected)]" : "hover:bg-theme-sidebar-subitem-hover"} rounded-[4px]`}
+      >
         {thread.deleted ? (
           <div className="w-full flex justify-between">
-            <div className="w-full ">
-              <p className={`text-left text-sm text-slate-400/50 italic`}>
+            <div className="w-full pl-2 py-1">
+              <p
+                className={`text-left text-sm text-slate-400/50 light:text-slate-500 italic`}
+              >
                 deleted thread
               </p>
             </div>
@@ -77,7 +81,7 @@ export default function ThreadItem({
                 onClick={() => toggleMarkForDeletion(thread.id)}
               >
                 <ArrowCounterClockwise
-                  className="text-zinc-300 hover:text-white"
+                  className="text-zinc-300 hover:text-white light:text-theme-text-secondary hover:light:text-theme-text-primary"
                   size={18}
                 />
               </button>
@@ -88,12 +92,12 @@ export default function ThreadItem({
             href={
               window.location.pathname === linkTo || ctrlPressed ? "#" : linkTo
             }
-            className="w-full"
+            className="w-full pl-2 py-1"
             aria-current={isActive ? "page" : ""}
           >
             <p
               className={`text-left text-sm ${
-                isActive ? "font-medium text-white" : "text-slate-400"
+                isActive ? "font-medium text-white" : "text-theme-text-primary"
               }`}
             >
               {truncate(thread.name, 25)}
@@ -101,7 +105,9 @@ export default function ThreadItem({
           </a>
         )}
         {!!thread.slug && !thread.deleted && (
-          <div ref={optionsContainer}>
+          <div ref={optionsContainer} className="flex items-center">
+            {" "}
+            {/* Added flex and items-center */}
             {ctrlPressed ? (
               <button
                 type="button"
@@ -109,7 +115,7 @@ export default function ThreadItem({
                 onClick={() => toggleMarkForDeletion(thread.id)}
               >
                 <X
-                  className="text-zinc-300 hover:text-white"
+                  className="text-zinc-300 light:text-theme-text-secondary hover:text-white hover:light:text-theme-text-primary"
                   weight="bold"
                   size={18}
                 />
@@ -122,7 +128,10 @@ export default function ThreadItem({
                   onClick={() => setShowOptions(!showOptions)}
                   aria-label="Thread options"
                 >
-                  <DotsThree className="text-slate-300" size={25} />
+                  <DotsThree
+                    className="text-slate-300 light:text-theme-text-secondary hover:text-white hover:light:text-theme-text-primary"
+                    size={25}
+                  />
                 </button>
               </div>
             )}
@@ -225,12 +234,12 @@ function OptionsMenu({ containerRef, workspace, thread, onRemove, close }) {
   return (
     <div
       ref={menuRef}
-      className="absolute w-fit z-[20] top-[25px] right-[10px] bg-zinc-900 rounded-lg p-1"
+      className="absolute w-fit z-[20] top-[25px] right-[10px] bg-zinc-900 light:bg-theme-bg-sidebar light:border-[1px] light:border-theme-sidebar-border rounded-lg p-1"
     >
       <button
         onClick={renameThread}
         type="button"
-        className="w-full rounded-md flex items-center p-2 gap-x-2 hover:bg-slate-500/20 text-slate-300"
+        className="w-full rounded-md flex items-center p-2 gap-x-2 hover:bg-slate-500/20 text-slate-300 light:text-theme-text-primary"
       >
         <PencilSimple size={18} />
         <p className="text-sm">Rename</p>
@@ -238,7 +247,7 @@ function OptionsMenu({ containerRef, workspace, thread, onRemove, close }) {
       <button
         onClick={handleDelete}
         type="button"
-        className="w-full rounded-md flex items-center p-2 gap-x-2 hover:bg-red-500/20 text-slate-300 hover:text-red-100"
+        className="w-full rounded-md flex items-center p-2 gap-x-2 hover:bg-red-500/20 text-slate-300 light:text-theme-text-primary hover:text-red-100"
       >
         <Trash size={18} />
         <p className="text-sm">Delete Thread</p>
diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx
index 63cbef7b8..d311ca0ce 100644
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx
+++ b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx
@@ -107,9 +107,7 @@ export default function ThreadContainer({ workspace }) {
   if (loading) {
     return (
       <div className="flex flex-col bg-pulse w-full h-10 items-center justify-center">
-        <p className="text-xs text-slate-600 animate-pulse">
-          loading threads....
-        </p>
+        <p className="text-xs text-white animate-pulse">loading threads....</p>
       </div>
     );
   }
@@ -171,25 +169,33 @@ function NewThreadButton({ workspace }) {
   return (
     <button
       onClick={onClick}
-      className="w-full relative flex h-[40px] items-center border-none hover:bg-slate-600/20 rounded-lg"
+      className="w-full relative flex h-[40px] items-center border-none hover:bg-[var(--theme-sidebar-thread-selected)] rounded-lg"
     >
       <div className="flex w-full gap-x-2 items-center pl-4">
-        <div className="bg-zinc-600 p-2 rounded-lg h-[24px] w-[24px] flex items-center justify-center">
+        <div className="bg-white/20 p-2 rounded-lg h-[24px] w-[24px] flex items-center justify-center">
           {loading ? (
             <CircleNotch
               weight="bold"
               size={14}
-              className="shrink-0 animate-spin text-slate-100"
+              className="shrink-0 animate-spin text-white light:text-theme-text-primary"
             />
           ) : (
-            <Plus weight="bold" size={14} className="shrink-0 text-slate-100" />
+            <Plus
+              weight="bold"
+              size={14}
+              className="shrink-0 text-white light:text-theme-text-primary"
+            />
           )}
         </div>
 
         {loading ? (
-          <p className="text-left text-slate-100 text-sm">Starting Thread...</p>
+          <p className="text-left text-white light:text-theme-text-primary text-sm">
+            Starting Thread...
+          </p>
         ) : (
-          <p className="text-left text-slate-100 text-sm">New Thread</p>
+          <p className="text-left text-white light:text-theme-text-primary text-sm">
+            New Thread
+          </p>
         )}
       </div>
     </button>
@@ -206,14 +212,14 @@ function DeleteAllThreadButton({ ctrlPressed, threads, onDelete }) {
       className="w-full relative flex h-[40px] items-center border-none hover:bg-red-400/20 rounded-lg group"
     >
       <div className="flex w-full gap-x-2 items-center pl-4">
-        <div className="bg-zinc-600 p-2 rounded-lg h-[24px] w-[24px] flex items-center justify-center">
+        <div className="bg-zinc-600 light:bg-transparent p-2 rounded-lg h-[24px] w-[24px] flex items-center justify-center">
           <Trash
             weight="bold"
             size={14}
-            className="shrink-0 text-slate-100 group-hover:text-red-400"
+            className="shrink-0 text-white light:text-red-500/50 group-hover:text-red-400"
           />
         </div>
-        <p className="text-white text-left text-sm group-hover:text-red-400">
+        <p className="text-white light:text-theme-text-secondary text-left text-sm group-hover:text-red-400">
           Delete Selected
         </p>
       </div>
diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
index da052b643..44a4cdce5 100644
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
+++ b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect } from "react";
 import * as Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 import Workspace from "@/models/workspace";
@@ -8,7 +8,6 @@ import ManageWorkspace, {
 import paths from "@/utils/paths";
 import { useParams } from "react-router-dom";
 import { GearSix, SquaresFour, UploadSimple } from "@phosphor-icons/react";
-import truncate from "truncate";
 import useUser from "@/hooks/useUser";
 import ThreadContainer from "./ThreadContainer";
 import { Link, useMatch } from "react-router-dom";
@@ -18,9 +17,6 @@ export default function ActiveWorkspaces() {
   const [loading, setLoading] = useState(true);
   const [workspaces, setWorkspaces] = useState([]);
   const [selectedWs, setSelectedWs] = useState(null);
-  const [hoverStates, setHoverStates] = useState({});
-  const [gearHover, setGearHover] = useState({});
-  const [uploadHover, setUploadHover] = useState({});
   const { showing, showModal, hideModal } = useManageWorkspaceModal();
   const { user } = useUser();
   const isInWorkspaceSettings = !!useMatch("/workspace/:slug/settings/:tab");
@@ -33,41 +29,18 @@ export default function ActiveWorkspaces() {
     }
     getWorkspaces();
   }, []);
-  const handleMouseEnter = useCallback((workspaceId) => {
-    setHoverStates((prev) => ({ ...prev, [workspaceId]: true }));
-  }, []);
-
-  const handleMouseLeave = useCallback((workspaceId) => {
-    setHoverStates((prev) => ({ ...prev, [workspaceId]: false }));
-  }, []);
-  const handleGearMouseEnter = useCallback((workspaceId) => {
-    setGearHover((prev) => ({ ...prev, [workspaceId]: true }));
-  }, []);
-
-  const handleGearMouseLeave = useCallback((workspaceId) => {
-    setGearHover((prev) => ({ ...prev, [workspaceId]: false }));
-  }, []);
-
-  const handleUploadMouseEnter = useCallback((workspaceId) => {
-    setUploadHover((prev) => ({ ...prev, [workspaceId]: true }));
-  }, []);
-
-  const handleUploadMouseLeave = useCallback((workspaceId) => {
-    setUploadHover((prev) => ({ ...prev, [workspaceId]: false }));
-  }, []);
 
   if (loading) {
     return (
-      <>
-        <Skeleton.default
-          height={36}
-          width="100%"
-          count={3}
-          baseColor="#292524"
-          highlightColor="#4c4948"
-          enableAnimation={true}
-        />
-      </>
+      <Skeleton.default
+        height={40}
+        width="100%"
+        count={5}
+        baseColor="var(--theme-sidebar-item-default)"
+        highlightColor="var(--theme-sidebar-item-hover)"
+        enableAnimation={true}
+        className="my-1"
+      />
     );
   }
 
@@ -75,81 +48,67 @@ export default function ActiveWorkspaces() {
     <div role="list" aria-label="Workspaces" className="flex flex-col gap-y-2">
       {workspaces.map((workspace) => {
         const isActive = workspace.slug === slug;
-        const isHovered = hoverStates[workspace.id];
         return (
           <div
-            className="flex flex-col w-full"
-            onMouseEnter={() => handleMouseEnter(workspace.id)}
-            onMouseLeave={() => handleMouseLeave(workspace.id)}
+            className="flex flex-col w-full group"
             key={workspace.id}
             role="listitem"
           >
-            <div
-              key={workspace.id}
-              className="flex gap-x-2 items-center justify-between"
-            >
+            <div className="flex gap-x-2 items-center justify-between">
               <a
                 href={isActive ? null : paths.workspace.chat(workspace.slug)}
                 aria-current={isActive ? "page" : ""}
                 className={`
-              transition-all duration-[200ms]
-                flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-[4px] text-white justify-start items-center
-                hover:bg-workspace-item-selected-gradient hover:font-bold border-2 border-outline
-                ${
-                  isActive
-                    ? "bg-workspace-item-selected-gradient font-bold"
-                    : ""
-                }`}
+                  transition-all duration-[200ms]
+                  flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-[4px] text-white justify-start items-center
+                  bg-theme-sidebar-item-default
+                  hover:bg-theme-sidebar-subitem-hover hover:font-bold
+                  ${isActive ? "bg-theme-sidebar-item-selected font-bold border-2 border-transparent light:border-blue-400" : ""}
+                `}
               >
                 <div className="flex flex-row justify-between w-full">
-                  <div className="flex items-center space-x-2">
+                  <div className="flex items-center space-x-2 overflow-hidden">
                     <SquaresFour
                       weight={isActive ? "fill" : "regular"}
                       className="flex-shrink-0"
+                      color={
+                        isActive
+                          ? "var(--theme-sidebar-item-workspace-active)"
+                          : "var(--theme-sidebar-item-workspace-inactive)"
+                      }
                       size={24}
                     />
-                    <p
-                      className={`text-[14px] leading-loose whitespace-nowrap overflow-hidden ${
-                        isActive ? "text-white " : "text-zinc-200"
-                      }`}
-                    >
-                      {isActive || isHovered
-                        ? truncate(workspace.name, 15)
-                        : truncate(workspace.name, 20)}
-                    </p>
-                  </div>
-                  {(isActive || isHovered || gearHover[workspace.id]) &&
-                  user?.role !== "default" ? (
-                    <div className="flex items-center gap-x-[2px]">
-                      <div
-                        className={`flex hover:bg-[#646768] p-[2px] rounded-[4px] text-[#A7A8A9] hover:text-white ${
-                          uploadHover[workspace.id] ? "bg-[#646768]" : ""
-                        }`}
+                    <div className="w-[130px] overflow-hidden">
+                      <p
+                        className={`
+                        text-[14px] leading-loose whitespace-nowrap overflow-hidden text-white
+                        ${isActive ? "font-bold" : "font-medium"} truncate
+                        w-full group-hover:w-[100px] group-hover:font-bold group-hover:duration-200
+                      `}
                       >
-                        <button
-                          type="button"
-                          onClick={(e) => {
-                            e.preventDefault();
-                            setSelectedWs(workspace);
-                            showModal();
-                          }}
-                          onMouseEnter={() =>
-                            handleUploadMouseEnter(workspace.id)
-                          }
-                          onMouseLeave={() =>
-                            handleUploadMouseLeave(workspace.id)
-                          }
-                          className="rounded-md flex items-center justify-center ml-auto"
-                        >
-                          <UploadSimple
-                            className="h-[20px] w-[20px]"
-                            weight="bold"
-                          />
-                        </button>
-                      </div>
-
-                      <Link
+                        {workspace.name}
+                      </p>
+                    </div>
+                  </div>
+                  {user?.role !== "default" && (
+                    <div
+                      className={`flex items-center gap-x-[2px] transition-opacity duration-200 ${isActive ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`}
+                    >
+                      <button
                         type="button"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          setSelectedWs(workspace);
+                          showModal();
+                        }}
+                        className="rounded-md flex items-center justify-center ml-auto p-[2px] hover:bg-[#646768] text-[#A7A8A9] hover:text-white"
+                      >
+                        <UploadSimple
+                          className="h-[20px] w-[20px]"
+                          weight="bold"
+                        />
+                      </button>
+                      <Link
                         to={
                           isInWorkspaceSettings
                             ? paths.workspace.chat(workspace.slug)
@@ -157,27 +116,21 @@ export default function ActiveWorkspaces() {
                                 workspace.slug
                               )
                         }
-                        onMouseEnter={() => handleGearMouseEnter(workspace.id)}
-                        onMouseLeave={() => handleGearMouseLeave(workspace.id)}
-                        className="rounded-md flex items-center justify-center text-[#A7A8A9] hover:text-white ml-auto"
+                        className="rounded-md flex items-center justify-center text-[#A7A8A9] hover:text-white ml-auto p-[2px] hover:bg-[#646768]"
                         aria-label="General appearance settings"
                       >
-                        <div className="flex hover:bg-[#646768] p-[2px] rounded-[4px]">
-                          <GearSix
-                            color={
-                              isInWorkspaceSettings && workspace.slug === slug
-                                ? "#46C8FF"
-                                : gearHover[workspace.id]
-                                  ? "#FFFFFF"
-                                  : "#A7A8A9"
-                            }
-                            weight="bold"
-                            className="h-[20px] w-[20px]"
-                          />
-                        </div>
+                        <GearSix
+                          color={
+                            isInWorkspaceSettings && workspace.slug === slug
+                              ? "#46C8FF"
+                              : undefined
+                          }
+                          weight="bold"
+                          className="h-[20px] w-[20px]"
+                        />
                       </Link>
                     </div>
-                  ) : null}
+                  )}
                 </div>
               </a>
             </div>
diff --git a/frontend/src/components/Sidebar/index.jsx b/frontend/src/components/Sidebar/index.jsx
index 0daf9f698..edfac23bb 100644
--- a/frontend/src/components/Sidebar/index.jsx
+++ b/frontend/src/components/Sidebar/index.jsx
@@ -4,7 +4,6 @@ import NewWorkspaceModal, {
   useNewWorkspaceModal,
 } from "../Modals/NewWorkspace";
 import ActiveWorkspaces from "./ActiveWorkspaces";
-import { USER_BACKGROUND_COLOR } from "@/utils/constants";
 import useLogo from "@/hooks/useLogo";
 import useUser from "@/hooks/useUser";
 import Footer from "../Footer";
@@ -39,7 +38,7 @@ export default function Sidebar() {
       </Link>
       <div
         ref={sidebarRef}
-        className="relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px] p-[10px] h-[calc(100%-76px)]"
+        className="relative m-[16px] rounded-[16px] bg-theme-bg-sidebar border-[2px] border-theme-sidebar-border light:border-none min-w-[250px] p-[10px] h-[calc(100%-76px)]"
       >
         <div className="flex flex-col h-full overflow-x-hidden">
           <div className="flex-grow flex flex-col min-w-[235px]">
@@ -49,7 +48,7 @@ export default function Sidebar() {
                   {(!user || user?.role !== "default") && (
                     <button
                       onClick={showNewWsModal}
-                      className="flex flex-grow w-[75%] h-[44px] gap-x-2 py-[5px] px-2.5 mb-2 bg-white rounded-[8px] text-sidebar justify-center items-center hover:bg-opacity-80 transition-all duration-300"
+                      className="light:bg-[#C2E7FE] light:hover:bg-[#C2E7FE]/50 flex flex-grow w-[75%] h-[44px] gap-x-2 py-[5px] px-2.5 mb-2 bg-white rounded-[8px] text-sidebar justify-center items-center hover:bg-opacity-80 transition-all duration-300"
                     >
                       <Plus size={18} weight="bold" />
                       <p className="text-sidebar text-sm font-semibold">
@@ -61,7 +60,7 @@ export default function Sidebar() {
                 <ActiveWorkspaces />
               </div>
             </div>
-            <div className="absolute bottom-0 left-0 right-0 pt-4 pb-3 rounded-b-[16px] bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md z-10">
+            <div className="absolute bottom-0 left-0 right-0 pt-4 pb-3 rounded-b-[16px] bg-theme-bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md z-10">
               <Footer />
             </div>
           </div>
@@ -104,11 +103,11 @@ export function SidebarMobileHeader() {
     <>
       <div
         aria-label="Show sidebar"
-        className="fixed top-0 left-0 right-0 z-10 flex justify-between items-center px-4 py-2 bg-sidebar text-slate-200 shadow-lg h-16"
+        className="fixed top-0 left-0 right-0 z-10 flex justify-between items-center px-4 py-2 bg-theme-bg-sidebar light:bg-white text-slate-200 shadow-lg h-16"
       >
         <button
           onClick={() => setShowSidebar(true)}
-          className="rounded-md p-2 flex items-center justify-center text-slate-200"
+          className="rounded-md p-2 flex items-center justify-center text-theme-text-secondary"
         >
           <List className="h-6 w-6" />
         </button>
@@ -133,12 +132,12 @@ export function SidebarMobileHeader() {
             showBgOverlay
               ? "transition-all opacity-1"
               : "transition-none opacity-0"
-          }  duration-500 fixed top-0 left-0 ${USER_BACKGROUND_COLOR} bg-opacity-75 w-screen h-screen`}
+          }  duration-500 fixed top-0 left-0 bg-theme-bg-secondary bg-opacity-75 w-screen h-screen`}
           onClick={() => setShowSidebar(false)}
         />
         <div
           ref={sidebarRef}
-          className="relative h-[100vh] fixed top-0 left-0  rounded-r-[26px] bg-sidebar w-[80%] p-[18px] "
+          className="relative h-[100vh] fixed top-0 left-0  rounded-r-[26px] bg-theme-bg-sidebar w-[80%] p-[18px] "
         >
           <div className="w-full h-full flex flex-col overflow-x-hidden items-between">
             {/* Header Information */}
@@ -178,7 +177,7 @@ export function SidebarMobileHeader() {
                   <ActiveWorkspaces />
                 </div>
               </div>
-              <div className="z-99 absolute bottom-0 left-0 right-0 pt-2 pb-6 rounded-br-[26px] bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md">
+              <div className="z-99 absolute bottom-0 left-0 right-0 pt-2 pb-6 rounded-br-[26px] bg-theme-bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md">
                 <Footer />
               </div>
             </div>
diff --git a/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx b/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx
index 2b19dd98a..0f6926f8f 100644
--- a/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx
+++ b/frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx
@@ -16,7 +16,7 @@ export default function ElevenLabsOptions({ settings }) {
         <input
           type="password"
           name="TTSElevenLabsKey"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+          className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="ElevenLabs API Key"
           defaultValue={settings?.TTSElevenLabsKey ? "*".repeat(20) : ""}
           required={true}
@@ -68,7 +68,7 @@ function ElevenLabsModelSelection({ apiKey, settings }) {
         <select
           name="TTSElevenLabsVoiceModel"
           disabled={true}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             -- loading available models --
@@ -86,7 +86,7 @@ function ElevenLabsModelSelection({ apiKey, settings }) {
       <select
         name="TTSElevenLabsVoiceModel"
         required={true}
-        className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+        className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
       >
         {Object.keys(groupedModels)
           .sort()
diff --git a/frontend/src/components/TextToSpeech/OpenAiGenericOptions/index.jsx b/frontend/src/components/TextToSpeech/OpenAiGenericOptions/index.jsx
index 2247544cd..9517c14a9 100644
--- a/frontend/src/components/TextToSpeech/OpenAiGenericOptions/index.jsx
+++ b/frontend/src/components/TextToSpeech/OpenAiGenericOptions/index.jsx
@@ -11,7 +11,7 @@ export default function OpenAiGenericTextToSpeechOptions({ settings }) {
           <input
             type="url"
             name="TTSOpenAICompatibleEndpoint"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="http://localhost:7851/v1"
             defaultValue={settings?.TTSOpenAICompatibleEndpoint}
             required={false}
@@ -31,7 +31,7 @@ export default function OpenAiGenericTextToSpeechOptions({ settings }) {
           <input
             type="password"
             name="TTSOpenAICompatibleKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="API Key"
             defaultValue={
               settings?.TTSOpenAICompatibleKey ? "*".repeat(20) : ""
@@ -51,7 +51,7 @@ export default function OpenAiGenericTextToSpeechOptions({ settings }) {
           <input
             type="text"
             name="TTSOpenAICompatibleVoiceModel"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Your voice model identifier"
             defaultValue={settings?.TTSOpenAICompatibleVoiceModel}
             required={true}
diff --git a/frontend/src/components/TextToSpeech/OpenAiOptions/index.jsx b/frontend/src/components/TextToSpeech/OpenAiOptions/index.jsx
index 490e8486a..97d0411f5 100644
--- a/frontend/src/components/TextToSpeech/OpenAiOptions/index.jsx
+++ b/frontend/src/components/TextToSpeech/OpenAiOptions/index.jsx
@@ -16,7 +16,7 @@ export default function OpenAiTextToSpeechOptions({ settings }) {
         <input
           type="password"
           name="TTSOpenAIKey"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+          className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="OpenAI API Key"
           defaultValue={apiKey ? "*".repeat(20) : ""}
           required={true}
@@ -31,7 +31,7 @@ export default function OpenAiTextToSpeechOptions({ settings }) {
         <select
           name="TTSOpenAIVoiceModel"
           defaultValue={settings?.TTSOpenAIVoiceModel ?? "alloy"}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           {["alloy", "echo", "fable", "onyx", "nova", "shimmer"].map(
             (voice) => {
diff --git a/frontend/src/components/TextToSpeech/PiperTTSOptions/index.jsx b/frontend/src/components/TextToSpeech/PiperTTSOptions/index.jsx
index 48b87efe7..1bdd28342 100644
--- a/frontend/src/components/TextToSpeech/PiperTTSOptions/index.jsx
+++ b/frontend/src/components/TextToSpeech/PiperTTSOptions/index.jsx
@@ -75,7 +75,7 @@ function PiperTTSModelSelection({ settings }) {
           name="TTSPiperTTSVoiceModel"
           value=""
           disabled={true}
-          className="border-none bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="border-none bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           <option value="" disabled={true}>
             -- loading available models --
@@ -97,7 +97,7 @@ function PiperTTSModelSelection({ settings }) {
             required={true}
             onChange={(e) => setSelectedVoice(e.target.value)}
             value={selectedVoice}
-            className="border-none flex-shrink-0 bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+            className="border-none flex-shrink-0 bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
           >
             {voicesByLanguage(voices).map(([lang, voices]) => {
               return (
@@ -202,8 +202,8 @@ function DemoVoiceSample({ voiceId }) {
             </>
           ) : (
             <>
-              <PlayCircle size={20} className="flex-shrink-0" />
-              <p className="text-sm flex-shrink-0">Play sample</p>
+              <PlayCircle size={20} className="flex-shrink-0 text-white" />
+              <p className="text-white text-sm flex-shrink-0">Play sample</p>
             </>
           )}
         </>
diff --git a/frontend/src/components/TranscriptionSelection/NativeTranscriptionOptions/index.jsx b/frontend/src/components/TranscriptionSelection/NativeTranscriptionOptions/index.jsx
index dd14fb855..c12f89fa7 100644
--- a/frontend/src/components/TranscriptionSelection/NativeTranscriptionOptions/index.jsx
+++ b/frontend/src/components/TranscriptionSelection/NativeTranscriptionOptions/index.jsx
@@ -18,7 +18,7 @@ export default function NativeTranscriptionOptions({ settings }) {
             name="WhisperModelPref"
             defaultValue={model}
             onChange={(e) => setModel(e.target.value)}
-            className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+            className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
           >
             {["Xenova/whisper-small", "Xenova/whisper-large"].map(
               (value, i) => {
diff --git a/frontend/src/components/TranscriptionSelection/OpenAiOptions/index.jsx b/frontend/src/components/TranscriptionSelection/OpenAiOptions/index.jsx
index 014da9d9d..59e6eb927 100644
--- a/frontend/src/components/TranscriptionSelection/OpenAiOptions/index.jsx
+++ b/frontend/src/components/TranscriptionSelection/OpenAiOptions/index.jsx
@@ -13,7 +13,7 @@ export default function OpenAiWhisperOptions({ settings }) {
         <input
           type="password"
           name="OpenAiKey"
-          className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+          className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="OpenAI API Key"
           defaultValue={settings?.OpenAiKey ? "*".repeat(20) : ""}
           required={true}
@@ -29,7 +29,7 @@ export default function OpenAiWhisperOptions({ settings }) {
         </label>
         <select
           disabled={true}
-          className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
+          className="bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             Whisper Large
diff --git a/frontend/src/components/UserIcon/index.jsx b/frontend/src/components/UserIcon/index.jsx
index 037a2aff0..c6de31dd4 100644
--- a/frontend/src/components/UserIcon/index.jsx
+++ b/frontend/src/components/UserIcon/index.jsx
@@ -13,7 +13,7 @@ const UserIcon = memo(({ role }) => {
         <img
           src={WorkspaceDefaultPfp}
           alt="system profile picture"
-          className="flex items-center justify-center rounded-full border border-white/40"
+          className="flex items-center justify-center rounded-full border border-white/40 light:border-theme-sidebar-border light:bg-theme-bg-chat-input"
         />
       )}
     </div>
diff --git a/frontend/src/components/UserMenu/AccountModal/index.jsx b/frontend/src/components/UserMenu/AccountModal/index.jsx
index 9fe7f60a2..7cff3a307 100644
--- a/frontend/src/components/UserMenu/AccountModal/index.jsx
+++ b/frontend/src/components/UserMenu/AccountModal/index.jsx
@@ -4,6 +4,8 @@ import System from "@/models/system";
 import { AUTH_USER } from "@/utils/constants";
 import showToast from "@/utils/toast";
 import { Plus, X } from "@phosphor-icons/react";
+import ModalWrapper from "@/components/ModalWrapper";
+import { useTheme } from "@/hooks/useTheme";
 
 export default function AccountModal({ user, hideModal }) {
   const { pfp, setPfp } = usePfp();
@@ -61,122 +63,131 @@ export default function AccountModal({ user, hideModal }) {
   };
 
   return (
-    <div
-      id="account-modal"
-      className="bg-black/60 backdrop-blur-sm fixed top-0 left-0 outline-none w-screen h-screen flex items-center justify-center"
-    >
-      <div className="relative w-[500px] max-w-2xl max-h-full bg-main-gradient rounded-lg shadow">
-        <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
-          <h3 className="text-xl font-semibold text-white">Edit Account</h3>
+    <ModalWrapper isOpen={true}>
+      <div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
+        <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+          <div className="w-full flex gap-x-2 items-center">
+            <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+              Edit Account
+            </h3>
+          </div>
           <button
             onClick={hideModal}
             type="button"
-            className="text-gray-400 bg-transparent hover:border-white/60 rounded-lg p-1.5 ml-auto inline-flex items-center hover:bg-menu-item-selected-gradient hover:border-slate-100 border-transparent"
+            className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
           >
-            <X className="text-lg" />
+            <X size={24} weight="bold" className="text-white" />
           </button>
         </div>
-        <form onSubmit={handleUpdate} className="space-y-6">
-          <div className="flex flex-col md:flex-row items-center justify-center gap-8">
-            <div className="flex flex-col items-center">
-              <label className="w-48 h-48 flex flex-col items-center justify-center bg-zinc-900/50 transition-all duration-300 rounded-full mt-8 border-2 border-dashed border-white border-opacity-60 cursor-pointer hover:opacity-60">
-                <input
-                  id="logo-upload"
-                  type="file"
-                  accept="image/*"
-                  className="hidden"
-                  onChange={handleFileUpload}
-                />
-                {pfp ? (
-                  <img
-                    src={pfp}
-                    alt="User profile picture"
-                    className="w-48 h-48 rounded-full object-cover bg-white"
+        <div
+          className="h-full w-full overflow-y-auto"
+          style={{ maxHeight: "calc(100vh - 200px)" }}
+        >
+          <form onSubmit={handleUpdate} className="space-y-6">
+            <div className="flex flex-col md:flex-row items-center justify-center gap-8">
+              <div className="flex flex-col items-center">
+                <label className="group w-48 h-48 flex flex-col items-center justify-center bg-theme-bg-primary hover:bg-theme-bg-secondary transition-colors duration-300 rounded-full mt-8 border-2 border-dashed border-white light:border-[#686C6F] light:bg-[#E0F2FE] light:hover:bg-transparent cursor-pointer hover:opacity-60">
+                  <input
+                    id="logo-upload"
+                    type="file"
+                    accept="image/*"
+                    className="hidden"
+                    onChange={handleFileUpload}
                   />
-                ) : (
-                  <div className="flex flex-col items-center justify-center p-3">
-                    <Plus className="w-8 h-8 text-white/80 m-2" />
-                    <span className="text-white text-opacity-80 text-sm font-semibold">
-                      Profile Picture
-                    </span>
-                    <span className="text-white text-opacity-60 text-xs">
-                      800 x 800
-                    </span>
-                  </div>
+                  {pfp ? (
+                    <img
+                      src={pfp}
+                      alt="User profile picture"
+                      className="w-48 h-48 rounded-full object-cover bg-white"
+                    />
+                  ) : (
+                    <div className="flex flex-col items-center justify-center p-3">
+                      <Plus className="w-8 h-8 text-theme-text-secondary m-2" />
+                      <span className="text-theme-text-secondary text-opacity-80 text-sm font-semibold">
+                        Profile Picture
+                      </span>
+                      <span className="text-theme-text-secondary text-opacity-60 text-xs">
+                        800 x 800
+                      </span>
+                    </div>
+                  )}
+                </label>
+                {pfp && (
+                  <button
+                    type="button"
+                    onClick={handleRemovePfp}
+                    className="mt-3 text-theme-text-secondary text-opacity-60 text-sm font-medium hover:underline"
+                  >
+                    Remove Profile Picture
+                  </button>
                 )}
-              </label>
-              {pfp && (
-                <button
-                  type="button"
-                  onClick={handleRemovePfp}
-                  className="mt-3 text-white text-opacity-60 text-sm font-medium hover:underline"
+              </div>
+            </div>
+            <div className="flex flex-col gap-y-4 px-6">
+              <div>
+                <label
+                  htmlFor="username"
+                  className="block mb-2 text-sm font-medium text-theme-text-primary"
                 >
-                  Remove Profile Picture
-                </button>
-              )}
+                  Username
+                </label>
+                <input
+                  name="username"
+                  type="text"
+                  className="bg-theme-settings-input-bg placeholder:text-theme-settings-input-placeholder border-gray-500 text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                  placeholder="User's username"
+                  minLength={2}
+                  defaultValue={user.username}
+                  required
+                  autoComplete="off"
+                />
+                <p className="mt-2 text-xs text-white/60">
+                  Username must be only contain lowercase letters, numbers,
+                  underscores, and hyphens with no spaces
+                </p>
+              </div>
+              <div>
+                <label
+                  htmlFor="password"
+                  className="block mb-2 text-sm font-medium text-white"
+                >
+                  New Password
+                </label>
+                <input
+                  name="password"
+                  type="text"
+                  className="bg-theme-settings-input-bg placeholder:text-theme-settings-input-placeholder border-gray-500 text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                  placeholder={`${user.username}'s new password`}
+                  minLength={8}
+                />
+                <p className="mt-2 text-xs text-white/60">
+                  Password must be at least 8 characters long
+                </p>
+              </div>
+              <div className="flex flex-row gap-x-8">
+                <ThemePreference />
+                <LanguagePreference />
+              </div>
             </div>
-          </div>
-          <div className="flex flex-col gap-y-4 px-6">
-            <div>
-              <label
-                htmlFor="username"
-                className="block mb-2 text-sm font-medium text-white"
+            <div className="flex justify-between items-center border-t border-theme-modal-border pt-4 p-6">
+              <button
+                onClick={hideModal}
+                type="button"
+                className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
               >
-                Username
-              </label>
-              <input
-                name="username"
-                type="text"
-                className="bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-                placeholder="User's username"
-                minLength={2}
-                defaultValue={user.username}
-                required
-                autoComplete="off"
-              />
-              <p className="mt-2 text-xs text-white/60">
-                Username must only contain lowercase letters, numbers,
-                underscores, and hyphens with no spaces
-              </p>
-            </div>
-            <div>
-              <label
-                htmlFor="password"
-                className="block mb-2 text-sm font-medium text-white"
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
               >
-                New Password
-              </label>
-              <input
-                name="password"
-                type="text"
-                className="bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-                placeholder={`${user.username}'s new password`}
-                minLength={8}
-              />
-              <p className="mt-2 text-xs text-white/60">
-                Password must be at least 8 characters long
-              </p>
+                Update Account
+              </button>
             </div>
-            <LanguagePreference />
-          </div>
-          <div className="flex justify-between items-center border-t border-gray-500/50 pt-4 p-6">
-            <button
-              onClick={hideModal}
-              type="button"
-              className="px-4 py-2 rounded-lg text-white bg-transparent hover:bg-stone-900"
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              className="px-4 py-2 rounded-lg text-white bg-transparent border border-slate-200 hover:bg-slate-200 hover:text-slate-800"
-            >
-              Update Account
-            </button>
-          </div>
-        </form>
+          </form>
+        </div>
       </div>
-    </div>
+    </ModalWrapper>
   );
 }
 
@@ -198,7 +209,7 @@ function LanguagePreference() {
       </label>
       <select
         name="userLang"
-        className="bg-zinc-900 w-fit mt-2 px-4 border-gray-500 text-white text-sm rounded-lg block py-2"
+        className="bg-theme-settings-input-bg w-fit mt-2 px-4 focus:outline-primary-button active:outline-primary-button outline-none text-white text-sm rounded-lg block py-2"
         defaultValue={currentLanguage || "en"}
         onChange={(e) => changeLanguage(e.target.value)}
       >
@@ -213,3 +224,30 @@ function LanguagePreference() {
     </div>
   );
 }
+
+function ThemePreference() {
+  const { theme, setTheme, availableThemes } = useTheme();
+
+  return (
+    <div>
+      <label
+        htmlFor="theme"
+        className="block mb-2 text-sm font-medium text-white"
+      >
+        Theme Preference
+      </label>
+      <select
+        name="theme"
+        value={theme}
+        onChange={(e) => setTheme(e.target.value)}
+        className="bg-theme-settings-input-bg w-fit px-4 focus:outline-primary-button active:outline-primary-button outline-none text-white text-sm rounded-lg block py-2"
+      >
+        {Object.entries(availableThemes).map(([key, value]) => (
+          <option key={key} value={key}>
+            {value}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
diff --git a/frontend/src/components/UserMenu/UserButton/index.jsx b/frontend/src/components/UserMenu/UserButton/index.jsx
index 7808cd4ab..2ad79d00c 100644
--- a/frontend/src/components/UserMenu/UserButton/index.jsx
+++ b/frontend/src/components/UserMenu/UserButton/index.jsx
@@ -54,12 +54,12 @@ export default function UserButton() {
 
   if (mode === null) return null;
   return (
-    <div className="absolute top-3 right-4 md:top-9 md:right-10 w-fit h-fit z-99">
+    <div className="absolute top-3 right-4 md:top-9 md:right-10 w-fit h-fit z-40">
       <button
         ref={buttonRef}
         onClick={() => setShowMenu(!showMenu)}
         type="button"
-        className="uppercase transition-all duration-300 w-[35px] h-[35px] text-base font-semibold rounded-full flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient justify-center text-white p-2 hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+        className="uppercase transition-all duration-300 w-[35px] h-[35px] text-base font-semibold rounded-full flex items-center bg-theme-action-menu-bg hover:bg-theme-action-menu-item-hover justify-center text-white p-2 hover:border-slate-100 hover:border-opacity-50 border-transparent border"
       >
         {mode === "multi" ? <UserDisplay /> : <Person size={14} />}
       </button>
@@ -67,20 +67,20 @@ export default function UserButton() {
       {showMenu && (
         <div
           ref={menuRef}
-          className="w-fit rounded-lg absolute top-12 right-0 bg-sidebar p-4 flex items-center-justify-center"
+          className="w-fit rounded-lg absolute top-12 right-0 bg-theme-action-menu-bg p-2 flex items-center-justify-center"
         >
           <div className="flex flex-col gap-y-2">
             {mode === "multi" && !!user && (
               <button
                 onClick={handleOpenAccountModal}
-                className="text-white hover:bg-slate-200/20 w-full text-left px-4 py-1.5 rounded-md"
+                className="text-white hover:bg-theme-action-menu-item-hover w-full text-left px-4 py-1.5 rounded-md"
               >
                 Account
               </button>
             )}
             <a
               href={supportEmail}
-              className="text-white hover:bg-slate-200/20 w-full text-left px-4 py-1.5 rounded-md"
+              className="text-white hover:bg-theme-action-menu-item-hover w-full text-left px-4 py-1.5 rounded-md"
             >
               Support
             </a>
@@ -92,7 +92,7 @@ export default function UserButton() {
                 window.location.replace(paths.home());
               }}
               type="button"
-              className="text-white hover:bg-slate-200/20 w-full text-left px-4 py-1.5 rounded-md"
+              className="text-white hover:bg-theme-action-menu-item-hover w-full text-left px-4 py-1.5 rounded-md"
             >
               Sign out
             </button>
diff --git a/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx
index 07a370d0e..4702631ca 100644
--- a/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/AstraDBOptions/index.jsx
@@ -9,7 +9,7 @@ export default function AstraDBOptions({ settings }) {
           <input
             type="url"
             name="AstraDBEndpoint"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Astra DB API endpoint"
             defaultValue={settings?.AstraDBEndpoint}
             required={true}
@@ -25,7 +25,7 @@ export default function AstraDBOptions({ settings }) {
           <input
             type="password"
             name="AstraDBApplicationToken"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="AstraCS:..."
             defaultValue={
               settings?.AstraDBApplicationToken ? "*".repeat(20) : ""
diff --git a/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx
index dd3257aaf..c5938779e 100644
--- a/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/ChromaDBOptions/index.jsx
@@ -9,7 +9,7 @@ export default function ChromaDBOptions({ settings }) {
           <input
             type="url"
             name="ChromaEndpoint"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="http://localhost:8000"
             defaultValue={settings?.ChromaEndpoint}
             required={true}
@@ -27,7 +27,7 @@ export default function ChromaDBOptions({ settings }) {
             autoComplete="off"
             type="text"
             defaultValue={settings?.ChromaApiHeader}
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="X-Api-Key"
           />
         </div>
@@ -41,7 +41,7 @@ export default function ChromaDBOptions({ settings }) {
             autoComplete="off"
             type="password"
             defaultValue={settings?.ChromaApiKey ? "*".repeat(20) : ""}
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="sk-myApiKeyToAccessMyChromaInstance"
           />
         </div>
diff --git a/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx
index 4985d6707..5ee58612e 100644
--- a/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/MilvusDBOptions/index.jsx
@@ -9,7 +9,7 @@ export default function MilvusDBOptions({ settings }) {
           <input
             type="text"
             name="MilvusAddress"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="http://localhost:19530"
             defaultValue={settings?.MilvusAddress}
             required={true}
@@ -25,7 +25,7 @@ export default function MilvusDBOptions({ settings }) {
           <input
             type="text"
             name="MilvusUsername"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="username"
             defaultValue={settings?.MilvusUsername}
             autoComplete="off"
@@ -39,7 +39,7 @@ export default function MilvusDBOptions({ settings }) {
           <input
             type="password"
             name="MilvusPassword"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="password"
             defaultValue={settings?.MilvusPassword ? "*".repeat(20) : ""}
             autoComplete="off"
diff --git a/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx
index a3ffdb410..741a87c85 100644
--- a/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/PineconeDBOptions/index.jsx
@@ -9,7 +9,7 @@ export default function PineconeDBOptions({ settings }) {
           <input
             type="password"
             name="PineConeKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Pinecone API Key"
             defaultValue={settings?.PineConeKey ? "*".repeat(20) : ""}
             required={true}
@@ -24,7 +24,7 @@ export default function PineconeDBOptions({ settings }) {
           <input
             type="text"
             name="PineConeIndex"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="my-index"
             defaultValue={settings?.PineConeIndex}
             required={true}
diff --git a/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx
index 523f3e5b5..e74f68121 100644
--- a/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/QDrantDBOptions/index.jsx
@@ -9,7 +9,7 @@ export default function QDrantDBOptions({ settings }) {
           <input
             type="url"
             name="QdrantEndpoint"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="http://localhost:6633"
             defaultValue={settings?.QdrantEndpoint}
             required={true}
@@ -25,7 +25,7 @@ export default function QDrantDBOptions({ settings }) {
           <input
             type="password"
             name="QdrantApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="wOeqxsYP4....1244sba"
             defaultValue={settings?.QdrantApiKey}
             autoComplete="off"
diff --git a/frontend/src/components/VectorDBSelection/VectorDBItem/index.jsx b/frontend/src/components/VectorDBSelection/VectorDBItem/index.jsx
index a599e406d..3de81ac4e 100644
--- a/frontend/src/components/VectorDBSelection/VectorDBItem/index.jsx
+++ b/frontend/src/components/VectorDBSelection/VectorDBItem/index.jsx
@@ -9,8 +9,8 @@ export default function VectorDBItem({
   return (
     <div
       onClick={() => onClick(value)}
-      className={`w-full p-2 rounded-md hover:cursor-pointer hover:bg-white/10 ${
-        checked ? "bg-white/10" : ""
+      className={`w-full p-2 rounded-md hover:cursor-pointer hover:bg-theme-bg-secondary ${
+        checked ? "bg-theme-bg-secondary" : ""
       }`}
     >
       <input
diff --git a/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx b/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx
index 6ce605707..2beac6697 100644
--- a/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/WeaviateDBOptions/index.jsx
@@ -9,7 +9,7 @@ export default function WeaviateDBOptions({ settings }) {
           <input
             type="url"
             name="WeaviateEndpoint"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="http://localhost:8080"
             defaultValue={settings?.WeaviateEndpoint}
             required={true}
@@ -25,7 +25,7 @@ export default function WeaviateDBOptions({ settings }) {
           <input
             type="password"
             name="WeaviateApiKey"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="sk-123Abcweaviate"
             defaultValue={settings?.WeaviateApiKey}
             autoComplete="off"
diff --git a/frontend/src/components/VectorDBSelection/ZillizCloudOptions/index.jsx b/frontend/src/components/VectorDBSelection/ZillizCloudOptions/index.jsx
index bd08687bb..0de667a68 100644
--- a/frontend/src/components/VectorDBSelection/ZillizCloudOptions/index.jsx
+++ b/frontend/src/components/VectorDBSelection/ZillizCloudOptions/index.jsx
@@ -9,7 +9,7 @@ export default function ZillizCloudOptions({ settings }) {
           <input
             type="text"
             name="ZillizEndpoint"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="https://sample.api.gcp-us-west1.zillizcloud.com"
             defaultValue={settings?.ZillizEndpoint}
             required={true}
@@ -25,7 +25,7 @@ export default function ZillizCloudOptions({ settings }) {
           <input
             type="password"
             name="ZillizApiToken"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Zilliz cluster API Token"
             defaultValue={settings?.ZillizApiToken ? "*".repeat(20) : ""}
             autoComplete="off"
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Citation/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Citation/index.jsx
index 6f81b17c5..6db09561b 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Citation/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Citation/index.jsx
@@ -44,9 +44,9 @@ export default function Citations({ sources = [] }) {
     <div className="flex flex-col mt-4 justify-left">
       <button
         onClick={() => setOpen(!open)}
-        className={`text-white/50 font-medium italic text-sm text-left ml-14 pt-2 ${
+        className={`text-white/50 light:text-black/50 font-medium italic text-sm text-left ml-14 pt-2 ${
           open ? "pb-2" : ""
-        } hover:text-white/75 transition-all duration-300`}
+        } hover:text-white/75 hover:light:text-black/75 transition-all duration-300`}
       >
         {open ? "Hide Citations" : "Show Citations"}
         <CaretRight
@@ -96,24 +96,6 @@ const Citation = memo(({ source, onClick }) => {
   );
 });
 
-function SkeletonLine() {
-  const numOfBoxes = Math.floor(Math.random() * 5) + 2;
-  return (
-    <div className="flex space-x-2 mb-2">
-      {Array.from({ length: numOfBoxes }).map((_, index) => (
-        <div
-          key={index}
-          className="bg-white/20 rounded"
-          style={{
-            width: `${Math.random() * 150 + 50}px`,
-            height: "20px",
-          }}
-        ></div>
-      ))}
-    </div>
-  );
-}
-
 function omitChunkHeader(text) {
   if (!text.startsWith("<document_metadata>")) return text;
   return text.split("</document_metadata>")[1].trim();
@@ -125,8 +107,8 @@ function CitationDetailModal({ source, onClose }) {
 
   return (
     <ModalWrapper isOpen={source}>
-      <div className="w-full max-w-2xl bg-main-gradient rounded-lg shadow border border-white/10 overflow-hidden">
-        <div className="relative p-6 border-b rounded-t border-gray-500/50">
+      <div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
+        <div className="relative p-6 border-b rounded-t border-theme-modal-border">
           <div className="w-full flex gap-x-2 items-center">
             {isUrl ? (
               <a
@@ -154,43 +136,42 @@ function CitationDetailModal({ source, onClose }) {
           <button
             onClick={onClose}
             type="button"
-            className="absolute top-6 right-6 transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+            className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
           >
-            <X className="text-gray-300 text-lg" />
+            <X size={24} weight="bold" className="text-white" />
           </button>
         </div>
         <div
           className="h-full w-full overflow-y-auto"
           style={{ maxHeight: "calc(100vh - 200px)" }}
         >
-          <div className="p-6 space-y-2 flex-col">
-            {[...Array(3)].map((_, idx) => (
-              <SkeletonLine key={idx} />
-            ))}
+          <div className="py-7 px-9 space-y-2 flex-col">
             {chunks.map(({ text, score }, idx) => (
-              <div key={idx} className="pt-6 text-white">
-                <div className="flex flex-col w-full justify-start pb-6 gap-y-1">
-                  <p className="text-white whitespace-pre-line">
-                    {HTMLDecode(omitChunkHeader(text))}
-                  </p>
+              <>
+                <div key={idx} className="pt-6 text-white">
+                  <div className="flex flex-col w-full justify-start pb-6 gap-y-1">
+                    <p className="text-white whitespace-pre-line">
+                      {HTMLDecode(omitChunkHeader(text))}
+                    </p>
 
-                  {!!score && (
-                    <div className="w-full flex items-center text-xs text-white/60 gap-x-2 cursor-default">
-                      <div
-                        data-tooltip-id="similarity-score"
-                        data-tooltip-content={`This is the semantic similarity score of this chunk of text compared to your query calculated by the vector database.`}
-                        className="flex items-center gap-x-1"
-                      >
-                        <Info size={14} />
-                        <p>{toPercentString(score)} match</p>
+                    {!!score && (
+                      <div className="w-full flex items-center text-xs text-white/60 gap-x-2 cursor-default">
+                        <div
+                          data-tooltip-id="similarity-score"
+                          data-tooltip-content={`This is the semantic similarity score of this chunk of text compared to your query calculated by the vector database.`}
+                          className="flex items-center gap-x-1"
+                        >
+                          <Info size={14} />
+                          <p>{toPercentString(score)} match</p>
+                        </div>
                       </div>
-                    </div>
-                  )}
+                    )}
+                  </div>
                 </div>
-                {[...Array(3)].map((_, idx) => (
-                  <SkeletonLine key={idx} />
-                ))}
-              </div>
+                {idx !== chunks.length - 1 && (
+                  <hr className="border-theme-modal-border" />
+                )}
+              </>
             ))}
             <div className="mb-6"></div>
           </div>
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/ActionMenu/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/ActionMenu/index.jsx
index acd0c4fa5..396dc38b1 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/ActionMenu/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/ActionMenu/index.jsx
@@ -38,7 +38,7 @@ function ActionMenu({ chatId, forkThread, isEditing, role }) {
     <div className="mt-2 -ml-0.5 relative" ref={menuRef}>
       <button
         onClick={toggleMenu}
-        className="border-none text-zinc-300 hover:text-zinc-100 transition-colors duration-200"
+        className="border-none text-[var(--theme-sidebar-footer-icon-fill)] hover:text-[var(--theme-sidebar-footer-icon-fill)] transition-colors duration-200"
         data-tooltip-id="action-menu"
         data-tooltip-content="More actions"
         aria-label="More actions"
@@ -46,17 +46,17 @@ function ActionMenu({ chatId, forkThread, isEditing, role }) {
         <DotsThreeVertical size={24} weight="bold" />
       </button>
       {open && (
-        <div className="absolute -top-1 left-7 mt-1 border-[1.5px] border-white/40 rounded-lg bg-[#41454B] bg-opacity-100 flex flex-col shadow-[0_4px_14px_rgba(0,0,0,0.25)] text-white z-99 md:z-10">
+        <div className="absolute -top-1 left-7 mt-1 border-[1.5px] border-white/40 rounded-lg bg-theme-action-menu-bg flex flex-col shadow-[0_4px_14px_rgba(0,0,0,0.25)] text-white z-99 md:z-10">
           <button
             onClick={handleFork}
-            className="border-none flex items-center gap-x-2 hover:bg-white/10 py-1.5 px-2 transition-colors duration-200 w-full text-left"
+            className="border-none flex items-center gap-x-2 hover:bg-theme-action-menu-item-hover py-1.5 px-2 transition-colors duration-200 w-full text-left"
           >
             <TreeView size={18} />
             <span className="text-sm">Fork</span>
           </button>
           <button
             onClick={handleDelete}
-            className="border-none flex items-center gap-x-2 hover:bg-white/10 py-1.5 px-2 transition-colors duration-200 w-full text-left"
+            className="border-none flex items-center gap-x-2 hover:bg-theme-action-menu-item-hover py-1.5 px-2 transition-colors duration-200 w-full text-left"
           >
             <Trash size={18} />
             <span className="text-sm">Delete</span>
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx
index c99dd5b92..346d1de2a 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx
@@ -1,4 +1,3 @@
-import { AI_BACKGROUND_COLOR, USER_BACKGROUND_COLOR } from "@/utils/constants";
 import { Pencil } from "@phosphor-icons/react";
 import { useState, useEffect, useRef } from "react";
 
@@ -52,7 +51,11 @@ export function EditMessageAction({ chatId = null, role, isEditing }) {
         className="border-none text-zinc-300"
         aria-label={`Edit ${role === "user" ? "Prompt" : "Response"}`}
       >
-        <Pencil size={21} className="mb-1" />
+        <Pencil
+          color="var(--theme-sidebar-footer-icon-fill)"
+          size={21}
+          className="mb-1"
+        />
       </button>
     </div>
   );
@@ -95,9 +98,7 @@ export function EditMessageForm({
       <textarea
         ref={formRef}
         name="editedMessage"
-        className={`w-full rounded ${
-          role === "user" ? USER_BACKGROUND_COLOR : AI_BACKGROUND_COLOR
-        } border border-white/20 active:outline-none focus:outline-none focus:ring-0 pr-16 pl-1.5 pt-1.5 resize-y`}
+        className="w-full rounded bg-theme-bg-secondary border border-white/20 active:outline-none focus:outline-none focus:ring-0 pr-16 pl-1.5 pt-1.5 resize-y"
         defaultValue={message}
         onChange={adjustTextArea}
       />
@@ -110,7 +111,7 @@ export function EditMessageForm({
         </button>
         <button
           type="button"
-          className="px-2 py-1 bg-historical-msg-system text-white font-medium rounded-md hover:bg-historical-msg-user/90 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
+          className="px-2 py-1 bg-historical-msg-system text-white font-medium rounded-md hover:bg-historical-msg-user/90 light:hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
           onClick={cancelEdits}
         >
           Cancel
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/asyncTts.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/asyncTts.jsx
index 3fa99174f..ce9c80170 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/asyncTts.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/asyncTts.jsx
@@ -60,7 +60,7 @@ export default function AsyncTTSMessage({ slug, chatId }) {
         data-tooltip-content={
           speaking ? "Pause TTS speech of message" : "TTS Speak message"
         }
-        className="border-none text-zinc-300"
+        className="border-none text-[var(--theme-sidebar-footer-icon-fill)]"
         aria-label={speaking ? "Pause speech" : "Speak message"}
       >
         {speaking ? (
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/native.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/native.jsx
index daa9ebda9..ff80116e0 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/native.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/native.jsx
@@ -40,7 +40,7 @@ export default function NativeTTSMessage({ message }) {
         data-tooltip-content={
           speaking ? "Pause TTS speech of message" : "TTS Speak message"
         }
-        className="border-none text-zinc-300"
+        className="border-none text-[var(--theme-sidebar-footer-icon-fill)]"
         aria-label={speaking ? "Pause speech" : "Speak message"}
       >
         {speaking ? (
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/piperTTS.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/piperTTS.jsx
index 1ec39874c..02ab8e387 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/piperTTS.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/piperTTS.jsx
@@ -57,7 +57,7 @@ export default function PiperTTS({ voiceId = null, message }) {
         data-tooltip-content={
           speaking ? "Pause TTS speech of message" : "TTS Speak message"
         }
-        className="border-none text-zinc-300"
+        className="border-none text-[var(--theme-sidebar-footer-icon-fill)]"
         aria-label={speaking ? "Pause speech" : "Speak message"}
       >
         {speaking ? (
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx
index e396fd11b..5dc15e1a1 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx
@@ -78,6 +78,7 @@ function FeedbackButton({
         aria-label={tooltipContent}
       >
         <IconComponent
+          color="var(--theme-sidebar-footer-icon-fill)"
           size={20}
           className="mb-1"
           weight={isSelected ? "fill" : "regular"}
@@ -101,9 +102,17 @@ function CopyMessage({ message }) {
           aria-label="Copy"
         >
           {copied ? (
-            <Check size={20} className="mb-1" />
+            <Check
+              color="var(--theme-sidebar-footer-icon-fill)"
+              size={20}
+              className="mb-1"
+            />
           ) : (
-            <Copy size={20} className="mb-1" />
+            <Copy
+              color="var(--theme-sidebar-footer-icon-fill)"
+              size={20}
+              className="mb-1"
+            />
           )}
         </button>
       </div>
@@ -122,7 +131,12 @@ function RegenerateMessage({ regenerateMessage, chatId }) {
         className="border-none text-zinc-300"
         aria-label="Regenerate"
       >
-        <ArrowsClockwise size={20} className="mb-1" weight="fill" />
+        <ArrowsClockwise
+          color="var(--theme-sidebar-footer-icon-fill)"
+          size={20}
+          className="mb-1"
+          weight="fill"
+        />
       </button>
     </div>
   );
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
index b7da93750..c311dd6ed 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
@@ -5,7 +5,6 @@ import Actions from "./Actions";
 import renderMarkdown from "@/utils/chat/markdown";
 import { userFromStorage } from "@/utils/request";
 import Citations from "../Citation";
-import { AI_BACKGROUND_COLOR, USER_BACKGROUND_COLOR } from "@/utils/constants";
 import { v4 } from "uuid";
 import createDOMPurify from "dompurify";
 import { EditMessageForm, useEditMessage } from "./Actions/EditMessage";
@@ -43,9 +42,7 @@ const HistoricalMessage = ({
     return (
       <div
         key={uuid}
-        className={`flex justify-center items-end w-full ${
-          role === "user" ? USER_BACKGROUND_COLOR : AI_BACKGROUND_COLOR
-        }`}
+        className={`flex justify-center items-end w-full bg-theme-bg-chat`}
       >
         <div className="py-8 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
           <div className="flex gap-x-5">
@@ -72,9 +69,7 @@ const HistoricalMessage = ({
       onAnimationEnd={onEndAnimation}
       className={`${
         isDeleted ? "animate-remove" : ""
-      } flex justify-center items-end w-full group ${
-        role === "user" ? USER_BACKGROUND_COLOR : AI_BACKGROUND_COLOR
-      }`}
+      } flex justify-center items-end w-full group bg-theme-bg-chat`}
     >
       <div className="py-8 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
         <div className="flex gap-x-5">
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx
index 73275e9db..803374d5f 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx
@@ -13,7 +13,8 @@ const PromptReply = ({
   sources = [],
   closed = true,
 }) => {
-  const assistantBackgroundColor = "bg-historical-msg-system";
+  const assistantBackgroundColor = "bg-theme-bg-chat";
+
   if (!reply && sources.length === 0 && !pending && !error) return null;
 
   if (pending) {
@@ -24,7 +25,7 @@ const PromptReply = ({
         <div className="py-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
           <div className="flex gap-x-5">
             <WorkspaceProfileImage workspace={workspace} />
-            <div className="mt-3 ml-5 dot-falling"></div>
+            <div className="mt-3 ml-5 dot-falling light:invert"></div>
           </div>
         </div>
       </div>
@@ -57,11 +58,11 @@ const PromptReply = ({
       key={uuid}
       className={`flex justify-center items-end w-full ${assistantBackgroundColor}`}
     >
-      <div className="py-6 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
+      <div className="py-8 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
         <div className="flex gap-x-5">
           <WorkspaceProfileImage workspace={workspace} />
           <span
-            className={`reply flex flex-col gap-y-1 mt-2`}
+            className={`overflow-x-scroll break-words no-scroll`}
             dangerouslySetInnerHTML={{ __html: renderMarkdown(reply) }}
           />
         </div>
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx
index 85e45d695..85c30f312 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx
@@ -204,7 +204,7 @@ export default function ChatHistory({
 
   return (
     <div
-      className={`markdown text-white/80 font-light ${textSize} h-full md:h-[83%] pb-[100px] pt-6 md:pt-0 md:pb-20 md:mx-0 overflow-y-scroll flex flex-col justify-start ${
+      className={`markdown text-white/80 light:text-theme-text-primary font-light ${textSize} h-full md:h-[83%] pb-[100px] pt-6 md:pt-0 md:pb-20 md:mx-0 overflow-y-scroll flex flex-col justify-start ${
         showScrollbar ? "show-scrollbar" : "no-scroll"
       }`}
       id="chat-history"
@@ -299,11 +299,11 @@ function StatusResponse({ props }) {
 function WorkspaceChatSuggestions({ suggestions = [], sendSuggestion }) {
   if (suggestions.length === 0) return null;
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-white/60 text-xs mt-10 w-full justify-center">
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-theme-text-primary text-xs mt-10 w-full justify-center">
       {suggestions.map((suggestion, index) => (
         <button
           key={index}
-          className="text-left p-2.5 border rounded-xl border-white/20 bg-sidebar hover:bg-workspace-item-selected-gradient"
+          className="text-left p-2.5 rounded-xl bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover border border-theme-border"
           onClick={() => sendSuggestion(suggestion.heading, suggestion.message)}
         >
           <p className="font-semibold">{suggestion.heading}</p>
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatTooltips/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatTooltips/index.jsx
index 99571ba33..a7bb2ef87 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatTooltips/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatTooltips/index.jsx
@@ -57,9 +57,9 @@ export function ChatTooltips() {
         id="similarity-score"
         place="top"
         delayShow={100}
-        // z-[99] to ensure it renders above the chat history
+        // z-[100] to ensure it renders above the chat history
         // as the citation modal is z-indexed above the chat history
-        className="tooltip !text-xs z-[99]"
+        className="tooltip !text-xs z-[100]"
       />
     </>
   );
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/DnDWrapper/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/DnDWrapper/index.jsx
index 35ec9215d..32b58560f 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/DnDWrapper/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/DnDWrapper/index.jsx
@@ -224,7 +224,7 @@ export default function DnDFileUploaderWrapper({ children }) {
     >
       <div
         hidden={!dragging}
-        className="absolute top-0 w-full h-full bg-dark-text/90 rounded-2xl border-[4px] border-white z-[9999]"
+        className="absolute top-0 w-full h-full bg-dark-text/90 light:bg-[#C2E7FE]/90 rounded-2xl border-[4px] border-white z-[9999]"
       >
         <div className="w-full h-full flex justify-center items-center rounded-xl">
           <div className="flex flex-col gap-y-[14px] justify-center items-center">
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AgentMenu/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AgentMenu/index.jsx
index e0121e1d5..4ae6787c2 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AgentMenu/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AgentMenu/index.jsx
@@ -13,11 +13,14 @@ export default function AvailableAgentsButton({ showing, setShowAgents }) {
       data-tooltip-content="View all available agents you can use for chatting."
       aria-label="View all available agents you can use for chatting."
       onClick={() => setShowAgents(!showing)}
-      className={`flex justify-center items-center opacity-60 hover:opacity-100 cursor-pointer ${
+      className={`flex justify-center items-center cursor-pointer ${
         showing ? "!opacity-100" : ""
       }`}
     >
-      <At className="w-6 h-6 pointer-events-none text-white" />
+      <At
+        color="var(--theme-sidebar-footer-icon-fill)"
+        className={`w-[22px] h-[22px] pointer-events-none text-theme-text-primary opacity-60 hover:opacity-100 light:opacity-100 light:hover:opacity-60`}
+      />
       <Tooltip
         id="tooltip-agent-list-btn"
         place="top"
@@ -30,7 +33,7 @@ export default function AvailableAgentsButton({ showing, setShowAgents }) {
 
 function AbilityTag({ text }) {
   return (
-    <div className="px-2 bg-white/20 text-white/60 text-black text-xs w-fit rounded-sm">
+    <div className="px-2 bg-theme-action-menu-item-hover text-theme-text-secondary text-xs w-fit rounded-sm">
       <p>{text}</p>
     </div>
   );
@@ -66,7 +69,7 @@ export function AvailableAgents({
         <div className="w-full flex justify-center absolute bottom-[130px] md:bottom-[150px] left-0 z-10 px-4">
           <div
             ref={formRef}
-            className="w-[600px] p-2 bg-zinc-800 rounded-2xl shadow flex-col justify-center items-start gap-2.5 inline-flex"
+            className="w-[600px] p-2 bg-theme-action-menu-bg rounded-2xl shadow flex-col justify-center items-start gap-2.5 inline-flex"
           >
             <button
               onClick={() => {
@@ -74,10 +77,10 @@ export function AvailableAgents({
                 sendCommand("@agent ", false);
                 promptRef?.current?.focus();
               }}
-              className="w-full hover:cursor-pointer hover:bg-zinc-700 px-2 py-2 rounded-xl flex flex-col justify-start group"
+              className="w-full hover:cursor-pointer hover:bg-theme-action-menu-item-hover px-2 py-2 rounded-xl flex flex-col justify-start group"
             >
               <div className="w-full flex-col text-left flex pointer-events-none">
-                <div className="text-white text-sm">
+                <div className="text-theme-text-primary text-sm">
                   <b>@agent</b> - the default agent for this workspace.
                 </div>
                 <div className="flex flex-wrap gap-2 mt-2">
@@ -97,7 +100,7 @@ export function AvailableAgents({
               className="w-full rounded-xl flex flex-col justify-start group"
             >
               <div className="w-full flex-col text-center flex pointer-events-none">
-                <div className="text-white text-xs text-white/50 italic">
+                <div className="text-theme-text-secondary text-xs italic">
                   custom agents are coming soon!
                 </div>
               </div>
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AttachItem/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AttachItem/index.jsx
index bebbfe570..fcdee57f9 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AttachItem/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AttachItem/index.jsx
@@ -23,16 +23,19 @@ export default function AttachItem() {
           document?.getElementById("dnd-chat-file-uploader")?.click();
           return;
         }}
-        className={`border-none relative flex justify-center items-center opacity-60 hover:opacity-100 cursor-pointer`}
+        className={`border-none relative flex justify-center items-center opacity-60 hover:opacity-100 light:opacity-100 light:hover:opacity-60 cursor-pointer`}
       >
-        <PaperclipHorizontal className="w-6 h-6 pointer-events-none text-white rotate-90 -scale-y-100" />
-        <Tooltip
-          id="attach-item-btn"
-          place="top"
-          delayShow={300}
-          className="tooltip !text-xs z-99"
+        <PaperclipHorizontal
+          color="var(--theme-sidebar-footer-icon-fill)"
+          className="w-[22px] h-[22px] pointer-events-none text-white rotate-90 -scale-y-100"
         />
       </button>
+      <Tooltip
+        id="attach-item-btn"
+        place="top"
+        delayShow={300}
+        className="tooltip !text-xs z-[99]"
+      />
     </>
   );
 }
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
index 44677e8b7..ee6155ab2 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
@@ -21,7 +21,7 @@ import { Tooltip } from "react-tooltip";
 export default function AttachmentManager({ attachments }) {
   if (attachments.length === 0) return null;
   return (
-    <div className="flex flex-wrap mt-4 mb-2">
+    <div className="flex flex-wrap mt-4 mb-2 gap-y-2 gap-x-[0.5px]">
       {attachments.map((attachment) => (
         <AttachmentItem key={attachment.uid} attachment={attachment} />
       ))}
@@ -46,12 +46,15 @@ function AttachmentItem({ attachment }) {
   if (status === "in_progress") {
     return (
       <div
-        className={`h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-zinc-800 border border-white/20 w-[200px]`}
+        className={`h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-zinc-800 light:bg-theme-bg-sidebar border border-white/20 w-[200px]`}
       >
         <div
           className={`${iconBgColor} rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
         >
-          <CircleNotch size={30} className="text-white animate-spin" />
+          <CircleNotch
+            size={30}
+            className="text-white light:text-white animate-spin"
+          />
         </div>
         <div className="flex flex-col w-[130px]">
           <p className="text-white text-xs font-medium truncate">{file.name}</p>
@@ -69,30 +72,27 @@ function AttachmentItem({ attachment }) {
         <div
           data-tooltip-id={`attachment-uid-${uid}-error`}
           data-tooltip-content={error}
-          className={`relative h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-[#4E140B] border border-transparent w-[200px] group`}
+          className={`relative h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-error/40 light:bg-error/30 border border-transparent w-[200px] group`}
         >
           <div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
             <button
               onClick={removeFileFromQueue}
               type="button"
-              className="bg-zinc-700 hover:bg-red-400 rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
+              className="light:bg-white bg-zinc-700 hover:light:text-white hover:light:bg-red-400 hover:bg-red-400 rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
             >
-              <X
-                size={10}
-                className="flex-shrink-0 text-zinc-200 group-hover:text-white"
-              />
+              <X size={10} className="flex-shrink-0" />
             </button>
           </div>
           <div
             className={`bg-error rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
           >
-            <WarningOctagon size={30} className="text-white" />
+            <WarningOctagon size={30} className="text-white light:text-white" />
           </div>
           <div className="flex flex-col w-[130px]">
-            <p className="text-white text-xs font-medium truncate">
+            <p className="text-white light:text-red-600 text-xs font-medium truncate">
               {file.name}
             </p>
-            <p className="text-red-100 text-xs truncate">
+            <p className="text-red-100 light:text-red-600 text-xs truncate">
               {error ?? "this file failed to upload"}. It will not be available
               in the workspace.
             </p>
@@ -114,18 +114,15 @@ function AttachmentItem({ attachment }) {
         <div
           data-tooltip-id={`attachment-uid-${uid}-success`}
           data-tooltip-content={`${file.name} will be attached to this prompt. It will not be embedded into the workspace permanently.`}
-          className={`relative h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-zinc-800 border border-white/20 w-[200px] group`}
+          className={`relative h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-zinc-800 light:bg-theme-bg-sidebar border border-white/20 w-[200px] group`}
         >
           <div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
             <button
               onClick={removeFileFromQueue}
               type="button"
-              className="bg-zinc-700 hover:bg-red-400 rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
+              className="bg-zinc-700 light:bg-white hover:light:text-white hover:light:bg-red-400 hover:bg-red-400 rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
             >
-              <X
-                size={10}
-                className="flex-shrink-0 text-zinc-200 group-hover:text-white"
-              />
+              <X size={10} className="flex-shrink-0" />
             </button>
           </div>
           {contentString ? (
@@ -137,14 +134,16 @@ function AttachmentItem({ attachment }) {
             <div
               className={`${iconBgColor} rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
             >
-              <Icon size={30} className="text-white" />
+              <Icon size={30} className="text-white light:text-white" />
             </div>
           )}
           <div className="flex flex-col w-[130px]">
             <p className="text-white text-xs font-medium truncate">
               {file.name}
             </p>
-            <p className="text-white/80 text-xs font-medium">Image attached!</p>
+            <p className="text-white/80 light:text-black/80 text-xs font-medium">
+              Image attached!
+            </p>
           </div>
         </div>
         <Tooltip
@@ -162,28 +161,27 @@ function AttachmentItem({ attachment }) {
       <div
         data-tooltip-id={`attachment-uid-${uid}-success`}
         data-tooltip-content={`${file.name} was uploaded and embedded into this workspace. It will be available for RAG chat now.`}
-        className={`relative h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-zinc-800 border border-white/20 w-[200px] group`}
+        className={`relative h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-zinc-800 light:bg-theme-bg-sidebar border border-white/20 w-[200px] group`}
       >
         <div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
           <button
             onClick={removeFileFromQueue}
             type="button"
-            className="bg-zinc-700 hover:bg-red-400 rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
+            className="bg-zinc-700 light:bg-white hover:light:text-white hover:light:bg-red-400 hover:bg-red-400 rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
           >
-            <X
-              size={10}
-              className="flex-shrink-0 text-zinc-200 group-hover:text-white"
-            />
+            <X size={10} className="flex-shrink-0" />
           </button>
         </div>
         <div
           className={`${iconBgColor} rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
         >
-          <Icon size={30} className="text-white" />
+          <Icon size={30} className="text-white light:text-white" />
         </div>
         <div className="flex flex-col w-[130px]">
           <p className="text-white text-xs font-medium truncate">{file.name}</p>
-          <p className="text-white/80 text-xs font-medium">File embedded!</p>
+          <p className="text-white/80 light:text-black/80 text-xs font-medium">
+            File embedded!
+          </p>
         </div>
       </div>
       <Tooltip
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/AddPresetModal.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/AddPresetModal.jsx
index e5154580b..d727c416c 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/AddPresetModal.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/AddPresetModal.jsx
@@ -25,87 +25,105 @@ export default function AddPresetModal({ isOpen, onClose, onSave }) {
 
   return (
     <ModalWrapper isOpen={isOpen}>
-      <form
-        onSubmit={handleSubmit}
-        className="relative w-full max-w-2xl max-h-full"
-      >
-        <div className="relative bg-main-gradient rounded-lg shadow">
-          <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
-            <h3 className="text-xl font-semibold text-white">Add New Preset</h3>
-            <button
-              onClick={onClose}
-              type="button"
-              className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
-            >
-              <X className="text-gray-300 text-lg" />
-            </button>
+      <div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
+        <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+          <div className="w-full flex gap-x-2 items-center">
+            <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+              Add New Preset
+            </h3>
           </div>
-          <div className="p-6 space-y-6 flex h-full w-full">
-            <div className="w-full flex flex-col gap-y-4">
-              <div>
-                <label className="block mb-2 text-sm font-medium text-white">
-                  Command
-                </label>
-                <div className="flex items-center">
-                  <span className="text-white text-sm mr-2 font-bold">/</span>
+          <button
+            onClick={onClose}
+            type="button"
+            className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
+          >
+            <X size={24} weight="bold" className="text-white" />
+          </button>
+        </div>
+        <div
+          className="h-full w-full overflow-y-auto"
+          style={{ maxHeight: "calc(100vh - 200px)" }}
+        >
+          <form onSubmit={handleSubmit}>
+            <div className="py-7 px-9 space-y-2 flex-col">
+              <div className="w-full flex flex-col gap-y-4">
+                <div>
+                  <label
+                    htmlFor="command"
+                    className="block mb-2 text-sm font-medium text-white"
+                  >
+                    Command
+                  </label>
+                  <div className="flex items-center">
+                    <span className="text-white text-sm mr-2 font-bold">/</span>
+                    <input
+                      name="command"
+                      type="text"
+                      id="command"
+                      placeholder="your-command"
+                      value={command}
+                      onChange={handleCommandChange}
+                      maxLength={25}
+                      autoComplete="off"
+                      required={true}
+                      className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                    />
+                  </div>
+                </div>
+                <div>
+                  <label
+                    htmlFor="prompt"
+                    className="block mb-2 text-sm font-medium text-white"
+                  >
+                    Prompt
+                  </label>
+                  <textarea
+                    name="prompt"
+                    id="prompt"
+                    autoComplete="off"
+                    placeholder="This is the content that will be injected in front of your prompt."
+                    required={true}
+                    className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                  ></textarea>
+                </div>
+                <div>
+                  <label
+                    htmlFor="description"
+                    className="block mb-2 text-sm font-medium text-white"
+                  >
+                    Description
+                  </label>
                   <input
-                    name="command"
                     type="text"
-                    placeholder="your-command"
-                    value={command}
-                    onChange={handleCommandChange}
-                    maxLength={25}
+                    name="description"
+                    id="description"
+                    placeholder="Responds with a poem about LLMs."
+                    maxLength={80}
                     autoComplete="off"
                     required={true}
-                    className="border-none bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                    className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   />
                 </div>
               </div>
-              <div>
-                <label className="block mb-2 text-sm font-medium text-white">
-                  Prompt
-                </label>
-                <textarea
-                  name="prompt"
-                  autoComplete="off"
-                  placeholder="This is the content that will be injected in front of your prompt."
-                  required={true}
-                  className="border-none bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-                ></textarea>
-              </div>
-              <div>
-                <label className="border-none block mb-2 text-sm font-medium text-white">
-                  Description
-                </label>
-                <input
-                  type="text"
-                  name="description"
-                  placeholder="Responds with a poem about LLMs."
-                  maxLength={80}
-                  autoComplete="off"
-                  required={true}
-                  className="border-none bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-                />
-              </div>
             </div>
-          </div>
-          <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
-            <button
-              onClick={onClose}
-              type="button"
-              className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300"
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-            >
-              Save
-            </button>
-          </div>
+            <div className="flex w-full justify-end items-center p-6 space-x-2 border-t border-theme-modal-border rounded-b">
+              <button
+                onClick={onClose}
+                type="button"
+                className="transition-all duration-300 bg-transparent text-white hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+              >
+                Save
+              </button>
+            </div>
+          </form>
         </div>
-      </form>
+      </div>
     </ModalWrapper>
   );
 }
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/EditPresetModal.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/EditPresetModal.jsx
index f3423d2f8..6715cbe20 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/EditPresetModal.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/EditPresetModal.jsx
@@ -47,105 +47,109 @@ export default function EditPresetModal({
 
   return (
     <ModalWrapper isOpen={isOpen}>
-      <form
-        onSubmit={handleSubmit}
-        className="relative w-full max-w-2xl max-h-full"
-      >
-        <div className="relative bg-main-gradient rounded-lg shadow">
-          <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
-            <h3 className="text-xl font-semibold text-white">Edit Preset</h3>
-            <button
-              onClick={onClose}
-              type="button"
-              className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
-            >
-              <X className="text-gray-300 text-lg" />
-            </button>
+      <div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
+        <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+          <div className="w-full flex gap-x-2 items-center">
+            <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+              Edit Preset
+            </h3>
           </div>
-          <div className="p-6 space-y-6 flex h-full w-full">
-            <div className="w-full flex flex-col gap-y-4">
-              <div>
-                <label
-                  htmlFor="command"
-                  className="block mb-2 text-sm font-medium text-white"
-                >
-                  Command
-                </label>
-                <div className="flex items-center">
-                  <span className="text-white text-sm mr-2 font-bold">/</span>
+          <button
+            onClick={onClose}
+            type="button"
+            className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
+          >
+            <X size={24} weight="bold" className="text-white" />
+          </button>
+        </div>
+        <div
+          className="h-full w-full overflow-y-auto"
+          style={{ maxHeight: "calc(100vh - 200px)" }}
+        >
+          <form onSubmit={handleSubmit}>
+            <div className="py-7 px-9 space-y-2 flex-col">
+              <div className="w-full flex flex-col gap-y-4">
+                <div>
+                  <label
+                    htmlFor="command"
+                    className="block mb-2 text-sm font-medium text-white"
+                  >
+                    Command
+                  </label>
+                  <div className="flex items-center">
+                    <span className="text-white text-sm mr-2 font-bold">/</span>
+                    <input
+                      type="text"
+                      name="command"
+                      placeholder="your-command"
+                      value={command}
+                      onChange={handleCommandChange}
+                      required={true}
+                      className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                    />
+                  </div>
+                </div>
+                <div>
+                  <label
+                    htmlFor="prompt"
+                    className="block mb-2 text-sm font-medium text-white"
+                  >
+                    Prompt
+                  </label>
+                  <textarea
+                    name="prompt"
+                    placeholder="This is a test prompt. Please respond with a poem about LLMs."
+                    defaultValue={preset.prompt}
+                    required={true}
+                    className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                  ></textarea>
+                </div>
+                <div>
+                  <label
+                    htmlFor="description"
+                    className="block mb-2 text-sm font-medium text-white"
+                  >
+                    Description
+                  </label>
                   <input
                     type="text"
-                    name="command"
-                    placeholder="your-command"
-                    value={command}
-                    onChange={handleCommandChange}
+                    name="description"
+                    defaultValue={preset.description}
+                    placeholder="Responds with a poem about LLMs."
                     required={true}
-                    className="border-none bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                    className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   />
                 </div>
               </div>
-              <div>
-                <label
-                  htmlFor="prompt"
-                  className="block mb-2 text-sm font-medium text-white"
-                >
-                  Prompt
-                </label>
-                <textarea
-                  name="prompt"
-                  placeholder="This is a test prompt. Please respond with a poem about LLMs."
-                  defaultValue={preset.prompt}
-                  required={true}
-                  className="border-none bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-                ></textarea>
-              </div>
-              <div>
-                <label
-                  htmlFor="description"
-                  className="block mb-2 text-sm font-medium text-white"
-                >
-                  Description
-                </label>
-                <input
-                  type="text"
-                  name="description"
-                  defaultValue={preset.description}
-                  placeholder="Responds with a poem about LLMs."
-                  required={true}
-                  className="border-none bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-                />
-              </div>
             </div>
-          </div>
-          <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
-            <div className="flex flex-col space-y-2">
+            <div className="flex w-full justify-between items-center p-6 space-x-2 border-t border-theme-modal-border rounded-b">
               <button
                 disabled={deleting}
                 onClick={handleDelete}
                 type="button"
-                className="px-4 py-2 rounded-lg text-red-500 hover:bg-red-500/25 transition-all duration-300 disabled:opacity-50"
+                className="transition-all duration-300 bg-transparent text-red-500 hover:bg-red-500/25 px-4 py-2 rounded-lg text-sm disabled:opacity-50"
               >
                 {deleting ? "Deleting..." : "Delete Preset"}
               </button>
+              <div className="flex space-x-2">
+                <button
+                  onClick={onClose}
+                  type="button"
+                  className="transition-all duration-300 bg-transparent text-white hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+                >
+                  Save
+                </button>
+              </div>
             </div>
-            <div className="flex space-x-2">
-              <button
-                onClick={onClose}
-                type="button"
-                className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300"
-              >
-                Cancel
-              </button>
-              <button
-                type="submit"
-                className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-              >
-                Save
-              </button>
-            </div>
-          </div>
+          </form>
         </div>
-      </form>
+      </div>
     </ModalWrapper>
   );
 }
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/index.jsx
index edef845c1..c8c493577 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/SlashPresets/index.jsx
@@ -85,11 +85,13 @@ export default function SlashPresets({ setShowing, sendCommand }) {
             setShowing(false);
             sendCommand(`${preset.command} `, false);
           }}
-          className="w-full hover:cursor-pointer hover:bg-zinc-700 px-2 py-2 rounded-xl flex flex-row justify-start"
+          className="w-full hover:cursor-pointer hover:bg-theme-action-menu-item-hover px-2 py-2 rounded-xl flex flex-row justify-start"
         >
           <div className="w-full flex-col text-left flex pointer-events-none">
-            <div className="text-white text-sm font-bold">{preset.command}</div>
-            <div className="text-white text-opacity-60 text-sm">
+            <div className="text-theme-text-primary text-sm font-bold">
+              {preset.command}
+            </div>
+            <div className="text-theme-text-secondary text-sm">
               {preset.description}
             </div>
           </div>
@@ -98,7 +100,7 @@ export default function SlashPresets({ setShowing, sendCommand }) {
               e.stopPropagation();
               handleEditPreset(preset);
             }}
-            className="text-white text-sm p-1 hover:cursor-pointer hover:bg-zinc-900 rounded-full mt-1"
+            className="text-theme-text-primary text-sm p-1 hover:cursor-pointer hover:bg-theme-action-menu-item-hover rounded-full mt-1"
           >
             <DotsThree size={24} weight="bold" />
           </button>
@@ -106,11 +108,13 @@ export default function SlashPresets({ setShowing, sendCommand }) {
       ))}
       <button
         onClick={openAddModal}
-        className="w-full hover:cursor-pointer hover:bg-zinc-700 px-2 py-1 rounded-xl flex flex-col justify-start"
+        className="w-full hover:cursor-pointer hover:bg-theme-action-menu-item-hover px-2 py-1 rounded-xl flex flex-col justify-start"
       >
         <div className="w-full flex-row flex pointer-events-none items-center gap-2">
-          <Plus size={24} weight="fill" fill="white" />
-          <div className="text-white text-sm font-medium">Add New Preset </div>
+          <Plus size={24} weight="fill" className="text-theme-text-primary" />
+          <div className="text-theme-text-primary text-sm font-medium">
+            Add New Preset
+          </div>
         </div>
       </button>
       <AddPresetModal
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/endAgentSession.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/endAgentSession.jsx
index 093fd5a10..eb99c698a 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/endAgentSession.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/endAgentSession.jsx
@@ -10,7 +10,7 @@ export default function EndAgentSession({ setShowing, sendCommand }) {
         setShowing(false);
         sendCommand("/exit", true);
       }}
-      className="w-full hover:cursor-pointer hover:bg-zinc-700 px-2 py-2 rounded-xl flex flex-col justify-start"
+      className="w-full hover:cursor-pointer hover:bg-theme-action-menu-item-hover px-2 py-2 rounded-xl flex flex-col justify-start"
     >
       <div className="w-full flex-col text-left flex pointer-events-none">
         <div className="text-white text-sm font-bold">/exit</div>
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/icons/SlashCommandIcon.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/icons/SlashCommandIcon.jsx
new file mode 100644
index 000000000..4805233ee
--- /dev/null
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/icons/SlashCommandIcon.jsx
@@ -0,0 +1,28 @@
+export default function SlashCommandIcon(props) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        x="1.02539"
+        y="1.43799"
+        width="17.252"
+        height="17.252"
+        rx="2"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M6.70312 14.5408L12.5996 5.8056"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/icons/slash-commands-icon.svg b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/icons/slash-commands-icon.svg
deleted file mode 100644
index 368bdf526..000000000
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/icons/slash-commands-icon.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1.02539" y="1.43799" width="17.252" height="17.252" rx="2" stroke="white" stroke-opacity="1.0" stroke-width="1.5"/>
-<path d="M6.70312 14.5408L12.5996 5.8056" stroke="white" stroke-opacity="1.0" stroke-width="1.5" stroke-linecap="round"/>
-</svg>
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx
index c242da27c..26f1958f1 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import SlashCommandIcon from "./icons/slash-commands-icon.svg";
+import SlashCommandIcon from "./icons/SlashCommandIcon";
 import { Tooltip } from "react-tooltip";
 import ResetCommand from "./reset";
 import EndAgentSession from "./endAgentSession";
@@ -12,14 +12,13 @@ export default function SlashCommandsButton({ showing, setShowSlashCommand }) {
       data-tooltip-id="tooltip-slash-cmd-btn"
       data-tooltip-content="View all available slash commands for chatting."
       onClick={() => setShowSlashCommand(!showing)}
-      className={`flex justify-center items-center opacity-60 hover:opacity-100 cursor-pointer ${
+      className={`flex justify-center items-center cursor-pointer ${
         showing ? "!opacity-100" : ""
       }`}
     >
-      <img
-        src={SlashCommandIcon}
-        className="w-6 h-6 pointer-events-none"
-        alt="Slash commands button"
+      <SlashCommandIcon
+        color="var(--theme-sidebar-footer-icon-fill)"
+        className={`w-[20px] h-[20px] pointer-events-none opacity-60 hover:opacity-100 light:opacity-100 light:hover:opacity-60`}
       />
       <Tooltip
         id="tooltip-slash-cmd-btn"
@@ -53,7 +52,7 @@ export function SlashCommands({ showing, setShowing, sendCommand }) {
       <div className="w-full flex justify-center absolute bottom-[130px] md:bottom-[150px] left-0 z-10 px-4">
         <div
           ref={cmdRef}
-          className="w-[600px] bg-zinc-800 rounded-2xl flex shadow flex-col justify-start items-start gap-2.5 p-2 overflow-y-auto max-h-[300px] no-scroll"
+          className="w-[600px] bg-theme-action-menu-bg rounded-2xl flex shadow flex-col justify-start items-start gap-2.5 p-2 overflow-y-auto max-h-[300px] no-scroll"
         >
           <ResetCommand sendCommand={sendCommand} setShowing={setShowing} />
           <EndAgentSession sendCommand={sendCommand} setShowing={setShowing} />
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/reset.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/reset.jsx
index e53ec26d0..00fbd6cdd 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/reset.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/reset.jsx
@@ -10,7 +10,7 @@ export default function ResetCommand({ setShowing, sendCommand }) {
         setShowing(false);
         sendCommand("/reset", true);
       }}
-      className="w-full hover:cursor-pointer hover:bg-zinc-700 px-2 py-2 rounded-xl flex flex-col justify-start"
+      className="w-full hover:cursor-pointer hover:bg-theme-action-menu-item-hover px-2 py-2 rounded-xl flex flex-col justify-start"
     >
       <div className="w-full flex-col text-left flex pointer-events-none">
         <div className="text-white text-sm font-bold">/reset</div>
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SpeechToText/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SpeechToText/index.jsx
index a25f3ef6e..64cfa3763 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SpeechToText/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SpeechToText/index.jsx
@@ -98,13 +98,14 @@ export default function SpeechToText({ sendCommand }) {
       data-tooltip-content="Speak your prompt"
       aria-label="Speak your prompt"
       onClick={listening ? endTTSSession : startSTTSession}
-      className={`relative flex justify-center items-center opacity-60 hover:opacity-100 cursor-pointer ${
+      className={`relative flex justify-center items-center opacity-60 hover:opacity-100 light:opacity-100 light:hover:opacity-60 cursor-pointer ${
         !!listening ? "!opacity-100" : ""
       }`}
     >
       <Microphone
         weight="fill"
-        className={`w-6 h-6 pointer-events-none text-white overflow-hidden rounded-full ${
+        color="var(--theme-sidebar-footer-icon-fill)"
+        className={`w-[22px] h-[22px] pointer-events-none text-theme-text-primary ${
           listening ? "animate-pulse-glow" : ""
         }`}
       />
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx
index 645e943c0..e64367348 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/TextSizeMenu/index.jsx
@@ -15,13 +15,14 @@ export default function TextSizeButton() {
         data-tooltip-content="Change text size"
         aria-label="Change text size"
         onClick={() => setShowTextSizeMenu(!showTextSizeMenu)}
-        className={`relative flex justify-center items-center opacity-60 hover:opacity-100 cursor-pointer ${
+        className={`relative flex justify-center items-center opacity-60 hover:opacity-100 light:opacity-100 light:hover:opacity-60 cursor-pointer ${
           showTextSizeMenu ? "!opacity-100" : ""
         }`}
       >
         <TextT
+          color="var(--theme-sidebar-footer-icon-fill)"
           weight="fill"
-          className="w-6 h-6 pointer-events-none text-white"
+          className="w-[22px] h-[22px] pointer-events-none text-white"
         />
         <Tooltip
           id="tooltip-text-size-btn"
@@ -72,7 +73,7 @@ function TextSizeMenu({ showing, setShowing, buttonRef }) {
     <div hidden={!showing}>
       <div
         ref={formRef}
-        className="absolute bottom-16 -ml-8 w-[140px] p-2 bg-zinc-800 rounded-lg shadow-md flex flex-col justify-center items-start gap-2 z-50"
+        className="absolute bottom-16 -ml-8 w-[140px] p-2 bg-theme-action-menu-bg rounded-lg shadow-md flex flex-col justify-center items-start gap-2 z-50"
       >
         <button
           onClick={(e) => {
@@ -81,11 +82,13 @@ function TextSizeMenu({ showing, setShowing, buttonRef }) {
             handleTextSizeChange("small");
           }}
           className={`w-full hover:cursor-pointer px-2 py-1 rounded-md flex flex-col justify-start group ${
-            selectedSize === "small" ? "bg-zinc-700" : "hover:bg-zinc-700"
+            selectedSize === "small"
+              ? "bg-theme-action-menu-item-hover"
+              : "hover:bg-theme-action-menu-item-hover"
           }`}
         >
           <div className="w-full flex-col text-left flex pointer-events-none">
-            <div className="text-white text-xs">Small</div>
+            <div className="text-theme-text-primary text-xs">Small</div>
           </div>
         </button>
 
@@ -96,11 +99,13 @@ function TextSizeMenu({ showing, setShowing, buttonRef }) {
             handleTextSizeChange("normal");
           }}
           className={`w-full hover:cursor-pointer px-2 py-1 rounded-md flex flex-col justify-start group ${
-            selectedSize === "normal" ? "bg-zinc-700" : "hover:bg-zinc-700"
+            selectedSize === "normal"
+              ? "bg-theme-action-menu-item-hover"
+              : "hover:bg-theme-action-menu-item-hover"
           }`}
         >
           <div className="w-full flex-col text-left flex pointer-events-none">
-            <div className="text-white text-sm">Normal</div>
+            <div className="text-theme-text-primary text-sm">Normal</div>
           </div>
         </button>
 
@@ -111,11 +116,13 @@ function TextSizeMenu({ showing, setShowing, buttonRef }) {
             handleTextSizeChange("large");
           }}
           className={`w-full hover:cursor-pointer px-2 py-1 rounded-md flex flex-col justify-start group ${
-            selectedSize === "large" ? "bg-zinc-700" : "hover:bg-zinc-700"
+            selectedSize === "large"
+              ? "bg-theme-action-menu-item-hover"
+              : "hover:bg-theme-action-menu-item-hover"
           }`}
         >
           <div className="w-full flex-col text-left flex pointer-events-none">
-            <div className="text-white text-[16px]">Large</div>
+            <div className="text-theme-text-primary text-[16px]">Large</div>
           </div>
         </button>
       </div>
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
index f115e7948..47ae53f14 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
@@ -250,9 +250,9 @@ export default function PromptInput({
         className="flex flex-col gap-y-1 rounded-t-lg md:w-3/4 w-full mx-auto max-w-xl items-center"
       >
         <div className="flex items-center rounded-lg md:mb-4">
-          <div className="w-[95vw] md:w-[635px] bg-main-gradient shadow-2xl border border-white/50 rounded-2xl flex flex-col px-4 overflow-hidden">
+          <div className="w-[95vw] md:w-[635px] bg-theme-bg-chat-input light:bg-white light:border-[1px] light:border-theme-chat-input-border shadow-sm rounded-2xl flex flex-col px-4 overflow-hidden">
             <AttachmentManager attachments={attachments} />
-            <div className="flex items-center w-full border-b-2 border-gray-500/50">
+            <div className="flex items-center w-full border-b-2 border-theme-chat-input-border">
               <textarea
                 ref={textareaRef}
                 onChange={handleChange}
@@ -269,7 +269,7 @@ export default function PromptInput({
                   adjustTextArea(e);
                 }}
                 value={promptInput}
-                className="cursor-text max-h-[50vh] md:max-h-[350px] md:min-h-[40px] mx-2 md:mx-0 py-2 w-full text-[16px] md:text-md text-white bg-transparent placeholder:text-white/60 resize-none active:outline-none focus:outline-none flex-grow"
+                className="cursor-text max-h-[50vh] md:max-h-[350px] md:min-h-[40px] mx-2 md:mx-0 pt-[12px] w-full text-[14px] leading-5 md:text-md text-white bg-transparent placeholder:text-white/60 light:placeholder:text-theme-text-primary resize-none active:outline-none focus:outline-none flex-grow"
                 placeholder={"Send a message"}
               />
               {buttonDisabled ? (
@@ -279,12 +279,16 @@ export default function PromptInput({
                   <button
                     ref={formRef}
                     type="submit"
-                    className="inline-flex justify-center rounded-2xl cursor-pointer text-white/60 hover:text-white group ml-4"
+                    className="inline-flex justify-center rounded-2xl cursor-pointer opacity-60 hover:opacity-100 light:opacity-100 light:hover:opacity-60 ml-4"
                     data-tooltip-id="send-prompt"
                     data-tooltip-content="Send prompt message to workspace"
                     aria-label="Send prompt message to workspace"
                   >
-                    <PaperPlaneRight className="w-7 h-7 my-3" weight="fill" />
+                    <PaperPlaneRight
+                      color="var(--theme-sidebar-footer-icon-fill)"
+                      className="w-[22px] h-[22px] pointer-events-none text-theme-text-primary"
+                      weight="fill"
+                    />
                     <span className="sr-only">Send message</span>
                   </button>
                   <Tooltip
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx
index 6b2a51fcd..ad109e74e 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx
@@ -264,7 +264,7 @@ export default function ChatContainer({ workspace, knownHistory = [] }) {
   return (
     <div
       style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-      className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline no-scroll"
+      className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll no-scroll"
     >
       {isMobile && <SidebarMobileHeader />}
       <DnDFileUploaderWrapper>
diff --git a/frontend/src/components/WorkspaceChat/LoadingChat/index.jsx b/frontend/src/components/WorkspaceChat/LoadingChat/index.jsx
index 83e7c4e08..6f50322cf 100644
--- a/frontend/src/components/WorkspaceChat/LoadingChat/index.jsx
+++ b/frontend/src/components/WorkspaceChat/LoadingChat/index.jsx
@@ -3,12 +3,12 @@ import * as Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 
 export default function LoadingChat() {
-  const highlightColor = "#3D4147";
-  const baseColor = "#2C2F35";
+  const highlightColor = "var(--theme-bg-primary)";
+  const baseColor = "var(--theme-bg-secondary)";
   return (
     <div
-      style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-      className="p-4 transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll"
+      className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll no-scroll p-4"
+      style={{ height: "calc(100% - 32px)" }}
     >
       <Skeleton.default
         height="100px"
diff --git a/frontend/src/components/WorkspaceChat/index.jsx b/frontend/src/components/WorkspaceChat/index.jsx
index 61dc43df5..bff792573 100644
--- a/frontend/src/components/WorkspaceChat/index.jsx
+++ b/frontend/src/components/WorkspaceChat/index.jsx
@@ -36,7 +36,7 @@ export default function WorkspaceChat({ loading, workspace }) {
       <>
         {loading === false && !workspace && (
           <ModalWrapper isOpen={true}>
-            <div className="relative w-full md:max-w-2xl max-h-full bg-main-gradient rounded-lg shadow p-4">
+            <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
               <div className="flex flex-col gap-y-4 w-full p-6 text-center">
                 <p className="font-semibold text-red-500 text-xl">
                   Workspace not found!
@@ -48,7 +48,7 @@ export default function WorkspaceChat({ loading, workspace }) {
                 <div className="flex w-full justify-center items-center mt-4">
                   <a
                     href={paths.home()}
-                    className="border border-slate-200 text-white hover:bg-slate-200 hover:text-slate-800 px-4 py-2 rounded-lg text-sm items-center flex gap-x-2 transition-all duration-300"
+                    className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm flex items-center gap-x-2"
                   >
                     Go back to homepage
                   </a>
diff --git a/frontend/src/hooks/useTheme.js b/frontend/src/hooks/useTheme.js
new file mode 100644
index 000000000..d56488e3d
--- /dev/null
+++ b/frontend/src/hooks/useTheme.js
@@ -0,0 +1,53 @@
+import { useState, useEffect } from "react";
+
+const availableThemes = {
+  default: "Default",
+  light: "Light",
+};
+
+/**
+ * Determines the current theme of the application
+ * @returns {{theme: ('default' | 'light'), setTheme: function, availableThemes: object}} The current theme, a function to set the theme, and the available themes
+ */
+export function useTheme() {
+  const [theme, _setTheme] = useState(() => {
+    return localStorage.getItem("theme") || "default";
+  });
+
+  useEffect(() => {
+    if (localStorage.getItem("theme") !== null) return;
+    if (!window.matchMedia) return;
+    if (window.matchMedia("(prefers-color-scheme: light)").matches)
+      return _setTheme("light");
+    _setTheme("default");
+  }, []);
+
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", theme);
+    document.body.classList.toggle("light", theme === "light");
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  // In development, attach keybind combinations to toggle theme
+  useEffect(() => {
+    if (!import.meta.env.DEV) return;
+    function toggleOnKeybind(e) {
+      if (e.metaKey && e.key === ".") {
+        e.preventDefault();
+        const newTheme = theme === "light" ? "default" : "light";
+        console.log("toggling theme to ", newTheme);
+        setTheme(newTheme);
+      }
+    }
+    document.addEventListener("keydown", toggleOnKeybind);
+    return () => document.removeEventListener("keydown", toggleOnKeybind);
+  }, []);
+
+  // Refresh on theme change
+  const setTheme = (newTheme) => {
+    _setTheme(newTheme);
+    window.location.reload();
+  };
+
+  return { theme, setTheme, availableThemes };
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 54f956008..25a2de074 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -2,6 +2,127 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  /* Default theme */
+  --theme-loader: #ffffff;
+  --theme-bg-primary: #0e0f0f;
+  --theme-bg-secondary: #1b1b1e;
+  --theme-bg-sidebar: #0e0f0f;
+  --theme-bg-container: #0e0f0f;
+  --theme-bg-chat: #1b1b1e;
+  --theme-bg-chat-input: #27282a;
+  --theme-text-primary: #ffffff;
+  --theme-text-secondary: rgba(255, 255, 255, 0.6);
+  --theme-sidebar-item-default: rgba(255, 255, 255, 0.1);
+  --theme-sidebar-item-selected: rgba(255, 255, 255, 0.3);
+  --theme-sidebar-item-hover: #3f3f42;
+  --theme-sidebar-subitem-default: rgba(255, 255, 255, 0.05);
+  --theme-sidebar-subitem-selected: rgba(255, 255, 255, 0.05);
+  --theme-sidebar-thread-selected: rgba(255, 255, 255, 0.05);
+
+  --theme-sidebar-subitem-hover: rgba(255, 255, 255, 0.05);
+  --theme-sidebar-border: rgba(255, 255, 255, 0.1);
+  --theme-sidebar-item-workspace-active: #ffffff;
+  --theme-sidebar-item-workspace-inactive: #ffffff;
+
+  --theme-sidebar-footer-icon: rgba(255, 255, 255, 0.1);
+  --theme-sidebar-footer-icon-fill: #ffffff;
+  --theme-sidebar-footer-icon-hover: rgba(255, 255, 255, 0.2);
+
+  --theme-chat-input-border: #525355;
+  --theme-action-menu-bg: #27282a;
+  --theme-action-menu-item-hover: rgba(255, 255, 255, 0.1);
+  --theme-settings-input-bg: #0e0f0f;
+  --theme-settings-input-placeholder: rgba(255, 255, 255, 0.5);
+  --theme-settings-input-active: rgb(255 255 255 / 0.2);
+  --theme-settings-input-text: #ffffff;
+  --theme-modal-border: #3f3f42;
+  --theme-button-primary-hover: #434343;
+
+  --theme-file-row-even: #0e0f0f;
+  --theme-file-row-odd: #1b1b1e;
+  --theme-file-row-selected-even: rgba(14, 165, 233, 0.2);
+  --theme-file-row-selected-odd: rgba(14, 165, 233, 0.1);
+  --theme-file-picker-hover: rgb(14 165 233 / 0.2);
+}
+
+[data-theme="light"] {
+  --theme-loader: #000000;
+
+  --theme-bg-primary: #ffffff;
+  --theme-bg-secondary: #ffffff;
+  --theme-bg-sidebar: #edf2fa;
+  --theme-bg-container: #f9fbfd;
+
+  --theme-bg-chat: #ffffff;
+  --theme-bg-chat-input: #eaeaea;
+  --theme-text-primary: #0e0f0f;
+  --theme-text-secondary: #7a7d7e;
+  --theme-sidebar-item-default: #ffffff;
+  --theme-sidebar-item-selected: #ffffff;
+  --theme-sidebar-item-hover: #c8efff;
+
+  --theme-sidebar-item-text-inactive: #7a7d7e;
+  --theme-sidebar-item-text-active: #184558;
+
+  --theme-sidebar-item-workspace-active: #000000;
+  --theme-sidebar-item-workspace-inactive: #7a7d7e;
+
+  --theme-sidebar-subitem-default: transparent;
+  --theme-sidebar-subitem-selected: #e2e7ee;
+  --theme-sidebar-thread-selected: #ffffff;
+  --theme-sidebar-subitem-hover: #e2e7ee;
+  --theme-sidebar-border: #d3d4d4;
+
+  --theme-sidebar-footer-icon: #ffffff;
+  --theme-sidebar-footer-icon-fill: #6e6f6f;
+  --theme-sidebar-footer-icon-hover: #d8d6d6;
+
+  --theme-chat-input-border: #cccccc;
+  --theme-action-menu-bg: #eaeaea;
+  --theme-action-menu-item-hover: rgba(0, 0, 0, 0.1);
+  --theme-settings-input-bg: #f5f5f5;
+  --theme-settings-input-placeholder: rgba(0, 0, 0, 0.5);
+  --theme-settings-input-active: rgb(0 0 0 / 0.2);
+  --theme-settings-input-text: #0e0f0f;
+  --theme-modal-border: #d3d3d3;
+  --theme-button-primary-hover: #dedede;
+
+  --theme-file-row-even: #f5f5f5;
+  --theme-file-row-odd: #e9e9e9;
+  --theme-file-row-selected-even: #0ba5ec;
+  --theme-file-row-selected-odd: #0ba5ec;
+  --theme-file-picker-hover: #e2e7ee;
+}
+
+[data-theme="light"] .text-white {
+  color: var(--theme-text-primary);
+}
+
+[data-theme="light"] .text-description,
+[data-theme="light"] .text-white\/60 {
+  color: var(--theme-text-secondary);
+}
+
+[data-theme="light"] .bg-theme-bg-secondary {
+  border: 1px solid var(--theme-sidebar-border);
+}
+
+[data-theme="light"] .border-white\/10 {
+  border-color: var(--theme-sidebar-border);
+}
+
+/*
+This is to override the default border color for the select and input elements
+in the onboarding flow when the theme is not light. This only applies to the
+onboarding flow since its background is dark and is the same fill as the inputs.
+*/
+[data-layout="onboarding"] > * select:not([data-theme="light"]),
+[data-layout="onboarding"] > * input:not([data-theme="light"]),
+[data-layout="onboarding"] > * textarea:not([data-theme="light"]) {
+  border: 1px solid #ffffff;
+}
+
 html,
 body {
   padding: 0;
@@ -434,10 +555,6 @@ dialog::backdrop {
   }
 }
 
-.rti--container {
-  @apply !bg-zinc-900 !text-white !placeholder-white !placeholder-opacity-60 !text-sm !rounded-lg !p-2.5;
-}
-
 .tooltip {
   @apply !bg-black !text-white !py-2 !px-3 !rounded-md;
 }
@@ -654,19 +771,21 @@ dialog::backdrop {
 }
 
 .file-row:nth-child(even) {
-  @apply bg-dark-highlight;
+  @apply bg-theme-bg-primary;
+  background-color: var(--theme-file-row-even);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .file-row:nth-child(odd) {
-  @apply bg-[#2C2C2C];
-}
-
-.file-row.selected:nth-child(even) {
-  @apply bg-sky-500/20;
+  @apply bg-theme-bg-secondary;
+  background-color: var(--theme-file-row-odd);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
 
+.file-row.selected:nth-child(even),
 .file-row.selected:nth-child(odd) {
-  @apply bg-sky-500/10;
+  background-color: var(--theme-file-row-selected-even);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 /* Flex upload modal to be a column when on small screens so that the UI
@@ -813,3 +932,7 @@ does not extend the close button beyond the viewport. */
 .katex-mathml {
   font-size: 20px;
 }
+
+.rti--container {
+  @apply !bg-theme-settings-input-bg !text-white !placeholder-white !placeholder-opacity-60 !text-sm !rounded-lg !p-2.5;
+}
diff --git a/frontend/src/media/illustrations/login-logo-light.svg b/frontend/src/media/illustrations/login-logo-light.svg
new file mode 100644
index 000000000..bfc83d361
--- /dev/null
+++ b/frontend/src/media/illustrations/login-logo-light.svg
@@ -0,0 +1,45 @@
+<svg width="93" height="93" viewBox="0 0 93 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_4703_10188)">
+<rect x="4" width="84.1875" height="84.1875" rx="20" fill="#FFFFFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.8269 50.4097C50.2964 51.095 50.2834 52.0566 50.8168 52.751L55.2535 58.9155L55.2683 58.9342C56.2457 60.1644 57.7195 60.8701 59.2898 60.8701H69.203C72.0138 60.8701 74.311 58.6109 74.311 55.809V29.7848C74.311 26.9868 72.0143 24.7236 69.203 24.7236H59.2898C57.7153 24.7236 56.2443 25.4303 55.267 26.6646L46.2579 38.0502L32.6371 55.261H23.5258V30.3362H32.6197L37.5779 37.0354L37.5877 37.0477C38.3605 38.026 39.8433 38.0201 40.6159 37.0513L41.7614 35.6032L41.7678 35.5949C42.2993 34.9084 42.3124 33.9423 41.7689 33.2463L36.9296 26.6779L36.9188 26.6643C35.9418 25.4304 34.4747 24.7236 32.8962 24.7236H22.983C20.1832 24.7236 17.875 26.9891 17.875 29.7848V55.8124C17.875 58.6075 20.1792 60.8735 22.983 60.8735H32.8962C34.4744 60.8735 35.9409 60.1671 36.9177 58.9376L59.5517 30.3328H68.6602V55.2575H59.5646L55.0229 48.969L55.0083 48.9507C54.2373 47.982 52.7561 47.982 51.9852 48.9507L50.8344 50.4001L50.8269 50.4097ZM33.2564 56.0898L40.1181 47.4196L47.0421 38.6707L56.0512 27.2851L33.2564 56.0898Z" fill="url(#paint0_linear_4703_10188)"/>
+<g filter="url(#filter1_bi_4703_10188)">
+<mask id="path-3-outside-1_4703_10188" maskUnits="userSpaceOnUse" x="14.875" y="21.7236" width="63" height="43" fill="black">
+<rect fill="white" x="14.875" y="21.7236" width="63" height="43"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.8269 50.4097C50.2964 51.095 50.2834 52.0566 50.8168 52.751L55.2535 58.9155L55.2683 58.9342C56.2457 60.1644 57.7195 60.8701 59.2898 60.8701H69.203C72.0138 60.8701 74.311 58.6109 74.311 55.809V29.7848C74.311 26.9868 72.0143 24.7236 69.203 24.7236H59.2898C57.7153 24.7236 56.2443 25.4303 55.267 26.6646L46.2579 38.0502L32.6371 55.261H23.5258V30.3362H32.6197L37.5779 37.0354L37.5877 37.0477C38.3605 38.026 39.8433 38.0201 40.6159 37.0513L41.7614 35.6032L41.7678 35.5949C42.2993 34.9084 42.3124 33.9423 41.7689 33.2463L36.9296 26.6779L36.9188 26.6643C35.9418 25.4304 34.4747 24.7236 32.8962 24.7236H22.983C20.1832 24.7236 17.875 26.9891 17.875 29.7848V55.8124C17.875 58.6075 20.1792 60.8735 22.983 60.8735H32.8962C34.4744 60.8735 35.9409 60.1671 36.9177 58.9376L59.5517 30.3328H68.6602V55.2575H59.5646L55.0229 48.969L55.0083 48.9507C54.2373 47.982 52.7561 47.982 51.9852 48.9507L50.8344 50.4001L50.8269 50.4097ZM33.2564 56.0898L40.1181 47.4196L47.0421 38.6707L56.0512 27.2851L33.2564 56.0898Z"/>
+</mask>
+<path d="M50.8168 52.751L53.2517 50.9985L53.2244 50.9605L53.1959 50.9234L50.8168 52.751ZM50.8269 50.4097L53.1992 52.2462L53.1995 52.2458L50.8269 50.4097ZM55.2535 58.9155L52.8186 60.668L52.8603 60.7261L52.9048 60.782L55.2535 58.9155ZM55.2683 58.9342L57.6172 57.0679L57.6169 57.0677L55.2683 58.9342ZM55.267 26.6646L52.915 24.8023L52.9145 24.803L55.267 26.6646ZM46.2579 38.0502L48.6103 39.9119L48.6105 39.9117L46.2579 38.0502ZM32.6371 55.261V58.261H34.0886L34.9895 57.1227L32.6371 55.261ZM23.5258 55.261H20.5258V58.261H23.5258V55.261ZM23.5258 30.3362V27.3362H20.5258V30.3362H23.5258ZM32.6197 30.3362L35.0311 28.5515L34.1317 27.3362H32.6197V30.3362ZM37.5779 37.0354L35.1665 38.8201L35.1946 38.858L35.2239 38.895L37.5779 37.0354ZM37.5877 37.0477L35.2336 38.9074L35.2337 38.9074L37.5877 37.0477ZM40.6159 37.0513L42.9615 38.9217L42.9687 38.9125L40.6159 37.0513ZM41.7614 35.6032L44.1142 37.4644L44.1239 37.4522L44.1335 37.4398L41.7614 35.6032ZM41.7678 35.5949L44.1399 37.4316L44.1401 37.4313L41.7678 35.5949ZM41.7689 33.2463L39.3536 35.0258L39.3786 35.0596L39.4044 35.0927L41.7689 33.2463ZM36.9296 26.6779L39.3448 24.8985L39.3139 24.8564L39.2814 24.8155L36.9296 26.6779ZM36.9188 26.6643L34.5668 28.5266L34.5669 28.5268L36.9188 26.6643ZM36.9177 58.9376L39.2666 60.8038L39.2703 60.7991L36.9177 58.9376ZM59.5517 30.3328V27.3328H58.0999L57.1991 28.4713L59.5517 30.3328ZM68.6602 30.3328H71.6602V27.3328H68.6602V30.3328ZM68.6602 55.2575V58.2575H71.6602V55.2575H68.6602ZM59.5646 55.2575L57.1325 57.014L58.0306 58.2575H59.5646V55.2575ZM55.0229 48.969L57.4549 47.2125L57.4138 47.1557L57.3701 47.1008L55.0229 48.969ZM55.0083 48.9507L52.6609 50.8189L52.661 50.819L55.0083 48.9507ZM51.9852 48.9507L49.6378 47.0826L49.6357 47.0853L51.9852 48.9507ZM50.8344 50.4001L48.4849 48.5346L48.4733 48.5492L48.4619 48.564L50.8344 50.4001ZM33.2564 56.0898L30.9039 54.2281L35.6088 57.9515L33.2564 56.0898ZM40.1181 47.4196L37.7656 45.5579L37.7656 45.5579L40.1181 47.4196ZM47.0421 38.6707L49.3945 40.5324L49.3947 40.5322L47.0421 38.6707ZM56.0512 27.2851L58.4038 29.1466L53.6988 25.4234L56.0512 27.2851ZM53.1959 50.9234C53.5087 51.3307 53.4871 51.8742 53.1992 52.2462L48.4547 48.5733C47.1057 50.3159 47.0581 52.7825 48.4377 54.5785L53.1959 50.9234ZM57.6884 57.1631L53.2517 50.9985L48.3818 54.5034L52.8186 60.668L57.6884 57.1631ZM57.6169 57.0677L57.6021 57.049L52.9048 60.782L52.9196 60.8007L57.6169 57.0677ZM59.2898 57.8701C58.6273 57.8701 58.021 57.5763 57.6172 57.0679L52.9194 60.8004C54.4704 62.7524 56.8117 63.8701 59.2898 63.8701V57.8701ZM69.203 57.8701H59.2898V63.8701H69.203V57.8701ZM71.311 55.809C71.311 56.9216 70.3896 57.8701 69.203 57.8701V63.8701C73.6379 63.8701 77.311 60.3003 77.311 55.809H71.311ZM71.311 29.7848V55.809H77.311V29.7848H71.311ZM69.203 27.7236C70.3884 27.7236 71.311 28.6744 71.311 29.7848H77.311C77.311 25.2991 73.6402 21.7236 69.203 21.7236V27.7236ZM59.2898 27.7236H69.203V21.7236H59.2898V27.7236ZM57.619 28.5269C58.0233 28.0163 58.6254 27.7236 59.2898 27.7236V21.7236C56.8051 21.7236 54.4654 22.8443 52.915 24.8023L57.619 28.5269ZM48.6105 39.9117L57.6196 28.5261L52.9145 24.803L43.9053 36.1886L48.6105 39.9117ZM34.9895 57.1227L48.6103 39.9119L43.9054 36.1884L30.2846 53.3992L34.9895 57.1227ZM23.5258 58.261H32.6371V52.261H23.5258V58.261ZM20.5258 30.3362V55.261H26.5258V30.3362H20.5258ZM32.6197 27.3362H23.5258V33.3362H32.6197V27.3362ZM39.9893 35.2506L35.0311 28.5515L30.2083 32.1209L35.1665 38.8201L39.9893 35.2506ZM39.9417 35.188L39.932 35.1757L35.2239 38.895L35.2336 38.9074L39.9417 35.188ZM38.2704 35.1809C38.6911 34.6532 39.5058 34.6362 39.9417 35.188L35.2337 38.9074C37.2153 41.4157 40.9956 41.387 42.9615 38.9217L38.2704 35.1809ZM39.4086 33.742L38.2631 35.19L42.9687 38.9125L44.1142 37.4644L39.4086 33.742ZM39.3958 33.7583L39.3893 33.7665L44.1335 37.4398L44.1399 37.4316L39.3958 33.7583ZM39.4044 35.0927C39.0836 34.6819 39.107 34.1313 39.3956 33.7585L44.1401 37.4313C45.4916 35.6855 45.5411 33.2027 44.1334 31.4L39.4044 35.0927ZM34.5143 28.4574L39.3536 35.0258L44.1842 31.4668L39.3448 24.8985L34.5143 28.4574ZM34.5669 28.5268L34.5777 28.5404L39.2814 24.8155L39.2707 24.8019L34.5669 28.5268ZM32.8962 27.7236C33.5633 27.7236 34.1621 28.0155 34.5668 28.5266L39.2708 24.802C37.7215 22.8453 35.386 21.7236 32.8962 21.7236V27.7236ZM22.983 27.7236H32.8962V21.7236H22.983V27.7236ZM20.875 29.7848C20.875 28.6802 21.8056 27.7236 22.983 27.7236V21.7236C18.5608 21.7236 14.875 25.298 14.875 29.7848H20.875ZM20.875 55.8124V29.7848H14.875V55.8124H20.875ZM22.983 57.8735C21.8033 57.8735 20.875 56.9181 20.875 55.8124H14.875C14.875 60.2969 18.555 63.8735 22.983 63.8735V57.8735ZM32.8962 57.8735H22.983V63.8735H32.8962V57.8735ZM34.5689 57.0713C34.1638 57.5811 33.5638 57.8735 32.8962 57.8735V63.8735C35.3849 63.8735 37.7179 62.753 39.2666 60.8038L34.5689 57.0713ZM57.1991 28.4713L34.5651 57.0761L39.2703 60.7991L61.9043 32.1943L57.1991 28.4713ZM68.6602 27.3328H59.5517V33.3328H68.6602V27.3328ZM71.6602 55.2575V30.3328H65.6602V55.2575H71.6602ZM59.5646 58.2575H68.6602V52.2575H59.5646V58.2575ZM52.5908 50.7255L57.1325 57.014L61.9966 53.5011L57.4549 47.2125L52.5908 50.7255ZM52.661 50.819L52.6756 50.8372L57.3701 47.1008L57.3556 47.0825L52.661 50.819ZM54.3325 50.8189C53.9024 51.3593 53.091 51.3593 52.6609 50.8189L57.3557 47.0826C55.3836 44.6047 51.6098 44.6047 49.6378 47.0826L54.3325 50.8189ZM53.1839 52.2655L54.3346 50.8162L49.6357 47.0853L48.4849 48.5346L53.1839 52.2655ZM53.1995 52.2458L53.207 52.2361L48.4619 48.564L48.4544 48.5737L53.1995 52.2458ZM35.6088 57.9515L42.4705 49.2813L37.7656 45.5579L30.904 54.228L35.6088 57.9515ZM42.4705 49.2813L49.3945 40.5324L44.6896 36.8089L37.7656 45.5579L42.4705 49.2813ZM49.3947 40.5322L58.4038 29.1466L53.6987 25.4235L44.6895 36.8091L49.3947 40.5322ZM53.6988 25.4234L30.9039 54.2281L35.6089 57.9514L58.4037 29.1467L53.6988 25.4234Z" fill="url(#paint1_linear_4703_10188)" fill-opacity="0.1" mask="url(#path-3-outside-1_4703_10188)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_4703_10188" x="0" y="0" width="92.1875" height="92.1875" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4703_10188"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4703_10188" result="shape"/>
+</filter>
+<filter id="filter1_bi_4703_10188" x="12.2255" y="19.0741" width="67.7365" height="47.4489" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="1.32475"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_4703_10188"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_4703_10188" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.441584"/>
+<feGaussianBlur stdDeviation="0.662376"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_4703_10188"/>
+</filter>
+<linearGradient id="paint0_linear_4703_10188" x1="18.875" y1="25.7236" x2="77.525" y2="49.4624" gradientUnits="userSpaceOnUse">
+<stop stop-color="#75A5FF"/>
+<stop offset="0.703125" stop-color="#23E5FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4703_10188" x1="19.6386" y1="26.3668" x2="74.311" y2="26.3668" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3CDEB6"/>
+<stop offset="0.65625" stop-color="#364AFF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/frontend/src/media/illustrations/login-logo.svg b/frontend/src/media/illustrations/login-logo.svg
index 729f847c0..79b3f9ae6 100644
--- a/frontend/src/media/illustrations/login-logo.svg
+++ b/frontend/src/media/illustrations/login-logo.svg
@@ -1,35 +1,43 @@
-<svg width="86" height="85" viewBox="0 0 86 85" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.90625" y="0.40625" width="84.1875" height="84.1875" rx="20" fill="url(#paint0_linear_188_1378)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M47.7351 50.8157C47.2046 51.501 47.1916 52.4626 47.725 53.157L52.1617 59.3215L52.1765 59.3402C53.1539 60.5704 54.6277 61.2761 56.198 61.2761H66.1112C68.922 61.2761 71.2192 59.0169 71.2192 56.215V30.1908C71.2192 27.3928 68.9225 25.1296 66.1112 25.1296H56.198C54.6235 25.1296 53.1525 25.8363 52.1753 27.0706L43.1661 38.4562L29.5453 55.667H20.434V30.7422H29.5279L34.4861 37.4414L34.4959 37.4537C35.2687 38.432 36.7515 38.4261 37.5241 37.4573L38.6696 36.0092L38.676 36.0009C39.2075 35.3144 39.2206 34.3483 38.6771 33.6523L33.8378 27.0839L33.827 27.0703C32.85 25.8364 31.3829 25.1296 29.8044 25.1296H19.8912C17.0914 25.1296 14.7832 27.3951 14.7832 30.1908V56.2184C14.7832 59.0135 17.0874 61.2795 19.8912 61.2795H29.8044C31.3826 61.2795 32.8491 60.5731 33.8259 59.3436L56.4599 30.7388H65.5684V55.6635H56.4728L51.9311 49.375L51.9165 49.3567C51.1455 48.388 49.6643 48.388 48.8934 49.3567L47.7426 50.8061L47.7351 50.8157ZM30.1646 56.4958L37.0263 47.8256L43.9503 39.0767L52.9594 27.6911L30.1646 56.4958Z" fill="url(#paint1_linear_188_1378)"/>
-<g filter="url(#filter0_bi_188_1378)">
-<mask id="path-3-outside-1_188_1378" maskUnits="userSpaceOnUse" x="11.7832" y="22.1296" width="63" height="43" fill="black">
-<rect fill="white" x="11.7832" y="22.1296" width="63" height="43"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M47.7351 50.8157C47.2046 51.501 47.1916 52.4626 47.725 53.157L52.1617 59.3215L52.1765 59.3402C53.1539 60.5704 54.6277 61.2761 56.198 61.2761H66.1112C68.922 61.2761 71.2192 59.0169 71.2192 56.215V30.1908C71.2192 27.3928 68.9225 25.1296 66.1112 25.1296H56.198C54.6235 25.1296 53.1525 25.8363 52.1753 27.0706L43.1661 38.4562L29.5453 55.667H20.434V30.7422H29.5279L34.4861 37.4414L34.4959 37.4537C35.2687 38.432 36.7515 38.4261 37.5241 37.4573L38.6696 36.0092L38.676 36.0009C39.2075 35.3144 39.2206 34.3483 38.6771 33.6523L33.8378 27.0839L33.827 27.0703C32.85 25.8364 31.3829 25.1296 29.8044 25.1296H19.8912C17.0914 25.1296 14.7832 27.3951 14.7832 30.1908V56.2184C14.7832 59.0135 17.0874 61.2795 19.8912 61.2795H29.8044C31.3826 61.2795 32.8491 60.5731 33.8259 59.3436L56.4599 30.7388H65.5684V55.6635H56.4728L51.9311 49.375L51.9165 49.3567C51.1455 48.388 49.6643 48.388 48.8934 49.3567L47.7426 50.8061L47.7351 50.8157ZM30.1646 56.4958L37.0263 47.8256L43.9503 39.0767L52.9594 27.6911L30.1646 56.4958Z"/>
+<svg width="93" height="93" viewBox="0 0 93 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_4703_10188)">
+<rect x="4" width="84.1875" height="84.1875" rx="20" fill="#1B1B1E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.8269 50.4097C50.2964 51.095 50.2834 52.0566 50.8168 52.751L55.2535 58.9155L55.2683 58.9342C56.2457 60.1644 57.7195 60.8701 59.2898 60.8701H69.203C72.0138 60.8701 74.311 58.6109 74.311 55.809V29.7848C74.311 26.9868 72.0143 24.7236 69.203 24.7236H59.2898C57.7153 24.7236 56.2443 25.4303 55.267 26.6646L46.2579 38.0502L32.6371 55.261H23.5258V30.3362H32.6197L37.5779 37.0354L37.5877 37.0477C38.3605 38.026 39.8433 38.0201 40.6159 37.0513L41.7614 35.6032L41.7678 35.5949C42.2993 34.9084 42.3124 33.9423 41.7689 33.2463L36.9296 26.6779L36.9188 26.6643C35.9418 25.4304 34.4747 24.7236 32.8962 24.7236H22.983C20.1832 24.7236 17.875 26.9891 17.875 29.7848V55.8124C17.875 58.6075 20.1792 60.8735 22.983 60.8735H32.8962C34.4744 60.8735 35.9409 60.1671 36.9177 58.9376L59.5517 30.3328H68.6602V55.2575H59.5646L55.0229 48.969L55.0083 48.9507C54.2373 47.982 52.7561 47.982 51.9852 48.9507L50.8344 50.4001L50.8269 50.4097ZM33.2564 56.0898L40.1181 47.4196L47.0421 38.6707L56.0512 27.2851L33.2564 56.0898Z" fill="url(#paint0_linear_4703_10188)"/>
+<g filter="url(#filter1_bi_4703_10188)">
+<mask id="path-3-outside-1_4703_10188" maskUnits="userSpaceOnUse" x="14.875" y="21.7236" width="63" height="43" fill="black">
+<rect fill="white" x="14.875" y="21.7236" width="63" height="43"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.8269 50.4097C50.2964 51.095 50.2834 52.0566 50.8168 52.751L55.2535 58.9155L55.2683 58.9342C56.2457 60.1644 57.7195 60.8701 59.2898 60.8701H69.203C72.0138 60.8701 74.311 58.6109 74.311 55.809V29.7848C74.311 26.9868 72.0143 24.7236 69.203 24.7236H59.2898C57.7153 24.7236 56.2443 25.4303 55.267 26.6646L46.2579 38.0502L32.6371 55.261H23.5258V30.3362H32.6197L37.5779 37.0354L37.5877 37.0477C38.3605 38.026 39.8433 38.0201 40.6159 37.0513L41.7614 35.6032L41.7678 35.5949C42.2993 34.9084 42.3124 33.9423 41.7689 33.2463L36.9296 26.6779L36.9188 26.6643C35.9418 25.4304 34.4747 24.7236 32.8962 24.7236H22.983C20.1832 24.7236 17.875 26.9891 17.875 29.7848V55.8124C17.875 58.6075 20.1792 60.8735 22.983 60.8735H32.8962C34.4744 60.8735 35.9409 60.1671 36.9177 58.9376L59.5517 30.3328H68.6602V55.2575H59.5646L55.0229 48.969L55.0083 48.9507C54.2373 47.982 52.7561 47.982 51.9852 48.9507L50.8344 50.4001L50.8269 50.4097ZM33.2564 56.0898L40.1181 47.4196L47.0421 38.6707L56.0512 27.2851L33.2564 56.0898Z"/>
 </mask>
-<path d="M47.725 53.157L50.1599 51.4045L50.1326 51.3665L50.1041 51.3294L47.725 53.157ZM47.7351 50.8157L50.1074 52.6522L50.1077 52.6518L47.7351 50.8157ZM52.1617 59.3215L49.7268 61.074L49.7685 61.1321L49.813 61.1881L52.1617 59.3215ZM52.1765 59.3402L54.5254 57.4739L54.5251 57.4737L52.1765 59.3402ZM52.1753 27.0706L49.8233 25.2083L49.8227 25.209L52.1753 27.0706ZM43.1661 38.4562L45.5185 40.3179L45.5187 40.3177L43.1661 38.4562ZM29.5453 55.667V58.667H30.9969L31.8977 57.5287L29.5453 55.667ZM20.434 55.667H17.434V58.667H20.434V55.667ZM20.434 30.7422V27.7422H17.434V30.7422H20.434ZM29.5279 30.7422L31.9393 28.9575L31.0399 27.7422H29.5279V30.7422ZM34.4861 37.4414L32.0747 39.2261L32.1028 39.264L32.1321 39.301L34.4861 37.4414ZM34.4959 37.4537L32.1418 39.3134L32.1419 39.3135L34.4959 37.4537ZM37.5241 37.4573L39.8697 39.3277L39.8769 39.3185L37.5241 37.4573ZM38.6696 36.0092L41.0225 37.8704L41.0321 37.8582L41.0417 37.8458L38.6696 36.0092ZM38.676 36.0009L41.0481 37.8376L41.0483 37.8373L38.676 36.0009ZM38.6771 33.6523L36.2619 35.4318L36.2868 35.4656L36.3126 35.4987L38.6771 33.6523ZM33.8378 27.0839L36.253 25.3045L36.2221 25.2624L36.1896 25.2215L33.8378 27.0839ZM33.827 27.0703L31.475 28.9326L31.4751 28.9328L33.827 27.0703ZM33.8259 59.3436L36.1748 61.2098L36.1785 61.2051L33.8259 59.3436ZM56.4599 30.7388V27.7388H55.0081L54.1073 28.8773L56.4599 30.7388ZM65.5684 30.7388H68.5684V27.7388H65.5684V30.7388ZM65.5684 55.6635V58.6636H68.5684V55.6635H65.5684ZM56.4728 55.6635L54.0407 57.42L54.9388 58.6636H56.4728V55.6635ZM51.9311 49.375L54.3631 47.6185L54.322 47.5617L54.2783 47.5068L51.9311 49.375ZM51.9165 49.3567L49.5692 51.2249L49.5692 51.225L51.9165 49.3567ZM48.8934 49.3567L46.546 47.4886L46.5439 47.4913L48.8934 49.3567ZM47.7426 50.8061L45.3931 48.9406L45.3815 48.9552L45.3701 48.97L47.7426 50.8061ZM30.1646 56.4958L27.8121 54.6341L32.5171 58.3575L30.1646 56.4958ZM37.0263 47.8256L34.6738 45.9639L34.6738 45.9639L37.0263 47.8256ZM43.9503 39.0767L46.3027 40.9384L46.3029 40.9382L43.9503 39.0767ZM52.9594 27.6911L55.312 29.5526L50.607 25.8294L52.9594 27.6911ZM50.1041 51.3294C50.4169 51.7367 50.3953 52.2802 50.1074 52.6522L45.3629 48.9793C44.0139 50.7219 43.9663 53.1886 45.3459 54.9845L50.1041 51.3294ZM54.5966 57.5691L50.1599 51.4045L45.29 54.9094L49.7268 61.074L54.5966 57.5691ZM54.5251 57.4737L54.5103 57.455L49.813 61.1881L49.8278 61.2067L54.5251 57.4737ZM56.198 58.2761C55.5355 58.2761 54.9292 57.9823 54.5254 57.4739L49.8276 61.2064C51.3786 63.1584 53.7199 64.2761 56.198 64.2761V58.2761ZM66.1112 58.2761H56.198V64.2761H66.1112V58.2761ZM68.2192 56.215C68.2192 57.3276 67.2978 58.2761 66.1112 58.2761V64.2761C70.5461 64.2761 74.2192 60.7063 74.2192 56.215H68.2192ZM68.2192 30.1908V56.215H74.2192V30.1908H68.2192ZM66.1112 28.1296C67.2966 28.1296 68.2192 29.0804 68.2192 30.1908H74.2192C74.2192 25.7051 70.5484 22.1296 66.1112 22.1296V28.1296ZM56.198 28.1296H66.1112V22.1296H56.198V28.1296ZM54.5272 28.9329C54.9315 28.4223 55.5337 28.1296 56.198 28.1296V22.1296C53.7133 22.1296 51.3736 23.2503 49.8233 25.2083L54.5272 28.9329ZM45.5187 40.3177L54.5278 28.9321L49.8227 25.209L40.8135 36.5946L45.5187 40.3177ZM31.8977 57.5287L45.5185 40.3179L40.8137 36.5944L27.1928 53.8052L31.8977 57.5287ZM20.434 58.667H29.5453V52.667H20.434V58.667ZM17.434 30.7422V55.667H23.434V30.7422H17.434ZM29.5279 27.7422H20.434V33.7422H29.5279V27.7422ZM36.8975 35.6566L31.9393 28.9575L27.1165 32.5269L32.0747 39.2261L36.8975 35.6566ZM36.8499 35.594L36.8402 35.5817L32.1321 39.301L32.1418 39.3134L36.8499 35.594ZM35.1786 35.5869C35.5993 35.0592 36.414 35.0422 36.8499 35.594L32.1419 39.3135C34.1235 41.8217 37.9038 41.793 39.8697 39.3277L35.1786 35.5869ZM36.3168 34.148L35.1713 35.596L39.8769 39.3185L41.0225 37.8704L36.3168 34.148ZM36.304 34.1643L36.2976 34.1725L41.0417 37.8458L41.0481 37.8376L36.304 34.1643ZM36.3126 35.4987C35.9918 35.0879 36.0152 34.5373 36.3038 34.1645L41.0483 37.8373C42.3998 36.0915 42.4493 33.6087 41.0416 31.806L36.3126 35.4987ZM31.4225 28.8634L36.2619 35.4318L41.0924 31.8728L36.253 25.3045L31.4225 28.8634ZM31.4751 28.9328L31.4859 28.9464L36.1896 25.2215L36.1789 25.2079L31.4751 28.9328ZM29.8044 28.1296C30.4715 28.1296 31.0703 28.4215 31.475 28.9326L36.179 25.208C34.6297 23.2513 32.2942 22.1296 29.8044 22.1296V28.1296ZM19.8912 28.1296H29.8044V22.1296H19.8912V28.1296ZM17.7832 30.1908C17.7832 29.0862 18.7138 28.1296 19.8912 28.1296V22.1296C15.469 22.1296 11.7832 25.704 11.7832 30.1908H17.7832ZM17.7832 56.2184V30.1908H11.7832V56.2184H17.7832ZM19.8912 58.2795C18.7115 58.2795 17.7832 57.3241 17.7832 56.2184H11.7832C11.7832 60.7029 15.4632 64.2795 19.8912 64.2795V58.2795ZM29.8044 58.2795H19.8912V64.2795H29.8044V58.2795ZM31.4771 57.4774C31.072 57.9872 30.472 58.2795 29.8044 58.2795V64.2795C32.2931 64.2795 34.6261 63.159 36.1748 61.2098L31.4771 57.4774ZM54.1073 28.8773L31.4733 57.4821L36.1785 61.2051L58.8125 32.6003L54.1073 28.8773ZM65.5684 27.7388H56.4599V33.7388H65.5684V27.7388ZM68.5684 55.6635V30.7388H62.5684V55.6635H68.5684ZM56.4728 58.6636H65.5684V52.6635H56.4728V58.6636ZM49.499 51.1315L54.0407 57.42L58.9048 53.9071L54.3631 47.6185L49.499 51.1315ZM49.5692 51.225L49.5838 51.2432L54.2783 47.5068L54.2638 47.4885L49.5692 51.225ZM51.2407 51.2249C50.8106 51.7653 49.9992 51.7653 49.5692 51.2249L54.2639 47.4886C52.2918 45.0107 48.518 45.0107 46.546 47.4886L51.2407 51.2249ZM50.0921 52.6715L51.2429 51.2222L46.5439 47.4913L45.3931 48.9406L50.0921 52.6715ZM50.1077 52.6518L50.1152 52.6421L45.3701 48.97L45.3626 48.9797L50.1077 52.6518ZM32.5171 58.3575L39.3787 49.6873L34.6738 45.9639L27.8122 54.634L32.5171 58.3575ZM39.3787 49.6873L46.3027 40.9384L41.5978 37.2149L34.6738 45.9639L39.3787 49.6873ZM46.3029 40.9382L55.312 29.5526L50.6069 25.8295L41.5977 37.2151L46.3029 40.9382ZM50.607 25.8294L27.8121 54.6341L32.5171 58.3574L55.3119 29.5528L50.607 25.8294Z" fill="url(#paint2_linear_188_1378)" fill-opacity="0.1" mask="url(#path-3-outside-1_188_1378)"/>
+<path d="M50.8168 52.751L53.2517 50.9985L53.2244 50.9605L53.1959 50.9234L50.8168 52.751ZM50.8269 50.4097L53.1992 52.2462L53.1995 52.2458L50.8269 50.4097ZM55.2535 58.9155L52.8186 60.668L52.8603 60.7261L52.9048 60.782L55.2535 58.9155ZM55.2683 58.9342L57.6172 57.0679L57.6169 57.0677L55.2683 58.9342ZM55.267 26.6646L52.915 24.8023L52.9145 24.803L55.267 26.6646ZM46.2579 38.0502L48.6103 39.9119L48.6105 39.9117L46.2579 38.0502ZM32.6371 55.261V58.261H34.0886L34.9895 57.1227L32.6371 55.261ZM23.5258 55.261H20.5258V58.261H23.5258V55.261ZM23.5258 30.3362V27.3362H20.5258V30.3362H23.5258ZM32.6197 30.3362L35.0311 28.5515L34.1317 27.3362H32.6197V30.3362ZM37.5779 37.0354L35.1665 38.8201L35.1946 38.858L35.2239 38.895L37.5779 37.0354ZM37.5877 37.0477L35.2336 38.9074L35.2337 38.9074L37.5877 37.0477ZM40.6159 37.0513L42.9615 38.9217L42.9687 38.9125L40.6159 37.0513ZM41.7614 35.6032L44.1142 37.4644L44.1239 37.4522L44.1335 37.4398L41.7614 35.6032ZM41.7678 35.5949L44.1399 37.4316L44.1401 37.4313L41.7678 35.5949ZM41.7689 33.2463L39.3536 35.0258L39.3786 35.0596L39.4044 35.0927L41.7689 33.2463ZM36.9296 26.6779L39.3448 24.8985L39.3139 24.8564L39.2814 24.8155L36.9296 26.6779ZM36.9188 26.6643L34.5668 28.5266L34.5669 28.5268L36.9188 26.6643ZM36.9177 58.9376L39.2666 60.8038L39.2703 60.7991L36.9177 58.9376ZM59.5517 30.3328V27.3328H58.0999L57.1991 28.4713L59.5517 30.3328ZM68.6602 30.3328H71.6602V27.3328H68.6602V30.3328ZM68.6602 55.2575V58.2575H71.6602V55.2575H68.6602ZM59.5646 55.2575L57.1325 57.014L58.0306 58.2575H59.5646V55.2575ZM55.0229 48.969L57.4549 47.2125L57.4138 47.1557L57.3701 47.1008L55.0229 48.969ZM55.0083 48.9507L52.6609 50.8189L52.661 50.819L55.0083 48.9507ZM51.9852 48.9507L49.6378 47.0826L49.6357 47.0853L51.9852 48.9507ZM50.8344 50.4001L48.4849 48.5346L48.4733 48.5492L48.4619 48.564L50.8344 50.4001ZM33.2564 56.0898L30.9039 54.2281L35.6088 57.9515L33.2564 56.0898ZM40.1181 47.4196L37.7656 45.5579L37.7656 45.5579L40.1181 47.4196ZM47.0421 38.6707L49.3945 40.5324L49.3947 40.5322L47.0421 38.6707ZM56.0512 27.2851L58.4038 29.1466L53.6988 25.4234L56.0512 27.2851ZM53.1959 50.9234C53.5087 51.3307 53.4871 51.8742 53.1992 52.2462L48.4547 48.5733C47.1057 50.3159 47.0581 52.7825 48.4377 54.5785L53.1959 50.9234ZM57.6884 57.1631L53.2517 50.9985L48.3818 54.5034L52.8186 60.668L57.6884 57.1631ZM57.6169 57.0677L57.6021 57.049L52.9048 60.782L52.9196 60.8007L57.6169 57.0677ZM59.2898 57.8701C58.6273 57.8701 58.021 57.5763 57.6172 57.0679L52.9194 60.8004C54.4704 62.7524 56.8117 63.8701 59.2898 63.8701V57.8701ZM69.203 57.8701H59.2898V63.8701H69.203V57.8701ZM71.311 55.809C71.311 56.9216 70.3896 57.8701 69.203 57.8701V63.8701C73.6379 63.8701 77.311 60.3003 77.311 55.809H71.311ZM71.311 29.7848V55.809H77.311V29.7848H71.311ZM69.203 27.7236C70.3884 27.7236 71.311 28.6744 71.311 29.7848H77.311C77.311 25.2991 73.6402 21.7236 69.203 21.7236V27.7236ZM59.2898 27.7236H69.203V21.7236H59.2898V27.7236ZM57.619 28.5269C58.0233 28.0163 58.6254 27.7236 59.2898 27.7236V21.7236C56.8051 21.7236 54.4654 22.8443 52.915 24.8023L57.619 28.5269ZM48.6105 39.9117L57.6196 28.5261L52.9145 24.803L43.9053 36.1886L48.6105 39.9117ZM34.9895 57.1227L48.6103 39.9119L43.9054 36.1884L30.2846 53.3992L34.9895 57.1227ZM23.5258 58.261H32.6371V52.261H23.5258V58.261ZM20.5258 30.3362V55.261H26.5258V30.3362H20.5258ZM32.6197 27.3362H23.5258V33.3362H32.6197V27.3362ZM39.9893 35.2506L35.0311 28.5515L30.2083 32.1209L35.1665 38.8201L39.9893 35.2506ZM39.9417 35.188L39.932 35.1757L35.2239 38.895L35.2336 38.9074L39.9417 35.188ZM38.2704 35.1809C38.6911 34.6532 39.5058 34.6362 39.9417 35.188L35.2337 38.9074C37.2153 41.4157 40.9956 41.387 42.9615 38.9217L38.2704 35.1809ZM39.4086 33.742L38.2631 35.19L42.9687 38.9125L44.1142 37.4644L39.4086 33.742ZM39.3958 33.7583L39.3893 33.7665L44.1335 37.4398L44.1399 37.4316L39.3958 33.7583ZM39.4044 35.0927C39.0836 34.6819 39.107 34.1313 39.3956 33.7585L44.1401 37.4313C45.4916 35.6855 45.5411 33.2027 44.1334 31.4L39.4044 35.0927ZM34.5143 28.4574L39.3536 35.0258L44.1842 31.4668L39.3448 24.8985L34.5143 28.4574ZM34.5669 28.5268L34.5777 28.5404L39.2814 24.8155L39.2707 24.8019L34.5669 28.5268ZM32.8962 27.7236C33.5633 27.7236 34.1621 28.0155 34.5668 28.5266L39.2708 24.802C37.7215 22.8453 35.386 21.7236 32.8962 21.7236V27.7236ZM22.983 27.7236H32.8962V21.7236H22.983V27.7236ZM20.875 29.7848C20.875 28.6802 21.8056 27.7236 22.983 27.7236V21.7236C18.5608 21.7236 14.875 25.298 14.875 29.7848H20.875ZM20.875 55.8124V29.7848H14.875V55.8124H20.875ZM22.983 57.8735C21.8033 57.8735 20.875 56.9181 20.875 55.8124H14.875C14.875 60.2969 18.555 63.8735 22.983 63.8735V57.8735ZM32.8962 57.8735H22.983V63.8735H32.8962V57.8735ZM34.5689 57.0713C34.1638 57.5811 33.5638 57.8735 32.8962 57.8735V63.8735C35.3849 63.8735 37.7179 62.753 39.2666 60.8038L34.5689 57.0713ZM57.1991 28.4713L34.5651 57.0761L39.2703 60.7991L61.9043 32.1943L57.1991 28.4713ZM68.6602 27.3328H59.5517V33.3328H68.6602V27.3328ZM71.6602 55.2575V30.3328H65.6602V55.2575H71.6602ZM59.5646 58.2575H68.6602V52.2575H59.5646V58.2575ZM52.5908 50.7255L57.1325 57.014L61.9966 53.5011L57.4549 47.2125L52.5908 50.7255ZM52.661 50.819L52.6756 50.8372L57.3701 47.1008L57.3556 47.0825L52.661 50.819ZM54.3325 50.8189C53.9024 51.3593 53.091 51.3593 52.6609 50.8189L57.3557 47.0826C55.3836 44.6047 51.6098 44.6047 49.6378 47.0826L54.3325 50.8189ZM53.1839 52.2655L54.3346 50.8162L49.6357 47.0853L48.4849 48.5346L53.1839 52.2655ZM53.1995 52.2458L53.207 52.2361L48.4619 48.564L48.4544 48.5737L53.1995 52.2458ZM35.6088 57.9515L42.4705 49.2813L37.7656 45.5579L30.904 54.228L35.6088 57.9515ZM42.4705 49.2813L49.3945 40.5324L44.6896 36.8089L37.7656 45.5579L42.4705 49.2813ZM49.3947 40.5322L58.4038 29.1466L53.6987 25.4235L44.6895 36.8091L49.3947 40.5322ZM53.6988 25.4234L30.9039 54.2281L35.6089 57.9514L58.4037 29.1467L53.6988 25.4234Z" fill="url(#paint1_linear_4703_10188)" fill-opacity="0.1" mask="url(#path-3-outside-1_4703_10188)"/>
+</g>
 </g>
 <defs>
-<filter id="filter0_bi_188_1378" x="9.1337" y="19.4801" width="67.735" height="47.4489" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_d_4703_10188" x="0" y="0" width="92.1875" height="92.1875" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4703_10188"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4703_10188" result="shape"/>
+</filter>
+<filter id="filter1_bi_4703_10188" x="12.2255" y="19.0741" width="67.7365" height="47.4489" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feGaussianBlur in="BackgroundImageFix" stdDeviation="1.32475"/>
-<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_188_1378"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_188_1378" result="shape"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_4703_10188"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_4703_10188" result="shape"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 <feOffset dy="0.441584"/>
 <feGaussianBlur stdDeviation="0.662376"/>
 <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
 <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.15 0"/>
-<feBlend mode="normal" in2="shape" result="effect2_innerShadow_188_1378"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_4703_10188"/>
 </filter>
-<linearGradient id="paint0_linear_188_1378" x1="43" y1="0.40625" x2="43" y2="84.5938" gradientUnits="userSpaceOnUse">
-<stop stop-color="#3D4147"/>
-<stop offset="1" stop-color="#2C2F35"/>
-</linearGradient>
-<linearGradient id="paint1_linear_188_1378" x1="15.7832" y1="26.1296" x2="74.4332" y2="49.8684" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint0_linear_4703_10188" x1="18.875" y1="25.7236" x2="77.525" y2="49.4624" gradientUnits="userSpaceOnUse">
 <stop stop-color="#75A5FF"/>
 <stop offset="0.703125" stop-color="#23E5FF"/>
 </linearGradient>
-<linearGradient id="paint2_linear_188_1378" x1="16.5468" y1="26.7728" x2="71.2192" y2="26.7728" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint1_linear_4703_10188" x1="19.6386" y1="26.3668" x2="74.311" y2="26.3668" gradientUnits="userSpaceOnUse">
 <stop stop-color="#3CDEB6"/>
 <stop offset="0.65625" stop-color="#364AFF"/>
 </linearGradient>
diff --git a/frontend/src/media/logo/anything-llm-old.png b/frontend/src/media/logo/anything-llm-dark.png
similarity index 100%
rename from frontend/src/media/logo/anything-llm-old.png
rename to frontend/src/media/logo/anything-llm-dark.png
diff --git a/frontend/src/models/system.js b/frontend/src/models/system.js
index 4231c83c8..f8f52b7eb 100644
--- a/frontend/src/models/system.js
+++ b/frontend/src/models/system.js
@@ -345,7 +345,13 @@ const System = {
     return { appName: customAppName, error: null };
   },
   fetchLogo: async function () {
-    return await fetch(`${API_BASE}/system/logo`, {
+    const url = new URL(`${API_BASE}/system/logo`);
+    url.searchParams.append(
+      "theme",
+      localStorage.getItem("theme") || "default"
+    );
+
+    return await fetch(url, {
       method: "GET",
       cache: "no-cache",
     })
diff --git a/frontend/src/pages/Admin/Agents/Badges/default.jsx b/frontend/src/pages/Admin/Agents/Badges/default.jsx
index 13a37abad..0c80ef40e 100644
--- a/frontend/src/pages/Admin/Agents/Badges/default.jsx
+++ b/frontend/src/pages/Admin/Agents/Badges/default.jsx
@@ -6,8 +6,8 @@ export function DefaultBadge({ title }) {
         data-tooltip-id="default-skill"
         data-tooltip-content="This skill is enabled by default and cannot be turned off."
       >
-        <div className="flex items-center gap-x-1 w-fit rounded-full bg-[#F4FFD0]/10 px-2.5 py-0.5 text-sm font-medium text-sky-400 shadow-sm cursor-pointer">
-          <div className="text-[#F4FFD0] text-[12px] leading-[15px]">
+        <div className="flex items-center gap-x-1 w-fit rounded-full bg-[#F4FFD0]/10 light:bg-blue-100 px-2.5 py-0.5 text-sm font-medium text-sky-400 light:text-theme-text-secondary shadow-sm cursor-pointer">
+          <div className="text-[#F4FFD0] light:text-blue-600 text-[12px] leading-[15px]">
             Default
           </div>
         </div>
diff --git a/frontend/src/pages/Admin/Agents/DefaultSkillPanel/index.jsx b/frontend/src/pages/Admin/Agents/DefaultSkillPanel/index.jsx
index fdda731c0..d28f35cf2 100644
--- a/frontend/src/pages/Admin/Agents/DefaultSkillPanel/index.jsx
+++ b/frontend/src/pages/Admin/Agents/DefaultSkillPanel/index.jsx
@@ -10,17 +10,20 @@ export default function DefaultSkillPanel({ title, description, image, icon }) {
             {icon &&
               React.createElement(icon, {
                 size: 24,
-                color: "white",
+                color: "var(--theme-text-primary)",
                 weight: "bold",
               })}
-            <label htmlFor="name" className="text-white text-md font-bold">
+            <label
+              htmlFor="name"
+              className="text-theme-text-primary text-md font-bold"
+            >
               {title}
             </label>
             <DefaultBadge title={title} />
           </div>
         </div>
         <img src={image} alt={title} className="w-full rounded-md" />
-        <p className="text-white text-opacity-60 text-xs font-medium py-1.5">
+        <p className="text-theme-text-secondary text-opacity-60 text-xs font-medium py-1.5">
           {description}
         </p>
       </div>
diff --git a/frontend/src/pages/Admin/Agents/GenericSkillPanel/index.jsx b/frontend/src/pages/Admin/Agents/GenericSkillPanel/index.jsx
index ed8b8a4f0..074e1927d 100644
--- a/frontend/src/pages/Admin/Agents/GenericSkillPanel/index.jsx
+++ b/frontend/src/pages/Admin/Agents/GenericSkillPanel/index.jsx
@@ -17,10 +17,13 @@ export default function GenericSkillPanel({
           {icon &&
             React.createElement(icon, {
               size: 24,
-              color: "white",
+              color: "var(--theme-text-primary)",
               weight: "bold",
             })}
-          <label htmlFor="name" className="text-white text-md font-bold">
+          <label
+            htmlFor="name"
+            className="text-theme-text-primary text-md font-bold"
+          >
             {title}
           </label>
           <label
@@ -40,7 +43,7 @@ export default function GenericSkillPanel({
           </label>
         </div>
         <img src={image} alt={title} className="w-full rounded-md" />
-        <p className="text-white text-opacity-60 text-xs font-medium py-1.5">
+        <p className="text-theme-text-secondary text-opacity-60 text-xs font-medium py-1.5">
           {description}
         </p>
       </div>
diff --git a/frontend/src/pages/Admin/Agents/Imported/ImportedSkillConfig/index.jsx b/frontend/src/pages/Admin/Agents/Imported/ImportedSkillConfig/index.jsx
index 644d931d2..e966e3509 100644
--- a/frontend/src/pages/Admin/Agents/Imported/ImportedSkillConfig/index.jsx
+++ b/frontend/src/pages/Admin/Agents/Imported/ImportedSkillConfig/index.jsx
@@ -105,7 +105,7 @@ export default function ImportedSkillConfig({
       <div className="p-2">
         <div className="flex flex-col gap-y-[18px] max-w-[500px]">
           <div className="flex items-center gap-x-2">
-            <Plug size={24} color="white" weight="bold" />
+            <Plug size={24} weight="bold" className="text-white" />
             <label htmlFor="name" className="text-white text-md font-bold">
               {sentenceCase(config.name)}
             </label>
@@ -151,7 +151,7 @@ export default function ImportedSkillConfig({
                       setInputs({ ...inputs, [key]: e.target.value })
                     }
                     placeholder={props?.input?.placeholder || ""}
-                    className="bg-transparent border border-white border-opacity-20 rounded-md p-2 text-white text-sm"
+                    className="bg-transparent border border-white light:border-black rounded-md p-2 text-white text-sm"
                   />
                   <p className="text-white text-opacity-60 text-xs font-medium py-1.5">
                     {props?.input?.hint}
@@ -162,7 +162,7 @@ export default function ImportedSkillConfig({
                 <button
                   onClick={handleSubmit}
                   type="button"
-                  className="bg-blue-500 text-white rounded-md p-2"
+                  className="bg-blue-500 text-white light:text-white rounded-md p-2"
                 >
                   Save
                 </button>
diff --git a/frontend/src/pages/Admin/Agents/Imported/SkillList/index.jsx b/frontend/src/pages/Admin/Agents/Imported/SkillList/index.jsx
index b6358077a..0c1a8dce4 100644
--- a/frontend/src/pages/Admin/Agents/Imported/SkillList/index.jsx
+++ b/frontend/src/pages/Admin/Agents/Imported/SkillList/index.jsx
@@ -9,14 +9,14 @@ export default function ImportedSkillList({
 }) {
   if (skills.length === 0)
     return (
-      <div className="text-white/60 text-center text-xs flex flex-col gap-y-2">
+      <div className="text-theme-text-secondary text-center text-xs flex flex-col gap-y-2">
         <p>No imported skills found</p>
         <p>
           Learn about agent skills in the{" "}
           <a
             href="https://docs.anythingllm.com/agent/custom/developer-guide"
             target="_blank"
-            className="text-white/80 hover:underline"
+            className="text-theme-text-secondary light:underline hover:underline"
           >
             AnythingLLM Agent Docs
           </a>
@@ -27,7 +27,7 @@ export default function ImportedSkillList({
 
   return (
     <div
-      className={`bg-white/5 text-white rounded-xl ${
+      className={`bg-theme-bg-secondary text-white rounded-xl ${
         isMobile ? "w-full" : "min-w-[360px] w-fit"
       }`}
     >
@@ -40,17 +40,21 @@ export default function ImportedSkillList({
             index === Object.keys(skills).length - 1
               ? "rounded-b-xl"
               : "border-b border-white/10"
-          } cursor-pointer transition-all duration-300  hover:bg-white/5 ${
-            selectedSkill === config.hubId ? "bg-white/10" : ""
+          } cursor-pointer transition-all duration-300 hover:bg-theme-bg-primary ${
+            selectedSkill === config.hubId ? "bg-theme-bg-primary" : ""
           }`}
           onClick={() => handleClick?.({ ...config, imported: true })}
         >
           <div className="text-sm font-light">{sentenceCase(config.name)}</div>
           <div className="flex items-center gap-x-2">
-            <div className="text-sm text-white/60 font-medium">
+            <div className="text-sm text-theme-text-secondary font-medium">
               {config.active ? "On" : "Off"}
             </div>
-            <CaretRight size={14} weight="bold" className="text-white/80" />
+            <CaretRight
+              size={14}
+              weight="bold"
+              className="text-theme-text-secondary"
+            />
           </div>
         </div>
       ))}
diff --git a/frontend/src/pages/Admin/Agents/SQLConnectorSelection/NewConnectionModal.jsx b/frontend/src/pages/Admin/Agents/SQLConnectorSelection/NewConnectionModal.jsx
index e5f4c3016..b5047848c 100644
--- a/frontend/src/pages/Admin/Agents/SQLConnectorSelection/NewConnectionModal.jsx
+++ b/frontend/src/pages/Admin/Agents/SQLConnectorSelection/NewConnectionModal.jsx
@@ -74,172 +74,175 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
   // to the parent container form so we don't have nested forms.
   return createPortal(
     <ModalWrapper isOpen={isOpen}>
-      <div className="relative w-full md:w-1/3 max-w-2xl max-h-full md:mt-8">
-        <div className="relative bg-main-gradient rounded-xl shadow-[0_4px_14px_rgba(0,0,0,0.25)] max-h-[85vh] overflow-y-scroll no-scroll">
-          <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
-            <h3 className="text-xl font-semibold text-white">
-              New SQL Connection
-            </h3>
+      <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
+        <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
+          <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+            <div className="w-full flex gap-x-2 items-center">
+              <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+                New SQL Connection
+              </h3>
+            </div>
             <button
               onClick={handleClose}
               type="button"
-              className="border-none transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
-              data-modal-hide="staticModal"
+              className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
             >
-              <X className="text-gray-300 text-lg" />
+              <X size={24} weight="bold" className="text-white" />
             </button>
           </div>
-
           <form
             id="sql-connection-form"
             onSubmit={handleUpdate}
             onChange={onFormChange}
           >
-            <div className="py-[17px] px-[20px] flex flex-col gap-y-6">
-              <p className="text-sm text-white">
-                Add the connection information for your database below and it
-                will be available for future SQL agent calls.
-              </p>
-              <div className="flex flex-col w-full">
-                <div className="border border-red-800 bg-zinc-800 p-4 rounded-lg flex items-center gap-x-2 text-sm text-red-400">
-                  <WarningOctagon size={28} className="shrink-0" />
-                  <p>
-                    <b>WARNING:</b> The SQL agent has been <i>instructed</i> to
-                    only perform non-modifying queries. This <b>does not</b>{" "}
-                    prevent a hallucination from still deleting data. Only
-                    connect with a user who has <b>READ_ONLY</b> permissions.
-                  </p>
+            <div className="px-7 py-6">
+              <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
+                <p className="text-sm text-white/60">
+                  Add the connection information for your database below and it
+                  will be available for future SQL agent calls.
+                </p>
+                <div className="flex flex-col w-full">
+                  <div className="border border-red-800 bg-zinc-800 light:bg-red-200/50 p-4 rounded-lg flex items-center gap-x-2 text-sm text-red-400 light:text-red-500">
+                    <WarningOctagon size={28} className="shrink-0" />
+                    <p>
+                      <b>WARNING:</b> The SQL agent has been <i>instructed</i>{" "}
+                      to only perform non-modifying queries. This{" "}
+                      <b>does not</b> prevent a hallucination from still
+                      deleting data. Only connect with a user who has{" "}
+                      <b>READ_ONLY</b> permissions.
+                    </p>
+                  </div>
+
+                  <label className="block mb-2 text-sm font-medium text-white mt-4">
+                    Select your SQL engine
+                  </label>
+                  <div className="grid md:grid-cols-4 gap-4 grid-cols-2">
+                    <DBEngine
+                      provider="postgresql"
+                      active={engine === "postgresql"}
+                      onClick={() => setEngine("postgresql")}
+                    />
+                    <DBEngine
+                      provider="mysql"
+                      active={engine === "mysql"}
+                      onClick={() => setEngine("mysql")}
+                    />
+                    <DBEngine
+                      provider="sql-server"
+                      active={engine === "sql-server"}
+                      onClick={() => setEngine("sql-server")}
+                    />
+                  </div>
                 </div>
 
-                <label className="text-white text-sm font-semibold block my-4">
-                  Select your SQL engine
-                </label>
-                <div className="grid md:grid-cols-4 gap-4 grid-cols-2">
-                  <DBEngine
-                    provider="postgresql"
-                    active={engine === "postgresql"}
-                    onClick={() => setEngine("postgresql")}
-                  />
-                  <DBEngine
-                    provider="mysql"
-                    active={engine === "mysql"}
-                    onClick={() => setEngine("mysql")}
-                  />
-                  <DBEngine
-                    provider="sql-server"
-                    active={engine === "sql-server"}
-                    onClick={() => setEngine("sql-server")}
+                <div className="flex flex-col w-full">
+                  <label className="block mb-2 text-sm font-medium text-white">
+                    Connection name
+                  </label>
+                  <input
+                    type="text"
+                    name="name"
+                    className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                    placeholder="a unique name to identify this SQL connection"
+                    required={true}
+                    autoComplete="off"
+                    spellCheck={false}
                   />
                 </div>
-              </div>
 
-              <div className="flex flex-col w-full">
-                <label className="text-white text-sm font-semibold block mb-3">
-                  Connection name
-                </label>
-                <input
-                  type="text"
-                  name="name"
-                  className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
-                  placeholder="a unique name to identify this SQL connection"
-                  required={true}
-                  autoComplete="off"
-                  spellCheck={false}
-                />
-              </div>
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                  <div className="flex flex-col">
+                    <label className="block mb-2 text-sm font-medium text-white">
+                      Database user
+                    </label>
+                    <input
+                      type="text"
+                      name="username"
+                      className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                      placeholder="root"
+                      required={true}
+                      autoComplete="off"
+                      spellCheck={false}
+                    />
+                  </div>
+                  <div className="flex flex-col">
+                    <label className="block mb-2 text-sm font-medium text-white">
+                      Database user password
+                    </label>
+                    <input
+                      type="text"
+                      name="password"
+                      className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                      placeholder="password123"
+                      required={true}
+                      autoComplete="off"
+                      spellCheck={false}
+                    />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+                  <div className="sm:col-span-2">
+                    <label className="block mb-2 text-sm font-medium text-white">
+                      Server endpoint
+                    </label>
+                    <input
+                      type="text"
+                      name="host"
+                      className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                      placeholder="the hostname or endpoint for your database"
+                      required={true}
+                      autoComplete="off"
+                      spellCheck={false}
+                    />
+                  </div>
+                  <div>
+                    <label className="block mb-2 text-sm font-medium text-white">
+                      Port
+                    </label>
+                    <input
+                      type="text"
+                      name="port"
+                      className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                      placeholder="3306"
+                      required={false}
+                      autoComplete="off"
+                      spellCheck={false}
+                    />
+                  </div>
+                </div>
 
-              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                 <div className="flex flex-col">
-                  <label className="text-white text-sm font-semibold block mb-3">
-                    Database user
+                  <label className="block mb-2 text-sm font-medium text-white">
+                    Database
                   </label>
                   <input
                     type="text"
-                    name="username"
-                    className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
-                    placeholder="root"
-                    required={true}
-                    autoComplete="off"
-                    spellCheck={false}
-                  />
-                </div>
-                <div className="flex flex-col">
-                  <label className="text-white text-sm font-semibold block mb-3">
-                    Database user password
-                  </label>
-                  <input
-                    type="text"
-                    name="password"
-                    className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
-                    placeholder="password123"
+                    name="database"
+                    className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                    placeholder="the database the agent will interact with"
                     required={true}
                     autoComplete="off"
                     spellCheck={false}
                   />
                 </div>
+                <p className="text-theme-text-secondary text-sm">
+                  {assembleConnectionString({ engine, ...config })}
+                </p>
               </div>
-
-              <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
-                <div className="sm:col-span-2">
-                  <label className="text-white text-sm font-semibold block mb-3">
-                    Server endpoint
-                  </label>
-                  <input
-                    type="text"
-                    name="host"
-                    className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
-                    placeholder="the hostname or endpoint for your database"
-                    required={true}
-                    autoComplete="off"
-                    spellCheck={false}
-                  />
-                </div>
-                <div>
-                  <label className="text-white text-sm font-semibold block mb-3">
-                    Port
-                  </label>
-                  <input
-                    type="text"
-                    name="port"
-                    className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
-                    placeholder="3306"
-                    required={false}
-                    autoComplete="off"
-                    spellCheck={false}
-                  />
-                </div>
-              </div>
-
-              <div className="flex flex-col">
-                <label className="text-white text-sm font-semibold block mb-3">
-                  Database
-                </label>
-                <input
-                  type="text"
-                  name="database"
-                  className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
-                  placeholder="the database the agent will interact with"
-                  required={true}
-                  autoComplete="off"
-                  spellCheck={false}
-                />
-              </div>
-              <p className="text-white/40 text-sm">
-                {assembleConnectionString({ engine, ...config })}
-              </p>
             </div>
-            <div className="flex w-full justify-between items-center p-3 space-x-2 border-t rounded-b border-gray-500/50">
+            <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border px-7 pb-6">
               <button
                 type="button"
                 onClick={handleClose}
-                className="border-none text-xs px-2 py-1 font-semibold rounded-lg bg-white hover:bg-transparent border-2 border-transparent hover:border-white hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
+                className="transition-all duration-300 text-white hover:bg-zinc-700 light:hover:bg-theme-bg-primary px-4 py-2 rounded-lg text-sm"
               >
                 Cancel
               </button>
               <button
                 type="submit"
                 form="sql-connection-form"
-                className="border-none text-xs px-2 py-1 font-semibold rounded-lg bg-primary-button hover:bg-secondary border-2 border-transparent hover:border-primary-button hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
+                className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
               >
                 Save connection
               </button>
@@ -257,7 +260,7 @@ function DBEngine({ provider, active, onClick }) {
     <button
       type="button"
       onClick={onClick}
-      className={`flex flex-col p-4 border border-white/40 bg-zinc-800 rounded-lg w-fit hover:bg-zinc-700 ${
+      className={`flex flex-col p-4 border border-white/40 bg-zinc-800 light:bg-theme-settings-input-bg rounded-lg w-fit hover:bg-zinc-700 ${
         active ? "!bg-blue-500/50" : ""
       }`}
     >
diff --git a/frontend/src/pages/Admin/Agents/SQLConnectorSelection/index.jsx b/frontend/src/pages/Admin/Agents/SQLConnectorSelection/index.jsx
index 846c5b965..cc8256145 100644
--- a/frontend/src/pages/Admin/Agents/SQLConnectorSelection/index.jsx
+++ b/frontend/src/pages/Admin/Agents/SQLConnectorSelection/index.jsx
@@ -26,8 +26,15 @@ export default function AgentSQLConnectorSelection({
       <div className="p-2">
         <div className="flex flex-col gap-y-[18px] max-w-[500px]">
           <div className="flex items-center gap-x-2">
-            <Database size={24} color="white" weight="bold" />
-            <label htmlFor="name" className="text-white text-md font-bold">
+            <Database
+              size={24}
+              color="var(--theme-text-primary)"
+              weight="bold"
+            />
+            <label
+              htmlFor="name"
+              className="text-theme-text-primary text-md font-bold"
+            >
               SQL Agent
             </label>
             <label className="border-none relative inline-flex cursor-pointer items-center ml-auto">
@@ -46,7 +53,7 @@ export default function AgentSQLConnectorSelection({
             alt="SQL Agent"
             className="w-full rounded-md"
           />
-          <p className="text-white text-opacity-60 text-xs font-medium py-1.5">
+          <p className="text-theme-text-secondary text-opacity-60 text-xs font-medium py-1.5">
             Enable your agent to be able to leverage SQL to answer you questions
             by connecting to various SQL database providers.
           </p>
@@ -64,7 +71,7 @@ export default function AgentSQLConnectorSelection({
                 )}
               />
               <div className="flex flex-col mt-2 gap-y-2">
-                <p className="text-white font-semibold text-sm">
+                <p className="text-theme-text-primary font-semibold text-sm">
                   Your database connections
                 </p>
                 <div className="flex flex-col gap-y-3">
@@ -89,17 +96,17 @@ export default function AgentSQLConnectorSelection({
                   <button
                     type="button"
                     onClick={openModal}
-                    className="w-fit relative flex h-[40px] items-center border-none hover:bg-slate-600/20 rounded-lg"
+                    className="w-fit relative flex h-[40px] items-center border-none hover:bg-theme-bg-secondary rounded-lg"
                   >
                     <div className="flex w-full gap-x-2 items-center p-4">
-                      <div className="bg-zinc-600 p-2 rounded-lg h-[24px] w-[24px] flex items-center justify-center">
+                      <div className="bg-theme-bg-secondary p-2 rounded-lg h-[24px] w-[24px] flex items-center justify-center">
                         <Plus
                           weight="bold"
                           size={14}
-                          className="shrink-0 text-slate-100"
+                          className="shrink-0 text-theme-text-primary"
                         />
                       </div>
-                      <p className="text-left text-slate-100 text-sm">
+                      <p className="text-left text-theme-text-primary text-sm">
                         New SQL connection
                       </p>
                     </div>
diff --git a/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderItem/index.jsx b/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderItem/index.jsx
index eff29c53a..f6b1112cd 100644
--- a/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderItem/index.jsx
+++ b/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderItem/index.jsx
@@ -3,8 +3,8 @@ export default function SearchProviderItem({ provider, checked, onClick }) {
   return (
     <div
       onClick={onClick}
-      className={`w-full p-2 rounded-md hover:cursor-pointer hover:bg-white/10 ${
-        checked ? "bg-white/10" : ""
+      className={`w-full p-2 rounded-md hover:cursor-pointer hover:bg-theme-bg-secondary ${
+        checked ? "bg-theme-bg-secondary" : ""
       }`}
     >
       <input
diff --git a/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderOptions/index.jsx b/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderOptions/index.jsx
index 940f6b474..956d167ec 100644
--- a/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderOptions/index.jsx
+++ b/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderOptions/index.jsx
@@ -20,7 +20,7 @@ export function GoogleSearchOptions({ settings }) {
           <input
             type="text"
             name="env::AgentGoogleSearchEngineId"
-            className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Google Search Engine Id"
             defaultValue={settings?.AgentGoogleSearchEngineId}
             required={true}
@@ -35,7 +35,7 @@ export function GoogleSearchOptions({ settings }) {
           <input
             type="password"
             name="env::AgentGoogleSearchEngineKey"
-            className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Google Search Engine API Key"
             defaultValue={
               settings?.AgentGoogleSearchEngineKey ? "*".repeat(20) : ""
@@ -87,7 +87,7 @@ export function SearchApiOptions({ settings }) {
           <input
             type="password"
             name="env::AgentSearchApiKey"
-            className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="SearchApi API Key"
             defaultValue={settings?.AgentSearchApiKey ? "*".repeat(20) : ""}
             required={true}
@@ -102,7 +102,7 @@ export function SearchApiOptions({ settings }) {
           <select
             name="env::AgentSearchApiEngine"
             required={true}
-            className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             defaultValue={settings?.AgentSearchApiEngine || "google"}
           >
             {SearchApiEngines.map(({ name, value }) => (
@@ -114,7 +114,7 @@ export function SearchApiOptions({ settings }) {
           {/* <input
             type="text"
             name="env::AgentSearchApiEngine"
-            className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="SearchApi engine (Google, Bing...)"
             defaultValue={settings?.AgentSearchApiEngine || "google"}
             required={true}
@@ -149,7 +149,7 @@ export function SerperDotDevOptions({ settings }) {
           <input
             type="password"
             name="env::AgentSerperApiKey"
-            className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Serper.dev API Key"
             defaultValue={settings?.AgentSerperApiKey ? "*".repeat(20) : ""}
             required={true}
@@ -184,7 +184,7 @@ export function BingSearchOptions({ settings }) {
           <input
             type="password"
             name="env::AgentBingSearchApiKey"
-            className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Bing Web Search API Key"
             defaultValue={settings?.AgentBingSearchApiKey ? "*".repeat(20) : ""}
             required={true}
@@ -247,7 +247,7 @@ export function SerplySearchOptions({ settings }) {
           <input
             type="password"
             name="env::AgentSerplyApiKey"
-            className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Serply API Key"
             defaultValue={settings?.AgentSerplyApiKey ? "*".repeat(20) : ""}
             required={true}
@@ -270,7 +270,7 @@ export function SearXNGOptions({ settings }) {
         <input
           type="url"
           name="env::AgentSearXNGApiUrl"
-          className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+          className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
           placeholder="SearXNG API Key"
           defaultValue={settings?.AgentSearXNGApiUrl}
           required={true}
@@ -304,7 +304,7 @@ export function TavilySearchOptions({ settings }) {
           <input
             type="password"
             name="env::AgentTavilyApiKey"
-            className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+            className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             placeholder="Tavily API Key"
             defaultValue={settings?.AgentTavilyApiKey ? "*".repeat(20) : ""}
             required={true}
diff --git a/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx b/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx
index c4e9907eb..4f3678781 100644
--- a/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx
+++ b/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx
@@ -155,8 +155,15 @@ export default function AgentWebSearchSelection({
     <div className="p-2">
       <div className="flex flex-col gap-y-[18px] max-w-[500px]">
         <div className="flex items-center gap-x-2">
-          <ListMagnifyingGlass size={24} color="white" weight="bold" />
-          <label htmlFor="name" className="text-white text-md font-bold">
+          <ListMagnifyingGlass
+            size={24}
+            color="var(--theme-text-primary)"
+            weight="bold"
+          />
+          <label
+            htmlFor="name"
+            className="text-theme-text-primary text-md font-bold"
+          >
             Live web search and browsing
           </label>
           <label className="border-none relative inline-flex cursor-pointer items-center ml-auto">
@@ -166,7 +173,7 @@ export default function AgentWebSearchSelection({
               checked={enabled}
               onChange={() => toggleSkill(skill)}
             />
-            <div className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"></div>
+            <div className="pointer-events-none peer h-6 w-11 rounded-full bg-theme-bg-secondary after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"></div>
             <span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"></span>
           </label>
         </div>
@@ -175,7 +182,7 @@ export default function AgentWebSearchSelection({
           alt="Web Search"
           className="w-full rounded-md"
         />
-        <p className="text-white text-opacity-60 text-xs font-medium py-1.5">
+        <p className="text-theme-text-secondary text-opacity-60 text-xs font-medium py-1.5">
           Enable your agent to search the web to answer your questions by
           connecting to a web-search (SERP) provider. Web search during agent
           sessions will not work until this is set up.
@@ -194,20 +201,20 @@ export default function AgentWebSearchSelection({
               />
             )}
             {searchMenuOpen ? (
-              <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
+              <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-theme-settings-input-bg rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
                 <div className="w-full flex flex-col gap-y-1">
-                  <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
+                  <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-theme-settings-input-bg">
                     <MagnifyingGlass
                       size={20}
                       weight="bold"
-                      className="absolute left-4 z-30 text-white -ml-4 my-2"
+                      className="absolute left-4 z-30 text-theme-text-primary -ml-4 my-2"
                     />
                     <input
                       type="text"
                       name="web-provider-search"
                       autoComplete="off"
                       placeholder="Search available web-search providers"
-                      className="border-none -ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none text-white placeholder:text-white placeholder:font-medium"
+                      className="border-none -ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none text-theme-text-primary placeholder:text-theme-text-primary placeholder:font-medium"
                       onChange={(e) => setSearchQuery(e.target.value)}
                       ref={searchInputRef}
                       onKeyDown={(e) => {
@@ -237,7 +244,7 @@ export default function AgentWebSearchSelection({
               </div>
             ) : (
               <button
-                className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
+                className="w-full max-w-[640px] h-[64px] bg-theme-settings-input-bg rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
                 type="button"
                 onClick={() => setSearchMenuOpen(true)}
               >
diff --git a/frontend/src/pages/Admin/Agents/index.jsx b/frontend/src/pages/Admin/Agents/index.jsx
index 8f758647b..e176aeecb 100644
--- a/frontend/src/pages/Admin/Agents/index.jsx
+++ b/frontend/src/pages/Admin/Agents/index.jsx
@@ -146,7 +146,7 @@ export default function AdminAgents() {
 
           {/* Skill settings nav */}
           <div hidden={showSkillModal} className="flex flex-col gap-y-[18px]">
-            <div className="text-white flex items-center gap-x-2">
+            <div className="text-theme-text-primary flex items-center gap-x-2">
               <Robot size={24} />
               <p className="text-lg font-medium">Agent Skills</p>
             </div>
@@ -171,7 +171,7 @@ export default function AdminAgents() {
               activeSkills={agentSkills}
             />
 
-            <div className="text-white flex items-center gap-x-2">
+            <div className="text-theme-text-primary flex items-center gap-x-2">
               <Plug size={24} />
               <p className="text-lg font-medium">Custom Skills</p>
             </div>
@@ -202,7 +202,7 @@ export default function AdminAgents() {
                   </button>
                 </div>
                 <div className="flex-1 overflow-y-auto p-4">
-                  <div className="bg-[#303237] text-white rounded-xl p-4">
+                  <div className=" bg-theme-bg-secondary text-white rounded-xl p-4">
                     {SelectedSkillComponent ? (
                       <>
                         {selectedSkill.imported ? (
@@ -226,7 +226,7 @@ export default function AdminAgents() {
                         )}
                       </>
                     ) : (
-                      <div className="flex flex-col items-center justify-center h-full text-white/60">
+                      <div className="flex flex-col items-center justify-center h-full text-theme-text-secondary">
                         <Robot size={40} />
                         <p className="font-medium">Select an agent skill</p>
                       </div>
@@ -261,7 +261,7 @@ export default function AdminAgents() {
 
         {/* Skill settings nav */}
         <div className="flex flex-col gap-y-[18px]">
-          <div className="text-white flex items-center gap-x-2">
+          <div className="text-theme-text-primary flex items-center gap-x-2">
             <Robot size={24} />
             <p className="text-lg font-medium">Agent Skills</p>
           </div>
@@ -281,7 +281,7 @@ export default function AdminAgents() {
             activeSkills={agentSkills}
           />
 
-          <div className="text-white flex items-center gap-x-2">
+          <div className="text-theme-text-primary flex items-center gap-x-2">
             <Plug size={24} />
             <p className="text-lg font-medium">Custom Skills</p>
           </div>
@@ -294,7 +294,7 @@ export default function AdminAgents() {
 
         {/* Selected agent skill setting panel */}
         <div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
-          <div className="bg-[#303237] text-white rounded-xl flex-1 p-4">
+          <div className="bg-theme-bg-secondary text-white rounded-xl flex-1 p-4">
             {SelectedSkillComponent ? (
               <>
                 {selectedSkill.imported ? (
@@ -318,7 +318,7 @@ export default function AdminAgents() {
                 )}
               </>
             ) : (
-              <div className="flex flex-col items-center justify-center h-full text-white/60">
+              <div className="flex flex-col items-center justify-center h-full text-theme-text-secondary">
                 <Robot size={40} />
                 <p className="font-medium">Select an agent skill</p>
               </div>
@@ -334,7 +334,7 @@ function SkillLayout({ children, hasChanges, handleSubmit, handleCancel }) {
   return (
     <div
       id="workspace-agent-settings-container"
-      className="w-screen h-screen overflow-hidden bg-sidebar flex md:mt-0 mt-6"
+      className="w-screen h-screen overflow-hidden bg-theme-bg-container flex md:mt-0 mt-6"
     >
       <Sidebar />
       <div
@@ -364,7 +364,7 @@ function SkillList({
   return (
     <>
       <div
-        className={`bg-white/5 text-white rounded-xl ${
+        className={`bg-theme-bg-secondary text-white rounded-xl ${
           isMobile ? "w-full" : "min-w-[360px] w-fit"
         }`}
       >
@@ -377,8 +377,10 @@ function SkillList({
               index === Object.keys(skills).length - 1
                 ? "rounded-b-xl"
                 : "border-b border-white/10"
-            } cursor-pointer transition-all duration-300  hover:bg-white/5 ${
-              selectedSkill === skill ? "bg-white/10" : ""
+            } cursor-pointer transition-all duration-300  hover:bg-theme-bg-primary ${
+              selectedSkill === skill
+                ? "bg-white/10 light:bg-theme-bg-sidebar"
+                : ""
             }`}
             onClick={() => handleClick?.(skill)}
           >
@@ -387,11 +389,15 @@ function SkillList({
               {isDefault ? (
                 <DefaultBadge title={skill} />
               ) : (
-                <div className="text-sm text-white/60 font-medium">
+                <div className="text-sm text-theme-text-secondary font-medium">
                   {activeSkills.includes(skill) ? "On" : "Off"}
                 </div>
               )}
-              <CaretRight size={14} weight="bold" className="text-white/80" />
+              <CaretRight
+                size={14}
+                weight="bold"
+                className="text-theme-text-secondary"
+              />
             </div>
           </div>
         ))}
@@ -402,7 +408,7 @@ function SkillList({
           id="default-skill"
           place="bottom"
           delayShow={300}
-          className="tooltip !text-xs"
+          className="tooltip light:invert-0 !text-xs"
         />
       )}
     </>
diff --git a/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/manage/DocumentSyncQueueRow/index.jsx b/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/manage/DocumentSyncQueueRow/index.jsx
index 30795628e..54d57011d 100644
--- a/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/manage/DocumentSyncQueueRow/index.jsx
+++ b/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/manage/DocumentSyncQueueRow/index.jsx
@@ -33,7 +33,7 @@ export default function DocumentSyncQueueRow({ queue }) {
         <td className="px-6 py-4 flex items-center gap-x-6">
           <button
             onClick={handleDelete}
-            className="font-medium text-red-300 px-2 py-1 rounded-lg hover:bg-red-800 hover:bg-opacity-20"
+            className="font-medium px-2 py-1 rounded-lg text-theme-text-primary hover:text-red-500"
           >
             <Trash className="h-5 w-5" />
           </button>
diff --git a/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/manage/index.jsx b/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/manage/index.jsx
index 027ebb7e6..a60709fa1 100644
--- a/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/manage/index.jsx
+++ b/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/manage/index.jsx
@@ -8,26 +8,28 @@ import DocumentSyncQueueRow from "./DocumentSyncQueueRow";
 
 export default function LiveDocumentSyncManager() {
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
       >
         <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16">
-          <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
+          <div className="w-full flex flex-col gap-y-1 pb-6 border-white/10 border-b-2">
             <div className="items-center flex gap-x-4">
-              <p className="text-lg leading-6 font-bold text-white">
+              <p className="text-lg leading-6 font-bold text-theme-text-primary">
                 Watched documents
               </p>
             </div>
-            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
+            <p className="text-xs leading-[18px] font-base text-theme-text-secondary">
               These are all the documents that are currently being watched in
               your instance. The content of these documents will be periodically
               synced.
             </p>
           </div>
-          <WatchedDocumentsContainer />
+          <div className="overflow-x-auto">
+            <WatchedDocumentsContainer />
+          </div>
         </div>
       </div>
     </div>
@@ -52,8 +54,8 @@ function WatchedDocumentsContainer() {
       <Skeleton.default
         height="80vh"
         width="100%"
-        highlightColor="#3D4147"
-        baseColor="#2C2F35"
+        highlightColor="var(--theme-bg-primary)"
+        baseColor="var(--theme-bg-secondary)"
         count={1}
         className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
         containerClassName="flex w-full"
@@ -62,8 +64,8 @@ function WatchedDocumentsContainer() {
   }
 
   return (
-    <table className="w-full text-sm text-left rounded-lg mt-6">
-      <thead className="text-white text-opacity-80 text-xs leading-[18px] font-bold uppercase border-white border-b border-opacity-60">
+    <table className="w-full text-sm text-left rounded-lg mt-6 min-w-[640px]">
+      <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
         <tr>
           <th scope="col" className="px-6 py-3 rounded-tl-lg">
             Document Name
diff --git a/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/toggle.jsx b/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/toggle.jsx
index d27fafbb6..2c2b750a5 100644
--- a/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/toggle.jsx
+++ b/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/toggle.jsx
@@ -33,7 +33,7 @@ export default function LiveSyncToggle({ enabled = false, onToggle }) {
     <div className="p-4">
       <div className="flex flex-col gap-y-6 max-w-[500px]">
         <div className="flex items-center justify-between">
-          <h2 className="text-white text-md font-bold">
+          <h2 className="text-theme-text-primary text-md font-bold">
             Automatic Document Content Sync
           </h2>
           <label className="relative inline-flex cursor-pointer items-center">
@@ -47,16 +47,16 @@ export default function LiveSyncToggle({ enabled = false, onToggle }) {
           </label>
         </div>
         <div className="flex flex-col space-y-4">
-          <p className="text-white/90 text-sm">
+          <p className="text-theme-text-secondary text-sm">
             Enable the ability to specify a document to be "watched". Watched
             document's content will be regularly fetched and updated in
             AnythingLLM.
           </p>
-          <p className="text-white/90 text-sm">
+          <p className="text-theme-text-secondary text-sm">
             Watched documents will automatically update in all workspaces they
             are referenced in at the same time of update.
           </p>
-          <p className="text-white/80 text-xs italic">
+          <p className="text-theme-text-secondary text-xs italic">
             This feature only applies to web-based content, such as websites,
             Confluence, YouTube, and GitHub files.
           </p>
@@ -68,7 +68,7 @@ export default function LiveSyncToggle({ enabled = false, onToggle }) {
             <a
               href="https://docs.anythingllm.com/beta-preview/active-features/live-document-sync"
               target="_blank"
-              className="text-sm text-blue-400 hover:underline flex items-center gap-x-1"
+              className="text-sm text-blue-400 light:text-blue-500 hover:underline flex items-center gap-x-1"
             >
               <ArrowSquareOut size={14} />
               <span>Feature Documentation and Warnings</span>
@@ -77,7 +77,7 @@ export default function LiveSyncToggle({ enabled = false, onToggle }) {
           <li>
             <Link
               to={paths.experimental.liveDocumentSync.manage()}
-              className="text-sm text-blue-400 hover:underline"
+              className="text-sm text-blue-400 light:text-blue-500 hover:underline"
             >
               Manage Watched Documents &rarr;
             </Link>
diff --git a/frontend/src/pages/Admin/ExperimentalFeatures/index.jsx b/frontend/src/pages/Admin/ExperimentalFeatures/index.jsx
index 72aac8f59..5b04eaeb1 100644
--- a/frontend/src/pages/Admin/ExperimentalFeatures/index.jsx
+++ b/frontend/src/pages/Admin/ExperimentalFeatures/index.jsx
@@ -65,7 +65,7 @@ export default function ExperimentalFeatures() {
         {/* Selected feature setting panel */}
         <FeatureVerification>
           <div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
-            <div className="bg-[#303237] text-white rounded-xl flex-1 p-4">
+            <div className="bg-theme-bg-secondary text-white rounded-xl flex-1 p-4">
               {selectedFeature ? (
                 <SelectedFeatureComponent
                   feature={configurableFeatures[selectedFeature]}
@@ -90,7 +90,7 @@ function FeatureLayout({ children }) {
   return (
     <div
       id="workspace-feature-settings-container"
-      className="w-screen h-screen overflow-hidden bg-sidebar flex md:mt-0 mt-6"
+      className="w-screen h-screen overflow-hidden bg-theme-bg-container flex md:mt-0 mt-6"
     >
       <Sidebar />
       <div
@@ -113,7 +113,7 @@ function FeatureList({
 
   return (
     <div
-      className={`bg-white/5 text-white rounded-xl ${
+      className={`bg-theme-bg-secondary text-white rounded-xl ${
         isMobile ? "w-full" : "min-w-[360px] w-fit"
       }`}
     >
@@ -126,17 +126,23 @@ function FeatureList({
             index === Object.keys(features).length - 1
               ? "rounded-b-xl"
               : "border-b border-white/10"
-          } cursor-pointer transition-all duration-300  hover:bg-white/5 ${
-            selectedFeature === feature ? "bg-white/10" : ""
+          } cursor-pointer transition-all duration-300 hover:bg-white/5 ${
+            selectedFeature === feature
+              ? "bg-white/10 light:bg-theme-bg-sidebar  "
+              : ""
           }`}
           onClick={() => handleClick?.(feature)}
         >
           <div className="text-sm font-light">{settings.title}</div>
           <div className="flex items-center gap-x-2">
-            <div className="text-sm text-white/60 font-medium">
+            <div className="text-sm text-theme-text-secondary font-medium">
               {activeFeatures.includes(settings.key) ? "On" : "Off"}
             </div>
-            <CaretRight size={14} weight="bold" className="text-white/80" />
+            <CaretRight
+              size={14}
+              weight="bold"
+              className="text-theme-text-secondary"
+            />
           </div>
         </div>
       ))}
@@ -179,18 +185,18 @@ function FeatureVerification({ children }) {
     return (
       <>
         <ModalWrapper isOpen={true}>
-          <form
-            onSubmit={acceptTos}
-            className="relative w-full max-w-2xl max-h-full"
-          >
-            <div className="relative bg-main-gradient rounded-lg shadow">
-              <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
+          <div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
+            <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+              <div className="flex items-center gap-2">
+                <Flask size={24} className="text-theme-text-primary" />
                 <h3 className="text-xl font-semibold text-white">
                   Terms of use for experimental features
                 </h3>
               </div>
-              <div className="p-6 space-y-6 flex h-full w-full">
-                <div className="w-full flex flex-col gap-y-4 text-white">
+            </div>
+            <form onSubmit={acceptTos}>
+              <div className="py-7 px-9 space-y-4 flex-col">
+                <div className="w-full text-white text-md flex flex-col gap-y-4">
                   <p>
                     Experimental features of AnythingLLM are features that we
                     are piloting and are <b>opt-in</b>. We proactively will
@@ -203,7 +209,7 @@ function FeatureVerification({ children }) {
                       Use of any feature on this page can result in, but not
                       limited to, the following possibilities.
                     </p>
-                    <ul className="list-disc ml-6 text-sm font-mono">
+                    <ul className="list-disc ml-6 text-sm font-mono mt-2">
                       <li>Loss of data.</li>
                       <li>Change in quality of results.</li>
                       <li>Increased storage.</li>
@@ -221,7 +227,7 @@ function FeatureVerification({ children }) {
                       Use of an experimental feature also comes with the
                       following list of non-exhaustive conditions.
                     </p>
-                    <ul className="list-disc ml-6 text-sm font-mono">
+                    <ul className="list-disc ml-6 text-sm font-mono mt-2">
                       <li>Feature may not exist in future updates.</li>
                       <li>The feature being used is not currently stable.</li>
                       <li>
@@ -255,22 +261,22 @@ function FeatureVerification({ children }) {
                   </p>
                 </div>
               </div>
-              <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
+              <div className="flex w-full justify-between items-center p-6 space-x-2 border-t border-theme-modal-border rounded-b">
                 <a
                   href={paths.home()}
-                  className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300"
+                  className="px-4 py-2 rounded-lg text-theme-text-primary hover:bg-red-500/50 light:hover:bg-red-300/50 transition-all duration-300"
                 >
-                  Reject & Close
+                  Reject & close
                 </a>
                 <button
                   type="submit"
-                  className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
+                  className="transition-all duration-300 text-theme-text-primary hover:bg-blue-300/50 light:hover:bg-blue-300 px-4 py-2 rounded-lg text-sm"
                 >
                   I understand
                 </button>
               </div>
-            </div>
-          </form>
+            </form>
+          </div>
         </ModalWrapper>
         {children}
       </>
diff --git a/frontend/src/pages/Admin/Invitations/InviteRow/index.jsx b/frontend/src/pages/Admin/Invitations/InviteRow/index.jsx
index 56ebf7dc9..d42f4fdaa 100644
--- a/frontend/src/pages/Admin/Invitations/InviteRow/index.jsx
+++ b/frontend/src/pages/Admin/Invitations/InviteRow/index.jsx
@@ -62,14 +62,14 @@ export default function InviteRow({ invite }) {
               <button
                 onClick={copyInviteLink}
                 disabled={copied}
-                className="font-medium text-blue-300 rounded-lg hover:text-white hover:text-opacity-60 hover:underline"
+                className="font-medium text-blue-300 rounded-lg hover:text-blue-400 hover:underline"
               >
                 {copied ? "Copied" : "Copy Invite Link"}
               </button>
               <td className="px-6 py-4 flex items-center gap-x-6">
                 <button
                   onClick={handleDelete}
-                  className="font-medium text-red-300 px-2 py-1 rounded-lg hover:bg-red-800 hover:bg-opacity-20"
+                  className="font-medium text-theme-text-primary hover:text-red-500 px-2 py-1 rounded-lg"
                 >
                   <Trash className="h-5 w-5" />
                 </button>
diff --git a/frontend/src/pages/Admin/Invitations/NewInviteModal/index.jsx b/frontend/src/pages/Admin/Invitations/NewInviteModal/index.jsx
index cdeca6e68..4c705e8d5 100644
--- a/frontend/src/pages/Admin/Invitations/NewInviteModal/index.jsx
+++ b/frontend/src/pages/Admin/Invitations/NewInviteModal/index.jsx
@@ -58,103 +58,104 @@ export default function NewInviteModal({ closeModal }) {
   }, []);
 
   return (
-    <div className="relative w-[500px] max-w-2xl max-h-full overflow-auto">
-      <div className="relative bg-main-gradient rounded-lg shadow">
-        <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
-          <h3 className="text-xl font-semibold text-white">
-            Create new invite
-          </h3>
+    <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
+      <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
+        <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+          <div className="w-full flex gap-x-2 items-center">
+            <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+              Create new invite
+            </h3>
+          </div>
           <button
             onClick={closeModal}
             type="button"
-            className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
-            data-modal-hide="staticModal"
+            className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
           >
-            <X className="text-gray-300 text-lg" />
+            <X size={24} weight="bold" className="text-white" />
           </button>
         </div>
-        <form onSubmit={handleCreate}>
-          <div className="p-6 space-y-6 flex h-full w-full">
-            <div className="w-full flex flex-col gap-y-4">
+        <div className="p-6">
+          <form onSubmit={handleCreate}>
+            <div className="space-y-4">
               {error && <p className="text-red-400 text-sm">Error: {error}</p>}
               {invite && (
                 <input
                   type="url"
                   defaultValue={`${window.location.origin}/accept-invite/${invite.code}`}
                   disabled={true}
-                  className="rounded-lg px-4 py-2 text-white bg-zinc-900 border border-gray-500/50"
+                  className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                 />
               )}
-              <p className="text-white text-xs md:text-sm">
+              <p className="text-white text-opacity-60 text-xs md:text-sm">
                 After creation you will be able to copy the invite and send it
                 to a new user where they can create an account as the{" "}
                 <b>default</b> role and automatically be added to workspaces
                 selected.
               </p>
             </div>
-          </div>
 
-          {workspaces.length > 0 && !invite && (
-            <div className="p-6 flex w-full justify-between">
-              <div className="w-full">
-                <div className="flex flex-col gap-y-1  mb-2">
-                  <label
-                    htmlFor="workspaces"
-                    className="text-sm font-medium text-white"
-                  >
-                    Auto-add invitee to workspaces
-                  </label>
-                  <p className="text-white/60 text-xs">
-                    You can optionally automatically assign the user to the
-                    workspaces below by selecting them. By default, the user
-                    will not have any workspaces visible. You can assign
-                    workspaces later post-invite acceptance.
-                  </p>
-                </div>
+            {workspaces.length > 0 && !invite && (
+              <div className="mt-6">
+                <div className="w-full">
+                  <div className="flex flex-col gap-y-1 mb-2">
+                    <label
+                      htmlFor="workspaces"
+                      className="block text-sm font-medium text-white"
+                    >
+                      Auto-add invitee to workspaces
+                    </label>
+                    <p className="text-white text-opacity-60 text-xs">
+                      You can optionally automatically assign the user to the
+                      workspaces below by selecting them. By default, the user
+                      will not have any workspaces visible. You can assign
+                      workspaces later post-invite acceptance.
+                    </p>
+                  </div>
 
-                <div className="flex flex-col gap-y-2">
-                  {workspaces.map((workspace) => (
-                    <WorkspaceOption
-                      key={workspace.id}
-                      workspace={workspace}
-                      selected={selectedWorkspaceIds.includes(workspace.id)}
-                      toggleSelection={handleWorkspaceSelection}
-                    />
-                  ))}
+                  <div className="flex flex-col gap-y-2 mt-2">
+                    {workspaces.map((workspace) => (
+                      <WorkspaceOption
+                        key={workspace.id}
+                        workspace={workspace}
+                        selected={selectedWorkspaceIds.includes(workspace.id)}
+                        toggleSelection={handleWorkspaceSelection}
+                      />
+                    ))}
+                  </div>
                 </div>
               </div>
-            </div>
-          )}
-
-          <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
-            {!invite ? (
-              <>
-                <button
-                  onClick={closeModal}
-                  type="button"
-                  className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300"
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-                >
-                  Create Invite
-                </button>
-              </>
-            ) : (
-              <button
-                onClick={copyInviteLink}
-                type="button"
-                disabled={copied}
-                className="w-full transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800 text-center justify-center"
-              >
-                {copied ? "Copied Link" : "Copy Invite Link"}
-              </button>
             )}
-          </div>
-        </form>
+
+            <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
+              {!invite ? (
+                <>
+                  <button
+                    onClick={closeModal}
+                    type="button"
+                    className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+                  >
+                    Create Invite
+                  </button>
+                </>
+              ) : (
+                <button
+                  onClick={copyInviteLink}
+                  type="button"
+                  disabled={copied}
+                  className="w-full transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+                >
+                  {copied ? "Copied Link" : "Copy Invite Link"}
+                </button>
+              )}
+            </div>
+          </form>
+        </div>
       </div>
     </div>
   );
@@ -165,9 +166,11 @@ function WorkspaceOption({ workspace, selected, toggleSelection }) {
     <button
       type="button"
       onClick={() => toggleSelection(workspace.id)}
-      className={`transition-all duration-300 w-full h-11 p-2.5 bg-white/10 rounded-lg flex justify-start items-center gap-2.5 cursor-pointer border border-transparent ${
-        selected ? "border-white border-opacity-40" : "border-none "
-      } hover:border-white/60`}
+      className={`transition-all duration-300 w-full h-11 p-2.5 rounded-lg flex justify-start items-center gap-2.5 cursor-pointer border ${
+        selected
+          ? "border-theme-sidebar-item-workspace-active bg-theme-bg-secondary"
+          : "border-theme-sidebar-border"
+      } hover:border-theme-sidebar-border hover:bg-theme-bg-secondary`}
     >
       <input
         type="radio"
@@ -177,11 +180,11 @@ function WorkspaceOption({ workspace, selected, toggleSelection }) {
         className="hidden"
       />
       <div
-        className={`w-4 h-4 rounded-full border-2 border-white mr-2 ${
-          selected ? "bg-white" : ""
+        className={`w-4 h-4 rounded-full border-2 border-theme-sidebar-border mr-2 ${
+          selected ? "bg-[var(--theme-sidebar-item-workspace-active)]" : ""
         }`}
       ></div>
-      <div className="text-white text-sm font-medium font-['Plus Jakarta Sans'] leading-tight">
+      <div className="text-theme-text-primary text-sm font-medium font-['Plus Jakarta Sans'] leading-tight">
         {workspace.name}
       </div>
     </button>
diff --git a/frontend/src/pages/Admin/Invitations/index.jsx b/frontend/src/pages/Admin/Invitations/index.jsx
index 599271ad9..a08ca5eea 100644
--- a/frontend/src/pages/Admin/Invitations/index.jsx
+++ b/frontend/src/pages/Admin/Invitations/index.jsx
@@ -16,31 +16,36 @@ export default function AdminInvites() {
   const { isOpen, openModal, closeModal } = useModal();
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
       >
         <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16">
-          <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
+          <div className="w-full flex flex-col gap-y-1 pb-6 border-white/10 border-b-2">
             <div className="items-center flex gap-x-4">
-              <p className="text-lg leading-6 font-bold text-white">
+              <p className="text-lg leading-6 font-bold text-theme-text-primary">
                 Invitations
               </p>
             </div>
-            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
+            <p className="text-xs leading-[18px] font-base text-theme-text-secondary mt-2">
               Create invitation links for people in your organization to accept
               and sign up with. Invitations can only be used by a single user.
             </p>
           </div>
           <div className="w-full justify-end flex">
-            <CTAButton onClick={openModal} className="mt-3 mr-0 -mb-12 z-10">
+            <CTAButton
+              onClick={openModal}
+              className="mt-3 mr-0 mb-4 md:-mb-12 z-10"
+            >
               <EnvelopeSimple className="h-4 w-4" weight="bold" /> Create Invite
               Link
             </CTAButton>
           </div>
-          <InvitationsContainer />
+          <div className="overflow-x-auto mt-6">
+            <InvitationsContainer />
+          </div>
         </div>
         <ModalWrapper isOpen={isOpen}>
           <NewInviteModal closeModal={closeModal} />
@@ -69,18 +74,18 @@ function InvitationsContainer() {
       <Skeleton.default
         height="80vh"
         width="100%"
-        highlightColor="#3D4147"
-        baseColor="#2C2F35"
+        highlightColor="var(--theme-bg-primary)"
+        baseColor="var(--theme-bg-secondary)"
         count={1}
-        className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
+        className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm"
         containerClassName="flex w-full"
       />
     );
   }
 
   return (
-    <table className="w-full text-sm text-left rounded-lg mt-6">
-      <thead className="text-white text-opacity-80 text-xs leading-[18px] font-bold uppercase border-white border-b border-opacity-60">
+    <table className="w-full text-sm text-left rounded-lg min-w-[640px]">
+      <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
         <tr>
           <th scope="col" className="px-6 py-3 rounded-tl-lg">
             Status
diff --git a/frontend/src/pages/Admin/Logging/LogRow/index.jsx b/frontend/src/pages/Admin/Logging/LogRow/index.jsx
index 0ce89b35a..3113aa45a 100644
--- a/frontend/src/pages/Admin/Logging/LogRow/index.jsx
+++ b/frontend/src/pages/Admin/Logging/LogRow/index.jsx
@@ -66,15 +66,15 @@ export default function LogRow({ log }) {
 const EventMetadata = ({ metadata, expanded = false }) => {
   if (!metadata || !expanded) return null;
   return (
-    <tr className="bg-sidebar">
+    <tr className="bg-theme-bg-primary">
       <td
         colSpan="2"
-        className="px-6 py-4 font-medium text-white rounded-l-2xl"
+        className="px-6 py-4 font-medium text-theme-text-primary rounded-l-2xl"
       >
         Event Metadata
       </td>
       <td colSpan="4" className="px-6 py-4 rounded-r-2xl">
-        <div className="w-full rounded-lg bg-main-2 p-2 text-white shadow-sm border-white border bg-opacity-10">
+        <div className="w-full rounded-lg bg-theme-bg-secondary p-2 text-white shadow-sm border-white/10 border bg-opacity-10">
           <pre className="overflow-scroll">
             {JSON.stringify(metadata, null, 2)}
           </pre>
@@ -85,13 +85,25 @@ const EventMetadata = ({ metadata, expanded = false }) => {
 };
 
 const EventBadge = ({ event }) => {
-  let colorTheme = { bg: "bg-sky-600/20", text: "text-sky-400 " };
+  let colorTheme = {
+    bg: "bg-sky-600/20",
+    text: "text-sky-400 light:text-sky-800",
+  };
   if (event.includes("update"))
-    colorTheme = { bg: "bg-yellow-600/20", text: "text-yellow-400 " };
+    colorTheme = {
+      bg: "bg-yellow-600/20",
+      text: "text-yellow-400 light:text-yellow-800",
+    };
   if (event.includes("failed_") || event.includes("deleted"))
-    colorTheme = { bg: "bg-red-600/20", text: "text-red-400 " };
+    colorTheme = {
+      bg: "bg-red-600/20",
+      text: "text-red-400 light:text-red-800",
+    };
   if (event === "login_event")
-    colorTheme = { bg: "bg-green-600/20", text: "text-green-400 " };
+    colorTheme = {
+      bg: "bg-green-600/20",
+      text: "text-green-400 light:text-green-800",
+    };
 
   return (
     <td className="px-6 py-4 font-medium whitespace-nowrap text-white flex items-center">
diff --git a/frontend/src/pages/Admin/Logging/index.jsx b/frontend/src/pages/Admin/Logging/index.jsx
index 389263f4b..2a54c93f7 100644
--- a/frontend/src/pages/Admin/Logging/index.jsx
+++ b/frontend/src/pages/Admin/Logging/index.jsx
@@ -54,39 +54,41 @@ export default function AdminLogs() {
   };
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
       >
         <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16">
-          <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
+          <div className="w-full flex flex-col gap-y-1 pb-6 border-white/10 border-b-2">
             <div className="flex gap-x-4 items-center">
-              <p className="text-lg leading-6 font-bold text-white">
+              <p className="text-lg leading-6 font-bold text-theme-text-primary">
                 {t("event.title")}
               </p>
             </div>
-            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
+            <p className="text-xs leading-[18px] font-base text-theme-text-secondary mt-2">
               {t("event.description")}
             </p>
           </div>
           <div className="w-full justify-end flex">
             <CTAButton
               onClick={handleResetLogs}
-              className="mt-3 mr-0 -mb-14 z-10"
+              className="mt-3 mr-0 mb-4 md:-mb-14 z-10"
             >
               {t("event.clear")}
             </CTAButton>
           </div>
-          <LogsContainer
-            loading={loading}
-            logs={logs}
-            offset={offset}
-            canNext={canNext}
-            handleNext={handleNext}
-            handlePrevious={handlePrevious}
-          />
+          <div className="overflow-x-auto mt-6">
+            <LogsContainer
+              loading={loading}
+              logs={logs}
+              offset={offset}
+              canNext={canNext}
+              handleNext={handleNext}
+              handlePrevious={handlePrevious}
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -107,10 +109,10 @@ function LogsContainer({
       <Skeleton.default
         height="80vh"
         width="100%"
-        highlightColor="#3D4147"
-        baseColor="#2C2F35"
+        highlightColor="var(--theme-bg-primary)"
+        baseColor="var(--theme-bg-secondary)"
         count={1}
-        className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
+        className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm"
         containerClassName="flex w-full"
       />
     );
@@ -118,8 +120,8 @@ function LogsContainer({
 
   return (
     <>
-      <table className="w-full text-sm text-left rounded-lg mt-6">
-        <thead className="text-white text-opacity-80 text-xs leading-[18px] font-bold uppercase border-white border-b border-opacity-60">
+      <table className="w-full text-sm text-left rounded-lg min-w-[640px]">
+        <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
           <tr>
             <th scope="col" className="px-6 py-3 rounded-tl-lg">
               {t("event.table.type")}
@@ -142,14 +144,14 @@ function LogsContainer({
       <div className="flex w-full justify-between items-center mt-6">
         <button
           onClick={handlePrevious}
-          className="px-4 py-2 rounded-lg border border-slate-200 text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 disabled:invisible"
+          className="px-4 py-2 rounded-lg border border-slate-200 text-slate-200 light:text-theme-text-secondary light:border-theme-sidebar-border text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 disabled:invisible"
           disabled={offset === 0}
         >
           {t("common.previous")}
         </button>
         <button
           onClick={handleNext}
-          className="px-4 py-2 rounded-lg border border-slate-200 text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 disabled:invisible"
+          className="px-4 py-2 rounded-lg border border-slate-200 text-slate-200 light:text-theme-text-secondary light:border-theme-sidebar-border text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 disabled:invisible"
           disabled={!canNext}
         >
           {t("common.next")}
diff --git a/frontend/src/pages/Admin/Users/NewUserModal/index.jsx b/frontend/src/pages/Admin/Users/NewUserModal/index.jsx
index ebca2debb..22b885974 100644
--- a/frontend/src/pages/Admin/Users/NewUserModal/index.jsx
+++ b/frontend/src/pages/Admin/Users/NewUserModal/index.jsx
@@ -28,24 +28,25 @@ export default function NewUserModal({ closeModal }) {
   const user = userFromStorage();
 
   return (
-    <div className="relative w-full max-w-2xl max-h-full">
-      <div className="relative bg-main-gradient rounded-lg shadow">
-        <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
-          <h3 className="text-xl font-semibold text-white">
-            Add user to instance
-          </h3>
+    <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
+      <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
+        <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+          <div className="w-full flex gap-x-2 items-center">
+            <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+              Add user to instance
+            </h3>
+          </div>
           <button
             onClick={closeModal}
             type="button"
-            className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
-            data-modal-hide="staticModal"
+            className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
           >
-            <X className="text-gray-300 text-lg" />
+            <X size={24} weight="bold" className="text-white" />
           </button>
         </div>
-        <form onSubmit={handleCreate}>
-          <div className="p-6 space-y-6 flex h-full w-full">
-            <div className="w-full flex flex-col gap-y-4">
+        <div className="p-6">
+          <form onSubmit={handleCreate}>
+            <div className="space-y-4">
               <div>
                 <label
                   htmlFor="username"
@@ -56,7 +57,7 @@ export default function NewUserModal({ closeModal }) {
                 <input
                   name="username"
                   type="text"
-                  className="bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                  className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="User's username"
                   minLength={2}
                   required={true}
@@ -84,7 +85,7 @@ export default function NewUserModal({ closeModal }) {
                 <input
                   name="password"
                   type="text"
-                  className="bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                  className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="User's initial password"
                   required={true}
                   autoComplete="off"
@@ -106,7 +107,7 @@ export default function NewUserModal({ closeModal }) {
                   required={true}
                   defaultValue={"default"}
                   onChange={(e) => setRole(e.target.value)}
-                  className="rounded-lg bg-zinc-900 px-4 py-2 text-sm text-white border-gray-500 focus:ring-blue-500 focus:border-blue-500 w-full"
+                  className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                 >
                   <option value="default">Default</option>
                   <option value="manager">Manager</option>
@@ -128,23 +129,23 @@ export default function NewUserModal({ closeModal }) {
                 login to get access.
               </p>
             </div>
-          </div>
-          <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
-            <button
-              onClick={closeModal}
-              type="button"
-              className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300"
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-            >
-              Add user
-            </button>
-          </div>
-        </form>
+            <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
+              <button
+                onClick={closeModal}
+                type="button"
+                className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+              >
+                Add user
+              </button>
+            </div>
+          </form>
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/pages/Admin/Users/UserRow/EditUserModal/index.jsx b/frontend/src/pages/Admin/Users/UserRow/EditUserModal/index.jsx
index b6c30a852..c75a270f0 100644
--- a/frontend/src/pages/Admin/Users/UserRow/EditUserModal/index.jsx
+++ b/frontend/src/pages/Admin/Users/UserRow/EditUserModal/index.jsx
@@ -32,24 +32,25 @@ export default function EditUserModal({ currentUser, user, closeModal }) {
   };
 
   return (
-    <div className="relative w-[500px] max-w-2xl max-h-full">
-      <div className="relative bg-main-gradient rounded-lg shadow">
-        <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
-          <h3 className="text-xl font-semibold text-white">
-            Edit {user.username}
-          </h3>
+    <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
+      <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
+        <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+          <div className="w-full flex gap-x-2 items-center">
+            <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+              Edit {user.username}
+            </h3>
+          </div>
           <button
             onClick={closeModal}
             type="button"
-            className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
-            data-modal-hide="staticModal"
+            className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
           >
-            <X className="text-gray-300 text-lg" />
+            <X size={24} weight="bold" className="text-white" />
           </button>
         </div>
-        <form onSubmit={handleUpdate}>
-          <div className="p-6 space-y-6 flex h-full w-full">
-            <div className="w-full flex flex-col gap-y-4">
+        <div className="p-6">
+          <form onSubmit={handleUpdate}>
+            <div className="space-y-4">
               <div>
                 <label
                   htmlFor="username"
@@ -60,7 +61,7 @@ export default function EditUserModal({ currentUser, user, closeModal }) {
                 <input
                   name="username"
                   type="text"
-                  className="bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                  className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="User's username"
                   defaultValue={user.username}
                   minLength={2}
@@ -82,7 +83,7 @@ export default function EditUserModal({ currentUser, user, closeModal }) {
                 <input
                   name="password"
                   type="text"
-                  className="bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                  className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder={`${user.username}'s new password`}
                   autoComplete="off"
                   minLength={8}
@@ -103,7 +104,7 @@ export default function EditUserModal({ currentUser, user, closeModal }) {
                   required={true}
                   defaultValue={user.role}
                   onChange={(e) => setRole(e.target.value)}
-                  className="rounded-lg bg-zinc-900 px-4 py-2 text-sm text-white border-gray-500 focus:ring-blue-500 focus:border-blue-500 w-full"
+                  className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                 >
                   <option value="default">Default</option>
                   <option value="manager">Manager</option>
@@ -121,23 +122,23 @@ export default function EditUserModal({ currentUser, user, closeModal }) {
               />
               {error && <p className="text-red-400 text-sm">Error: {error}</p>}
             </div>
-          </div>
-          <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
-            <button
-              onClick={closeModal}
-              type="button"
-              className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300"
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-            >
-              Update user
-            </button>
-          </div>
-        </form>
+            <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
+              <button
+                onClick={closeModal}
+                type="button"
+                className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+              >
+                Update user
+              </button>
+            </div>
+          </form>
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/pages/Admin/Users/UserRow/index.jsx b/frontend/src/pages/Admin/Users/UserRow/index.jsx
index 720ae2dcc..2a115f491 100644
--- a/frontend/src/pages/Admin/Users/UserRow/index.jsx
+++ b/frontend/src/pages/Admin/Users/UserRow/index.jsx
@@ -68,7 +68,7 @@ export default function UserRow({ currUser, user }) {
           {canModify && (
             <button
               onClick={openModal}
-              className="text-sm font-medium text-white/80 rounded-lg hover:text-white px-2 py-1 hover:bg-white hover:bg-opacity-10"
+              className="text-sm font-medium text-white/80 light:text-black/80 rounded-lg hover:text-white hover:light:text-gray-500 px-2 py-1 hover:bg-white hover:bg-opacity-10"
             >
               Edit
             </button>
@@ -77,13 +77,13 @@ export default function UserRow({ currUser, user }) {
             <>
               <button
                 onClick={handleSuspend}
-                className="text-sm font-medium text-white/80 hover:text-orange-300 rounded-lg px-2 py-1 hover:bg-white hover:bg-opacity-10"
+                className="text-sm font-medium text-white/80 light:text-black/80 hover:light:text-orange-500 hover:text-orange-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-orange-50 hover:bg-opacity-10"
               >
                 {suspended ? "Unsuspend" : "Suspend"}
               </button>
               <button
                 onClick={handleDelete}
-                className="text-sm font-medium text-white/80 hover:text-red-300 px-2 py-1 rounded-lg hover:bg-red-800 hover:bg-opacity-20"
+                className="text-sm font-medium text-white/80 light:text-black/80 hover:light:text-red-500 hover:text-red-300 rounded-lg px-2 py-1 hover:bg-white hover:light:bg-red-50 hover:bg-opacity-10"
               >
                 Delete
               </button>
diff --git a/frontend/src/pages/Admin/Users/index.jsx b/frontend/src/pages/Admin/Users/index.jsx
index ed9f8b3f1..d72c4e862 100644
--- a/frontend/src/pages/Admin/Users/index.jsx
+++ b/frontend/src/pages/Admin/Users/index.jsx
@@ -16,29 +16,36 @@ export default function AdminUsers() {
   const { isOpen, openModal, closeModal } = useModal();
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
       >
         <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16">
-          <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
+          <div className="w-full flex flex-col gap-y-1 pb-6 border-white/10 border-b-2">
             <div className="items-center flex gap-x-4">
-              <p className="text-lg leading-6 font-bold text-white">Users</p>
+              <p className="text-lg leading-6 font-bold text-theme-text-primary">
+                Users
+              </p>
             </div>
-            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
+            <p className="text-xs leading-[18px] font-base text-theme-text-secondary">
               These are all the accounts which have an account on this instance.
               Removing an account will instantly remove their access to this
               instance.
             </p>
           </div>
           <div className="w-full justify-end flex">
-            <CTAButton onClick={openModal} className="mt-3 mr-0 -mb-6 z-10">
+            <CTAButton
+              onClick={openModal}
+              className="mt-3 mr-0 mb-4 md:-mb-6 z-10"
+            >
               <UserPlus className="h-4 w-4" weight="bold" /> Add user
             </CTAButton>
           </div>
-          <UsersContainer />
+          <div className="overflow-x-auto">
+            <UsersContainer />
+          </div>
         </div>
         <ModalWrapper isOpen={isOpen}>
           <NewUserModal closeModal={closeModal} />
@@ -67,18 +74,18 @@ function UsersContainer() {
       <Skeleton.default
         height="80vh"
         width="100%"
-        highlightColor="#3D4147"
-        baseColor="#2C2F35"
+        highlightColor="var(--theme-bg-primary)"
+        baseColor="var(--theme-bg-secondary)"
         count={1}
-        className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
+        className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-8"
         containerClassName="flex w-full"
       />
     );
   }
 
   return (
-    <table className="w-full text-sm text-left rounded-lg">
-      <thead className="text-white text-opacity-80 text-xs leading-[18px] font-bold uppercase border-white border-b border-opacity-60">
+    <table className="w-full text-sm text-left rounded-lg min-w-[640px]">
+      <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
         <tr>
           <th scope="col" className="px-6 py-3 rounded-tl-lg">
             Username
@@ -122,11 +129,11 @@ const ROLE_HINT = {
 export function RoleHintDisplay({ role }) {
   return (
     <div className="flex flex-col gap-y-1 py-1 pb-4">
-      <p className="text-sm font-medium text-white">Permissions</p>
+      <p className="text-sm font-medium text-theme-text-primary">Permissions</p>
       <ul className="flex flex-col gap-y-1 list-disc px-4">
         {ROLE_HINT[role ?? "default"].map((hints, i) => {
           return (
-            <li key={i} className="text-xs text-white/60">
+            <li key={i} className="text-xs text-theme-text-secondary">
               {hints}
             </li>
           );
@@ -182,7 +189,7 @@ export function MessageLimitInput({ enabled, limit, updateState, role }) {
               }}
               value={limit}
               min={1}
-              className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:border-white block w-60 p-2.5"
+              className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
             />
           </div>
         </div>
diff --git a/frontend/src/pages/Admin/Workspaces/NewWorkspaceModal/index.jsx b/frontend/src/pages/Admin/Workspaces/NewWorkspaceModal/index.jsx
index 53f5c98d7..ea272c6c6 100644
--- a/frontend/src/pages/Admin/Workspaces/NewWorkspaceModal/index.jsx
+++ b/frontend/src/pages/Admin/Workspaces/NewWorkspaceModal/index.jsx
@@ -16,24 +16,25 @@ export default function NewWorkspaceModal({ closeModal }) {
   };
 
   return (
-    <div className="relative w-[500px] max-w-2xl max-h-full">
-      <div className="relative bg-main-gradient rounded-lg shadow">
-        <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-600">
-          <h3 className="text-xl font-semibold text-white">
-            Create new workspace
-          </h3>
+    <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
+      <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
+        <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+          <div className="w-full flex gap-x-2 items-center">
+            <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+              Create new workspace
+            </h3>
+          </div>
           <button
             onClick={closeModal}
             type="button"
-            className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
-            data-modal-hide="staticModal"
+            className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
           >
-            <X className="text-gray-300 text-lg" />
+            <X size={24} weight="bold" className="text-white" />
           </button>
         </div>
-        <form onSubmit={handleCreate}>
-          <div className="p-6 space-y-6 flex h-full w-full">
-            <div className="w-full flex flex-col gap-y-4">
+        <div className="p-6">
+          <form onSubmit={handleCreate}>
+            <div className="space-y-4">
               <div>
                 <label
                   htmlFor="name"
@@ -44,7 +45,7 @@ export default function NewWorkspaceModal({ closeModal }) {
                 <input
                   name="name"
                   type="text"
-                  className="bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                  className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="My workspace"
                   minLength={4}
                   required={true}
@@ -57,23 +58,23 @@ export default function NewWorkspaceModal({ closeModal }) {
                 it. You can add users after it has been created.
               </p>
             </div>
-          </div>
-          <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-600">
-            <button
-              onClick={closeModal}
-              type="button"
-              className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300"
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-            >
-              Create workspace
-            </button>
-          </div>
-        </form>
+            <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
+              <button
+                onClick={closeModal}
+                type="button"
+                className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+              >
+                Create workspace
+              </button>
+            </div>
+          </form>
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/pages/Admin/Workspaces/WorkspaceRow/index.jsx b/frontend/src/pages/Admin/Workspaces/WorkspaceRow/index.jsx
index a54e027b8..e0e8f4254 100644
--- a/frontend/src/pages/Admin/Workspaces/WorkspaceRow/index.jsx
+++ b/frontend/src/pages/Admin/Workspaces/WorkspaceRow/index.jsx
@@ -47,7 +47,7 @@ export default function WorkspaceRow({ workspace, users }) {
         <td className="px-6 py-4 flex items-center gap-x-6">
           <button
             onClick={handleDelete}
-            className="font-medium text-red-300 px-2 py-1 rounded-lg hover:bg-red-800 hover:bg-opacity-20"
+            className="font-medium px-2 py-1 rounded-lg text-theme-text-primary hover:text-red-500"
           >
             <Trash className="h-5 w-5" />
           </button>
diff --git a/frontend/src/pages/Admin/Workspaces/index.jsx b/frontend/src/pages/Admin/Workspaces/index.jsx
index 5a7b128d2..0170efdd7 100644
--- a/frontend/src/pages/Admin/Workspaces/index.jsx
+++ b/frontend/src/pages/Admin/Workspaces/index.jsx
@@ -15,30 +15,35 @@ export default function AdminWorkspaces() {
   const { isOpen, openModal, closeModal } = useModal();
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
       >
         <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16">
-          <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
+          <div className="w-full flex flex-col gap-y-1 pb-6 border-white/10 border-b-2">
             <div className="items-center flex gap-x-4">
-              <p className="text-lg leading-6 font-bold text-white">
+              <p className="text-lg leading-6 font-bold text-theme-text-primary">
                 Instance Workspaces
               </p>
             </div>
-            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
+            <p className="text-xs leading-[18px] font-base text-theme-text-secondary">
               These are all the workspaces that exist on this instance. Removing
-              a workspace will delete all of it's associated chats and settings.
+              a workspace will delete all of its associated chats and settings.
             </p>
           </div>
           <div className="w-full justify-end flex">
-            <CTAButton onClick={openModal} className="mt-3 mr-0 -mb-14 z-10">
+            <CTAButton
+              onClick={openModal}
+              className="mt-3 mr-0 mb-4 md:-mb-14 z-10"
+            >
               <BookOpen className="h-4 w-4" weight="bold" /> New Workspace
             </CTAButton>
           </div>
-          <WorkspacesContainer />
+          <div className="overflow-x-auto">
+            <WorkspacesContainer />
+          </div>
         </div>
         <ModalWrapper isOpen={isOpen}>
           <NewWorkspaceModal closeModal={closeModal} />
@@ -69,8 +74,8 @@ function WorkspacesContainer() {
       <Skeleton.default
         height="80vh"
         width="100%"
-        highlightColor="#3D4147"
-        baseColor="#2C2F35"
+        highlightColor="var(--theme-bg-primary)"
+        baseColor="var(--theme-bg-secondary)"
         count={1}
         className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
         containerClassName="flex w-full"
@@ -79,8 +84,8 @@ function WorkspacesContainer() {
   }
 
   return (
-    <table className="w-full text-sm text-left rounded-lg mt-6">
-      <thead className="text-white text-opacity-80 text-xs leading-[18px] font-bold uppercase border-white border-b border-opacity-60">
+    <table className="w-full text-sm text-left rounded-lg mt-6 min-w-[640px]">
+      <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
         <tr>
           <th scope="col" className="px-6 py-3 rounded-tl-lg">
             Name
diff --git a/frontend/src/pages/FineTuning/Steps/Confirmation/index.jsx b/frontend/src/pages/FineTuning/Steps/Confirmation/index.jsx
index 8e0253e8d..51f08e621 100644
--- a/frontend/src/pages/FineTuning/Steps/Confirmation/index.jsx
+++ b/frontend/src/pages/FineTuning/Steps/Confirmation/index.jsx
@@ -61,12 +61,12 @@ export default function Confirmation({ settings, setSettings, setStep }) {
 
   return (
     <div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
-      <div className="bg-[#303237] text-white rounded-xl flex-1 p-6">
+      <div className="bg-theme-bg-secondary rounded-xl flex-1 p-6">
         <div className="w-full flex flex-col gap-y-3 max-w-[700px]">
-          <h2 className="text-base text-white font-semibold">
+          <h2 className="text-base text-theme-text-primary font-semibold">
             Confirm & Submit
           </h2>
-          <p className="text-white/80 text-sm">
+          <p className="text-theme-text-secondary text-sm">
             Below are your fine-tuning order details. If you have any questions
             before or after ordering your fine-tune you can checkout the{" "}
             <a
@@ -86,27 +86,33 @@ export default function Confirmation({ settings, setSettings, setStep }) {
             </a>
             .
           </p>
-          <div className="p-4 bg-zinc-900 text-white flex flex-col gap-y-2 rounded-lg mt-4">
+          <div className="p-4 bg-theme-bg-container text-theme-text-primary flex flex-col gap-y-2 rounded-lg mt-4">
             <div className="flex flex-col gap-y-3 text-sm">
               <div className="flex items-start gap-x-1">
                 <p className="w-1/3">Contact e-mail:</p>
-                <p className="text-white/80 w-2/3">{settings.email}</p>
+                <p className="text-theme-text-secondary w-2/3">
+                  {settings.email}
+                </p>
               </div>
               <div className="flex items-start gap-x-1">
                 <p className="w-1/3">Base LLM:</p>
-                <p className="text-white/80 w-2/3">{settings.baseModel}</p>
+                <p className="text-theme-text-secondary w-2/3">
+                  {settings.baseModel}
+                </p>
               </div>
               <div className="flex items-start gap-x-1">
                 <p className="w-1/3">Output model name:</p>
-                <p className="text-white/80 w-2/3">"{settings.modelName}"</p>
+                <p className="text-theme-text-secondary w-2/3">
+                  "{settings.modelName}"
+                </p>
               </div>
               <div className="flex items-start gap-x-1">
                 <p className="w-1/3">Training on workspaces:</p>
-                <div className="text-white/80 w-2/3 flex flex-wrap gap-1">
-                  {settings.trainingData.slugs.map((slug, i) => (
+                <div className="text-theme-text-secondary w-2/3 flex flex-wrap gap-1">
+                  {settings.trainingData.slugs.map((slug) => (
                     <span
                       key={slug}
-                      className={`rounded-full bg-white/10 px-2 py-0.5 h-[20px] text-xs font-medium text-white shadow-sm`}
+                      className="rounded-full bg-theme-bg-secondary px-2 py-0.5 h-[20px] text-xs font-medium text-theme-text-primary shadow-sm"
                     >
                       {getWorkspaceName(slug)}
                     </span>
@@ -115,7 +121,7 @@ export default function Confirmation({ settings, setSettings, setStep }) {
               </div>
               <div className="flex items-start gap-x-1">
                 <p className="w-1/3">Training data:</p>
-                <p className="text-white/80 w-2/3">
+                <p className="text-theme-text-secondary w-2/3">
                   {settings.trainingData.feedback === true
                     ? "Training on positive-feedback chats only"
                     : "Training on all chats"}
@@ -126,39 +132,53 @@ export default function Confirmation({ settings, setSettings, setStep }) {
             <div className="mt-4">
               <ul className="flex flex-col gap-y-1 text-sm">
                 <li className="flex items-center gap-x-2">
-                  <Check className="text-white" size={12} weight="bold" />
-                  <p className="text-white/80">
+                  <Check
+                    className="text-theme-text-primary"
+                    size={12}
+                    weight="bold"
+                  />
+                  <p className="text-theme-text-secondary">
                     Agreed to Terms and Conditions
                   </p>
                 </li>
                 <li className="flex items-center gap-x-2">
-                  <Check className="text-white" size={12} weight="bold" />
-                  <p className="text-white/80">
+                  <Check
+                    className="text-theme-text-primary"
+                    size={12}
+                    weight="bold"
+                  />
+                  <p className="text-theme-text-secondary">
                     Understand privacy & data handling
                   </p>
                 </li>
                 <li className="flex items-center gap-x-2">
-                  <Check className="text-white" size={12} weight="bold" />
-                  <p className="text-white/80">Agreed to Fulfillment terms</p>
+                  <Check
+                    className="text-theme-text-primary"
+                    size={12}
+                    weight="bold"
+                  />
+                  <p className="text-theme-text-secondary">
+                    Agreed to Fulfillment terms
+                  </p>
                 </li>
               </ul>
             </div>
 
-            <div className="mt-4 border-white/40 pt-2">
+            <div className="mt-4 border-theme-border pt-2">
               <div className="flex items-center gap-x-1 text-lg mb-0">
-                <p className="">Total one-time cost:</p>
-                <p className="text-white/80">
+                <p className="text-theme-text-primary">Total one-time cost:</p>
+                <p className="text-theme-text-secondary">
                   {dollarFormat(settings.tuningInfo.pricing.usd)}
                   <sup>*</sup>
                 </p>
               </div>
-              <p className="m-0 p-0 text-xs text-white/60">
+              <p className="m-0 p-0 text-xs text-theme-text-tertiary">
                 <sup>*</sup> price does not include any coupons, incentives, or
                 discounts you can apply at checkout.
               </p>
             </div>
           </div>
-          <p className="text-xs text-white/80 mt-4">
+          <p className="text-xs text-theme-text-secondary mt-4">
             Once you proceed to checkout, if you do not complete this purchase
             your data will be deleted from our servers within 1 hour of
             abandonment of the creation of the checkout in accordance to our
diff --git a/frontend/src/pages/FineTuning/Steps/DataUpload/index.jsx b/frontend/src/pages/FineTuning/Steps/DataUpload/index.jsx
index 6a48d5911..aeb7d0890 100644
--- a/frontend/src/pages/FineTuning/Steps/DataUpload/index.jsx
+++ b/frontend/src/pages/FineTuning/Steps/DataUpload/index.jsx
@@ -47,12 +47,12 @@ export default function DataUpload({ setSettings, setStep }) {
 
   return (
     <div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
-      <div className="bg-[#303237] text-white rounded-xl flex-1 p-6">
+      <div className="bg-theme-bg-secondary rounded-xl flex-1 p-6">
         <div className="w-full flex flex-col gap-y-3 max-w-[700px]">
-          <h2 className="text-base text-white font-semibold">
+          <h2 className="text-base text-theme-text-primary font-semibold">
             Select your training dataset
           </h2>
-          <p className="text-white/80 text-sm">
+          <p className="text-theme-text-secondary text-sm">
             This is the data your model will be trained and tuned on. This is a
             critical step and you should always train on the exact information
             you want the model to inherit. By default, AnythingLLM will use all
@@ -63,10 +63,10 @@ export default function DataUpload({ setSettings, setStep }) {
 
           <form onSubmit={handleSubmit} className="flex flex-col gap-y-6 mt-4">
             <div className="flex flex-col">
-              <label className="text-white text-sm font-semibold block mb-3">
+              <label className="text-theme-text-primary text-sm font-semibold block mb-3">
                 Only use positive responses
               </label>
-              <p className="text-xs font-normal text-white/80 mb-2">
+              <p className="text-xs font-normal text-theme-text-secondary mb-2">
                 Enabling this toggle will filter your dataset to only use
                 "positive" responses that were marked during chatting.
               </p>
@@ -86,10 +86,10 @@ export default function DataUpload({ setSettings, setStep }) {
             </div>
 
             <div className="flex flex-col">
-              <label className="text-white text-sm font-semibold block mb-3">
+              <label className="text-theme-text-primary text-sm font-semibold block mb-3">
                 Selected Workspaces
               </label>
-              <p className="text-xs font-normal text-white/80 mb-2">
+              <p className="text-xs font-normal text-theme-text-secondary mb-2">
                 Your training data will be limited to these workspaces.
               </p>
               <WorkspaceSelector
@@ -156,8 +156,8 @@ function WorkspaceSelector({
 
   return (
     <div className="flex flex-col gap-y-2">
-      <div className="min-w-[150px] max-w-[300px] h-[32px] p-[10px] rounded-lg flex items-center bg-dark-highlight mt-1">
-        <MagnifyingGlass size={16} className="text-white" />
+      <div className="min-w-[150px] max-w-[300px] h-[32px] p-[10px] rounded-lg flex items-center bg-theme-settings-input-bg mt-1">
+        <MagnifyingGlass size={16} className="text-theme-text-primary" />
         <input
           value={query}
           onChange={(e) => setQuery(e.target.value)}
@@ -168,7 +168,7 @@ function WorkspaceSelector({
             }, 500)
           }
           placeholder="Enter a workspace name"
-          className="bg-transparent p-1 px-2 appearance-none outline-none h-full w-full text-white text-xs placeholder:`text-white/50`"
+          className="bg-transparent p-1 px-2 appearance-none outline-none h-full w-full text-theme-text-primary text-xs placeholder:text-theme-text-secondary/50"
         />
       </div>
       <div className="flex flex-col items-center -ml-2">
@@ -180,7 +180,7 @@ function WorkspaceSelector({
                   return (
                     <div
                       key={workspace.slug}
-                      className="flex items-center justify-between rounded-full h-[20px] bg-white/10 px-2 py-1 text-xs font-medium text-white shadow-sm"
+                      className="flex items-center justify-between rounded-full h-[20px] bg-theme-bg-container px-2 py-1 text-xs font-medium text-theme-text-primary shadow-sm light:border light:bg-theme-bg-secondary"
                     >
                       <span className="truncate mr-1">{workspace.name}</span>
                       <button
@@ -220,8 +220,8 @@ function WorkspaceSuggestions({
 }) {
   if (availableWorkspaces.length === 0) {
     return (
-      <div className="w-full mt-[2px] bg-zinc-900 top-[45px] h-40 rounded-lg p-2 text-sm">
-        <p className="text-center text-white/40">
+      <div className="w-full mt-[2px] bg-theme-bg-container top-[45px] h-40 rounded-lg p-2 text-sm">
+        <p className="text-center text-theme-text-secondary/40">
           no workspaces available to select.
         </p>
       </div>
@@ -238,14 +238,14 @@ function WorkspaceSuggestions({
     : availableWorkspaces;
 
   return (
-    <div className="w-full mt-[2px] bg-zinc-900 top-[45px] h-40 rounded-lg p-2 text-sm flex flex-col gap-y-1 justify-start overflow-y-scroll">
+    <div className="w-full mt-[2px] bg-theme-bg-container top-[45px] h-40 rounded-lg p-2 text-sm flex flex-col gap-y-1 justify-start overflow-y-scroll">
       {filteredWorkspace.map((workspace) => {
         return (
           <button
             key={workspace.slug}
             onClick={() => addWorkspace(workspace)}
             type="button"
-            className="text-left text-white hover:bg-white/10 rounded-lg p-1"
+            className="text-left text-theme-text-primary hover:bg-theme-bg-secondary rounded-lg p-1"
           >
             {workspace.name}
           </button>
@@ -270,23 +270,19 @@ function DatasetSummary({ workspaces = [], feedback = null }) {
   }, [workspaces, feedback]);
 
   return (
-    <div className="bg-zinc-900 text-white/80 p-4 rounded-lg text-sm">
+    <div className="bg-theme-bg-container text-theme-text-secondary p-4 rounded-lg text-sm">
       <p>Training dataset size: {stats.count ?? "Unknown"}</p>
       {stats.count < stats.recommendedMin ? (
         <div className="flex items-center gap-x-1 text-red-500 text-sm p-2 rounded-lg bg-red-500/20 w-fit my-2">
-          <Warning size={14} />
+          <Warning size={12} weight="bold" />
           <p>
-            Your dataset is below the recommended minimum of{" "}
-            {stats.recommendedMin}! You may see no impact from a fine-tune.
+            Dataset size is below recommended minimum ({stats.recommendedMin})
           </p>
         </div>
       ) : (
         <div className="flex items-center gap-x-1 text-green-500 text-sm p-2 rounded-lg bg-green-500/20 w-fit my-2">
-          <CheckCircle size={14} />
-          <p>
-            Your dataset is large enough that you should see good results from a
-            fine-tune.
-          </p>
+          <CheckCircle size={12} weight="bold" />
+          <p>Dataset size is sufficient</p>
         </div>
       )}
     </div>
diff --git a/frontend/src/pages/FineTuning/Steps/FulfillmentPolicy/index.jsx b/frontend/src/pages/FineTuning/Steps/FulfillmentPolicy/index.jsx
index e66c5672b..8fbd9c6cc 100644
--- a/frontend/src/pages/FineTuning/Steps/FulfillmentPolicy/index.jsx
+++ b/frontend/src/pages/FineTuning/Steps/FulfillmentPolicy/index.jsx
@@ -11,29 +11,31 @@ export default function Fulfillment({ setSettings, setStep }) {
 
   return (
     <div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
-      <div className="bg-[#303237] text-white rounded-xl flex-1 p-6">
+      <div className="bg-theme-bg-secondary rounded-xl flex-1 p-6">
         <div className="w-full flex flex-col gap-y-3 max-w-[700px]">
-          <h2 className="text-base text-white font-semibold">
+          <h2 className="text-base text-theme-text-primary font-semibold">
             Fulfillment Policy
           </h2>
-          <p className="text-white/80 text-sm">
+          <p className="text-theme-text-secondary text-sm">
             Fulfillment of a fine-tune model is straight-forward. We do not host
             your model. We provide you a download link to run the model in a
             standard format where ever you run local LLMs
           </p>
-          <div className="flex flex-col gap-y-2 text-white/80 text-xs font-semibold rounded-lg p-4 h-[60vh] overflow-y-auto bg-dark-text mt-2">
-            <div className="text-xs text-white">
-              <h1>Fulfillment Terms</h1>
-              <p>Last updated: July 15, 2024</p>
+          <div className="flex flex-col gap-y-2 text-theme-text-secondary text-xs font-semibold rounded-lg p-4 h-[60vh] overflow-y-auto bg-theme-bg-container mt-2">
+            <div className="text-xs">
+              <h1 className="text-theme-text-primary">Fulfillment Terms</h1>
+              <p className="text-theme-text-secondary">
+                Last updated: July 15, 2024
+              </p>
             </div>
-            <p className="text-white/80">
+            <p className="text-theme-text-secondary">
               These fulfillment terms outline the agreement between Mintplex
               Labs Inc. ("Company," "we," "us," or "our") and the customer
               regarding the creation and delivery of fine-tuned models.
             </p>
 
-            <h2 className="text-white mt-4">Delivery of Model</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">Delivery of Model</h2>
+            <p className="text-theme-text-secondary">
               Upon completion of a fine-tuning job, we will deliver a download
               link to a .gguf model file suitable for LLM text inferencing. The
               customer acknowledges that this exchange is strictly transactional
@@ -41,15 +43,17 @@ export default function Fulfillment({ setSettings, setStep }) {
               is considered concluded and will be ineligible for a refund.
             </p>
 
-            <h2 className="text-white mt-4">Support</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">Support</h2>
+            <p className="text-theme-text-secondary">
               Please note that the delivery of the model does not include any
               dedicated support. Customers are encouraged to refer to available
               documentation and resources for guidance on using the model.
             </p>
 
-            <h2 className="text-white mt-4">Requesting Download Links</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">
+              Requesting Download Links
+            </h2>
+            <p className="text-theme-text-secondary">
               Customers may request refreshed download links from
               my.mintplexlabs.com as long as the model is retained in our cloud
               storage. We will retain a model in our storage for a maximum of 3
@@ -57,8 +61,10 @@ export default function Fulfillment({ setSettings, setStep }) {
               links are valid for 24 hours.
             </p>
 
-            <h2 className="text-white mt-4">Cancellation and Refunds</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">
+              Cancellation and Refunds
+            </h2>
+            <p className="text-theme-text-secondary">
               Mintplex Labs Inc. reserves the right to cancel any fine-tuning
               job at our discretion. In the event of a cancellation, a refund
               may be issued. Additionally, we reserve the right to deny a
@@ -66,22 +72,22 @@ export default function Fulfillment({ setSettings, setStep }) {
               cause or notice to the Customer.
             </p>
 
-            <h2 className="text-white mt-4">No Guarantees</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">No Guarantees</h2>
+            <p className="text-theme-text-secondary">
               Mintplex Labs Inc. makes <strong>NO GUARANTEES</strong> regarding
               the resulting model's output, functionality, speed, or
               compatibility with your tools, infrastructure and devices. Refund
               requests of this nature are not eligible for refunds.
             </p>
-            <p className="text-white/80">
+            <p className="text-theme-text-secondary">
               Models are delivered and accepted in "As-Is" condition. All
               delivered model and output files are deemed final and
               non-refundable for any reason after training is complete and a
               model has been generated.
             </p>
 
-            <h2 className="text-white mt-4">Payment Terms</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">Payment Terms</h2>
+            <p className="text-theme-text-secondary">
               All payments are required prior to the commencement of the
               fine-tuning process. Customers are responsible for ensuring that
               valid payment information is provided. Checkout sessions not
@@ -89,18 +95,18 @@ export default function Fulfillment({ setSettings, setStep }) {
               abandoned and will be deleted from our system.
             </p>
 
-            <h2 className="text-white mt-4">
+            <h2 className="text-theme-text-primary">
               Denial of Service for Payment Reasons
             </h2>
-            <p className="text-white/80">
+            <p className="text-theme-text-secondary">
               Mintplex Labs Inc. reserves the right to deny service to any
               customer with an outstanding balance or invalid payment
               information. If any discrepancies arise regarding payment or
               usage, we may suspend services until the matter is resolved.
             </p>
 
-            <h2 className="text-white mt-4">Contact</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary">Contact</h2>
+            <p className="text-theme-text-secondary">
               For any questions related to payment or fulfillment of services,
               please contact us at{" "}
               <a
diff --git a/frontend/src/pages/FineTuning/Steps/Introduction/index.jsx b/frontend/src/pages/FineTuning/Steps/Introduction/index.jsx
index c60e12d64..1ed2e7b8b 100644
--- a/frontend/src/pages/FineTuning/Steps/Introduction/index.jsx
+++ b/frontend/src/pages/FineTuning/Steps/Introduction/index.jsx
@@ -12,12 +12,12 @@ export default function Introduction({ setSettings, setStep }) {
 
   return (
     <div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
-      <div className="bg-[#303237] text-white rounded-xl flex-1 p-6">
+      <div className="bg-theme-bg-secondary rounded-xl flex-1 p-6">
         <div className="w-full flex flex-col gap-y-2 max-w-[700px]">
-          <h2 className="text-base text-white font-semibold">
+          <h2 className="text-base text-theme-text-primary font-semibold">
             What is a "Fine-Tuned" model?
           </h2>
-          <div className="flex flex-col gap-y-[25px] text-white/80 text-sm">
+          <div className="flex flex-col gap-y-[25px] text-theme-text-secondary text-sm">
             <p>
               Fine-tuned models are basically "customized"
               Language-Learning-Models (LLMs). These can be based on popular
@@ -37,8 +37,8 @@ export default function Introduction({ setSettings, setStep }) {
             </p>
           </div>
 
-          <div className="flex flex-col gap-y-2 text-white/80 text-sm mt-4">
-            <h3 className="text-base text-white font-semibold">
+          <div className="flex flex-col gap-y-2 text-theme-text-secondary text-sm mt-4">
+            <h3 className="text-base text-theme-text-primary font-semibold">
               When should I get a fine-tuned model?
             </h3>
             <p>
@@ -47,28 +47,44 @@ export default function Introduction({ setSettings, setStep }) {
             </p>
             <ul className="flex flex-col gap-y-1">
               <li className="flex items-center gap-x-2">
-                <Check className="text-white" size={12} weight="bold" /> Setting
-                the style, tone, format, or other qualitative aspects without
-                prompting
+                <Check
+                  className="text-theme-text-primary"
+                  size={12}
+                  weight="bold"
+                />{" "}
+                Setting the style, tone, format, or other qualitative aspects
+                without prompting
               </li>
               <li className="flex items-center gap-x-2">
-                <Check className="text-white" size={12} weight="bold" />{" "}
+                <Check
+                  className="text-theme-text-primary"
+                  size={12}
+                  weight="bold"
+                />{" "}
                 Improving reliability at producing a desired output
               </li>
               <li className="flex items-center gap-x-2">
-                <Check className="text-white" size={12} weight="bold" />{" "}
+                <Check
+                  className="text-theme-text-primary"
+                  size={12}
+                  weight="bold"
+                />{" "}
                 Correcting failures to follow complex prompts, citations, or
                 lack of background knowledge
               </li>
               <li className="flex items-center gap-x-2">
-                <Check className="text-white" size={12} weight="bold" /> You
-                want to run this model privately or offline
+                <Check
+                  className="text-theme-text-primary"
+                  size={12}
+                  weight="bold"
+                />{" "}
+                You want to run this model privately or offline
               </li>
             </ul>
           </div>
 
-          <div className="flex flex-col gap-y-2 text-white/80 text-sm mt-4">
-            <h3 className="text-base text-white font-semibold">
+          <div className="flex flex-col gap-y-2 text-theme-text-secondary text-sm mt-4">
+            <h3 className="text-base text-theme-text-primary font-semibold">
               What are fine-tunes bad for?
             </h3>
             <p>
@@ -78,17 +94,26 @@ export default function Introduction({ setSettings, setStep }) {
             </p>
             <ul>
               <li className="flex items-center gap-x-1">
-                <X className="text-white" size={12} weight="bold" /> You need
-                perfect recall of some piece of literature or reference document
+                <X
+                  className="text-theme-text-primary"
+                  size={12}
+                  weight="bold"
+                />{" "}
+                You need perfect recall of some piece of literature or reference
+                document
               </li>
               <li className="flex items-center gap-x-1">
-                <X className="text-white" size={12} weight="bold" /> You want
-                your model to have perfect memory or recollection
+                <X
+                  className="text-theme-text-primary"
+                  size={12}
+                  weight="bold"
+                />{" "}
+                You want your model to have perfect memory or recollection
               </li>
             </ul>
           </div>
 
-          <div className="flex flex-col gap-y-2 text-white/80 text-sm">
+          <div className="flex flex-col gap-y-2 text-theme-text-secondary text-sm">
             <p>
               In summary, if you are getting good results with RAG currently,
               creating a fine-tune can squeeze <b>even more performance</b> out
diff --git a/frontend/src/pages/FineTuning/Steps/OrderDetails/index.jsx b/frontend/src/pages/FineTuning/Steps/OrderDetails/index.jsx
index 657c75acc..5c13e657d 100644
--- a/frontend/src/pages/FineTuning/Steps/OrderDetails/index.jsx
+++ b/frontend/src/pages/FineTuning/Steps/OrderDetails/index.jsx
@@ -34,22 +34,22 @@ export default function OrderDetails({ setSettings, setStep }) {
 
   return (
     <div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
-      <div className="bg-[#303237] text-white rounded-xl flex-1 p-6">
+      <div className="bg-theme-bg-secondary rounded-xl flex-1 p-6">
         <div className="w-full flex flex-col gap-y-3 max-w-[700px]">
-          <h2 className="text-base text-white font-semibold">
+          <h2 className="text-base text-theme-text-primary font-semibold">
             Time to create your fine tune!
           </h2>
-          <p className="text-white/80 text-sm">
+          <p className="text-theme-text-secondary text-sm">
             Creating a model is quite simple. Currently we have a limited base
             model selection, however in the future we plan to expand support to
             many more foundational models.
           </p>
           <form onSubmit={handleSubmit} className="flex flex-col gap-y-6 mt-4">
             <div className="flex flex-col">
-              <label className="text-white text-sm font-semibold block mb-3">
+              <label className="text-theme-text-primary text-sm font-semibold block mb-3">
                 Account e-mail
               </label>
-              <p className="text-xs font-normal text-white/80 mb-2">
+              <p className="text-xs font-normal text-theme-text-secondary mb-2">
                 This e-mail is where you will receive all order information and
                 updates. This e-mail <b>must be accurate</b> or else we won't be
                 able to contact you with your fine-tuned model!
@@ -57,7 +57,7 @@ export default function OrderDetails({ setSettings, setStep }) {
               <input
                 type="email"
                 name="email"
-                className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full max-w-[200px] p-2.5"
+                className="border-none bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                 placeholder="jdoe@example.com"
                 required={true}
                 autoComplete="off"
@@ -66,10 +66,10 @@ export default function OrderDetails({ setSettings, setStep }) {
             </div>
 
             <div className="flex flex-col">
-              <label className="text-white text-sm font-semibold block mb-3">
+              <label className="text-theme-text-primary text-sm font-semibold block mb-3">
                 Preferred Base Model
               </label>
-              <p className="text-xs font-normal text-white/80 mb-2">
+              <p className="text-xs font-normal text-theme-text-secondary mb-2">
                 This is the foundational model your fine-tune will be based on.
                 We recommend Llama 3 8B.
               </p>
@@ -77,7 +77,7 @@ export default function OrderDetails({ setSettings, setStep }) {
                 <select
                   name="baseModel"
                   required={true}
-                  className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full max-w-[200px] p-2.5"
+                  className="border-none bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                 >
                   <option disabled value="">
                     -- select a base model --
@@ -91,7 +91,7 @@ export default function OrderDetails({ setSettings, setStep }) {
                   </optgroup>
                 </select>
               ) : (
-                <div className="flex items-center gap-x-2 text-white/80 text-sm">
+                <div className="flex items-center gap-x-2 text-theme-text-secondary text-sm">
                   <CircleNotch className="animate-spin" size={12} />
                   <p>fetching available models...</p>
                 </div>
@@ -99,10 +99,10 @@ export default function OrderDetails({ setSettings, setStep }) {
             </div>
 
             <div className="flex flex-col">
-              <label className="text-white text-sm font-semibold block mb-3">
+              <label className="text-theme-text-primary text-sm font-semibold block mb-3">
                 Model name
               </label>
-              <p className="text-xs font-normal text-white/80 mb-2">
+              <p className="text-xs font-normal text-theme-text-secondary mb-2">
                 What would you like to call your model? This has no impact on
                 its output or training and is only used for how we communicate
                 with you about the model.
@@ -110,7 +110,7 @@ export default function OrderDetails({ setSettings, setStep }) {
               <input
                 type="text"
                 name="modelName"
-                className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full max-w-[200px] p-2.5"
+                className="border-none bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                 placeholder="My really cool model!"
                 required={true}
                 autoComplete="off"
diff --git a/frontend/src/pages/FineTuning/Steps/OrderPlaced/index.jsx b/frontend/src/pages/FineTuning/Steps/OrderPlaced/index.jsx
index e537bdaa0..d552727d8 100644
--- a/frontend/src/pages/FineTuning/Steps/OrderPlaced/index.jsx
+++ b/frontend/src/pages/FineTuning/Steps/OrderPlaced/index.jsx
@@ -4,12 +4,12 @@ import paths from "@/utils/paths";
 export default function OrderPlaced({ settings }) {
   return (
     <div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
-      <div className="bg-[#303237] text-white rounded-xl flex-1 p-6">
+      <div className="bg-theme-bg-secondary rounded-xl flex-1 p-6">
         <div className="w-full flex flex-col gap-y-2 max-w-[700px]">
-          <h2 className="text-base text-white font-semibold">
+          <h2 className="text-base text-theme-text-primary font-semibold">
             Your order is placed!
           </h2>
-          <div className="flex flex-col gap-y-[25px] text-white/80 text-xs">
+          <div className="flex flex-col gap-y-[25px] text-theme-text-secondary text-xs">
             <p>
               Your fine-tune will begin once payment is complete. If the payment
               window did not automatically open - your checkout link is below.
@@ -22,25 +22,25 @@ export default function OrderPlaced({ settings }) {
             >
               {new URL(settings.checkoutUrl).origin}
             </a>
-            <p className="text-xs text-white/80">
+            <p className="text-xs text-theme-text-secondary">
               Your fine-tune does not begin until this payment is completed.
             </p>
 
             <div className="flex flex-col gap-y-2">
-              <p className="text-white/80 font-medium">
+              <p className="text-theme-text-secondary font-medium">
                 Reference: <span className="font-normal">{settings.jobId}</span>
               </p>
-              <p className="text-xs text-white/80">
+              <p className="text-xs text-theme-text-secondary">
                 This reference id is how we will communicate with you about your
                 fine-tune training status. <b>Save this reference id.</b>
               </p>
             </div>
 
             <div className="flex flex-col gap-y-2">
-              <p className="text-white/80 font-medium">
+              <p className="text-theme-text-secondary font-medium">
                 Contact: <span className="font-normal">{settings.email}</span>
               </p>
-              <p className="text-xs text-white/80">
+              <p className="text-xs text-theme-text-secondary">
                 Check the email above for order confirmation, status updates,
                 and more. Mintplex Labs will only contact you about your order
                 via email.
@@ -64,7 +64,7 @@ export default function OrderPlaced({ settings }) {
               </a>
             </div>
 
-            <p className="text-xs text-white/80">
+            <p className="text-xs text-theme-text-secondary">
               You can close this window or navigate away once you see the
               confirmation email in your inbox.
             </p>
diff --git a/frontend/src/pages/FineTuning/Steps/Privacy/index.jsx b/frontend/src/pages/FineTuning/Steps/Privacy/index.jsx
index e4d711518..68e62090e 100644
--- a/frontend/src/pages/FineTuning/Steps/Privacy/index.jsx
+++ b/frontend/src/pages/FineTuning/Steps/Privacy/index.jsx
@@ -11,12 +11,12 @@ export default function PrivacyHandling({ setSettings, setStep }) {
 
   return (
     <div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
-      <div className="bg-[#303237] text-white rounded-xl flex-1 p-6">
+      <div className="bg-theme-bg-secondary rounded-xl flex-1 p-6">
         <div className="w-full flex flex-col gap-y-3 max-w-[700px]">
-          <h2 className="text-base text-white font-semibold">
+          <h2 className="text-base text-theme-text-primary font-semibold">
             Data Handling Policy & Privacy
           </h2>
-          <p className="text-white/80 text-sm">
+          <p className="text-theme-text-secondary text-sm">
             Please accept the terms and conditions to continue with creation and
             ordering of a fine-tune model. We take the handling of your data
             very seriously and will only use your uploaded data for training the
@@ -24,14 +24,14 @@ export default function PrivacyHandling({ setSettings, setStep }) {
             completed, or canceled your information is automatically and
             permanently deleted.
           </p>
-          <div className="flex flex-col gap-y-2 text-white/75 text-xs font-semibold rounded-lg p-4 h-[60vh] overflow-y-auto bg-dark-text mt-2">
+          <div className="flex flex-col gap-y-2 text-theme-text-secondary text-xs font-semibold rounded-lg p-4 h-[60vh] overflow-y-auto bg-theme-bg-container mt-2">
             <div className="text-xs">
-              <h1 className="text-white/80">Privacy Policy</h1>
+              <h1 className="text-theme-text-secondary">Privacy Policy</h1>
               <p>Mintplex Labs Inc.</p>
               <p>Effective Date: July 15, 2024</p>
             </div>
-            <h2 className="text-white mt-4">1. Introduction</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">1. Introduction</h2>
+            <p className="text-theme-text-secondary">
               Welcome to Mintplex Labs Inc. ("we", "our", "us"). We are
               committed to protecting your privacy and ensuring the security of
               your personal information. This Privacy Policy describes how we
@@ -39,41 +39,47 @@ export default function PrivacyHandling({ setSettings, setStep }) {
               services.
             </p>
 
-            <h2 className="text-white mt-4">2. Information We Collect</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">
+              2. Information We Collect
+            </h2>
+            <p className="text-theme-text-secondary">
               When you place an order with us for tuning and large language
               model (LLM) fulfillment, we collect certain personal information
               from you, including but not limited to:
             </p>
-            <ul className="list-disc pl-5 text-white/80">
+            <ul className="list-disc pl-5 text-theme-text-secondary">
               <li>Email address</li>
               <li>Payment information</li>
               <li>Uploaded training data</li>
             </ul>
 
-            <h2 className="text-white mt-4">3. Use of Information</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">
+              3. Use of Information
+            </h2>
+            <p className="text-theme-text-secondary">
               We use the information we collect for the following purposes:
             </p>
-            <ul className="list-disc pl-5 text-white/80">
+            <ul className="list-disc pl-5 text-theme-text-secondary">
               <li>To process and fulfill your order</li>
               <li>To communicate with you regarding your order</li>
               <li>To improve our services</li>
             </ul>
 
-            <h2 className="text-white mt-4">4. Data Retention and Deletion</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">
+              4. Data Retention and Deletion
+            </h2>
+            <p className="text-theme-text-secondary">
               Uploaded training data is only retained for the duration of the
               model training. Upon training completion, failure, or order
               cancellation, the user data is permanently deleted from our
               storage.
             </p>
-            <p className="text-white/80">
+            <p className="text-theme-text-secondary">
               If you partially complete the order flow and do not finalize your
               order, any details and information associated with your order will
               be deleted 1 hour from abandonment.
             </p>
-            <p className="text-white/80">
+            <p className="text-theme-text-secondary">
               After you confirm receipt of your resulting model files, you can
               request us to delete your model from our storage at any time.
               Additionally, we may proactively reach out to you to confirm that
@@ -83,8 +89,10 @@ export default function PrivacyHandling({ setSettings, setStep }) {
               storage.
             </p>
 
-            <h2 className="text-white mt-4">5. Data Storage and Security</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">
+              5. Data Storage and Security
+            </h2>
+            <p className="text-theme-text-secondary">
               Our cloud storage provider is AWS. We have implement standard
               encryption and protection policies to ensure the security of your
               data. The storage solution has no public access, and all requests
@@ -95,21 +103,23 @@ export default function PrivacyHandling({ setSettings, setStep }) {
               e-mail you used during checkout.
             </p>
 
-            <h2 className="text-white mt-4">6. Payment Processing</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">
+              6. Payment Processing
+            </h2>
+            <p className="text-theme-text-secondary">
               We use Stripe as our payment processor. Your email may be shared
               with Stripe for customer service and payment management purposes.
             </p>
 
-            <h2 className="text-white mt-4">7. Data Sharing</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">7. Data Sharing</h2>
+            <p className="text-theme-text-secondary">
               We do not sell or share your personal information with third
               parties except as necessary to provide our services, comply with
               legal obligations, or protect our rights.
             </p>
 
-            <h2 className="text-white mt-4">8. Your Rights</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">8. Your Rights</h2>
+            <p className="text-theme-text-secondary">
               You have the right to access, correct, or delete your personal
               information. If you wish to exercise these rights, please contact
               us at{" "}
@@ -122,14 +132,16 @@ export default function PrivacyHandling({ setSettings, setStep }) {
               .
             </p>
 
-            <h2 className="text-white mt-4">9. California Privacy Rights</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">
+              9. California Privacy Rights
+            </h2>
+            <p className="text-theme-text-secondary">
               Under the California Consumer Privacy Act as amended by the
               California Privacy Rights Act (the "CCPA"), California residents
               have additional rights beyond what is set out in this privacy
               notice:
             </p>
-            <ul className="list-disc pl-5 text-white/80">
+            <ul className="list-disc pl-5 text-theme-text-secondary">
               <li>
                 <strong>Right to Know:</strong> You have the right to request
                 information about the categories and specific pieces of personal
@@ -159,7 +171,7 @@ export default function PrivacyHandling({ setSettings, setStep }) {
                 your CCPA rights.
               </li>
             </ul>
-            <p className="text-white/80">
+            <p className="text-theme-text-secondary">
               <strong>Submitting a Request:</strong>
               <br />
               You may submit a request to know, delete, or correct your personal
@@ -177,20 +189,20 @@ export default function PrivacyHandling({ setSettings, setStep }) {
               making an erasure request, please include details of the
               information you would like erased.
             </p>
-            <p className="text-white/80">
+            <p className="text-theme-text-secondary">
               Please note that if you request that we remove your information,
               we may retain some of the information for specific reasons, such
               as to resolve disputes, troubleshoot problems, and as required by
               law. Some information may not be completely removed from our
               databases due to technical constraints and regular backups.
             </p>
-            <p className="text-white/80">
+            <p className="text-theme-text-secondary">
               We will not discriminate against you for exercising any of your
               CCPA rights.
             </p>
 
-            <h2 className="text-white mt-4">10. Contact Us</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">10. Contact Us</h2>
+            <p className="text-theme-text-secondary">
               If you have any questions or concerns about this Privacy Policy,
               please contact us at{" "}
               <a
@@ -202,16 +214,16 @@ export default function PrivacyHandling({ setSettings, setStep }) {
               .
             </p>
 
-            <h2 className="text-white mt-4">
+            <h2 className="text-theme-text-primary mt-4">
               11. Changes to This Privacy Policy
             </h2>
-            <p className="text-white/80">
+            <p className="text-theme-text-secondary">
               We may update this Privacy Policy from time to time. We will
               notify you of any changes by posting the new Privacy Policy on our
               website. You are advised to review this Privacy Policy
               periodically for any changes.
             </p>
-            <p className="text-white/80">
+            <p className="text-theme-text-secondary">
               By using our services, you agree to the terms of this Privacy
               Policy.
             </p>
diff --git a/frontend/src/pages/FineTuning/Steps/TermsAndConditions/index.jsx b/frontend/src/pages/FineTuning/Steps/TermsAndConditions/index.jsx
index c29e500d9..e1cb7b7e9 100644
--- a/frontend/src/pages/FineTuning/Steps/TermsAndConditions/index.jsx
+++ b/frontend/src/pages/FineTuning/Steps/TermsAndConditions/index.jsx
@@ -11,21 +11,25 @@ export default function TermsAndConditions({ setSettings, setStep }) {
 
   return (
     <div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
-      <div className="bg-[#303237] text-white rounded-xl flex-1 p-6">
+      <div className="bg-theme-bg-secondary rounded-xl flex-1 p-6">
         <div className="w-full flex flex-col gap-y-3 max-w-[700px]">
-          <h2 className="text-base text-white font-semibold">
+          <h2 className="text-base text-theme-text-primary font-semibold">
             Terms and Conditions
           </h2>
-          <p className="text-white/80 text-sm">
+          <p className="text-theme-text-secondary text-sm">
             Please accept the terms and conditions to continue with creation and
             ordering of a fine-tune model.
           </p>
-          <div className="flex flex-col gap-y-2 text-white/80 text-xs font-semibold rounded-lg p-4 h-[60vh] overflow-y-auto bg-dark-text mt-2">
-            <div className="text-xs text-white">
-              <h1>Mintplex Labs Inc. Fine-Tuning Terms of Service</h1>
-              <p>Last Updated: July 15, 2024</p>
+          <div className="flex flex-col gap-y-2 text-theme-text-secondary text-xs font-semibold rounded-lg p-4 h-[60vh] overflow-y-auto bg-theme-bg-container mt-2">
+            <div className="text-xs">
+              <h1 className="text-theme-text-primary">
+                Mintplex Labs Inc. Fine-Tuning Terms of Service
+              </h1>
+              <p className="text-theme-text-secondary">
+                Last Updated: July 15, 2024
+              </p>
             </div>
-            <p className="text-white/80">
+            <p className="text-theme-text-secondary">
               This Agreement is between Mintplex Labs Inc. ("Company") and the
               customer ("Customer") accessing or using the services provided by
               the Company. By signing up, accessing, or using the services,
@@ -33,16 +37,18 @@ export default function TermsAndConditions({ setSettings, setStep }) {
               be bound by the terms and conditions outlined below.
             </p>
 
-            <h2 className="text-white mt-4">1. Services Provided</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">
+              1. Services Provided
+            </h2>
+            <p className="text-theme-text-secondary">
               Mintplex Labs Inc. provides model fine-tuning services for
               customers. The deliverable for these services is a download link
               to the output ".GGUF" file that can be used by the Customer for
               Large-Language text inferencing.
             </p>
 
-            <h2 className="text-white mt-4">2. Payment Terms</h2>
-            <ul className="list-disc pl-5 text-white/80">
+            <h2 className="text-theme-text-primary mt-4">2. Payment Terms</h2>
+            <ul className="list-disc pl-5 text-theme-text-secondary">
               <li>
                 <strong>One-Time Payment:</strong> A one-time payment is
                 required before the execution of the training.
@@ -58,8 +64,8 @@ export default function TermsAndConditions({ setSettings, setStep }) {
               </li>
             </ul>
 
-            <h2 className="text-white mt-4">3. Order Form</h2>
-            <ul className="list-disc pl-5 text-white/80">
+            <h2 className="text-theme-text-primary mt-4">3. Order Form</h2>
+            <ul className="list-disc pl-5 text-theme-text-secondary">
               <li>
                 <strong>Service:</strong> Model fine-tuning
               </li>
@@ -71,59 +77,63 @@ export default function TermsAndConditions({ setSettings, setStep }) {
               </li>
             </ul>
 
-            <h2 className="text-white mt-4">4. Customer Responsibilities</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">
+              4. Customer Responsibilities
+            </h2>
+            <p className="text-theme-text-secondary">
               The Customer must provide all necessary data and information
               required for model fine-tuning.
             </p>
-            <p className="text-white/80">
+            <p className="text-theme-text-secondary">
               The Customer must ensure timely payment as per the terms mentioned
               above.
             </p>
-            <p className="text-white/80">
+            <p className="text-theme-text-secondary">
               The Customer understands the data collected for tuning will be
               stored to a private cloud storage location temporarily while
               training is in progress.
             </p>
-            <p className="text-white/80">
+            <p className="text-theme-text-secondary">
               The Customer understands the data collected for tuning will be
               fully deleted once the order is completed or canceled by the
               Company.
             </p>
-            <p className="text-white/80">
+            <p className="text-theme-text-secondary">
               The Customer understands and has reviewed the Privacy Policy for
               Fine-Tuning by the Company.
             </p>
 
-            <h2 className="text-white mt-4">5. Refund Policy</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">5. Refund Policy</h2>
+            <p className="text-theme-text-secondary">
               Refunds will be processed in the event of training failure or if
               the complete model file is not delivered to the Customer. Refunds
               will be issued to the original payment method within 30 days of
               the refund request.
             </p>
 
-            <h2 className="text-white mt-4">6. Governing Law</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">6. Governing Law</h2>
+            <p className="text-theme-text-secondary">
               This Agreement shall be governed by and construed in accordance
               with the laws of the State of California.
             </p>
 
-            <h2 className="text-white mt-4">7. Dispute Resolution</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">
+              7. Dispute Resolution
+            </h2>
+            <p className="text-theme-text-secondary">
               Any disputes arising out of or in connection with this Agreement
               shall be resolved in the state or federal courts located in
               California.
             </p>
 
-            <h2 className="text-white mt-4">8. Notices</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">8. Notices</h2>
+            <p className="text-theme-text-secondary">
               All notices under this Agreement shall be in writing and shall be
               deemed given when delivered personally, sent by confirmed email,
               or sent by certified or registered mail, return receipt requested,
               and addressed to the respective parties as follows:
             </p>
-            <p className="text-white/80">
+            <p className="text-theme-text-secondary">
               For Company:{" "}
               <a
                 href="mailto:team@mintplexlabs.com"
@@ -132,20 +142,20 @@ export default function TermsAndConditions({ setSettings, setStep }) {
                 team@mintplexlabs.com
               </a>
             </p>
-            <p className="text-white/80">
+            <p className="text-theme-text-secondary">
               For Customer: The main email address on Customer's account
             </p>
 
-            <h2 className="text-white mt-4">9. Amendments</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">9. Amendments</h2>
+            <p className="text-theme-text-secondary">
               The Company reserves the right to amend these terms at any time by
               providing notice to the Customer. The Customer's continued use of
               the services after such amendments will constitute acceptance of
               the amended terms.
             </p>
 
-            <h2 className="text-white mt-4">10. Indemnity</h2>
-            <p className="text-white/80">
+            <h2 className="text-theme-text-primary mt-4">10. Indemnity</h2>
+            <p className="text-theme-text-secondary">
               The Customer agrees to indemnify, defend, and hold harmless
               Mintplex Labs Inc., its affiliates, and their respective officers,
               directors, employees, agents, and representatives from and against
diff --git a/frontend/src/pages/FineTuning/Steps/index.jsx b/frontend/src/pages/FineTuning/Steps/index.jsx
index 7cf74263f..05237e3aa 100644
--- a/frontend/src/pages/FineTuning/Steps/index.jsx
+++ b/frontend/src/pages/FineTuning/Steps/index.jsx
@@ -133,7 +133,7 @@ export function FineTuningCreationLayout({ setStep, children }) {
   return (
     <div
       id="fine-tune-create-order-container"
-      className="w-screen h-screen overflow-hidden bg-sidebar flex md:mt-0 mt-6"
+      className="w-screen h-screen overflow-hidden bg-theme-bg-container flex md:mt-0 mt-6"
     >
       <Sidebar />
       <div
diff --git a/frontend/src/pages/FineTuning/index.jsx b/frontend/src/pages/FineTuning/index.jsx
index ceb29862a..cd47f035e 100644
--- a/frontend/src/pages/FineTuning/index.jsx
+++ b/frontend/src/pages/FineTuning/index.jsx
@@ -7,7 +7,7 @@ function SideBarSelection({ setStep, currentStep }) {
   const currentIndex = Object.keys(FineTuningSteps).indexOf(currentStep);
   return (
     <div
-      className={`bg-white/5 text-white rounded-xl py-1 px-4 ${
+      className={`bg-white/5 light:bg-white text-theme-text-primary rounded-xl py-1 px-4 shadow-lg ${
         isMobile ? "w-full" : "min-w-[360px] w-fit"
       }`}
     >
@@ -23,18 +23,20 @@ function SideBarSelection({ setStep, currentStep }) {
             className={[
               "py-3 flex items-center justify-between transition-all duration-300",
               isSelected ? "rounded-t-xl" : "",
-              isLast ? "" : "border-b border-white/10",
+              isLast
+                ? ""
+                : "border-b border-white/10 light:border-[#026AA2]/10",
             ].join(" ")}
           >
             {isDone || isSelected ? (
               <button
                 onClick={() => setStep(stepKey)}
-                className="border-none hover:underline text-sm font-medium"
+                className="border-none hover:underline text-sm font-medium text-theme-text-primary"
               >
                 {props.name}
               </button>
             ) : (
-              <div className="text-sm text-white/40 font-medium">
+              <div className="text-sm text-theme-text-secondary font-medium">
                 {props.name}
               </div>
             )}
@@ -45,7 +47,7 @@ function SideBarSelection({ setStep, currentStep }) {
                 </div>
               ) : (
                 <div
-                  className={`w-[14px] h-[14px] rounded-full border border-white ${
+                  className={`w-[14px] h-[14px] rounded-full border border-theme-text-primary ${
                     isSelected ? "animate-pulse" : "opacity-50"
                   }`}
                 />
@@ -69,14 +71,14 @@ export default function FineTuningFlow() {
       {(settings, setSettings, setStep) => (
         <div className="flex-1 flex h-full">
           <div className="flex flex-col gap-y-[18px] p-4 mt-10 w-[360px] flex-shrink-0">
-            <div className="text-white flex items-center gap-x-2">
+            <div className="text-theme-text-primary flex items-center gap-x-2">
               <Sparkle size={24} />
               <p className="text-lg font-medium">Custom Fine-Tuned Model</p>
             </div>
             <SideBarSelection setStep={setStep} currentStep={step} />
           </div>
           <div className="flex-1 overflow-y-auto p-4 mt-10 pb-[74px] h-screen">
-            <div className=" ml-8">
+            <div className="ml-8">
               {StepPage.component({ settings, setSettings, setStep })}
             </div>
           </div>
diff --git a/frontend/src/pages/GeneralSettings/ApiKeys/ApiKeyRow/index.jsx b/frontend/src/pages/GeneralSettings/ApiKeys/ApiKeyRow/index.jsx
index 17ca02506..9168cbe4c 100644
--- a/frontend/src/pages/GeneralSettings/ApiKeys/ApiKeyRow/index.jsx
+++ b/frontend/src/pages/GeneralSettings/ApiKeys/ApiKeyRow/index.jsx
@@ -59,13 +59,13 @@ export default function ApiKeyRow({ apiKey }) {
           <button
             onClick={copyApiKey}
             disabled={copied}
-            className="font-medium text-blue-300 rounded-lg hover:text-white hover:text-opacity-60 hover:underline"
+            className="font-medium text-blue-300 rounded-lg hover:text-white hover:light:text-blue-500 hover:text-opacity-60 hover:underline"
           >
             {copied ? "Copied" : "Copy API Key"}
           </button>
           <button
             onClick={handleDelete}
-            className="font-medium px-2 py-1 rounded-lg hover:bg-sidebar-gradient text-white hover:text-white/80 hover:bg-opacity-20"
+            className="font-medium px-2 py-1 rounded-lg text-theme-text-primary hover:text-red-500"
           >
             <Trash className="h-5 w-5" />
           </button>
diff --git a/frontend/src/pages/GeneralSettings/ApiKeys/NewApiKeyModal/index.jsx b/frontend/src/pages/GeneralSettings/ApiKeys/NewApiKeyModal/index.jsx
index cde8bdbe6..dbf2f31c3 100644
--- a/frontend/src/pages/GeneralSettings/ApiKeys/NewApiKeyModal/index.jsx
+++ b/frontend/src/pages/GeneralSettings/ApiKeys/NewApiKeyModal/index.jsx
@@ -36,34 +36,35 @@ export default function NewApiKeyModal({ closeModal }) {
   }, [copied]);
 
   return (
-    <div className="relative w-[500px] max-w-2xl max-h-full">
-      <div className="relative bg-main-gradient rounded-lg shadow">
-        <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
-          <h3 className="text-xl font-semibold text-white">
-            Create new API key
-          </h3>
+    <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
+      <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
+        <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+          <div className="w-full flex gap-x-2 items-center">
+            <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+              Create new API key
+            </h3>
+          </div>
           <button
             onClick={closeModal}
             type="button"
-            className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
-            data-modal-hide="staticModal"
+            className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
           >
-            <X className="text-gray-300 text-lg" />
+            <X size={24} weight="bold" className="text-white" />
           </button>
         </div>
-        <form onSubmit={handleCreate}>
-          <div className="p-6 space-y-6 flex h-full w-full">
-            <div className="w-full flex flex-col gap-y-4">
+        <div className="px-7 py-6">
+          <form onSubmit={handleCreate}>
+            <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
               {error && <p className="text-red-400 text-sm">Error: {error}</p>}
               {apiKey && (
                 <input
                   type="text"
                   defaultValue={`${apiKey.secret}`}
                   disabled={true}
-                  className="rounded-lg px-4 py-2 text-white bg-zinc-900 border border-gray-500/50"
+                  className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                 />
               )}
-              <p className="text-white text-xs md:text-sm">
+              <p className="text-white text-opacity-60 text-xs md:text-sm">
                 Once created the API key can be used to programmatically access
                 and configure this AnythingLLM instance.
               </p>
@@ -76,36 +77,36 @@ export default function NewApiKeyModal({ closeModal }) {
                 Read the API documentation &rarr;
               </a>
             </div>
-          </div>
-          <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
-            {!apiKey ? (
-              <>
+            <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
+              {!apiKey ? (
+                <>
+                  <button
+                    onClick={closeModal}
+                    type="button"
+                    className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+                  >
+                    Create API key
+                  </button>
+                </>
+              ) : (
                 <button
-                  onClick={closeModal}
+                  onClick={copyApiKey}
                   type="button"
-                  className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300"
+                  disabled={copied}
+                  className="w-full transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
                 >
-                  Cancel
+                  {copied ? "Copied API key" : "Copy API key"}
                 </button>
-                <button
-                  type="submit"
-                  className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-                >
-                  Create API key
-                </button>
-              </>
-            ) : (
-              <button
-                onClick={copyApiKey}
-                type="button"
-                disabled={copied}
-                className="w-full transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800 text-center justify-center"
-              >
-                {copied ? "Copied API key" : "Copy API key"}
-              </button>
-            )}
-          </div>
-        </form>
+              )}
+            </div>
+          </form>
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx b/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
index 3aa17b4bf..60bdbe173 100644
--- a/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
+++ b/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
@@ -19,38 +19,43 @@ export default function AdminApiKeys() {
   const { isOpen, openModal, closeModal } = useModal();
   const { t } = useTranslation();
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
       >
         <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16">
-          <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
+          <div className="w-full flex flex-col gap-y-1 pb-6 border-white/10 border-b-2">
             <div className="items-center flex gap-x-4">
-              <p className="text-lg leading-6 font-bold text-white">
+              <p className="text-lg leading-6 font-bold text-theme-text-primary">
                 {t("api.title")}
               </p>
             </div>
-            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
+            <p className="text-xs leading-[18px] font-base text-theme-text-secondary mt-2">
               {t("api.description")}
             </p>
             <a
               href={paths.apiDocs()}
               target="_blank"
               rel="noreferrer"
-              className="text-xs leading-[18px] font-base text-blue-300 hover:underline"
+              className="text-xs leading-[18px] font-base text-blue-300 light:text-blue-500 hover:underline mt-1"
             >
               {t("api.link")} &rarr;
             </a>
           </div>
           <div className="w-full justify-end flex">
-            <CTAButton onClick={openModal} className="mt-3 mr-0 -mb-14 z-10">
+            <CTAButton
+              onClick={openModal}
+              className="mt-3 mr-0 mb-4 md:-mb-14 z-10"
+            >
               <PlusCircle className="h-4 w-4" weight="bold" />{" "}
               {t("api.generate")}
             </CTAButton>
           </div>
-          <ApiKeysContainer />
+          <div className="overflow-x-auto mt-6">
+            <ApiKeysContainer />
+          </div>
         </div>
         <ModalWrapper isOpen={isOpen}>
           <NewApiKeyModal closeModal={closeModal} />
@@ -81,18 +86,18 @@ function ApiKeysContainer() {
       <Skeleton.default
         height="80vh"
         width="100%"
-        highlightColor="#3D4147"
-        baseColor="#2C2F35"
+        highlightColor="var(--theme-bg-primary)"
+        baseColor="var(--theme-bg-secondary)"
         count={1}
-        className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
+        className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm"
         containerClassName="flex w-full"
       />
     );
   }
 
   return (
-    <table className="w-full text-sm text-left rounded-lg mt-6">
-      <thead className="text-white text-opacity-80 text-xs leading-[18px] font-bold uppercase border-white border-b border-opacity-60">
+    <table className="w-full text-sm text-left rounded-lg min-w-[640px]">
+      <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
         <tr>
           <th scope="col" className="px-6 py-3 rounded-tl-lg">
             {t("api.table.key")}
diff --git a/frontend/src/pages/GeneralSettings/Appearance/CustomAppName/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/CustomAppName/index.jsx
index 48efa5087..5f3387dbf 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/CustomAppName/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/CustomAppName/index.jsx
@@ -70,7 +70,7 @@ export default function CustomAppName() {
         <input
           name="customAppName"
           type="text"
-          className="bg-zinc-900 mt-3 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 max-w-[275px] placeholder:text-white/20"
+          className="bg-theme-settings-input-bg mt-3 text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5 max-w-[275px] placeholder:text-theme-settings-input-placeholder"
           placeholder="AnythingLLM"
           required={true}
           autoComplete="off"
diff --git a/frontend/src/pages/GeneralSettings/Appearance/CustomLogo/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/CustomLogo/index.jsx
index c0d230d5a..7dc6e21cb 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/CustomLogo/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/CustomLogo/index.jsx
@@ -71,10 +71,10 @@ export default function CustomLogo() {
   return (
     <div className="mt-6 mb-8">
       <div className="flex flex-col gap-y-1">
-        <h2 className="text-base leading-6 font-bold text-white">
+        <h2 className="text-base leading-6 font-bold text-theme-text-primary">
           {t("appearance.logo.title")}
         </h2>
-        <p className="text-xs leading-[18px] font-base text-white/60">
+        <p className="text-xs leading-[18px] font-base text-theme-text-secondary">
           {t("appearance.logo.description")}
         </p>
       </div>
@@ -93,17 +93,17 @@ export default function CustomLogo() {
                 onChange={handleFileUpload}
               />
               <div
-                className="w-80 py-4 bg-zinc-900/50 rounded-2xl border-2 border-dashed border-white border-opacity-60 justify-center items-center inline-flex cursor-pointer"
+                className="w-80 py-4 bg-theme-settings-input-bg rounded-2xl border-2 border-dashed border-theme-text-secondary border-opacity-60 justify-center items-center inline-flex cursor-pointer"
                 htmlFor="logo-upload"
               >
                 <div className="flex flex-col items-center justify-center">
                   <div className="rounded-full bg-white/40">
                     <Plus className="w-6 h-6 text-black/80 m-2" />
                   </div>
-                  <div className="text-white text-opacity-80 text-sm font-semibold py-1">
+                  <div className="text-theme-text-primary text-opacity-80 text-sm font-semibold py-1">
                     {t("appearance.logo.add")}
                   </div>
-                  <div className="text-white text-opacity-60 text-xs font-medium py-1">
+                  <div className="text-theme-text-secondary text-opacity-60 text-xs font-medium py-1">
                     {t("appearance.logo.recommended")}
                   </div>
                 </div>
@@ -117,13 +117,13 @@ export default function CustomLogo() {
             <img
               src={logo}
               alt="Uploaded Logo"
-              className="w-full h-full object-cover border-2 border-white/20 border-dashed p-1 rounded-2xl"
+              className="w-full h-full object-cover border-2 border-theme-text-secondary border-opacity-60 p-1 rounded-2xl"
             />
 
             <div className="absolute w-80 top-0 left-0 right-0 bottom-0 flex flex-col gap-y-3 justify-center items-center rounded-2xl mt-3 bg-black bg-opacity-80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out border-2 border-transparent hover:border-white">
               <button
                 onClick={triggerFileInputClick}
-                className="text-white text-base font-medium hover:text-opacity-60 mx-2"
+                className="text-[#FFFFFF] text-base font-medium hover:text-opacity-60 mx-2"
               >
                 {t("appearance.logo.replace")}
               </button>
@@ -138,7 +138,7 @@ export default function CustomLogo() {
               />
               <button
                 onClick={handleRemoveLogo}
-                className="text-white text-base font-medium hover:text-opacity-60 mx-2"
+                className="text-[#FFFFFF] text-base font-medium hover:text-opacity-60 mx-2"
               >
                 {t("appearance.logo.remove")}
               </button>
diff --git a/frontend/src/pages/GeneralSettings/Appearance/CustomMessages/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/CustomMessages/index.jsx
index 6165501a2..84e35b22b 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/CustomMessages/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/CustomMessages/index.jsx
@@ -64,7 +64,7 @@ export default function CustomMessages() {
           {t("appearance.message.description")}
         </p>
       </div>
-      <div className="mt-3 flex flex-col gap-y-6 bg-dark-highlight rounded-lg pr-[31px] pl-[12px] pt-4 max-w-[700px]">
+      <div className="mt-3 flex flex-col gap-y-6 bg-theme-settings-input-bg rounded-lg pr-[31px] pl-[12px] pt-4 max-w-[700px]">
         {messages.map((message, index) => (
           <div key={index} className="flex flex-col gap-y-2">
             {message.user && (
@@ -89,7 +89,7 @@ export default function CustomMessages() {
         ))}
         <div className="flex gap-4 mt-12 justify-between pb-[15px]">
           <button
-            className="self-end text-white hover:text-white/60 transition"
+            className="self-end text-white hover:text-white/60 light:hover:text-black/60 transition"
             onClick={() => addMessage("response")}
           >
             <div className="flex items-center justify-start text-sm font-normal -ml-2">
@@ -104,7 +104,7 @@ export default function CustomMessages() {
             </div>
           </button>
           <button
-            className="self-end text-white hover:text-white/60 transition"
+            className="self-end text-white hover:text-white/60 light:hover:text-black/60 transition"
             onClick={() => addMessage("user")}
           >
             <div className="flex items-center justify-start text-sm font-normal">
diff --git a/frontend/src/pages/GeneralSettings/Appearance/CustomSiteSettings/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/CustomSiteSettings/index.jsx
index c68d53681..c4b766c62 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/CustomSiteSettings/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/CustomSiteSettings/index.jsx
@@ -61,7 +61,7 @@ export default function CustomSiteSettings() {
             <input
               name="meta_page_title"
               type="text"
-              className="border-none bg-zinc-900 mt-3 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 max-w-[400px] placeholder:text-white/20"
+              className="border-none bg-theme-settings-input-bg mt-3 text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5 max-w-[400px] placeholder:text-theme-settings-input-placeholder"
               placeholder="AnythingLLM | Your personal LLM trained on anything"
               autoComplete="off"
               onChange={(e) => {
@@ -93,7 +93,7 @@ export default function CustomSiteSettings() {
             <input
               name="meta_page_favicon"
               type="url"
-              className="border-none bg-zinc-900 mt-3 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 max-w-[400px] placeholder:text-white/20"
+              className="border-none bg-theme-settings-input-bg mt-3 text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5 max-w-[400px] placeholder:text-theme-settings-input-placeholder"
               placeholder="url to your image"
               onChange={(e) => {
                 setSettings((prev) => {
@@ -109,7 +109,7 @@ export default function CustomSiteSettings() {
         {hasChanges && (
           <button
             type="submit"
-            className="border-none transition-all mt-6 w-fit duration-300 border border-slate-200 px-5 py-2.5 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
+            className="transition-all mt-6 w-fit duration-300 border border-slate-200 px-5 py-2.5 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
           >
             Save
           </button>
diff --git a/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx
index 9f504f29a..c83b4859c 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx
@@ -56,26 +56,28 @@ export default function NewIconForm({ icon, url, onSave, onRemove }) {
     <form onSubmit={handleSubmit} className="flex items-center gap-x-1.5">
       <div className="relative" ref={dropdownRef}>
         <div
-          className="h-[34px] w-[34px] bg-dark-highlight rounded-full flex items-center justify-center cursor-pointer hover:outline-primary-button hover:outline"
+          className="h-[34px] w-[34px] bg-theme-settings-input-bg rounded-full flex items-center justify-center cursor-pointer hover:outline-primary-button hover:outline"
           onClick={() => setIsDropdownOpen(!isDropdownOpen)}
         >
           {React.createElement(ICON_COMPONENTS[selectedIcon] || Plus, {
-            className: "h-5 w-5 text-white",
+            className: "h-5 w-5",
             weight: selectedIcon === "Plus" ? "bold" : "fill",
+            color: "var(--theme-sidebar-footer-icon-fill)",
           })}
         </div>
         {isDropdownOpen && (
-          <div className="absolute z-10 grid grid-cols-4 bg-[#41444C] mt-2 rounded-md w-[150px] h-[78px] overflow-y-auto border border-white/20 shadow-lg">
+          <div className="absolute z-10 grid grid-cols-4 bg-theme-settings-input-bg mt-2 rounded-md w-[150px] h-[78px] overflow-y-auto border border-white/20 shadow-lg">
             {Object.keys(ICON_COMPONENTS).map((iconName) => (
               <button
                 key={iconName}
                 type="button"
-                className="flex justify-center items-center border border-transparent hover:bg-dark-highlight hover:border-slate-100 rounded-full p-2"
+                className="flex justify-center items-center border border-transparent hover:bg-theme-sidebar-footer-icon-hover hover:border-slate-100 light:hover:border-black/80 rounded-full p-2"
                 onClick={() => handleIconChange(iconName)}
               >
                 {React.createElement(ICON_COMPONENTS[iconName], {
-                  className: "h-5 w-5 text-white",
+                  className: "h-5 w-5",
                   weight: "fill",
+                  color: "var(--theme-sidebar-footer-icon-fill)",
                 })}
               </button>
             ))}
@@ -87,7 +89,7 @@ export default function NewIconForm({ icon, url, onSave, onRemove }) {
         value={selectedUrl}
         onChange={handleUrlChange}
         placeholder="https://example.com"
-        className="bg-zinc-900 text-white placeholder-white/20 text-sm rounded-md p-2.5 w-[300px] h-[32px] focus:outline-primary-button active:outline-primary-button outline-none"
+        className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-md p-2.5 w-[300px] h-[32px] focus:outline-primary-button active:outline-primary-button outline-none"
         required
       />
       {selectedIcon !== "Plus" && (
diff --git a/frontend/src/pages/GeneralSettings/Appearance/LanguagePreference/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/LanguagePreference/index.jsx
index 8e58706b0..8845978c9 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/LanguagePreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/LanguagePreference/index.jsx
@@ -10,7 +10,7 @@ export default function LanguagePreference() {
 
   return (
     <>
-      <div className="flex flex-col gap-y-1">
+      <div className="flex flex-col gap-y-1 mt-6">
         <h2 className="text-base leading-6 font-bold text-white">
           Display Language
         </h2>
@@ -22,7 +22,7 @@ export default function LanguagePreference() {
       <div className="flex items-center gap-x-4">
         <select
           name="userLang"
-          className="bg-zinc-900 w-fit mt-2 px-4 border-gray-500 text-white text-sm rounded-lg block py-2"
+          className="bg-theme-settings-input-bg w-fit mt-2 px-4 border-gray-500 text-white text-sm rounded-lg block py-2"
           defaultValue={currentLanguage || "en"}
           onChange={(e) => changeLanguage(e.target.value)}
         >
diff --git a/frontend/src/pages/GeneralSettings/Appearance/SupportEmail/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/SupportEmail/index.jsx
index 8a50c73f9..539618658 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/SupportEmail/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/SupportEmail/index.jsx
@@ -66,7 +66,7 @@ export default function SupportEmail() {
         <input
           name="supportEmail"
           type="email"
-          className="bg-zinc-900 mt-3 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 max-w-[275px] placeholder:text-white/20"
+          className="bg-theme-settings-input-bg mt-3 text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5 max-w-[275px] placeholder:text-theme-settings-input-placeholder"
           placeholder="support@mycompany.com"
           required={true}
           autoComplete="off"
diff --git a/frontend/src/pages/GeneralSettings/Appearance/ThemePreference/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/ThemePreference/index.jsx
new file mode 100644
index 000000000..44d79e542
--- /dev/null
+++ b/frontend/src/pages/GeneralSettings/Appearance/ThemePreference/index.jsx
@@ -0,0 +1,27 @@
+import { useTheme } from "@/hooks/useTheme";
+
+export default function ThemePreference() {
+  const { theme, setTheme, availableThemes } = useTheme();
+
+  return (
+    <div className="flex flex-col gap-y-1 mt-4">
+      <h2 className="text-base leading-6 font-bold text-white">Theme</h2>
+      <p className="text-xs leading-[18px] font-base text-white/60">
+        Select your preferred theme for the application.
+      </p>
+      <div className="flex items-center gap-x-4">
+        <select
+          value={theme}
+          onChange={(e) => setTheme(e.target.value)}
+          className="border-none bg-theme-settings-input-bg mt-2 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-fit py-2 px-4"
+        >
+          {Object.entries(availableThemes).map(([key, value]) => (
+            <option key={key} value={key}>
+              {value}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/GeneralSettings/Appearance/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/index.jsx
index afb244395..00a415bb2 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/index.jsx
@@ -9,18 +9,20 @@ import CustomAppName from "./CustomAppName";
 import LanguagePreference from "./LanguagePreference";
 import CustomSiteSettings from "./CustomSiteSettings";
 import ShowScrollbar from "./ShowScrollbar";
+import ThemePreference from "./ThemePreference";
 
 export default function Appearance() {
   const { t } = useTranslation();
+
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
       >
         <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
-          <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
+          <div className="w-full flex flex-col gap-y-1 pb-6 border-white light:border-theme-sidebar-border border-b-2 border-opacity-10">
             <div className="items-center">
               <p className="text-lg leading-6 font-bold text-white">
                 {t("appearance.title")}
@@ -30,6 +32,7 @@ export default function Appearance() {
               {t("appearance.description")}
             </p>
           </div>
+          <ThemePreference />
           <LanguagePreference />
           <ShowScrollbar />
           <CustomLogo />
diff --git a/frontend/src/pages/GeneralSettings/AudioPreference/index.jsx b/frontend/src/pages/GeneralSettings/AudioPreference/index.jsx
index c4abaf546..f0a88941b 100644
--- a/frontend/src/pages/GeneralSettings/AudioPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/AudioPreference/index.jsx
@@ -20,12 +20,12 @@ export default function AudioPreference() {
   }, []);
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
       <Sidebar />
       {loading ? (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
         >
           <div className="w-full h-full flex justify-center items-center">
             <PreLoader />
@@ -34,7 +34,7 @@ export default function AudioPreference() {
       ) : (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
         >
           <SpeechToTextProvider settings={settings} />
           <TextToSpeechProvider settings={settings} />
diff --git a/frontend/src/pages/GeneralSettings/AudioPreference/stt.jsx b/frontend/src/pages/GeneralSettings/AudioPreference/stt.jsx
index 85a9acd17..9745e4253 100644
--- a/frontend/src/pages/GeneralSettings/AudioPreference/stt.jsx
+++ b/frontend/src/pages/GeneralSettings/AudioPreference/stt.jsx
@@ -77,7 +77,7 @@ export default function SpeechToTextProvider({ settings }) {
   return (
     <form onSubmit={handleSubmit} className="flex w-full">
       <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16">
-        <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
+        <div className="w-full flex flex-col gap-y-1 pb-6 border-white light:border-theme-sidebar-border border-b-2 border-opacity-10">
           <div className="flex gap-x-4 items-center">
             <p className="text-lg leading-6 font-bold text-white">
               Speech-to-text Preference
@@ -109,20 +109,20 @@ export default function SpeechToTextProvider({ settings }) {
             />
           )}
           {searchMenuOpen ? (
-            <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
+            <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-theme-settings-input-bg rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
               <div className="w-full flex flex-col gap-y-1">
-                <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
+                <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-theme-settings-input-bg">
                   <MagnifyingGlass
                     size={20}
                     weight="bold"
-                    className="absolute left-4 z-30 text-white -ml-4 my-2"
+                    className="absolute left-4 z-30 text-theme-text-primary -ml-4 my-2"
                   />
                   <input
                     type="text"
                     name="stt-provider-search"
                     autoComplete="off"
                     placeholder="Search speech to text providers"
-                    className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none text-white placeholder:text-white placeholder:font-medium"
+                    className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none text-theme-text-primary placeholder:text-theme-text-primary placeholder:font-medium"
                     onChange={(e) => setSearchQuery(e.target.value)}
                     ref={searchInputRef}
                     onKeyDown={(e) => {
@@ -153,7 +153,7 @@ export default function SpeechToTextProvider({ settings }) {
             </div>
           ) : (
             <button
-              className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
+              className="w-full max-w-[640px] h-[64px] bg-theme-settings-input-bg rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
               type="button"
               onClick={() => setSearchMenuOpen(true)}
             >
diff --git a/frontend/src/pages/GeneralSettings/AudioPreference/tts.jsx b/frontend/src/pages/GeneralSettings/AudioPreference/tts.jsx
index f337dc01d..07e210273 100644
--- a/frontend/src/pages/GeneralSettings/AudioPreference/tts.jsx
+++ b/frontend/src/pages/GeneralSettings/AudioPreference/tts.jsx
@@ -115,7 +115,7 @@ export default function TextToSpeechProvider({ settings }) {
   return (
     <form onSubmit={handleSubmit} className="flex w-full">
       <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16">
-        <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
+        <div className="w-full flex flex-col gap-y-1 pb-6 border-white light:border-theme-sidebar-border border-b-2 border-opacity-10">
           <div className="flex gap-x-4 items-center">
             <p className="text-lg leading-6 font-bold text-white">
               Text-to-speech Preference
@@ -144,20 +144,20 @@ export default function TextToSpeechProvider({ settings }) {
             />
           )}
           {searchMenuOpen ? (
-            <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
+            <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-theme-settings-input-bg rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
               <div className="w-full flex flex-col gap-y-1">
-                <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
+                <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-theme-settings-input-bg">
                   <MagnifyingGlass
                     size={20}
                     weight="bold"
-                    className="absolute left-4 z-30 text-white -ml-4 my-2"
+                    className="absolute left-4 z-30 text-theme-text-primary -ml-4 my-2"
                   />
                   <input
                     type="text"
                     name="tts-provider-search"
                     autoComplete="off"
                     placeholder="Search text to speech providers"
-                    className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none text-white placeholder:text-white placeholder:font-medium"
+                    className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none text-theme-text-primary placeholder:text-theme-text-primary placeholder:font-medium"
                     onChange={(e) => setSearchQuery(e.target.value)}
                     ref={searchInputRef}
                     onKeyDown={(e) => {
@@ -188,7 +188,7 @@ export default function TextToSpeechProvider({ settings }) {
             </div>
           ) : (
             <button
-              className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
+              className="w-full max-w-[640px] h-[64px] bg-theme-settings-input-bg rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
               type="button"
               onClick={() => setSearchMenuOpen(true)}
             >
diff --git a/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/BrowserExtensionApiKeyRow/index.jsx b/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/BrowserExtensionApiKeyRow/index.jsx
index 8017aa4b2..fdd595a86 100644
--- a/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/BrowserExtensionApiKeyRow/index.jsx
+++ b/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/BrowserExtensionApiKeyRow/index.jsx
@@ -67,7 +67,7 @@ export default function BrowserExtensionApiKeyRow({
             onClick={handleCopy}
             data-tooltip-id="copy-connection-text"
             data-tooltip-content="Copy connection string"
-            className="text-white hover:text-white/80 transition-colors duration-200 p-1 rounded"
+            className="text-theme-text-primary hover:text-theme-text-secondary transition-colors duration-200 p-1 rounded"
           >
             {copied ? (
               <Check className="h-5 w-5 text-green-500" />
@@ -80,7 +80,7 @@ export default function BrowserExtensionApiKeyRow({
             onClick={handleConnect}
             data-tooltip-id="auto-connection"
             data-tooltip-content="Automatically connect to extension"
-            className="text-white hover:text-white/80 transition-colors duration-200 p-1 rounded"
+            className="text-theme-text-primary hover:text-theme-text-secondary transition-colors duration-200 p-1 rounded"
           >
             <Plug className="h-5 w-5" />
           </button>
@@ -97,7 +97,7 @@ export default function BrowserExtensionApiKeyRow({
       <td className="px-6 py-4">
         <button
           onClick={handleRevoke}
-          className="font-medium px-2 py-1 rounded-lg hover:bg-sidebar-gradient text-white hover:text-white/80 hover:bg-opacity-20"
+          className="font-medium px-2 py-1 rounded-lg text-theme-text-primary hover:text-red-500"
         >
           <Trash className="h-5 w-5" />
         </button>
diff --git a/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/NewBrowserExtensionApiKeyModal/index.jsx b/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/NewBrowserExtensionApiKeyModal/index.jsx
index ee3f86786..f5618bae0 100644
--- a/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/NewBrowserExtensionApiKeyModal/index.jsx
+++ b/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/NewBrowserExtensionApiKeyModal/index.jsx
@@ -48,79 +48,81 @@ export default function NewBrowserExtensionApiKeyModal({
   }, [copied]);
 
   return (
-    <div className="relative w-[500px] max-w-2xl max-h-full">
-      <div className="relative bg-main-gradient rounded-lg shadow">
-        <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
-          <h3 className="text-xl font-semibold text-white">
-            New Browser Extension API Key
-          </h3>
+    <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
+      <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
+        <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+          <div className="w-full flex gap-x-2 items-center">
+            <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+              New Browser Extension API Key
+            </h3>
+          </div>
           <button
             onClick={closeModal}
             type="button"
-            className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border border-none cursor-pointer"
+            className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
           >
-            <X className="text-gray-300 text-lg" />
+            <X size={24} weight="bold" className="text-white" />
           </button>
         </div>
-        <form onSubmit={handleCreate}>
-          <div className="p-6 space-y-6 flex h-full w-full">
-            <div className="w-full flex flex-col gap-y-4">
+        <div className="px-7 py-6">
+          <form onSubmit={handleCreate}>
+            <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
               {error && <p className="text-red-400 text-sm">Error: {error}</p>}
               {apiKey && (
                 <input
                   type="text"
                   defaultValue={apiKey}
                   disabled={true}
-                  className="rounded-lg px-4 py-2 text-white bg-zinc-900 border border-gray-500/50 border-none"
+                  className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg block w-full p-2.5"
                 />
               )}
               {isMultiUser && (
-                <p className="text-yellow-300 text-xs md:text-sm font-semibold">
+                <p className="text-yellow-300 light:text-orange-500 text-xs md:text-sm font-semibold">
                   Warning: You are in multi-user mode, this API key will allow
                   access to all workspaces associated with your account. Please
                   share it cautiously.
                 </p>
               )}
-              <p className="text-white text-xs md:text-sm">
+              <p className="text-white text-opacity-60 text-xs md:text-sm">
                 After clicking "Create API Key", AnythingLLM will attempt to
                 connect to your browser extension automatically.
               </p>
-              <p className="text-white text-xs md:text-sm">
+              <p className="text-white text-opacity-60 text-xs md:text-sm">
                 If you see "Connected to AnythingLLM" in the extension, the
                 connection was successful. If not, please copy the connection
                 string and paste it into the extension manually.
               </p>
             </div>
-          </div>
-          <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
-            {!apiKey ? (
-              <>
+            <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
+              {!apiKey ? (
+                <>
+                  <button
+                    onClick={closeModal}
+                    type="button"
+                    className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+                  >
+                    Create API Key
+                  </button>
+                </>
+              ) : (
                 <button
-                  onClick={closeModal}
+                  onClick={copyApiKey}
                   type="button"
-                  className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300 border-none"
+                  disabled={copied}
+                  className="w-full transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm cursor-pointer"
                 >
-                  Cancel
+                  {copied ? "API Key Copied!" : "Copy API Key"}
                 </button>
-                <button
-                  type="submit"
-                  className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800 border-none"
-                >
-                  Create API Key
-                </button>
-              </>
-            ) : (
-              <button
-                onClick={copyApiKey}
-                type="button"
-                disabled={copied}
-                className="w-full transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800 text-center justify-center border-none cursor-pointer"
-              >
-                {copied ? "API Key Copied!" : "Copy API Key"}
-              </button>
-            )}
-          </div>
-        </form>
+              )}
+            </div>
+          </form>
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/index.jsx b/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/index.jsx
index 2641aa64a..363d5860a 100644
--- a/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/index.jsx
+++ b/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/index.jsx
@@ -40,86 +40,91 @@ export default function BrowserExtensionApiKeys() {
   };
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
       >
         <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16">
-          <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
+          <div className="w-full flex flex-col gap-y-1 pb-6 border-white/10 border-b-2">
             <div className="items-center flex gap-x-4">
-              <p className="text-lg leading-6 font-bold text-white">
+              <p className="text-lg leading-6 font-bold text-theme-text-primary">
                 Browser Extension API Keys
               </p>
             </div>
-            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
+            <p className="text-xs leading-[18px] font-base text-theme-text-secondary mt-2">
               Manage API keys for browser extensions connecting to your
               AnythingLLM instance.
             </p>
           </div>
           <div className="w-full justify-end flex">
-            <CTAButton onClick={openModal} className="mt-3 mr-0 -mb-6 z-10">
+            <CTAButton
+              onClick={openModal}
+              className="mt-3 mr-0 mb-4 md:-mb-14 z-10"
+            >
               <PlusCircle className="h-4 w-4" weight="bold" />
               Generate New API Key
             </CTAButton>
           </div>
-          {loading ? (
-            <Skeleton.default
-              height="80vh"
-              width="100%"
-              highlightColor="#3D4147"
-              baseColor="#2C2F35"
-              count={1}
-              className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
-              containerClassName="flex w-full"
-            />
-          ) : error ? (
-            <div className="text-red-500 mt-6">Error: {error}</div>
-          ) : (
-            <table className="w-full text-sm text-left rounded-lg mt-6">
-              <thead className="text-white text-opacity-80 text-xs leading-[18px] font-bold uppercase border-white border-b border-opacity-60">
-                <tr>
-                  <th scope="col" className="px-6 py-3 rounded-tl-lg">
-                    Extension Connection String
-                  </th>
-                  {isMultiUser && (
-                    <th scope="col" className="px-6 py-3">
-                      Created By
+          <div className="overflow-x-auto mt-6">
+            {loading ? (
+              <Skeleton.default
+                height="80vh"
+                width="100%"
+                highlightColor="var(--theme-bg-primary)"
+                baseColor="var(--theme-bg-secondary)"
+                count={1}
+                className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm"
+                containerClassName="flex w-full"
+              />
+            ) : error ? (
+              <div className="text-red-500 mt-6">Error: {error}</div>
+            ) : (
+              <table className="w-full text-sm text-left rounded-lg min-w-[640px] md:mt-6 mt-0">
+                <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
+                  <tr>
+                    <th scope="col" className="px-6 py-3 rounded-tl-lg">
+                      Extension Connection String
+                    </th>
+                    {isMultiUser && (
+                      <th scope="col" className="px-6 py-3">
+                        Created By
+                      </th>
+                    )}
+                    <th scope="col" className="px-6 py-3">
+                      Created At
+                    </th>
+                    <th scope="col" className="px-6 py-3 rounded-tr-lg">
+                      Actions
                     </th>
-                  )}
-                  <th scope="col" className="px-6 py-3">
-                    Created At
-                  </th>
-                  <th scope="col" className="px-6 py-3 rounded-tr-lg">
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {apiKeys.length === 0 ? (
-                  <tr className="bg-transparent text-white text-opacity-80 text-sm font-medium">
-                    <td
-                      colSpan={isMultiUser ? "4" : "3"}
-                      className="px-6 py-4 text-center"
-                    >
-                      No API keys found
-                    </td>
                   </tr>
-                ) : (
-                  apiKeys.map((apiKey) => (
-                    <BrowserExtensionApiKeyRow
-                      key={apiKey.id}
-                      apiKey={apiKey}
-                      removeApiKey={removeApiKey}
-                      connectionString={`${fullApiUrl()}|${apiKey.key}`}
-                      isMultiUser={isMultiUser}
-                    />
-                  ))
-                )}
-              </tbody>
-            </table>
-          )}
+                </thead>
+                <tbody>
+                  {apiKeys.length === 0 ? (
+                    <tr className="bg-transparent text-theme-text-secondary text-sm font-medium">
+                      <td
+                        colSpan={isMultiUser ? "4" : "3"}
+                        className="px-6 py-4 text-center"
+                      >
+                        No API keys found
+                      </td>
+                    </tr>
+                  ) : (
+                    apiKeys.map((apiKey) => (
+                      <BrowserExtensionApiKeyRow
+                        key={apiKey.id}
+                        apiKey={apiKey}
+                        removeApiKey={removeApiKey}
+                        connectionString={`${fullApiUrl()}|${apiKey.key}`}
+                        isMultiUser={isMultiUser}
+                      />
+                    ))
+                  )}
+                </tbody>
+              </table>
+            )}
+          </div>
         </div>
       </div>
       <ModalWrapper isOpen={isOpen}>
diff --git a/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx b/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx
index 4866b57c0..03acecfd9 100644
--- a/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Chats/ChatRow/index.jsx
@@ -69,7 +69,7 @@ export default function ChatRow({ chat, onDelete }) {
         <td className="px-6 py-4 flex items-center gap-x-6">
           <button
             onClick={handleDelete}
-            className="font-medium px-2 py-1 rounded-lg hover:bg-sidebar-gradient text-white hover:text-white/80 hover:bg-opacity-20"
+            className="font-medium px-2 py-1 rounded-lg text-theme-text-primary hover:text-red-500"
           >
             <Trash className="h-5 w-5" />
           </button>
@@ -90,19 +90,19 @@ export default function ChatRow({ chat, onDelete }) {
 const TextPreview = ({ text, closeModal }) => {
   return (
     <div className="relative w-full md:max-w-2xl max-h-full">
-      <div className="relative bg-main-gradient rounded-lg shadow">
-        <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-600">
+      <div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
+        <div className="flex items-center justify-between p-6 border-b rounded-t border-theme-modal-border">
           <h3 className="text-xl font-semibold text-white">Viewing Text</h3>
           <button
             onClick={closeModal}
             type="button"
-            className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+            className="bg-transparent rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
           >
-            <X className="text-gray-300 text-lg" />
+            <X className="text-white text-lg" />
           </button>
         </div>
         <div className="w-full p-6">
-          <pre className="w-full h-[200px] py-2 px-4 whitespace-pre-line overflow-auto rounded-lg bg-zinc-900 border border-gray-500 text-white text-sm">
+          <pre className="w-full h-[200px] py-2 px-4 whitespace-pre-line overflow-auto rounded-lg bg-zinc-900 light:bg-theme-bg-secondary border border-gray-500 text-white text-sm">
             {text}
           </pre>
         </div>
diff --git a/frontend/src/pages/GeneralSettings/Chats/index.jsx b/frontend/src/pages/GeneralSettings/Chats/index.jsx
index 01dc36122..deaea6eb4 100644
--- a/frontend/src/pages/GeneralSettings/Chats/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Chats/index.jsx
@@ -118,23 +118,23 @@ export default function WorkspaceChats() {
 
   return (
     <CanViewChatHistory>
-      <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+      <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
         <Sidebar />
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
         >
           <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16">
-            <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
-              <div className="flex gap-x-4 items-center">
-                <p className="text-lg leading-6 font-bold text-white">
+            <div className="w-full flex flex-col gap-y-1 pb-6 border-white/10 border-b-2">
+              <div className="flex flex-wrap gap-4 items-center">
+                <p className="text-lg leading-6 font-bold text-theme-text-primary">
                   {t("recorded.title")}
                 </p>
                 <div className="relative">
                   <button
                     ref={openMenuButton}
                     onClick={toggleMenu}
-                    className="flex items-center gap-x-2 px-4 py-1 rounded-lg bg-primary-button hover:text-white text-xs font-semibold hover:bg-secondary shadow-[0_4px_14px_rgba(0,0,0,0.25)] h-[34px] w-fit"
+                    className="flex items-center gap-x-2 px-4 py-1 rounded-lg bg-primary-button hover:light:bg-theme-bg-primary hover:text-theme-text-primary text-xs font-semibold hover:bg-secondary shadow-[0_4px_14px_rgba(0,0,0,0.25)] h-[34px] w-fit"
                   >
                     <Download size={18} weight="bold" />
                     {t("recorded.export")}
@@ -144,7 +144,7 @@ export default function WorkspaceChats() {
                     ref={menuRef}
                     className={`${
                       showMenu ? "slide-down" : "slide-up hidden"
-                    } z-20 w-fit rounded-lg absolute top-full right-0 bg-secondary mt-2 shadow-md`}
+                    } z-20 w-fit rounded-lg absolute top-full right-0 bg-secondary light:bg-theme-bg-secondary mt-2 shadow-md`}
                   >
                     <div className="py-2">
                       {Object.entries(exportOptions).map(([key, data]) => (
@@ -154,7 +154,7 @@ export default function WorkspaceChats() {
                             handleDumpChats(key);
                             setShowMenu(false);
                           }}
-                          className="w-full text-left px-4 py-2 text-white text-sm hover:bg-[#3D4147]"
+                          className="w-full text-left px-4 py-2 text-white text-sm hover:bg-[#3D4147] light:hover:bg-theme-sidebar-item-hover"
                         >
                           {data.name}
                         </button>
@@ -166,14 +166,14 @@ export default function WorkspaceChats() {
                   <>
                     <button
                       onClick={handleClearAllChats}
-                      className="flex items-center gap-x-2 px-4 py-1 border hover:border-transparent border-white/40 text-white/40 rounded-lg bg-transparent hover:text-white text-xs font-semibold hover:bg-red-500 shadow-[0_4px_14px_rgba(0,0,0,0.25)] h-[34px] w-fit"
+                      className="flex items-center gap-x-2 px-4 py-1 border hover:border-transparent light:border-theme-sidebar-border border-white/40 text-white/40 light:text-theme-text-secondary rounded-lg bg-transparent hover:light:text-theme-bg-primary hover:text-theme-text-primary text-xs font-semibold hover:bg-red-500 shadow-[0_4px_14px_rgba(0,0,0,0.25)] h-[34px] w-fit"
                     >
                       <Trash size={18} weight="bold" />
                       Clear Chats
                     </button>
                     <a
                       href={paths.orderFineTune()}
-                      className="flex items-center gap-x-2 px-4 py-1 border hover:border-transparent border-yellow-300 text-yellow-300/80 rounded-lg bg-transparent hover:text-white text-xs font-semibold hover:bg-yellow-300/75 shadow-[0_4px_14px_rgba(0,0,0,0.25)] h-[34px] w-fit"
+                      className="flex items-center gap-x-2 px-4 py-1 border hover:border-transparent border-yellow-300 light:border-yellow-600 text-yellow-300/80 light:text-yellow-600 rounded-lg bg-transparent hover:light:text-yellow-800 hover:text-theme-text-primary text-xs font-semibold hover:bg-yellow-300/75 shadow-[0_4px_14px_rgba(0,0,0,0.25)] h-[34px] w-fit"
                     >
                       <Sparkle size={18} weight="bold" />
                       Order Fine-Tune Model
@@ -181,19 +181,21 @@ export default function WorkspaceChats() {
                   </>
                 )}
               </div>
-              <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
+              <p className="text-xs leading-[18px] font-base text-theme-text-secondary mt-2">
                 {t("recorded.description")}
               </p>
             </div>
-            <ChatsContainer
-              loading={loading}
-              chats={chats}
-              setChats={setChats}
-              offset={offset}
-              setOffset={setOffset}
-              canNext={canNext}
-              t={t}
-            />
+            <div className="overflow-x-auto mt-6">
+              <ChatsContainer
+                loading={loading}
+                chats={chats}
+                setChats={setChats}
+                offset={offset}
+                setOffset={setOffset}
+                canNext={canNext}
+                t={t}
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -227,10 +229,10 @@ function ChatsContainer({
       <Skeleton.default
         height="80vh"
         width="100%"
-        highlightColor="#3D4147"
-        baseColor="#2C2F35"
+        highlightColor="var(--theme-bg-primary)"
+        baseColor="var(--theme-bg-secondary)"
         count={1}
-        className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
+        className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm"
         containerClassName="flex w-full"
       />
     );
@@ -238,8 +240,8 @@ function ChatsContainer({
 
   return (
     <>
-      <table className="w-full text-sm text-left rounded-lg mt-6">
-        <thead className="text-white text-opacity-80 text-xs leading-[18px] font-bold uppercase border-white border-b border-opacity-60">
+      <table className="w-full text-sm text-left rounded-lg min-w-[640px]">
+        <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase light:border-theme-sidebar-border border-white/10 border-b">
           <tr>
             <th scope="col" className="px-6 py-3 rounded-tl-lg">
               {t("recorded.table.id")}
@@ -274,7 +276,7 @@ function ChatsContainer({
       <div className="flex w-full justify-between items-center mt-6">
         <button
           onClick={handlePrevious}
-          className="px-4 py-2 rounded-lg border border-slate-200 text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 disabled:invisible"
+          className="px-4 py-2 rounded-lg border border-theme-text-secondary text-theme-text-secondary text-sm items-center flex gap-x-2 hover:bg-theme-text-secondary hover:text-theme-bg-secondary disabled:invisible"
           disabled={offset === 0}
         >
           {" "}
@@ -282,7 +284,7 @@ function ChatsContainer({
         </button>
         <button
           onClick={handleNext}
-          className="px-4 py-2 rounded-lg border border-slate-200 text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 disabled:invisible"
+          className="px-4 py-2 rounded-lg border border-slate-200 text-slate-200 light:text-theme-text-secondary light:border-theme-sidebar-border text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 disabled:invisible"
           disabled={!canNext}
         >
           Next Page
diff --git a/frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx b/frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx
index 8cd1e9ff9..650ea4e20 100644
--- a/frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedChats/ChatRow/index.jsx
@@ -74,7 +74,7 @@ export default function ChatRow({ chat, onDelete }) {
         <td className="px-6 py-4 flex items-center gap-x-6">
           <button
             onClick={handleDelete}
-            className="font-medium px-2 py-1 rounded-lg hover:bg-sidebar-gradient text-white hover:text-white/80 hover:bg-opacity-20"
+            className="font-medium px-2 py-1 rounded-lg text-theme-text-primary hover:text-red-500"
           >
             <Trash className="h-5 w-5" />
           </button>
@@ -108,19 +108,19 @@ export default function ChatRow({ chat, onDelete }) {
 const TextPreview = ({ text, closeModal }) => {
   return (
     <div className="relative w-full md:max-w-2xl max-h-full">
-      <div className="relative bg-main-gradient rounded-lg shadow">
-        <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-600">
+      <div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
+        <div className="flex items-center justify-between p-6 border-b rounded-t border-theme-modal-border">
           <h3 className="text-xl font-semibold text-white">Viewing Text</h3>
           <button
             onClick={closeModal}
             type="button"
-            className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+            className="bg-transparent rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
           >
-            <X className="text-gray-300 text-lg" />
+            <X className="text-white text-lg" />
           </button>
         </div>
         <div className="w-full p-6">
-          <pre className="w-full h-[200px] py-2 px-4 whitespace-pre-line overflow-auto rounded-lg bg-zinc-900 border border-gray-500 text-white text-sm">
+          <pre className="w-full h-[200px] py-2 px-4 whitespace-pre-line overflow-auto rounded-lg bg-zinc-900 light:bg-theme-bg-secondary border border-gray-500 text-white text-sm">
             {text}
           </pre>
         </div>
@@ -144,17 +144,21 @@ const ConnectionDetails = ({
   if (verbose) {
     return (
       <>
-        <p className="text-xs text-slate-400">sessionID: {sessionId}</p>
+        <p className="text-xs text-theme-text-secondary">
+          sessionID: {sessionId}
+        </p>
         {details.username && (
-          <p className="text-xs text-slate-400">username: {details.username}</p>
+          <p className="text-xs text-theme-text-secondary">
+            username: {details.username}
+          </p>
         )}
         {details.ip && (
-          <p className="text-xs text-slate-400">
+          <p className="text-xs text-theme-text-secondary">
             client ip address: {details.ip}
           </p>
         )}
         {details.host && (
-          <p className="text-xs text-slate-400">
+          <p className="text-xs text-theme-text-secondary">
             client host URL: {details.host}
           </p>
         )}
@@ -165,10 +169,14 @@ const ConnectionDetails = ({
   return (
     <>
       {details.username && (
-        <p className="text-xs text-slate-400">{details.username}</p>
+        <p className="text-xs text-theme-text-secondary">{details.username}</p>
+      )}
+      {details.ip && (
+        <p className="text-xs text-theme-text-secondary">{details.ip}</p>
+      )}
+      {details.host && (
+        <p className="text-xs text-theme-text-secondary">{details.host}</p>
       )}
-      {details.ip && <p className="text-xs text-slate-400">{details.ip}</p>}
-      {details.host && <p className="text-xs text-slate-400">{details.host}</p>}
     </>
   );
 };
diff --git a/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx b/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
index 60e4db174..02cca3eb5 100644
--- a/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
@@ -90,23 +90,23 @@ export default function EmbedChats() {
 
   return (
     <CanViewChatHistory>
-      <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+      <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
         <Sidebar />
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
         >
-          <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[86px] md:py-6 py-16">
-            <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
-              <div className="flex gap-x-4 items-center">
-                <p className="text-lg leading-6 font-bold text-white">
+          <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16">
+            <div className="w-full flex flex-col gap-y-1 pb-6 border-white/10 border-b-2">
+              <div className="flex flex-wrap gap-4 items-center">
+                <p className="text-lg leading-6 font-bold text-theme-text-primary">
                   {t("embed-chats.title")}
                 </p>
                 <div className="relative">
                   <button
                     ref={openMenuButton}
                     onClick={toggleMenu}
-                    className="flex items-center gap-x-2 px-4 py-1 rounded-lg bg-primary-button hover:text-white text-xs font-semibold hover:bg-secondary shadow-[0_4px_14px_rgba(0,0,0,0.25)] h-[34px] w-fit"
+                    className="flex items-center gap-x-2 px-4 py-1 rounded-lg bg-primary-button hover:light:bg-theme-bg-primary hover:text-theme-text-primary text-xs font-semibold hover:bg-secondary shadow-[0_4px_14px_rgba(0,0,0,0.25)] h-[34px] w-fit"
                   >
                     <Download size={18} weight="bold" />
                     {t("embed-chats.export")}
@@ -116,7 +116,7 @@ export default function EmbedChats() {
                     ref={menuRef}
                     className={`${
                       showMenu ? "slide-down" : "slide-up hidden"
-                    } z-20 w-fit rounded-lg absolute top-full right-0 bg-secondary mt-2 shadow-md`}
+                    } z-20 w-fit rounded-lg absolute top-full right-0 bg-secondary light:bg-theme-bg-secondary mt-2 shadow-md`}
                   >
                     <div className="py-2">
                       {Object.entries(exportOptions).map(([key, data]) => (
@@ -126,7 +126,7 @@ export default function EmbedChats() {
                             handleDumpChats(key);
                             setShowMenu(false);
                           }}
-                          className="w-full text-left px-4 py-2 text-white text-sm hover:bg-[#3D4147]"
+                          className="w-full text-left px-4 py-2 text-white text-sm hover:bg-[#3D4147] light:hover:bg-theme-sidebar-item-hover"
                         >
                           {data.name}
                         </button>
@@ -135,11 +135,13 @@ export default function EmbedChats() {
                   </div>
                 </div>
               </div>
-              <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
+              <p className="text-xs leading-[18px] font-base text-theme-text-secondary mt-2">
                 {t("embed-chats.description")}
               </p>
             </div>
-            <ChatsContainer />
+            <div className="overflow-x-auto mt-6">
+              <ChatsContainer />
+            </div>
           </div>
         </div>
       </div>
@@ -181,10 +183,10 @@ function ChatsContainer() {
       <Skeleton.default
         height="80vh"
         width="100%"
-        highlightColor="#3D4147"
-        baseColor="#2C2F35"
+        highlightColor="var(--theme-bg-primary)"
+        baseColor="var(--theme-bg-secondary)"
         count={1}
-        className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
+        className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm"
         containerClassName="flex w-full"
       />
     );
@@ -192,8 +194,8 @@ function ChatsContainer() {
 
   return (
     <>
-      <table className="w-full text-sm text-left rounded-lg mt-5">
-        <thead className="text-white text-opacity-80 text-sm font-bold uppercase border-white border-b border-opacity-60">
+      <table className="w-full text-sm text-left rounded-lg min-w-[640px]">
+        <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
           <tr>
             <th scope="col" className="px-6 py-3 rounded-tl-lg">
               {t("embed-chats.table.embed")}
@@ -222,10 +224,10 @@ function ChatsContainer() {
             ))}
         </tbody>
       </table>
-      <div className="flex w-full justify-between items-center">
+      <div className="flex w-full justify-between items-center mt-6">
         <button
           onClick={handlePrevious}
-          className="px-4 py-2 rounded-lg border border-slate-200 text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 disabled:invisible"
+          className="px-4 py-2 rounded-lg border border-theme-text-secondary text-theme-text-secondary text-sm items-center flex gap-x-2 hover:bg-theme-text-secondary hover:text-theme-bg-secondary disabled:invisible"
           disabled={offset === 0}
         >
           {" "}
@@ -233,7 +235,7 @@ function ChatsContainer() {
         </button>
         <button
           onClick={handleNext}
-          className="px-4 py-2 rounded-lg border border-slate-200 text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 disabled:invisible"
+          className="px-4 py-2 rounded-lg border border-theme-text-secondary text-theme-text-secondary text-sm items-center flex gap-x-2 hover:bg-theme-text-secondary hover:text-theme-bg-secondary disabled:invisible"
           disabled={!canNext}
         >
           {t("common.next")}
diff --git a/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/CodeSnippetModal/index.jsx b/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/CodeSnippetModal/index.jsx
index a16ca9f42..f02640d72 100644
--- a/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/CodeSnippetModal/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/CodeSnippetModal/index.jsx
@@ -6,32 +6,31 @@ import "highlight.js/styles/github-dark-dimmed.min.css";
 
 export default function CodeSnippetModal({ embed, closeModal }) {
   return (
-    <div className="relative max-w-2xl max-h-full">
-      <div className="relative bg-main-gradient rounded-lg shadow">
-        <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
-          <h3 className="text-xl font-semibold text-white">
-            Copy your embed code
-          </h3>
+    <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
+      <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
+        <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+          <div className="w-full flex gap-x-2 items-center">
+            <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+              Copy your embed code
+            </h3>
+          </div>
           <button
             onClick={closeModal}
             type="button"
-            className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
-            data-modal-hide="staticModal"
+            className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
           >
-            <X className="text-gray-300 text-lg" />
+            <X size={24} weight="bold" className="text-white" />
           </button>
         </div>
-        <div>
-          <div className="p-6 space-y-6 flex h-auto max-h-[80vh] w-full overflow-y-scroll">
-            <div className="w-full flex flex-col gap-y-6">
-              <ScriptTag embed={embed} />
-            </div>
+        <div className="px-7 py-6">
+          <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
+            <ScriptTag embed={embed} />
           </div>
-          <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
+          <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
             <button
               onClick={closeModal}
               type="button"
-              className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300"
+              className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
             >
               Close
             </button>
@@ -83,14 +82,14 @@ const ScriptTag = ({ embed }) => {
         <label className="block text-sm font-medium text-white">
           HTML Script Tag Embed Code
         </label>
-        <p className="text-slate-300 text-xs">
+        <p className="text-secondary text-xs">
           Have your workspace chat embed function like a help desk chat bottom
           in the corner of your website.
         </p>
         <a
           href="https://github.com/Mintplex-Labs/anything-llm/tree/master/embed/README.md"
           target="_blank"
-          className="text-blue-300 hover:underline"
+          className="text-blue-300 light:text-blue-500 hover:underline"
         >
           View all style and configuration options &rarr;
         </a>
@@ -98,7 +97,7 @@ const ScriptTag = ({ embed }) => {
       <button
         disabled={copied}
         onClick={handleClick}
-        className="disabled:border disabled:border-green-300 border border-transparent relative w-full font-mono flex bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none p-2.5"
+        className="disabled:border disabled:border-green-300 disabled:light:border-green-600 border border-transparent relative w-full font-mono flex bg-zinc-900 light:invert text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none p-2.5"
       >
         <div
           className="flex w-full text-left flex-col gap-y-1 pr-6 pl-4 whitespace-pre-line"
@@ -112,7 +111,7 @@ const ScriptTag = ({ embed }) => {
         {copied ? (
           <CheckCircle
             size={14}
-            className="text-green-300 absolute top-2 right-2"
+            className="text-green-300 light:text-green-600 absolute top-2 right-2"
           />
         ) : (
           <CopySimple size={14} className="absolute top-2 right-2" />
diff --git a/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/EditEmbedModal/index.jsx b/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/EditEmbedModal/index.jsx
index a1b15eef0..65b430930 100644
--- a/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/EditEmbedModal/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/EditEmbedModal/index.jsx
@@ -30,24 +30,25 @@ export default function EditEmbedModal({ embed, closeModal }) {
   };
 
   return (
-    <div className="relative max-w-2xl max-h-full">
-      <div className="relative bg-main-gradient rounded-lg shadow">
-        <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
-          <h3 className="text-xl font-semibold text-white">
-            Update embed #{embed.id}
-          </h3>
+    <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
+      <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
+        <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+          <div className="w-full flex gap-x-2 items-center">
+            <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+              Update embed #{embed.id}
+            </h3>
+          </div>
           <button
             onClick={closeModal}
             type="button"
-            className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
-            data-modal-hide="staticModal"
+            className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
           >
-            <X className="text-gray-300 text-lg" />
+            <X size={24} weight="bold" className="text-white" />
           </button>
         </div>
-        <form onSubmit={handleUpdate}>
-          <div className="p-6 space-y-6 flex h-auto max-h-[80vh] w-full overflow-y-scroll">
-            <div className="w-full flex flex-col gap-y-6">
+        <div className="px-7 py-6">
+          <form onSubmit={handleUpdate}>
+            <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
               <WorkspaceSelection defaultValue={embed.workspace.id} />
               <ChatModeSelection defaultValue={embed.chat_mode} />
               <PermittedDomains
@@ -89,32 +90,32 @@ export default function EditEmbedModal({ embed, closeModal }) {
               />
 
               {error && <p className="text-red-400 text-sm">Error: {error}</p>}
-              <p className="text-white text-xs md:text-sm pb-8">
+              <p className="text-white text-opacity-60 text-xs md:text-sm">
                 After creating an embed you will be provided a link that you can
                 publish on your website with a simple
-                <code className="bg-stone-800 text-white mx-1 px-1 rounded-sm">
+                <code className="bg-theme-settings-input-bg text-white mx-1 px-1 rounded-sm">
                   &lt;script&gt;
                 </code>{" "}
                 tag.
               </p>
             </div>
-          </div>
-          <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
-            <button
-              onClick={closeModal}
-              type="button"
-              className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300"
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-            >
-              Update embed
-            </button>
-          </div>
-        </form>
+            <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
+              <button
+                onClick={closeModal}
+                type="button"
+                className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+              >
+                Update embed
+              </button>
+            </div>
+          </form>
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/index.jsx b/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/index.jsx
index 24c939915..222ca3fdc 100644
--- a/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/index.jsx
@@ -87,7 +87,7 @@ export default function EmbedRow({ embed }) {
         <td className="px-6 py-4 flex items-center gap-x-6">
           <button
             onClick={openSettingsModal}
-            className="font-medium text-white text-opacity-80 rounded-lg hover:text-white px-2 py-1 hover:text-opacity-60 hover:bg-white hover:bg-opacity-10"
+            className="font-medium text-white text-opacity-80 rounded-lg hover:text-white hover:light:text-gray-500 px-2 py-1 hover:text-opacity-60 hover:bg-white hover:bg-opacity-10"
           >
             <DotsThreeOutline weight="fill" className="h-5 w-5" />
           </button>
diff --git a/frontend/src/pages/GeneralSettings/EmbedConfigs/NewEmbedModal/index.jsx b/frontend/src/pages/GeneralSettings/EmbedConfigs/NewEmbedModal/index.jsx
index 9aa9a9db5..38f2b3d17 100644
--- a/frontend/src/pages/GeneralSettings/EmbedConfigs/NewEmbedModal/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedConfigs/NewEmbedModal/index.jsx
@@ -37,24 +37,25 @@ export default function NewEmbedModal({ closeModal }) {
   };
 
   return (
-    <div className="relative w-full max-w-2xl max-h-full">
-      <div className="relative bg-main-gradient rounded-lg shadow">
-        <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
-          <h3 className="text-xl font-semibold text-white">
-            Create new embed for workspace
-          </h3>
+    <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
+      <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
+        <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+          <div className="w-full flex gap-x-2 items-center">
+            <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+              Create new embed for workspace
+            </h3>
+          </div>
           <button
             onClick={closeModal}
             type="button"
-            className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
-            data-modal-hide="staticModal"
+            className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
           >
-            <X className="text-gray-300 text-lg" />
+            <X size={24} weight="bold" className="text-white" />
           </button>
         </div>
-        <form onSubmit={handleCreate}>
-          <div className="p-6 space-y-6 flex h-auto max-h-[80vh] w-full overflow-y-scroll">
-            <div className="w-full flex flex-col gap-y-6">
+        <div className="px-7 py-6">
+          <form onSubmit={handleCreate}>
+            <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
               <WorkspaceSelection />
               <ChatModeSelection />
               <PermittedDomains />
@@ -85,32 +86,32 @@ export default function NewEmbedModal({ closeModal }) {
               />
 
               {error && <p className="text-red-400 text-sm">Error: {error}</p>}
-              <p className="text-white text-xs md:text-sm pb-8">
+              <p className="text-white text-opacity-60 text-xs md:text-sm">
                 After creating an embed you will be provided a link that you can
                 publish on your website with a simple
-                <code className="bg-stone-800 text-white mx-1 px-1 rounded-sm">
+                <code className="light:bg-stone-300 bg-stone-900 text-white mx-1 px-1 rounded-sm">
                   &lt;script&gt;
                 </code>{" "}
                 tag.
               </p>
             </div>
-          </div>
-          <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
-            <button
-              onClick={closeModal}
-              type="button"
-              className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300"
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-            >
-              Create embed
-            </button>
-          </div>
-        </form>
+            <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
+              <button
+                onClick={closeModal}
+                type="button"
+                className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
+              >
+                Create embed
+              </button>
+            </div>
+          </form>
+        </div>
       </div>
     </div>
   );
@@ -135,7 +136,7 @@ export const WorkspaceSelection = ({ defaultValue = null }) => {
         >
           Workspace
         </label>
-        <p className="text-slate-300 text-xs">
+        <p className="text-secondary text-xs">
           This is the workspace your chat window will be based on. All defaults
           will be inherited from the workspace unless overridden by this config.
         </p>
@@ -144,7 +145,7 @@ export const WorkspaceSelection = ({ defaultValue = null }) => {
         name="workspace_id"
         required={true}
         defaultValue={defaultValue}
-        className="min-w-[15rem] rounded-lg bg-zinc-900 px-4 py-2 text-sm text-white focus:ring-blue-500 focus:border-blue-500"
+        className="min-w-[15rem] rounded-lg bg-theme-settings-input-bg px-4 py-2 text-sm text-white focus:ring-blue-500 focus:border-blue-500"
       >
         {workspaces.map((workspace) => {
           return (
@@ -173,7 +174,7 @@ export const ChatModeSelection = ({ defaultValue = null }) => {
         >
           Allowed chat method
         </label>
-        <p className="text-slate-300 text-xs">
+        <p className="text-secondary text-xs">
           Set how your chatbot should operate. Query means it will only respond
           if a document helps answer the query.
           <br />
@@ -183,9 +184,11 @@ export const ChatModeSelection = ({ defaultValue = null }) => {
       </div>
       <div className="mt-2 gap-y-3 flex flex-col">
         <label
-          className={`transition-all duration-300 w-full h-11 p-2.5 bg-white/10 rounded-lg flex justify-start items-center gap-2.5 cursor-pointer border border-transparent ${
-            chatMode === "chat" ? "border-white border-opacity-40" : ""
-          } hover:border-white/60`}
+          className={`transition-all duration-300 w-full h-11 p-2.5 rounded-lg flex justify-start items-center gap-2.5 cursor-pointer border ${
+            chatMode === "chat"
+              ? "border-theme-sidebar-item-workspace-active bg-theme-bg-secondary"
+              : "border-theme-sidebar-border"
+          } hover:border-theme-sidebar-border hover:bg-theme-bg-secondary`}
         >
           <input
             type="radio"
@@ -196,18 +199,22 @@ export const ChatModeSelection = ({ defaultValue = null }) => {
             className="hidden"
           />
           <div
-            className={`w-4 h-4 rounded-full border-2 border-white mr-2 ${
-              chatMode === "chat" ? "bg-white" : ""
+            className={`w-4 h-4 rounded-full border-2 border-theme-sidebar-border mr-2 ${
+              chatMode === "chat"
+                ? "bg-[var(--theme-sidebar-item-workspace-active)]"
+                : ""
             }`}
           ></div>
-          <div className="text-white text-sm font-medium font-['Plus Jakarta Sans'] leading-tight">
+          <div className="text-theme-text-primary text-sm font-medium font-['Plus Jakarta Sans'] leading-tight">
             Chat: Respond to all questions regardless of context
           </div>
         </label>
         <label
-          className={`transition-all duration-300 w-full h-11 p-2.5 bg-white/10 rounded-lg flex justify-start items-center gap-2.5 cursor-pointer border border-transparent ${
-            chatMode === "query" ? "border-white border-opacity-40" : ""
-          } hover:border-white/60`}
+          className={`transition-all duration-300 w-full h-11 p-2.5 rounded-lg flex justify-start items-center gap-2.5 cursor-pointer border ${
+            chatMode === "query"
+              ? "border-theme-sidebar-item-workspace-active bg-theme-bg-secondary"
+              : "border-theme-sidebar-border"
+          } hover:border-theme-sidebar-border hover:bg-theme-bg-secondary`}
         >
           <input
             type="radio"
@@ -218,11 +225,13 @@ export const ChatModeSelection = ({ defaultValue = null }) => {
             className="hidden"
           />
           <div
-            className={`w-4 h-4 rounded-full border-2 border-white mr-2 ${
-              chatMode === "query" ? "bg-white" : ""
+            className={`w-4 h-4 rounded-full border-2 border-theme-sidebar-border mr-2 ${
+              chatMode === "query"
+                ? "bg-[var(--theme-sidebar-item-workspace-active)]"
+                : ""
             }`}
           ></div>
-          <div className="text-white text-sm font-medium font-['Plus Jakarta Sans'] leading-tight">
+          <div className="text-theme-text-primary text-sm font-medium font-['Plus Jakarta Sans'] leading-tight">
             Query: Only respond to chats related to documents in workspace
           </div>
         </label>
@@ -278,7 +287,7 @@ export const PermittedDomains = ({ defaultValue = [] }) => {
         >
           Restrict requests from domains
         </label>
-        <p className="text-slate-300 text-xs">
+        <p className="test-secondary text-xs">
           This filter will block any requests that come from a domain other than
           the list below.
           <br />
@@ -292,9 +301,9 @@ export const PermittedDomains = ({ defaultValue = [] }) => {
         onBlur={handleBlur}
         placeholder="https://mysite.com, https://anythingllm.com"
         classNames={{
-          tag: "bg-blue-300/10 text-zinc-800 m-1",
+          tag: "bg-theme-settings-input-bg light:bg-black/10 bg-blue-300/10 text-zinc-800",
           input:
-            "flex bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none p-2.5",
+            "flex p-1 !bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none",
         }}
       />
     </div>
@@ -308,12 +317,12 @@ export const NumberInput = ({ name, title, hint, defaultValue = 0 }) => {
         <label htmlFor={name} className="block text-sm font-medium text-white">
           {title}
         </label>
-        <p className="text-slate-300 text-xs">{hint}</p>
+        <p className="test-secondary text-xs">{hint}</p>
       </div>
       <input
         type="number"
         name={name}
-        className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-[15rem] p-2.5"
+        className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-[15rem] p-2.5"
         min={0}
         defaultValue={defaultValue}
         onScroll={(e) => e.target.blur()}
@@ -331,7 +340,7 @@ export const BooleanInput = ({ name, title, hint, defaultValue = null }) => {
         <label htmlFor={name} className="block text-sm font-medium text-white">
           {title}
         </label>
-        <p className="text-slate-300 text-xs">{hint}</p>
+        <p className="test-secondary text-xs">{hint}</p>
       </div>
       <label className="relative inline-flex cursor-pointer items-center">
         <input
diff --git a/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx b/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx
index 442a03d93..58dff17be 100644
--- a/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx
@@ -16,30 +16,35 @@ export default function EmbedConfigs() {
   const { isOpen, openModal, closeModal } = useModal();
   const { t } = useTranslation();
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
       >
         <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16">
-          <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
+          <div className="w-full flex flex-col gap-y-1 pb-6 border-white/10 border-b-2">
             <div className="items-center flex gap-x-4">
-              <p className="text-lg leading-6 font-bold text-white">
+              <p className="text-lg leading-6 font-bold text-theme-text-primary">
                 {t("embeddable.title")}
               </p>
             </div>
-            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
+            <p className="text-xs leading-[18px] font-base text-theme-text-secondary mt-2">
               {t("embeddable.description")}
             </p>
           </div>
           <div className="w-full justify-end flex">
-            <CTAButton onClick={openModal} className="mt-3 mr-0 -mb-14 z-10">
+            <CTAButton
+              onClick={openModal}
+              className="mt-3 mr-0 mb-4 md:-mb-14 z-10"
+            >
               <CodeBlock className="h-4 w-4" weight="bold" />{" "}
               {t("embeddable.create")}
             </CTAButton>
           </div>
-          <EmbedContainer />
+          <div className="overflow-x-auto mt-6">
+            <EmbedContainer />
+          </div>
         </div>
         <ModalWrapper isOpen={isOpen}>
           <NewEmbedModal closeModal={closeModal} />
@@ -68,18 +73,18 @@ function EmbedContainer() {
       <Skeleton.default
         height="80vh"
         width="100%"
-        highlightColor="#3D4147"
-        baseColor="#2C2F35"
+        highlightColor="var(--theme-bg-primary)"
+        baseColor="var(--theme-bg-secondary)"
         count={1}
-        className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
+        className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm"
         containerClassName="flex w-full"
       />
     );
   }
 
   return (
-    <table className="w-full text-sm text-left rounded-lg mt-6">
-      <thead className="text-white text-opacity-80 text-xs leading-[18px] font-bold uppercase border-white border-b border-opacity-60">
+    <table className="w-full text-sm text-left rounded-lg min-w-[640px]">
+      <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
         <tr>
           <th scope="col" className="px-6 py-3 rounded-tl-lg">
             {t("embeddable.table.workspace")}
diff --git a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
index d95c6b112..4f3dd8ef5 100644
--- a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
@@ -211,12 +211,12 @@ export default function GeneralEmbeddingPreference() {
   );
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
       <Sidebar />
       {loading ? (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
         >
           <div className="w-full h-full flex justify-center items-center">
             <PreLoader />
@@ -225,15 +225,15 @@ export default function GeneralEmbeddingPreference() {
       ) : (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
         >
           <form
             id="embedding-form"
             onSubmit={handleSubmit}
             className="flex w-full"
           >
-            <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16">
-              <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
+            <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] py-16 md:py-6">
+              <div className="w-full flex flex-col gap-y-1 pb-6 border-white light:border-theme-sidebar-border border-b-2 border-opacity-10">
                 <div className="flex gap-x-4 items-center">
                   <p className="text-lg leading-6 font-bold text-white">
                     {t("embedding.title")}
@@ -266,20 +266,20 @@ export default function GeneralEmbeddingPreference() {
                   />
                 )}
                 {searchMenuOpen ? (
-                  <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
+                  <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-theme-settings-input-bg rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
                     <div className="w-full flex flex-col gap-y-1">
-                      <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
+                      <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-theme-settings-input-bg">
                         <MagnifyingGlass
                           size={20}
                           weight="bold"
-                          className="absolute left-4 z-30 text-white -ml-4 my-2"
+                          className="absolute left-4 z-30 text-theme-text-primary -ml-4 my-2"
                         />
                         <input
                           type="text"
                           name="embedder-search"
                           autoComplete="off"
                           placeholder="Search all embedding providers"
-                          className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none text-white placeholder:text-white placeholder:font-medium"
+                          className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none text-theme-text-primary placeholder:text-theme-text-primary placeholder:font-medium"
                           onChange={(e) => setSearchQuery(e.target.value)}
                           ref={searchInputRef}
                           onKeyDown={(e) => {
@@ -310,7 +310,7 @@ export default function GeneralEmbeddingPreference() {
                   </div>
                 ) : (
                   <button
-                    className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
+                    className="w-full max-w-[640px] h-[64px] bg-theme-settings-input-bg rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
                     type="button"
                     onClick={() => setSearchMenuOpen(true)}
                   >
diff --git a/frontend/src/pages/GeneralSettings/EmbeddingTextSplitterPreference/index.jsx b/frontend/src/pages/GeneralSettings/EmbeddingTextSplitterPreference/index.jsx
index f1f2df3e4..ae05a2fad 100644
--- a/frontend/src/pages/GeneralSettings/EmbeddingTextSplitterPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbeddingTextSplitterPreference/index.jsx
@@ -63,12 +63,12 @@ export default function EmbeddingTextSplitterPreference() {
   }, []);
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
       <Sidebar />
       {loading ? (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
         >
           <div className="w-full h-full flex justify-center items-center">
             <PreLoader />
@@ -77,7 +77,7 @@ export default function EmbeddingTextSplitterPreference() {
       ) : (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
         >
           <form
             onSubmit={handleSubmit}
@@ -85,7 +85,7 @@ export default function EmbeddingTextSplitterPreference() {
             className="flex w-full"
           >
             <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16">
-              <div className="w-full flex flex-col gap-y-1 pb-4 border-white border-b-2 border-opacity-10">
+              <div className="w-full flex flex-col gap-y-1 pb-4 border-white light:border-theme-sidebar-border border-b-2 border-opacity-10">
                 <div className="flex gap-x-4 items-center">
                   <p className="text-lg leading-6 font-bold text-white">
                     {t("text.title")}
@@ -124,7 +124,7 @@ export default function EmbeddingTextSplitterPreference() {
                     min={1}
                     max={settings?.max_embed_chunk_size || 1000}
                     onWheel={(e) => e?.currentTarget?.blur()}
-                    className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                    className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                     placeholder="maximum length of vectorized text"
                     defaultValue={
                       isNullOrNaN(settings?.text_splitter_chunk_size)
@@ -156,7 +156,7 @@ export default function EmbeddingTextSplitterPreference() {
                     name="text_splitter_chunk_overlap"
                     min={0}
                     onWheel={(e) => e?.currentTarget?.blur()}
-                    className="border-none bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                    className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                     placeholder="maximum length of vectorized text"
                     defaultValue={
                       isNullOrNaN(settings?.text_splitter_chunk_overlap)
diff --git a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
index 9ca39d52b..252418d67 100644
--- a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
@@ -360,12 +360,12 @@ export default function GeneralLLMPreference() {
     (llm) => llm.value === selectedLLM
   );
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
       <Sidebar />
       {loading ? (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
         >
           <div className="w-full h-full flex justify-center items-center">
             <PreLoader />
@@ -374,11 +374,11 @@ export default function GeneralLLMPreference() {
       ) : (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
         >
           <form onSubmit={handleSubmit} className="flex w-full">
             <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16">
-              <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
+              <div className="w-full flex flex-col gap-y-1 pb-6 border-white light:border-theme-sidebar-border border-b-2 border-opacity-10">
                 <div className="flex gap-x-4 items-center">
                   <p className="text-lg leading-6 font-bold text-white">
                     {t("llm.title")}
@@ -409,20 +409,20 @@ export default function GeneralLLMPreference() {
                   />
                 )}
                 {searchMenuOpen ? (
-                  <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
+                  <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-theme-settings-input-bg rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
                     <div className="w-full flex flex-col gap-y-1">
-                      <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
+                      <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-theme-settings-input-bg">
                         <MagnifyingGlass
                           size={20}
                           weight="bold"
-                          className="absolute left-4 z-30 text-white -ml-4 my-2"
+                          className="absolute left-4 z-30 text-theme-text-primary -ml-4 my-2"
                         />
                         <input
                           type="text"
                           name="llm-search"
                           autoComplete="off"
                           placeholder="Search all LLM providers"
-                          className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none text-white placeholder:text-white placeholder:font-medium"
+                          className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none text-theme-text-primary placeholder:text-theme-text-primary placeholder:font-medium"
                           onChange={(e) => setSearchQuery(e.target.value)}
                           ref={searchInputRef}
                           onKeyDown={(e) => {
@@ -456,7 +456,7 @@ export default function GeneralLLMPreference() {
                   </div>
                 ) : (
                   <button
-                    className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
+                    className="w-full max-w-[640px] h-[64px] bg-theme-settings-input-bg rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
                     type="button"
                     onClick={() => setSearchMenuOpen(true)}
                   >
diff --git a/frontend/src/pages/GeneralSettings/PrivacyAndData/index.jsx b/frontend/src/pages/GeneralSettings/PrivacyAndData/index.jsx
index 12d5a3e52..ffe07e82b 100644
--- a/frontend/src/pages/GeneralSettings/PrivacyAndData/index.jsx
+++ b/frontend/src/pages/GeneralSettings/PrivacyAndData/index.jsx
@@ -26,20 +26,20 @@ export default function PrivacyAndDataHandling() {
   }, []);
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] light:border light:border-theme-sidebar-border bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
       >
         <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16">
-          <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
+          <div className="w-full flex flex-col gap-y-1 pb-6 border-white/10 border-b-2">
             <div className="items-center flex gap-x-4">
-              <p className="text-lg leading-6 font-bold text-white">
+              <p className="text-lg leading-6 font-bold text-theme-text-primary">
                 {t("privacy.title")}
               </p>
             </div>
-            <p className="text-xs leading-[18px] font-base text-white text-opacity-60">
+            <p className="text-xs leading-[18px] font-base text-theme-text-secondary">
               {t("privacy.description")}
             </p>
           </div>
@@ -50,10 +50,10 @@ export default function PrivacyAndDataHandling() {
               </div>
             </div>
           ) : (
-            <>
+            <div className="overflow-x-auto">
               <ThirdParty settings={settings} />
               <TelemetryLogs settings={settings} />
-            </>
+            </div>
           )}
         </div>
       </div>
@@ -68,10 +68,10 @@ function ThirdParty({ settings }) {
   const { t } = useTranslation();
 
   return (
-    <div className="py-8 w-full flex items-start justify-center flex-col gap-y-6 border-b-2 border-white/10">
+    <div className="py-8 w-full flex items-start justify-center flex-col gap-y-6 border-b-2 border-theme-sidebar-border">
       <div className="flex flex-col gap-8">
         <div className="flex flex-col gap-y-2 border-b border-zinc-500/50 pb-4">
-          <div className="text-white text-base font-bold">
+          <div className="text-theme-text-primary text-base font-bold">
             {t("privacy.llm")}
           </div>
           <div className="flex items-center gap-2.5">
@@ -80,18 +80,18 @@ function ThirdParty({ settings }) {
               alt="LLM Logo"
               className="w-8 h-8 rounded"
             />
-            <p className="text-white text-sm font-bold">
+            <p className="text-theme-text-primary text-sm font-bold">
               {LLM_SELECTION_PRIVACY[llmChoice].name}
             </p>
           </div>
           <ul className="flex flex-col list-disc ml-4">
             {LLM_SELECTION_PRIVACY[llmChoice].description.map((desc) => (
-              <li className="text-white/90 text-sm">{desc}</li>
+              <li className="text-theme-text-secondary text-sm">{desc}</li>
             ))}
           </ul>
         </div>
         <div className="flex flex-col gap-y-2 border-b border-zinc-500/50 pb-4">
-          <div className="text-white text-base font-bold">
+          <div className="text-theme-text-primary text-base font-bold">
             {t("privacy.embedding")}
           </div>
           <div className="flex items-center gap-2.5">
@@ -100,21 +100,21 @@ function ThirdParty({ settings }) {
               alt="LLM Logo"
               className="w-8 h-8 rounded"
             />
-            <p className="text-white text-sm font-bold">
+            <p className="text-theme-text-primary text-sm font-bold">
               {EMBEDDING_ENGINE_PRIVACY[embeddingEngine].name}
             </p>
           </div>
           <ul className="flex flex-col list-disc ml-4">
             {EMBEDDING_ENGINE_PRIVACY[embeddingEngine].description.map(
               (desc) => (
-                <li className="text-white/90 text-sm">{desc}</li>
+                <li className="text-theme-text-secondary text-sm">{desc}</li>
               )
             )}
           </ul>
         </div>
 
         <div className="flex flex-col gap-y-2 pb-4">
-          <div className="text-white text-base font-bold">
+          <div className="text-theme-text-primary text-base font-bold">
             {t("privacy.vector")}
           </div>
           <div className="flex items-center gap-2.5">
@@ -123,13 +123,13 @@ function ThirdParty({ settings }) {
               alt="LLM Logo"
               className="w-8 h-8 rounded"
             />
-            <p className="text-white text-sm font-bold">
+            <p className="text-theme-text-primary text-sm font-bold">
               {VECTOR_DB_PRIVACY[vectorDb].name}
             </p>
           </div>
           <ul className="flex flex-col list-disc ml-4">
             {VECTOR_DB_PRIVACY[vectorDb].description.map((desc) => (
-              <li className="text-white/90 text-sm">{desc}</li>
+              <li className="text-theme-text-secondary text-sm">{desc}</li>
             ))}
           </ul>
         </div>
@@ -162,7 +162,7 @@ function TelemetryLogs({ settings }) {
         <div className="space-y-6 flex h-full w-full">
           <div className="w-full flex flex-col gap-y-4">
             <div className="">
-              <label className="mb-2.5 block font-medium text-white">
+              <label className="mb-2.5 block font-medium text-theme-text-primary">
                 {t("privacy.anonymous")}
               </label>
               <label className="relative inline-flex cursor-pointer items-center">
@@ -178,7 +178,7 @@ function TelemetryLogs({ settings }) {
           </div>
         </div>
         <div className="flex flex-col items-left space-y-2">
-          <p className="text-white/80 text-xs rounded-lg w-96">
+          <p className="text-theme-text-secondary text-xs rounded-lg w-96">
             All events do not record IP-address and contain{" "}
             <b>no identifying</b> content, settings, chats, or other non-usage
             based information. To see the list of event tags collected you can
@@ -192,7 +192,7 @@ function TelemetryLogs({ settings }) {
             </a>
             .
           </p>
-          <p className="text-white/80 text-xs rounded-lg w-96">
+          <p className="text-theme-text-secondary text-xs rounded-lg w-96">
             As an open-source project we respect your right to privacy. We are
             dedicated to building the best solution for integrating AI and
             documents privately and securely. If you do decide to turn off
diff --git a/frontend/src/pages/GeneralSettings/Security/index.jsx b/frontend/src/pages/GeneralSettings/Security/index.jsx
index c014b3274..2b26b5d91 100644
--- a/frontend/src/pages/GeneralSettings/Security/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Security/index.jsx
@@ -11,11 +11,11 @@ import { useTranslation } from "react-i18next";
 
 export default function GeneralSecurity() {
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
       <Sidebar />
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+        className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
       >
         <MultiUserMode />
         <PasswordProtection />
@@ -88,8 +88,8 @@ function MultiUserMode() {
       onChange={() => setHasChanges(true)}
       className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16"
     >
-      <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
-        <div className="w-full flex flex-col gap-y-1">
+      <div className="w-full flex flex-col gap-y-1 pb-6 border-white light:border-theme-sidebar-border border-b-2 border-opacity-10">
+        <div className="w-full flex flex-col gap-y-1 border-white light:border-theme-sidebar-border border-b-2 border-opacity-10 pb-8">
           <div className="items-center flex gap-x-4">
             <p className="text-lg leading-6 font-bold text-white">
               {t("multi.title")}
@@ -125,7 +125,7 @@ function MultiUserMode() {
                     <input
                       type="checkbox"
                       onClick={() => setUseMultiUserMode(!useMultiUserMode)}
-                      checked={useMultiUserMode}
+                      defaultChecked={useMultiUserMode}
                       className="peer sr-only pointer-events-none"
                     />
                     <div
@@ -146,7 +146,7 @@ function MultiUserMode() {
                       <input
                         name="username"
                         type="text"
-                        className="bg-zinc-900 text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5 placeholder:text-white/20 focus:ring-blue-500"
+                        className="bg-theme-settings-input-bg text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5 placeholder:text-theme-settings-input-placeholder focus:ring-blue-500"
                         placeholder="Your admin username"
                         minLength={2}
                         required={true}
@@ -165,7 +165,7 @@ function MultiUserMode() {
                       <input
                         name="password"
                         type="text"
-                        className="bg-zinc-900 text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5 placeholder:text-white/20 focus:ring-blue-500"
+                        className="bg-theme-settings-input-bg text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5 placeholder:text-theme-settings-input-placeholder focus:ring-blue-500"
                         placeholder="Your admin password"
                         minLength={8}
                         required={true}
@@ -178,7 +178,7 @@ function MultiUserMode() {
               </div>
             </div>
             <div className="flex items-center justify-between space-x-14">
-              <p className="text-white/80 text-xs rounded-lg w-96">
+              <p className="text-white text-opacity-80 text-xs rounded-lg w-96">
                 {t("multi.enable.description")}
               </p>
             </div>
@@ -265,7 +265,7 @@ function PasswordProtection() {
       onChange={() => setHasChanges(true)}
       className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16"
     >
-      <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
+      <div className="w-full flex flex-col gap-y-1 pb-6 border-white light:border-theme-sidebar-border border-b-2 border-opacity-10">
         <div className="w-full flex flex-col gap-y-1">
           <div className="items-center flex gap-x-4">
             <p className="text-lg leading-6 font-bold text-white">
@@ -300,7 +300,7 @@ function PasswordProtection() {
                     <input
                       type="checkbox"
                       onClick={() => setUsePassword(!usePassword)}
-                      checked={usePassword}
+                      defaultChecked={usePassword}
                       className="peer sr-only pointer-events-none"
                     />
                     <div className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"></div>
@@ -318,7 +318,7 @@ function PasswordProtection() {
                       <input
                         name="password"
                         type="text"
-                        className="bg-zinc-900 text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5 placeholder:text-white/20"
+                        className="bg-theme-settings-input-bg text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5 placeholder:text-theme-settings-input-placeholder"
                         placeholder="Your Instance Password"
                         minLength={8}
                         required={true}
@@ -331,7 +331,7 @@ function PasswordProtection() {
               </div>
             </div>
             <div className="flex items-center justify-between space-x-14">
-              <p className="text-white/80 text-xs rounded-lg w-96">
+              <p className="text-white text-opacity-80 light:text-theme-text text-xs rounded-lg w-96">
                 {t("multi.instance.description")}
               </p>
             </div>
diff --git a/frontend/src/pages/GeneralSettings/TranscriptionPreference/index.jsx b/frontend/src/pages/GeneralSettings/TranscriptionPreference/index.jsx
index 8c84c3e9d..14f1d355d 100644
--- a/frontend/src/pages/GeneralSettings/TranscriptionPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/TranscriptionPreference/index.jsx
@@ -99,12 +99,12 @@ export default function TranscriptionModelPreference() {
   );
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
       <Sidebar />
       {loading ? (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
         >
           <div className="w-full h-full flex justify-center items-center">
             <PreLoader />
@@ -113,11 +113,11 @@ export default function TranscriptionModelPreference() {
       ) : (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
         >
           <form onSubmit={handleSubmit} className="flex w-full">
-            <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16">
-              <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
+            <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] py-16 md:py-6">
+              <div className="w-full flex flex-col gap-y-1 pb-6 border-white light:border-theme-sidebar-border border-b-2 border-opacity-10">
                 <div className="flex gap-x-4 items-center">
                   <p className="text-lg leading-6 font-bold text-white">
                     {t("transcription.title")}
@@ -148,20 +148,20 @@ export default function TranscriptionModelPreference() {
                   />
                 )}
                 {searchMenuOpen ? (
-                  <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
+                  <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-theme-settings-input-bg rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
                     <div className="w-full flex flex-col gap-y-1">
-                      <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
+                      <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-theme-settings-input-bg">
                         <MagnifyingGlass
                           size={20}
                           weight="bold"
-                          className="absolute left-4 z-30 text-white -ml-4 my-2"
+                          className="absolute left-4 z-30 text-theme-text-primary -ml-4 my-2"
                         />
                         <input
                           type="text"
                           name="provider-search"
                           autoComplete="off"
                           placeholder="Search audio transcription providers"
-                          className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white placeholder:text-white placeholder:font-medium"
+                          className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:outline-primary-button active:outline-primary-button outline-none text-theme-text-primary placeholder:text-theme-text-primary placeholder:font-medium"
                           onChange={(e) => setSearchQuery(e.target.value)}
                           ref={searchInputRef}
                           onKeyDown={(e) => {
@@ -192,7 +192,7 @@ export default function TranscriptionModelPreference() {
                   </div>
                 ) : (
                   <button
-                    className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
+                    className="w-full max-w-[640px] h-[64px] bg-theme-settings-input-bg rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
                     type="button"
                     onClick={() => setSearchMenuOpen(true)}
                   >
diff --git a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
index e35dc3208..454e445e6 100644
--- a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
+++ b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
@@ -171,12 +171,12 @@ export default function GeneralVectorDatabase() {
   const selectedVDBObject = VECTOR_DBS.find((vdb) => vdb.value === selectedVDB);
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
       <Sidebar />
       {loading ? (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
         >
           <div className="w-full h-full flex justify-center items-center">
             <PreLoader />
@@ -185,15 +185,15 @@ export default function GeneralVectorDatabase() {
       ) : (
         <div
           style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
+          className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
         >
           <form
             id="vectordb-form"
             onSubmit={handleSubmit}
             className="flex w-full"
           >
-            <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16">
-              <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
+            <div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] py-16 md:py-6">
+              <div className="w-full flex flex-col gap-y-1 pb-6 border-white light:border-theme-sidebar-border border-b-2 border-opacity-10">
                 <div className="flex gap-x-4 items-center">
                   <p className="text-lg leading-6 font-bold text-white">
                     {t("vector.title")}
@@ -224,20 +224,20 @@ export default function GeneralVectorDatabase() {
                   />
                 )}
                 {searchMenuOpen ? (
-                  <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
+                  <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-theme-settings-input-bg rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
                     <div className="w-full flex flex-col gap-y-1">
-                      <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
+                      <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-theme-settings-input-bg">
                         <MagnifyingGlass
                           size={20}
                           weight="bold"
-                          className="absolute left-4 z-30 text-white -ml-4 my-2"
+                          className="absolute left-4 z-30 text-theme-text-primary -ml-4 my-2"
                         />
                         <input
                           type="text"
                           name="vdb-search"
                           autoComplete="off"
                           placeholder="Search all vector database providers"
-                          className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none text-white placeholder:text-white placeholder:font-medium"
+                          className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none text-theme-text-primary placeholder:text-theme-text-primary placeholder:font-medium"
                           onChange={(e) => setSearchQuery(e.target.value)}
                           ref={searchInputRef}
                           onKeyDown={(e) => {
@@ -268,7 +268,7 @@ export default function GeneralVectorDatabase() {
                   </div>
                 ) : (
                   <button
-                    className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
+                    className="w-full max-w-[640px] h-[64px] bg-theme-settings-input-bg rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
                     type="button"
                     onClick={() => setSearchMenuOpen(true)}
                   >
diff --git a/frontend/src/pages/Invite/NewUserModal/index.jsx b/frontend/src/pages/Invite/NewUserModal/index.jsx
index 6a84792f3..5279e2086 100644
--- a/frontend/src/pages/Invite/NewUserModal/index.jsx
+++ b/frontend/src/pages/Invite/NewUserModal/index.jsx
@@ -32,9 +32,9 @@ export default function NewUserModal() {
 
   return (
     <div className="relative w-full max-w-2xl max-h-full">
-      <div className="relative bg-main-gradient rounded-lg shadow">
-        <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
-          <h3 className="text-xl font-semibold text-white">
+      <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
+        <div className="flex items-start justify-between p-4 border-b rounded-t border-theme-modal-border">
+          <h3 className="text-xl font-semibold text-theme-text-primary">
             Create a new account
           </h3>
         </div>
@@ -44,14 +44,14 @@ export default function NewUserModal() {
               <div>
                 <label
                   htmlFor="username"
-                  className="block mb-2 text-sm font-medium text-white"
+                  className="block mb-2 text-sm font-medium text-theme-text-primary"
                 >
                   Username
                 </label>
                 <input
                   name="username"
                   type="text"
-                  className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                  className="bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="My username"
                   minLength={2}
                   required={true}
@@ -61,14 +61,14 @@ export default function NewUserModal() {
               <div>
                 <label
                   htmlFor="password"
-                  className="block mb-2 text-sm font-medium text-white"
+                  className="block mb-2 text-sm font-medium text-theme-text-primary"
                 >
                   Password
                 </label>
                 <input
                   name="password"
                   type="password"
-                  className="bg-zinc-900 border border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                  className="bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
                   placeholder="Your password"
                   required={true}
                   minLength={8}
@@ -76,16 +76,16 @@ export default function NewUserModal() {
                 />
               </div>
               {error && <p className="text-red-400 text-sm">Error: {error}</p>}
-              <p className="text-slate-200 text-xs md:text-sm">
+              <p className="text-theme-text-secondary text-xs md:text-sm">
                 After creating your account you will be able to login with these
                 credentials and start using workspaces.
               </p>
             </div>
           </div>
-          <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
+          <div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-theme-modal-border">
             <button
               type="submit"
-              className="w-full transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800 text-center justify-center"
+              className="w-full transition-all duration-300 border border-theme-text-primary px-4 py-2 rounded-lg text-theme-text-primary text-sm items-center flex gap-x-2 hover:bg-theme-text-primary hover:text-theme-bg-primary focus:ring-gray-800 text-center justify-center"
             >
               Accept Invitation
             </button>
diff --git a/frontend/src/pages/Invite/index.jsx b/frontend/src/pages/Invite/index.jsx
index a7522a54e..e0f3c58d4 100644
--- a/frontend/src/pages/Invite/index.jsx
+++ b/frontend/src/pages/Invite/index.jsx
@@ -32,7 +32,7 @@ export default function InvitePage() {
 
   if (result.status === "loading") {
     return (
-      <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+      <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
         <FullScreenLoader />
       </div>
     );
@@ -40,14 +40,14 @@ export default function InvitePage() {
 
   if (result.status === "invalid") {
     return (
-      <div className="w-screen h-screen overflow-hidden bg-sidebar flex items-center justify-center">
+      <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex items-center justify-center">
         <p className="text-red-400 text-lg">{result.message}</p>
       </div>
     );
   }
 
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex items-center justify-center">
+    <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex items-center justify-center">
       <ModalWrapper isOpen={true}>
         <NewUserModal />
       </ModalWrapper>
diff --git a/frontend/src/pages/Main/index.jsx b/frontend/src/pages/Main/index.jsx
index 36c7a8607..ff8d73f1d 100644
--- a/frontend/src/pages/Main/index.jsx
+++ b/frontend/src/pages/Main/index.jsx
@@ -17,7 +17,7 @@ export default function Main() {
   return (
     <>
       <UserMenu>
-        <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+        <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
           {!isMobile && <Sidebar />}
           <DefaultChatContainer />
         </div>
diff --git a/frontend/src/pages/OnboardingFlow/Steps/CreateWorkspace/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/CreateWorkspace/index.jsx
index fb28cc984..849962ac3 100644
--- a/frontend/src/pages/OnboardingFlow/Steps/CreateWorkspace/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/Steps/CreateWorkspace/index.jsx
@@ -78,7 +78,7 @@ export default function CreateWorkspace({
           <input
             name="name"
             type="text"
-            className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg block w-full p-2.5"
+            className="bg-theme-settings-input-bg text-white focus:outline-primary-button active:outline-primary-button placeholder:text-theme-settings-input-placeholder outline-none text-sm rounded-lg block w-full p-2.5"
             placeholder="My Workspace"
             required={true}
             autoComplete="off"
diff --git a/frontend/src/pages/OnboardingFlow/Steps/DataHandling/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/DataHandling/index.jsx
index d200f60b1..44fbaed66 100644
--- a/frontend/src/pages/OnboardingFlow/Steps/DataHandling/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/Steps/DataHandling/index.jsx
@@ -405,26 +405,28 @@ export default function DataHandling({ setHeader, setForwardBtn, setBackBtn }) {
   return (
     <div className="w-full flex items-center justify-center flex-col gap-y-6">
       <div className="p-8 flex flex-col gap-8">
-        <div className="flex flex-col gap-y-2 border-b border-zinc-500/50 pb-4">
-          <div className="text-white text-base font-bold">LLM Selection</div>
+        <div className="flex flex-col gap-y-2 border-b border-theme-sidebar-border pb-4">
+          <div className="text-theme-text-primary text-base font-bold">
+            LLM Selection
+          </div>
           <div className="flex items-center gap-2.5">
             <img
               src={LLM_SELECTION_PRIVACY[llmChoice].logo}
               alt="LLM Logo"
               className="w-8 h-8 rounded"
             />
-            <p className="text-white text-sm font-bold">
+            <p className="text-theme-text-primary text-sm font-bold">
               {LLM_SELECTION_PRIVACY[llmChoice].name}
             </p>
           </div>
           <ul className="flex flex-col list-disc ml-4">
             {LLM_SELECTION_PRIVACY[llmChoice].description.map((desc) => (
-              <li className="text-white/90 text-sm">{desc}</li>
+              <li className="text-theme-text-primary text-sm">{desc}</li>
             ))}
           </ul>
         </div>
-        <div className="flex flex-col gap-y-2 border-b border-zinc-500/50 pb-4">
-          <div className="text-white text-base font-bold">
+        <div className="flex flex-col gap-y-2 border-b border-theme-sidebar-border pb-4">
+          <div className="text-theme-text-primary text-base font-bold">
             Embedding Preference
           </div>
           <div className="flex items-center gap-2.5">
@@ -433,39 +435,41 @@ export default function DataHandling({ setHeader, setForwardBtn, setBackBtn }) {
               alt="LLM Logo"
               className="w-8 h-8 rounded"
             />
-            <p className="text-white text-sm font-bold">
+            <p className="text-theme-text-primary text-sm font-bold">
               {EMBEDDING_ENGINE_PRIVACY[embeddingEngine].name}
             </p>
           </div>
           <ul className="flex flex-col list-disc ml-4">
             {EMBEDDING_ENGINE_PRIVACY[embeddingEngine].description.map(
               (desc) => (
-                <li className="text-white/90 text-sm">{desc}</li>
+                <li className="text-theme-text-primary text-sm">{desc}</li>
               )
             )}
           </ul>
         </div>
 
         <div className="flex flex-col gap-y-2 pb-4">
-          <div className="text-white text-base font-bold">Vector Database</div>
+          <div className="text-theme-text-primary text-base font-bold">
+            Vector Database
+          </div>
           <div className="flex items-center gap-2.5">
             <img
               src={VECTOR_DB_PRIVACY[vectorDb].logo}
               alt="LLM Logo"
               className="w-8 h-8 rounded"
             />
-            <p className="text-white text-sm font-bold">
+            <p className="text-theme-text-primary text-sm font-bold">
               {VECTOR_DB_PRIVACY[vectorDb].name}
             </p>
           </div>
           <ul className="flex flex-col list-disc ml-4">
             {VECTOR_DB_PRIVACY[vectorDb].description.map((desc) => (
-              <li className="text-white/90 text-sm">{desc}</li>
+              <li className="text-theme-text-primary text-sm">{desc}</li>
             ))}
           </ul>
         </div>
       </div>
-      <p className="text-white/60 text-sm font-medium py-1">
+      <p className="text-theme-text-secondary text-sm font-medium py-1">
         These settings can be reconfigured at any time in the settings.
       </p>
     </div>
diff --git a/frontend/src/pages/OnboardingFlow/Steps/Home/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/Home/index.jsx
index bca66843e..9c1e752e0 100644
--- a/frontend/src/pages/OnboardingFlow/Steps/Home/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/Steps/Home/index.jsx
@@ -1,35 +1,54 @@
 import paths from "@/utils/paths";
 import LGroupImg from "./l_group.png";
 import RGroupImg from "./r_group.png";
+import LGroupImgLight from "./l_group-light.png";
+import RGroupImgLight from "./r_group-light.png";
 import AnythingLLMLogo from "@/media/logo/anything-llm.png";
 import { useNavigate } from "react-router-dom";
+import { useTheme } from "@/hooks/useTheme";
+
+const IMG_SRCSET = {
+  light: {
+    l: LGroupImgLight,
+    r: RGroupImgLight,
+  },
+  default: {
+    l: LGroupImg,
+    r: RGroupImg,
+  },
+};
 
 export default function OnboardingHome() {
   const navigate = useNavigate();
+  const { theme } = useTheme();
+  const srcSet = IMG_SRCSET?.[theme] || IMG_SRCSET.default;
+
   return (
     <>
-      <div className="relative w-screen h-screen flex overflow-hidden bg-mobile-onboarding md:bg-main-gradient">
+      <div className="relative w-screen h-screen flex overflow-hidden bg-theme-bg-primary">
         <div
           className="hidden md:block fixed bottom-10 left-10 w-[320px] h-[320px] bg-no-repeat bg-contain"
-          style={{ backgroundImage: `url(${LGroupImg})` }}
+          style={{ backgroundImage: `url(${srcSet.l})` }}
         ></div>
 
         <div
           className="hidden md:block fixed top-10 right-10 w-[320px] h-[320px] bg-no-repeat bg-contain"
-          style={{ backgroundImage: `url(${RGroupImg})` }}
+          style={{ backgroundImage: `url(${srcSet.r})` }}
         ></div>
 
         <div className="relative flex justify-center items-center m-auto">
           <div className="flex flex-col justify-center items-center">
-            <p className="text-zinc-300 font-thin text-[24px]">Welcome to</p>
+            <p className="text-theme-text-primary font-thin text-[24px]">
+              Welcome to
+            </p>
             <img
               src={AnythingLLMLogo}
               alt="AnythingLLM"
-              className="md:h-[50px] flex-shrink-0 max-w-[300px]"
+              className="md:h-[50px] flex-shrink-0 max-w-[300px] light:invert"
             />
             <button
               onClick={() => navigate(paths.onboarding.llmPreference())}
-              className="animate-pulse w-full md:max-w-[350px] md:min-w-[300px] text-center py-3 bg-white text-black font-semibold text-sm my-10 rounded-md hover:bg-gray-200"
+              className="border-[2px] border-theme-text-primary animate-pulse light:animate-none w-full md:max-w-[350px] md:min-w-[300px] text-center py-3 bg-theme-button-primary hover:bg-theme-bg-secondary text-theme-text-primary font-semibold text-sm my-10 rounded-md "
             >
               Get started
             </button>
diff --git a/frontend/src/pages/OnboardingFlow/Steps/Home/l_group-light.png b/frontend/src/pages/OnboardingFlow/Steps/Home/l_group-light.png
new file mode 100644
index 000000000..646270d2a
Binary files /dev/null and b/frontend/src/pages/OnboardingFlow/Steps/Home/l_group-light.png differ
diff --git a/frontend/src/pages/OnboardingFlow/Steps/Home/l_group.png b/frontend/src/pages/OnboardingFlow/Steps/Home/l_group.png
index 2981196a3..21fc89e34 100644
Binary files a/frontend/src/pages/OnboardingFlow/Steps/Home/l_group.png and b/frontend/src/pages/OnboardingFlow/Steps/Home/l_group.png differ
diff --git a/frontend/src/pages/OnboardingFlow/Steps/Home/r_group-light.png b/frontend/src/pages/OnboardingFlow/Steps/Home/r_group-light.png
new file mode 100644
index 000000000..cb60436c2
Binary files /dev/null and b/frontend/src/pages/OnboardingFlow/Steps/Home/r_group-light.png differ
diff --git a/frontend/src/pages/OnboardingFlow/Steps/Home/r_group.png b/frontend/src/pages/OnboardingFlow/Steps/Home/r_group.png
index fc50fd52c..305e17933 100644
Binary files a/frontend/src/pages/OnboardingFlow/Steps/Home/r_group.png and b/frontend/src/pages/OnboardingFlow/Steps/Home/r_group.png differ
diff --git a/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx
index 5f58cba1a..69704f19c 100644
--- a/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/Steps/LLMPreference/index.jsx
@@ -316,18 +316,18 @@ export default function LLMPreference({
   return (
     <div>
       <form ref={formRef} onSubmit={handleSubmit} className="w-full">
-        <div className="w-full relative border-slate-300/40 shadow border-2 rounded-lg text-white">
+        <div className="w-full relative border-theme-chat-input-border shadow border-2 rounded-lg text-white">
           <div className="w-full p-4 absolute top-0 rounded-t-lg backdrop-blur-sm">
             <div className="w-full flex items-center sticky top-0">
               <MagnifyingGlass
                 size={16}
                 weight="bold"
-                className="absolute left-4 z-30 text-white"
+                className="absolute left-4 z-30 text-theme-text-primary"
               />
               <input
                 type="text"
                 placeholder="Search LLM providers"
-                className="bg-zinc-600 z-20 pl-10 h-[38px] rounded-full w-full px-4 py-1 text-sm border-2 border-slate-300/40 outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white"
+                className="bg-theme-bg-secondary placeholder:text-theme-text-secondary z-20 pl-10 h-[38px] rounded-full w-full px-4 py-1 text-sm border border-theme-chat-input-border outline-none focus:outline-primary-button active:outline-primary-button outline-none text-theme-text-primary"
                 onChange={(e) => setSearchQuery(e.target.value)}
                 autoComplete="off"
                 onKeyDown={(e) => {
diff --git a/frontend/src/pages/OnboardingFlow/Steps/Survey/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/Survey/index.jsx
index 14781381f..7c14c3116 100644
--- a/frontend/src/pages/OnboardingFlow/Steps/Survey/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/Steps/Survey/index.jsx
@@ -123,10 +123,13 @@ export default function Survey({ setHeader, setForwardBtn, setBackBtn }) {
   }
 
   return (
-    <div className="w-full flex justify-center">
+    <div className="w-full flex justify-center bo">
       <form onSubmit={handleSubmit} ref={formRef} className="">
         <div className="md:min-w-[400px]">
-          <label htmlFor="email" className="text-white text-base font-medium">
+          <label
+            htmlFor="email"
+            className="text-theme-text-primary text-base font-medium"
+          >
             What's your email?{" "}
           </label>
           <input
@@ -134,22 +137,24 @@ export default function Survey({ setHeader, setForwardBtn, setBackBtn }) {
             type="email"
             placeholder="you@gmail.com"
             required={true}
-            className="mt-2 bg-zinc-900 text-white placeholder:text-white/20 text-sm font-medium font-['Plus Jakarta Sans'] leading-tight w-full h-11 p-2.5 bg-zinc-900 rounded-lg"
+            className="mt-2 bg-theme-settings-input-bg text-white focus:outline-primary-button active:outline-primary-button placeholder:text-theme-settings-input-placeholder outline-none text-sm font-medium font-['Plus Jakarta Sans'] leading-tight w-full h-11 p-2.5 bg-theme-settings-input-bg rounded-lg"
           />
         </div>
 
         <div className="mt-8">
           <label
-            className="text-white text-base font-medium"
+            className="text-theme-text-primary text-base font-medium"
             htmlFor="use_case"
           >
             What will you use AnythingLLM for?{" "}
           </label>
           <div className="mt-2 gap-y-3 flex flex-col">
             <label
-              className={`transition-all duration-300 w-full h-11 p-2.5 bg-white/10 rounded-lg flex justify-start items-center gap-2.5 cursor-pointer border border-transparent ${
-                selectedOption === "job" ? "border-white border-opacity-40" : ""
-              } hover:border-white/60`}
+              className={`transition-all duration-300 w-full h-11 p-2.5 rounded-lg flex justify-start items-center gap-2.5 cursor-pointer border ${
+                selectedOption === "job"
+                  ? "border-theme-sidebar-item-workspace-active bg-theme-bg-secondary"
+                  : "border-theme-sidebar-border"
+              } hover:border-theme-sidebar-border hover:bg-theme-bg-secondary`}
             >
               <input
                 type="radio"
@@ -160,20 +165,22 @@ export default function Survey({ setHeader, setForwardBtn, setBackBtn }) {
                 className="hidden"
               />
               <div
-                className={`w-4 h-4 rounded-full border-2 border-white mr-2 ${
-                  selectedOption === "job" ? "bg-white" : ""
+                className={`w-4 h-4 rounded-full border-2 border-theme-sidebar-border mr-2 ${
+                  selectedOption === "job"
+                    ? "bg-[var(--theme-sidebar-item-workspace-active)]"
+                    : ""
                 }`}
               ></div>
-              <div className="text-white text-sm font-medium font-['Plus Jakarta Sans'] leading-tight">
+              <div className="text-theme-text-primary text-sm font-medium font-['Plus Jakarta Sans'] leading-tight">
                 For work
               </div>
             </label>
             <label
-              className={`transition-all duration-300 w-full h-11 p-2.5 bg-white/10 rounded-lg flex justify-start items-center gap-2.5 cursor-pointer border border-transparent ${
+              className={`transition-all  duration-300 w-full h-11 p-2.5 rounded-lg flex justify-start items-center gap-2.5 cursor-pointer border ${
                 selectedOption === "personal"
-                  ? "border-white border-opacity-40"
-                  : ""
-              } hover:border-white/60`}
+                  ? "border-theme-sidebar-item-workspace-active bg-theme-bg-secondary"
+                  : "border-theme-sidebar-border"
+              } hover:border-theme-sidebar-border hover:bg-theme-bg-secondary`}
             >
               <input
                 type="radio"
@@ -184,20 +191,22 @@ export default function Survey({ setHeader, setForwardBtn, setBackBtn }) {
                 className="hidden"
               />
               <div
-                className={`w-4 h-4 rounded-full border-2 border-white mr-2 ${
-                  selectedOption === "personal" ? "bg-white" : ""
+                className={`w-4 h-4 rounded-full border-2 border-theme-sidebar-border mr-2 ${
+                  selectedOption === "personal"
+                    ? "bg-[var(--theme-sidebar-item-workspace-active)]"
+                    : ""
                 }`}
               ></div>
-              <div className="text-white text-sm font-medium font-['Plus Jakarta Sans'] leading-tight">
+              <div className="text-theme-text-primary text-sm font-medium font-['Plus Jakarta Sans'] leading-tight">
                 For my personal use
               </div>
             </label>
             <label
-              className={`transition-all duration-300 w-full h-11 p-2.5 bg-white/10 rounded-lg flex justify-start items-center gap-2.5 cursor-pointer border border-transparent ${
+              className={`transition-all duration-300 w-full h-11 p-2.5 rounded-lg flex justify-start items-center gap-2.5 cursor-pointer border-[1px] ${
                 selectedOption === "other"
-                  ? "border-white border-opacity-40"
-                  : ""
-              } hover:border-white/60`}
+                  ? "border-theme-sidebar-item-workspace-active bg-theme-bg-secondary"
+                  : "border-theme-sidebar-border"
+              } hover:border-theme-sidebar-border hover:bg-theme-bg-secondary`}
             >
               <input
                 type="radio"
@@ -208,11 +217,13 @@ export default function Survey({ setHeader, setForwardBtn, setBackBtn }) {
                 className="hidden"
               />
               <div
-                className={`w-4 h-4 rounded-full border-2 border-white mr-2 ${
-                  selectedOption === "other" ? "bg-white" : ""
+                className={`w-4 h-4 rounded-full border-2 border-theme-sidebar-border mr-2 ${
+                  selectedOption === "other"
+                    ? "bg-[var(--theme-sidebar-item-workspace-active)]"
+                    : ""
                 }`}
               ></div>
-              <div className="text-white text-sm font-medium font-['Plus Jakarta Sans'] leading-tight">
+              <div className="text-theme-text-primary text-sm font-medium font-['Plus Jakarta Sans'] leading-tight">
                 Other
               </div>
             </label>
@@ -229,7 +240,7 @@ export default function Survey({ setHeader, setForwardBtn, setBackBtn }) {
           <textarea
             name="comment"
             rows={5}
-            className="mt-2 bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+            className="mt-2 bg-theme-settings-input-bg text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button placeholder:text-theme-settings-input-placeholder outline-none block w-full p-2.5"
             placeholder="If you have any questions or comments right now, you can leave them here and we will get back to you. You can also email team@mintplexlabs.com"
             wrap="soft"
             autoComplete="off"
diff --git a/frontend/src/pages/OnboardingFlow/Steps/UserSetup/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/UserSetup/index.jsx
index 04625abf4..ebd0461a9 100644
--- a/frontend/src/pages/OnboardingFlow/Steps/UserSetup/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/Steps/UserSetup/index.jsx
@@ -54,7 +54,7 @@ export default function UserSetup({ setHeader, setForwardBtn, setBackBtn }) {
 
   return (
     <div className="w-full flex items-center justify-center flex-col gap-y-6">
-      <div className="flex flex-col border rounded-lg border-white/20 p-8 items-center gap-y-4 w-full max-w-[600px]">
+      <div className="flex flex-col border rounded-lg border-white/20 light:border-theme-sidebar-border p-8 items-center gap-y-4 w-full max-w-[600px]">
         <div className=" text-white text-sm font-semibold md:-ml-44">
           How many people will be using your instance?
         </div>
@@ -64,7 +64,7 @@ export default function UserSetup({ setHeader, setForwardBtn, setBackBtn }) {
             className={`${
               selectedOption === "just_me"
                 ? "text-sky-400 border-sky-400/70"
-                : "text-white border-white/40"
+                : "text-theme-text-primary border-theme-sidebar-border"
             } min-w-[230px] h-11 p-4 rounded-[10px] border-2  justify-center items-center gap-[100px] inline-flex hover:border-sky-400/70 hover:text-sky-400 transition-all duration-300`}
           >
             <div className="text-center text-sm font-bold">Just me</div>
@@ -74,7 +74,7 @@ export default function UserSetup({ setHeader, setForwardBtn, setBackBtn }) {
             className={`${
               selectedOption === "my_team"
                 ? "text-sky-400 border-sky-400/70"
-                : "text-white border-white/40"
+                : "text-theme-text-primary border-theme-sidebar-border"
             } min-w-[230px] h-11 p-4 rounded-[10px] border-2  justify-center items-center gap-[100px] inline-flex hover:border-sky-400/70 hover:text-sky-400 transition-all duration-300`}
           >
             <div className="text-center text-sm font-bold">My team</div>
@@ -160,7 +160,7 @@ const JustMe = ({
   });
   return (
     <div className="w-full flex items-center justify-center flex-col gap-y-6">
-      <div className="flex flex-col border rounded-lg border-white/20 p-8 items-center gap-y-4 w-full max-w-[600px]">
+      <div className="flex flex-col border rounded-lg border-white/20 light:border-theme-sidebar-border p-8 items-center gap-y-4 w-full max-w-[600px]">
         <div className=" text-white text-sm font-semibold md:-ml-56">
           Would you like to set up a password?
         </div>
@@ -170,7 +170,7 @@ const JustMe = ({
             className={`${
               enablePassword && itemSelected
                 ? "text-sky-400 border-sky-400/70"
-                : "text-white border-white/40"
+                : "text-theme-text-primary border-theme-sidebar-border"
             } min-w-[230px] h-11 p-4 rounded-[10px] border-2  justify-center items-center gap-[100px] inline-flex hover:border-sky-400/70 hover:text-sky-400 transition-all duration-300`}
           >
             <div className="text-center text-sm font-bold">Yes</div>
@@ -180,7 +180,7 @@ const JustMe = ({
             className={`${
               !enablePassword && itemSelected
                 ? "text-sky-400 border-sky-400/70"
-                : "text-white border-white/40"
+                : "text-theme-text-primary border-theme-sidebar-border"
             } min-w-[230px] h-11 p-4 rounded-[10px] border-2  justify-center items-center gap-[100px] inline-flex hover:border-sky-400/70 hover:text-sky-400 transition-all duration-300`}
           >
             <div className="text-center text-sm font-bold">No</div>
@@ -197,7 +197,7 @@ const JustMe = ({
             <input
               name="password"
               type="password"
-              className="bg-zinc-900 text-white text-sm rounded-lg block w-full p-2.5 focus:outline-primary-button active:outline-primary-button outline-none"
+              className="bg-theme-settings-input-bg text-white text-sm rounded-lg block w-full p-2.5 focus:outline-primary-button active:outline-primary-button outline-none placeholder:text-theme-text-secondary"
               placeholder="Your admin password"
               minLength={6}
               required={true}
@@ -265,7 +265,7 @@ const MyTeam = ({ setMultiUserLoginValid, myTeamSubmitRef, navigate }) => {
     }
   }, [username, password]);
   return (
-    <div className="w-full flex items-center justify-center border max-w-[600px] rounded-lg border-white/20">
+    <div className="w-full flex items-center justify-center border max-w-[600px] rounded-lg border-white/20 light:border-theme-sidebar-border">
       <form onSubmit={handleSubmit}>
         <div className="flex flex-col w-full md:px-8 px-2 py-4">
           <div className="space-y-6 flex h-full w-full">
@@ -280,7 +280,7 @@ const MyTeam = ({ setMultiUserLoginValid, myTeamSubmitRef, navigate }) => {
                 <input
                   name="username"
                   type="text"
-                  className="bg-zinc-900 text-white text-sm rounded-lg block w-full p-2.5 focus:outline-primary-button active:outline-primary-button outline-none"
+                  className="bg-theme-settings-input-bg text-white text-sm rounded-lg block w-full p-2.5 focus:outline-primary-button active:outline-primary-button placeholder:text-theme-text-secondary outline-none"
                   placeholder="Your admin username"
                   minLength={6}
                   required={true}
@@ -303,7 +303,7 @@ const MyTeam = ({ setMultiUserLoginValid, myTeamSubmitRef, navigate }) => {
                 <input
                   name="password"
                   type="password"
-                  className="bg-zinc-900 text-white text-sm rounded-lg block w-full p-2.5 focus:outline-primary-button active:outline-primary-button outline-none"
+                  className="bg-theme-settings-input-bg text-white text-sm rounded-lg block w-full p-2.5 focus:outline-primary-button active:outline-primary-button placeholder:text-theme-text-secondary outline-none"
                   placeholder="Your admin password"
                   minLength={8}
                   required={true}
@@ -317,8 +317,8 @@ const MyTeam = ({ setMultiUserLoginValid, myTeamSubmitRef, navigate }) => {
             </div>
           </div>
         </div>
-        <div className="flex w-full justify-between items-center px-6 py-4 space-x-6 border-t rounded-b border-gray-500/50">
-          <div className=" text-white text-opacity-80 text-xs font-base">
+        <div className="flex w-full justify-between items-center px-6 py-4 space-x-6 border-t rounded-b border-theme-sidebar-border">
+          <div className="text-theme-text-secondary text-opacity-80 text-xs font-base">
             By default, you will be the only admin. Once onboarding is completed
             you can create and invite others to be users or admins. Do not lose
             your password as only admins can reset passwords.
diff --git a/frontend/src/pages/OnboardingFlow/Steps/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/index.jsx
index 2d990a8fd..bc222b826 100644
--- a/frontend/src/pages/OnboardingFlow/Steps/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/Steps/index.jsx
@@ -37,14 +37,17 @@ export function OnboardingLayout({ children }) {
 
   if (isMobile) {
     return (
-      <div className="w-screen h-screen overflow-y-auto bg-mobile-onboarding overflow-hidden">
+      <div
+        data-layout="onboarding"
+        className="w-screen h-screen overflow-y-auto bg-theme-bg-primary overflow-hidden"
+      >
         <div className="flex flex-col">
           <div className="w-full relative py-10 px-2">
             <div className="flex flex-col w-fit mx-auto gap-y-1 mb-[55px]">
-              <h1 className="text-white font-semibold text-center text-2xl">
+              <h1 className="text-theme-text-primary font-semibold text-center text-2xl">
                 {header.title}
               </h1>
-              <p className="text-zinc-400 text-base text-center">
+              <p className="text-theme-text-secondary text-base text-center">
                 {header.description}
               </p>
             </div>
@@ -87,17 +90,20 @@ export function OnboardingLayout({ children }) {
   }
 
   return (
-    <div className="w-screen overflow-y-auto bg-mobile-onboarding md:bg-main-gradient flex justify-center overflow-hidden">
+    <div
+      data-layout="onboarding"
+      className="w-screen overflow-y-auto bg-theme-bg-primary flex justify-center overflow-hidden"
+    >
       <div className="flex w-1/5 h-screen justify-center items-center">
         {backBtn.showing && (
           <button
             disabled={backBtn.disabled}
             onClick={backBtn.onClick}
-            className="group p-2 rounded-lg border-2 border-zinc-600 h-fit w-fit disabled:cursor-not-allowed hover:bg-zinc-100 disabled:hover:bg-transparent"
+            className="group p-2 rounded-lg border-2 border-theme-sidebar-border h-fit w-fit disabled:cursor-not-allowed hover:bg-theme-bg-secondary disabled:hover:bg-transparent"
             aria-label="Back"
           >
             <ArrowLeft
-              className="group-hover:text-black text-gray-500"
+              className="text-theme-text-secondary group-hover:text-theme-text-primary group-disabled:text-gray-500"
               size={30}
             />
           </button>
@@ -106,10 +112,10 @@ export function OnboardingLayout({ children }) {
 
       <div className="w-full md:w-3/5 relative h-full py-10">
         <div className="flex flex-col w-fit mx-auto gap-y-1 mb-[55px]">
-          <h1 className="text-white font-semibold text-center text-2xl">
+          <h1 className="text-theme-text-primary font-semibold text-center text-2xl">
             {header.title}
           </h1>
-          <p className="text-zinc-400 text-base text-center">
+          <p className="text-theme-text-secondary text-base text-center">
             {header.description}
           </p>
         </div>
@@ -121,11 +127,11 @@ export function OnboardingLayout({ children }) {
           <button
             disabled={forwardBtn.disabled}
             onClick={forwardBtn.onClick}
-            className="group p-2 rounded-lg border-2 border-zinc-300 disabled:border-zinc-600 h-fit w-fit disabled:cursor-not-allowed hover:bg-zinc-100 disabled:hover:bg-transparent"
+            className="group p-2 rounded-lg border-2 border-theme-sidebar-border h-fit w-fit disabled:cursor-not-allowed hover:bg-theme-bg-secondary disabled:hover:bg-transparent"
             aria-label="Continue"
           >
             <ArrowRight
-              className="text-white group-hover:text-black group-disabled:text-gray-500"
+              className="text-theme-text-secondary group-hover:text-theme-text-primary group-disabled:text-gray-500"
               size={30}
             />
           </button>
diff --git a/frontend/src/pages/WorkspaceChat/index.jsx b/frontend/src/pages/WorkspaceChat/index.jsx
index 6c5fcfb13..aa924fc56 100644
--- a/frontend/src/pages/WorkspaceChat/index.jsx
+++ b/frontend/src/pages/WorkspaceChat/index.jsx
@@ -45,7 +45,7 @@ function ShowWorkspaceChat() {
 
   return (
     <>
-      <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+      <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
         {!isMobile && <Sidebar />}
         <WorkspaceChatContainer loading={loading} workspace={workspace} />
       </div>
diff --git a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx
index e9cb295e4..10bb03473 100644
--- a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx
@@ -35,8 +35,8 @@ export default function WorkspaceLLM({
     <>
       <div
         onClick={handleProviderSelection}
-        className={`w-full p-2 rounded-md hover:cursor-pointer hover:bg-white/10 ${
-          checked ? "bg-white/10" : ""
+        className={`w-full p-2 rounded-md hover:cursor-pointer hover:bg-theme-bg-secondary ${
+          checked ? "bg-theme-bg-secondary" : ""
         }`}
       >
         <input
@@ -55,7 +55,7 @@ export default function WorkspaceLLM({
           />
           <div className="flex flex-col">
             <div className="text-sm font-semibold text-white">{name}</div>
-            <div className="mt-1 text-xs text-description">{description}</div>
+            <div className="mt-1 text-xs text-white/60">{description}</div>
           </div>
         </div>
       </div>
@@ -102,42 +102,44 @@ function SetupProvider({
   // to the parent container form so we don't have nested forms.
   return createPortal(
     <ModalWrapper isOpen={isOpen}>
-      <div className="relative w-fit max-w-1/2 max-h-full">
-        <div className="relative bg-main-gradient rounded-xl shadow-[0_4px_14px_rgba(0,0,0,0.25)]">
-          <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
-            <h3 className="text-xl font-semibold text-white">
-              Setup {LLMOption.name}
-            </h3>
+      <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
+        <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
+          <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+            <div className="w-full flex gap-x-2 items-center">
+              <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+                Setup {LLMOption.name}
+              </h3>
+            </div>
             <button
               onClick={closeModal}
               type="button"
-              className="border-none transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
-              data-modal-hide="staticModal"
+              className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
             >
-              <X className="text-gray-300 text-lg" />
+              <X size={24} weight="bold" className="text-white" />
             </button>
           </div>
-
           <form id="provider-form" onSubmit={handleUpdate}>
-            <div className="py-[17px] px-[20px] flex flex-col gap-y-6">
-              <p className="text-sm text-white">
-                To use {LLMOption.name} as this workspace's LLM you need to set
-                it up first.
-              </p>
-              <div>{LLMOption.options({ credentialsOnly: true })}</div>
+            <div className="px-7 py-6">
+              <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
+                <p className="text-sm text-white/60">
+                  To use {LLMOption.name} as this workspace's LLM you need to
+                  set it up first.
+                </p>
+                <div>{LLMOption.options({ credentialsOnly: true })}</div>
+              </div>
             </div>
-            <div className="flex w-full justify-between items-center p-3 space-x-2 border-t rounded-b border-gray-500/50">
+            <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border px-7 pb-6">
               <button
                 type="button"
                 onClick={closeModal}
-                className="border-none text-xs px-2 py-1 font-semibold rounded-lg bg-white hover:bg-transparent border-2 border-transparent hover:border-white hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
+                className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
               >
                 Cancel
               </button>
               <button
                 type="submit"
                 form="provider-form"
-                className="border-none text-xs px-2 py-1 font-semibold rounded-lg bg-primary-button hover:bg-secondary border-2 border-transparent hover:border-primary-button hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
+                className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
               >
                 Save {LLMOption.name} settings
               </button>
diff --git a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/index.jsx b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/index.jsx
index 1e21e50b3..6025d2953 100644
--- a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/index.jsx
@@ -128,20 +128,20 @@ export default function AgentLLMSelection({
           />
         )}
         {searchMenuOpen ? (
-          <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
+          <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-theme-settings-input-bg rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
             <div className="w-full flex flex-col gap-y-1">
-              <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
+              <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-theme-settings-input-bg">
                 <MagnifyingGlass
                   size={20}
                   weight="bold"
-                  className="absolute left-4 z-30 text-white -ml-4 my-2"
+                  className="absolute left-4 z-30 text-theme-text-primary -ml-4 my-2"
                 />
                 <input
                   type="text"
                   name="llm-search"
                   autoComplete="off"
                   placeholder="Search available LLM providers"
-                  className="border-none -ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none text-white placeholder:text-white placeholder:font-medium"
+                  className="border-none -ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none text-theme-text-primary placeholder:text-theme-text-primary placeholder:font-medium"
                   onChange={(e) => setSearchQuery(e.target.value)}
                   ref={searchInputRef}
                   onKeyDown={(e) => {
@@ -151,7 +151,7 @@ export default function AgentLLMSelection({
                 <X
                   size={20}
                   weight="bold"
-                  className="cursor-pointer text-white hover:text-x-button"
+                  className="cursor-pointer text-theme-text-primary hover:text-x-button"
                   onClick={handleXButton}
                 />
               </div>
@@ -173,7 +173,7 @@ export default function AgentLLMSelection({
           </div>
         ) : (
           <button
-            className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
+            className="w-full max-w-[640px] h-[64px] bg-theme-settings-input-bg rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
             type="button"
             onClick={() => setSearchMenuOpen(true)}
           >
diff --git a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentModelSelection/index.jsx b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentModelSelection/index.jsx
index aeb9db067..df850d33a 100644
--- a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentModelSelection/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentModelSelection/index.jsx
@@ -78,7 +78,7 @@ export default function AgentModelSelection({
           name="agentModel"
           required={true}
           disabled={true}
-          className="bg-zinc-900 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+          className="bg-theme-settings-input-bg text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             {t("agent.mode.wait")}
@@ -105,7 +105,7 @@ export default function AgentModelSelection({
         onChange={() => {
           setHasChanges(true);
         }}
-        className="bg-zinc-900 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+        className="bg-theme-settings-input-bg text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
       >
         {defaultModels.length > 0 && (
           <optgroup label="General models">
diff --git a/frontend/src/pages/WorkspaceSettings/AgentConfig/index.jsx b/frontend/src/pages/WorkspaceSettings/AgentConfig/index.jsx
index d0db3a684..1508f0ad2 100644
--- a/frontend/src/pages/WorkspaceSettings/AgentConfig/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/AgentConfig/index.jsx
@@ -128,8 +128,8 @@ function LoadingSkeleton() {
           height={100}
           width="100%"
           count={2}
-          baseColor="#292524"
-          highlightColor="#4c4948"
+          highlightColor="var(--theme-bg-primary)"
+          baseColor="var(--theme-bg-secondary)"
           enableAnimation={true}
           containerClassName="flex flex-col gap-y-1"
         />
@@ -138,8 +138,8 @@ function LoadingSkeleton() {
           height={100}
           width="100%"
           count={2}
-          baseColor="#292524"
-          highlightColor="#4c4948"
+          highlightColor="var(--theme-bg-primary)"
+          baseColor="var(--theme-bg-secondary)"
           enableAnimation={true}
           containerClassName="flex flex-col gap-y-1 mt-4"
         />
diff --git a/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatHistorySettings/index.jsx b/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatHistorySettings/index.jsx
index faa621031..ae8a6539f 100644
--- a/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatHistorySettings/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatHistorySettings/index.jsx
@@ -21,7 +21,7 @@ export default function ChatHistorySettings({ workspace, setHasChanges }) {
         step={1}
         onWheel={(e) => e.target.blur()}
         defaultValue={workspace?.openAiHistory ?? 20}
-        className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+        className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
         placeholder="20"
         required={true}
         autoComplete="off"
diff --git a/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatModeSelection/index.jsx b/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatModeSelection/index.jsx
index 135cbf9e6..3b507c721 100644
--- a/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatModeSelection/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatModeSelection/index.jsx
@@ -12,7 +12,7 @@ export default function ChatModeSelection({ workspace, setHasChanges }) {
       </div>
 
       <div className="flex flex-col gap-y-1 mt-2">
-        <div className="w-fit flex gap-x-1 items-center p-1 rounded-lg bg-zinc-800 ">
+        <div className="w-fit flex gap-x-1 items-center p-1 rounded-lg bg-theme-settings-input-bg ">
           <input type="hidden" name="chatMode" value={chatMode} />
           <button
             type="button"
diff --git a/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatPromptSettings/index.jsx b/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatPromptSettings/index.jsx
index 0b50e941d..363b1974b 100644
--- a/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatPromptSettings/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatPromptSettings/index.jsx
@@ -16,7 +16,7 @@ export default function ChatPromptSettings({ workspace, setHasChanges }) {
         name="openAiPrompt"
         rows={5}
         defaultValue={chatPrompt(workspace)}
-        className="bg-zinc-900 placeholder:text-white/20 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 mt-2"
+        className="bg-theme-settings-input-bg placeholder:text-theme-settings-input-placeholder text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5 mt-2"
         placeholder="Given the following conversation, relevant context, and a follow up question, reply with an answer to the current question the user is asking. Return only your response to the question given the above information following the users instructions as needed."
         required={true}
         wrap="soft"
diff --git a/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatQueryRefusalResponse/index.jsx b/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatQueryRefusalResponse/index.jsx
index f540c3bcb..93c5a9a61 100644
--- a/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatQueryRefusalResponse/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatQueryRefusalResponse/index.jsx
@@ -10,7 +10,7 @@ export default function ChatQueryRefusalResponse({ workspace, setHasChanges }) {
         </label>
         <p className="text-white text-opacity-60 text-xs font-medium py-1.5">
           {t("chat.refusal.desc-start")}{" "}
-          <code className="bg-zinc-900 p-0.5 rounded-sm">
+          <code className="bg-theme-settings-input-bg p-0.5 rounded-sm">
             {t("chat.refusal.query")}
           </code>{" "}
           {t("chat.refusal.desc-end")}
@@ -20,7 +20,7 @@ export default function ChatQueryRefusalResponse({ workspace, setHasChanges }) {
         name="queryRefusalResponse"
         rows={2}
         defaultValue={chatQueryRefusalResponse(workspace)}
-        className="border-none bg-zinc-900 placeholder:text-white/20 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 mt-2"
+        className="border-none bg-theme-settings-input-bg placeholder:text-theme-settings-input-placeholder text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5 mt-2"
         placeholder="The text returned in query mode when there is no relevant context found for a response."
         required={true}
         wrap="soft"
diff --git a/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatTemperatureSettings/index.jsx b/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatTemperatureSettings/index.jsx
index a4478e318..dbab7417e 100644
--- a/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatTemperatureSettings/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/ChatSettings/ChatTemperatureSettings/index.jsx
@@ -37,7 +37,7 @@ export default function ChatTemperatureSettings({
         step={0.1}
         onWheel={(e) => e.target.blur()}
         defaultValue={workspace?.openAiTemp ?? defaults.temp}
-        className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+        className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
         placeholder="0.7"
         required={true}
         autoComplete="off"
diff --git a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/ChatModelSelection/index.jsx b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/ChatModelSelection/index.jsx
index 0ca6d0a49..bd79b5f42 100644
--- a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/ChatModelSelection/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/ChatModelSelection/index.jsx
@@ -28,7 +28,7 @@ export default function ChatModelSelection({
           name="chatModel"
           required={true}
           disabled={true}
-          className="bg-zinc-900 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+          className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
         >
           <option disabled={true} selected={true}>
             -- waiting for models --
@@ -55,7 +55,7 @@ export default function ChatModelSelection({
         onChange={() => {
           setHasChanges(true);
         }}
-        className="bg-zinc-900 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+        className="bg-theme-settings-input-bg text-white text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
       >
         {defaultModels.length > 0 && (
           <optgroup label="General models">
diff --git a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx
index 610298ee0..a8017b2ec 100644
--- a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx
@@ -35,8 +35,8 @@ export default function WorkspaceLLM({
     <>
       <div
         onClick={handleProviderSelection}
-        className={`w-full p-2 rounded-md hover:cursor-pointer hover:bg-white/10 ${
-          checked ? "bg-white/10" : ""
+        className={`w-full p-2 rounded-md hover:cursor-pointer hover:bg-theme-bg-secondary ${
+          checked ? "bg-theme-bg-secondary" : ""
         }`}
       >
         <input
@@ -55,7 +55,7 @@ export default function WorkspaceLLM({
           />
           <div className="flex flex-col">
             <div className="text-sm font-semibold text-white">{name}</div>
-            <div className="mt-1 text-xs text-description">{description}</div>
+            <div className="mt-1 text-xs text-white/60">{description}</div>
           </div>
         </div>
       </div>
@@ -102,42 +102,44 @@ function SetupProvider({
   // to the parent container form so we don't have nested forms.
   return createPortal(
     <ModalWrapper isOpen={isOpen}>
-      <div className="relative w-fit max-w-1/2 max-h-full">
-        <div className="relative bg-main-gradient rounded-xl shadow-[0_4px_14px_rgba(0,0,0,0.25)]">
-          <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
-            <h3 className="text-xl font-semibold text-white">
-              Setup {LLMOption.name}
-            </h3>
+      <div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
+        <div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
+          <div className="relative p-6 border-b rounded-t border-theme-modal-border">
+            <div className="w-full flex gap-x-2 items-center">
+              <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
+                Setup {LLMOption.name}
+              </h3>
+            </div>
             <button
               onClick={closeModal}
               type="button"
-              className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
-              data-modal-hide="staticModal"
+              className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
             >
-              <X className="text-gray-300 text-lg" />
+              <X size={24} weight="bold" className="text-white" />
             </button>
           </div>
-
           <form id="provider-form" onSubmit={handleUpdate}>
-            <div className="py-[17px] px-[20px] flex flex-col gap-y-6">
-              <p className="text-sm text-white">
-                To use {LLMOption.name} as this workspace's LLM you need to set
-                it up first.
-              </p>
-              <div>{LLMOption.options({ credentialsOnly: true })}</div>
+            <div className="px-7 py-6">
+              <div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
+                <p className="text-sm text-white/60">
+                  To use {LLMOption.name} as this workspace's LLM you need to
+                  set it up first.
+                </p>
+                <div>{LLMOption.options({ credentialsOnly: true })}</div>
+              </div>
             </div>
-            <div className="flex w-full justify-between items-center p-3 space-x-2 border-t rounded-b border-gray-500/50">
+            <div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border px-7 pb-6">
               <button
                 type="button"
                 onClick={closeModal}
-                className="text-xs px-2 py-1 font-semibold rounded-lg bg-white hover:bg-transparent border-2 border-transparent hover:border-white hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
+                className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
               >
                 Cancel
               </button>
               <button
                 type="submit"
                 form="provider-form"
-                className="text-xs px-2 py-1 font-semibold rounded-lg bg-primary-button hover:bg-secondary border-2 border-transparent hover:border-primary-button hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
+                className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
               >
                 Save {LLMOption.name} settings
               </button>
diff --git a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/index.jsx b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/index.jsx
index 7cd5653e3..49301931a 100644
--- a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/index.jsx
@@ -90,20 +90,20 @@ export default function WorkspaceLLMSelection({
           />
         )}
         {searchMenuOpen ? (
-          <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
+          <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-theme-settings-input-bg rounded-lg flex flex-col justify-between cursor-pointer border-2 border-primary-button z-20">
             <div className="w-full flex flex-col gap-y-1">
-              <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
+              <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-theme-settings-input-bg">
                 <MagnifyingGlass
                   size={20}
                   weight="bold"
-                  className="absolute left-4 z-30 text-white -ml-4 my-2"
+                  className="absolute left-4 z-30 text-theme-text-primary -ml-4 my-2"
                 />
                 <input
                   type="text"
                   name="llm-search"
                   autoComplete="off"
                   placeholder={t("chat.llm.search")}
-                  className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:outline-primary-button active:outline-primary-button outline-none text-white placeholder:text-white placeholder:font-medium"
+                  className="-ml-4 my-2 bg-transparent z-20 pl-12 h-[38px] w-full px-4 py-1 text-sm outline-none focus:outline-primary-button active:outline-primary-button outline-none text-theme-text-primary placeholder:text-theme-text-primary placeholder:font-medium"
                   onChange={(e) => setSearchQuery(e.target.value)}
                   ref={searchInputRef}
                   onKeyDown={(e) => {
@@ -113,7 +113,7 @@ export default function WorkspaceLLMSelection({
                 <X
                   size={20}
                   weight="bold"
-                  className="cursor-pointer text-white hover:text-x-button"
+                  className="cursor-pointer text-theme-text-primary hover:text-x-button"
                   onClick={handleXButton}
                 />
               </div>
@@ -135,7 +135,7 @@ export default function WorkspaceLLMSelection({
           </div>
         ) : (
           <button
-            className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
+            className="w-full max-w-[640px] h-[64px] bg-theme-settings-input-bg rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-primary-button transition-all duration-300"
             type="button"
             onClick={() => setSearchMenuOpen(true)}
           >
@@ -215,7 +215,7 @@ function FreeFormLLMInput({ workspace, setHasChanges }) {
         name="chatModel"
         defaultValue={workspace?.chatModel || ""}
         onChange={() => setHasChanges(true)}
-        className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+        className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
         placeholder="Enter model name exactly as referenced in the API (e.g., gpt-3.5-turbo)"
       />
     </div>
diff --git a/frontend/src/pages/WorkspaceSettings/GeneralAppearance/DeleteWorkspace/index.jsx b/frontend/src/pages/WorkspaceSettings/GeneralAppearance/DeleteWorkspace/index.jsx
index 44c7127ae..0023e3301 100644
--- a/frontend/src/pages/WorkspaceSettings/GeneralAppearance/DeleteWorkspace/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/GeneralAppearance/DeleteWorkspace/index.jsx
@@ -35,14 +35,14 @@ export default function DeleteWorkspace({ workspace }) {
   return (
     <div className="flex flex-col mt-10">
       <label className="block input-label">{t("general.delete.title")}</label>
-      <p className="text-white text-opacity-60 text-xs font-medium py-1.5">
+      <p className="text-theme-text-secondary text-xs font-medium py-1.5">
         {t("general.delete.description")}
       </p>
       <button
         disabled={deleting}
         onClick={deleteWorkspace}
         type="button"
-        className="w-60 mt-4 transition-all duration-300 border border-transparent rounded-lg whitespace-nowrap text-sm px-5 py-2.5 focus:z-10 bg-red-500/25 text-red-200 hover:text-white hover:bg-red-600 disabled:bg-red-600 disabled:text-red-200 disabled:animate-pulse"
+        className="w-60 mt-4 transition-all duration-300 border border-transparent rounded-lg whitespace-nowrap text-sm px-5 py-2.5 focus:z-10 bg-red-500/25 text-red-200 light:text-red-500 hover:light:text-[#FFFFFF] hover:text-[#FFFFFF] hover:bg-red-600 disabled:bg-red-600 disabled:text-red-200 disabled:animate-pulse"
       >
         {deleting ? t("general.delete.deleting") : t("general.delete.delete")}
       </button>
diff --git a/frontend/src/pages/WorkspaceSettings/GeneralAppearance/SuggestedChatMessages/index.jsx b/frontend/src/pages/WorkspaceSettings/GeneralAppearance/SuggestedChatMessages/index.jsx
index 23fc77c26..5c1201199 100644
--- a/frontend/src/pages/WorkspaceSettings/GeneralAppearance/SuggestedChatMessages/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/GeneralAppearance/SuggestedChatMessages/index.jsx
@@ -130,7 +130,7 @@ export default function SuggestedChatMessages({ slug }) {
             <button
               key={index}
               onClick={(e) => startEditing(e, index)}
-              className={`text-left p-2.5 border rounded-xl w-full border-white/20 bg-sidebar hover:bg-workspace-item-selected-gradient ${
+              className={`text-left p-2.5 border rounded-xl w-full border-white/20 bg-theme-settings-input-bg hover:bg-theme-sidebar-item-selected-gradient ${
                 editingIndex === index ? "border-sky-400" : ""
               }`}
             >
@@ -148,7 +148,7 @@ export default function SuggestedChatMessages({ slug }) {
             </label>
             <input
               placeholder="Message heading"
-              className=" bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full"
+              className=" bg-theme-settings-input-bg text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block p-2.5 w-full"
               value={newMessage.heading}
               name="heading"
               onChange={onEditChange}
@@ -160,7 +160,7 @@ export default function SuggestedChatMessages({ slug }) {
             </label>
             <input
               placeholder="Message"
-              className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full"
+              className="bg-theme-settings-input-bg text-white placeholder:text-white/20 text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block p-2.5 w-full"
               value={newMessage.message}
               name="message"
               onChange={onEditChange}
diff --git a/frontend/src/pages/WorkspaceSettings/GeneralAppearance/WorkspaceName/index.jsx b/frontend/src/pages/WorkspaceSettings/GeneralAppearance/WorkspaceName/index.jsx
index efa2e9ae8..3afc99410 100644
--- a/frontend/src/pages/WorkspaceSettings/GeneralAppearance/WorkspaceName/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/GeneralAppearance/WorkspaceName/index.jsx
@@ -18,7 +18,7 @@ export default function WorkspaceName({ workspace, setHasChanges }) {
         minLength={2}
         maxLength={80}
         defaultValue={workspace?.name}
-        className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+        className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
         placeholder="My Workspace"
         required={true}
         autoComplete="off"
diff --git a/frontend/src/pages/WorkspaceSettings/GeneralAppearance/WorkspacePfp/index.jsx b/frontend/src/pages/WorkspaceSettings/GeneralAppearance/WorkspacePfp/index.jsx
index e652c734c..fb62cb57c 100644
--- a/frontend/src/pages/WorkspaceSettings/GeneralAppearance/WorkspacePfp/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/GeneralAppearance/WorkspacePfp/index.jsx
@@ -55,7 +55,7 @@ export default function WorkspacePfp({ workspace, slug }) {
       </div>
       <div className="flex flex-col md:flex-row items-center gap-8">
         <div className="flex flex-col items-center">
-          <label className="w-36 h-36 flex flex-col items-center justify-center bg-zinc-900/50 transition-all duration-300 rounded-full mt-8 border-2 border-dashed border-white border-opacity-60 cursor-pointer hover:opacity-60">
+          <label className="w-36 h-36 flex flex-col items-center justify-center bg-theme-settings-input-bg transition-all duration-300 rounded-full mt-8 border-2 border-dashed border-white border-opacity-60 cursor-pointer hover:opacity-60">
             <input
               id="workspace-pfp-upload"
               type="file"
@@ -67,15 +67,15 @@ export default function WorkspacePfp({ workspace, slug }) {
               <img
                 src={pfp}
                 alt="User profile picture"
-                className="w-36 h-36 rounded-full object-cover bg-white"
+                className="w-36 h-36 rounded-full object-cover bg-theme-bg-secondary"
               />
             ) : (
               <div className="flex flex-col items-center justify-center p-3">
-                <Plus className="w-8 h-8 text-white/80 m-2" />
-                <span className="text-white text-opacity-80 text-xs font-semibold">
+                <Plus className="w-8 h-8 text-theme-text-secondary m-2" />
+                <span className="text-theme-text-secondary text-opacity-80 text-xs font-semibold">
                   {t("general.pfp.image")}
                 </span>
-                <span className="text-white text-opacity-60 text-xs">
+                <span className="text-theme-text-secondary text-opacity-60 text-xs">
                   800 x 800
                 </span>
               </div>
@@ -85,7 +85,7 @@ export default function WorkspacePfp({ workspace, slug }) {
             <button
               type="button"
               onClick={handleRemovePfp}
-              className="mt-3 text-white text-opacity-60 text-sm font-medium hover:underline"
+              className="mt-3 text-theme-text-secondary text-opacity-60 text-sm font-medium hover:underline"
             >
               {t("general.pfp.remove")}
             </button>
diff --git a/frontend/src/pages/WorkspaceSettings/Members/AddMemberModal/index.jsx b/frontend/src/pages/WorkspaceSettings/Members/AddMemberModal/index.jsx
index a7a48efcd..0d565174d 100644
--- a/frontend/src/pages/WorkspaceSettings/Members/AddMemberModal/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/Members/AddMemberModal/index.jsx
@@ -61,14 +61,14 @@ export default function AddMemberModal({ closeModal, workspace, users }) {
 
   return (
     <div className="relative w-full max-w-[550px] max-h-full">
-      <div className="relative bg-main-gradient rounded-xl shadow-[0_4px_14px_rgba(0,0,0,0.25)]">
-        <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
+      <div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
+        <div className="flex items-center justify-between p-6 border-b rounded-t border-theme-modal-border">
           <div className="flex items-center gap-x-4">
             <h3 className="text-base font-semibold text-white">Users</h3>
             <div className="relative">
               <input
                 onChange={handleSearch}
-                className="w-[400px] h-[34px] bg-[#030712] rounded-[100px] text-white placeholder:text-white/50 text-sm px-10 pl-10"
+                className="w-[400px] h-[34px] bg-theme-bg-primary rounded-[100px] text-white placeholder:text-theme-text-secondary text-sm px-10 pl-10"
                 placeholder="Search for a user"
               />
               <MagnifyingGlass
@@ -81,10 +81,10 @@ export default function AddMemberModal({ closeModal, workspace, users }) {
           <button
             onClick={closeModal}
             type="button"
-            className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+            className="bg-transparent rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
             data-modal-hide="staticModal"
           >
-            <X className="text-gray-300 text-lg" />
+            <X className="text-white text-lg" />
           </button>
         </div>
         <form onSubmit={handleUpdate}>
@@ -98,22 +98,22 @@ export default function AddMemberModal({ closeModal, workspace, users }) {
                     onClick={() => handleUserSelect(user.id)}
                   >
                     <div
-                      className="shrink-0 w-3 h-3 rounded border-[1px] border-white flex justify-center items-center"
+                      className="shrink-0 w-3 h-3 rounded border-[1px] border-white light:border-black flex justify-center items-center"
                       role="checkbox"
                       aria-checked={isUserSelected(user.id)}
                       tabIndex={0}
                     >
                       {isUserSelected(user.id) && (
-                        <div className="w-2 h-2 bg-white rounded-[2px]" />
+                        <div className="w-2 h-2 bg-white light:bg-black rounded-[2px]" />
                       )}
                     </div>
-                    <p className="text-white text-sm font-medium">
+                    <p className="text-theme-text-primary text-sm font-medium">
                       {user.username}
                     </p>
                   </tr>
                 ))
               ) : (
-                <p className="text-white text-opacity-60 text-sm font-medium ">
+                <p className="text-theme-text-secondary text-sm font-medium ">
                   No users found
                 </p>
               )}
@@ -144,7 +144,7 @@ export default function AddMemberModal({ closeModal, workspace, users }) {
                   onClick={handleUnselect}
                   className="flex items-center gap-x-2 ml-2"
                 >
-                  <p className="text-white/60 text-sm font-medium hover:text-white">
+                  <p className="text-theme-text-secondary text-sm font-medium hover:text-theme-text-primary">
                     Unselect
                   </p>
                 </button>
diff --git a/frontend/src/pages/WorkspaceSettings/Members/WorkspaceMemberRow/index.jsx b/frontend/src/pages/WorkspaceSettings/Members/WorkspaceMemberRow/index.jsx
index 4da5b7c3e..306488ccb 100644
--- a/frontend/src/pages/WorkspaceSettings/Members/WorkspaceMemberRow/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/Members/WorkspaceMemberRow/index.jsx
@@ -3,7 +3,7 @@ import { titleCase } from "text-case";
 export default function WorkspaceMemberRow({ user }) {
   return (
     <>
-      <tr className="bg-transparent text-white text-opacity-80 text-sm font-medium">
+      <tr className="bg-transparent text-theme-text-primary text-sm font-medium">
         <th scope="row" className="px-6 py-4 whitespace-nowrap">
           {user.username}
         </th>
diff --git a/frontend/src/pages/WorkspaceSettings/Members/index.jsx b/frontend/src/pages/WorkspaceSettings/Members/index.jsx
index 8767ea2da..d7f8bea94 100644
--- a/frontend/src/pages/WorkspaceSettings/Members/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/Members/index.jsx
@@ -36,8 +36,8 @@ export default function Members({ workspace }) {
       <Skeleton.default
         height="80vh"
         width="100%"
-        highlightColor="#3D4147"
-        baseColor="#2C2F35"
+        highlightColor="var(--theme-bg-primary)"
+        baseColor="var(--theme-bg-secondary)"
         count={1}
         className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
         containerClassName="flex w-full"
@@ -48,7 +48,7 @@ export default function Members({ workspace }) {
   return (
     <div className="flex justify-between -mt-3">
       <table className="w-full max-w-[700px] text-sm text-left rounded-lg">
-        <thead className="text-white text-opacity-80 text-xs leading-[18px] font-bold uppercase border-white border-b border-opacity-60">
+        <thead className="text-white text-opacity-80 text-xs leading-[18px] font-bold uppercase border-white/10 border-b border-opacity-60">
           <tr>
             <th scope="col" className="px-6 py-3 rounded-tl-lg">
               Username
diff --git a/frontend/src/pages/WorkspaceSettings/VectorDatabase/DocumentSimilarityThreshold/index.jsx b/frontend/src/pages/WorkspaceSettings/VectorDatabase/DocumentSimilarityThreshold/index.jsx
index c14d86bb4..fe4b4a23a 100644
--- a/frontend/src/pages/WorkspaceSettings/VectorDatabase/DocumentSimilarityThreshold/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/VectorDatabase/DocumentSimilarityThreshold/index.jsx
@@ -18,7 +18,7 @@ export default function DocumentSimilarityThreshold({
       <select
         name="similarityThreshold"
         defaultValue={workspace?.similarityThreshold ?? 0.25}
-        className="bg-zinc-900 text-white text-sm mt-2 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+        className="bg-theme-settings-input-bg text-white text-sm mt-2 rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
         onChange={() => setHasChanges(true)}
         required={true}
       >
diff --git a/frontend/src/pages/WorkspaceSettings/VectorDatabase/MaxContextSnippets/index.jsx b/frontend/src/pages/WorkspaceSettings/VectorDatabase/MaxContextSnippets/index.jsx
index f1c7a6373..2f2d08e53 100644
--- a/frontend/src/pages/WorkspaceSettings/VectorDatabase/MaxContextSnippets/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/VectorDatabase/MaxContextSnippets/index.jsx
@@ -22,7 +22,7 @@ export default function MaxContextSnippets({ workspace, setHasChanges }) {
         step={1}
         onWheel={(e) => e.target.blur()}
         defaultValue={workspace?.topN ?? 4}
-        className="bg-zinc-900 text-white placeholder:text-white/20 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 mt-2"
+        className="bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5 mt-2"
         placeholder="4"
         required={true}
         autoComplete="off"
diff --git a/frontend/src/pages/WorkspaceSettings/VectorDatabase/ResetDatabase/index.jsx b/frontend/src/pages/WorkspaceSettings/VectorDatabase/ResetDatabase/index.jsx
index 44bf12d64..58796ce96 100644
--- a/frontend/src/pages/WorkspaceSettings/VectorDatabase/ResetDatabase/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/VectorDatabase/ResetDatabase/index.jsx
@@ -38,7 +38,7 @@ export default function ResetDatabase({ workspace }) {
       disabled={deleting}
       onClick={resetVectorDatabase}
       type="button"
-      className="border-none w-fit transition-all duration-300 border border-transparent rounded-lg whitespace-nowrap text-sm px-5 py-2.5 focus:z-10 bg-red-500/25 text-red-200 hover:text-white hover:bg-red-600 disabled:bg-red-600 disabled:text-red-200 disabled:animate-pulse"
+      className="w-60 transition-all duration-300 border border-transparent rounded-lg whitespace-nowrap text-sm px-5 py-2.5 focus:z-10 bg-red-500/25 text-red-200 light:text-red-500 hover:light:text-[#FFFFFF] hover:text-[#FFFFFF] hover:bg-red-600 disabled:bg-red-600 disabled:text-red-200 disabled:animate-pulse"
     >
       {deleting
         ? t("vector-workspace.reset.resetting")
diff --git a/frontend/src/pages/WorkspaceSettings/index.jsx b/frontend/src/pages/WorkspaceSettings/index.jsx
index 888e59566..9d441ae27 100644
--- a/frontend/src/pages/WorkspaceSettings/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/index.jsx
@@ -73,16 +73,16 @@ function ShowWorkspaceChat() {
 
   const TabContent = TABS[tab];
   return (
-    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+    <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
       {!isMobile && <Sidebar />}
       <div
         style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll border-2 border-outline"
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll"
       >
         <div className="flex gap-x-10 pt-6 pb-4 ml-16 mr-8 border-b-2 border-white border-opacity-10">
           <Link
             to={paths.workspace.chat(slug)}
-            className="absolute top-2 left-2 md:top-4 md:left-4 transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border z-10"
+            className="absolute top-2 left-2 md:top-4 md:left-4 transition-all duration-300 p-2 rounded-full text-white bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover z-10"
           >
             <ArrowUUpLeft className="h-5 w-5" weight="fill" />
           </Link>
diff --git a/frontend/src/utils/chat/markdown.js b/frontend/src/utils/chat/markdown.js
index 17b5acbb8..f284e9b67 100644
--- a/frontend/src/utils/chat/markdown.js
+++ b/frontend/src/utils/chat/markdown.js
@@ -13,7 +13,7 @@ const markdown = markdownIt({
     if (lang && hljs.getLanguage(lang)) {
       try {
         return (
-          `<div class="whitespace-pre-line w-full rounded-lg bg-black-900 px-4 pb-4 relative font-mono font-normal text-sm text-slate-200">
+          `<div class="whitespace-pre-line w-full rounded-lg bg-black-900 px-4 pb-4 relative font-mono font-normal text-sm text-slate-200 light:invert">
             <div class="w-full flex items-center absolute top-0 left-0 text-slate-200 bg-stone-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md">
               <div class="flex gap-2">
                 <code class="text-xs">${lang || ""}</code>
@@ -31,7 +31,7 @@ const markdown = markdownIt({
     }
 
     return (
-      `<div class="whitespace-pre-line w-full rounded-lg bg-black-900 px-4 pb-4 relative font-mono font-normal text-sm text-slate-200">
+      `<div class="whitespace-pre-line w-full rounded-lg bg-black-900 px-4 pb-4 relative font-mono font-normal text-sm text-slate-200 light:invert">
         <div class="w-full flex items-center absolute top-0 left-0 text-slate-200 bg-stone-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md">
           <div class="flex gap-2"><code class="text-xs"></code></div>
           <button data-code-snippet data-code="code-${uuid}" class="flex items-center gap-x-2">
@@ -46,6 +46,10 @@ const markdown = markdownIt({
   },
 });
 
+// Add custom renderer for strong tags to handle theme colors
+markdown.renderer.rules.strong_open = () => '<strong class="text-white">';
+markdown.renderer.rules.strong_close = () => "</strong>";
+
 // Custom renderer for responsive images rendered in markdown
 markdown.renderer.rules.image = function (tokens, idx) {
   const token = tokens[idx];
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index f15634df3..6333ef8bf 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -8,8 +8,6 @@ export const COMPLETE_QUESTIONNAIRE = "anythingllm_completed_questionnaire";
 export const SEEN_DOC_PIN_ALERT = "anythingllm_pinned_document_alert";
 export const SEEN_WATCH_ALERT = "anythingllm_watched_document_alert";
 
-export const USER_BACKGROUND_COLOR = "bg-historical-msg-user";
-export const AI_BACKGROUND_COLOR = "bg-historical-msg-system";
 export const APPEARANCE_SETTINGS = "anythingllm_appearance_settings";
 
 export const OLLAMA_COMMON_URLS = [
diff --git a/frontend/src/utils/toast.js b/frontend/src/utils/toast.js
index 5ce17d5ae..7647c27b2 100644
--- a/frontend/src/utils/toast.js
+++ b/frontend/src/utils/toast.js
@@ -1,11 +1,10 @@
 import { toast } from "react-toastify";
-import usePrefersDarkMode from "@/hooks/usePrefersDarkMode";
 
 // Additional Configs (opts)
 // You can also pass valid ReactToast params to override the defaults.
 // clear: false, // Will dismiss all visible toasts before rendering next toast
 const showToast = (message, type = "default", opts = {}) => {
-  const prefersDarkMode = usePrefersDarkMode();
+  const theme = localStorage?.getItem("theme") || "default";
   const options = {
     position: "bottom-center",
     autoClose: 5000,
@@ -13,7 +12,7 @@ const showToast = (message, type = "default", opts = {}) => {
     closeOnClick: true,
     pauseOnHover: true,
     draggable: true,
-    theme: prefersDarkMode ? "dark" : "light",
+    theme: theme === "default" ? "dark" : "light",
     ...opts,
   };
 
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 1ef8e56d9..958c50452 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: "false",
+  darkMode: "class",
   content: {
     relative: true,
     files: [
@@ -43,7 +43,61 @@ export default {
         error: "#B42318",
         warn: "#854708",
         success: "#05603A",
-        darker: "#F4F4F4"
+        darker: "#F4F4F4",
+
+        // Generic theme colors
+        theme: {
+          bg: {
+            primary: 'var(--theme-bg-primary)',
+            secondary: 'var(--theme-bg-secondary)',
+            sidebar: 'var(--theme-bg-sidebar)',
+            container: 'var(--theme-bg-container)',
+            chat: 'var(--theme-bg-chat)',
+            "chat-input": 'var(--theme-bg-chat-input)',
+          },
+          text: {
+            primary: 'var(--theme-text-primary)',
+            secondary: 'var(--theme-text-secondary)',
+          },
+          sidebar: {
+            item: {
+              default: 'var(--theme-sidebar-item-default)',
+              selected: 'var(--theme-sidebar-item-selected)',
+              hover: 'var(--theme-sidebar-item-hover)',
+            },
+            subitem: {
+              default: 'var(--theme-sidebar-subitem-default)',
+              selected: 'var(--theme-sidebar-subitem-selected)',
+              hover: 'var(--theme-sidebar-subitem-hover)',
+            },
+            footer: {
+              icon: 'var(--theme-sidebar-footer-icon)',
+              'icon-hover': 'var(--theme-sidebar-footer-icon-hover)',
+            },
+            border: 'var(--theme-sidebar-border)',
+          },
+          "chat-input": {
+            border: 'var(--theme-chat-input-border)',
+          },
+          "action-menu": {
+            bg: 'var(--theme-action-menu-bg)',
+            "item-hover": 'var(--theme-action-menu-item-hover)',
+          },
+          settings: {
+            input: {
+              bg: 'var(--theme-settings-input-bg)',
+              active: 'var(--theme-settings-input-active)',
+              placeholder: 'var(--theme-settings-input-placeholder)',
+              text: 'var(--theme-settings-input-text)',
+            }
+          },
+          modal: {
+            border: 'var(--theme-modal-border)',
+          },
+          "file-picker": {
+            hover: 'var(--theme-file-picker-hover)',
+          }
+        },
       },
       backgroundImage: {
         "preference-gradient":
@@ -125,6 +179,12 @@ export default {
       }
     }
   },
+  variants: {
+    extend: {
+      backgroundColor: ['light'],
+      textColor: ['light'],
+    }
+  },
   // Required for rechart styles to show since they can be rendered dynamically and will be tree-shaken if not safe-listed.
   safelist: [
     {
@@ -155,5 +215,9 @@ export default {
         /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/
     }
   ],
-  plugins: []
+  plugins: [
+    function ({ addVariant }) {
+      addVariant('light', '.light &') // Add the `light:` variant
+    },
+  ]
 }
diff --git a/server/endpoints/system.js b/server/endpoints/system.js
index 6da117ff2..9924ec694 100644
--- a/server/endpoints/system.js
+++ b/server/endpoints/system.js
@@ -27,6 +27,7 @@ const {
   renameLogoFile,
   removeCustomLogo,
   LOGO_FILENAME,
+  isDefaultFilename,
 } = require("../utils/files/logo");
 const { Telemetry } = require("../models/telemetry");
 const { WelcomeMessages } = require("../models/welcomeMessages");
@@ -574,9 +575,11 @@ function systemEndpoints(app) {
     }
   });
 
-  app.get("/system/logo", async function (_, response) {
+  app.get("/system/logo", async function (request, response) {
     try {
-      const defaultFilename = getDefaultFilename();
+      const darkMode =
+        !request?.query?.theme || request?.query?.theme === "default";
+      const defaultFilename = getDefaultFilename(darkMode);
       const logoPath = await determineLogoFilepath(defaultFilename);
       const { found, buffer, size, mime } = fetchLogo(logoPath);
 
@@ -596,7 +599,8 @@ function systemEndpoints(app) {
         "Content-Length": size,
         "X-Is-Custom-Logo":
           currentLogoFilename !== null &&
-          currentLogoFilename !== defaultFilename,
+          currentLogoFilename !== defaultFilename &&
+          !isDefaultFilename(currentLogoFilename),
       });
       response.end(Buffer.from(buffer, "base64"));
       return;
diff --git a/server/utils/files/logo.js b/server/utils/files/logo.js
index 3b861bc0e..19ac506c1 100644
--- a/server/utils/files/logo.js
+++ b/server/utils/files/logo.js
@@ -5,13 +5,29 @@ const { v4 } = require("uuid");
 const { SystemSettings } = require("../../models/systemSettings");
 const { normalizePath, isWithin } = require(".");
 const LOGO_FILENAME = "anything-llm.png";
+const LOGO_FILENAME_DARK = "anything-llm-dark.png";
 
-function validFilename(newFilename = "") {
-  return ![LOGO_FILENAME].includes(newFilename);
+/**
+ * Checks if the filename is the default logo filename for dark or light mode.
+ * @param {string} filename - The filename to check.
+ * @returns {boolean} Whether the filename is the default logo filename.
+ */
+function isDefaultFilename(filename) {
+  return [LOGO_FILENAME, LOGO_FILENAME_DARK].includes(filename);
 }
 
-function getDefaultFilename() {
-  return LOGO_FILENAME;
+function validFilename(newFilename = "") {
+  return !isDefaultFilename(newFilename);
+}
+
+/**
+ * Shows the logo for the current theme. In dark mode, it shows the light logo
+ * and vice versa.
+ * @param {boolean} darkMode - Whether the logo should be for dark mode.
+ * @returns {string} The filename of the logo.
+ */
+function getDefaultFilename(darkMode = true) {
+  return darkMode ? LOGO_FILENAME : LOGO_FILENAME_DARK;
 }
 
 async function determineLogoFilepath(defaultFilename = LOGO_FILENAME) {
@@ -93,5 +109,6 @@ module.exports = {
   validFilename,
   getDefaultFilename,
   determineLogoFilepath,
+  isDefaultFilename,
   LOGO_FILENAME,
 };