diff --git a/frontend/src/PageNotFound.tsx b/frontend/src/PageNotFound.tsx
index 5d57578e..6fd7580b 100644
--- a/frontend/src/PageNotFound.tsx
+++ b/frontend/src/PageNotFound.tsx
@@ -6,7 +6,7 @@ export default function PageNotFound() {
 
   return (
     <div className="bg-background grid min-h-screen">
-      <p className="text-foreground mx-auto my-auto mt-20 flex w-full max-w-6xl flex-col place-items-center gap-6 rounded-3xl bg-gray-100 p-6 lg:p-10 xl:p-16 dark:text-gray-100">
+      <p className="text-foreground mx-auto my-auto mt-20 flex w-full max-w-6xl flex-col place-items-center gap-6 rounded-3xl bg-gray-100 p-6 lg:p-10 xl:p-16 dark:bg-card">
         <h1>{t('pageNotFound.title')}</h1>
         <p>{t('pageNotFound.message')}</p>
         <button className="pointer-cursor bg-blue-1000 hover:bg-blue-3000 mr-4 flex cursor-pointer items-center justify-center rounded-full px-4 py-2 text-white transition-colors duration-100">
diff --git a/frontend/src/agents/AgentCard.tsx b/frontend/src/agents/AgentCard.tsx
index d4c7c93d..fe5bf830 100644
--- a/frontend/src/agents/AgentCard.tsx
+++ b/frontend/src/agents/AgentCard.tsx
@@ -283,7 +283,7 @@ export default function AgentCard({
             className="h-7 w-7 rounded-full object-contain"
           />
           {agent.status === 'draft' && (
-            <p className="text-xs text-black opacity-50">{`(Draft)`}</p>
+            <p className="text-xs text-foreground opacity-50">{`(Draft)`}</p>
           )}
         </div>
         <div className="mt-2">
diff --git a/frontend/src/agents/workflow/WorkflowBuilder.tsx b/frontend/src/agents/workflow/WorkflowBuilder.tsx
index eb012e8e..b87fadee 100644
--- a/frontend/src/agents/workflow/WorkflowBuilder.tsx
+++ b/frontend/src/agents/workflow/WorkflowBuilder.tsx
@@ -1423,12 +1423,12 @@ function WorkflowBuilderInner() {
                         },
                         {
                           text: ' or drag and drop',
-                          colorClass: 'text-gray-500',
+                          colorClass: 'text-muted-foreground',
                         },
                       ]}
                       className="border-border rounded-lg border-2 border-dashed p-3 text-center transition-colors"
                     />
-                    <p className="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
+                    <p className="mt-1 text-[11px] text-muted-foreground">
                       Image updates are included the next time you save.
                     </p>
                   </div>
@@ -1608,10 +1608,10 @@ function WorkflowBuilderInner() {
                     <Database size={18} />
                   </div>
                   <div className="flex flex-col">
-                    <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
+                    <span className="text-sm font-medium text-foreground">
                       Set State
                     </span>
-                    <span className="text-[10px] text-gray-400">
+                    <span className="text-[10px] text-muted-foreground">
                       Modify workflow variables
                     </span>
                   </div>
@@ -1625,10 +1625,10 @@ function WorkflowBuilderInner() {
                     <GitBranch size={18} />
                   </div>
                   <div className="flex flex-col">
-                    <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
+                    <span className="text-sm font-medium text-foreground">
                       If / Else
                     </span>
-                    <span className="text-[10px] text-gray-400">
+                    <span className="text-[10px] text-muted-foreground">
                       Conditional branching
                     </span>
                   </div>
@@ -2041,7 +2041,7 @@ function WorkflowBuilderInner() {
                                         rows={2}
                                         placeholder="input.foo + 1"
                                       />
-                                      <p className="mb-3 text-[10px] text-gray-400">
+                                      <p className="mb-3 text-[10px] text-muted-foreground">
                                         Use Common Expression Language to create
                                         a custom expression.{' '}
                                         <a
@@ -2376,7 +2376,7 @@ function WorkflowBuilderInner() {
                                             rows={2}
                                             placeholder="Enter condition, e.g. input == 5"
                                           />
-                                          <p className="mt-1 text-[10px] text-gray-400">
+                                          <p className="mt-1 text-[10px] text-muted-foreground">
                                             Use Common Expression Language to
                                             create a custom expression.{' '}
                                             <a
diff --git a/frontend/src/agents/workflow/components/MobileBlocker.tsx b/frontend/src/agents/workflow/components/MobileBlocker.tsx
index 7ccbb00d..a8880482 100644
--- a/frontend/src/agents/workflow/components/MobileBlocker.tsx
+++ b/frontend/src/agents/workflow/components/MobileBlocker.tsx
@@ -6,10 +6,10 @@ export default function MobileBlocker() {
       <div className="bg-primary/10 dark:bg-primary/20 mb-6 flex h-20 w-20 items-center justify-center rounded-2xl">
         <Monitor className="text-primary h-10 w-10" />
       </div>
-      <h2 className="mb-2 text-xl font-bold text-gray-900 dark:text-white">
+      <h2 className="mb-2 text-xl font-bold text-foreground">
         Desktop Required
       </h2>
-      <p className="max-w-sm text-sm leading-relaxed text-gray-500">
+      <p className="max-w-sm text-sm leading-relaxed text-muted-foreground">
         The Workflow Builder requires a larger screen for the best experience.
         Please open this page on a desktop or laptop computer.
       </p>
diff --git a/frontend/src/components/Chunks.tsx b/frontend/src/components/Chunks.tsx
index 340f8bba..701416a8 100644
--- a/frontend/src/components/Chunks.tsx
+++ b/frontend/src/components/Chunks.tsx
@@ -547,7 +547,7 @@ const Chunks: React.FC<ChunksProps> = ({
             <>
               <div className="mb-3 flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">
                 <div className="border-border dark:border-border flex h-[38px] w-full flex-1 items-center overflow-hidden rounded-md border">
-                  <div className="flex h-full items-center px-4 font-medium whitespace-nowrap text-gray-700">
+                  <div className="flex h-full items-center px-4 font-medium whitespace-nowrap text-gray-700 dark:text-foreground">
                     {totalChunks > 999999
                       ? `${(totalChunks / 1000000).toFixed(2)}M`
                       : totalChunks > 999
@@ -606,7 +606,7 @@ const Chunks: React.FC<ChunksProps> = ({
                       >
                         <div className="w-full">
                           <div className="border-border bg-muted dark:border-border dark:bg-card flex w-full items-center justify-between border-b px-4 py-3">
-                            <div className="text-sm text-[#59636E]">
+                            <div className="text-sm text-[#59636E] dark:text-muted-foreground">
                               {chunk.metadata.token_count
                                 ? chunk.metadata.token_count.toLocaleString()
                                 : '-'}{' '}
@@ -641,7 +641,7 @@ const Chunks: React.FC<ChunksProps> = ({
               <div className="w-full">
                 <div className="border-border dark:border-border relative flex w-full flex-col overflow-hidden rounded-[5.86px] border">
                   <div className="border-border bg-muted dark:border-border dark:bg-card flex w-full items-center justify-between border-b px-4 py-3">
-                    <div className="text-sm text-[#59636E]">
+                    <div className="text-sm text-[#59636E] dark:text-muted-foreground">
                       {editingChunk.metadata.token_count
                         ? editingChunk.metadata.token_count.toLocaleString()
                         : '-'}{' '}
diff --git a/frontend/src/components/ConnectorTree.tsx b/frontend/src/components/ConnectorTree.tsx
index 54d804a3..81b0b282 100644
--- a/frontend/src/components/ConnectorTree.tsx
+++ b/frontend/src/components/ConnectorTree.tsx
@@ -1,30 +1,31 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import { formatBytes } from '../utils/stringUtils';
-import { selectToken } from '../preferences/preferenceSlice';
+
+import userService from '../api/services/userService';
+import ArrowLeft from '../assets/arrow-left.svg';
+import CheckmarkIcon from '../assets/checkMark2.svg';
+import EyeView from '../assets/eye-view.svg';
+import FileIcon from '../assets/file.svg';
+import FolderIcon from '../assets/folder.svg';
+import SyncIcon from '../assets/sync.svg';
+import ThreeDots from '../assets/three-dots.svg';
+import { useLoaderState, useOutsideAlerter } from '../hooks';
+import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState } from '../models/misc';
+import { selectToken } from '../preferences/preferenceSlice';
+import { formatBytes } from '../utils/stringUtils';
 import Chunks from './Chunks';
 import ContextMenu, { MenuOption } from './ContextMenu';
 import SkeletonLoader from './SkeletonLoader';
-import ConfirmationModal from '../modals/ConfirmationModal';
-import userService from '../api/services/userService';
-import FileIcon from '../assets/file.svg';
-import FolderIcon from '../assets/folder.svg';
-import ArrowLeft from '../assets/arrow-left.svg';
-import ThreeDots from '../assets/three-dots.svg';
-import EyeView from '../assets/eye-view.svg';
-import SyncIcon from '../assets/sync.svg';
-import CheckmarkIcon from '../assets/checkMark2.svg';
-import { useOutsideAlerter, useLoaderState } from '../hooks';
 import {
   Table,
+  TableBody,
+  TableCell,
   TableContainer,
   TableHead,
-  TableBody,
-  TableRow,
   TableHeader,
-  TableCell,
+  TableRow,
 } from './Table';
 
 interface FileNode {
@@ -325,26 +326,26 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
         {/* Left side with path navigation */}
         <div className="flex w-full items-center sm:w-auto">
           <button
-            className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm font-medium text-gray-400 dark:border-0 dark:text-gray-500"
+            className="text-muted-foreground mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm font-medium dark:border-0"
             onClick={handleBackNavigation}
           >
             <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
           </button>
 
           <div className="flex flex-wrap items-center">
-            <span className="font-semibold break-words text-[#7D54D1]">
+            <span className="font-semibold wrap-break-word text-[#7D54D1]">
               {sourceName}
             </span>
             {currentPath.length > 0 && (
               <>
-                <span className="mx-1 flex-shrink-0 text-gray-500">/</span>
+                <span className="text-muted-foreground mx-1 shrink-0">/</span>
                 {currentPath.map((dir, index) => (
                   <React.Fragment key={index}>
-                    <span className="break-words text-gray-700">
+                    <span className="dark:text-foreground wrap-break-word text-gray-700">
                       {dir}
                     </span>
                     {index < currentPath.length - 1 && (
-                      <span className="mx-1 flex-shrink-0 text-gray-500">
+                      <span className="text-muted-foreground mx-1 shrink-0">
                         /
                       </span>
                     )}
@@ -364,7 +365,7 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
             disabled={isSyncing}
             className={`flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-[14px] font-medium whitespace-nowrap transition-colors ${
               isSyncing
-                ? 'cursor-not-allowed bg-gray-300 text-gray-600 dark:bg-gray-600 dark:text-gray-400'
+                ? 'dark:bg-muted dark:text-muted-foreground cursor-not-allowed bg-gray-300 text-gray-600'
                 : 'bg-primary hover:bg-primary/90 text-white'
             }`}
             title={
@@ -402,7 +403,7 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
                   <img
                     src={FolderIcon}
                     alt={t('settings.sources.parentFolderAlt')}
-                    className="mr-2 h-4 w-4 flex-shrink-0"
+                    className="mr-2 h-4 w-4 shrink-0"
                   />
                   <span className="truncate">..</span>
                 </div>
@@ -449,7 +450,7 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
                 <img
                   src={FolderIcon}
                   alt={t('settings.sources.folderAlt')}
-                  className="mr-2 h-4 w-4 flex-shrink-0"
+                  className="mr-2 h-4 w-4 shrink-0"
                 />
                 <span className="truncate">{name}</span>
               </div>
@@ -466,7 +467,7 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
               <div ref={menuRef} className="relative">
                 <button
                   onClick={(e) => handleMenuClick(e, itemId)}
-                  className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md font-medium transition-colors hover:bg-[#EBEBEB] dark:hover:bg-muted"
+                  className="dark:hover:bg-muted inline-flex h-[35px] w-6 shrink-0 items-center justify-center rounded-md font-medium transition-colors hover:bg-[#EBEBEB]"
                   aria-label={t('settings.sources.menuAlt')}
                 >
                   <img
@@ -512,7 +513,7 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
                 <img
                   src={FileIcon}
                   alt={t('settings.sources.fileAlt')}
-                  className="mr-2 h-4 w-4 flex-shrink-0"
+                  className="mr-2 h-4 w-4 shrink-0"
                 />
                 <span className="truncate">{displayName}</span>
               </div>
@@ -527,7 +528,7 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
               <div ref={menuRef} className="relative">
                 <button
                   onClick={(e) => handleMenuClick(e, itemId)}
-                  className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md font-medium transition-colors hover:bg-[#EBEBEB] dark:hover:bg-muted"
+                  className="dark:hover:bg-muted inline-flex h-[35px] w-6 shrink-0 items-center justify-center rounded-md font-medium transition-colors hover:bg-[#EBEBEB]"
                   aria-label={t('settings.sources.menuAlt')}
                 >
                   <img
@@ -625,14 +626,14 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
             }
           }}
           placeholder={t('settings.sources.searchFiles')}
-          className={`h-[38px] w-full border border-border px-4 py-2 dark:border-border ${searchQuery ? 'rounded-t-[24px]' : 'rounded-[24px]'} bg-transparent focus:outline-none`}
+          className={`border-border dark:border-border h-[38px] w-full border px-4 py-2 ${searchQuery ? 'rounded-t-[24px]' : 'rounded-[24px]'} bg-transparent focus:outline-none`}
         />
 
         {searchQuery && (
-          <div className="absolute top-full right-0 left-0 z-10 max-h-[calc(100vh-200px)] w-full overflow-hidden rounded-b-[12px] border border-t-0 border-border bg-card shadow-lg transition-all duration-200 dark:border-border dark:bg-card">
+          <div className="border-border bg-card dark:border-border dark:bg-card absolute top-full right-0 left-0 z-10 max-h-[calc(100vh-200px)] w-full overflow-hidden rounded-b-2xl border border-t-0 shadow-lg transition-all duration-200">
             <div className="max-h-[calc(100vh-200px)] overflow-x-hidden overflow-y-auto overscroll-contain">
               {searchResults.length === 0 ? (
-                <div className="py-2 text-center text-sm text-gray-500 dark:text-gray-400">
+                <div className="text-muted-foreground py-2 text-center text-sm">
                   {t('settings.sources.noResults')}
                 </div>
               ) : (
@@ -641,9 +642,9 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
                     key={index}
                     onClick={() => handleSearchSelect(result)}
                     title={result.path}
-                    className={`flex min-w-0 cursor-pointer items-center px-3 py-2 hover:bg-muted dark:hover:bg-muted ${
+                    className={`hover:bg-muted dark:hover:bg-muted flex min-w-0 cursor-pointer items-center px-3 py-2 ${
                       index !== searchResults.length - 1
-                        ? 'border-b border-border dark:border-border'
+                        ? 'border-border dark:border-border border-b'
                         : ''
                     }`}
                   >
@@ -654,7 +655,7 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
                           ? t('settings.sources.fileAlt')
                           : t('settings.sources.folderAlt')
                       }
-                      className="mr-2 h-4 w-4 flex-shrink-0"
+                      className="mr-2 h-4 w-4 shrink-0"
                     />
                     <span className="flex-1 truncate text-sm">
                       {result.name}
diff --git a/frontend/src/components/MessageInput.tsx b/frontend/src/components/MessageInput.tsx
index 02a0022b..3a33d3e8 100644
--- a/frontend/src/components/MessageInput.tsx
+++ b/frontend/src/components/MessageInput.tsx
@@ -1620,7 +1620,7 @@ export default function MessageInput({
                 className={`xs:px-3 xs:py-1.5 dark:border-purple-taupe flex items-center rounded-[32px] border px-2 py-1 transition-colors ${
                   recordingState === 'recording'
                     ? 'border-[#B42318] bg-[#FEE4E2] text-[#B42318] dark:bg-[#4A2323]'
-                    : 'border-[#AAAAAA] hover:bg-gray-100 dark:hover:bg-[#2C2E3C]'
+                    : 'border-border hover:bg-gray-100 dark:hover:bg-accent'
                 } ${
                   loading || recordingState === 'transcribing'
                     ? 'cursor-not-allowed opacity-60'
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 9292a2c1..757b4fbe 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -458,7 +458,7 @@ const ConversationBubble = forwardRef<
             <div
               className={`fade-in-bubble bg-answer-bubble mr-5 flex max-w-full rounded-[18px] px-6 py-4.5 ${
                 type === 'ERROR'
-                  ? 'text-destructive/80 dark:border-destructive relative flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal dark:text-white'
+                  ? 'text-destructive/80 dark:border-destructive relative flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal dark:bg-destructive/15 dark:text-white'
                   : 'flex-col rounded-3xl'
               }`}
             >
diff --git a/frontend/src/modals/AddActionModal.tsx b/frontend/src/modals/AddActionModal.tsx
index 93399156..b0bd875b 100644
--- a/frontend/src/modals/AddActionModal.tsx
+++ b/frontend/src/modals/AddActionModal.tsx
@@ -59,7 +59,7 @@ export default function AddActionModal({
           />
           <p
             className={`mt-2 ml-1 text-xs italic ${
-              functionNameError ? 'text-red-500' : 'text-gray-500'
+              functionNameError ? 'text-red-500' : 'text-muted-foreground'
             }`}
           >
             {functionNameError
diff --git a/frontend/src/modals/ImportSpecModal.tsx b/frontend/src/modals/ImportSpecModal.tsx
index 81ed56ff..64837fdc 100644
--- a/frontend/src/modals/ImportSpecModal.tsx
+++ b/frontend/src/modals/ImportSpecModal.tsx
@@ -215,7 +215,7 @@ export default function ImportSpecModal({
                   {parsedResult.metadata.description}
                 </p>
               )}
-              <p className="mt-2 text-xs text-gray-500">
+              <p className="mt-2 text-xs text-muted-foreground">
                 {t('modals.importSpec.version')}:{' '}
                 {parsedResult.metadata.version}
               </p>
diff --git a/frontend/src/modals/MoveToFolderModal.tsx b/frontend/src/modals/MoveToFolderModal.tsx
index 749f4a64..74069132 100644
--- a/frontend/src/modals/MoveToFolderModal.tsx
+++ b/frontend/src/modals/MoveToFolderModal.tsx
@@ -188,10 +188,10 @@ export default function MoveToFolderModal({
             </span>
           ))}
         </div>
-        <div className="max-h-60 min-h-[200px] overflow-y-auto border-t border-gray-200">
+        <div className="max-h-60 min-h-[200px] overflow-y-auto border-t border-gray-200 dark:border-border">
           {isLoading ? (
             <div className="flex h-[200px] items-center justify-center">
-              <span className="text-[14px] text-gray-500">
+              <span className="text-[14px] text-muted-foreground">
                 {t('loading')}...
               </span>
             </div>
@@ -204,7 +204,7 @@ export default function MoveToFolderModal({
                     e.stopPropagation();
                     setSelectedFolderId(null);
                   }}
-                  className={`flex w-full items-center gap-2 border-b border-gray-200 px-8 py-2 text-left text-[14px] ${
+                  className={`flex w-full items-center gap-2 border-b border-gray-200 dark:border-border px-8 py-2 text-left text-[14px] ${
                     selectedFolderId === null
                       ? 'bg-[#7D54D1] text-white'
                       : 'bg-muted hover:bg-accent dark:bg-muted'
@@ -226,7 +226,7 @@ export default function MoveToFolderModal({
                 <button
                   key={folder.id}
                   onClick={() => setSelectedFolderId(folder.id)}
-                  className={`flex w-full cursor-pointer items-center justify-between border-b border-gray-200 px-8 py-2 text-left text-[14px] ${
+                  className={`flex w-full cursor-pointer items-center justify-between border-b border-gray-200 dark:border-border px-8 py-2 text-left text-[14px] ${
                     selectedFolderId === folder.id
                       ? 'bg-[#7D54D1] text-white'
                       : 'bg-muted hover:bg-accent dark:bg-muted'
@@ -286,7 +286,7 @@ export default function MoveToFolderModal({
           )}
         </div>
 
-        <div className="flex items-center justify-between border-t border-gray-200 px-8 py-4">
+        <div className="flex items-center justify-between border-t border-gray-200 dark:border-border px-8 py-4">
           {isCreatingFolder ? (
             <input
               ref={newFolderInputRef}
diff --git a/frontend/src/preferences/PromptsModal.tsx b/frontend/src/preferences/PromptsModal.tsx
index 289f59d5..a41f7923 100644
--- a/frontend/src/preferences/PromptsModal.tsx
+++ b/frontend/src/preferences/PromptsModal.tsx
@@ -278,7 +278,7 @@ function AddPrompt({
           <span className="font-bold">
             {t('modals.prompts.variablesLabel')}
           </span>
-          <span className="text-xs text-[10px] font-medium text-gray-500">
+          <span className="text-xs text-[10px] font-medium text-muted-foreground">
             {t('modals.prompts.variablesDescription')}
           </span>
         </p>
@@ -485,7 +485,7 @@ function EditPrompt({
           <span className="font-bold">
             {t('modals.prompts.variablesLabel')}
           </span>
-          <span className="text-xs text-[10px] font-medium text-gray-500">
+          <span className="text-xs text-[10px] font-medium text-muted-foreground">
             {t('modals.prompts.variablesDescription')}
           </span>
         </p>
diff --git a/frontend/src/settings/Logs.tsx b/frontend/src/settings/Logs.tsx
index da86276d..29972194 100644
--- a/frontend/src/settings/Logs.tsx
+++ b/frontend/src/settings/Logs.tsx
@@ -119,7 +119,7 @@ function LogsTable({ logs, setPage, loading, tableHeader }: LogsTableProps) {
   return (
     <div className="logs-table border-border h-[55vh] w-full overflow-hidden rounded-xl border bg-card dark:bg-black">
       <div className="flex h-8 flex-col items-start justify-center bg-black/10 dark:bg-white/5">
-        <p className="dark:text-gray-6000 px-3 text-xs">
+        <p className="px-3 text-xs text-muted-foreground">
           {tableHeader ? tableHeader : t('settings.logs.tableHeader')}
         </p>
       </div>
@@ -171,7 +171,7 @@ function Log({
     <div className="group dark:hover:bg-accent w-full rounded-xl bg-transparent hover:bg-muted">
       <div
         onClick={() => onToggle(log.id)}
-        className={`flex cursor-pointer flex-row items-start gap-2 p-2 px-4 py-3 text-gray-900 ${
+        className={`flex cursor-pointer flex-row items-start gap-2 p-2 px-4 py-3 text-foreground ${
           isOpen ? 'rounded-t-xl bg-[#F1F1F1] dark:bg-background' : ''
         }`}
       >
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index 8db18988..54bb8317 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -203,14 +203,14 @@ function Upload({
                 {files.map((file) => (
                   <p
                     key={file.name}
-                    className="text-gray-6000 truncate overflow-hidden text-ellipsis dark:text-foreground"
+                    className="truncate overflow-hidden text-ellipsis text-muted-foreground"
                     title={file.name}
                   >
                     {file.name}
                   </p>
                 ))}
                 {files.length === 0 && (
-                  <p className="text-gray-6000 dark:text-foreground text-[14px]">
+                  <p className="text-muted-foreground text-[14px]">
                     {t('modals.uploadDoc.noFilesSelected')}
                   </p>
                 )}
@@ -913,7 +913,7 @@ function Upload({
               disabled={isUploadDisabled()}
               className={`rounded-3xl px-4 py-2 text-[14px] font-medium ${
                 isUploadDisabled()
-                  ? 'cursor-not-allowed bg-gray-300 text-gray-500'
+                  ? 'cursor-not-allowed bg-gray-300 text-gray-500 dark:bg-muted dark:text-muted-foreground'
                   : 'bg-primary hover:bg-primary/90 cursor-pointer text-white'
               }`}
             >