From 911babd3e028797b33576b0366edbafaf761bb53 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+Berry-13@users.noreply.github.com>
Date: Wed, 6 Mar 2024 18:05:43 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=96=8C=EF=B8=8F=20style:=20Update=20Light?=
 =?UTF-8?q?/Dark=20UI=20Themes=20(#1754)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* BIG UI UPDATE

* fix: search bar, dialog template, new chat icon, convo icon and delete/rename button

* moved some color config and a lot of files

* small text fixes and tailwind config refactor

* Update localization and UI styles

* Update styles and add user-select:none to Tooltip component

* Update mobile.css styles for navigation mask and background color

* Update component imports and styles

* Update DeleteButton imports and references

* Update UI components

* Update tooltip delay duration

* Fix styling and update text in various components

* fixed assistant style

* minor style fixes

* revert: removed CreationHeader & CreationPanel

* style: match new styling for SidePanel

* style: match bg-gray-800 to ChatGPT (#212121)

* style: remove slate for gray where applicable to match new light theme

---------

Co-authored-by: Danny Avila <messagedaniel@protonmail.com>
---
 client/index.html                             |  2 +-
 client/src/components/Auth/LoginForm.tsx      |  4 +-
 client/src/components/Auth/Registration.tsx   |  2 +-
 .../components/Auth/RequestPasswordReset.tsx  |  2 +-
 client/src/components/Auth/ResetPassword.tsx  |  4 +-
 client/src/components/Chat/Input/ChatForm.tsx |  2 +-
 .../Chat/Input/Files/DragDropOverlay.tsx      |  2 +-
 .../components/Chat/Input/OptionsPopover.tsx  |  8 +-
 .../components/Chat/Input/PopoverButtons.tsx  |  2 +-
 .../src/components/Chat/Input/SendButton.tsx  | 37 ++++++---
 .../src/components/Chat/Input/StopButton.tsx  |  4 +-
 .../Chat/Menus/Endpoints/MenuItem.tsx         |  2 +-
 .../components/Chat/Menus/EndpointsMenu.tsx   |  2 +-
 .../Chat/Menus/Presets/EditPresetDialog.tsx   |  9 +-
 .../Chat/Menus/Presets/PresetItems.tsx        | 25 ++++--
 .../src/components/Chat/Menus/PresetsMenu.tsx |  4 +-
 .../Chat/Menus/UI/MenuSeparator.tsx           |  2 +-
 .../Chat/Messages/Content/Image.tsx           |  2 +-
 .../Chat/Messages/Content/MessageContent.tsx  |  4 +-
 .../components/Chat/Messages/Content/Part.tsx |  2 +-
 .../components/Chat/Messages/HoverButtons.tsx | 10 +--
 .../components/Chat/Messages/MessagesView.tsx |  4 +-
 .../components/Conversations/Conversation.jsx |  6 +-
 client/src/components/Conversations/Convo.tsx | 15 ++--
 .../components/Conversations/DeleteButton.tsx |  8 +-
 .../Conversations/NewDeleteButton.tsx         | 66 ---------------
 .../components/Conversations/RenameButton.tsx |  4 +-
 client/src/components/Conversations/index.ts  |  1 -
 .../Endpoints/EndpointOptionsPopover.tsx      |  4 +-
 .../src/components/Endpoints/MinimalIcon.tsx  |  8 +-
 .../components/Endpoints/PopoverButtons.tsx   |  2 +-
 .../Endpoints/SaveAsPresetDialog.tsx          |  7 +-
 .../Endpoints/Settings/Examples.tsx           |  4 +-
 client/src/components/Endpoints/index.ts      |  1 -
 .../Input/EndpointMenu/EndpointItem.tsx       |  2 +-
 .../Input/EndpointMenu/EndpointMenu.jsx       | 21 +----
 .../Input/EndpointMenu/FileUpload.tsx         |  2 +-
 .../Input/EndpointMenu/PresetItem.tsx         |  2 +-
 .../Input/SetKeyDialog/HelpText.tsx           |  8 +-
 .../Input/SetKeyDialog/SetKeyDialog.tsx       |  2 +-
 client/src/components/Input/SubmitButton.tsx  |  6 +-
 client/src/components/Input/TextChat.tsx      | 14 ++--
 .../components/Messages/Content/CodeBlock.tsx |  4 +-
 .../Messages/Content/MessageContent.tsx       |  4 +-
 .../components/Messages/Content/Plugin.tsx    |  4 +-
 .../src/components/Messages/HoverButtons.tsx  | 10 +--
 client/src/components/Messages/Message.tsx    |  4 +-
 .../src/components/Messages/MessageHeader.tsx |  2 +-
 client/src/components/Messages/Messages.tsx   |  4 +-
 .../Nav/ExportConversation/ExportModal.jsx    |  2 +-
 client/src/components/Nav/Logout.tsx          |  2 +-
 client/src/components/Nav/MobileNav.tsx       |  6 +-
 client/src/components/Nav/Nav.tsx             |  4 +-
 client/src/components/Nav/NavLinks.tsx        | 26 +++---
 client/src/components/Nav/NewChat.tsx         | 78 ++++++++++--------
 client/src/components/Nav/SearchBar.tsx       |  2 +-
 client/src/components/Nav/Settings.tsx        | 58 ++++++-------
 .../Nav/SettingsTabs/Account/Account.tsx      |  2 +-
 .../Nav/SettingsTabs/Account/Avatar.tsx       |  6 +-
 .../components/Nav/SettingsTabs/Beta/Beta.tsx |  2 +-
 .../components/Nav/SettingsTabs/Data/Data.tsx |  2 +-
 .../Nav/SettingsTabs/General/General.tsx      |  2 +-
 .../Plugins/Store/PluginPagination.tsx        |  3 +
 .../Plugins/Store/PluginStoreDialog.tsx       | 12 +--
 .../Plugins/Store/PluginStoreItem.tsx         |  2 +-
 .../SidePanel/Builder/ActionsAuth.tsx         |  2 +-
 .../SidePanel/Builder/ActionsPanel.tsx        |  2 +-
 .../SidePanel/Builder/AssistantPanel.tsx      |  6 +-
 .../SidePanel/Builder/AssistantSelect.tsx     |  6 +-
 .../SidePanel/Builder/ContextButton.tsx       |  4 +-
 .../components/SidePanel/Builder/Images.tsx   |  4 +-
 .../components/SidePanel/Files/PanelTable.tsx |  4 +-
 client/src/components/SidePanel/Nav.tsx       |  2 +-
 client/src/components/SidePanel/SidePanel.tsx |  6 +-
 client/src/components/SidePanel/Switcher.tsx  | 14 ++--
 client/src/components/Tools/ToolItem.tsx      |  2 +-
 .../src/components/Tools/ToolSelectDialog.tsx | 10 +--
 .../src/components/svg/PluginMinimalIcon.tsx  | 21 -----
 client/src/components/svg/index.ts            |  1 -
 client/src/components/ui/AlertDialog.tsx      |  4 +-
 client/src/components/ui/Button.tsx           | 12 +--
 client/src/components/ui/Dialog.tsx           | 56 +++++++------
 client/src/components/ui/DialogTemplate.tsx   | 31 +++++--
 client/src/components/ui/Dropdown.tsx         |  4 +-
 client/src/components/ui/HoverCard.tsx        |  2 +-
 client/src/components/ui/Input.tsx            |  2 +-
 client/src/components/ui/InputNumber.tsx      |  2 +-
 client/src/components/ui/Landing.tsx          | 10 +--
 .../src/components/ui/MultiSelectDropDown.tsx | 10 +--
 client/src/components/ui/MultiSelectPop.tsx   |  4 +-
 client/src/components/ui/Prompt.tsx           |  2 +-
 client/src/components/ui/Select.tsx           |  7 +-
 client/src/components/ui/SelectDropDown.tsx   | 12 +--
 .../src/components/ui/SelectDropDownPop.tsx   |  4 +-
 client/src/components/ui/Slider.tsx           |  4 +-
 client/src/components/ui/Switch.tsx           |  4 +-
 client/src/components/ui/Tabs.tsx             |  4 +-
 client/src/components/ui/Templates.tsx        | 12 +--
 client/src/components/ui/Tooltip.tsx          |  3 +-
 client/src/hooks/ScreenshotContext.tsx        |  2 +-
 client/src/localization/languages/Ar.tsx      |  1 -
 client/src/localization/languages/Eng.tsx     |  2 +-
 client/src/mobile.css                         |  4 +-
 client/src/style.css                          | 82 ++++---------------
 client/src/utils/buildTree.ts                 |  4 +-
 client/src/utils/index.ts                     |  6 +-
 client/tailwind.config.cjs                    | 27 +++---
 index.html                                    |  2 +-
 108 files changed, 438 insertions(+), 524 deletions(-)
 delete mode 100644 client/src/components/Conversations/NewDeleteButton.tsx
 delete mode 100644 client/src/components/svg/PluginMinimalIcon.tsx

diff --git a/client/index.html b/client/index.html
index 3654c8766..bad6b4194 100644
--- a/client/index.html
+++ b/client/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <meta name="theme-color" content="#343541">
+    <meta name="theme-color" content="#171717">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <title>LibreChat</title>
diff --git a/client/src/components/Auth/LoginForm.tsx b/client/src/components/Auth/LoginForm.tsx
index 64e5ea549..c56f3ed9f 100644
--- a/client/src/components/Auth/LoginForm.tsx
+++ b/client/src/components/Auth/LoginForm.tsx
@@ -44,7 +44,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit }) => {
               pattern: { value: /\S+@\S+\.\S+/, message: localize('com_auth_email_pattern') },
             })}
             aria-invalid={!!errors.email}
-            className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
+            className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-800 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
             placeholder=" "
           />
           <label
@@ -69,7 +69,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit }) => {
               maxLength: { value: 128, message: localize('com_auth_password_max_length') },
             })}
             aria-invalid={!!errors.password}
-            className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
+            className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-800 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
             placeholder=" "
           />
           <label
diff --git a/client/src/components/Auth/Registration.tsx b/client/src/components/Auth/Registration.tsx
index 3f3a51f84..49507dd14 100644
--- a/client/src/components/Auth/Registration.tsx
+++ b/client/src/components/Auth/Registration.tsx
@@ -64,7 +64,7 @@ const Registration: React.FC = () => {
             validation,
           )}
           aria-invalid={!!errors[id]}
-          className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
+          className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-800 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
           placeholder=" "
           data-testid={id}
         ></input>
diff --git a/client/src/components/Auth/RequestPasswordReset.tsx b/client/src/components/Auth/RequestPasswordReset.tsx
index fad1fce0d..c901596ab 100644
--- a/client/src/components/Auth/RequestPasswordReset.tsx
+++ b/client/src/components/Auth/RequestPasswordReset.tsx
@@ -103,7 +103,7 @@ function RequestPasswordReset() {
                   },
                 })}
                 aria-invalid={!!errors.email}
-                className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
+                className="peer block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-800 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
                 placeholder=" "
               ></input>
               <label
diff --git a/client/src/components/Auth/ResetPassword.tsx b/client/src/components/Auth/ResetPassword.tsx
index a608f4586..524e591c2 100644
--- a/client/src/components/Auth/ResetPassword.tsx
+++ b/client/src/components/Auth/ResetPassword.tsx
@@ -115,7 +115,7 @@ function ResetPassword() {
                     },
                   })}
                   aria-invalid={!!errors.password}
-                  className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
+                  className="peer block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-800 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
                   placeholder=" "
                 ></input>
                 <label
@@ -149,7 +149,7 @@ function ResetPassword() {
                       value === password || localize('com_auth_password_not_match'),
                   })}
                   aria-invalid={!!errors.confirm_password}
-                  className="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-2.5 pb-2.5 pt-5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
+                  className="peer block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 px-2.5 pb-2.5 pt-5 text-sm text-gray-800 focus:border-green-500 focus:outline-none focus:ring-0 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:border-green-500"
                   placeholder=" "
                 ></input>
                 <label
diff --git a/client/src/components/Chat/Input/ChatForm.tsx b/client/src/components/Chat/Input/ChatForm.tsx
index d2d6336dd..ff2b47f4e 100644
--- a/client/src/components/Chat/Input/ChatForm.tsx
+++ b/client/src/components/Chat/Input/ChatForm.tsx
@@ -43,7 +43,7 @@ export default function ChatForm({ index = 0 }) {
     >
       <div className="relative flex h-full flex-1 items-stretch md:flex-col">
         <div className="flex w-full items-center">
-          <div className="[&:has(textarea:focus)]:border-token-border-xheavy border-token-border-heavy shadow-xs dark:shadow-xs relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border border-black/10 bg-white shadow-[0_0_0_2px_rgba(255,255,255,0.95)] dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:shadow-[0_0_0_2px_rgba(52,53,65,0.95)] [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]">
+          <div className="[&:has(textarea:focus)]:border-token-border-xheavy border-token-border-heavy shadow-xs dark:shadow-xs relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border border-black/10 bg-white shadow-[0_0_0_2px_rgba(255,255,255,0.95)] dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:shadow-[0_0_0_2px_rgba(23,23,23,1)] [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,0.1)]">
             <FileRow
               files={files}
               setFiles={setFiles}
diff --git a/client/src/components/Chat/Input/Files/DragDropOverlay.tsx b/client/src/components/Chat/Input/Files/DragDropOverlay.tsx
index c6e82853e..1e86de490 100644
--- a/client/src/components/Chat/Input/Files/DragDropOverlay.tsx
+++ b/client/src/components/Chat/Input/Files/DragDropOverlay.tsx
@@ -1,6 +1,6 @@
 export default function DragDropOverlay() {
   return (
-    <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-gray-100 opacity-80 dark:bg-gray-800 dark:text-gray-100">
+    <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-gray-200 opacity-80 dark:bg-gray-800 dark:text-gray-200">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 132 108"
diff --git a/client/src/components/Chat/Input/OptionsPopover.tsx b/client/src/components/Chat/Input/OptionsPopover.tsx
index 67c8d940b..ea1d3daa6 100644
--- a/client/src/components/Chat/Input/OptionsPopover.tsx
+++ b/client/src/components/Chat/Input/OptionsPopover.tsx
@@ -56,14 +56,14 @@ export default function OptionsPopover({
           <div
             className={cn(
               cardStyle,
-              'dark:bg-gray-900',
+              'dark:bg-gray-800',
               'border-d-0 flex w-full flex-col overflow-hidden rounded-none border-s-0 border-t bg-white px-0 pb-[10px] dark:border-white/10 md:rounded-md md:border lg:w-[736px]',
             )}
           >
-            <div className="flex w-full items-center bg-slate-100 px-2 py-2 dark:bg-gray-800/60">
+            <div className="flex w-full items-center bg-gray-50 px-2 py-2 dark:bg-gray-800/60">
               <Button
                 type="button"
-                className="h-auto justify-start rounded-md bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0"
+                className="h-auto justify-start rounded-md bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-700"
                 onClick={saveAsPreset}
               >
                 <Save className="mr-1 w-[14px]" />
@@ -73,7 +73,7 @@ export default function OptionsPopover({
               <Button
                 type="button"
                 className={cn(
-                  'ml-auto h-auto bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white',
+                  'ml-auto h-auto bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white',
                   removeFocusOutlines,
                 )}
                 onClick={closePopover}
diff --git a/client/src/components/Chat/Input/PopoverButtons.tsx b/client/src/components/Chat/Input/PopoverButtons.tsx
index 133638b23..690c3e98d 100644
--- a/client/src/components/Chat/Input/PopoverButtons.tsx
+++ b/client/src/components/Chat/Input/PopoverButtons.tsx
@@ -79,7 +79,7 @@ export default function PopoverButtons({
           type="button"
           className={cn(
             button.buttonClass,
-            'ml-1 h-auto justify-start bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0',
+            'ml-1 h-auto justify-start bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0',
             buttonClass ?? '',
           )}
           onClick={button.handler}
diff --git a/client/src/components/Chat/Input/SendButton.tsx b/client/src/components/Chat/Input/SendButton.tsx
index 549363dc1..259c418f1 100644
--- a/client/src/components/Chat/Input/SendButton.tsx
+++ b/client/src/components/Chat/Input/SendButton.tsx
@@ -1,19 +1,32 @@
 import { SendIcon } from '~/components/svg';
 import { cn } from '~/utils';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui/';
+import { useLocalize } from '~/hooks';
 
 export default function SendButton({ text, disabled }) {
+  const localize = useLocalize();
+
   return (
-    <button
-      disabled={!text || disabled}
-      className={cn(
-        'absolute bottom-1.5 right-2 rounded-lg border border-black p-0.5 text-white transition-colors enabled:bg-black disabled:bg-black disabled:text-gray-400 disabled:opacity-10 dark:border-white dark:bg-white dark:hover:bg-gray-900 dark:disabled:bg-white dark:disabled:hover:bg-transparent md:bottom-3 md:right-3',
-      )}
-      data-testid="send-button"
-      type="submit"
-    >
-      <span className="" data-state="closed">
-        <SendIcon size={24} />
-      </span>
-    </button>
+    <TooltipProvider delayDuration={250}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            disabled={!text || disabled}
+            className={cn(
+              'absolute bottom-1.5 right-2 rounded-lg border border-black p-0.5 text-white transition-colors enabled:bg-black disabled:bg-black disabled:text-gray-400 disabled:opacity-10 dark:border-white dark:bg-white dark:disabled:bg-white md:bottom-3 md:right-3',
+            )}
+            data-testid="send-button"
+            type="submit"
+          >
+            <span className="" data-state="closed">
+              <SendIcon size={24} />
+            </span>
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="top" sideOffset={10}>
+          {localize('com_nav_send_message')}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 }
diff --git a/client/src/components/Chat/Input/StopButton.tsx b/client/src/components/Chat/Input/StopButton.tsx
index 69303adb9..4bbf997c3 100644
--- a/client/src/components/Chat/Input/StopButton.tsx
+++ b/client/src/components/Chat/Input/StopButton.tsx
@@ -5,7 +5,7 @@ export default function StopButton({ stop, setShowStopButton }) {
         <div className="flex h-full flex-row items-center justify-center gap-3">
           <button
             type="button"
-            className="border-gizmo-gray-950 rounded-full border-2 p-1 dark:border-gray-200"
+            className="border-gizmo-gray-900 rounded-full border-2 p-1 dark:border-gray-200"
             aria-label="Stop generating"
             onClick={(e) => {
               setShowStopButton(false);
@@ -16,7 +16,7 @@ export default function StopButton({ stop, setShowStopButton }) {
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 16 16"
               fill="currentColor"
-              className="text-gizmo-gray-950 h-2 w-2 dark:text-gray-200"
+              className="text-gizmo-gray-900 h-2 w-2 dark:text-gray-200"
               height="16"
               width="16"
             >
diff --git a/client/src/components/Chat/Menus/Endpoints/MenuItem.tsx b/client/src/components/Chat/Menus/Endpoints/MenuItem.tsx
index 33775a9b2..56036d94d 100644
--- a/client/src/components/Chat/Menus/Endpoints/MenuItem.tsx
+++ b/client/src/components/Chat/Menus/Endpoints/MenuItem.tsx
@@ -132,7 +132,7 @@ const MenuItem: FC<MenuItemProps> = ({
                     'invisible flex gap-x-1 group-hover:visible',
                     selected ? 'visible' : '',
                     expiryTime
-                      ? 'w-full rounded-lg p-2 hover:bg-gray-200 dark:hover:bg-gray-900'
+                      ? 'w-full rounded-lg p-2 hover:bg-gray-200 dark:hover:bg-gray-800'
                       : '',
                   )}
                   onClick={(e) => {
diff --git a/client/src/components/Chat/Menus/EndpointsMenu.tsx b/client/src/components/Chat/Menus/EndpointsMenu.tsx
index 478141733..5648be71a 100644
--- a/client/src/components/Chat/Menus/EndpointsMenu.tsx
+++ b/client/src/components/Chat/Menus/EndpointsMenu.tsx
@@ -43,7 +43,7 @@ const EndpointsMenu: FC = () => {
           <Content
             side="bottom"
             align="start"
-            className="mt-2 max-h-[65vh] min-w-[340px] overflow-y-auto rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white lg:max-h-[75vh]"
+            className="mt-2 max-h-[65vh] min-w-[340px] overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800 dark:text-white lg:max-h-[75vh]"
           >
             <EndpointItems endpoints={endpoints} selected={endpoint} />
           </Content>
diff --git a/client/src/components/Chat/Menus/Presets/EditPresetDialog.tsx b/client/src/components/Chat/Menus/Presets/EditPresetDialog.tsx
index 00d97df76..77645d111 100644
--- a/client/src/components/Chat/Menus/Presets/EditPresetDialog.tsx
+++ b/client/src/components/Chat/Menus/Presets/EditPresetDialog.tsx
@@ -92,7 +92,7 @@ const EditPresetDialog = ({
                 </div>
               </div>
             </div>
-            <div className="my-4 w-full border-t border-gray-300 dark:border-gray-500" />
+            <div className="my-4 w-full border-t border-gray-300 dark:border-gray-700" />
             <div className="w-full p-0">
               <EndpointSettings
                 conversation={preset}
@@ -106,12 +106,15 @@ const EditPresetDialog = ({
         }
         buttons={
           <div className="mb-6 md:mb-2">
-            <DialogButton onClick={exportPreset} className="dark:hover:gray-400 border-gray-700">
+            <DialogButton
+              onClick={exportPreset}
+              className="border-gray-100 hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-600"
+            >
               {localize('com_endpoint_export')}
             </DialogButton>
             <DialogClose
               onClick={submitPreset}
-              className="dark:hover:gray-400 ml-2 border-gray-700 bg-green-600 text-white hover:bg-green-700 dark:hover:bg-green-800"
+              className="ml-2 bg-green-500 text-white hover:bg-green-600 dark:hover:bg-green-600"
             >
               {localize('com_ui_save')}
             </DialogClose>
diff --git a/client/src/components/Chat/Menus/Presets/PresetItems.tsx b/client/src/components/Chat/Menus/Presets/PresetItems.tsx
index b0ed2b792..03c6139e9 100644
--- a/client/src/components/Chat/Menus/Presets/PresetItems.tsx
+++ b/client/src/components/Chat/Menus/Presets/PresetItems.tsx
@@ -9,7 +9,7 @@ import FileUpload from '~/components/Input/EndpointMenu/FileUpload';
 import { PinIcon, EditIcon, TrashIcon } from '~/components/svg';
 import DialogTemplate from '~/components/ui/DialogTemplate';
 import { getPresetTitle, getEndpointField } from '~/utils';
-import { Dialog, DialogTrigger } from '~/components/ui/';
+import { Dialog, DialogTrigger, Label } from '~/components/ui/';
 import { MenuSeparator, MenuItem } from '../UI';
 import { icons } from '../Endpoints/Icons';
 import { useLocalize } from '~/hooks';
@@ -55,21 +55,32 @@ const PresetItems: FC<{
             <DialogTrigger asChild>
               <label
                 htmlFor="file-upload"
-                className="mr-1 flex h-[32px] cursor-pointer  items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
+                className="mr-1 flex h-[32px] cursor-pointer  items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-gray-100 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
               >
                 <Trash2 className="mr-1 flex w-[22px] items-center stroke-1" />
                 {localize('com_ui_clear')} {localize('com_ui_all')}
               </label>
             </DialogTrigger>
             <DialogTemplate
+              showCloseButton={false}
               title={`${localize('com_ui_clear')} ${localize('com_endpoint_presets')}`}
-              description={localize('com_endpoint_presets_clear_warning')}
+              className="max-w-[450px]"
+              main={
+                <>
+                  <div className="flex w-full flex-col items-center gap-2">
+                    <div className="grid w-full items-center gap-2">
+                      <Label htmlFor="chatGptLabel" className="text-left text-sm font-medium">
+                        {localize('com_endpoint_presets_clear_warning')}
+                      </Label>
+                    </div>
+                  </div>
+                </>
+              }
               selection={{
                 selectHandler: clearAllPresets,
                 selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
                 selectText: localize('com_ui_clear'),
               }}
-              className="max-w-[500px]"
             />
             <FileUpload onFileSelected={onFileSelected} />
           </Dialog>
@@ -124,7 +135,7 @@ const PresetItems: FC<{
                     >
                       <div className="flex h-full items-center justify-end gap-1">
                         <button
-                          className="m-0 h-full rounded-md p-2 px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
+                          className="m-0 h-full rounded-md p-2 px-4 text-gray-400 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
                           onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
@@ -134,7 +145,7 @@ const PresetItems: FC<{
                           <PinIcon unpin={defaultPreset?.presetId === preset.presetId} />
                         </button>
                         <button
-                          className="m-0 h-full rounded-md p-2 px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
+                          className="m-0 h-full rounded-md p-2 px-4 text-gray-400 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
                           onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
@@ -144,7 +155,7 @@ const PresetItems: FC<{
                           <EditIcon />
                         </button>
                         <button
-                          className="m-0 h-full rounded-md p-2 px-4 text-gray-400 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
+                          className="m-0 h-full rounded-md p-2 px-4 text-gray-400 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
                           onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
diff --git a/client/src/components/Chat/Menus/PresetsMenu.tsx b/client/src/components/Chat/Menus/PresetsMenu.tsx
index 01a34a10b..f79244378 100644
--- a/client/src/components/Chat/Menus/PresetsMenu.tsx
+++ b/client/src/components/Chat/Menus/PresetsMenu.tsx
@@ -29,7 +29,7 @@ const PresetsMenu: FC = () => {
           className={cn(
             'pointer-cursor relative flex flex-col rounded-md border border-black/10 bg-white text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
             'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-black/10 dark:radix-state-open:bg-black/20',
-            'min-w-4 z-50 flex h-[40px] flex-none items-center justify-center px-3 focus:ring-0 focus:ring-offset-0',
+            'z-50 flex h-[40px] min-w-4 flex-none items-center justify-center px-3 focus:ring-0 focus:ring-offset-0',
           )}
           id="presets-button"
           data-testid="presets-button"
@@ -52,7 +52,7 @@ const PresetsMenu: FC = () => {
           <Content
             side="bottom"
             align="center"
-            className="mt-2 max-h-[495px] overflow-x-hidden rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white md:min-w-[400px]"
+            className="mt-2 max-h-[495px] overflow-x-hidden rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800 dark:text-white md:min-w-[400px]"
           >
             <PresetItems
               presets={presets}
diff --git a/client/src/components/Chat/Menus/UI/MenuSeparator.tsx b/client/src/components/Chat/Menus/UI/MenuSeparator.tsx
index f4267c00d..c0de3efa0 100644
--- a/client/src/components/Chat/Menus/UI/MenuSeparator.tsx
+++ b/client/src/components/Chat/Menus/UI/MenuSeparator.tsx
@@ -4,7 +4,7 @@ const MenuSeparator: FC = () => (
   <div
     role="separator"
     aria-orientation="horizontal"
-    className="my-1.5 border-b bg-gray-100 dark:border-gray-700"
+    className="my-1.5 border-b bg-gray-200 dark:border-gray-700"
   />
 );
 
diff --git a/client/src/components/Chat/Messages/Content/Image.tsx b/client/src/components/Chat/Messages/Content/Image.tsx
index 059a4b75d..4176815de 100644
--- a/client/src/components/Chat/Messages/Content/Image.tsx
+++ b/client/src/components/Chat/Messages/Content/Image.tsx
@@ -49,7 +49,7 @@ const Image = ({
   return (
     <Dialog.Root>
       <div className="">
-        <div className="relative mt-1 flex h-auto w-full max-w-lg items-center justify-center overflow-hidden bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400">
+        <div className="relative mt-1 flex h-auto w-full max-w-lg items-center justify-center overflow-hidden bg-gray-200 text-gray-500 dark:bg-gray-700 dark:text-gray-400">
           <Dialog.Trigger asChild>
             <button type="button" aria-haspopup="dialog" aria-expanded="false">
               <LazyLoadImage
diff --git a/client/src/components/Chat/Messages/Content/MessageContent.tsx b/client/src/components/Chat/Messages/Content/MessageContent.tsx
index 540bb001f..91bc291a4 100644
--- a/client/src/components/Chat/Messages/Content/MessageContent.tsx
+++ b/client/src/components/Chat/Messages/Content/MessageContent.tsx
@@ -21,7 +21,7 @@ export const ErrorMessage = ({ text }: TText) => {
   }
   return (
     <Container>
-      <div className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-100">
+      <div className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200">
         <Error text={text} />
       </div>
     </Container>
@@ -59,7 +59,7 @@ const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplay
         className={cn(
           showCursor && !!text?.length ? 'result-streaming' : '',
           'markdown prose dark:prose-invert light w-full break-words',
-          isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-70',
+          isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-100',
         )}
       >
         {!isCreatedByUser ? (
diff --git a/client/src/components/Chat/Messages/Content/Part.tsx b/client/src/components/Chat/Messages/Content/Part.tsx
index e4917c139..e17e1f5e9 100644
--- a/client/src/components/Chat/Messages/Content/Part.tsx
+++ b/client/src/components/Chat/Messages/Content/Part.tsx
@@ -48,7 +48,7 @@ export default function Part({
     // Access the value property
     return (
       <Container>
-        <div className="markdown prose dark:prose-invert light my-1 w-full break-words dark:text-gray-70">
+        <div className="markdown prose dark:prose-invert light dark:text-gray-70 my-1 w-full break-words">
           <DisplayMessage
             text={part[ContentTypes.TEXT].value}
             isCreatedByUser={message.isCreatedByUser}
diff --git a/client/src/components/Chat/Messages/HoverButtons.tsx b/client/src/components/Chat/Messages/HoverButtons.tsx
index 2166c72ae..04184883a 100644
--- a/client/src/components/Chat/Messages/HoverButtons.tsx
+++ b/client/src/components/Chat/Messages/HoverButtons.tsx
@@ -55,10 +55,10 @@ export default function HoverButtons({
     <div className="visible mt-0 flex justify-center gap-1 self-end text-gray-400 lg:justify-start">
       <button
         className={cn(
-          'hover-button rounded-md p-1 pl-0 text-gray-400 hover:text-gray-950 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
+          'hover-button rounded-md p-1 pl-0 text-gray-400 hover:text-gray-900 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
           isCreatedByUser ? '' : 'active',
           hideEditButton ? 'opacity-0' : '',
-          isEditing ? 'active bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200' : '',
+          isEditing ? 'active bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200' : '',
         )}
         onClick={onEdit}
         type="button"
@@ -69,7 +69,7 @@ export default function HoverButtons({
       </button>
       <button
         className={cn(
-          'ml-0 flex items-center gap-1.5 rounded-md p-1 pl-0 text-xs hover:text-gray-950 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
+          'ml-0 flex items-center gap-1.5 rounded-md p-1 pl-0 text-xs hover:text-gray-900 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
           isSubmitting && isCreatedByUser ? 'md:opacity-0 md:group-hover:opacity-100' : '',
         )}
         onClick={() => copyToClipboard(setIsCopied)}
@@ -82,7 +82,7 @@ export default function HoverButtons({
       </button>
       {regenerateEnabled ? (
         <button
-          className="hover-button active rounded-md p-1 pl-0 text-gray-400 hover:text-gray-950 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible md:group-[.final-completion]:visible"
+          className="hover-button active rounded-md p-1 pl-0 text-gray-400 hover:text-gray-900 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible md:group-[.final-completion]:visible"
           onClick={regenerate}
           type="button"
           title={localize('com_ui_regenerate')}
@@ -92,7 +92,7 @@ export default function HoverButtons({
       ) : null}
       {continueSupported ? (
         <button
-          className="hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible "
+          className="hover-button active rounded-md p-1 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible "
           onClick={handleContinue}
           type="button"
           title={localize('com_ui_continue')}
diff --git a/client/src/components/Chat/Messages/MessagesView.tsx b/client/src/components/Chat/Messages/MessagesView.tsx
index 6130f33a1..9945b34a5 100644
--- a/client/src/components/Chat/Messages/MessagesView.tsx
+++ b/client/src/components/Chat/Messages/MessagesView.tsx
@@ -41,7 +41,7 @@ export default function MessagesView({
         >
           <div className="flex flex-col pb-9 text-sm dark:bg-transparent">
             {(_messagesTree && _messagesTree?.length == 0) || _messagesTree === null ? (
-              <div className="flex w-full items-center justify-center gap-1 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-900/50 dark:bg-gray-800 dark:text-gray-300">
+              <div className="flex w-full items-center justify-center gap-1 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-800/50 dark:bg-gray-800 dark:text-gray-300">
                 Nothing found
               </div>
             ) : (
@@ -59,7 +59,7 @@ export default function MessagesView({
               </>
             )}
             <div
-              className="dark:gpt-dark-gray group h-0 w-full flex-shrink-0 dark:border-gray-900/50"
+              className="dark:gpt-dark-gray group h-0 w-full flex-shrink-0 dark:border-gray-800/50"
               ref={messagesEndRef}
             />
           </div>
diff --git a/client/src/components/Conversations/Conversation.jsx b/client/src/components/Conversations/Conversation.jsx
index 1dc9bf4e1..cfa3e3c40 100644
--- a/client/src/components/Conversations/Conversation.jsx
+++ b/client/src/components/Conversations/Conversation.jsx
@@ -106,12 +106,12 @@ export default function Conversation({ conversation, retainView }) {
 
   const aProps = {
     className:
-      'animate-flash group relative flex cursor-pointer items-center gap-3 break-all rounded-md bg-gray-800 py-3 px-3 pr-14 hover:bg-gray-800',
+      'animate-flash group relative flex cursor-pointer items-center gap-3 break-all rounded-md bg-gray-300 dark:bg-gray-800 py-3 px-3 pr-14',
   };
 
   if (currentConversation?.conversationId !== conversationId) {
     aProps.className =
-      'group relative flex cursor-pointer items-center gap-3 break-all rounded-md py-3 px-3 hover:bg-gray-900 hover:pr-4';
+      'group relative flex cursor-pointer items-center gap-3 break-all rounded-md py-3 px-3 hover:bg-gray-200 dark:hover:bg-gray-800 hover:pr-4';
   }
 
   return (
@@ -149,7 +149,7 @@ export default function Conversation({ conversation, retainView }) {
           />
         </div>
       ) : (
-        <div className="absolute inset-y-0 right-0 z-10 w-8 rounded-r-md bg-gradient-to-l from-black group-hover:from-gray-900" />
+        <div className="absolute inset-y-0 right-0 z-10 w-8 rounded-r-md bg-gradient-to-l from-gray-50 group-hover:from-gray-50 dark:from-gray-900 dark:group-hover:from-gray-800" />
       )}
     </a>
   );
diff --git a/client/src/components/Conversations/Convo.tsx b/client/src/components/Conversations/Convo.tsx
index 9a9e83046..5ec4be2db 100644
--- a/client/src/components/Conversations/Convo.tsx
+++ b/client/src/components/Conversations/Convo.tsx
@@ -9,7 +9,7 @@ import { useUpdateConversationMutation } from '~/data-provider';
 import { MinimalIcon } from '~/components/Endpoints';
 import { NotificationSeverity } from '~/common';
 import { useToastContext } from '~/Providers';
-import DeleteButton from './NewDeleteButton';
+import DeleteButton from './DeleteButton';
 import { getEndpointField } from '~/utils';
 import RenameButton from './RenameButton';
 import store from '~/store';
@@ -103,6 +103,9 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
     error: false,
     className: 'mr-0',
     isCreatedByUser: false,
+    chatGptLabel: undefined,
+    modelLabel: undefined,
+    jailbreak: undefined,
   });
 
   const handleKeyDown = (e: KeyEvent) => {
@@ -112,7 +115,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
   };
 
   const aProps = {
-    className: `group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-3 break-all rounded-lg bg-gray-800 py-2 px-2 ${
+    className: `group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-3 break-all rounded-lg bg-gray-200 dark:bg-gray-800 py-2 px-2 ${
       renaming ? 'pr-14' : ''
     }`,
   };
@@ -123,7 +126,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
 
   if (!activeConvo) {
     aProps.className =
-      'group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-3 break-all rounded-lg py-2 px-2 hover:bg-gray-900';
+      'group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-3 break-all rounded-lg py-2 px-2 hover:bg-gray-200 dark:hover:bg-gray-800';
   }
 
   return (
@@ -153,11 +156,11 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
       {activeConvo ? (
         <div
           className={`absolute bottom-0 right-1 top-0 w-20 bg-gradient-to-l ${
-            !renaming ? 'from-gray-800 from-60% to-transparent' : ''
+            !renaming ? 'from-gray-100 from-60% to-transparent dark:from-gray-800' : ''
           }`}
         ></div>
       ) : (
-        <div className="from--gray-900 absolute bottom-0 right-0 top-0 w-2 bg-gradient-to-l from-0% to-transparent group-hover:w-1 group-hover:from-60%"></div>
+        <div className="absolute bottom-0 right-0 top-0 w-2 bg-gradient-to-l from-gray-50 from-0% to-transparent group-hover:w-1 group-hover:from-60% dark:from-gray-900"></div>
       )}
       {activeConvo ? (
         <div className="visible absolute right-1 z-10 flex text-gray-400">
@@ -170,7 +173,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
           />
         </div>
       ) : (
-        <div className="absolute bottom-0 right-0 top-0 w-20 rounded-lg bg-gradient-to-l from-black from-0% to-transparent  group-hover:from-gray-900" />
+        <div className="absolute bottom-0 right-0 top-0 w-20 rounded-lg bg-gradient-to-l from-gray-50 from-0% to-transparent group-hover:from-gray-50  dark:from-gray-900 dark:group-hover:from-gray-900" />
       )}
     </a>
   );
diff --git a/client/src/components/Conversations/DeleteButton.tsx b/client/src/components/Conversations/DeleteButton.tsx
index 3f8db49df..6ebe078c7 100644
--- a/client/src/components/Conversations/DeleteButton.tsx
+++ b/client/src/components/Conversations/DeleteButton.tsx
@@ -38,9 +38,12 @@ export default function DeleteButton({ conversationId, renaming, retainView, tit
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <button className="p-1 hover:text-white">{renaming ? <CrossIcon /> : <TrashIcon />}</button>
+        <button className="p-1 hover:text-black dark:hover:text-white">
+          {renaming ? <CrossIcon /> : <TrashIcon />}
+        </button>
       </DialogTrigger>
       <DialogTemplate
+        showCloseButton={false}
         title={localize('com_ui_delete_conversation')}
         className="max-w-[450px]"
         main={
@@ -56,7 +59,8 @@ export default function DeleteButton({ conversationId, renaming, retainView, tit
         }
         selection={{
           selectHandler: confirmDelete,
-          selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
+          selectClasses:
+            'bg-red-700 dark:bg-red-600 hover:bg-red-800 dark:hover:bg-red-800 text-white',
           selectText: localize('com_ui_delete'),
         }}
       />
diff --git a/client/src/components/Conversations/NewDeleteButton.tsx b/client/src/components/Conversations/NewDeleteButton.tsx
deleted file mode 100644
index 03ea91880..000000000
--- a/client/src/components/Conversations/NewDeleteButton.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { useParams } from 'react-router-dom';
-import { QueryKeys } from 'librechat-data-provider';
-import { useQueryClient } from '@tanstack/react-query';
-import type { TMessage } from 'librechat-data-provider';
-import { useLocalize, useConversations, useNewConvo } from '~/hooks';
-import { useDeleteConversationMutation } from '~/data-provider';
-import { Dialog, DialogTrigger, Label } from '~/components/ui';
-import DialogTemplate from '~/components/ui/DialogTemplate';
-import { TrashIcon, CrossIcon } from '~/components/svg';
-
-export default function DeleteButton({ conversationId, renaming, retainView, title }) {
-  const localize = useLocalize();
-  const queryClient = useQueryClient();
-  // TODO: useNewConvo uses indices so we need to update global index state on every switch to Convo
-  const { newConversation } = useNewConvo();
-  const { refreshConversations } = useConversations();
-  const { conversationId: currentConvoId } = useParams();
-  const deleteConvoMutation = useDeleteConversationMutation();
-
-  const confirmDelete = () => {
-    const messages = queryClient.getQueryData<TMessage[]>([QueryKeys.messages, conversationId]);
-    const thread_id = messages?.[messages?.length - 1]?.thread_id;
-
-    deleteConvoMutation.mutate(
-      { conversationId, thread_id, source: 'button' },
-      {
-        onSuccess: () => {
-          if (currentConvoId == conversationId) {
-            newConversation();
-          }
-
-          refreshConversations();
-          retainView();
-        },
-      },
-    );
-  };
-
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <button className="p-1 hover:text-white">{renaming ? <CrossIcon /> : <TrashIcon />}</button>
-      </DialogTrigger>
-      <DialogTemplate
-        title={localize('com_ui_delete_conversation')}
-        className="max-w-[450px]"
-        main={
-          <>
-            <div className="flex w-full flex-col items-center gap-2">
-              <div className="grid w-full items-center gap-2">
-                <Label htmlFor="chatGptLabel" className="text-left text-sm font-medium">
-                  {localize('com_ui_delete_conversation_confirm')} <strong>{title}</strong>
-                </Label>
-              </div>
-            </div>
-          </>
-        }
-        selection={{
-          selectHandler: confirmDelete,
-          selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
-          selectText: localize('com_ui_delete'),
-        }}
-      />
-    </Dialog>
-  );
-}
diff --git a/client/src/components/Conversations/RenameButton.tsx b/client/src/components/Conversations/RenameButton.tsx
index 702fc667e..8dbabab51 100644
--- a/client/src/components/Conversations/RenameButton.tsx
+++ b/client/src/components/Conversations/RenameButton.tsx
@@ -15,7 +15,9 @@ export default function RenameButton({
   twcss,
 }: RenameButtonProps): ReactElement {
   const handler = renaming ? onRename : renameHandler;
-  const classProp: { className?: string } = { className: 'p-1 hover:text-white' };
+  const classProp: { className?: string } = {
+    className: 'p-1 hover:text-black dark:hover:text-white',
+  };
   if (twcss) {
     classProp.className = twcss;
   }
diff --git a/client/src/components/Conversations/index.ts b/client/src/components/Conversations/index.ts
index 272522617..17acb3e43 100644
--- a/client/src/components/Conversations/index.ts
+++ b/client/src/components/Conversations/index.ts
@@ -1,5 +1,4 @@
 export { default as Pages } from './Pages';
 export { default as Conversation } from './Conversation';
-export { default as DeleteButton } from './DeleteButton';
 export { default as RenameButton } from './RenameButton';
 export { default as Conversations } from './Conversations';
diff --git a/client/src/components/Endpoints/EndpointOptionsPopover.tsx b/client/src/components/Endpoints/EndpointOptionsPopover.tsx
index cb67ae72a..dfa6e912e 100644
--- a/client/src/components/Endpoints/EndpointOptionsPopover.tsx
+++ b/client/src/components/Endpoints/EndpointOptionsPopover.tsx
@@ -45,7 +45,7 @@ export default function EndpointOptionsPopover({
           <div className="flex w-full items-center bg-slate-100 px-2 py-2 dark:bg-gray-800/60">
             <Button
               type="button"
-              className="h-auto justify-start bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0"
+              className="h-auto justify-start bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black focus:ring-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0"
               onClick={saveAsPreset}
             >
               <Save className="mr-1 w-[14px]" />
@@ -55,7 +55,7 @@ export default function EndpointOptionsPopover({
             <Button
               type="button"
               className={cn(
-                'ml-auto h-auto bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white',
+                'ml-auto h-auto bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white',
                 removeFocusOutlines,
               )}
               onClick={closePopover}
diff --git a/client/src/components/Endpoints/MinimalIcon.tsx b/client/src/components/Endpoints/MinimalIcon.tsx
index ec3dff401..4e5c505d2 100644
--- a/client/src/components/Endpoints/MinimalIcon.tsx
+++ b/client/src/components/Endpoints/MinimalIcon.tsx
@@ -4,7 +4,7 @@ import {
   AzureMinimalIcon,
   OpenAIMinimalIcon,
   LightningIcon,
-  PluginMinimalIcon,
+  MinimalPlugin,
   BingAIMinimalIcon,
   GoogleMinimalIcon,
   CustomMinimalIcon,
@@ -29,7 +29,7 @@ const MinimalIcon: React.FC<IconProps> = (props) => {
       name: props.chatGptLabel || 'ChatGPT',
     },
     [EModelEndpoint.openAI]: { icon: <OpenAIMinimalIcon />, name: props.chatGptLabel || 'ChatGPT' },
-    [EModelEndpoint.gptPlugins]: { icon: <PluginMinimalIcon />, name: 'Plugins' },
+    [EModelEndpoint.gptPlugins]: { icon: <MinimalPlugin />, name: 'Plugins' },
     [EModelEndpoint.google]: { icon: <GoogleMinimalIcon />, name: props.modelLabel || 'Google' },
     [EModelEndpoint.anthropic]: {
       icon: <AnthropicIcon className="icon-md shrink-0 dark:text-white" />,
@@ -66,13 +66,13 @@ const MinimalIcon: React.FC<IconProps> = (props) => {
         height: size,
       }}
       className={cn(
-        'relative flex items-center justify-center rounded-sm text-white',
+        'relative flex items-center justify-center rounded-sm text-black dark:text-white',
         props.className || '',
       )}
     >
       {icon}
       {error && (
-        <span className="absolute right-0 top-[20px] -mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white">
+        <span className="absolute right-0 top-[20px] -mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-black dark:text-white">
           !
         </span>
       )}
diff --git a/client/src/components/Endpoints/PopoverButtons.tsx b/client/src/components/Endpoints/PopoverButtons.tsx
index f763770fc..8d7f66da8 100644
--- a/client/src/components/Endpoints/PopoverButtons.tsx
+++ b/client/src/components/Endpoints/PopoverButtons.tsx
@@ -66,7 +66,7 @@ export default function PopoverButtons({
           type="button"
           className={cn(
             button.buttonClass,
-            'ml-1 h-auto justify-start bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0',
+            'ml-1 h-auto justify-start bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0',
             buttonClass ?? '',
           )}
           onClick={button.handler}
diff --git a/client/src/components/Endpoints/SaveAsPresetDialog.tsx b/client/src/components/Endpoints/SaveAsPresetDialog.tsx
index 5ce7cd3c5..f65d6a7d8 100644
--- a/client/src/components/Endpoints/SaveAsPresetDialog.tsx
+++ b/client/src/components/Endpoints/SaveAsPresetDialog.tsx
@@ -50,7 +50,8 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }: TEditPresetProps) =>
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogTemplate
         title={localize('com_endpoint_save_as_preset')}
-        className="w-full sm:w-1/4"
+        className="w-11/12 sm:w-1/4"
+        showCloseButton={false}
         main={
           <div className="flex w-full flex-col items-center gap-2">
             <div className="grid w-full items-center gap-2">
@@ -64,7 +65,7 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }: TEditPresetProps) =>
                 placeholder="Set a custom name for this preset"
                 className={cn(
                   defaultTextPropsLabel,
-                  'flex h-10 max-h-10 w-full resize-none px-3 py-2',
+                  'flex h-10 max-h-10 w-full resize-none border-gray-100 px-3 py-2 dark:border-gray-600',
                   removeFocusOutlines,
                 )}
               />
@@ -73,7 +74,7 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }: TEditPresetProps) =>
         }
         selection={{
           selectHandler: submitPreset,
-          selectClasses: 'bg-green-600 hover:bg-green-700 dark:hover:bg-green-800 text-white',
+          selectClasses: 'bg-green-500 hover:bg-green-600 dark:hover:bg-green-600 text-white',
           selectText: localize('com_ui_save'),
         }}
       />
diff --git a/client/src/components/Endpoints/Settings/Examples.tsx b/client/src/components/Endpoints/Settings/Examples.tsx
index 303f21cab..362eaac70 100644
--- a/client/src/components/Endpoints/Settings/Examples.tsx
+++ b/client/src/components/Endpoints/Settings/Examples.tsx
@@ -78,14 +78,14 @@ function Examples({ readonly, examples, setExample, addExample, removeExample }:
       <div className="flex justify-center">
         <Button
           type="button"
-          className="mr-2 mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0"
+          className="mr-2 mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0"
           onClick={removeExample}
         >
           <Minus className="w-[16px]" />
         </Button>
         <Button
           type="button"
-          className="mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0"
+          className="mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-gray-100 hover:text-black focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0"
           onClick={addExample}
         >
           <Plus className="w-[16px]" />
diff --git a/client/src/components/Endpoints/index.ts b/client/src/components/Endpoints/index.ts
index c9b534d3a..71dd98551 100644
--- a/client/src/components/Endpoints/index.ts
+++ b/client/src/components/Endpoints/index.ts
@@ -2,7 +2,6 @@ export { default as Icon } from './Icon';
 export { default as MinimalIcon } from './MinimalIcon';
 export { default as PopoverButtons } from './PopoverButtons';
 export { default as EndpointSettings } from './EndpointSettings';
-export { default as EditPresetDialog } from './EditPresetDialog';
 export { default as SaveAsPresetDialog } from './SaveAsPresetDialog';
 export { default as EndpointOptionsDialog } from './EndpointOptionsDialog';
 export { default as EndpointOptionsPopover } from './EndpointOptionsPopover';
diff --git a/client/src/components/Input/EndpointMenu/EndpointItem.tsx b/client/src/components/Input/EndpointMenu/EndpointItem.tsx
index 9e68ca3da..f1febf116 100644
--- a/client/src/components/Input/EndpointMenu/EndpointItem.tsx
+++ b/client/src/components/Input/EndpointMenu/EndpointItem.tsx
@@ -42,7 +42,7 @@ export default function ModelItem({
       <DropdownMenuRadioItem
         value={value}
         className={cn(
-          'group dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800',
+          'group dark:font-semibold dark:text-gray-200 dark:hover:bg-gray-800',
           isSelected ? 'active bg-gray-50 dark:bg-gray-800' : '',
         )}
         id={endpoint}
diff --git a/client/src/components/Input/EndpointMenu/EndpointMenu.jsx b/client/src/components/Input/EndpointMenu/EndpointMenu.jsx
index cd652730a..44df016fd 100644
--- a/client/src/components/Input/EndpointMenu/EndpointMenu.jsx
+++ b/client/src/components/Input/EndpointMenu/EndpointMenu.jsx
@@ -7,7 +7,7 @@ import {
   useCreatePresetMutation,
   useGetEndpointsQuery,
 } from 'librechat-data-provider/react-query';
-import { Icon, EditPresetDialog } from '~/components/Endpoints';
+import { Icon } from '~/components/Endpoints';
 import EndpointItems from './EndpointItems';
 import PresetItems from './PresetItems';
 import FileUpload from './FileUpload';
@@ -37,8 +37,6 @@ export default function NewConversationMenu() {
   const [menuOpen, setMenuOpen] = useState(false);
   const [showPresets, setShowPresets] = useState(true);
   const [showEndpoints, setShowEndpoints] = useState(true);
-  const [presetModalVisible, setPresetModalVisible] = useState(false);
-  const [preset, setPreset] = useState(false);
   const [conversation, setConversation] = useRecoilState(store.conversation) ?? {};
   const [messages, setMessages] = useRecoilState(store.messages);
 
@@ -130,11 +128,6 @@ export default function NewConversationMenu() {
     newConversation({}, newPreset);
   };
 
-  const onChangePreset = (preset) => {
-    setPresetModalVisible(true);
-    setPreset(preset);
-  };
-
   const clearAllPresets = () => {
     deletePresetsMutation.mutate({ arg: {} });
   };
@@ -158,7 +151,7 @@ export default function NewConversationMenu() {
   };
 
   return (
-    <TooltipProvider delayDuration={300}>
+    <TooltipProvider delayDuration={250}>
       <Tooltip>
         <Dialog className="z-[100]">
           <DropdownMenu open={menuOpen} onOpenChange={onOpenChange}>
@@ -180,7 +173,7 @@ export default function NewConversationMenu() {
               {localize('com_endpoint_open_menu')}
             </TooltipContent>
             <DropdownMenuContent
-              className="z-[100] w-[375px] dark:bg-gray-900 md:w-96"
+              className="z-[100] w-[375px] dark:bg-gray-800 md:w-96"
               onCloseAutoFocus={(event) => event.preventDefault()}
               side="top"
             >
@@ -226,7 +219,7 @@ export default function NewConversationMenu() {
                   <DialogTrigger asChild>
                     <label
                       htmlFor="file-upload"
-                      className="mr-1 flex h-[32px] h-auto cursor-pointer  items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
+                      className="mr-1 flex h-[32px] h-auto cursor-pointer  items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-gray-100 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
                     >
                       <Trash2 className="mr-1 flex w-[22px] items-center stroke-1" />
                       {localize('com_ui_clear')} {localize('com_ui_all')}
@@ -257,7 +250,6 @@ export default function NewConversationMenu() {
                     <PresetItems
                       presets={presets}
                       onSelect={onSelectPreset}
-                      onChangePreset={onChangePreset}
                       onDeletePreset={onDeletePreset}
                     />
                   ) : (
@@ -268,11 +260,6 @@ export default function NewConversationMenu() {
               </DropdownMenuRadioGroup>
             </DropdownMenuContent>
           </DropdownMenu>
-          <EditPresetDialog
-            open={presetModalVisible}
-            onOpenChange={setPresetModalVisible}
-            preset={preset}
-          />
         </Dialog>
       </Tooltip>
     </TooltipProvider>
diff --git a/client/src/components/Input/EndpointMenu/FileUpload.tsx b/client/src/components/Input/EndpointMenu/FileUpload.tsx
index 092019839..c3722b0b6 100644
--- a/client/src/components/Input/EndpointMenu/FileUpload.tsx
+++ b/client/src/components/Input/EndpointMenu/FileUpload.tsx
@@ -66,7 +66,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
     <label
       htmlFor={`file-upload-${id}`}
       className={cn(
-        'mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal transition-colors hover:bg-slate-200 hover:text-green-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500',
+        'mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal transition-colors hover:bg-gray-100 hover:text-green-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500',
         statusColor,
         containerClassName,
       )}
diff --git a/client/src/components/Input/EndpointMenu/PresetItem.tsx b/client/src/components/Input/EndpointMenu/PresetItem.tsx
index e195d34c2..acd0cec03 100644
--- a/client/src/components/Input/EndpointMenu/PresetItem.tsx
+++ b/client/src/components/Input/EndpointMenu/PresetItem.tsx
@@ -67,7 +67,7 @@ export default function PresetItem({
     <DropdownMenuRadioItem
       /* @ts-ignore, value can be an object as well */
       value={value}
-      className="group flex h-10 max-h-[44px] flex-row justify-between dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800 sm:h-auto"
+      className="group flex h-10 max-h-[44px] flex-row justify-between dark:font-semibold dark:text-gray-200 dark:hover:bg-gray-800 sm:h-auto"
     >
       <div className="flex items-center justify-start">
         {icon}
diff --git a/client/src/components/Input/SetKeyDialog/HelpText.tsx b/client/src/components/Input/SetKeyDialog/HelpText.tsx
index 38cb463aa..3b49b4b74 100644
--- a/client/src/components/Input/SetKeyDialog/HelpText.tsx
+++ b/client/src/components/Input/SetKeyDialog/HelpText.tsx
@@ -6,7 +6,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
   const localize = useLocalize();
   const textMap = {
     [EModelEndpoint.bingAI]: (
-      <small className="break-all text-gray-600">
+      <small className="break-all text-gray-500">
         {localize('com_endpoint_config_key_get_edge_key')}{' '}
         <a
           target="_blank"
@@ -30,7 +30,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
       </small>
     ),
     [EModelEndpoint.chatGPTBrowser]: (
-      <small className="break-all text-gray-600">
+      <small className="break-all text-gray-500">
         {localize('com_endpoint_config_key_chatgpt')}{' '}
         <a
           target="_blank"
@@ -56,7 +56,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
     ),
     [EModelEndpoint.google]: (
       <>
-        <small className="break-all text-gray-600">
+        <small className="break-all text-gray-500">
           {localize('com_endpoint_config_google_service_key')}
           {': '}
           {localize('com_endpoint_config_key_google_need_to')}{' '}
@@ -80,7 +80,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
           {'. '}
           {localize('com_endpoint_config_key_google_vertex_api_role')}
         </small>
-        <small className="break-all text-gray-600">
+        <small className="break-all text-gray-500">
           {localize('com_endpoint_config_google_api_key')}
           {': '}
           {localize('com_endpoint_config_google_api_info')}{' '}
diff --git a/client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx b/client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx
index 0f9fc7f2e..361edb194 100644
--- a/client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx
+++ b/client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx
@@ -188,7 +188,7 @@ const SetKeyDialog = ({
         }
         selection={{
           selectHandler: submit,
-          selectClasses: 'bg-green-600 hover:bg-green-700 dark:hover:bg-green-800 text-white',
+          selectClasses: 'bg-green-500 hover:bg-green-600 dark:hover:bg-green-600 text-white',
           selectText: localize('com_ui_submit'),
         }}
         leftButtons={
diff --git a/client/src/components/Input/SubmitButton.tsx b/client/src/components/Input/SubmitButton.tsx
index cf8ca37c2..dd77d426d 100644
--- a/client/src/components/Input/SubmitButton.tsx
+++ b/client/src/components/Input/SubmitButton.tsx
@@ -69,7 +69,7 @@ export default function SubmitButton({
   if (isSubmitting && isSmallScreen) {
     return (
       <button onClick={handleStopGenerating} type="button">
-        <div className="m-1 mr-0 rounded-md p-2 pb-[10px] pt-[10px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
+        <div className="m-1 mr-0 rounded-md p-2 pb-[10px] pt-[10px] group-hover:bg-gray-200 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-800 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
           <StopGeneratingIcon />
         </div>
       </button>
@@ -93,7 +93,7 @@ export default function SubmitButton({
           type="button"
           className="group absolute bottom-0 right-0 z-[101] flex h-[100%] w-auto items-center justify-center bg-transparent pr-1 text-gray-500"
         >
-          <div className="flex items-center justify-center rounded-md text-xs group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
+          <div className="flex items-center justify-center rounded-md text-xs group-hover:bg-gray-200 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-800 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
             <div className="m-0 mr-0 flex items-center justify-center rounded-md p-2 sm:p-2">
               <Settings className="mr-1 inline-block h-auto w-[18px]" />
               {localize('com_endpoint_config_key_name_placeholder')}
@@ -107,7 +107,7 @@ export default function SubmitButton({
     );
   } else {
     return (
-      <TooltipProvider delayDuration={50}>
+      <TooltipProvider delayDuration={250}>
         <Tooltip>
           <TooltipTrigger asChild>
             <button
diff --git a/client/src/components/Input/TextChat.tsx b/client/src/components/Input/TextChat.tsx
index 26a000dd8..cf4a5e07d 100644
--- a/client/src/components/Input/TextChat.tsx
+++ b/client/src/components/Input/TextChat.tsx
@@ -150,11 +150,11 @@ export default function TextChat({ isSearchView = false }: TextChatProps) {
         className="no-gradient-sm fixed bottom-0 left-0 w-full pt-6 sm:bg-gradient-to-b md:absolute md:w-[calc(100%-.5rem)]"
         style={{
           background: `linear-gradient(to bottom, 
-                ${isDark ? 'rgba(52, 53, 65, 0)' : 'rgba(255, 255, 255, 0)'}, 
-                ${isDark ? 'rgba(52, 53, 65, 0.08)' : 'rgba(255, 255, 255, 0.08)'}, 
-                ${isDark ? 'rgba(52, 53, 65, 0.38)' : 'rgba(255, 255, 255, 0.38)'}, 
-                ${isDark ? 'rgba(52, 53, 65, 1)' : 'rgba(255, 255, 255, 1)'}, 
-                ${isDark ? '#343541' : '#ffffff'})`,
+                ${isDark ? 'rgba(23, 23, 23, 0)' : 'rgba(255, 255, 255, 0)'}, 
+                ${isDark ? 'rgba(23, 23, 23, 0.08)' : 'rgba(255, 255, 255, 0.08)'}, 
+                ${isDark ? 'rgba(23, 23, 23, 0.38)' : 'rgba(255, 255, 255, 0.38)'}, 
+                ${isDark ? 'rgba(23, 23, 23, 1)' : 'rgba(255, 255, 255, 1)'}, 
+                ${isDark ? '#171717' : '#ffffff'})`,
         }}
       >
         <OptionsBar />
@@ -165,8 +165,8 @@ export default function TextChat({ isSearchView = false }: TextChatProps) {
                 className={cn(
                   'relative flex flex-grow flex-row rounded-xl border border-black/10 py-[10px] md:py-4 md:pl-4',
                   'shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]',
-                  'dark:border-gray-900/50 dark:text-white',
-                  disabled ? 'bg-gray-100 dark:bg-gray-900' : 'bg-white dark:bg-gray-700',
+                  'dark:border-gray-800/50 dark:text-white',
+                  disabled ? 'bg-gray-200 dark:bg-gray-800' : 'bg-white dark:bg-gray-700',
                 )}
               >
                 <EndpointMenu />
diff --git a/client/src/components/Messages/Content/CodeBlock.tsx b/client/src/components/Messages/Content/CodeBlock.tsx
index 6647d0ca4..3b5827706 100644
--- a/client/src/components/Messages/Content/CodeBlock.tsx
+++ b/client/src/components/Messages/Content/CodeBlock.tsx
@@ -20,7 +20,7 @@ type CodeBlockProps = Pick<CodeBarProps, 'lang' | 'plugin' | 'error'> & {
 const CodeBar: React.FC<CodeBarProps> = React.memo(({ lang, codeRef, error, plugin = null }) => {
   const [isCopied, setIsCopied] = useState(false);
   return (
-    <div className="relative flex items-center rounded-tl-md rounded-tr-md bg-gray-800 px-4 py-2 font-sans text-xs text-gray-200 dark:bg-gray-900">
+    <div className="relative flex items-center rounded-tl-md rounded-tr-md bg-gray-700 px-4 py-2 font-sans text-xs text-gray-200 dark:bg-gray-700">
       <span className="">{lang}</span>
       {plugin ? (
         <InfoIcon className="ml-auto flex h-4 w-4 gap-2 text-white/50" />
@@ -67,7 +67,7 @@ const CodeBlock: React.FC<CodeBlockProps> = ({
   const language = plugin || error ? 'json' : lang;
 
   return (
-    <div className="w-full rounded-md bg-black text-xs text-white/80">
+    <div className="w-full rounded-md bg-gray-900 text-xs text-white/80">
       <CodeBar lang={lang} codeRef={codeRef} plugin={!!plugin} error={error} />
       <div className={cn(classProp, 'overflow-y-auto p-4')}>
         <code
diff --git a/client/src/components/Messages/Content/MessageContent.tsx b/client/src/components/Messages/Content/MessageContent.tsx
index cae626fef..07c92f009 100644
--- a/client/src/components/Messages/Content/MessageContent.tsx
+++ b/client/src/components/Messages/Content/MessageContent.tsx
@@ -18,7 +18,7 @@ const ErrorMessage = ({ text }: TText) => {
   }
   return (
     <Container>
-      <div className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-100">
+      <div className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200">
         <Error text={text} />
       </div>
     </Container>
@@ -31,7 +31,7 @@ const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplay
     <div
       className={cn(
         'markdown prose dark:prose-invert light w-full break-words',
-        isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-70',
+        isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-100',
       )}
     >
       {!isCreatedByUser ? (
diff --git a/client/src/components/Messages/Content/Plugin.tsx b/client/src/components/Messages/Content/Plugin.tsx
index 86e6b79bf..bde259cff 100644
--- a/client/src/components/Messages/Content/Plugin.tsx
+++ b/client/src/components/Messages/Content/Plugin.tsx
@@ -86,7 +86,7 @@ const Plugin: React.FC<PluginProps> = ({ plugin }) => {
               <div
                 className={cn(
                   plugin.loading ? 'bg-green-100' : 'bg-gray-20',
-                  'my-1 flex items-center rounded p-3 text-xs text-gray-900',
+                  'my-1 flex items-center rounded p-3 text-xs text-gray-800',
                 )}
               >
                 <div>
@@ -94,7 +94,7 @@ const Plugin: React.FC<PluginProps> = ({ plugin }) => {
                     <div>{generateStatus()}</div>
                   </div>
                 </div>
-                {plugin.loading && <Spinner className="ml-1" />}
+                {plugin.loading && <Spinner className="ml-1 text-black" />}
                 <Disclosure.Button className="ml-12 flex items-center gap-2">
                   <ChevronDownIcon {...iconProps} />
                 </Disclosure.Button>
diff --git a/client/src/components/Messages/HoverButtons.tsx b/client/src/components/Messages/HoverButtons.tsx
index da78371d5..6841b471a 100644
--- a/client/src/components/Messages/HoverButtons.tsx
+++ b/client/src/components/Messages/HoverButtons.tsx
@@ -51,10 +51,10 @@ export default function HoverButtons({
     <div className="visible mt-2 flex justify-center gap-3 self-end text-gray-400 md:gap-4 lg:absolute lg:right-0 lg:top-0 lg:mt-0 lg:translate-x-full lg:gap-1 lg:self-center lg:pl-2">
       <button
         className={cn(
-          'hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible',
+          'hover-button rounded-md p-1 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible',
           isCreatedByUser ? '' : 'active',
           hideEditButton ? 'opacity-0' : '',
-          isEditing ? 'active bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200' : '',
+          isEditing ? 'active bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200' : '',
         )}
         onClick={onEdit}
         type="button"
@@ -65,7 +65,7 @@ export default function HoverButtons({
       </button>
       <button
         className={cn(
-          'hover-button rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible',
+          'hover-button rounded-md p-1 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible',
           isCreatedByUser ? '' : 'active',
         )}
         onClick={() => copyToClipboard(setIsCopied)}
@@ -78,7 +78,7 @@ export default function HoverButtons({
       </button>
       {regenerateEnabled ? (
         <button
-          className="hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible"
+          className="hover-button active rounded-md p-1 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible"
           onClick={regenerate}
           type="button"
           title={localize('com_ui_regenerate')}
@@ -88,7 +88,7 @@ export default function HoverButtons({
       ) : null}
       {continueSupported ? (
         <button
-          className="hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible "
+          className="hover-button active rounded-md p-1 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible "
           onClick={handleContinue}
           type="button"
           title={localize('com_ui_continue')}
diff --git a/client/src/components/Messages/Message.tsx b/client/src/components/Messages/Message.tsx
index 3f3826f54..774355559 100644
--- a/client/src/components/Messages/Message.tsx
+++ b/client/src/components/Messages/Message.tsx
@@ -88,10 +88,10 @@ export default function Message(props: TMessageProps) {
   };
 
   const commonClasses =
-    'w-full border-b text-gray-800 group border-black/10 dark:border-gray-900/50 dark:text-gray-100';
+    'w-full border-b text-gray-800 group border-black/10 dark:border-gray-800/50 dark:text-gray-200';
   const uniqueClasses = isCreatedByUser
     ? 'bg-white dark:bg-gray-800 dark:text-gray-20'
-    : 'bg-gray-50 dark:bg-gray-1000 dark:text-gray-70';
+    : 'bg-gray-50 dark:bg-gray-700 dark:text-gray-100';
 
   const messageProps = {
     className: cn(commonClasses, uniqueClasses),
diff --git a/client/src/components/Messages/MessageHeader.tsx b/client/src/components/Messages/MessageHeader.tsx
index f41876f2e..d8e770318 100644
--- a/client/src/components/Messages/MessageHeader.tsx
+++ b/client/src/components/Messages/MessageHeader.tsx
@@ -90,7 +90,7 @@ const MessageHeader = ({ isSearchView = false }) => {
     <>
       <div
         className={cn(
-          'flex min-h-[60px] w-full flex-wrap items-center justify-between gap-3 border-b border-black/10 bg-white text-sm text-gray-500 transition-all hover:bg-gray-50 dark:border-gray-900/50 dark:bg-gray-800 dark:hover:bg-gray-700',
+          'flex min-h-[60px] w-full flex-wrap items-center justify-between gap-3 border-b border-black/10 bg-white text-sm text-gray-500 transition-all hover:bg-gray-50 dark:border-gray-800/50 dark:bg-gray-800 dark:hover:bg-gray-700',
           isNotClickable ? '' : 'cursor-pointer',
           'sticky top-0 z-10',
         )}
diff --git a/client/src/components/Messages/Messages.tsx b/client/src/components/Messages/Messages.tsx
index 19f4b1e7b..0e49b2086 100644
--- a/client/src/components/Messages/Messages.tsx
+++ b/client/src/components/Messages/Messages.tsx
@@ -84,7 +84,7 @@ export default function Messages({ isSearchView = false }) {
               <Spinner />
             </div>
           ) : _messagesTree?.length == 0 && isSearchView ? (
-            <div className="flex w-full items-center justify-center gap-1 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-900/50 dark:bg-gray-800 dark:text-gray-300">
+            <div className="flex w-full items-center justify-center gap-1 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-800/50 dark:bg-gray-800 dark:text-gray-300">
               Nothing found
             </div>
           ) : (
@@ -114,7 +114,7 @@ export default function Messages({ isSearchView = false }) {
             </>
           )}
           <div
-            className="dark:gpt-dark-gray group h-0 w-full flex-shrink-0 dark:border-gray-900/50"
+            className="dark:gpt-dark-gray group h-0 w-full flex-shrink-0 dark:border-gray-800/50"
             ref={messagesEndRef}
           />
         </div>
diff --git a/client/src/components/Nav/ExportConversation/ExportModal.jsx b/client/src/components/Nav/ExportConversation/ExportModal.jsx
index d2cfb49c1..dfb773883 100644
--- a/client/src/components/Nav/ExportConversation/ExportModal.jsx
+++ b/client/src/components/Nav/ExportConversation/ExportModal.jsx
@@ -435,7 +435,7 @@ export default function ExportModal({ open, onOpenChange, conversation }) {
           <>
             <DialogButton
               onClick={exportConversation}
-              className="dark:hover:gray-400 border-gray-700 bg-green-600 text-white hover:bg-green-700 dark:hover:bg-green-800"
+              className="dark:hover:gray-400 border-gray-700 bg-green-500 text-white hover:bg-green-600 dark:hover:bg-green-600"
             >
               {localize('com_endpoint_export')}
             </DialogButton>
diff --git a/client/src/components/Nav/Logout.tsx b/client/src/components/Nav/Logout.tsx
index a16f4f326..f107e7c45 100644
--- a/client/src/components/Nav/Logout.tsx
+++ b/client/src/components/Nav/Logout.tsx
@@ -9,7 +9,7 @@ const Logout = forwardRef(() => {
 
   return (
     <button
-      className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
+      className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-black transition-colors duration-200 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
       onClick={() => logout()}
     >
       <LogOutIcon />
diff --git a/client/src/components/Nav/MobileNav.tsx b/client/src/components/Nav/MobileNav.tsx
index 847ef66a9..b8c8fba3f 100644
--- a/client/src/components/Nav/MobileNav.tsx
+++ b/client/src/components/Nav/MobileNav.tsx
@@ -15,11 +15,11 @@ export default function MobileNav({
   const { title = 'New Chat' } = conversation || {};
 
   return (
-    <div className="text-token-primary border-token-border-medium bg-token-surface-primary dark:bg-token-surface-secondary sticky top-0 z-10 flex min-h-[40px] items-center border-b dark:text-white md:hidden">
+    <div className="text-token-primary border-token-border-medium bg-token-surface-primary sticky top-0 z-10 flex min-h-[40px] items-center border-b bg-white dark:bg-gray-800 dark:text-white md:hidden">
       <button
         type="button"
         data-testid="mobile-header-new-chat-button"
-        className="inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white active:opacity-50 dark:hover:text-white"
+        className="inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white active:opacity-50 dark:hover:text-white"
         onClick={() => setNavVisible((prev) => !prev)}
       >
         <span className="sr-only">{localize('com_nav_open_sidebar')}</span>
@@ -44,7 +44,7 @@ export default function MobileNav({
       </h1>
       <button
         type="button"
-        className="inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white active:opacity-50 dark:hover:text-white"
+        className="inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white active:opacity-50 dark:hover:text-white"
         onClick={() => newConversation()}
       >
         <svg
diff --git a/client/src/components/Nav/Nav.tsx b/client/src/components/Nav/Nav.tsx
index 1c62f8683..ab4df3c83 100644
--- a/client/src/components/Nav/Nav.tsx
+++ b/client/src/components/Nav/Nav.tsx
@@ -110,11 +110,11 @@ export default function Nav({ navVisible, setNavVisible }) {
   };
 
   return (
-    <TooltipProvider delayDuration={150}>
+    <TooltipProvider delayDuration={250}>
       <Tooltip>
         <div
           className={
-            'nav active dark max-w-[320px] flex-shrink-0 overflow-x-hidden bg-black md:max-w-[260px]'
+            'nav active max-w-[320px] flex-shrink-0 overflow-x-hidden bg-gray-50 dark:bg-gray-900 md:max-w-[260px]'
           }
           style={{
             width: navVisible ? navWidth : '0px',
diff --git a/client/src/components/Nav/NavLinks.tsx b/client/src/components/Nav/NavLinks.tsx
index 17a196a2e..1cc6cf2e0 100644
--- a/client/src/components/Nav/NavLinks.tsx
+++ b/client/src/components/Nav/NavLinks.tsx
@@ -60,14 +60,14 @@ function NavLinks() {
         {({ open }) => (
           <>
             {startupConfig?.checkBalance && balanceQuery.data && (
-              <div className="m-1 ml-3 whitespace-nowrap text-left text-sm text-gray-100">
+              <div className="m-1 ml-3 whitespace-nowrap text-left text-sm text-black dark:text-gray-200">
                 {`Balance: ${balanceQuery.data}`}
               </div>
             )}
             <Menu.Button
               className={cn(
-                'group-ui-open:bg-[#202123] duration-350 mt-text-sm mb-1 flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 transition-colors hover:bg-[#202123]',
-                open ? 'bg-[#202123]' : '',
+                'group-ui-open:bg-gray-100 dark:group-ui-open:bg-gray-700 duration-350 mt-text-sm mb-1 flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700',
+                open ? 'bg-gray-100 dark:bg-gray-700' : '',
               )}
               data-testid="nav-user"
             >
@@ -90,7 +90,7 @@ function NavLinks() {
                 </div>
               </div>
               <div
-                className="mt-2 grow overflow-hidden text-ellipsis whitespace-nowrap text-left font-bold text-white"
+                className="mt-2 grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-black dark:text-white"
                 style={{ marginTop: '-4px', marginLeft: '2px' }}
               >
                 {user?.name || localize('com_nav_user')}
@@ -106,22 +106,24 @@ function NavLinks() {
               leaveFrom="translate-y-0 opacity-100"
               leaveTo="translate-y-2 opacity-0"
             >
-              <Menu.Items className="absolute bottom-full left-0 z-20 mb-1 mt-1 w-full translate-y-0 overflow-hidden rounded-lg bg-[#202123] py-1.5 opacity-100 outline-none">
+              <Menu.Items className="absolute bottom-full left-0 z-20 mb-1 mt-1 w-full translate-y-0 overflow-hidden rounded-lg bg-white py-1.5 opacity-100 outline-none dark:bg-gray-800">
                 <Menu.Item as="div">
                   <NavLink
                     className={cn(
-                      'flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700',
-                      exportable ? 'cursor-pointer text-white' : 'cursor-not-allowed text-white/50',
+                      'flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-black transition-colors duration-200 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700',
+                      exportable
+                        ? 'cursor-pointer text-black dark:text-white'
+                        : 'cursor-not-allowed text-black/50 dark:text-white/50',
                     )}
                     svg={() => <Download size={16} />}
                     text={localize('com_nav_export_conversation')}
                     clickHandler={clickHandler}
                   />
                 </Menu.Item>
-                <div className="my-1 h-px bg-white/20" role="none" />
+                <div className="my-1 h-px bg-black/20 dark:bg-white/20" role="none" />
                 <Menu.Item as="div">
                   <NavLink
-                    className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
+                    className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-black transition-colors duration-200 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
                     svg={() => <FileText className="icon-md" />}
                     text="My Files"
                     clickHandler={() => setShowFiles(true)}
@@ -130,7 +132,7 @@ function NavLinks() {
                 {startupConfig?.helpAndFaqURL !== '/' && (
                   <Menu.Item as="div">
                     <NavLink
-                      className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
+                      className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-black transition-colors duration-200 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
                       svg={() => <LinkIcon />}
                       text={localize('com_nav_help_faq')}
                       clickHandler={() => window.open(startupConfig?.helpAndFaqURL, '_blank')}
@@ -139,13 +141,13 @@ function NavLinks() {
                 )}
                 <Menu.Item as="div">
                   <NavLink
-                    className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
+                    className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-black transition-colors duration-200 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
                     svg={() => <GearIcon className="icon-md" />}
                     text={localize('com_nav_settings')}
                     clickHandler={() => setShowSettings(true)}
                   />
                 </Menu.Item>
-                <div className="my-1 h-px bg-white/20" role="none" />
+                <div className="my-1 h-px bg-black/20 bg-white/20" role="none" />
                 <Menu.Item as="div">
                   <Logout />
                 </Menu.Item>
diff --git a/client/src/components/Nav/NewChat.tsx b/client/src/components/Nav/NewChat.tsx
index 75a5facf0..7a17498fd 100644
--- a/client/src/components/Nav/NewChat.tsx
+++ b/client/src/components/Nav/NewChat.tsx
@@ -10,6 +10,7 @@ import {
 import { icons } from '~/components/Chat/Menus/Endpoints/Icons';
 import { NewChatIcon } from '~/components/svg';
 import { getEndpointField } from '~/utils';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui/';
 
 export default function NewChat({
   toggleNav,
@@ -42,40 +43,49 @@ export default function NewChat({
   };
 
   return (
-    <div className="sticky left-0 right-0 top-0 z-20 bg-black pt-3.5">
-      <div className="pb-0.5 last:pb-0" tabIndex={0} style={{ transform: 'none' }}>
-        <a
-          href="/"
-          data-testid="nav-new-chat-button"
-          onClick={clickHandler}
-          className="group flex h-10 items-center gap-2 rounded-lg px-2 font-medium hover:bg-gray-900"
-        >
-          <div className="h-7 w-7 flex-shrink-0">
-            <div className="shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black">
-              {endpoint &&
-                Icon &&
-                Icon({
-                  size: 41,
-                  context: 'nav',
-                  className: 'h-2/3 w-2/3',
-                  endpoint: endpoint,
-                  iconURL: iconURL,
-                })}
-            </div>
+    <TooltipProvider delayDuration={250}>
+      <Tooltip>
+        <div className="sticky left-0 right-0 top-0 z-20 bg-gray-50 pt-3.5 dark:bg-gray-900">
+          <div className="pb-0.5 last:pb-0" tabIndex={0} style={{ transform: 'none' }}>
+            <a
+              href="/"
+              data-testid="nav-new-chat-button"
+              onClick={clickHandler}
+              className="group flex h-10 items-center gap-2 rounded-lg px-2 font-medium hover:bg-gray-200 dark:hover:bg-gray-800"
+            >
+              <div className="h-7 w-7 flex-shrink-0">
+                <div className="shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black dark:bg-white">
+                  {endpoint &&
+                    Icon &&
+                    Icon({
+                      size: 41,
+                      context: 'nav',
+                      className: 'h-2/3 w-2/3',
+                      endpoint: endpoint,
+                      iconURL: iconURL,
+                    })}
+                </div>
+              </div>
+              <div className="text-token-text-primary grow overflow-hidden text-ellipsis whitespace-nowrap text-sm">
+                {localize('com_ui_new_chat')}
+              </div>
+              <div className="flex gap-3">
+                <span className="flex items-center" data-state="closed">
+                  <TooltipTrigger asChild>
+                    <button type="button" className="text-token-text-primary">
+                      <NewChatIcon className="h-[18px] w-[18px]" />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent side="right" sideOffset={20}>
+                    {localize('com_ui_new_chat')}
+                  </TooltipContent>
+                </span>
+              </div>
+            </a>
           </div>
-          <div className="text-token-text-primary grow overflow-hidden text-ellipsis whitespace-nowrap text-sm">
-            {localize('com_ui_new_chat')}
-          </div>
-          <div className="flex gap-3">
-            <span className="flex items-center" data-state="closed">
-              <button type="button" className="text-token-text-primary">
-                <NewChatIcon className="h-[18px] w-[18px]" />
-              </button>
-            </span>
-          </div>
-        </a>
-      </div>
-      {subHeaders ? subHeaders : null}
-    </div>
+          {subHeaders ? subHeaders : null}
+        </div>
+      </Tooltip>
+    </TooltipProvider>
   );
 }
diff --git a/client/src/components/Nav/SearchBar.tsx b/client/src/components/Nav/SearchBar.tsx
index 713a41cc8..24a8d1cf6 100644
--- a/client/src/components/Nav/SearchBar.tsx
+++ b/client/src/components/Nav/SearchBar.tsx
@@ -44,7 +44,7 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: Ref<HTMLDivElement>) =
   return (
     <div
       ref={ref}
-      className="relative mt-1 flex flex h-10 cursor-pointer items-center gap-3 rounded-lg border-white bg-black px-2 px-3 py-2 text-white transition-colors duration-200 hover:bg-gray-900 focus:bg-gray-900"
+      className="relative mt-1 flex flex h-10 cursor-pointer items-center gap-3 rounded-lg border-white bg-gray-50 px-2 px-3 py-2 text-black transition-colors duration-200 hover:bg-gray-200 focus:bg-gray-800 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800"
     >
       {<Search className="absolute left-3 h-4 w-4" />}
       <input
diff --git a/client/src/components/Nav/Settings.tsx b/client/src/components/Nav/Settings.tsx
index fee42d1d0..e2448330e 100644
--- a/client/src/components/Nav/Settings.tsx
+++ b/client/src/components/Nav/Settings.tsx
@@ -14,18 +14,10 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
-        className={cn('shadow-2xl dark:bg-gray-900 dark:text-white md:min-h-[373px] md:w-[680px]')}
-        style={{
-          borderRadius: '12px',
-          position: 'fixed',
-          margin: 'auto',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-        }}
+        className={cn('shadow-2xl dark:bg-gray-800 dark:text-white md:min-h-[373px] md:w-[680px]')}
       >
         <DialogHeader>
-          <DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
+          <DialogTitle className="text-lg font-medium leading-6 text-gray-800 dark:text-gray-200">
             {localize('com_nav_settings')}
           </DialogTitle>
         </DialogHeader>
@@ -41,66 +33,62 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
               aria-orientation="vertical"
               className={cn(
                 'min-w-auto -ml-[8px] flex flex-shrink-0 flex-col',
-                isSmallScreen ? 'flex-row rounded-lg bg-gray-100 p-1 dark:bg-gray-800/30' : '',
+                isSmallScreen ? 'flex-row rounded-lg bg-gray-200 p-1 dark:bg-gray-800/30' : '',
               )}
               style={{ outline: 'none' }}
             >
               <Tabs.Trigger
                 className={cn(
-                  'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
+                  'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-750',
                   isSmallScreen
-                    ? 'flex-col flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
-                    : 'bg-white radix-state-active:bg-gray-100',
-                  isSmallScreen
-                    ? ''
-                    : 'dark:bg-gray-900',
+                    ? 'flex-1 flex-col items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
+                    : 'bg-white radix-state-active:bg-gray-200',
+                  isSmallScreen ? '' : 'dark:bg-gray-800',
                 )}
                 value={SettingsTabValues.GENERAL}
+                style={{ userSelect: 'none' }}
               >
                 <GearIcon />
                 {localize('com_nav_setting_general')}
               </Tabs.Trigger>
               <Tabs.Trigger
                 className={cn(
-                  'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
+                  'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-750',
                   isSmallScreen
-                    ? 'flex-col flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
-                    : 'bg-white radix-state-active:bg-gray-100',
-                  isSmallScreen
-                    ? ''
-                    : 'dark:bg-gray-900',
+                    ? 'flex-1 flex-col items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
+                    : 'bg-white radix-state-active:bg-gray-200',
+                  isSmallScreen ? '' : 'dark:bg-gray-800',
                 )}
                 value={SettingsTabValues.BETA}
+                style={{ userSelect: 'none' }}
               >
                 <ExperimentIcon />
                 {localize('com_nav_setting_beta')}
               </Tabs.Trigger>
               <Tabs.Trigger
                 className={cn(
-                  'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
+                  'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-750',
                   isSmallScreen
-                    ? 'flex-col flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
-                    : 'bg-white radix-state-active:bg-gray-100',
-                  isSmallScreen
-                    ? ''
-                    : 'dark:bg-gray-900',
+                    ? 'flex-1 flex-col items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
+                    : 'bg-white radix-state-active:bg-gray-200',
+                  isSmallScreen ? '' : 'dark:bg-gray-800',
                 )}
                 value={SettingsTabValues.DATA}
+                style={{ userSelect: 'none' }}
               >
                 <DataIcon />
                 {localize('com_nav_setting_data')}
               </Tabs.Trigger>
               <Tabs.Trigger
                 className={cn(
-                  'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
+                  'group m-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-750',
                   isSmallScreen
-                    ? 'flex-col flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
-                    : 'bg-white radix-state-active:bg-gray-100',
-                  isSmallScreen
-                    ? ''
-                    : 'dark:bg-gray-900',
+                    ? 'flex-1 flex-col items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
+                    : 'bg-white radix-state-active:bg-gray-200',
+                  isSmallScreen ? '' : 'dark:bg-gray-800',
                 )}
                 value={SettingsTabValues.ACCOUNT}
+                style={{ userSelect: 'none' }}
               >
                 <UserIcon />
                 {localize('com_nav_setting_account')}
diff --git a/client/src/components/Nav/SettingsTabs/Account/Account.tsx b/client/src/components/Nav/SettingsTabs/Account/Account.tsx
index 6b785ccba..c4d7c86fa 100644
--- a/client/src/components/Nav/SettingsTabs/Account/Account.tsx
+++ b/client/src/components/Nav/SettingsTabs/Account/Account.tsx
@@ -24,7 +24,7 @@ function Account({ onCheckedChange }: { onCheckedChange?: (value: boolean) => vo
       role="tabpanel"
       className="w-full md:min-h-[300px]"
     >
-      <div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-300">
+      <div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-50">
         <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
           <Avatar />
         </div>
diff --git a/client/src/components/Nav/SettingsTabs/Account/Avatar.tsx b/client/src/components/Nav/SettingsTabs/Account/Avatar.tsx
index 0d04fa2e8..33263283e 100644
--- a/client/src/components/Nav/SettingsTabs/Account/Avatar.tsx
+++ b/client/src/components/Nav/SettingsTabs/Account/Avatar.tsx
@@ -81,7 +81,7 @@ function Avatar() {
         <span>{localize('com_nav_profile_picture')}</span>
         <label
           htmlFor={'file-upload-avatar'}
-          className="flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal transition-colors hover:bg-slate-200 hover:text-green-700 dark:bg-transparent dark:text-white dark:hover:bg-gray-800 dark:hover:text-green-500"
+          className="flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal transition-colors hover:bg-gray-100 hover:text-green-700 dark:bg-transparent dark:text-white dark:hover:bg-gray-800 dark:hover:text-green-500"
         >
           <FileImage className="mr-1 flex w-[22px] items-center stroke-1" />
           <span>{localize('com_nav_change_picture')}</span>
@@ -98,11 +98,11 @@ function Avatar() {
 
       <Dialog open={isDialogOpen} onOpenChange={() => setDialogOpen(false)}>
         <DialogContent
-          className={cn('shadow-2xl dark:bg-gray-900 dark:text-white md:h-[350px] md:w-[450px] ')}
+          className={cn('shadow-2xl dark:bg-gray-800 dark:text-white md:h-[350px] md:w-[450px] ')}
           style={{ borderRadius: '12px' }}
         >
           <DialogHeader>
-            <DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
+            <DialogTitle className="text-lg font-medium leading-6 text-gray-800 dark:text-gray-200">
               {localize('com_ui_preview')}
             </DialogTitle>
           </DialogHeader>
diff --git a/client/src/components/Nav/SettingsTabs/Beta/Beta.tsx b/client/src/components/Nav/SettingsTabs/Beta/Beta.tsx
index 7ea4e32a4..699def557 100644
--- a/client/src/components/Nav/SettingsTabs/Beta/Beta.tsx
+++ b/client/src/components/Nav/SettingsTabs/Beta/Beta.tsx
@@ -11,7 +11,7 @@ function Beta() {
       role="tabpanel"
       className="w-full md:min-h-[300px]"
     >
-      <div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-300">
+      <div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-50">
         <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
           <ModularChat />
         </div>
diff --git a/client/src/components/Nav/SettingsTabs/Data/Data.tsx b/client/src/components/Nav/SettingsTabs/Data/Data.tsx
index 7d05ebe00..923843c93 100644
--- a/client/src/components/Nav/SettingsTabs/Data/Data.tsx
+++ b/client/src/components/Nav/SettingsTabs/Data/Data.tsx
@@ -72,7 +72,7 @@ function Data() {
       role="tabpanel"
       className="w-full md:min-h-[300px]"
     >
-      <div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-300">
+      <div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-50">
         <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
           <RevokeKeysButton all={true} />
         </div>
diff --git a/client/src/components/Nav/SettingsTabs/General/General.tsx b/client/src/components/Nav/SettingsTabs/General/General.tsx
index 2e9744e99..8bff3496a 100644
--- a/client/src/components/Nav/SettingsTabs/General/General.tsx
+++ b/client/src/components/Nav/SettingsTabs/General/General.tsx
@@ -174,7 +174,7 @@ function General() {
       className="w-full md:min-h-[300px]"
       ref={contentRef}
     >
-      <div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-300">
+      <div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-50">
         <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
           <ThemeSelector theme={theme} onChange={changeTheme} />
         </div>
diff --git a/client/src/components/Plugins/Store/PluginPagination.tsx b/client/src/components/Plugins/Store/PluginPagination.tsx
index f3e0be91c..4a76e3256 100644
--- a/client/src/components/Plugins/Store/PluginPagination.tsx
+++ b/client/src/components/Plugins/Store/PluginPagination.tsx
@@ -31,6 +31,7 @@ const PluginPagination: React.FC<TPluginPaginationProps> = ({
             ? 'text-black/70 opacity-50 dark:text-white/70'
             : 'text-black/70 hover:text-black/50 dark:text-white/70 dark:hover:text-white/50'
         }`}
+        style={{ userSelect: 'none' }}
       >
         <svg
           stroke="currentColor"
@@ -57,6 +58,7 @@ const PluginPagination: React.FC<TPluginPaginationProps> = ({
               ? 'text-blue-600 hover:text-blue-600 dark:text-blue-600 dark:hover:text-blue-600'
               : 'text-black/70 hover:text-black/50 dark:text-white/70 dark:hover:text-white/50'
           }`}
+          style={{ userSelect: 'none' }}
           onClick={() => onChangePage(page)}
         >
           {page}
@@ -71,6 +73,7 @@ const PluginPagination: React.FC<TPluginPaginationProps> = ({
             ? 'text-black/70 opacity-50 dark:text-white/70'
             : 'text-black/70 hover:text-black/50 dark:text-white/70 dark:hover:text-white/50'
         }`}
+        style={{ userSelect: 'none' }}
       >
         Next
         <svg
diff --git a/client/src/components/Plugins/Store/PluginStoreDialog.tsx b/client/src/components/Plugins/Store/PluginStoreDialog.tsx
index 01e311401..cdd216a43 100644
--- a/client/src/components/Plugins/Store/PluginStoreDialog.tsx
+++ b/client/src/components/Plugins/Store/PluginStoreDialog.tsx
@@ -123,17 +123,17 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
       className="relative z-[102]"
     >
       {/* The backdrop, rendered as a fixed sibling to the panel container */}
-      <div className="fixed inset-0 bg-gray-500/90 transition-opacity dark:bg-gray-800/90" />
+      <div className="fixed inset-0 bg-gray-600/65 transition-opacity dark:bg-black/80" />
       {/* Full-screen container to center the panel */}
       <div className="fixed inset-0 flex items-center justify-center p-4">
         <Dialog.Panel
-          className="relative w-full transform overflow-hidden overflow-y-auto rounded-lg bg-white text-left shadow-xl transition-all max-sm:h-full sm:mx-7 sm:my-8 sm:max-w-2xl lg:max-w-5xl xl:max-w-7xl dark:bg-gray-900"
+          className="relative w-full transform overflow-hidden overflow-y-auto rounded-lg bg-white text-left shadow-xl transition-all dark:bg-gray-800 max-sm:h-full sm:mx-7 sm:my-8 sm:max-w-2xl lg:max-w-5xl xl:max-w-7xl"
           style={{ minHeight: '610px' }}
         >
-          <div className="flex items-center justify-between border-b-[1px] border-black/10 px-4 pb-4 pt-5 sm:p-6 dark:border-white/10">
+          <div className="flex items-center justify-between border-b-[1px] border-black/10 px-4 pb-4 pt-5 dark:border-white/10 sm:p-6">
             <div className="flex items-center">
               <div className="text-center sm:text-left">
-                <Dialog.Title className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
+                <Dialog.Title className="text-lg font-medium leading-6 text-gray-800 dark:text-gray-200">
                   {localize('com_nav_plugin_store')}
                 </Dialog.Title>
               </div>
@@ -145,7 +145,7 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
                     setIsOpen(false);
                     setCurrentPage(1);
                   }}
-                  className="inline-block text-gray-500 hover:text-gray-100"
+                  className="inline-block text-gray-500 hover:text-gray-200"
                   tabIndex={0}
                 >
                   <X />
@@ -178,7 +178,7 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
                   value={searchValue}
                   onChange={handleSearch}
                   placeholder={localize('com_nav_plugin_search')}
-                  className="w-64 rounded border border-gray-300 px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
+                  className="w-64 rounded border border-gray-300 px-2 py-1 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
                 />
               </div>
               <div
diff --git a/client/src/components/Plugins/Store/PluginStoreItem.tsx b/client/src/components/Plugins/Store/PluginStoreItem.tsx
index 682403d62..ae8070b43 100644
--- a/client/src/components/Plugins/Store/PluginStoreItem.tsx
+++ b/client/src/components/Plugins/Store/PluginStoreItem.tsx
@@ -21,7 +21,7 @@ function PluginStoreItem({ plugin, onInstall, onUninstall, isInstalled }: TPlugi
 
   return (
     <>
-      <div className="flex flex-col gap-4 rounded border border-black/10 bg-white p-6 dark:border-white/20 dark:bg-gray-900">
+      <div className="flex flex-col gap-4 rounded border border-black/10 bg-white p-6 dark:border-white/20 dark:bg-gray-800">
         <div className="flex gap-4">
           <div className="h-[70px] w-[70px] shrink-0">
             <div className="relative h-full w-full">
diff --git a/client/src/components/SidePanel/Builder/ActionsAuth.tsx b/client/src/components/SidePanel/Builder/ActionsAuth.tsx
index 14e763809..2c0acb3c9 100644
--- a/client/src/components/SidePanel/Builder/ActionsAuth.tsx
+++ b/client/src/components/SidePanel/Builder/ActionsAuth.tsx
@@ -106,7 +106,7 @@ export default function ActionsAuth({
         {/* Cancel/Save */}
         <div className="mt-5 flex flex-col gap-3 sm:mt-4 sm:flex-row-reverse">
           <button
-            className="btn btn-dark relative"
+            className="btn relative bg-green-500 text-white hover:bg-green-600 dark:hover:bg-green-600"
             onClick={async () => {
               const result = await trigger(undefined, { shouldFocus: true });
               setValue('saved_auth_fields', result);
diff --git a/client/src/components/SidePanel/Builder/ActionsPanel.tsx b/client/src/components/SidePanel/Builder/ActionsPanel.tsx
index 1bdab64b9..509d38464 100644
--- a/client/src/components/SidePanel/Builder/ActionsPanel.tsx
+++ b/client/src/components/SidePanel/Builder/ActionsPanel.tsx
@@ -107,7 +107,7 @@ export default function ActionsPanel({
                 <button
                   type="button"
                   disabled={!assistant_id || !action.action_id}
-                  className="btn btn-neutral relative text-red-500"
+                  className="btn relative bg-transparent text-red-500 hover:bg-gray-100 dark:hover:bg-gray-800"
                   onClick={() => {
                     if (!assistant_id) {
                       return prompt('No assistant_id found, is the assistant created?');
diff --git a/client/src/components/SidePanel/Builder/AssistantPanel.tsx b/client/src/components/SidePanel/Builder/AssistantPanel.tsx
index 04b4a5269..d69040d5b 100644
--- a/client/src/components/SidePanel/Builder/AssistantPanel.tsx
+++ b/client/src/components/SidePanel/Builder/AssistantPanel.tsx
@@ -391,7 +391,7 @@ export default function AssistantPanel({
               <button
                 type="button"
                 onClick={() => setShowToolDialog(true)}
-                className="btn btn-neutral border-token-border-light relative mx-1 mt-2 h-8 rounded-lg font-medium"
+                className="btn border-token-border-light relative mx-1 mt-2 h-8 rounded-lg bg-transparent font-medium hover:bg-gray-100 dark:hover:bg-gray-800"
               >
                 <div className="flex w-full items-center justify-center gap-2">
                   {localize('com_assistants_add_tools')}
@@ -409,7 +409,7 @@ export default function AssistantPanel({
                   }
                   setActivePanel(Panel.actions);
                 }}
-                className="btn btn-neutral border-token-border-light relative mt-2 h-8 rounded-lg font-medium"
+                className="btn border-token-border-light relative mt-2 h-8 rounded-lg bg-transparent font-medium hover:bg-gray-100 dark:hover:bg-gray-800"
               >
                 <div className="flex w-full items-center justify-center gap-2">
                   {localize('com_assistants_add_actions')}
@@ -440,7 +440,7 @@ export default function AssistantPanel({
             )}
             {/* Submit Button */}
             <button
-              className="btn btn-primary focus:shadow-outline flex w-[90px] items-center justify-center px-4 py-2 font-semibold text-white hover:bg-green-400 focus:border-green-500"
+              className="btn btn-primary focus:shadow-outline flex w-[90px] items-center justify-center px-4 py-2 font-semibold text-white hover:bg-green-600 focus:border-green-500"
               type="submit"
             >
               {create.isLoading || update.isLoading ? (
diff --git a/client/src/components/SidePanel/Builder/AssistantSelect.tsx b/client/src/components/SidePanel/Builder/AssistantSelect.tsx
index 6e6afebb9..fabf8d1c2 100644
--- a/client/src/components/SidePanel/Builder/AssistantSelect.tsx
+++ b/client/src/components/SidePanel/Builder/AssistantSelect.tsx
@@ -166,14 +166,14 @@ export default function AssistantSelect({
       emptyTitle={true}
       containerClassName="flex-grow"
       optionsClass="hover:bg-gray-20/50 dark:border-gray-700"
-      optionsListClass="rounded-lg shadow-lg dark:bg-black dark:border-gray-700 dark:last:border"
+      optionsListClass="rounded-lg shadow-lg dark:bg-gray-900 dark:border-gray-700 dark:last:border"
       currentValueClass={cn(
         'text-md font-semibold text-gray-900 dark:text-white',
         value === '' ? 'text-gray-500' : '',
       )}
       className={cn(
-        'mt-1 rounded-md dark:border-gray-700 dark:bg-black',
-        'z-50 flex h-[40px] w-full flex-none items-center justify-center px-4 hover:cursor-pointer hover:border-green-500 focus:border-green-500',
+        'mt-1 rounded-md dark:border-gray-700 dark:bg-gray-900',
+        'z-50 flex h-[40px] w-full flex-none items-center justify-center px-4 hover:cursor-pointer hover:border-green-500 focus:border-gray-400',
       )}
       renderOption={() => (
         <span className="flex items-center gap-1.5 truncate">
diff --git a/client/src/components/SidePanel/Builder/ContextButton.tsx b/client/src/components/SidePanel/Builder/ContextButton.tsx
index d343b7059..cadc96989 100644
--- a/client/src/components/SidePanel/Builder/ContextButton.tsx
+++ b/client/src/components/SidePanel/Builder/ContextButton.tsx
@@ -65,7 +65,7 @@ export default function ContextButton({
         <Popover.Trigger asChild>
           <button
             className={cn(
-              'btn btn-neutral border-token-border-light relative h-9 rounded-lg font-medium',
+              'btn border-token-border-light relative h-9 rounded-lg bg-transparent font-medium hover:bg-gray-100 dark:hover:bg-gray-800',
               removeFocusOutlines,
             )}
             type="button"
@@ -103,7 +103,7 @@ export default function ContextButton({
           <Popover.Content
             side="top"
             role="menu"
-            className="bg-token-surface-primary min-w-[180px] max-w-xs rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-black"
+            className="bg-token-surface-primary min-w-[180px] max-w-xs rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-900 dark:bg-gray-900"
             style={{ outline: 'none', pointerEvents: 'auto' }}
             sideOffset={8}
             tabIndex={-1}
diff --git a/client/src/components/SidePanel/Builder/Images.tsx b/client/src/components/SidePanel/Builder/Images.tsx
index 215188c7e..725cff714 100644
--- a/client/src/components/SidePanel/Builder/Images.tsx
+++ b/client/src/components/SidePanel/Builder/Images.tsx
@@ -98,12 +98,12 @@ export function AvatarMenu({
   return (
     <Popover.Portal>
       <Popover.Content
-        className="flex min-w-[100px] max-w-xs flex-col rounded-xl border border-gray-400 bg-white shadow-lg dark:border-gray-700 dark:bg-black dark:text-white"
+        className="flex min-w-[100px] max-w-xs flex-col rounded-xl border border-gray-400 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white"
         sideOffset={5}
       >
         <div
           role="menuitem"
-          className="group m-1.5 flex cursor-pointer gap-2 rounded p-2.5 text-sm hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5"
+          className="group m-1.5 flex cursor-pointer gap-2 rounded p-2.5 text-sm hover:bg-gray-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-800 dark:hover:bg-white/5"
           tabIndex={-1}
           data-orientation="vertical"
           onClick={onItemClick}
diff --git a/client/src/components/SidePanel/Files/PanelTable.tsx b/client/src/components/SidePanel/Files/PanelTable.tsx
index 1d95c6da9..a805ca8fa 100644
--- a/client/src/components/SidePanel/Files/PanelTable.tsx
+++ b/client/src/components/SidePanel/Files/PanelTable.tsx
@@ -78,7 +78,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
           className="max-w-xs dark:border-gray-700"
         />
       </div>
-      <div className="overflow-y-auto rounded-md border border-black/10 dark:border-white/10 ">
+      <div className="overflow-y-auto rounded-md border border-black/10 dark:border-white/10">
         <Table className="border-separate border-spacing-0 ">
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup, index) => (
@@ -88,7 +88,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
                     <TableHead
                       key={header.id}
                       style={{ width: index === 0 ? '75%' : '25%' }}
-                      className="sticky top-0 h-auto border-b border-black/10 bg-white py-1 text-left font-medium text-gray-700 dark:border-white/10 dark:bg-black dark:text-gray-100"
+                      className="sticky top-0 h-auto border-b border-black/10 bg-white py-1 text-left font-medium text-gray-700 dark:border-white/10 dark:bg-gray-800 dark:text-gray-100"
                     >
                       {header.isPlaceholder
                         ? null
diff --git a/client/src/components/SidePanel/Nav.tsx b/client/src/components/SidePanel/Nav.tsx
index 15aea95a9..496b3a6cf 100644
--- a/client/src/components/SidePanel/Nav.tsx
+++ b/client/src/components/SidePanel/Nav.tsx
@@ -75,7 +75,7 @@ export default function Nav({ links, isCollapsed, resize, defaultActive }: NavPr
                                 variant === 'default'
                                   ? 'dark:bg-muted dark:hover:bg-muted dark:text-white dark:hover:text-white'
                                   : '',
-                                'data-[state=open]:bg-gray-900 data-[state=open]:text-white dark:data-[state=open]:bg-gray-800',
+                                'hover:bg-gray-50 data-[state=open]:bg-gray-50 data-[state=open]:text-black dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-white',
                                 'w-full justify-start rounded-md border dark:border-gray-600',
                               )}
                             >
diff --git a/client/src/components/SidePanel/SidePanel.tsx b/client/src/components/SidePanel/SidePanel.tsx
index 0d33a80bb..a0de89014 100644
--- a/client/src/components/SidePanel/SidePanel.tsx
+++ b/client/src/components/SidePanel/SidePanel.tsx
@@ -172,7 +172,7 @@ export default function SidePanel({
               localStorage.setItem('react-resizable-panels:collapsed', 'true');
             }}
             className={cn(
-              'sidenav border-l border-gray-200 bg-white dark:border-gray-800/50 dark:bg-black',
+              'sidenav border-l border-gray-200 bg-white dark:border-gray-800/50 dark:bg-gray-900',
               isCollapsed ? 'min-w-[50px]' : 'min-w-[340px] sm:min-w-[352px]',
               minSize === 0 ? 'min-w-0' : '',
             )}
@@ -180,12 +180,12 @@ export default function SidePanel({
             {keyProvided && (
               <div
                 className={cn(
-                  'sticky left-0 right-0 top-0 z-[100] flex h-[52px] flex-wrap items-center justify-center bg-white dark:bg-black',
+                  'sticky left-0 right-0 top-0 z-[100] flex h-[52px] flex-wrap items-center justify-center bg-white dark:bg-gray-900',
                   isCollapsed ? 'h-[52px]' : 'px-2',
                 )}
               >
                 <Switcher isCollapsed={isCollapsed} />
-                <Separator className="bg-gray-100/50" />
+                <Separator className="bg-gray-100/50 dark:bg-gray-600" />
               </div>
             )}
 
diff --git a/client/src/components/SidePanel/Switcher.tsx b/client/src/components/SidePanel/Switcher.tsx
index c939d9b79..d9cdab852 100644
--- a/client/src/components/SidePanel/Switcher.tsx
+++ b/client/src/components/SidePanel/Switcher.tsx
@@ -59,7 +59,7 @@ export default function Switcher({ isCollapsed }: SwitcherProps) {
           isCollapsed
             ? 'flex h-9 w-9 shrink-0 items-center justify-center p-0 [&>span]:w-auto [&>svg]:hidden'
             : '',
-          'bg-white',
+          'bg-white text-black hover:bg-gray-50 dark:bg-gray-900 dark:text-white',
         )}
         aria-label={localize('com_sidepanel_select_assistant')}
       >
@@ -72,16 +72,20 @@ export default function Switcher({ isCollapsed }: SwitcherProps) {
               iconURL={(currentAssistant?.metadata?.avatar as string) ?? ''}
             />
           </div>
-          <span className={cn('ml-2', isCollapsed ? 'hidden' : '')}>
+          <span className={cn('ml-2', isCollapsed ? 'hidden' : '')} style={{ userSelect: 'none' }}>
             {assistants.find((assistant) => assistant.id === selectedAssistant)?.name ??
               localize('com_sidepanel_select_assistant')}
           </span>
         </SelectValue>
       </SelectTrigger>
-      <SelectContent className="bg-white">
+      <SelectContent className="bg-white dark:bg-gray-800">
         {assistants.map((assistant) => (
-          <SelectItem key={assistant.id} value={assistant.id}>
-            <div className="[&_svg]:text-foreground flex items-center justify-center gap-3 [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0 ">
+          <SelectItem
+            key={assistant.id}
+            value={assistant.id}
+            className="hover:bg-gray-50 dark:text-white"
+          >
+            <div className="[&_svg]:text-foreground flex items-center justify-center gap-3 dark:text-white [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0">
               <div className="assistant-item overflow-hidden rounded-full ">
                 <Icon
                   isCreatedByUser={false}
diff --git a/client/src/components/Tools/ToolItem.tsx b/client/src/components/Tools/ToolItem.tsx
index 6c9358202..faf188d0e 100644
--- a/client/src/components/Tools/ToolItem.tsx
+++ b/client/src/components/Tools/ToolItem.tsx
@@ -20,7 +20,7 @@ function ToolItem({ tool, onAddTool, onRemoveTool, isInstalled }: ToolItemProps)
   };
 
   return (
-    <div className="flex flex-col gap-4 rounded border border-black/10 bg-white p-6 dark:border-white/20 dark:bg-gray-900">
+    <div className="flex flex-col gap-4 rounded border border-black/10 bg-white p-6 dark:border-white/20 dark:bg-gray-800">
       <div className="flex gap-4">
         <div className="h-[70px] w-[70px] shrink-0">
           <div className="relative h-full w-full">
diff --git a/client/src/components/Tools/ToolSelectDialog.tsx b/client/src/components/Tools/ToolSelectDialog.tsx
index ee2f245b1..b40ca7ea7 100644
--- a/client/src/components/Tools/ToolSelectDialog.tsx
+++ b/client/src/components/Tools/ToolSelectDialog.tsx
@@ -138,11 +138,11 @@ function ToolSelectDialog({
       className="relative z-[102]"
     >
       {/* The backdrop, rendered as a fixed sibling to the panel container */}
-      <div className="fixed inset-0 bg-gray-500/90 transition-opacity dark:bg-gray-800/90" />
+      <div className="fixed inset-0 bg-gray-600/65 transition-opacity dark:bg-black/80" />
       {/* Full-screen container to center the panel */}
       <div className="fixed inset-0 flex items-center justify-center p-4">
         <Dialog.Panel
-          className="relative w-full transform overflow-hidden overflow-y-auto rounded-lg bg-white text-left shadow-xl transition-all dark:bg-gray-900 max-sm:h-full sm:mx-7 sm:my-8 sm:max-w-2xl lg:max-w-5xl xl:max-w-7xl"
+          className="relative w-full transform overflow-hidden overflow-y-auto rounded-lg bg-white text-left shadow-xl transition-all dark:bg-gray-800 max-sm:h-full sm:mx-7 sm:my-8 sm:max-w-2xl lg:max-w-5xl xl:max-w-7xl"
           style={{ minHeight: '610px' }}
         >
           <div className="flex items-center justify-between border-b-[1px] border-black/10 px-4 pb-4 pt-5 dark:border-white/10 sm:p-6">
@@ -163,7 +163,7 @@ function ToolSelectDialog({
                     setIsOpen(false);
                     setCurrentPage(1);
                   }}
-                  className="inline-block text-gray-500 hover:text-gray-100"
+                  className="inline-block text-gray-500 hover:text-gray-200"
                   tabIndex={0}
                 >
                   <X />
@@ -196,8 +196,8 @@ function ToolSelectDialog({
                   type="text"
                   value={searchValue}
                   onChange={handleSearch}
-                  placeholder={localize('com_nav_tool_search')}
-                  className="w-64 rounded border border-gray-300 px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
+                  placeholder={localize('com_nav_plugin_search')}
+                  className="w-64 rounded border border-gray-300 px-2 py-1 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
                 />
               </div>
               <div
diff --git a/client/src/components/svg/PluginMinimalIcon.tsx b/client/src/components/svg/PluginMinimalIcon.tsx
deleted file mode 100644
index 88f2e12e1..000000000
--- a/client/src/components/svg/PluginMinimalIcon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-export default function PluginMinimalIcon() {
-  return (
-    <svg
-      stroke="currentColor"
-      fill="none"
-      strokeWidth="1"
-      viewBox="0 0 16 16"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="h-4 w-4"
-      height="1em"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M13.164.98a.7.7 0 0 0-1.328 0l-.478 1.435a.7.7 0 0 1-.443.443l-1.436.478a.7.7 0 0 0 0 1.328l1.436.479a.7.7 0 0 1 .443.442l.478 1.436a.7.7 0 0 0 1.328 0l.478-1.436a.7.7 0 0 1 .443-.443l1.436-.478a.7.7 0 0 0 0-1.328l-1.436-.478a.7.7 0 0 1-.443-.443L13.164.979Z" />
-      <path d="M13.237 10.534c-.228-.245-.513-.46-.847-.46a.823.823 0 0 0-.828.849c.04 1.04.128 2.067.263 3.08a.619.619 0 0 1-.528.695c-.872.121-1.748.208-2.626.262a.8.8 0 0 1-.845-.805c0-.325.21-.602.45-.82.235-.215.375-.488.375-.787 0-.683-.738-1.237-1.65-1.237-.911 0-1.65.554-1.65 1.237 0 .294.137.563.364.775.245.229.461.513.461.848a.823.823 0 0 1-.85.829 33.809 33.809 0 0 1-3.266-.278.619.619 0 0 1-.532-.532 34.099 34.099 0 0 1-.278-3.267.823.823 0 0 1 .83-.85c.333 0 .619.216.846.461.212.228.482.364.776.364.683 0 1.237-.738 1.237-1.65 0-.91-.554-1.65-1.237-1.65-.299 0-.572.142-.786.376-.219.24-.496.45-.821.45a.8.8 0 0 1-.805-.845c.054-.885.142-1.76.262-2.626a.619.619 0 0 1 .695-.528c1.022.136 2.05.224 3.08.263a.822.822 0 0 0 .85-.828c0-.334-.217-.62-.462-.847-.227-.212-.363-.482-.363-.776C5.352 1.554 6.09 1 7.002 1c.91 0 1.649.554 1.649 1.237 0 .173-.012.327-.029.473C8.258 3 8 3.41 8 4c0 1.5 1.667 1.833 2.5 2 .167.833.5 2.5 2 2.5.732 0 1.186-.397 1.479-.9l.034-.001c.683 0 1.237.738 1.237 1.65 0 .911-.554 1.65-1.237 1.65-.294 0-.564-.137-.776-.364Z" />
-    </svg>
-  );
-}
diff --git a/client/src/components/svg/index.ts b/client/src/components/svg/index.ts
index 283e7012f..b43b0e6e6 100644
--- a/client/src/components/svg/index.ts
+++ b/client/src/components/svg/index.ts
@@ -34,7 +34,6 @@ export { default as MinimalPlugin } from './MinimalPlugin';
 export { default as AzureMinimalIcon } from './AzureMinimalIcon';
 export { default as OpenAIMinimalIcon } from './OpenAIMinimalIcon';
 export { default as ChatGPTMinimalIcon } from './ChatGPTMinimalIcon';
-export { default as PluginMinimalIcon } from './PluginMinimalIcon';
 export { default as BingAIMinimalIcon } from './BingAIMinimalIcon';
 export { default as PaLMinimalIcon } from './PaLMinimalIcon';
 export { default as PaLMIcon } from './PaLMIcon';
diff --git a/client/src/components/ui/AlertDialog.tsx b/client/src/components/ui/AlertDialog.tsx
index 45534a57e..89369dbe6 100644
--- a/client/src/components/ui/AlertDialog.tsx
+++ b/client/src/components/ui/AlertDialog.tsx
@@ -98,7 +98,7 @@ const AlertDialogAction = React.forwardRef<
   <AlertDialogPrimitive.Action
     ref={ref}
     className={cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-slate-900 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900',
+      'inline-flex h-10 items-center justify-center rounded-md bg-slate-900 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-gray-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900',
       className,
     )}
     {...props}
@@ -113,7 +113,7 @@ const AlertDialogCancel = React.forwardRef<
   <AlertDialogPrimitive.Cancel
     ref={ref}
     className={cn(
-      'mt-2 inline-flex h-10 items-center justify-center rounded-md border border-slate-200 bg-transparent px-4 py-2 text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-gray-900 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 sm:mt-0',
+      'mt-2 inline-flex h-10 items-center justify-center rounded-md border border-slate-200 bg-transparent px-4 py-2 text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-gray-800 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 sm:mt-0',
       className,
     )}
     {...props}
diff --git a/client/src/components/ui/Button.tsx b/client/src/components/ui/Button.tsx
index 301f434ac..72b4e5309 100644
--- a/client/src/components/ui/Button.tsx
+++ b/client/src/components/ui/Button.tsx
@@ -4,18 +4,18 @@ import { VariantProps, cva } from 'class-variance-authority';
 import { cn } from '../../utils';
 
 const buttonVariants = cva(
-  'rounded-md inline-flex items-center justify-center text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-gray-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900 data-[state=open]:bg-gray-100 dark:data-[state=open]:bg-gray-800',
+  'rounded-md inline-flex items-center justify-center text-sm font-medium transition-colors focus:outline-none dark:hover:bg-gray-800 dark:hover:text-gray-100 disabled:opacity-50 disabled:pointer-events-none data-[state=open]:bg-gray-100 dark:data-[state=open]:bg-gray-800',
   {
     variants: {
       variant: {
-        default: 'bg-gray-900 text-white hover:bg-gray-900 dark:bg-gray-50 dark:text-slate-900',
+        default: 'bg-gray-900 text-white hover:bg-gray-800 dark:bg-gray-50 dark:text-gray-900',
         destructive: 'bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600',
         outline:
-          'bg-transparent border border-slate-200 hover:bg-gray-100 dark:border-slate-700 dark:text-slate-100',
-        subtle: 'bg-gray-100 text-slate-900 hover:bg-gray-200 dark:bg-gray-900 dark:text-slate-100',
+          'bg-transparent border border-gray-200 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-100',
+        subtle: 'bg-gray-100 text-gray-900 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-100',
         ghost:
-          'bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 dark:text-slate-100 dark:hover:text-slate-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent',
-        link: 'bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-100 hover:bg-transparent dark:hover:bg-transparent',
+          'bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 dark:text-gray-100 dark:hover:text-gray-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent',
+        link: 'bg-transparent underline-offset-4 hover:underline text-gray-900 dark:text-gray-100 hover:bg-transparent dark:hover:bg-transparent',
       },
       size: {
         default: 'h-10 py-2 px-4',
diff --git a/client/src/components/ui/Dialog.tsx b/client/src/components/ui/Dialog.tsx
index 024290a82..dae7a37c8 100644
--- a/client/src/components/ui/Dialog.tsx
+++ b/client/src/components/ui/Dialog.tsx
@@ -3,6 +3,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Button } from '../ui/Button';
 import { X } from 'lucide-react';
 import { cn } from '~/utils';
+import { useMediaQuery } from '~/hooks';
 
 const Dialog = DialogPrimitive.Root;
 
@@ -27,7 +28,7 @@ const DialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Overlay
     className={cn(
-      'fixed inset-0 z-[999] bg-gray-500/90 transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in dark:bg-gray-800/90',
+      'fixed inset-0 z-[999] bg-gray-600/65 transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in dark:bg-black/80',
       className ?? '',
     )}
     {...props}
@@ -38,27 +39,34 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        'fixed z-[999] grid w-full gap-4 rounded-b-lg bg-white pb-6 animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0',
-        'dark:bg-slate-900',
-        className ?? '',
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-6 top-[0.5rem] rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=open]:bg-slate-800 sm:top-[1.6rem]">
-        <X className="h-5 w-5 text-black dark:text-white" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { showCloseButton?: boolean }
+>(({ className, children = true, ...props }, ref) => {
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');
+
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          'fixed z-[999] grid w-full gap-4 rounded-b-lg bg-white pb-6 animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:rounded-lg',
+          'dark:bg-slate-900',
+          isSmallScreen
+            ? 'fixed left-1/2 top-24 z-[999] m-auto grid w-11/12 -translate-x-1/2 gap-4 rounded-xl bg-white pb-6'
+            : '',
+          className ?? '',
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="absolute right-6 top-[0.5rem] rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=open]:bg-slate-800 sm:top-[1.6rem]">
+          <X className="h-5 w-5 text-black dark:text-white" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+});
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
@@ -114,7 +122,7 @@ const DialogClose = React.forwardRef<
   <DialogPrimitive.Close
     ref={ref}
     className={cn(
-      'mt-2 inline-flex h-10 items-center justify-center rounded-lg border border-slate-200 bg-transparent px-4 py-2 text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-gray-900 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 sm:mt-0',
+      'mt-2 inline-flex h-10 items-center justify-center rounded-lg border border-slate-200 bg-transparent px-4 py-2 text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-100 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-gray-800 sm:mt-0',
       className ?? '',
     )}
     {...props}
@@ -130,7 +138,7 @@ const DialogButton = React.forwardRef<
     ref={ref}
     variant="outline"
     className={cn(
-      'mt-2 inline-flex h-10 items-center justify-center rounded-lg border border-slate-200 bg-transparent px-4 py-2 text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-gray-900 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 sm:mt-0',
+      'mt-2 inline-flex h-10 items-center justify-center rounded-lg border border-slate-200 bg-transparent px-4 py-2 text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-gray-800 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 sm:mt-0',
       className ?? '',
     )}
     {...props}
diff --git a/client/src/components/ui/DialogTemplate.tsx b/client/src/components/ui/DialogTemplate.tsx
index 201886552..fbf5f0726 100644
--- a/client/src/components/ui/DialogTemplate.tsx
+++ b/client/src/components/ui/DialogTemplate.tsx
@@ -25,25 +25,36 @@ type DialogTemplateProps = {
   selection?: SelectionProps;
   className?: string;
   headerClassName?: string;
+  showCloseButton?: boolean;
 };
 
 const DialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDivElement>) => {
   const localize = useLocalize();
-  const { title, description, main, buttons, leftButtons, selection, className, headerClassName } =
-    props;
+  const {
+    title,
+    description,
+    main,
+    buttons,
+    leftButtons,
+    selection,
+    className,
+    headerClassName,
+    showCloseButton,
+  } = props;
   const { selectHandler, selectClasses, selectText } = selection || {};
   const Cancel = localize('com_ui_cancel');
 
   const defaultSelect =
-    'bg-gray-900 text-white transition-colors hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900';
+    'bg-gray-800 text-white transition-colors hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-200';
   return (
     <DialogContent
+      showCloseButton={showCloseButton}
       ref={ref}
-      className={cn('shadow-2xl dark:bg-gray-900', className || '')}
+      className={cn('shadow-2xl dark:bg-gray-800', className || '')}
       onClick={(e) => e.stopPropagation()}
     >
-      <DialogHeader className={cn('sm:pb-2', headerClassName ?? '')}>
-        <DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
+      <DialogHeader className={cn('sm:pb-7', headerClassName ?? '')}>
+        <DialogTitle className="text-lg font-medium leading-6 text-gray-800 dark:text-gray-200">
           {title}
         </DialogTitle>
         {description && (
@@ -55,15 +66,17 @@ const DialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDivE
       <div className="px-6">{main ? main : null}</div>
       <DialogFooter>
         <div>{leftButtons ? leftButtons : null}</div>
-        <div className="flex h-auto gap-2">
-          <DialogClose className="dark:hover:gray-400 border-gray-700">{Cancel}</DialogClose>
+        <div className="flex h-auto gap-3">
+          <DialogClose className="border-gray-100 hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-700">
+            {Cancel}
+          </DialogClose>
           {buttons ? buttons : null}
           {selection ? (
             <DialogClose
               onClick={selectHandler}
               className={`${
                 selectClasses || defaultSelect
-              } inline-flex h-10 items-center justify-center rounded-md border-none px-4 py-2 text-sm font-semibold`}
+              } inline-flex h-10 items-center justify-center rounded-lg border-none px-4 py-2 text-sm`}
             >
               {selectText}
             </DialogClose>
diff --git a/client/src/components/ui/Dropdown.tsx b/client/src/components/ui/Dropdown.tsx
index 92d381fa9..90d5b267e 100644
--- a/client/src/components/ui/Dropdown.tsx
+++ b/client/src/components/ui/Dropdown.tsx
@@ -31,8 +31,8 @@ const Dropdown: FC<DropdownProps> = ({
   const [selectedValue, setSelectedValue] = useState(initialValue);
 
   const themeStyles = {
-    light: 'bg-white text-gray-700 hover:bg-gray-200 border-gray-300',
-    dark: 'bg-[#202123] text-white hover:bg-[#323236] border-gray-600',
+    light: 'bg-white text-gray-700 hover:bg-gray-50 border-gray-300',
+    dark: 'bg-gray-800 text-white hover:bg-gray-700 border-gray-600',
   };
 
   const isSystemDark =
diff --git a/client/src/components/ui/HoverCard.tsx b/client/src/components/ui/HoverCard.tsx
index a97ed7d4e..59a6205ad 100644
--- a/client/src/components/ui/HoverCard.tsx
+++ b/client/src/components/ui/HoverCard.tsx
@@ -18,7 +18,7 @@ const HoverCardContent = React.forwardRef<
     align={align}
     sideOffset={sideOffset}
     className={cn(
-      'z-50 w-64 rounded-md border border-gray-100 bg-white p-4 shadow-md outline-none animate-in fade-in-0 dark:border-gray-800 dark:bg-gray-800',
+      'z-50 w-64 rounded-md border border-gray-200 bg-white p-4 shadow-md outline-none animate-in fade-in-0 dark:border-gray-800 dark:bg-gray-800',
       className,
     )}
     {...props}
diff --git a/client/src/components/ui/Input.tsx b/client/src/components/ui/Input.tsx
index 96b2d457b..3394a7f28 100644
--- a/client/src/components/ui/Input.tsx
+++ b/client/src/components/ui/Input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...pr
   return (
     <input
       className={cn(
-        'flex h-10 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900',
+        'dark:border-gray-00 flex h-10 w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-50',
         className ?? '',
       )}
       ref={ref}
diff --git a/client/src/components/ui/InputNumber.tsx b/client/src/components/ui/InputNumber.tsx
index 3b823568c..74bef9dc8 100644
--- a/client/src/components/ui/InputNumber.tsx
+++ b/client/src/components/ui/InputNumber.tsx
@@ -17,7 +17,7 @@ const InputNumber = React.forwardRef<
   return (
     <RCInputNumber
       className={cn(
-        'flex max-h-5 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900',
+        'flex max-h-5 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm placeholder:text-slate-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50',
         className ?? '',
       )}
       ref={ref}
diff --git a/client/src/components/ui/Landing.tsx b/client/src/components/ui/Landing.tsx
index 848f539ac..7819db520 100644
--- a/client/src/components/ui/Landing.tsx
+++ b/client/src/components/ui/Landing.tsx
@@ -26,7 +26,7 @@ export default function Landing() {
 
   return (
     <div className="flex h-full flex-col items-center overflow-y-auto pt-0 text-sm dark:bg-gray-800">
-      <div className="w-full px-6 text-gray-800 dark:text-gray-100 md:flex md:max-w-2xl md:flex-col lg:max-w-3xl">
+      <div className="w-full px-6 text-gray-800 dark:text-gray-200 md:flex md:max-w-2xl md:flex-col lg:max-w-3xl">
         <h1
           id="landing-title"
           data-testid="landing-title"
@@ -43,19 +43,19 @@ export default function Landing() {
             <ul className="m-auto flex w-full flex-col gap-3.5 sm:max-w-md">
               <button
                 onClick={clickHandler}
-                className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900"
+                className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-600"
               >
                 &quot;{localize('com_ui_example_quantum_computing')}&quot; →
               </button>
               <button
                 onClick={clickHandler}
-                className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900"
+                className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-600"
               >
                 &quot;{localize('com_ui_example_10_year_old_b_day')}&quot; →
               </button>
               <button
                 onClick={clickHandler}
-                className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900"
+                className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-600"
               >
                 &quot;{localize('com_ui_example_http_in_js')}&quot; →
               </button>
@@ -108,7 +108,7 @@ export default function Landing() {
           </div>
         )}
         {!!showingTemplates && <Templates showTemplates={showTemplates}/>} */}
-        {/* <div className="group h-32 w-full flex-shrink-0 dark:border-gray-900/50 dark:bg-gray-800 md:h-48" /> */}
+        {/* <div className="group h-32 w-full flex-shrink-0 dark:border-gray-800/50 dark:bg-gray-800 md:h-48" /> */}
       </div>
     </div>
   );
diff --git a/client/src/components/ui/MultiSelectDropDown.tsx b/client/src/components/ui/MultiSelectDropDown.tsx
index 29b575e02..7df6edcca 100644
--- a/client/src/components/ui/MultiSelectDropDown.tsx
+++ b/client/src/components/ui/MultiSelectDropDown.tsx
@@ -77,7 +77,7 @@ function MultiSelectDropDown({
                 <span className="inline-flex w-full truncate" id={excludeIds[2]}>
                   <span
                     className={cn(
-                      'flex h-6 items-center gap-1 truncate text-sm text-gray-900 dark:text-white',
+                      'flex h-6 items-center gap-1 truncate text-sm text-gray-800 dark:text-white',
                       !showLabel ? 'text-xs' : '',
                     )}
                   >
@@ -147,7 +147,7 @@ function MultiSelectDropDown({
                       <Listbox.Option
                         key={i}
                         value={option[optionValueKey]}
-                        className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
+                        className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-800 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
                       >
                         <span className="flex items-center gap-1.5 truncate">
                           {!option.isButton && (
@@ -168,19 +168,19 @@ function MultiSelectDropDown({
                           )}
                           <span
                             className={cn(
-                              'flex h-6 items-center gap-1 text-gray-800 dark:text-gray-100',
+                              'flex h-6 items-center gap-1 text-gray-800 dark:text-gray-200',
                               selected ? 'font-semibold' : '',
                             )}
                           >
                             {option.name}
                           </span>
                           {option.isButton && (
-                            <span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-100">
+                            <span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-200">
                               <ArrowRight />
                             </span>
                           )}
                           {selected && !option.isButton && (
-                            <span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-100">
+                            <span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-200">
                               <CheckMark />
                             </span>
                           )}
diff --git a/client/src/components/ui/MultiSelectPop.tsx b/client/src/components/ui/MultiSelectPop.tsx
index e198b827b..b83b631e3 100644
--- a/client/src/components/ui/MultiSelectPop.tsx
+++ b/client/src/components/ui/MultiSelectPop.tsx
@@ -55,7 +55,7 @@ function MultiSelectPop({
               <span className="inline-flex" id={excludeIds[2]}>
                 <span
                   className={cn(
-                    'flex h-6 items-center gap-1 text-sm text-gray-900 dark:text-white',
+                    'flex h-6 items-center gap-1 text-sm text-gray-800 dark:text-white',
                     !showLabel ? 'text-xs' : '',
                   )}
                 >
@@ -106,7 +106,7 @@ function MultiSelectPop({
             <Content
               side="bottom"
               align="center"
-              className="mt-2 max-h-60 min-w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+              className="mt-2 max-h-60 min-w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800 dark:text-white"
             >
               {availableValues.map((option) => {
                 if (!option) {
diff --git a/client/src/components/ui/Prompt.tsx b/client/src/components/ui/Prompt.tsx
index 457a68f19..3453ce436 100644
--- a/client/src/components/ui/Prompt.tsx
+++ b/client/src/components/ui/Prompt.tsx
@@ -12,7 +12,7 @@ export default function Prompt({ title, prompt }: { title: string; prompt: strin
         {title}
       </h2>
       <button>
-        <p className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900">
+        <p className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-800">
           {prompt}
         </p>
       </button>
diff --git a/client/src/components/ui/Select.tsx b/client/src/components/ui/Select.tsx
index 6f67f40f4..79a599394 100644
--- a/client/src/components/ui/Select.tsx
+++ b/client/src/components/ui/Select.tsx
@@ -19,7 +19,8 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-gray-200 bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 [&>span]:line-clamp-1',
+      'rounded-lg hover:bg-gray-100/50 dark:hover:bg-gray-700',
       className,
     )}
     {...props}
@@ -68,7 +69,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-gray-200 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-gray-600',
         position === 'popper'
           ? 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1'
           : '',
@@ -114,7 +115,7 @@ const SelectItem = React.forwardRef<
     ref={ref}
     className={cn(
       'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      'rounded-lg hover:bg-gray-100/50',
+      'rounded-lg hover:bg-gray-100/50 dark:hover:bg-gray-700',
       className,
     )}
     {...props}
diff --git a/client/src/components/ui/SelectDropDown.tsx b/client/src/components/ui/SelectDropDown.tsx
index 651f94c3b..572299038 100644
--- a/client/src/components/ui/SelectDropDown.tsx
+++ b/client/src/components/ui/SelectDropDown.tsx
@@ -83,7 +83,7 @@ function SelectDropDown({
                 <span className="inline-flex w-full truncate">
                   <span
                     className={cn(
-                      'flex h-6 items-center gap-1 truncate text-sm text-gray-900 dark:text-white',
+                      'flex h-6 items-center gap-1 truncate text-sm text-gray-800 dark:text-white',
                       !showLabel ? 'text-xs' : '',
                       currentValueClass ?? '',
                     )}
@@ -122,7 +122,7 @@ function SelectDropDown({
               >
                 <Listbox.Options
                   className={cn(
-                    'absolute z-10 mt-2 max-h-60 w-full overflow-auto rounded bg-white text-base text-xs border ring-black/10 focus:outline-none dark:bg-gray-800 dark:ring-white/20 dark:last:border-0 md:w-[100%]',
+                    'absolute z-10 mt-2 max-h-60 w-full overflow-auto rounded border bg-white text-base text-xs ring-black/10 focus:outline-none dark:bg-gray-800 dark:ring-white/20 dark:last:border-0 md:w-[100%]',
                     optionsListClass ?? '',
                   )}
                 >
@@ -131,7 +131,7 @@ function SelectDropDown({
                       key={'listbox-render-option'}
                       value={null}
                       className={cn(
-                        'group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700',
+                        'group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-800 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700',
                         optionsClass ?? '',
                       )}
                     >
@@ -155,14 +155,14 @@ function SelectDropDown({
                         key={i}
                         value={currentValue}
                         className={cn(
-                          'group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700',
+                          'group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-800 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700',
                           optionsClass ?? '',
                         )}
                       >
                         <span className="flex items-center gap-1.5 truncate">
                           <span
                             className={cn(
-                              'flex h-6 items-center gap-1 text-gray-800 dark:text-gray-100',
+                              'flex h-6 items-center gap-1 text-gray-800 dark:text-gray-200',
                               option === value ? 'font-semibold' : '',
                               iconSide === 'left' ? 'ml-4' : '',
                             )}
@@ -172,7 +172,7 @@ function SelectDropDown({
                           {currentValue === activeValue && (
                             <span
                               className={cn(
-                                'absolute inset-y-0 flex items-center text-gray-800 dark:text-gray-100',
+                                'absolute inset-y-0 flex items-center text-gray-800 dark:text-gray-200',
                                 iconSide === 'left' ? 'left-0 pl-2' : 'right-0 pr-3',
                               )}
                             >
diff --git a/client/src/components/ui/SelectDropDownPop.tsx b/client/src/components/ui/SelectDropDownPop.tsx
index 51c453fa6..88c434028 100644
--- a/client/src/components/ui/SelectDropDownPop.tsx
+++ b/client/src/components/ui/SelectDropDownPop.tsx
@@ -61,7 +61,7 @@ function SelectDropDownPop({
               <span className="inline-flex w-full ">
                 <span
                   className={cn(
-                    'flex h-6 items-center gap-1  text-sm text-gray-900 dark:text-white',
+                    'flex h-6 items-center gap-1  text-sm text-gray-800 dark:text-white',
                     !showLabel ? 'text-xs' : '',
                     'min-w-[75px] font-normal',
                   )}
@@ -95,7 +95,7 @@ function SelectDropDownPop({
             <Content
               side="bottom"
               align="start"
-              className="mt-2 max-h-[52vh] min-w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white lg:max-h-[52vh]"
+              className="mt-2 max-h-[52vh] min-w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800 dark:text-white lg:max-h-[52vh]"
             >
               {availableValues.map((option) => {
                 return (
diff --git a/client/src/components/ui/Slider.tsx b/client/src/components/ui/Slider.tsx
index eccdf5de1..75baaf9ac 100644
--- a/client/src/components/ui/Slider.tsx
+++ b/client/src/components/ui/Slider.tsx
@@ -15,7 +15,7 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, S
       className={cn('relative flex w-full touch-none select-none items-center', className ?? '')}
       {...props}
     >
-      <SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-gray-100 dark:bg-gray-900">
+      <SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800">
         <SliderPrimitive.Range className="absolute h-full bg-gray-400  dark:bg-gray-400" />
       </SliderPrimitive.Track>
       <SliderPrimitive.Thumb
@@ -25,7 +25,7 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, S
             return;
           })
         }
-        className="cursor-pointer block h-4 w-4 rounded-full border-2 border-gray-400 bg-white transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-100 dark:bg-gray-400 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900"
+        className="block h-4 w-4 cursor-pointer rounded-full border-2 border-gray-400 bg-white transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-200 dark:bg-gray-400 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-800"
       />
     </SliderPrimitive.Root>
   ),
diff --git a/client/src/components/ui/Switch.tsx b/client/src/components/ui/Switch.tsx
index 02b83dd91..4110b18c5 100644
--- a/client/src/components/ui/Switch.tsx
+++ b/client/src/components/ui/Switch.tsx
@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className = '', ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      'focus-visible:ring-ring focus-visible:ring-offset-background peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-green-600 data-[state=unchecked]:bg-gray-200',
+      'focus-visible:ring-ring focus-visible:ring-offset-background peer inline-flex h-[19.2px] w-[32px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-green-500 data-[state=unchecked]:bg-gray-200',
       className,
     )}
     {...props}
@@ -17,7 +17,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        'pointer-events-none block h-5 w-5 rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.45)] transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+        'pointer-events-none block h-4 w-4 -translate-x-0.5 rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.45)] transition-transform data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0',
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/client/src/components/ui/Tabs.tsx b/client/src/components/ui/Tabs.tsx
index a439407e8..16a7edbbf 100644
--- a/client/src/components/ui/Tabs.tsx
+++ b/client/src/components/ui/Tabs.tsx
@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center rounded-md bg-gray-100 p-1 dark:bg-gray-800',
+      'inline-flex items-center justify-center rounded-md bg-gray-200 p-1 dark:bg-gray-800',
       className,
     )}
     {...props}
@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
 >(({ className = '', ...props }, ref) => (
   <TabsPrimitive.Trigger
     className={cn(
-      'inline-flex min-w-[100px] items-center justify-center rounded-[0.185rem] px-3 py-1.5  text-sm font-medium text-gray-700 transition-all  disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm dark:text-gray-200 dark:data-[state=active]:bg-gray-700 dark:data-[state=active]:text-gray-100',
+      'inline-flex min-w-[100px] items-center justify-center rounded-[0.185rem] px-3 py-1.5  text-sm font-medium text-gray-700 transition-all  disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-800 data-[state=active]:shadow-sm dark:text-gray-200 dark:data-[state=active]:bg-gray-700 dark:data-[state=active]:text-gray-200',
       className,
     )}
     {...props}
diff --git a/client/src/components/ui/Templates.tsx b/client/src/components/ui/Templates.tsx
index 5dab6a736..479fab619 100644
--- a/client/src/components/ui/Templates.tsx
+++ b/client/src/components/ui/Templates.tsx
@@ -15,17 +15,17 @@ export default function Templates({ showTemplates }: { showTemplates: () => void
           <div className="flex flex-1 flex-col items-center gap-3.5">
             <span className="text-sm text-gray-700 dark:text-gray-400">
               {localize('com_ui_showing')}{' '}
-              <span className="font-semibold text-gray-900 dark:text-white">1</span>{' '}
+              <span className="font-semibold text-gray-800 dark:text-white">1</span>{' '}
               {localize('com_ui_of')}{' '}
               <a id="prompt-link">
-                <span className="font-semibold text-gray-900 dark:text-white">
+                <span className="font-semibold text-gray-800 dark:text-white">
                   1 {localize('com_ui_entries')}
                 </span>
               </a>
             </span>
             <button
               onClick={showTemplates}
-              className="btn btn-neutral justify-center gap-2 border-0 md:border"
+              className="btn justify-center gap-2 border-0 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 md:border"
             >
               <ChatIcon />
               {localize('com_ui_hide_prompt_templates')}
@@ -38,7 +38,7 @@ export default function Templates({ showTemplates }: { showTemplates: () => void
                 {localize('com_ui_dan')}
               </h2>
               <button>
-                <p className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-900">
+                <p className="w-full rounded-md bg-gray-50 p-3 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-gray-800">
                   {localize('com_ui_dan_template')}
                 </p>
               </button>
@@ -47,14 +47,14 @@ export default function Templates({ showTemplates }: { showTemplates: () => void
             <div className="xs:mt-0 mt-2 inline-flex">
               <button
                 // onclick="prevPromptTemplatesPage()"
-                className="bg-gray-100 px-4  py-2 font-medium hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-white"
+                className="bg-gray-200 px-4  py-2 font-medium hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-white"
                 style={{ borderRadius: '6px 0 0 6px' }}
               >
                 {localize('com_ui_prev')}
               </button>
               <button
                 // onclick="nextPromptTemplatesPage()"
-                className="border-0 border-l  border-gray-500 bg-gray-100 px-4 py-2 font-medium hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-white"
+                className="border-0 border-l  border-gray-500 bg-gray-200 px-4 py-2 font-medium hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:hover:text-white"
                 style={{ borderRadius: '6px 0 0 6px' }}
               >
                 {localize('com_ui_next')}
diff --git a/client/src/components/ui/Tooltip.tsx b/client/src/components/ui/Tooltip.tsx
index eca048d29..d4782601d 100644
--- a/client/src/components/ui/Tooltip.tsx
+++ b/client/src/components/ui/Tooltip.tsx
@@ -25,11 +25,12 @@ const TooltipContent = React.forwardRef<
   <TooltipPortal forceMount={forceMount}>
     <TooltipPrimitive.Content
       className={cn(
-        'shadow-xs relative max-w-xs rounded-lg border border-black/10 bg-black p-1 transition-opacity',
+        'shadow-xs relative max-w-xs rounded-lg border border-gray-900/10 bg-gray-900 p-1 transition-opacity',
         className,
       )}
       ref={ref}
       {...props}
+      style={{ userSelect: 'none' }}
     >
       <span className="flex items-center whitespace-pre-wrap px-2 py-1 text-center text-sm font-medium normal-case text-white">
         {children}
diff --git a/client/src/hooks/ScreenshotContext.tsx b/client/src/hooks/ScreenshotContext.tsx
index 77e987f16..bd841b68a 100644
--- a/client/src/hooks/ScreenshotContext.tsx
+++ b/client/src/hooks/ScreenshotContext.tsx
@@ -21,7 +21,7 @@ export const useScreenshot = () => {
     if (theme === 'system') {
       isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
     }
-    const backgroundColor = isDark ? '#343541' : 'white';
+    const backgroundColor = isDark ? '#171717' : 'white';
     const canvas = await toCanvas(node);
     const croppedCanvas = document.createElement('canvas');
     const croppedCanvasContext = croppedCanvas.getContext('2d') as CanvasRenderingContext2D;
diff --git a/client/src/localization/languages/Ar.tsx b/client/src/localization/languages/Ar.tsx
index 2993d7817..5931396f3 100644
--- a/client/src/localization/languages/Ar.tsx
+++ b/client/src/localization/languages/Ar.tsx
@@ -1,7 +1,6 @@
 // Arabic phrases
 
 export default {
-  com_ui_balance: 'الرصيد',
   com_ui_examples: 'أمثلة',
   com_ui_happy_birthday: 'إنه عيد ميلادي الأول!',
   com_ui_new_chat: 'دردشة جديدة',
diff --git a/client/src/localization/languages/Eng.tsx b/client/src/localization/languages/Eng.tsx
index d50c96dae..e54ad02ef 100644
--- a/client/src/localization/languages/Eng.tsx
+++ b/client/src/localization/languages/Eng.tsx
@@ -31,7 +31,7 @@ export default {
   com_ui_attach_error:
     'Cannot attach file. Create or select a conversation, or try refreshing the page.',
   com_ui_examples: 'Examples',
-  com_ui_new_chat: 'New Chat',
+  com_ui_new_chat: 'New chat',
   com_ui_happy_birthday: 'It\'s my 1st birthday!',
   com_ui_example_quantum_computing: 'Explain quantum computing in simple terms',
   com_ui_example_10_year_old_b_day: 'Got any creative ideas for a 10 year old\'s birthday?',
diff --git a/client/src/mobile.css b/client/src/mobile.css
index 62b4c72bc..429ad7cdb 100644
--- a/client/src/mobile.css
+++ b/client/src/mobile.css
@@ -25,7 +25,7 @@
 }
 
 .nav-mask.active {
-  opacity: 1;
+  opacity: 0;
   pointer-events: auto;
 }
 
@@ -41,7 +41,7 @@
     right: 0;
     top: 0;
     bottom: 0;
-    background-color: rgba(86, 88, 105, 0.75);
+    background-color: rgba(7, 7, 7, 0.4);
     padding-left: 420px;
     padding-top: 12px;
     opacity: 0;
diff --git a/client/src/style.css b/client/src/style.css
index 40d960af7..41d3d9ca9 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -1045,24 +1045,6 @@ button {
   --tw-bg-opacity: 1;
   background-color: rgba(199, 210, 254, var(--tw-bg-opacity));
 }
-.btn-secondary:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
-    var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
-    var(--tw-ring-color);
-  --tw-ring-offset-width: 2px;
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 transparent);
-}
-.btn-secondary.focus-visible {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity));
-}
-.btn-secondary:focus-visible {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity));
-}
 .btn-neutral {
   --tw-bg-opacity: 1;
   --tw-text-opacity: 1;
@@ -1077,48 +1059,17 @@ button {
   --tw-bg-opacity: 1;
   background-color: rgba(236, 236, 241, var(--tw-bg-opacity));
 }
-.btn-neutral:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
-    var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
-    var(--tw-ring-color);
-  --tw-ring-offset-width: 2px;
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-    var(--tw-shadow, 0 0 transparent);
-}
-.btn-neutral.focus-visible {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity));
-}
-.btn-neutral:focus-visible {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity));
-}
 .dark .btn-neutral {
   --tw-border-opacity: 1;
   --tw-bg-opacity: 1;
   --tw-text-opacity: 1;
-  background-color: rgba(52, 53, 65, var(--tw-bg-opacity));
-  border-color: rgba(86, 88, 105, var(--tw-border-opacity));
-  color: rgba(217, 217, 227, var(--tw-text-opacity));
+  background-color: transparent;
+  border-color: rgba(38, 38, 38, var(--tw-border-opacity));
+  color: rgba(255, 255, 240, var(--tw-text-opacity));
 }
 .dark .btn-neutral:hover {
   --tw-bg-opacity: 1;
-  background-color: rgba(64, 65, 79, var(--tw-bg-opacity));
-}
-.btn-dark {
-  --tw-border-opacity: 1;
-  --tw-bg-opacity: 1;
-  --tw-text-opacity: 1;
-  background-color: rgba(52, 53, 65, var(--tw-bg-opacity));
-  border-color: rgba(86, 88, 105, var(--tw-border-opacity));
-  border-width: 1px;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
-}
-.btn-dark:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(64, 65, 79, var(--tw-bg-opacity));
+  background-color: rgba(23, 23, 23, var(--tw-bg-opacity));
 }
 .btn-small {
   padding: 0.25rem 0.5rem;
@@ -1170,7 +1121,7 @@ html {
 .dark body,
 .dark html {
   --tw-bg-opacity: 1;
-  background-color: rgba(52, 53, 65, var(--tw-bg-opacity));
+  background-color: rgba(23, 23, 23, var(--tw-bg-opacity));
 }
 
 #__next,
@@ -1691,17 +1642,18 @@ button.scroll-convo {
 :root {
   --white:#fff;
   --black:#000;
+  --gray-200:#ececf1;
   --gray-50:#f7f7f8;
-  --gray-100:#ececf1;
-  --gray-200:#d9d9e3;
-  --gray-300:#c5c5d2;
-  --gray-400:#acacbe;
-  --gray-500:#8e8ea0;
-  --gray-600:#565869;
-  --gray-700:#40414f;
-  --gray-800:#343541;
-  --gray-900:#202123;
-  --gray-950:#050509;
+  --gray-100:#ececec;
+  --gray-200:#e3e3e3;
+  --gray-300:#cdcdcd;
+  --gray-400:#999696;
+  --gray-500:#686262;
+  --gray-600:#3d3d3f;
+  --gray-700:#262626;
+  --gray-750:#333333;
+  --gray-800:#171717;
+  --gray-900:#0d0d0d;
   --gizmo-gray-500:#999;
   --gizmo-gray-600:#666;
   --gizmo-gray-950:#0f0f0f
@@ -1756,7 +1708,7 @@ html {
 }
 
 .text-token-text-primary {
-  color:#343541;
+  color:#171717;
   color:var(--text-primary)
 }
 .text-token-text-secondary {
diff --git a/client/src/utils/buildTree.ts b/client/src/utils/buildTree.ts
index 637801b54..a38907665 100644
--- a/client/src/utils/buildTree.ts
+++ b/client/src/utils/buildTree.ts
@@ -1,9 +1,9 @@
 import { TFile, TMessage } from 'librechat-data-provider';
 
 const even =
-  'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 bg-white dark:text-gray-100 group dark:bg-gray-800 hover:bg-gray-100/25 hover:text-gray-700  dark:hover:bg-gray-900 dark:hover:text-gray-200';
+  'w-full border-b border-black/10 dark:border-gray-800/50 text-gray-800 bg-white dark:text-gray-200 group dark:bg-gray-800 hover:bg-gray-200/25 hover:text-gray-700  dark:hover:bg-gray-800 dark:hover:text-gray-200';
 const odd =
-  'w-full border-b border-black/10 bg-gray-50 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-gray-1000 hover:bg-gray-100/40 hover:text-gray-700 dark:hover:bg-[#3b3d49] dark:hover:text-gray-200';
+  'w-full border-b border-black/10 bg-gray-50 dark:border-gray-800/50 text-gray-800 dark:text-gray-200 group bg-gray-200 dark:bg-gray-700 hover:bg-gray-200/40 hover:text-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-200';
 
 export default function buildTree({
   messages,
diff --git a/client/src/utils/index.ts b/client/src/utils/index.ts
index 3e6c5b72c..f5570e304 100644
--- a/client/src/utils/index.ts
+++ b/client/src/utils/index.ts
@@ -53,10 +53,10 @@ export const cardStyle =
   'transition-colors rounded-md min-w-[75px] border font-normal bg-white hover:bg-slate-50 dark:border-gray-600 dark:hover:bg-gray-700 dark:bg-gray-800 text-black dark:text-gray-600 focus:outline-none data-[state=open]:bg-slate-50 dark:data-[state=open]:bg-gray-700';
 
 export const defaultTextProps =
-  'rounded-md border border-gray-200 focus:border-slate-400 focus:bg-gray-50 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:bg-gray-700 focus:dark:bg-gray-600 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0';
+  'rounded-md border border-gray-200 focus:border-slate-400 focus:bg-gray-50 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-700 focus:dark:bg-gray-600 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-600 dark:focus:outline-none';
 
 export const optionText =
-  'p-0 shadow-none text-right pr-1 h-8 border-transparent focus:ring-[#10a37f] focus:ring-offset-0 focus:ring-opacity-100 hover:bg-gray-800/10 dark:hover:bg-white/10 focus:bg-gray-800/10 dark:focus:bg-white/10 transition-colors';
+  'p-0 shadow-none text-right pr-1 h-8 border-transparent hover:bg-gray-800/10 dark:hover:bg-white/10 dark:focus:bg-white/10 transition-colors';
 
 export const defaultTextPropsLabel =
-  'rounded-md border border-gray-300 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.10)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-400 dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0';
+  'rounded-md border border-gray-300 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.10)] outline-none placeholder:text-gray-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-600 dark:focus:outline-none';
diff --git a/client/tailwind.config.cjs b/client/tailwind.config.cjs
index d2c48aa79..222a854ee 100644
--- a/client/tailwind.config.cjs
+++ b/client/tailwind.config.cjs
@@ -7,7 +7,7 @@ module.exports = {
   darkMode: ['class'],
   theme: {
     // colors: {
-    //   'gpt-dark-gray': '#343541',
+    //   'gpt-dark-gray': '#171717',
     // },
     fontFamily: {
       sans: ['Inter', 'sans-serif'],
@@ -37,19 +37,18 @@ module.exports = {
       },
       colors: {
         gray: {
-          '20': '#ececf1',
-          '50': '#f7f7f8',
-          '70': '#d1d5db',
-          '100': '#d9d9e3',
-          '200': '#d9d9e3', // Replacing .bg-gray-200
-          '300': '#c5c5d2',
-          '400': '#acacb1',
-          '500': '#8e8ea0',
-          '600': '#565869',
-          '700': '#40414f', // Replacing .dark .dark:bg-gray-700 and .dark .dark:hover:bg-gray-700:hover
-          '800': '#343541', // Replacing .dark .dark:bg-gray-800, .bg-gray-800, and .dark .dark:hover:bg-gray-800\/90
-          '900': '#202123', // Replacing .dark .dark:bg-gray-900, .bg-gray-900, and .dark .dark:hover:bg-gray-900:hover
-          '1000': '#444654',
+          20: '#ececf1',
+          50: '#f7f7f8',
+          100: '#ececec',
+          200: '#e3e3e3',
+          300: '#cdcdcd',
+          400: '#999696',
+          500: '#686262',
+          600: '#3d3d3f',
+          700: '#262626', // Replacing .dark .dark:bg-gray-700 and .dark .dark:hover:bg-gray-700:hover
+          750: '#333333',
+          800: '#212121', // Replacing .dark .dark:bg-gray-800, .bg-gray-800, and .dark .dark:hover:bg-gray-800\/90
+          900: '#0d0d0d', // Replacing .dark .dark:bg-gray-900, .bg-gray-900, and .dark .dark:hover:bg-gray-900:hover
         },
         green: {
           50: '#f1f9f7',
diff --git a/index.html b/index.html
index c0b1b0117..b2655426d 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <meta name="theme-color" content="#343541">
+    <meta name="theme-color" content="#171717">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <title>LibreChat</title>