diff --git a/client/src/components/Endpoints/ConvoIconURL.tsx b/client/src/components/Endpoints/ConvoIconURL.tsx
index ba28b5e115..d4bdf53447 100644
--- a/client/src/components/Endpoints/ConvoIconURL.tsx
+++ b/client/src/components/Endpoints/ConvoIconURL.tsx
@@ -54,7 +54,7 @@ const ConvoIconURL: React.FC<ConvoIconURLProps> = ({
   }
 
   return (
-    <div className="shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black">
+    <div className="shadow-stroke relative flex h-full items-center justify-center rounded-full bg-surface-primary text-text-primary">
       {Icon && (
         <Icon
           size={41}
diff --git a/client/src/components/Endpoints/MessageEndpointIcon.tsx b/client/src/components/Endpoints/MessageEndpointIcon.tsx
index d3539fd78d..f8ee9f76b0 100644
--- a/client/src/components/Endpoints/MessageEndpointIcon.tsx
+++ b/client/src/components/Endpoints/MessageEndpointIcon.tsx
@@ -81,7 +81,7 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
     ) : (
       <div className="h-6 w-6">
         <div className="shadow-stroke flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
-          <AssistantIcon className="h-2/3 w-2/3 text-gray-400" />
+          <AssistantIcon className="h-2/3 w-2/3 text-text-tertiary" />
         </div>
       </div>
     ),
@@ -110,7 +110,7 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
     ) : (
       <div className="h-6 w-6">
         <div className="shadow-stroke flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
-          <Feather className="h-2/3 w-2/3 text-gray-400" aria-hidden="true" />
+          <Feather className="h-2/3 w-2/3 text-text-tertiary" aria-hidden="true" />
         </div>
       </div>
     ),
@@ -197,7 +197,7 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
     >
       {icon}
       {error === true && (
-        <span className="absolute right-0 top-[20px] -mr-2 flex h-3 w-3 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white">
+        <span className="absolute right-0 top-[20px] -mr-2 flex h-3 w-3 items-center justify-center rounded-full border border-white bg-status-error text-[10px] text-white">
           !
         </span>
       )}
diff --git a/client/src/components/Endpoints/MinimalIcon.tsx b/client/src/components/Endpoints/MinimalIcon.tsx
index 4a85eb09ab..0bc861520e 100644
--- a/client/src/components/Endpoints/MinimalIcon.tsx
+++ b/client/src/components/Endpoints/MinimalIcon.tsx
@@ -77,7 +77,7 @@ const MinimalIcon: React.FC<IconProps> = (props) => {
     >
       {icon}
       {error === true && (
-        <span className="absolute right-0 top-[20px] -mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-text-secondary">
+        <span className="absolute right-0 top-[20px] -mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-white bg-status-error text-[10px] text-text-secondary">
           !
         </span>
       )}
diff --git a/client/src/components/Endpoints/SaveAsPresetDialog.tsx b/client/src/components/Endpoints/SaveAsPresetDialog.tsx
index 6467a4a408..5ca092c064 100644
--- a/client/src/components/Endpoints/SaveAsPresetDialog.tsx
+++ b/client/src/components/Endpoints/SaveAsPresetDialog.tsx
@@ -83,7 +83,7 @@ const SaveAsPresetDialog = ({ open, onOpenChange, preset }: TEditPresetProps) =>
         }
         selection={{
           selectHandler: submitPreset,
-          selectClasses: 'bg-green-500 hover:bg-green-600 dark:hover:bg-green-600 text-white',
+          selectClasses: 'bg-surface-submit hover:bg-surface-submit-hover text-white',
           selectText: localize('com_ui_save'),
         }}
       />
diff --git a/client/src/components/Endpoints/Settings/Advanced.tsx b/client/src/components/Endpoints/Settings/Advanced.tsx
index 504e6cd94d..6ef582941e 100644
--- a/client/src/components/Endpoints/Settings/Advanced.tsx
+++ b/client/src/components/Endpoints/Settings/Advanced.tsx
@@ -137,7 +137,7 @@ export default function Settings({
                   defaultTextProps,
                   cn(
                     optionText,
-                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
+                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
                   ),
                 )}
               />
@@ -178,7 +178,7 @@ export default function Settings({
                   defaultTextProps,
                   cn(
                     optionText,
-                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
+                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
                   ),
                 )}
               />
@@ -220,7 +220,7 @@ export default function Settings({
                   defaultTextProps,
                   cn(
                     optionText,
-                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
+                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
                   ),
                 )}
               />
@@ -262,7 +262,7 @@ export default function Settings({
                   defaultTextProps,
                   cn(
                     optionText,
-                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
+                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
                   ),
                 )}
               />
@@ -303,7 +303,7 @@ export default function Settings({
                 defaultTextProps,
                 optionText,
                 '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',
+                'pointer-events-none max-h-5 w-12 border-0 group-hover/temp:border-border-light',
               )}
             />
           </div>
diff --git a/client/src/components/Endpoints/Settings/Examples.tsx b/client/src/components/Endpoints/Settings/Examples.tsx
index 78b045e141..69a0134120 100644
--- a/client/src/components/Endpoints/Settings/Examples.tsx
+++ b/client/src/components/Endpoints/Settings/Examples.tsx
@@ -78,14 +78,14 @@ function Examples({ readonly, examples, setExample, addExample, removeExample }:
       <div className="flex justify-center">
         <Button
           type="button"
-          className="mr-2 mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-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"
+          className="mr-2 mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-text-primary hover:bg-surface-hover hover:text-text-primary focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:focus:outline-none dark:focus:ring-offset-0"
           onClick={removeExample}
         >
           <Minus className="w-[16px]" aria-hidden="true" />
         </Button>
         <Button
           type="button"
-          className="mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-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"
+          className="mt-1 h-auto items-center justify-center bg-transparent px-3 py-2 text-xs font-medium font-normal text-text-primary hover:bg-surface-hover hover:text-text-primary focus:ring-0 focus:ring-offset-0 dark:bg-transparent dark:focus:outline-none dark:focus:ring-offset-0"
           onClick={addExample}
         >
           <Plus className="w-[16px]" aria-hidden="true" />
diff --git a/client/src/components/Endpoints/Settings/Google.tsx b/client/src/components/Endpoints/Settings/Google.tsx
index caf4e100be..d01ba06598 100644
--- a/client/src/components/Endpoints/Settings/Google.tsx
+++ b/client/src/components/Endpoints/Settings/Google.tsx
@@ -123,7 +123,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
                   defaultTextProps,
                   cn(
                     optionText,
-                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
+                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
                     'w-1/3',
                   ),
                 )}
@@ -158,7 +158,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
                   defaultTextProps,
                   cn(
                     optionText,
-                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
+                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
                   ),
                 )}
               />
@@ -199,7 +199,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
                   defaultTextProps,
                   cn(
                     optionText,
-                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
+                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
                   ),
                 )}
               />
@@ -241,7 +241,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
                   defaultTextProps,
                   cn(
                     optionText,
-                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
+                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
                   ),
                 )}
               />
@@ -286,7 +286,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
                   defaultTextProps,
                   cn(
                     optionText,
-                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
+                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
                   ),
                 )}
               />
diff --git a/client/src/components/Endpoints/Settings/OptionHover.tsx b/client/src/components/Endpoints/Settings/OptionHover.tsx
index 219cdfd6d7..47dea5611e 100644
--- a/client/src/components/Endpoints/Settings/OptionHover.tsx
+++ b/client/src/components/Endpoints/Settings/OptionHover.tsx
@@ -48,7 +48,7 @@ function OptionHover({ endpoint, type, side }: TOptionHoverProps) {
     <HoverCardPortal>
       <HoverCardContent side={side} className="z-[999] w-80">
         <div className="space-y-2">
-          <p className="text-sm text-gray-600 dark:text-gray-300">{localize(text)}</p>
+          <p className="text-sm text-text-secondary">{localize(text)}</p>
         </div>
       </HoverCardContent>
     </HoverCardPortal>
diff --git a/client/src/components/Endpoints/URLIcon.tsx b/client/src/components/Endpoints/URLIcon.tsx
index ddb62aaded..23b6f14711 100644
--- a/client/src/components/Endpoints/URLIcon.tsx
+++ b/client/src/components/Endpoints/URLIcon.tsx
@@ -35,7 +35,7 @@ export const URLIcon = memo(
           </div>
           {imageError && iconURL && (
             <div
-              className="absolute flex items-center justify-center rounded-full bg-red-500"
+              className="absolute flex items-center justify-center rounded-full bg-status-error"
               style={{ width: '14px', height: '14px', top: 0, right: 0 }}
             >
               <AlertCircle size={10} className="text-white" aria-hidden="true" />
diff --git a/client/src/components/Input/ModelSelect/MultiSelectDropDown.tsx b/client/src/components/Input/ModelSelect/MultiSelectDropDown.tsx
index 6a1deee152..c9584a0e94 100644
--- a/client/src/components/Input/ModelSelect/MultiSelectDropDown.tsx
+++ b/client/src/components/Input/ModelSelect/MultiSelectDropDown.tsx
@@ -81,7 +81,7 @@ function MultiSelectDropDown({
             <>
               <ListboxButton
                 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-gray-600 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-surface-secondary py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-gray-600 dark:border-white/20 sm:text-sm',
                   className ?? '',
                 )}
                 id={excludeIds[0]}
@@ -91,7 +91,7 @@ function MultiSelectDropDown({
                 {' '}
                 {showLabel && (
                   <Label
-                    className={cn('block text-xs text-gray-700 dark:text-gray-500', labelClassName)}
+                    className={cn('block text-xs text-text-secondary', labelClassName)}
                     id={excludeIds[1]}
                     data-headlessui-state=""
                   >
@@ -101,12 +101,12 @@ function MultiSelectDropDown({
                 <span className="inline-flex w-full truncate" id={excludeIds[2]}>
                   <span
                     className={cn(
-                      'flex h-6 items-center gap-1 truncate text-sm text-gray-800 dark:text-white',
+                      'flex h-6 items-center gap-1 truncate text-sm text-text-primary',
                       !showLabel ? 'text-xs' : '',
                     )}
                   >
                     {!showLabel && title.length > 0 && (
-                      <span className="text-xs text-gray-700 dark:text-gray-500">{title}:</span>
+                      <span className="text-xs text-text-secondary">{title}:</span>
                     )}
                     <span className="flex h-6 items-center gap-1 truncate">
                       <div className="flex gap-1">
@@ -140,7 +140,7 @@ function MultiSelectDropDown({
                     viewBox="0 0 24 24"
                     strokeLinecap="round"
                     strokeLinejoin="round"
-                    className="h-4 w-4 text-gray-400"
+                    className="h-4 w-4 text-text-tertiary"
                     height="1em"
                     width="1em"
                     xmlns="http://www.w3.org/2000/svg"
@@ -161,7 +161,7 @@ function MultiSelectDropDown({
                 <ListboxOptions
                   ref={menuRef}
                   className={cn(
-                    'absolute z-50 mt-2 max-h-60 w-full overflow-auto rounded bg-white text-base text-xs ring-1 ring-black/10 focus:outline-none dark:bg-gray-800 dark:ring-white/20 dark:last:border-0 md:w-[100%]',
+                    'absolute z-50 mt-2 max-h-60 w-full overflow-auto rounded bg-surface-secondary text-base text-xs ring-1 ring-black/10 focus:outline-none dark:ring-white/20 dark:last:border-0 md:w-[100%]',
                     optionsClassName,
                   )}
                 >
@@ -175,7 +175,7 @@ function MultiSelectDropDown({
                       <ListboxOption
                         key={i}
                         value={option[optionValueKey]}
-                        className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-800 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
+                        className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-text-primary last:border-0 hover:bg-surface-hover dark:border-white/20"
                       >
                         <span className="flex items-center gap-1.5 truncate">
                           {!option.isButton && (
@@ -196,19 +196,19 @@ function MultiSelectDropDown({
                           )}
                           <span
                             className={cn(
-                              'flex h-6 items-center gap-1 text-gray-800 dark:text-gray-200',
+                              'flex h-6 items-center gap-1 text-text-primary',
                               selected ? 'font-semibold' : '',
                             )}
                           >
                             {option.name}
                           </span>
                           {option.isButton && (
-                            <span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-200">
+                            <span className="absolute inset-y-0 right-0 flex items-center pr-3 text-text-primary">
                               <ArrowRight />
                             </span>
                           )}
                           {selected && !option.isButton && (
-                            <span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-200">
+                            <span className="absolute inset-y-0 right-0 flex items-center pr-3 text-text-primary">
                               <CheckMark />
                             </span>
                           )}
diff --git a/client/src/components/Input/ModelSelect/MultiSelectPop.tsx b/client/src/components/Input/ModelSelect/MultiSelectPop.tsx
index 8421c673ae..6732097bd9 100644
--- a/client/src/components/Input/ModelSelect/MultiSelectPop.tsx
+++ b/client/src/components/Input/ModelSelect/MultiSelectPop.tsx
@@ -52,19 +52,19 @@ 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-gray-700 dark:bg-gray-800 sm:text-sm',
+                'relative flex flex-col rounded-md border border-black/10 bg-surface-secondary py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-gray-700 sm:text-sm',
                 'pointer-cursor font-normal',
-                'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-gray-700 dark:radix-state-open:bg-gray-700',
+                'hover:bg-surface-hover radix-state-open:bg-surface-hover',
               )}
             >
               {' '}
               {showLabel && (
-                <label className="block text-xs text-gray-700 dark:text-gray-500">{title}</label>
+                <label className="block text-xs text-text-secondary">{title}</label>
               )}
               <span className="inline-flex" id={excludeIds[2]}>
                 <span
                   className={cn(
-                    'flex h-6 items-center gap-1 text-sm text-gray-800 dark:text-white',
+                    'flex h-6 items-center gap-1 text-sm text-text-primary',
                     !showLabel ? 'text-xs' : '',
                   )}
                 >
@@ -96,7 +96,7 @@ function MultiSelectPop({
                   viewBox="0 0 24 24"
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  className="h-4 w-4 text-gray-400"
+                  className="h-4 w-4 text-text-tertiary"
                   height="1em"
                   width="1em"
                   xmlns="http://www.w3.org/2000/svg"
@@ -112,7 +112,7 @@ function MultiSelectPop({
               side="bottom"
               align="center"
               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-700 dark:text-white',
+                'mt-2 max-h-[52vh] min-w-full overflow-hidden overflow-y-auto rounded-lg border border-border-light bg-surface-secondary shadow-lg',
                 hasSearchRender && 'relative',
               )}
             >
diff --git a/client/src/components/Input/ModelSelect/SelectDropDownPop.tsx b/client/src/components/Input/ModelSelect/SelectDropDownPop.tsx
index fda36c67db..b1de0dd084 100644
--- a/client/src/components/Input/ModelSelect/SelectDropDownPop.tsx
+++ b/client/src/components/Input/ModelSelect/SelectDropDownPop.tsx
@@ -68,8 +68,8 @@ function SelectDropDownPop({
             <button
               data-testid="select-dropdown-button"
               className={cn(
-                'pointer-cursor relative flex flex-col rounded-lg border border-black/10 bg-white py-2 pl-3 pr-10 text-left 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',
+                'pointer-cursor relative flex flex-col rounded-lg border border-black/10 bg-surface-secondary py-2 pl-3 pr-10 text-left focus:ring-0 focus:ring-offset-0 dark:border-gray-700 sm:text-sm',
+                'hover:bg-surface-hover radix-state-open:bg-surface-hover',
                 'min-w-[200px] max-w-[215px] sm:min-w-full sm:max-w-full',
               )}
               aria-label={`Select ${title}`}
@@ -77,7 +77,7 @@ function SelectDropDownPop({
             >
               {' '}
               {showLabel && (
-                <label className="block text-xs text-gray-700 dark:text-gray-500">{title}</label>
+                <label className="block text-xs text-text-secondary">{title}</label>
               )}
               <span className="inline-flex w-full">
                 <span
@@ -98,7 +98,7 @@ function SelectDropDownPop({
                   viewBox="0 0 24 24"
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  className="h-4 w-4 text-gray-400"
+                  className="h-4 w-4 text-text-tertiary"
                   height="1em"
                   width="1em"
                   xmlns="http://www.w3.org/2000/svg"
@@ -114,7 +114,7 @@ function SelectDropDownPop({
               side="bottom"
               align="start"
               className={cn(
-                'z-50 mr-3 mt-2 max-h-[52vh] w-full max-w-[85vw] 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 sm:max-w-full lg:max-h-[52vh]',
+                'z-50 mr-3 mt-2 max-h-[52vh] w-full max-w-[85vw] overflow-hidden overflow-y-auto rounded-lg border border-border-light bg-surface-secondary shadow-lg sm:max-w-full lg:max-h-[52vh]',
                 hasSearchRender && 'relative',
               )}
             >
diff --git a/client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx b/client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx
index 8735333da6..02e8144ab6 100644
--- a/client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx
+++ b/client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx
@@ -373,7 +373,7 @@ const SetKeyDialog = ({
           </OGDialogTitle>
         </OGDialogHeader>
         <div className="grid w-full items-center gap-2 py-4">
-          <small className="text-red-600">
+          <small className="text-text-destructive">
             {expiryTime === 'never'
               ? localize('com_endpoint_config_key_never_expires')
               : `${localize('com_endpoint_config_key_encryption')} ${new Date(
diff --git a/client/src/components/Nav/Bookmarks/BookmarkNav.tsx b/client/src/components/Nav/Bookmarks/BookmarkNav.tsx
index 16a64bb5e0..9b6bd28ebe 100644
--- a/client/src/components/Nav/Bookmarks/BookmarkNav.tsx
+++ b/client/src/components/Nav/Bookmarks/BookmarkNav.tsx
@@ -110,7 +110,7 @@ const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags }: BookmarkNavProps)
                 'flex items-center justify-center',
                 'size-9 border-none text-text-primary hover:bg-accent hover:text-accent-foreground',
                 'rounded-lg border-none p-2 hover:bg-surface-active-alt',
-                'outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-black dark:focus-visible:ring-white',
+                'outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring-primary',
                 isMenuOpen ? 'bg-surface-hover' : '',
               )}
               data-testid="bookmark-menu"
diff --git a/client/src/components/Nav/ExportConversation/ExportModal.tsx b/client/src/components/Nav/ExportConversation/ExportModal.tsx
index a140251568..1f900893b7 100644
--- a/client/src/components/Nav/ExportConversation/ExportModal.tsx
+++ b/client/src/components/Nav/ExportConversation/ExportModal.tsx
@@ -129,7 +129,7 @@ export default function ExportModal({
                     <label
                       id="includeOptions-label"
                       htmlFor="includeOptions"
-                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
+                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                     >
                       {exportOptionsSupport
                         ? localize('com_nav_export_include_endpoint_options')
@@ -153,7 +153,7 @@ export default function ExportModal({
                   <label
                     id="exportBranches-label"
                     htmlFor="exportBranches"
-                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
+                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                   >
                     {exportBranchesSupport
                       ? localize('com_nav_export_all_message_branches')
@@ -176,7 +176,7 @@ export default function ExportModal({
                     <label
                       id="recursive-label"
                       htmlFor="recursive"
-                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
+                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                     >
                       {localize('com_nav_export_recursive')}
                     </label>
diff --git a/client/src/components/Nav/Favorites/FavoriteItem.tsx b/client/src/components/Nav/Favorites/FavoriteItem.tsx
index f373d26e93..43c2bc452c 100644
--- a/client/src/components/Nav/Favorites/FavoriteItem.tsx
+++ b/client/src/components/Nav/Favorites/FavoriteItem.tsx
@@ -135,7 +135,7 @@ export default function FavoriteItem(props: FavoriteItemProps) {
       tabIndex={0}
       aria-label={ariaLabel}
       className={cn(
-        'group relative flex w-full cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm text-text-primary outline-none hover:bg-surface-active-alt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-black dark:focus-visible:ring-white',
+        'group relative flex w-full cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm text-text-primary outline-none hover:bg-surface-active-alt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring-primary',
         isPopoverActive ? 'bg-surface-active-alt' : '',
       )}
       onClick={handleClick}
diff --git a/client/src/components/Nav/Favorites/FavoritesList.tsx b/client/src/components/Nav/Favorites/FavoritesList.tsx
index d36fb2de71..9a037256e7 100644
--- a/client/src/components/Nav/Favorites/FavoritesList.tsx
+++ b/client/src/components/Nav/Favorites/FavoritesList.tsx
@@ -378,7 +378,7 @@ export default function FavoritesList({
                 role="button"
                 tabIndex={0}
                 aria-label={localize('com_agents_marketplace')}
-                className="group relative flex w-full cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm text-text-primary outline-none hover:bg-surface-active-alt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-black dark:focus-visible:ring-white"
+                className="group relative flex w-full cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm text-text-primary outline-none hover:bg-surface-active-alt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring-primary"
                 onClick={handleAgentMarketplace}
                 onKeyDown={(e) => {
                   if (e.key === 'Enter' || e.key === ' ') {
diff --git a/client/src/components/Nav/Settings/BillingControls.tsx b/client/src/components/Nav/Settings/BillingControls.tsx
index 91c835d907..0a177c9933 100644
--- a/client/src/components/Nav/Settings/BillingControls.tsx
+++ b/client/src/components/Nav/Settings/BillingControls.tsx
@@ -46,7 +46,9 @@ export function AutoRefill() {
 
   if (!hasValidRefillSettings) {
     return (
-      <div className="text-sm text-red-500">{localize('com_nav_balance_auto_refill_error')}</div>
+      <div className="text-sm text-text-destructive">
+        {localize('com_nav_balance_auto_refill_error')}
+      </div>
     );
   }
 
diff --git a/client/src/components/Nav/Settings/Section.tsx b/client/src/components/Nav/Settings/Section.tsx
index 49c44db632..192d5396ef 100644
--- a/client/src/components/Nav/Settings/Section.tsx
+++ b/client/src/components/Nav/Settings/Section.tsx
@@ -13,7 +13,7 @@ export default function Section({ heading, danger, children }: SectionProps) {
       <h3
         className={cn(
           'mb-2 px-1 text-xs font-semibold uppercase tracking-wide',
-          danger ? 'text-red-500' : 'text-text-secondary',
+          danger ? 'text-text-destructive' : 'text-text-secondary',
         )}
       >
         {heading}
diff --git a/client/src/components/Nav/SettingsTabs/Account/Avatar.tsx b/client/src/components/Nav/SettingsTabs/Account/Avatar.tsx
index 9bd9069bd0..93a92fe6ca 100644
--- a/client/src/components/Nav/SettingsTabs/Account/Avatar.tsx
+++ b/client/src/components/Nav/SettingsTabs/Account/Avatar.tsx
@@ -187,8 +187,8 @@ function Avatar() {
             <>
               <div
                 className={cn(
-                  'relative overflow-hidden rounded-full ring-4 ring-gray-200 transition-all dark:ring-gray-700',
-                  isDragging && 'cursor-move ring-blue-500 dark:ring-blue-400',
+                  'relative overflow-hidden rounded-full ring-4 ring-border-light transition-all',
+                  isDragging && 'cursor-move ring-ring-primary',
                 )}
                 onMouseDown={() => setIsDragging(true)}
                 onMouseUp={() => setIsDragging(false)}
@@ -286,7 +286,7 @@ function Avatar() {
                 </div>
 
                 {/* Helper Text */}
-                <p className="text-center text-xs text-gray-500 dark:text-gray-400">
+                <p className="text-center text-xs text-text-tertiary">
                   {localize('com_ui_editor_instructions')}
                 </p>
               </div>
@@ -320,7 +320,7 @@ function Avatar() {
             </>
           ) : (
             <div
-              className="flex h-72 w-full flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-transparent transition-colors hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500"
+              className="flex h-72 w-full flex-col items-center justify-center rounded-lg border-2 border-dashed border-border-medium bg-transparent transition-colors hover:border-border-heavy"
               onDrop={handleDrop}
               onDragOver={handleDragOver}
               role="button"
@@ -334,7 +334,7 @@ function Avatar() {
               }}
               aria-label={localize('com_ui_upload_avatar_label')}
             >
-              <FileImage className="mb-4 size-16 text-gray-400" />
+              <FileImage className="mb-4 size-16 text-text-tertiary" />
               <p className="mb-2 text-center text-sm font-medium text-text-primary">
                 {localize('com_ui_drag_drop')}
               </p>
diff --git a/client/src/components/Nav/SettingsTabs/Account/BackupCodesItem.tsx b/client/src/components/Nav/SettingsTabs/Account/BackupCodesItem.tsx
index e66cb7b08a..296be2ed01 100644
--- a/client/src/components/Nav/SettingsTabs/Account/BackupCodesItem.tsx
+++ b/client/src/components/Nav/SettingsTabs/Account/BackupCodesItem.tsx
@@ -165,8 +165,8 @@ const BackupCodesItem: React.FC = () => {
                               <span
                                 className={`rounded-full px-3 py-1 text-sm font-medium ${
                                   isUsed
-                                    ? 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
-                                    : 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
+                                    ? 'bg-status-error-subtle text-status-error'
+                                    : 'bg-status-success-subtle text-status-success'
                                 }`}
                               >
                                 {isUsed ? localize('com_ui_used') : localize('com_ui_not_used')}
diff --git a/client/src/components/Nav/SettingsTabs/Account/DeleteAccount.tsx b/client/src/components/Nav/SettingsTabs/Account/DeleteAccount.tsx
index ee63ac9f0e..e1e5d19d19 100644
--- a/client/src/components/Nav/SettingsTabs/Account/DeleteAccount.tsx
+++ b/client/src/components/Nav/SettingsTabs/Account/DeleteAccount.tsx
@@ -83,8 +83,8 @@ const DeleteAccount = ({ disabled = false }: { title?: string; disabled?: boolea
               {localize('com_nav_delete_account_confirm')}
             </OGDialogTitle>
           </OGDialogHeader>
-          <div className="mb-8 text-sm text-black dark:text-white">
-            <ul className="font-semibold text-amber-600">
+          <div className="mb-8 text-sm text-text-primary">
+            <ul className="font-semibold text-text-warning">
               <li>{localize('com_nav_delete_warning')}</li>
               <li>{localize('com_nav_delete_data_info')}</li>
             </ul>
@@ -166,7 +166,7 @@ const renderInput = (
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void,
 ) => (
   <div className="mb-4">
-    <label className="mb-1 block text-sm font-medium text-black dark:text-white" htmlFor={id}>
+    <label className="mb-1 block text-sm font-medium text-text-primary" htmlFor={id}>
       {label}
     </label>
     <Input id={id} onChange={onChange} placeholder={value} />
diff --git a/client/src/components/Nav/SettingsTabs/ApiKeys/Create.tsx b/client/src/components/Nav/SettingsTabs/ApiKeys/Create.tsx
index 20b8f4f479..c233f33957 100644
--- a/client/src/components/Nav/SettingsTabs/ApiKeys/Create.tsx
+++ b/client/src/components/Nav/SettingsTabs/ApiKeys/Create.tsx
@@ -66,7 +66,7 @@ export default function Create({ onCreated, onCancel }: CreateProps) {
           <p
             id="api-key-name-error"
             role="alert"
-            className="text-xs text-red-500 dark:text-red-400"
+            className="text-xs text-text-destructive"
           >
             {localize('com_ui_api_key_name_required')}
           </p>
diff --git a/client/src/components/Nav/SettingsTabs/ApiKeys/Reveal.tsx b/client/src/components/Nav/SettingsTabs/ApiKeys/Reveal.tsx
index f4e15cd03f..9352e7252a 100644
--- a/client/src/components/Nav/SettingsTabs/ApiKeys/Reveal.tsx
+++ b/client/src/components/Nav/SettingsTabs/ApiKeys/Reveal.tsx
@@ -19,10 +19,10 @@ export default function Reveal({ createdKey, onDone }: RevealProps) {
     <div className="min-w-0 space-y-4">
       <div className="flex gap-2.5 rounded-lg border border-amber-500/20 bg-amber-500/10 p-3">
         <TriangleAlert
-          className="mt-0.5 h-4 w-4 shrink-0 text-amber-600 dark:text-amber-500"
+          className="mt-0.5 h-4 w-4 shrink-0 text-text-warning"
           aria-hidden="true"
         />
-        <p className="text-sm text-amber-700 dark:text-amber-300">
+        <p className="text-sm text-text-warning">
           {localize('com_ui_api_key_warning')}
         </p>
       </div>
diff --git a/client/src/components/Nav/SettingsTabs/Balance/AutoRefillSettings.tsx b/client/src/components/Nav/SettingsTabs/Balance/AutoRefillSettings.tsx
index 71a419ea86..de615b5da8 100644
--- a/client/src/components/Nav/SettingsTabs/Balance/AutoRefillSettings.tsx
+++ b/client/src/components/Nav/SettingsTabs/Balance/AutoRefillSettings.tsx
@@ -84,7 +84,7 @@ const AutoRefillSettings: React.FC<AutoRefillSettingsProps> = ({
           <InfoHoverCard side={ESide.Bottom} text={localize('com_nav_balance_next_refill_info')} />
         </div>
 
-        <span className="text-sm font-medium text-gray-800 dark:text-gray-200" role="note">
+        <span className="text-sm font-medium text-text-primary" role="note">
           {refillEligibilityDate ? refillEligibilityDate.toLocaleString() : '-'}
         </span>
       </div>
diff --git a/client/src/components/Nav/SettingsTabs/Balance/TokenCreditsItem.tsx b/client/src/components/Nav/SettingsTabs/Balance/TokenCreditsItem.tsx
index 3766c988a4..9892ba108f 100644
--- a/client/src/components/Nav/SettingsTabs/Balance/TokenCreditsItem.tsx
+++ b/client/src/components/Nav/SettingsTabs/Balance/TokenCreditsItem.tsx
@@ -18,7 +18,7 @@ const TokenCreditsItem: React.FC<TokenCreditsItemProps> = ({ tokenCredits }) =>
       </div>
 
       {/* Right Section: tokenCredits Value */}
-      <span className="text-sm font-medium text-gray-800 dark:text-gray-200" role="note">
+      <span className="text-sm font-medium text-text-primary" role="note">
         {tokenCredits !== undefined ? tokenCredits.toFixed(2) : '0.00'}
       </span>
     </div>
diff --git a/client/src/components/Nav/SettingsTabs/Data/SharedLinks.tsx b/client/src/components/Nav/SettingsTabs/Data/SharedLinks.tsx
index b8b347ba91..33cc7cd8fb 100644
--- a/client/src/components/Nav/SettingsTabs/Data/SharedLinks.tsx
+++ b/client/src/components/Nav/SettingsTabs/Data/SharedLinks.tsx
@@ -371,7 +371,7 @@ export default function SharedLinks() {
           }
           selection={{
             selectHandler: confirmDelete,
-            selectClasses: `bg-red-700 dark:bg-red-600 hover:bg-red-800 dark:hover:bg-red-800 text-white ${
+            selectClasses: `bg-surface-destructive hover:bg-surface-destructive-hover text-white ${
               deleteMutation.isLoading ? 'cursor-not-allowed opacity-80' : ''
             }`,
             selectText: deleteMutation.isLoading ? <Spinner /> : localize('com_ui_delete'),
diff --git a/client/src/components/Nav/SettingsTabs/Speech/STT/AutoSendTextSelector.tsx b/client/src/components/Nav/SettingsTabs/Speech/STT/AutoSendTextSelector.tsx
index 77565acb7f..2913e021a5 100644
--- a/client/src/components/Nav/SettingsTabs/Speech/STT/AutoSendTextSelector.tsx
+++ b/client/src/components/Nav/SettingsTabs/Speech/STT/AutoSendTextSelector.tsx
@@ -103,7 +103,7 @@ export default function AutoSendTextSelector() {
                 defaultTextProps,
                 cn(
                   optionText,
-                  'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
+                  'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
                 ),
               )}
             />
diff --git a/client/src/components/Nav/SettingsTabs/Speech/STT/DecibelSelector.tsx b/client/src/components/Nav/SettingsTabs/Speech/STT/DecibelSelector.tsx
index b311355108..aab70e232e 100755
--- a/client/src/components/Nav/SettingsTabs/Speech/STT/DecibelSelector.tsx
+++ b/client/src/components/Nav/SettingsTabs/Speech/STT/DecibelSelector.tsx
@@ -43,7 +43,7 @@ export default function DecibelSelector() {
             defaultTextProps,
             cn(
               optionText,
-              'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
+              'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
             ),
           )}
         />
diff --git a/client/src/components/Nav/SettingsTabs/Speech/TTS/PlaybackRate.tsx b/client/src/components/Nav/SettingsTabs/Speech/TTS/PlaybackRate.tsx
index fee956e2f2..6edd454514 100755
--- a/client/src/components/Nav/SettingsTabs/Speech/TTS/PlaybackRate.tsx
+++ b/client/src/components/Nav/SettingsTabs/Speech/TTS/PlaybackRate.tsx
@@ -43,7 +43,7 @@ export default function DecibelSelector() {
             defaultTextProps,
             cn(
               optionText,
-              'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
+              'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-border-light',
             ),
           )}
         />
diff --git a/client/src/components/Prompts/display/PromptDetailHeader.tsx b/client/src/components/Prompts/display/PromptDetailHeader.tsx
index d63e8536ca..7bb0fb8e52 100644
--- a/client/src/components/Prompts/display/PromptDetailHeader.tsx
+++ b/client/src/components/Prompts/display/PromptDetailHeader.tsx
@@ -36,7 +36,7 @@ const PromptDetailHeader = ({ group }: PromptDetailHeaderProps) => {
               side="top"
               render={
                 <EarthIcon
-                  className="h-5 w-5 shrink-0 text-green-400"
+                  className="h-5 w-5 shrink-0 text-accent-primary"
                   aria-label={localize('com_ui_sr_global_prompt')}
                 />
               }
diff --git a/client/src/components/Prompts/fields/PromptName.tsx b/client/src/components/Prompts/fields/PromptName.tsx
index 57b37d4a5e..aa8fdaccba 100644
--- a/client/src/components/Prompts/fields/PromptName.tsx
+++ b/client/src/components/Prompts/fields/PromptName.tsx
@@ -135,13 +135,13 @@ const PromptName: React.FC<Props> = ({ name, isLoading = false, isError = false,
         )}
         {saveStatus === 'saved' && (
           <Check
-            className="size-4 text-green-500 transition-opacity duration-300"
+            className="size-4 text-status-success transition-opacity duration-300"
             aria-label={localize('com_ui_saved')}
           />
         )}
         {saveStatus === 'error' && (
           <X
-            className="size-4 text-red-500 transition-opacity duration-300"
+            className="size-4 text-text-destructive transition-opacity duration-300"
             aria-label={localize('com_ui_error')}
           />
         )}
diff --git a/client/src/components/Prompts/forms/CreatePromptForm.tsx b/client/src/components/Prompts/forms/CreatePromptForm.tsx
index 7ce4954d1f..8231aadf57 100644
--- a/client/src/components/Prompts/forms/CreatePromptForm.tsx
+++ b/client/src/components/Prompts/forms/CreatePromptForm.tsx
@@ -147,7 +147,7 @@ const CreatePromptForm = ({
                   </label>
                   <div
                     className={cn(
-                      'mt-1 w-56 text-sm text-red-500',
+                      'mt-1 w-56 text-sm text-text-destructive',
                       errors.name ? 'visible h-auto' : 'invisible h-0',
                     )}
                   >
@@ -195,7 +195,7 @@ const CreatePromptForm = ({
                     />
                     <div
                       className={cn(
-                        'mt-1 text-sm text-red-500',
+                        'mt-1 text-sm text-text-destructive',
                         errors.prompt ? 'visible h-auto' : 'invisible h-0',
                       )}
                     >
diff --git a/client/src/components/Prompts/lists/ChatGroupItem.tsx b/client/src/components/Prompts/lists/ChatGroupItem.tsx
index bc8b2d50e7..2b05964e03 100644
--- a/client/src/components/Prompts/lists/ChatGroupItem.tsx
+++ b/client/src/components/Prompts/lists/ChatGroupItem.tsx
@@ -187,7 +187,7 @@ function ChatGroupItem({
                       aria-label={localize('com_ui_sr_global_prompt')}
                       className="flex shrink-0 items-center"
                     >
-                      <EarthIcon className="size-3.5 text-green-400" aria-hidden="true" />
+                      <EarthIcon className="size-3.5 text-accent-primary" aria-hidden="true" />
                     </span>
                   }
                 />
diff --git a/client/src/style.css b/client/src/style.css
index e72effbe38..8dafa0008e 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -89,6 +89,8 @@ html {
   --link: var(--blue-600);
   --link-hover: var(--blue-700);
   --link-visited: #9333ea;
+  --accent-primary: #126e6b;
+  --accent-primary-hover: #0a4f53;
   --ring-primary: var(--gray-500);
   --header-primary: var(--white);
   --header-hover: var(--gray-50);
@@ -170,6 +172,8 @@ html {
   --link: var(--blue-400);
   --link-hover: var(--blue-300);
   --link-visited: #c084fc;
+  --accent-primary: #41a79d;
+  --accent-primary-hover: #6dc8b9;
   --header-primary: var(--gray-700);
   --header-hover: var(--gray-600);
   --header-button-hover: var(--gray-700);
diff --git a/packages/client/src/theme/utils/createTailwindColors.js b/packages/client/src/theme/utils/createTailwindColors.js
index 6ed986e5f6..93650c6459 100644
--- a/packages/client/src/theme/utils/createTailwindColors.js
+++ b/packages/client/src/theme/utils/createTailwindColors.js
@@ -73,6 +73,9 @@ function createTailwindColors() {
     'link-hover': cssVar('--link-hover'),
     'link-visited': cssVar('--link-visited'),
 
+    'accent-primary': cssVar('--accent-primary'),
+    'accent-primary-hover': cssVar('--accent-primary-hover'),
+
     'ring-primary': cssVar('--ring-primary'),
 
     'header-primary': cssVar('--header-primary'),