diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 6032d841..0e32ed33 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -388,7 +388,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             alt="Create new chat"
             className="opacity-80 group-hover:opacity-100"
           />
-          <p className="text-muted-foreground dark:text-foreground dark:group-hover:text-bright-gray text-sm group-hover:text-neutral-600">
+          <p className="text-muted-foreground dark:text-foreground dark:group-hover:text-foreground text-sm group-hover:text-neutral-600">
             {t('newChat')}
           </p>
         </NavLink>
diff --git a/frontend/src/agents/NewAgent.tsx b/frontend/src/agents/NewAgent.tsx
index 7038e1c7..133ffc7c 100644
--- a/frontend/src/agents/NewAgent.tsx
+++ b/frontend/src/agents/NewAgent.tsx
@@ -1313,7 +1313,7 @@ function AgentPreviewArea() {
   const { t } = useTranslation();
   const selectedAgent = useSelector(selectSelectedAgent);
   return (
-    <div className="bg-card dark:border-border w-full rounded-[30px] border border-[#F6F6F6] max-[1179px]:h-[600px] min-[1180px]:h-full">
+    <div className="bg-card border-border w-full rounded-[30px] border max-[1179px]:h-[600px] min-[1180px]:h-full">
       {selectedAgent?.status === 'published' ? (
         <div className="flex h-full w-full flex-col overflow-hidden rounded-[30px]">
           <AgentPreview />
diff --git a/frontend/src/agents/SharedAgentCard.tsx b/frontend/src/agents/SharedAgentCard.tsx
index 98c86cb7..8d2baac3 100644
--- a/frontend/src/agents/SharedAgentCard.tsx
+++ b/frontend/src/agents/SharedAgentCard.tsx
@@ -61,7 +61,7 @@ export default function SharedAgentCard({ agent }: { agent: Agent }) {
             {agent.tool_details.map((tool, index) => (
               <span
                 key={index}
-                className="bg-bright-gray text-foreground dark:bg-card flex items-center gap-1 rounded-full px-3 py-1 text-xs font-light"
+                className="bg-accent text-foreground dark:bg-card flex items-center gap-1 rounded-full px-3 py-1 text-xs font-light"
               >
                 <img
                   src={`/toolIcons/tool_${tool.name}.svg`}
diff --git a/frontend/src/agents/workflow/WorkflowBuilder.tsx b/frontend/src/agents/workflow/WorkflowBuilder.tsx
index 00681017..2024ee7c 100644
--- a/frontend/src/agents/workflow/WorkflowBuilder.tsx
+++ b/frontend/src/agents/workflow/WorkflowBuilder.tsx
@@ -1355,7 +1355,7 @@ function WorkflowBuilderInner() {
   return (
     <>
       <MobileBlocker />
-      <div className="bg-background dark:bg-outer-space fixed inset-0 z-50 hidden h-screen w-full flex-col md:flex">
+      <div className="bg-background fixed inset-0 z-50 hidden h-screen w-full flex-col md:flex">
         <div className="border-border bg-card dark:bg-background flex items-center justify-between border-b px-6 py-4">
           <div className="flex items-center gap-4">
             <button
diff --git a/frontend/src/components/MessageInput.tsx b/frontend/src/components/MessageInput.tsx
index 42576198..d30650ed 100644
--- a/frontend/src/components/MessageInput.tsx
+++ b/frontend/src/components/MessageInput.tsx
@@ -1617,7 +1617,7 @@ export default function MessageInput({
                 aria-label={voiceButtonLabel}
                 title={voiceButtonLabel}
                 disabled={loading || recordingState === 'transcribing'}
-                className={`xs:px-3 xs:py-1.5 dark:border-purple-taupe flex items-center rounded-[32px] border px-2 py-1 transition-colors ${
+                className={`xs:px-3 xs:py-1.5 dark:border-border flex items-center rounded-[32px] border px-2 py-1 transition-colors ${
                   recordingState === 'recording'
                     ? 'border-[#B42318] bg-[#FEE4E2] text-[#B42318] dark:bg-[#4A2323]'
                     : 'border-border dark:hover:bg-accent hover:bg-gray-100'
@@ -1635,10 +1635,10 @@ export default function MessageInput({
                   <Mic className="mr-1 h-3.5 w-3.5 sm:mr-1.5 sm:h-4 sm:w-4" />
                 )}
                 <span
-                  className={`xs:text-[12px] dark:text-bright-gray text-[10px] font-medium sm:text-[14px] ${
+                  className={`xs:text-[12px] dark:text-foreground text-[10px] font-medium sm:text-[14px] ${
                     recordingState === 'recording'
                       ? 'text-[#B42318]'
-                      : 'text-[#5D5D5D]'
+                      : 'text-muted-foreground'
                   }`}
                 >
                   {voiceButtonText}
diff --git a/frontend/src/components/SourcesPopup.tsx b/frontend/src/components/SourcesPopup.tsx
index ab5edc64..34a27aa5 100644
--- a/frontend/src/components/SourcesPopup.tsx
+++ b/frontend/src/components/SourcesPopup.tsx
@@ -186,7 +186,7 @@ export default function SourcesPopup({
                       height={14}
                       className="mr-3 shrink-0"
                     />
-                    <span className="dark:text-foreground mr-3 grow overflow-hidden font-medium text-ellipsis whitespace-nowrap text-[#5D5D5D]">
+                    <span className="dark:text-foreground text-muted-foreground mr-3 grow overflow-hidden font-medium text-ellipsis whitespace-nowrap">
                       {option.name}
                     </span>
                     <div
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index eba2b7c8..4fd9f868 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -140,7 +140,7 @@ const ConversationBubble = forwardRef<
                 <div
                   key={index}
                   title={file.fileName}
-                  className="dark:text-foreground dark:bg-accent flex items-center rounded-xl bg-[#EFF3F4] p-2 text-[14px] text-[#5D5D5D]"
+                  className="dark:text-foreground dark:bg-accent text-muted-foreground bg-muted flex items-center rounded-xl p-2 text-[14px]"
                 >
                   <div className="bg-primary mr-2 items-center justify-center rounded-lg p-[5.5px]">
                     <img
@@ -606,7 +606,7 @@ const ConversationBubble = forwardRef<
                               },
                               table({ children }) {
                                 return (
-                                  <div className="border-silver/40 dark:border-border relative overflow-x-auto rounded-lg border">
+                                  <div className="border-border relative overflow-x-auto rounded-lg border">
                                     <table className="dark:text-foreground w-full text-left text-gray-700">
                                       {children}
                                     </table>
@@ -728,12 +728,12 @@ const ConversationBubble = forwardRef<
                             link.click();
                             URL.revokeObjectURL(url);
                           }}
-                          className="bg-white-3000 dark:hover:bg-purple-taupe flex cursor-pointer items-center justify-center rounded-full p-2 hover:bg-[#EEEEEE] dark:bg-transparent"
+                          className="bg-card dark:hover:bg-accent hover:bg-muted flex cursor-pointer items-center justify-center rounded-full p-2 dark:bg-transparent"
                           aria-label="Export as Markdown"
                           title="Export as Markdown"
                         >
                           <svg
-                            className="stroke-gray-4000 h-5 w-5"
+                            className="stroke-muted-foreground h-5 w-5"
                             fill="none"
                             viewBox="0 0 24 24"
                             strokeWidth={1.5}
@@ -1087,7 +1087,7 @@ function Thought({
                 },
                 table({ children }) {
                   return (
-                    <div className="border-silver/40 dark:border-border relative overflow-x-auto rounded-lg border">
+                    <div className="border-border relative overflow-x-auto rounded-lg border">
                       <table className="dark:text-foreground w-full text-left text-gray-700">
                         {children}
                       </table>
diff --git a/frontend/src/conversation/ConversationMessages.tsx b/frontend/src/conversation/ConversationMessages.tsx
index 58561f32..dbfdeba7 100644
--- a/frontend/src/conversation/ConversationMessages.tsx
+++ b/frontend/src/conversation/ConversationMessages.tsx
@@ -197,7 +197,7 @@ export default function ConversationMessages({
     if (status === 'loading' && isLastMessage) {
       return (
         <div
-          className={`fade-in-bubble flex flex-wrap self-start ${bubbleMargin} group dark:text-bright-gray flex-col`}
+          className={`fade-in-bubble flex flex-wrap self-start ${bubbleMargin} group dark:text-foreground flex-col`}
         >
           <div className="flex max-w-full flex-col flex-wrap items-start self-start lg:flex-nowrap">
             <div className="my-2 flex flex-row items-center justify-center gap-3">