From 30f6d90cfebff8da9cd9b83a4227dc12923da734 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+Berry-13@users.noreply.github.com>
Date: Thu, 21 Mar 2024 14:02:00 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=96=8C=EF=B8=8F=20style:=20Improve=20Dark?=
 =?UTF-8?q?=20Theme=20Accessibility=20(#2125)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* style: all landing page components

* chore: converted all slate to gray, since slate doesnt work

* style: assistant panel

* style: basic UI components, userprovided, preset

* style: update in multiple components

* fix(PluginStoreDialog): justify-center

* fixed some minor Ui styles

* style(MultiSearch): update dark bg

* style: update Convo styling

* style: lower textarea max height slightly

---------

Co-authored-by: Danny Avila <messagedaniel@protonmail.com>
---
 client/src/components/Chat/Input/ChatForm.tsx |  4 +--
 .../components/Chat/Input/Files/FilesView.tsx |  2 +-
 .../Chat/Input/Files/Table/DataTable.tsx      |  2 +-
 .../components/Chat/Input/HeaderOptions.tsx   |  4 +--
 .../components/Chat/Input/OptionsPopover.tsx  |  6 ++--
 .../components/Chat/Input/PopoverButtons.tsx  |  2 +-
 .../Chat/Menus/Endpoints/MenuItem.tsx         |  4 +--
 .../components/Chat/Menus/EndpointsMenu.tsx   |  2 +-
 .../Chat/Menus/Presets/EditPresetDialog.tsx   | 10 +++---
 .../Chat/Menus/Presets/PresetItems.tsx        | 10 +++---
 .../src/components/Chat/Menus/PresetsMenu.tsx |  6 ++--
 .../src/components/Chat/Menus/UI/MenuItem.tsx |  2 +-
 .../components/Chat/Menus/UI/TitleButton.tsx  |  2 +-
 client/src/components/Conversations/Convo.tsx |  6 ++--
 .../components/Conversations/RenameButton.tsx |  4 +--
 .../Endpoints/EndpointOptionsPopover.tsx      |  2 +-
 .../Endpoints/SaveAsPresetDialog.tsx          |  2 +-
 .../Endpoints/Settings/Assistants.tsx         |  2 --
 .../components/Endpoints/Settings/OpenAI.tsx  |  4 +--
 .../Input/EndpointMenu/FileUpload.tsx         |  2 +-
 .../components/Input/ModelSelect/BingAI.tsx   |  4 +--
 .../Input/SetKeyDialog/GoogleConfig.tsx       |  2 +-
 .../Input/SetKeyDialog/InputWithLabel.tsx     |  4 +--
 .../Input/SetKeyDialog/OpenAIConfig.tsx       | 31 +++++++++++--------
 client/src/components/Nav/Nav.tsx             | 13 ++++----
 client/src/components/Nav/NavLinks.tsx        |  8 ++---
 client/src/components/Nav/NewChat.tsx         |  4 +--
 client/src/components/Nav/Settings.tsx        | 20 ++++++------
 .../Nav/SettingsTabs/Account/Avatar.tsx       |  6 ++--
 .../Plugins/Store/PluginAuthForm.tsx          |  4 +--
 .../Plugins/Store/PluginStoreDialog.tsx       | 24 +++++++-------
 .../Plugins/Store/PluginStoreItem.tsx         |  4 +--
 .../SidePanel/Builder/ActionsAuth.tsx         | 22 ++++++-------
 .../SidePanel/Builder/ActionsInput.tsx        |  2 +-
 .../SidePanel/Builder/AssistantSelect.tsx     |  4 +--
 .../SidePanel/Builder/ContextButton.tsx       |  2 +-
 .../components/SidePanel/Builder/Images.tsx   |  2 +-
 .../SidePanel/Files/PanelFileCell.tsx         |  2 +-
 client/src/components/SidePanel/Nav.tsx       |  4 +--
 client/src/components/SidePanel/SidePanel.tsx |  4 +--
 client/src/components/SidePanel/Switcher.tsx  |  2 +-
 client/src/components/Tools/ToolItem.tsx      |  2 +-
 client/src/components/svg/EditIcon.tsx        |  2 --
 client/src/components/svg/index.ts            |  1 -
 client/src/components/ui/AlertDialog.tsx      | 10 +++---
 client/src/components/ui/Button.tsx           |  4 +--
 client/src/components/ui/Checkbox.tsx         |  2 +-
 client/src/components/ui/Dialog.tsx           | 19 +++++-------
 client/src/components/ui/DialogTemplate.tsx   |  4 +--
 client/src/components/ui/Dropdown.tsx         |  8 ++---
 client/src/components/ui/InputNumber.tsx      |  4 +--
 client/src/components/ui/MultiSearch.tsx      |  2 +-
 client/src/components/ui/MultiSelectPop.tsx   |  6 ++--
 client/src/components/ui/SelectDropDown.tsx   |  4 +--
 .../src/components/ui/SelectDropDownPop.tsx   |  6 ++--
 client/src/components/ui/Textarea.tsx         |  2 +-
 client/src/style.css                          | 10 +++---
 client/src/utils/index.ts                     |  4 +--
 client/tailwind.config.cjs                    |  9 +++---
 59 files changed, 170 insertions(+), 175 deletions(-)

diff --git a/client/src/components/Chat/Input/ChatForm.tsx b/client/src/components/Chat/Input/ChatForm.tsx
index 5b49e7bb1f..8067eded4d 100644
--- a/client/src/components/Chat/Input/ChatForm.tsx
+++ b/client/src/components/Chat/Input/ChatForm.tsx
@@ -81,7 +81,7 @@ const 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 dark:border-token-border-medium border-token-border-medium bg-token-main-surface-primary relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border dark:text-white [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]">
+          <div className="[&:has(textarea:focus)]:border-token-border-xheavy border-token-border-medium bg-token-main-surface-primary relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border dark:border-gray-600 dark:text-white [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)] dark:[&:has(textarea:focus)]:border-gray-500">
             <FileRow
               files={files}
               setFiles={setFiles}
@@ -121,7 +121,7 @@ const ChatForm = ({ index = 0 }) => {
                     : 'pl-3 md:pl-4',
                   'm-0 w-full resize-none border-0 bg-transparent py-[10px] pr-10 placeholder-black/50 focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder-white/50 md:py-3.5 md:pr-12 ',
                   removeFocusOutlines,
-                  'max-h-[65vh] md:max-h-[85vh]',
+                  'max-h-[65vh] md:max-h-[75vh]',
                 )}
               />
             )}
diff --git a/client/src/components/Chat/Input/Files/FilesView.tsx b/client/src/components/Chat/Input/Files/FilesView.tsx
index 6a909d2fda..32acf6aa2f 100644
--- a/client/src/components/Chat/Input/Files/FilesView.tsx
+++ b/client/src/components/Chat/Input/Files/FilesView.tsx
@@ -27,7 +27,7 @@ export default function Files({ open, onOpenChange }) {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className={cn('overflow-x-auto shadow-2xl dark:bg-gray-900 dark:text-white')}>
+      <DialogContent className={cn('overflow-x-auto shadow-2xl dark:bg-gray-700 dark:text-white')}>
         <DialogHeader>
           <DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
             {localize('com_nav_my_files')}
diff --git a/client/src/components/Chat/Input/Files/Table/DataTable.tsx b/client/src/components/Chat/Input/Files/Table/DataTable.tsx
index 4185d1380f..5fd01964c4 100644
--- a/client/src/components/Chat/Input/Files/Table/DataTable.tsx
+++ b/client/src/components/Chat/Input/Files/Table/DataTable.tsx
@@ -143,7 +143,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
                   return (
                     <TableHead
                       key={header.id}
-                      className="align-start sticky top-0 rounded-t border-b border-black/10 bg-white px-2 py-1 text-left font-medium text-gray-700 dark:border-white/10 dark:bg-gray-900 dark:text-gray-100 sm:px-4 sm:py-2"
+                      className="align-start sticky top-0 rounded-t border-b border-black/10 bg-white px-2 py-1 text-left font-medium text-gray-700 dark:border-white/10 dark:bg-gray-700 dark:text-gray-100 sm:px-4 sm:py-2"
                       style={style}
                     >
                       {header.isPlaceholder
diff --git a/client/src/components/Chat/Input/HeaderOptions.tsx b/client/src/components/Chat/Input/HeaderOptions.tsx
index 1bfd4b142a..c0fcf61c71 100644
--- a/client/src/components/Chat/Input/HeaderOptions.tsx
+++ b/client/src/components/Chat/Input/HeaderOptions.tsx
@@ -81,8 +81,8 @@ export default function OptionsBar() {
                   type="button"
                   className={cn(
                     cardStyle,
-                    'min-w-4 z-50 flex h-[40px] flex-none items-center justify-center px-3 focus:ring-0 focus:ring-offset-0',
-                    'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-black/10 dark:radix-state-open:bg-black/20',
+                    'z-50 flex h-[40px] min-w-4 flex-none items-center justify-center px-3 focus:ring-0 focus:ring-offset-0',
+                    'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-gray-700 dark:radix-state-open:bg-gray-700',
                   )}
                   onClick={triggerAdvancedMode}
                 >
diff --git a/client/src/components/Chat/Input/OptionsPopover.tsx b/client/src/components/Chat/Input/OptionsPopover.tsx
index ea1d3daa63..e936156f8a 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-800',
+              'dark:bg-gray-700',
               '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-gray-50 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-700">
               <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-gray-100 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-700"
+                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-600"
                 onClick={saveAsPreset}
               >
                 <Save className="mr-1 w-[14px]" />
diff --git a/client/src/components/Chat/Input/PopoverButtons.tsx b/client/src/components/Chat/Input/PopoverButtons.tsx
index 690c3e98de..6607b51aa6 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-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',
+            '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-600 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0',
             buttonClass ?? '',
           )}
           onClick={button.handler}
diff --git a/client/src/components/Chat/Menus/Endpoints/MenuItem.tsx b/client/src/components/Chat/Menus/Endpoints/MenuItem.tsx
index 56036d94d8..fac02a6e78 100644
--- a/client/src/components/Chat/Menus/Endpoints/MenuItem.tsx
+++ b/client/src/components/Chat/Menus/Endpoints/MenuItem.tsx
@@ -101,7 +101,7 @@ const MenuItem: FC<MenuItemProps> = ({
     <>
       <div
         role="menuitem"
-        className="group m-1.5 flex max-h-[40px] cursor-pointer gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 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 max-h-[40px] cursor-pointer gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600"
         tabIndex={-1}
         {...rest}
         onClick={() => onSelectEndpoint(endpoint)}
@@ -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-800'
+                      ? 'w-full rounded-lg p-2 hover:bg-gray-200 dark:hover:bg-gray-600'
                       : '',
                   )}
                   onClick={(e) => {
diff --git a/client/src/components/Chat/Menus/EndpointsMenu.tsx b/client/src/components/Chat/Menus/EndpointsMenu.tsx
index 5648be71a8..6d73c80e72 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-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800 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-700 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 e00d671780..488262cd9e 100644
--- a/client/src/components/Chat/Menus/Presets/EditPresetDialog.tsx
+++ b/client/src/components/Chat/Menus/Presets/EditPresetDialog.tsx
@@ -53,7 +53,7 @@ const EditPresetDialog = ({
         main={
           <div className="flex w-full flex-col items-center gap-2 md:h-[530px]">
             <div className="grid w-full">
-              <div className="col-span-4 flex items-start md:flex-row justify-start flex-col gap-6 pb-4">
+              <div className="col-span-4 flex flex-col items-start justify-start gap-6 pb-4 md:flex-row">
                 <div className="flex w-full flex-col">
                   <Label htmlFor="preset-name" className="mb-1 text-left text-sm font-medium">
                     {localize('com_endpoint_preset_name')}
@@ -90,13 +90,13 @@ const EditPresetDialog = ({
                     {'ㅤ'}
                   </Label>
                   <PopoverButtons
-                    buttonClass="ml-0 w-full dark:bg-gray-700 dark:hover:bg-gray-800 p-2 h-[40px] justify-center mt-0"
-                    iconClass="hidden lg:block w-4"
+                    buttonClass="ml-0 w-full border border-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600 p-2 h-[40px] justify-center mt-0"
+                    iconClass="hidden lg:block w-4 "
                   />
                 </div>
               </div>
             </div>
-            <div className="my-4 w-full border-t border-gray-300 dark:border-gray-700" />
+            <div className="my-4 w-full border-t border-gray-300 dark:border-gray-600" />
             <div className="w-full p-0">
               <EndpointSettings
                 conversation={preset}
@@ -112,7 +112,7 @@ const EditPresetDialog = ({
           <div className="mb-6 md:mb-2">
             <DialogButton
               onClick={exportPreset}
-              className="border-gray-100 hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-600"
+              className="border-gray-100 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
             >
               {localize('com_endpoint_export')}
             </DialogButton>
diff --git a/client/src/components/Chat/Menus/Presets/PresetItems.tsx b/client/src/components/Chat/Menus/Presets/PresetItems.tsx
index 4ee09fc566..965300c53e 100644
--- a/client/src/components/Chat/Menus/Presets/PresetItems.tsx
+++ b/client/src/components/Chat/Menus/Presets/PresetItems.tsx
@@ -55,7 +55,7 @@ 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-gray-100 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500 dark:hover:text-red-700"
+                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-700 dark:hover:text-green-500 dark:hover:text-red-700"
               >
                 <svg
                   width="24"
@@ -87,7 +87,7 @@ const PresetItems: FC<{
               }
               selection={{
                 selectHandler: clearAllPresets,
-                selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
+                selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-600 text-white',
                 selectText: localize('com_ui_clear'),
               }}
             />
@@ -143,7 +143,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 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 text-gray-400 hover:text-gray-700 dark:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
                           onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
@@ -153,7 +153,7 @@ const PresetItems: FC<{
                           <PinIcon unpin={defaultPreset?.presetId === preset.presetId} />
                         </button>
                         <button
-                          className="m-0 h-full rounded-md p-2 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 text-gray-400 hover:text-gray-700 dark:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-200 sm:invisible sm:group-hover:visible"
                           onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
@@ -163,7 +163,7 @@ const PresetItems: FC<{
                           <EditIcon />
                         </button>
                         <button
-                          className="m-0 h-full rounded-md p-2 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 text-gray-400 hover:text-gray-600 dark:bg-gray-600 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 f79244378e..031ccb8336 100644
--- a/client/src/components/Chat/Menus/PresetsMenu.tsx
+++ b/client/src/components/Chat/Menus/PresetsMenu.tsx
@@ -27,8 +27,8 @@ const PresetsMenu: FC = () => {
       <Trigger asChild>
         <button
           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',
+            'pointer-cursor relative flex flex-col rounded-md border border-gray-100 bg-white text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-gray-700 dark:bg-gray-800 sm:text-sm',
+            'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-gray-700 dark:radix-state-open:bg-gray-700',
             '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"
@@ -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-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800 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-700 dark:text-white md:min-w-[400px]"
           >
             <PresetItems
               presets={presets}
diff --git a/client/src/components/Chat/Menus/UI/MenuItem.tsx b/client/src/components/Chat/Menus/UI/MenuItem.tsx
index 1836cd540d..2d65f174ea 100644
--- a/client/src/components/Chat/Menus/UI/MenuItem.tsx
+++ b/client/src/components/Chat/Menus/UI/MenuItem.tsx
@@ -34,7 +34,7 @@ const MenuItem: FC<MenuItemProps> = ({
     <div
       role="menuitem"
       className={cn(
-        'group m-1.5 flex cursor-pointer gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5 md:min-w-[240px]',
+        'group m-1.5 flex cursor-pointer gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 md:min-w-[240px]',
         className ?? '',
       )}
       tabIndex={-1}
diff --git a/client/src/components/Chat/Menus/UI/TitleButton.tsx b/client/src/components/Chat/Menus/UI/TitleButton.tsx
index eb2055f214..78a9ba4443 100644
--- a/client/src/components/Chat/Menus/UI/TitleButton.tsx
+++ b/client/src/components/Chat/Menus/UI/TitleButton.tsx
@@ -4,7 +4,7 @@ export default function TitleButton({ primaryText = '', secondaryText = '' }) {
   return (
     <Trigger asChild>
       <div
-        className="group flex cursor-pointer items-center gap-1 rounded-xl px-3 py-2 text-lg font-medium hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-black/10 dark:radix-state-open:bg-black/20"
+        className="group flex cursor-pointer items-center gap-1 rounded-xl px-3 py-2 text-lg font-medium hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-gray-700 dark:radix-state-open:bg-gray-700"
         // type="button"
       >
         <div>
diff --git a/client/src/components/Conversations/Convo.tsx b/client/src/components/Conversations/Convo.tsx
index 8df0637389..d3452d768f 100644
--- a/client/src/components/Conversations/Convo.tsx
+++ b/client/src/components/Conversations/Convo.tsx
@@ -120,7 +120,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-2 break-all rounded-lg bg-gray-200 dark:bg-gray-800 py-2 px-2',
+      'group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-2 break-all rounded-lg bg-gray-200 dark:bg-gray-700 py-2 px-2',
   };
 
   if (!activeConvo) {
@@ -155,7 +155,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
       {activeConvo ? (
         <div
           className={`absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l ${
-            !renaming ? 'from-gray-200 from-60% to-transparent dark:from-gray-800' : ''
+            !renaming ? 'from-gray-200 from-60% to-transparent dark:from-gray-700' : ''
           }`}
         ></div>
       ) : (
@@ -172,7 +172,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
           />
         </div>
       ) : (
-        <div className="absolute bottom-0 right-0 top-0 w-14 rounded-lg bg-gradient-to-l from-gray-50 from-0% to-transparent group-hover:from-gray-200 dark:from-gray-900 dark:group-hover:from-gray-800" />
+        <div className="absolute bottom-0 right-0 top-0 w-14 rounded-lg bg-gradient-to-l from-gray-50 from-0% to-transparent group-hover:from-gray-200 dark:from-gray-750 dark:group-hover:from-gray-800" />
       )}
     </a>
   );
diff --git a/client/src/components/Conversations/RenameButton.tsx b/client/src/components/Conversations/RenameButton.tsx
index 8dbabab512..b18d2199fe 100644
--- a/client/src/components/Conversations/RenameButton.tsx
+++ b/client/src/components/Conversations/RenameButton.tsx
@@ -1,5 +1,5 @@
 import type { MouseEvent, ReactElement } from 'react';
-import { RenameIcon, CheckMark } from '~/components/svg';
+import { EditIcon, CheckMark } from '~/components/svg';
 
 interface RenameButtonProps {
   renaming: boolean;
@@ -23,7 +23,7 @@ export default function RenameButton({
   }
   return (
     <button {...classProp} onClick={handler}>
-      {renaming ? <CheckMark /> : <RenameIcon />}
+      {renaming ? <CheckMark /> : <EditIcon />}
     </button>
   );
 }
diff --git a/client/src/components/Endpoints/EndpointOptionsPopover.tsx b/client/src/components/Endpoints/EndpointOptionsPopover.tsx
index dfa6e912e1..24f9dbb507 100644
--- a/client/src/components/Endpoints/EndpointOptionsPopover.tsx
+++ b/client/src/components/Endpoints/EndpointOptionsPopover.tsx
@@ -42,7 +42,7 @@ export default function EndpointOptionsPopover({
             '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-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-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"
diff --git a/client/src/components/Endpoints/SaveAsPresetDialog.tsx b/client/src/components/Endpoints/SaveAsPresetDialog.tsx
index 86d19ced1c..f65d6a7d85 100644
--- a/client/src/components/Endpoints/SaveAsPresetDialog.tsx
+++ b/client/src/components/Endpoints/SaveAsPresetDialog.tsx
@@ -50,7 +50,7 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }: TEditPresetProps) =>
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogTemplate
         title={localize('com_endpoint_save_as_preset')}
-        className="w-11/12 sm:w-2/4"
+        className="w-11/12 sm:w-1/4"
         showCloseButton={false}
         main={
           <div className="flex w-full flex-col items-center gap-2">
diff --git a/client/src/components/Endpoints/Settings/Assistants.tsx b/client/src/components/Endpoints/Settings/Assistants.tsx
index 73f5c52b59..469a5a916f 100644
--- a/client/src/components/Endpoints/Settings/Assistants.tsx
+++ b/client/src/components/Endpoints/Settings/Assistants.tsx
@@ -149,7 +149,6 @@ export default function Settings({ conversation, setOption, models, readonly }:
             placeholder={localize('com_endpoint_prompt_prefix_assistants_placeholder')}
             className={cn(
               defaultTextProps,
-              'dark:bg-gray-700 dark:hover:bg-gray-700/60 dark:focus:bg-gray-700',
               'flex max-h-[240px] min-h-[80px] w-full resize-none px-3 py-2 ',
             )}
           />
@@ -167,7 +166,6 @@ export default function Settings({ conversation, setOption, models, readonly }:
             placeholder={localize('com_endpoint_instructions_assistants_placeholder')}
             className={cn(
               defaultTextProps,
-              'dark:bg-gray-700 dark:hover:bg-gray-700/60 dark:focus:bg-gray-700',
               'flex max-h-[240px] min-h-[80px] w-full resize-none px-3 py-2 ',
             )}
           />
diff --git a/client/src/components/Endpoints/Settings/OpenAI.tsx b/client/src/components/Endpoints/Settings/OpenAI.tsx
index 9558d5ec18..2f7889a19c 100644
--- a/client/src/components/Endpoints/Settings/OpenAI.tsx
+++ b/client/src/components/Endpoints/Settings/OpenAI.tsx
@@ -98,7 +98,6 @@ export default function Settings({ conversation, setOption, models, readonly }:
             placeholder={localize('com_endpoint_openai_custom_name_placeholder')}
             className={cn(
               defaultTextProps,
-              'dark:bg-gray-700 dark:hover:bg-gray-700/60 dark:focus:bg-gray-700',
               'flex h-10 max-h-10 w-full resize-none px-3 py-2',
               removeFocusOutlines,
             )}
@@ -117,7 +116,6 @@ export default function Settings({ conversation, setOption, models, readonly }:
             placeholder={localize('com_endpoint_openai_prompt_prefix_placeholder')}
             className={cn(
               defaultTextProps,
-              'dark:bg-gray-700 dark:hover:bg-gray-700/60 dark:focus:bg-gray-700',
               'flex max-h-[138px] min-h-[100px] w-full resize-none px-3 py-2 ',
             )}
           />
@@ -301,7 +299,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               className={cn(
                 defaultTextProps,
                 optionText,
-                'flex rounded-md bg-transparent py-2 text-xs focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:border-slate-700',
+                'flex rounded-md bg-transparent py-2 text-xs focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:border-gray-700',
                 'pointer-events-none max-h-5 w-12 border-0 group-hover/temp:border-gray-200',
               )}
             />
diff --git a/client/src/components/Input/EndpointMenu/FileUpload.tsx b/client/src/components/Input/EndpointMenu/FileUpload.tsx
index c3722b0b6e..a16d953ece 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-gray-100 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-600 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-green-500',
         statusColor,
         containerClassName,
       )}
diff --git a/client/src/components/Input/ModelSelect/BingAI.tsx b/client/src/components/Input/ModelSelect/BingAI.tsx
index ed1748d779..ecf298bae9 100644
--- a/client/src/components/Input/ModelSelect/BingAI.tsx
+++ b/client/src/components/Input/ModelSelect/BingAI.tsx
@@ -42,7 +42,7 @@ export default function BingAI({
         showLabel={false}
         className={cn(
           cardStyle,
-          'z-50 flex h-[40px] w-36 flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:data-[state=open]:bg-gray-600',
+          'z-50 flex h-[40px] w-36 flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-gray-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:data-[state=open]:bg-gray-600',
           showBingToneSetting ? 'hidden' : '',
         )}
       />
@@ -50,7 +50,7 @@ export default function BingAI({
         value={toneStyle ?? 'creative'}
         className={cn(
           cardStyle,
-          'z-50 flex h-[40px] flex-none items-center justify-center px-0 hover:bg-slate-50 dark:hover:bg-gray-700',
+          'z-50 flex h-[40px] flex-none items-center justify-center px-0 hover:bg-gray-50 dark:hover:bg-gray-700',
         )}
         onValueChange={(value) => setOption('toneStyle')(value.toLowerCase())}
       >
diff --git a/client/src/components/Input/SetKeyDialog/GoogleConfig.tsx b/client/src/components/Input/SetKeyDialog/GoogleConfig.tsx
index 558c79e575..8a1827cc28 100644
--- a/client/src/components/Input/SetKeyDialog/GoogleConfig.tsx
+++ b/client/src/components/Input/SetKeyDialog/GoogleConfig.tsx
@@ -36,7 +36,7 @@ const GoogleConfig = ({ userKey, setUserKey }: Pick<TConfigProps, 'userKey' | 's
       <FileUpload
         id={AuthKeys.GOOGLE_SERVICE_KEY}
         className="w-full"
-        containerClassName="dark:bg-gray-700 h-10 max-h-10 w-full resize-none py-2 dark:ring-1 dark:ring-gray-400"
+        containerClassName="dark:bg-gray-700 h-10 max-h-10 w-full resize-none py-2 dark:ring-1 dark:ring-gray-600"
         text={localize('com_endpoint_config_key_import_json_key')}
         successText={localize('com_endpoint_config_key_import_json_key_success')}
         invalidText={localize('com_endpoint_config_key_import_json_key_invalid')}
diff --git a/client/src/components/Input/SetKeyDialog/InputWithLabel.tsx b/client/src/components/Input/SetKeyDialog/InputWithLabel.tsx
index 2266a7e460..a13975b33b 100644
--- a/client/src/components/Input/SetKeyDialog/InputWithLabel.tsx
+++ b/client/src/components/Input/SetKeyDialog/InputWithLabel.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import type { ChangeEvent, FC, Ref } from 'react';
-import { cn, defaultTextPropsLabel, removeFocusOutlines } from '~/utils/';
+import { cn, defaultTextPropsLabel, removeFocusOutlines, defaultTextProps } from '~/utils/';
 import { Input, Label } from '~/components/ui';
 import { useLocalize } from '~/hooks';
 
@@ -37,7 +37,7 @@ const InputWithLabel: FC<InputWithLabelProps> = forwardRef((props, ref) => {
         ref={ref}
         placeholder={`${localize('com_endpoint_config_value')} ${label}`}
         className={cn(
-          defaultTextPropsLabel,
+          defaultTextProps,
           'flex h-10 max-h-10 w-full resize-none px-3 py-2',
           removeFocusOutlines,
           inputClassName,
diff --git a/client/src/components/Input/SetKeyDialog/OpenAIConfig.tsx b/client/src/components/Input/SetKeyDialog/OpenAIConfig.tsx
index db014ddd78..97debbcf1e 100644
--- a/client/src/components/Input/SetKeyDialog/OpenAIConfig.tsx
+++ b/client/src/components/Input/SetKeyDialog/OpenAIConfig.tsx
@@ -42,6 +42,7 @@ const OpenAIConfig = ({
               />
             )}
           />
+          <div className="mt-3"></div>
           <Controller
             name="azureOpenAIApiInstanceName"
             control={control}
@@ -54,6 +55,7 @@ const OpenAIConfig = ({
               />
             )}
           />
+          <div className="mt-3"></div>
           <Controller
             name="azureOpenAIApiDeploymentName"
             control={control}
@@ -66,6 +68,7 @@ const OpenAIConfig = ({
               />
             )}
           />
+          <div className="mt-3"></div>
           <Controller
             name="azureOpenAIApiVersion"
             control={control}
@@ -81,19 +84,21 @@ const OpenAIConfig = ({
         </>
       )}
       {userProvideURL && (
-        <Controller
-          name="baseURL"
-          control={control}
-          render={({ field }) => (
-            <InputWithLabel
-              id="baseURL"
-              {...field}
-              label={'API Base URL'}
-              subLabel={'(Optional)'}
-              labelClassName="mb-1"
-            />
-          )}
-        />
+        <div className="mt-3">
+          <Controller
+            name="baseURL"
+            control={control}
+            render={({ field }) => (
+              <InputWithLabel
+                id="baseURL"
+                {...field}
+                label={'API Base URL'}
+                subLabel={'(Optional)'}
+                labelClassName="mb-1"
+              />
+            )}
+          />
+        </div>
       )}
     </form>
   );
diff --git a/client/src/components/Nav/Nav.tsx b/client/src/components/Nav/Nav.tsx
index c21c15d9a2..813ac9ea35 100644
--- a/client/src/components/Nav/Nav.tsx
+++ b/client/src/components/Nav/Nav.tsx
@@ -125,7 +125,7 @@ const Nav = ({ navVisible, setNavVisible }) => {
       <Tooltip>
         <div
           className={
-            'nav active max-w-[320px] flex-shrink-0 overflow-x-hidden bg-gray-50 dark:bg-gray-900 md:max-w-[260px]'
+            'nav active max-w-[320px] flex-shrink-0 overflow-x-hidden bg-gray-50 dark:bg-gray-750 md:max-w-[260px]'
           }
           style={{
             width: navVisible ? navWidth : '0px',
@@ -165,12 +165,11 @@ const Nav = ({ navVisible, setNavVisible }) => {
                         moveToTop={moveToTop}
                         toggleNav={itemToggleNav}
                       />
-                      <Spinner
-                        className={cn(
-                          'm-1 mx-auto mb-4 h-4 w-4',
-                          isFetchingNextPage || showLoading ? 'opacity-1' : 'opacity-0',
-                        )}
-                      />
+                      {(isFetchingNextPage || showLoading) && (
+                        <Spinner
+                          className={cn('m-1 mx-auto mb-4 h-4 w-4 text-black dark:text-white')}
+                        />
+                      )}
                     </div>
                     <NavLinks />
                   </nav>
diff --git a/client/src/components/Nav/NavLinks.tsx b/client/src/components/Nav/NavLinks.tsx
index 49d407fb99..b7643dbe63 100644
--- a/client/src/components/Nav/NavLinks.tsx
+++ b/client/src/components/Nav/NavLinks.tsx
@@ -66,12 +66,12 @@ function NavLinks() {
             )}
             <Menu.Button
               className={cn(
-                '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-3 text-sm rounded-md px-3 py-3 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700',
+                'group-ui-open:bg-gray-100 dark:group-ui-open:bg-gray-700 duration-350 mt-text-sm mb-1 flex h-11 w-full items-center gap-2 rounded-lg px-3 py-3 text-sm transition-colors hover:bg-gray-100 dark:hover:bg-gray-700',
                 open ? 'bg-gray-100 dark:bg-gray-700' : '',
               )}
               data-testid="nav-user"
             >
-              <div className="-ml-0.9 -mt-0.8 h-5 w-5 flex-shrink-0">
+              <div className="-ml-0.9 -mt-0.8 h-8 w-8 flex-shrink-0">
                 <div className="relative flex">
                   {!user?.avatar && !user?.username ? (
                     <div
@@ -81,7 +81,7 @@ function NavLinks() {
                         height: '20px',
                         boxShadow: 'rgba(240, 246, 252, 0.1) 0px 0px 0px 1px',
                       }}
-                      className="relative flex h-9 w-9 items-center justify-center rounded-full p-1 text-white"
+                      className="relative flex h-8 w-8 items-center justify-center rounded-full p-1 text-white"
                     >
                       <UserIcon />
                     </div>
@@ -91,7 +91,7 @@ function NavLinks() {
                 </div>
               </div>
               <div
-                className="mt-2 grow overflow-hidden text-ellipsis whitespace-nowrap text-left font-bold text-black dark:text-white"
+                className="mt-2 grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-black dark:text-white"
                 style={{ marginTop: '0', marginLeft: '0' }}
               >
                 {user?.name || localize('com_nav_user')}
diff --git a/client/src/components/Nav/NewChat.tsx b/client/src/components/Nav/NewChat.tsx
index 872e5603f4..bdb16a4a99 100644
--- a/client/src/components/Nav/NewChat.tsx
+++ b/client/src/components/Nav/NewChat.tsx
@@ -38,13 +38,13 @@ export default function NewChat({
   return (
     <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="sticky left-0 right-0 top-0 z-20 bg-gray-50 pt-3.5 dark:bg-gray-750">
           <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"
+              className="group flex h-10 items-center gap-2 rounded-lg px-2 font-medium hover:bg-gray-200 dark:hover:bg-gray-700"
             >
               <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">
diff --git a/client/src/components/Nav/Settings.tsx b/client/src/components/Nav/Settings.tsx
index 765d97816d..83ec09fb22 100644
--- a/client/src/components/Nav/Settings.tsx
+++ b/client/src/components/Nav/Settings.tsx
@@ -15,7 +15,7 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
         className={cn(
-          'shadow-2xl dark:bg-gray-800 dark:text-white md:min-h-[373px] md:w-[680px]',
+          'shadow-2xl md:min-h-[373px] md:w-[680px]',
           isSmallScreen ? 'top-20 -translate-y-0' : '',
         )}
       >
@@ -36,17 +36,17 @@ 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-200 p-1 dark:bg-gray-800/30' : '',
+                isSmallScreen ? 'flex-row rounded-lg bg-gray-200 p-1 dark:bg-gray-700' : '',
               )}
               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-750',
+                  '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-600',
                   isSmallScreen
                     ? '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',
+                  isSmallScreen ? '' : 'dark:bg-gray-700',
                 )}
                 value={SettingsTabValues.GENERAL}
                 style={{ userSelect: 'none' }}
@@ -56,11 +56,11 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
               </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-750',
+                  '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-600',
                   isSmallScreen
                     ? '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',
+                  isSmallScreen ? '' : 'dark:bg-gray-700',
                 )}
                 value={SettingsTabValues.BETA}
                 style={{ userSelect: 'none' }}
@@ -70,11 +70,11 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
               </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-750',
+                  '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-600',
                   isSmallScreen
                     ? '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',
+                  isSmallScreen ? '' : 'dark:bg-gray-700',
                 )}
                 value={SettingsTabValues.DATA}
                 style={{ userSelect: 'none' }}
@@ -84,11 +84,11 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
               </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-750',
+                  '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-600',
                   isSmallScreen
                     ? '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',
+                  isSmallScreen ? '' : 'dark:bg-gray-700',
                 )}
                 value={SettingsTabValues.ACCOUNT}
                 style={{ userSelect: 'none' }}
diff --git a/client/src/components/Nav/SettingsTabs/Account/Avatar.tsx b/client/src/components/Nav/SettingsTabs/Account/Avatar.tsx
index 33263283eb..64ae09d319 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-gray-100 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-600 dark:hover:text-green-500"
         >
           <FileImage className="mr-1 flex w-[22px] items-center stroke-1" />
           <span>{localize('com_nav_change_picture')}</span>
@@ -98,7 +98,7 @@ function Avatar() {
 
       <Dialog open={isDialogOpen} onOpenChange={() => setDialogOpen(false)}>
         <DialogContent
-          className={cn('shadow-2xl dark:bg-gray-800 dark:text-white md:h-[350px] md:w-[450px] ')}
+          className={cn('shadow-2xl dark:bg-gray-700 dark:text-white md:h-[350px] md:w-[450px] ')}
           style={{ borderRadius: '12px' }}
         >
           <DialogHeader>
@@ -123,7 +123,7 @@ function Avatar() {
             )}
             <button
               className={cn(
-                'mt-4 rounded px-4 py-2 text-white hover:bg-green-600 hover:text-gray-200',
+                'mt-4 rounded px-4 py-2 text-white transition-colors hover:bg-green-600 hover:text-gray-200',
                 isUploading ? 'cursor-not-allowed bg-green-600' : 'bg-green-500',
               )}
               onClick={handleUpload}
diff --git a/client/src/components/Plugins/Store/PluginAuthForm.tsx b/client/src/components/Plugins/Store/PluginAuthForm.tsx
index a3d6ae132e..aa8ce21283 100644
--- a/client/src/components/Plugins/Store/PluginAuthForm.tsx
+++ b/client/src/components/Plugins/Store/PluginAuthForm.tsx
@@ -38,7 +38,7 @@ function PluginAuthForm({ plugin, onSubmit, isAssistantTool }: TPluginAuthFormPr
               <div key={`${authField}-${i}`} className="flex w-full flex-col gap-1">
                 <label
                   htmlFor={authField}
-                  className="mb-1 text-left text-sm font-medium text-slate-700/70 dark:text-slate-50/70"
+                  className="mb-1 text-left text-sm font-medium text-gray-700/70 dark:text-gray-50/70"
                 >
                   {config.label}
                 </label>
@@ -59,7 +59,7 @@ function PluginAuthForm({ plugin, onSubmit, isAssistantTool }: TPluginAuthFormPr
                           message: `${config.label} must be at least 10 characters long`,
                         },
                       })}
-                      className="flex h-10 max-h-10 w-full resize-none rounded-md border border-gray-200 bg-transparent px-3 py-2 text-sm text-gray-700 shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:border-slate-400 focus:bg-gray-50 focus:outline-none focus:ring-0 focus:ring-gray-400 focus:ring-opacity-0 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 focus:dark:bg-gray-600 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0"
+                      className="flex h-10 max-h-10 w-full resize-none rounded-md border border-gray-200 bg-transparent px-3 py-2 text-sm text-gray-700 shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:border-gray-400 focus:bg-gray-50 focus:outline-none focus:ring-0 focus:ring-gray-400 focus:ring-opacity-0 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 focus:dark:bg-gray-600 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0"
                     />
                   </HoverCardTrigger>
                   <PluginTooltip content={config.description} position="right" />
diff --git a/client/src/components/Plugins/Store/PluginStoreDialog.tsx b/client/src/components/Plugins/Store/PluginStoreDialog.tsx
index 9ca623f3b0..aa61a4822d 100644
--- a/client/src/components/Plugins/Store/PluginStoreDialog.tsx
+++ b/client/src/components/Plugins/Store/PluginStoreDialog.tsx
@@ -125,9 +125,9 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
       {/* The backdrop, rendered as a fixed sibling to the panel container */}
       <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 p-4">
+      <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-800 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-700 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 p-6 pb-4 dark:border-white/10">
@@ -172,17 +172,17 @@ function PluginStoreDialog({ isOpen, setIsOpen }: TPluginStoreDialogProps) {
           <div className="p-4 sm:p-6 sm:pt-4">
             <div className="mt-4 flex flex-col gap-4">
               <div className="flex items-center">
-                  <div class="relative flex items-center">
-                    <Search className="h-6 w-6 text-gray-500 absolute left-2" />
-                    <input
-                      type="text"
-                      value={searchValue}
-                      onChange={handleSearch}
-                      placeholder={localize('com_nav_plugin_search')}
-                      className="dark:focus:ring-offset-slate-900 rounded-md border border-gray-200 focus:border-slate-400 focus:bg-gray-50 bg-transparent shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:ring-gray-400 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:bg-gray-800 focus: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 flex pl-10 pr-2 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0"
-                    />
-                  </div>
+                <div className="relative flex items-center">
+                  <Search className="absolute left-2 h-6 w-6 text-gray-500" />
+                  <input
+                    type="text"
+                    value={searchValue}
+                    onChange={handleSearch}
+                    placeholder={localize('com_nav_plugin_search')}
+                    className="flex rounded-md border border-gray-200 bg-transparent py-2 pl-10 pr-2 shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:border-gray-400 focus:bg-gray-50 focus:outline-none focus:ring-0 focus:ring-gray-400 focus:ring-opacity-0 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-500 focus:dark:bg-gray-600 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-500 dark:focus:ring-offset-0 dark:focus:ring-offset-gray-900"
+                  />
                 </div>
+              </div>
               <div
                 ref={gridRef}
                 className="grid grid-cols-1 grid-rows-2 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
diff --git a/client/src/components/Plugins/Store/PluginStoreItem.tsx b/client/src/components/Plugins/Store/PluginStoreItem.tsx
index ae8070b43f..c18889f952 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-800">
+      <div className="flex flex-col gap-4 rounded border border-black/10 bg-white p-6 dark:border-gray-500 dark:bg-gray-700">
         <div className="flex gap-4">
           <div className="h-[70px] w-[70px] shrink-0">
             <div className="relative h-full w-full">
@@ -62,7 +62,7 @@ function PluginStoreItem({ plugin, onInstall, onUninstall, isInstalled }: TPlugi
             )}
           </div>
         </div>
-        <div className="line-clamp-3 h-[60px] text-sm text-slate-700/70 dark:text-slate-50/70">
+        <div className="line-clamp-3 h-[60px] text-sm text-gray-700/70 dark:text-gray-50/70">
           {plugin.description}
         </div>
       </div>
diff --git a/client/src/components/SidePanel/Builder/ActionsAuth.tsx b/client/src/components/SidePanel/Builder/ActionsAuth.tsx
index 2c0acb3c93..b52f386109 100644
--- a/client/src/components/SidePanel/Builder/ActionsAuth.tsx
+++ b/client/src/components/SidePanel/Builder/ActionsAuth.tsx
@@ -22,7 +22,7 @@ export default function ActionsAuth({
       aria-describedby="radix-:rf7:"
       aria-labelledby="radix-:rf6:"
       data-state="open"
-      className="left-1/2 col-auto col-start-2 row-auto row-start-2 w-full max-w-md -translate-x-1/2 rounded-xl bg-white pb-0 text-left shadow-xl transition-all dark:bg-gray-900 dark:text-gray-100"
+      className="left-1/2 col-auto col-start-2 row-auto row-start-2 w-full max-w-md -translate-x-1/2 rounded-xl bg-white pb-0 text-left shadow-xl transition-all dark:bg-gray-700 dark:text-gray-100"
       tabIndex={-1}
       style={{ pointerEvents: 'auto' }}
     >
@@ -61,7 +61,7 @@ export default function ActionsAuth({
                   role="radio"
                   value={AuthTypeEnum.None}
                   id=":rf8:"
-                  className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-600 dark:bg-gray-700"
+                  className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-500 dark:bg-gray-500"
                   tabIndex={-1}
                 >
                   <RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
@@ -76,7 +76,7 @@ export default function ActionsAuth({
                   role="radio"
                   value={AuthTypeEnum.ServiceHttp}
                   id=":rfa:"
-                  className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-600 dark:bg-gray-700"
+                  className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-500 dark:bg-gray-500"
                   tabIndex={0}
                 >
                   <RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
@@ -92,7 +92,7 @@ export default function ActionsAuth({
                   disabled={true}
                   value={AuthTypeEnum.OAuth}
                   id=":rfc:"
-                  className="mr-1 flex h-5 w-5 cursor-not-allowed items-center justify-center rounded-full border border-gray-500 bg-gray-300 dark:border-gray-600 dark:bg-gray-900"
+                  className="mr-1 flex h-5 w-5 cursor-not-allowed items-center justify-center rounded-full border border-gray-500 bg-gray-300 dark:border-gray-600 dark:bg-gray-700"
                   tabIndex={-1}
                 >
                   <RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
@@ -135,7 +135,7 @@ const ApiKey = () => {
         placeholder="<HIDDEN>"
         type="password"
         autoComplete="off"
-        className="border-token-border-medium mb-2 h-9 w-full resize-none overflow-y-auto rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-800"
+        className="border-token-border-medium mb-2 h-9 w-full resize-none overflow-y-auto rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-600"
         {...register('api_key', { required: type === AuthTypeEnum.ServiceHttp })}
       />
       <label className="mb-1 block text-sm font-medium">Auth Type</label>
@@ -157,7 +157,7 @@ const ApiKey = () => {
               role="radio"
               value={AuthorizationTypeEnum.Basic}
               id=":rfu:"
-              className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-600 dark:bg-gray-700"
+              className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-500 dark:bg-gray-500"
               tabIndex={-1}
             >
               <RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
@@ -172,7 +172,7 @@ const ApiKey = () => {
               role="radio"
               value={AuthorizationTypeEnum.Bearer}
               id=":rg0:"
-              className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-600 dark:bg-gray-700"
+              className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-500 dark:bg-gray-500"
               tabIndex={-1}
             >
               <RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
@@ -187,7 +187,7 @@ const ApiKey = () => {
               role="radio"
               value={AuthorizationTypeEnum.Custom}
               id=":rg2:"
-              className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-600 dark:bg-gray-700"
+              className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-500 dark:bg-gray-500"
               tabIndex={0}
             >
               <RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
@@ -200,7 +200,7 @@ const ApiKey = () => {
         <div className="mt-2">
           <label className="mb-1 block text-sm font-medium">Custom Header Name</label>
           <input
-            className="border-token-border-medium mb-2 h-9 w-full resize-none overflow-y-auto rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-800"
+            className="border-token-border-medium mb-2 h-9 w-full resize-none overflow-y-auto rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-600"
             placeholder="X-Api-Key"
             {...register('custom_auth_header', {
               required: authorization_type === AuthorizationTypeEnum.Custom,
@@ -267,7 +267,7 @@ const OAuth = () => {
               role="radio"
               value={TokenExchangeMethodEnum.DefaultPost}
               id=":rj1:"
-              className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-600 dark:bg-gray-700"
+              className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-700 dark:bg-gray-700"
               tabIndex={-1}
             >
               <RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
@@ -282,7 +282,7 @@ const OAuth = () => {
               role="radio"
               value={TokenExchangeMethodEnum.BasicAuthHeader}
               id=":rj3:"
-              className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-600 dark:bg-gray-700"
+              className="mr-1 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500 bg-white dark:border-gray-700 dark:bg-gray-700"
               tabIndex={-1}
             >
               <RadioGroup.Indicator className="h-2 w-2 rounded-full bg-gray-950 dark:bg-white"></RadioGroup.Indicator>
diff --git a/client/src/components/SidePanel/Builder/ActionsInput.tsx b/client/src/components/SidePanel/Builder/ActionsInput.tsx
index 607866c6a4..30014aa461 100644
--- a/client/src/components/SidePanel/Builder/ActionsInput.tsx
+++ b/client/src/components/SidePanel/Builder/ActionsInput.tsx
@@ -229,7 +229,7 @@ export default function ActionsInput({
             <label className="text-token-text-primary block font-medium">Privacy policy</label>
           </span>
         </div>
-        <div className="rounded-md border border-gray-300 px-3 py-2 shadow-none focus-within:border-gray-800 focus-within:ring-1 focus-within:ring-gray-800 dark:bg-gray-700 dark:focus-within:border-white dark:focus-within:ring-white">
+        <div className="rounded-md border border-gray-300 px-3 py-2 shadow-none focus-within:border-gray-800 focus-within:ring-1 focus-within:ring-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:focus-within:border-gray-500 dark:focus-within:ring-gray-500">
           <label
             htmlFor="privacyPolicyUrl"
             className="block text-xs font-medium text-gray-900 dark:text-gray-100"
diff --git a/client/src/components/SidePanel/Builder/AssistantSelect.tsx b/client/src/components/SidePanel/Builder/AssistantSelect.tsx
index fabf8d1c28..10e1dbb5e5 100644
--- a/client/src/components/SidePanel/Builder/AssistantSelect.tsx
+++ b/client/src/components/SidePanel/Builder/AssistantSelect.tsx
@@ -166,13 +166,13 @@ 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-gray-900 dark:border-gray-700 dark:last:border"
+      optionsListClass="rounded-lg shadow-lg dark:bg-gray-850 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-gray-900',
+        'mt-1 rounded-md dark:border-gray-700 dark:bg-gray-850',
         '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={() => (
diff --git a/client/src/components/SidePanel/Builder/ContextButton.tsx b/client/src/components/SidePanel/Builder/ContextButton.tsx
index 45a5903cb1..9e6102dd99 100644
--- a/client/src/components/SidePanel/Builder/ContextButton.tsx
+++ b/client/src/components/SidePanel/Builder/ContextButton.tsx
@@ -105,7 +105,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-900 dark:bg-gray-900"
+            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-850"
             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 725cff714d..8201ed0eeb 100644
--- a/client/src/components/SidePanel/Builder/Images.tsx
+++ b/client/src/components/SidePanel/Builder/Images.tsx
@@ -98,7 +98,7 @@ 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-gray-900 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-850 dark:text-white"
         sideOffset={5}
       >
         <div
diff --git a/client/src/components/SidePanel/Files/PanelFileCell.tsx b/client/src/components/SidePanel/Files/PanelFileCell.tsx
index d7e4bac42b..7753452b0b 100644
--- a/client/src/components/SidePanel/Files/PanelFileCell.tsx
+++ b/client/src/components/SidePanel/Files/PanelFileCell.tsx
@@ -77,7 +77,7 @@ export default function PanelFileCell({ row }: { row: Row<TFile> }) {
     return (
       <div
         onClick={handleFileClick}
-        className="flex cursor-pointer gap-2 rounded-md dark:hover:bg-gray-900"
+        className="flex cursor-pointer gap-2 rounded-md dark:hover:bg-gray-700"
       >
         <ImagePreview
           url={file.filepath}
diff --git a/client/src/components/SidePanel/Nav.tsx b/client/src/components/SidePanel/Nav.tsx
index 082c8e5f66..fe626b3a48 100644
--- a/client/src/components/SidePanel/Nav.tsx
+++ b/client/src/components/SidePanel/Nav.tsx
@@ -75,8 +75,8 @@ 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'
                                   : '',
-                                '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',
+                                'hover:bg-gray-50 data-[state=open]:bg-gray-50 data-[state=open]:text-black dark:hover:bg-gray-700 dark:data-[state=open]:bg-gray-700 dark:data-[state=open]:text-white',
+                                'w-full justify-start rounded-md border dark:border-gray-700',
                               )}
                             >
                               <link.icon className="mr-2 h-4 w-4" />
diff --git a/client/src/components/SidePanel/SidePanel.tsx b/client/src/components/SidePanel/SidePanel.tsx
index d122ca5a42..3ebb4d1e50 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 hide-scrollbar border-l border-gray-200 bg-white dark:border-gray-800/50 dark:bg-gray-900',
+              'sidenav hide-scrollbar border-l border-gray-200 bg-white dark:border-gray-800/50 dark:bg-gray-850',
               isCollapsed ? 'min-w-[50px]' : 'min-w-[340px] sm:min-w-[352px]',
               minSize === 0 ? 'min-w-0' : '',
             )}
@@ -180,7 +180,7 @@ 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-gray-900',
+                  'sticky left-0 right-0 top-0 z-[100] flex h-[52px] flex-wrap items-center justify-center bg-white dark:bg-gray-850',
                   isCollapsed ? 'h-[52px]' : 'px-2',
                 )}
               >
diff --git a/client/src/components/SidePanel/Switcher.tsx b/client/src/components/SidePanel/Switcher.tsx
index 584389ec85..5bd2e85a7b 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 text-black hover:bg-gray-50 dark:bg-gray-900 dark:text-white',
+          'bg-white text-black hover:bg-gray-50 dark:bg-gray-850 dark:text-white',
         )}
         aria-label={localize('com_sidepanel_select_assistant')}
       >
diff --git a/client/src/components/Tools/ToolItem.tsx b/client/src/components/Tools/ToolItem.tsx
index faf188d0e6..229a814c01 100644
--- a/client/src/components/Tools/ToolItem.tsx
+++ b/client/src/components/Tools/ToolItem.tsx
@@ -61,7 +61,7 @@ function ToolItem({ tool, onAddTool, onRemoveTool, isInstalled }: ToolItemProps)
           )}
         </div>
       </div>
-      <div className="line-clamp-3 h-[60px] text-sm text-slate-700/70 dark:text-slate-50/70">
+      <div className="line-clamp-3 h-[60px] text-sm text-gray-700/70 dark:text-gray-50/70">
         {tool.description}
       </div>
     </div>
diff --git a/client/src/components/svg/EditIcon.tsx b/client/src/components/svg/EditIcon.tsx
index 084562b273..3884875b4e 100644
--- a/client/src/components/svg/EditIcon.tsx
+++ b/client/src/components/svg/EditIcon.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default function EditIcon() {
   return (
     <svg
diff --git a/client/src/components/svg/index.ts b/client/src/components/svg/index.ts
index b43b0e6e65..80423359fa 100644
--- a/client/src/components/svg/index.ts
+++ b/client/src/components/svg/index.ts
@@ -22,7 +22,6 @@ export { default as OpenIDIcon } from './OpenIDIcon';
 export { default as GithubIcon } from './GithubIcon';
 export { default as DiscordIcon } from './DiscordIcon';
 export { default as AnthropicIcon } from './AnthropicIcon';
-export { default as RenameIcon } from './RenameIcon';
 export { default as SendIcon } from './SendIcon';
 export { default as LinkIcon } from './LinkIcon';
 export { default as DotsIcon } from './DotsIcon';
diff --git a/client/src/components/ui/AlertDialog.tsx b/client/src/components/ui/AlertDialog.tsx
index 89369dbe69..374d755ad8 100644
--- a/client/src/components/ui/AlertDialog.tsx
+++ b/client/src/components/ui/AlertDialog.tsx
@@ -45,7 +45,7 @@ const AlertDialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         'fixed z-50 grid w-full max-w-lg scale-100 gap-4 bg-white p-6 opacity-100 animate-in fade-in-90 slide-in-from-bottom-10 sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0 md:w-full',
-        'dark:bg-slate-900',
+        'dark:bg-gray-900',
         className,
       )}
       {...props}
@@ -73,7 +73,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className = '', ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn('text-lg font-semibold text-slate-900', 'dark:text-slate-50', className)}
+    className={cn('text-lg font-semibold text-gray-900', 'dark:text-gray-50', className)}
     {...props}
   />
 ));
@@ -85,7 +85,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className = '', ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-slate-500', 'dark:text-slate-400', className)}
+    className={cn('text-sm text-gray-500', 'dark:text-gray-400', className)}
     {...props}
   />
 ));
@@ -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-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',
+      'inline-flex h-10 items-center justify-center rounded-md bg-gray-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-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-100 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-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-800 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-gray-200 bg-transparent px-4 py-2 text-sm font-semibold text-gray-900 transition-colors hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-100 dark:hover:bg-gray-800 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900 sm:mt-0',
       className,
     )}
     {...props}
diff --git a/client/src/components/ui/Button.tsx b/client/src/components/ui/Button.tsx
index 72b4e5309b..4a126fc13e 100644
--- a/client/src/components/ui/Button.tsx
+++ b/client/src/components/ui/Button.tsx
@@ -4,11 +4,11 @@ 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 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',
+  'rounded-md inline-flex items-center justify-center text-sm font-medium transition-colors focus:outline-none dark:hover:bg-gray-700 dark:hover:text-gray-100 disabled:opacity-50 disabled:pointer-events-none data-[state=open]:bg-gray-100 dark:data-[state=open]:bg-gray-700',
   {
     variants: {
       variant: {
-        default: 'bg-gray-900 text-white hover:bg-gray-800 dark:bg-gray-50 dark:text-gray-900',
+        default: 'bg-gray-750 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-gray-200 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-100',
diff --git a/client/src/components/ui/Checkbox.tsx b/client/src/components/ui/Checkbox.tsx
index 3209279566..ce6d411b22 100644
--- a/client/src/components/ui/Checkbox.tsx
+++ b/client/src/components/ui/Checkbox.tsx
@@ -10,7 +10,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'peer h-4 w-4 shrink-0 rounded-sm border border-slate-300 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',
+      'peer h-4 w-4 shrink-0 rounded-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-50 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900',
       className,
     )}
     {...props}
diff --git a/client/src/components/ui/Dialog.tsx b/client/src/components/ui/Dialog.tsx
index e859716a64..bb0d3aeb05 100644
--- a/client/src/components/ui/Dialog.tsx
+++ b/client/src/components/ui/Dialog.tsx
@@ -50,7 +50,7 @@ const DialogContent = React.forwardRef<
         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',
+          'dark:bg-gray-700',
           isSmallScreen
             ? 'fixed left-1/2 top-1/2 z-[999] m-auto grid w-11/12 -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-white pb-6'
             : '',
@@ -59,7 +59,7 @@ const DialogContent = React.forwardRef<
         {...props}
       >
         {children}
-        <DialogPrimitive.Close className="absolute right-6 top-[1.6rem] 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">
+        <DialogPrimitive.Close className="absolute right-6 top-[1.6rem] rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900 dark:data-[state=open]:bg-gray-800">
           <X className="h-5 w-5 text-black dark:text-white" />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
@@ -72,7 +72,7 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'flex flex-col space-y-2 border-b border-black/10 dark:border-white/10 p-6 pb-4 text-left',
+      'flex flex-col space-y-2 border-b border-black/10 p-6 pb-4 text-left dark:border-white/10',
       className ?? '',
     )}
     {...props}
@@ -82,10 +82,7 @@ DialogHeader.displayName = 'DialogHeader';
 
 const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      'flex px-6 py-4 flex-row justify-between space-x-2',
-      className ?? '',
-    )}
+    className={cn('flex flex-row justify-between space-x-2 px-6 py-4', className ?? '')}
     {...props}
   />
 );
@@ -97,7 +94,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn('text-lg font-semibold text-slate-900', 'dark:text-slate-50', className ?? '')}
+    className={cn('text-lg font-semibold text-gray-900', 'dark:text-gray-50', className ?? '')}
     {...props}
   />
 ));
@@ -109,7 +106,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-slate-500', 'dark:text-slate-400', className ?? '')}
+    className={cn('text-sm text-gray-500', 'dark:text-gray-400', className ?? '')}
     {...props}
   />
 ));
@@ -122,7 +119,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 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-gray-800 sm:mt-0',
+      'mt-2 inline-flex h-10 items-center justify-center rounded-lg border border-gray-200 bg-transparent px-4 py-2 text-sm font-semibold text-gray-900 transition-colors hover:bg-gray-100 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-100 dark:hover:bg-gray-800 sm:mt-0',
       className ?? '',
     )}
     {...props}
@@ -138,7 +135,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-800 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-gray-200 bg-transparent px-4 py-2 text-sm font-semibold text-gray-900 transition-colors hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-100 dark:hover:bg-gray-800 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900 sm:mt-0',
       className ?? '',
     )}
     {...props}
diff --git a/client/src/components/ui/DialogTemplate.tsx b/client/src/components/ui/DialogTemplate.tsx
index 9c1fd28c9f..5ac7bd61fd 100644
--- a/client/src/components/ui/DialogTemplate.tsx
+++ b/client/src/components/ui/DialogTemplate.tsx
@@ -50,7 +50,7 @@ const DialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDivE
     <DialogContent
       showCloseButton={showCloseButton}
       ref={ref}
-      className={cn('shadow-2xl dark:bg-gray-800', className || '')}
+      className={cn('shadow-2xl dark:bg-gray-700', className || '')}
       onClick={(e) => e.stopPropagation()}
     >
       <DialogHeader className={cn(headerClassName ?? '')}>
@@ -67,7 +67,7 @@ const DialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDivE
       <DialogFooter>
         <div>{leftButtons ? leftButtons : null}</div>
         <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">
+          <DialogClose className="border-gray-100 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600">
             {Cancel}
           </DialogClose>
           {buttons ? buttons : null}
diff --git a/client/src/components/ui/Dropdown.tsx b/client/src/components/ui/Dropdown.tsx
index 3be4feaf3d..b2176fc24e 100644
--- a/client/src/components/ui/Dropdown.tsx
+++ b/client/src/components/ui/Dropdown.tsx
@@ -41,7 +41,7 @@ const Dropdown: FC<DropdownProps> = ({
           <Listbox.Button
             data-testid={testId}
             className={cn(
-              'relative inline-flex items-center justify-between rounded-md border-gray-300 bg-white py-2 pl-3 pr-8 text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700',
+              'relative inline-flex items-center justify-between rounded-md border-gray-300 bg-white py-2 pl-3 pr-8 text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 ',
               'w-auto',
               className,
             )}
@@ -61,13 +61,13 @@ const Dropdown: FC<DropdownProps> = ({
                 stroke="currentColor"
                 className="h-4 w-5 rotate-0 transform text-gray-400 transition-transform duration-300 ease-in-out"
               >
-              <polyline points="6 9 12 15 18 9"></polyline>
+                <polyline points="6 9 12 15 18 9"></polyline>
               </svg>
             </span>
           </Listbox.Button>
           <Listbox.Options
             className={cn(
-              'absolute z-50 mt-1 max-h-[40vh] overflow-auto rounded-md border-gray-300 bg-white text-gray-700 shadow-lg transition-opacity hover:bg-gray-50 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700',
+              'absolute z-50 mt-1 max-h-[40vh] overflow-auto rounded-md border-gray-300 bg-white text-gray-700 shadow-lg transition-opacity hover:bg-gray-50 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600',
               className,
             )}
             style={{ width: width ? `${width}px` : 'auto' }}
@@ -77,7 +77,7 @@ const Dropdown: FC<DropdownProps> = ({
                 key={index}
                 value={typeof item === 'string' ? item : item.value}
                 className={cn(
-                  'relative cursor-pointer select-none border-gray-300 bg-white py-1 pl-3 pr-6 text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700',
+                  'relative cursor-pointer select-none border-gray-300 bg-white py-1 pl-3 pr-6 text-gray-700 hover:bg-gray-50 dark:border-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600',
                 )}
                 style={{ width: width ? `${width}px` : 'auto' }}
                 data-theme={typeof item === 'string' ? item : (item as OptionType).value}
diff --git a/client/src/components/ui/InputNumber.tsx b/client/src/components/ui/InputNumber.tsx
index 74bef9dc8f..7f32a298ec 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 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50',
+        'flex max-h-5 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:border-gray-700 dark:text-gray-50',
         className ?? '',
       )}
       ref={ref}
@@ -33,7 +33,7 @@ InputNumber.displayName = 'Input';
 //   return (
 //     <NumericFormat
 //       className={cn(
-//         'flex h-10 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 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 h-10 w-full rounded-md border border-gray-300 bg-transparent py-2 px-3 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-50 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900',
 //         className
 //       )}
 //       ref={ref}
diff --git a/client/src/components/ui/MultiSearch.tsx b/client/src/components/ui/MultiSearch.tsx
index 86ee74e7c6..d8a762af63 100644
--- a/client/src/components/ui/MultiSearch.tsx
+++ b/client/src/components/ui/MultiSearch.tsx
@@ -21,7 +21,7 @@ export default function MultiSearch({
   );
 
   return (
-    <div className="group sticky left-0 top-0 z-10 flex h-12 items-center gap-2 bg-gradient-to-b from-white from-65% to-transparent px-2 px-3 py-2 text-black transition-colors duration-300 focus:bg-gradient-to-b focus:from-white focus:to-white/50 dark:from-gray-800 dark:to-transparent dark:text-white dark:focus:from-white/10 dark:focus:to-white/20">
+    <div className="group sticky left-0 top-0 z-10 flex h-12 items-center gap-2 bg-gradient-to-b from-white from-65% to-transparent px-2 px-3 py-2 text-black transition-colors duration-300 focus:bg-gradient-to-b focus:from-white focus:to-white/50 dark:from-gray-700 dark:to-transparent dark:text-white dark:focus:from-white/10 dark:focus:to-white/20">
       <Search className="h-4 w-4 text-gray-500 transition-colors duration-300 dark:group-focus-within:text-gray-300 dark:group-hover:text-gray-300" />
       <input
         type="text"
diff --git a/client/src/components/ui/MultiSelectPop.tsx b/client/src/components/ui/MultiSelectPop.tsx
index ae6e06910f..3abf1838f1 100644
--- a/client/src/components/ui/MultiSelectPop.tsx
+++ b/client/src/components/ui/MultiSelectPop.tsx
@@ -49,9 +49,9 @@ function MultiSelectPop({
             <button
               data-testid="select-dropdown-button"
               className={cn(
-                'relative flex flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-white/20 dark:bg-gray-800 dark:bg-gray-800 sm:text-sm',
+                'relative flex flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-gray-700 dark:bg-gray-800 dark:bg-gray-800 sm:text-sm',
                 'pointer-cursor font-normal',
-                'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-black/10 dark:radix-state-open:bg-black/20',
+                'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-gray-700 dark:radix-state-open:bg-gray-700',
               )}
             >
               {' '}
@@ -113,7 +113,7 @@ function MultiSelectPop({
               side="bottom"
               align="center"
               className={cn(
-                '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',
+                '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-700 dark:text-white',
                 hasSearchRender && 'relative',
               )}
             >
diff --git a/client/src/components/ui/SelectDropDown.tsx b/client/src/components/ui/SelectDropDown.tsx
index 4fcddec1d8..033e7ac35a 100644
--- a/client/src/components/ui/SelectDropDown.tsx
+++ b/client/src/components/ui/SelectDropDown.tsx
@@ -74,7 +74,7 @@ function SelectDropDown({
               <Listbox.Button
                 data-testid="select-dropdown-button"
                 className={cn(
-                  'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
+                  'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-gray-600 dark:bg-gray-700 sm:text-sm',
                   className ?? '',
                 )}
               >
@@ -130,7 +130,7 @@ function SelectDropDown({
               >
                 <Listbox.Options
                   className={cn(
-                    '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:border-gray-600 dark:bg-gray-800 dark:ring-white/20 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:border-gray-600 dark:bg-gray-700 dark:ring-white/20 md:w-[100%]',
                     optionsListClass ?? '',
                   )}
                 >
diff --git a/client/src/components/ui/SelectDropDownPop.tsx b/client/src/components/ui/SelectDropDownPop.tsx
index 94a4002bd2..9278faff8e 100644
--- a/client/src/components/ui/SelectDropDownPop.tsx
+++ b/client/src/components/ui/SelectDropDownPop.tsx
@@ -58,8 +58,8 @@ function SelectDropDownPop({
             <button
               data-testid="select-dropdown-button"
               className={cn(
-                'pointer-cursor relative flex flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 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',
+                'pointer-cursor relative flex flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-gray-700 dark:bg-gray-800 sm:text-sm',
+                'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-gray-700 dark:radix-state-open:bg-gray-700',
               )}
             >
               {' '}
@@ -104,7 +104,7 @@ function SelectDropDownPop({
               side="bottom"
               align="start"
               className={cn(
-                '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]',
+                '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-700 dark:text-white lg:max-h-[52vh]',
                 hasSearchRender && 'relative',
               )}
             >
diff --git a/client/src/components/ui/Textarea.tsx b/client/src/components/ui/Textarea.tsx
index b6e45aa569..a738bc8b7c 100644
--- a/client/src/components/ui/Textarea.tsx
+++ b/client/src/components/ui/Textarea.tsx
@@ -11,7 +11,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          'flex h-20 w-full resize-none 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 h-20 w-full resize-none rounded-md border border-gray-300 bg-transparent px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:text-gray-50 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900',
           className,
         )}
         ref={ref}
diff --git a/client/src/style.css b/client/src/style.css
index ee3718f3d4..fbfb83edd3 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -1049,9 +1049,9 @@ button {
 }
 .dark .btn-secondary:hover {
   --tw-bg-opacity: 1;
-  border-color: rgba(68, 68, 68, var(--tw-border-opacity));
+  border-color: rgba(8, 82, 78, var(--tw-border-opacity));
   color: rgba(255, 255, 240, var(--tw-text-opacity));
-  background-color: rgba(47, 47, 47, var(--tw-bg-opacity));
+  background-color: rgba(8, 82, 78, var(--tw-bg-opacity));
 }
 .btn-neutral {
   --tw-bg-opacity: 1;
@@ -1072,12 +1072,12 @@ button {
   --tw-bg-opacity: 1;
   --tw-text-opacity: 1;
   background-color: transparent;
-  border-color: rgba(68, 68, 68, var(--tw-border-opacity));
+  border-color: rgba(66, 66, 66, var(--tw-border-opacity));
   color: rgba(255, 255, 240, var(--tw-text-opacity));
 }
 .dark .btn-neutral:hover {
   --tw-bg-opacity: 1;
-  background-color: rgba(47, 47, 47, var(--tw-bg-opacity));
+  background-color: rgba(66, 66, 66, var(--tw-bg-opacity));
 }
 .btn-small {
   padding: 0.25rem 0.5rem;
@@ -1658,7 +1658,7 @@ button.scroll-convo {
   --gray-300:#cdcdcd;
   --gray-400:#999696;
   --gray-500:#686262;
-  --gray-600:#3d3d3f;
+  --gray-600:#424242;
   --gray-700:#262626;
   --gray-750:#333333;
   --gray-800:#171717;
diff --git a/client/src/utils/index.ts b/client/src/utils/index.ts
index f5570e304c..da6169e7af 100644
--- a/client/src/utils/index.ts
+++ b/client/src/utils/index.ts
@@ -50,10 +50,10 @@ export const removeFocusOutlines =
   'focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0';
 
 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';
+  'transition-colors rounded-md min-w-[75px] border font-normal bg-white hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700 dark:bg-gray-800 text-black dark:text-gray-600 focus:outline-none data-[state=open]:bg-gray-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-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';
+  'rounded-md border border-gray-200 focus:border-gray-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:bg-gray-700 dark:border-gray-600 dark:focus:bg-gray-600 dark:focus:border-gray-600 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:outline-none';
 
 export const optionText =
   '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';
diff --git a/client/tailwind.config.cjs b/client/tailwind.config.cjs
index 222a854ee3..7d6bdb7402 100644
--- a/client/tailwind.config.cjs
+++ b/client/tailwind.config.cjs
@@ -43,11 +43,12 @@ module.exports = {
           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',
+          500: '#595959',
+          600: '#424242',
+          700: '#2f2f2f', // Replacing .dark .dark:bg-gray-700 and .dark .dark:hover:bg-gray-700:hover
+          750: '#171717',
           800: '#212121', // Replacing .dark .dark:bg-gray-800, .bg-gray-800, and .dark .dark:hover:bg-gray-800\/90
+          850: '#171717',
           900: '#0d0d0d', // Replacing .dark .dark:bg-gray-900, .bg-gray-900, and .dark .dark:hover:bg-gray-900:hover
         },
         green: {