diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7e2b2ad8..062e746b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -37,7 +37,7 @@ function MainLayout() {
   const [navOpen, setNavOpen] = useState(!(isMobile || isTablet));
 
   return (
-    <div className="bg-card relative h-screen overflow-hidden">
+    <div className="bg-background relative h-screen overflow-hidden">
       <Navigation navOpen={navOpen} setNavOpen={setNavOpen} />
       <ActionButtons showNewChat={true} showShare={true} />
       <div
diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index d6e9a7c9..597752ee 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -44,7 +44,7 @@ export default function Hero({
                 <button
                   key={key}
                   onClick={() => handleQuestion({ question: demo.query })}
-                  className={`border-border text-foreground hover:bg-muted bg-card w-full rounded-[66px] border px-6 py-3.5 text-left transition-colors ${key >= 2 ? 'hidden md:block' : ''}`}
+                  className={`border-border text-foreground hover:bg-muted dark:hover:bg-muted/50 bg-card dark:bg-transparent w-full rounded-[66px] border px-6 py-3.5 text-left transition-colors ${key >= 2 ? 'hidden md:block' : ''}`}
                 >
                   <p className="text-black-1000 dark:text-foreground mb-2 font-semibold">
                     {demo.header}
diff --git a/frontend/src/PageNotFound.tsx b/frontend/src/PageNotFound.tsx
index b0658873..5d57578e 100644
--- a/frontend/src/PageNotFound.tsx
+++ b/frontend/src/PageNotFound.tsx
@@ -5,7 +5,7 @@ export default function PageNotFound() {
   const { t } = useTranslation();
 
   return (
-    <div className="bg-card grid min-h-screen">
+    <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">
         <h1>{t('pageNotFound.title')}</h1>
         <p>{t('pageNotFound.message')}</p>
diff --git a/frontend/src/agents/NewAgent.tsx b/frontend/src/agents/NewAgent.tsx
index bb2eb05f..b091207f 100644
--- a/frontend/src/agents/NewAgent.tsx
+++ b/frontend/src/agents/NewAgent.tsx
@@ -757,7 +757,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
           </button>
         </div>
       </div>
-      <div className="bg-muted dark:bg-accent mt-3 flex w-full flex-1 grid-cols-5 flex-col gap-10 rounded-[30px] p-5 max-[1179px]:overflow-visible min-[1180px]:grid min-[1180px]:gap-5 min-[1180px]:overflow-hidden">
+      <div className="bg-muted dark:bg-background mt-3 flex w-full flex-1 grid-cols-5 flex-col gap-10 rounded-[30px] p-5 max-[1179px]:overflow-visible min-[1180px]:grid min-[1180px]:gap-5 min-[1180px]:overflow-hidden">
         <div className="scrollbar-overlay col-span-2 flex flex-col gap-5 max-[1179px]:overflow-visible min-[1180px]:max-h-full min-[1180px]:overflow-y-auto min-[1180px]:pr-3">
           <div className="bg-card rounded-[30px] px-6 py-3">
             <h2 className="text-lg font-semibold">
diff --git a/frontend/src/agents/workflow/WorkflowBuilder.tsx b/frontend/src/agents/workflow/WorkflowBuilder.tsx
index 5092efe5..eb012e8e 100644
--- a/frontend/src/agents/workflow/WorkflowBuilder.tsx
+++ b/frontend/src/agents/workflow/WorkflowBuilder.tsx
@@ -2,13 +2,13 @@ import 'reactflow/dist/style.css';
 
 import {
   AlertCircle,
-  ChartColumn,
   Bot,
+  ChartColumn,
   Database,
   Flag,
   GitBranch,
-  Loader2,
   Link,
+  Loader2,
   Pencil,
   Play,
   Plus,
@@ -1333,12 +1333,12 @@ function WorkflowBuilderInner() {
   return (
     <>
       <MobileBlocker />
-      <div className="bg-background fixed inset-0 z-50 hidden h-screen w-full flex-col md:flex">
-        <div className="border-border flex items-center justify-between border-b bg-card px-6 py-4">
+      <div className="bg-background dark:bg-outer-space 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
               onClick={navigateBackToAgents}
-              className="rounded-full border border-border p-3 text-sm text-muted-foreground hover:bg-accent"
+              className="border-border text-muted-foreground hover:bg-accent rounded-full border p-3 text-sm"
             >
               <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
             </button>
@@ -1368,7 +1368,7 @@ function WorkflowBuilderInner() {
               {showWorkflowSettings && (
                 <div
                   ref={workflowSettingsRef}
-                  className="absolute top-full left-0 z-50 mt-2 w-80 rounded-xl border border-border bg-card p-4 shadow-lg"
+                  className="border-border bg-card absolute top-full left-0 z-50 mt-2 w-80 rounded-xl border p-4 shadow-lg"
                 >
                   <div className="mb-3">
                     <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
@@ -1378,7 +1378,7 @@ function WorkflowBuilderInner() {
                       type="text"
                       value={workflowName}
                       onChange={(e) => setWorkflowName(e.target.value)}
-                      className="focus:ring-ring w-full rounded-lg border border-border bg-card px-3 py-2 text-sm outline-none focus:ring-2 dark:text-white"
+                      className="focus:ring-ring border-border bg-card w-full rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 dark:text-white"
                       placeholder="Enter workflow name"
                     />
                   </div>
@@ -1389,7 +1389,7 @@ function WorkflowBuilderInner() {
                     <textarea
                       value={workflowDescription}
                       onChange={(e) => setWorkflowDescription(e.target.value)}
-                      className="focus:ring-ring w-full rounded-lg border border-border bg-card px-3 py-2 text-sm outline-none focus:ring-2 dark:text-white"
+                      className="focus:ring-ring border-border bg-card w-full rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 dark:text-white"
                       rows={3}
                       placeholder="Describe what this workflow does"
                     />
@@ -1426,7 +1426,7 @@ function WorkflowBuilderInner() {
                           colorClass: 'text-gray-500',
                         },
                       ]}
-                      className="rounded-lg border-2 border-dashed border-border p-3 text-center transition-colors"
+                      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">
                       Image updates are included the next time you save.
@@ -1446,7 +1446,7 @@ function WorkflowBuilderInner() {
           <div className="flex items-center gap-2">
             <button
               onClick={() => setShowWorkflowSettings((prev) => !prev)}
-              className="flex items-center gap-2 rounded-full border border-border bg-card px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-accent dark:text-gray-200"
+              className="border-border bg-card hover:bg-accent flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium text-gray-700 transition-colors dark:text-gray-200"
             >
               <Settings2 size={16} />
               Details
@@ -1454,7 +1454,7 @@ function WorkflowBuilderInner() {
             {canManageAgent && (
               <button
                 onClick={() => navigate(`/agents/logs/${effectiveAgentId}`)}
-                className="flex items-center gap-2 rounded-full border border-border bg-card px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-accent dark:text-gray-200"
+                className="border-border bg-card hover:bg-accent flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium text-gray-700 transition-colors dark:text-gray-200"
               >
                 <ChartColumn size={16} />
                 Logs
@@ -1463,7 +1463,7 @@ function WorkflowBuilderInner() {
             {canManageAgent && (
               <button
                 onClick={() => setAgentDetails('ACTIVE')}
-                className="flex items-center gap-2 rounded-full border border-border bg-card px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-accent dark:text-gray-200"
+                className="border-border bg-card hover:bg-accent flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium text-gray-700 transition-colors dark:text-gray-200"
               >
                 <Link size={16} />
                 Access Details
@@ -1473,7 +1473,7 @@ function WorkflowBuilderInner() {
               <button
                 onClick={() => setDeleteConfirmation('ACTIVE')}
                 disabled={isDeletingAgent}
-                className="flex items-center gap-2 rounded-full border border-red-200 bg-card px-4 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-red-900/30 dark:text-red-400 dark:hover:bg-red-900/10"
+                className="bg-card flex items-center gap-2 rounded-full border border-red-200 px-4 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-red-900/30 dark:text-red-400 dark:hover:bg-red-900/10"
               >
                 <Trash2 size={16} />
                 {isDeletingAgent ? 'Deleting...' : 'Delete'}
@@ -1489,7 +1489,7 @@ function WorkflowBuilderInner() {
                 }
                 setShowPreview(true);
               }}
-              className="flex items-center gap-2 rounded-full border border-border bg-card px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-accent dark:text-gray-200"
+              className="border-border bg-card hover:bg-accent flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium text-gray-700 transition-colors dark:text-gray-200"
             >
               <Play size={16} />
               Preview
@@ -1499,7 +1499,7 @@ function WorkflowBuilderInner() {
               disabled={isPrimaryActionDisabled}
               className={`relative inline-flex items-center justify-center rounded-full px-6 py-2 text-sm font-medium shadow-sm transition-colors disabled:cursor-not-allowed ${
                 canManageAgent && !hasSavableChanges
-                  ? 'bg-gray-200 text-gray-500 dark:bg-accent dark:text-gray-400'
+                  ? 'dark:bg-accent bg-gray-200 text-gray-500 dark:text-gray-400'
                   : 'bg-primary hover:bg-primary/90 text-white disabled:opacity-50'
               }`}
             >
@@ -1549,14 +1549,14 @@ function WorkflowBuilderInner() {
         )}
 
         <div className="flex flex-1 overflow-hidden">
-          <div className="border-border flex w-64 flex-col gap-6 border-r bg-muted p-4">
+          <div className="border-border bg-muted dark:bg-background flex w-64 flex-col gap-6 border-r p-4">
             <div>
               <h3 className="mb-3 text-xs font-semibold tracking-wider text-gray-500 uppercase dark:text-gray-400">
                 Core Nodes
               </h3>
               <div className="flex flex-col gap-2">
                 <div
-                  className="group flex cursor-move items-center gap-3 rounded-full border border-border bg-card px-4 py-3 shadow-sm transition-all hover:shadow-md"
+                  className="group border-border bg-card flex cursor-move items-center gap-3 rounded-full border px-4 py-3 shadow-sm transition-all hover:shadow-md"
                   draggable
                   onDragStart={(e) => handleNodeDragStart(e, 'agent')}
                 >
@@ -1568,7 +1568,7 @@ function WorkflowBuilderInner() {
                   </span>
                 </div>
                 <div
-                  className="group flex cursor-move items-center gap-3 rounded-full border border-border bg-card px-4 py-3 shadow-sm transition-all hover:shadow-md"
+                  className="group border-border bg-card flex cursor-move items-center gap-3 rounded-full border px-4 py-3 shadow-sm transition-all hover:shadow-md"
                   draggable
                   onDragStart={(e) => handleNodeDragStart(e, 'end')}
                 >
@@ -1580,7 +1580,7 @@ function WorkflowBuilderInner() {
                   </span>
                 </div>
                 <div
-                  className="group flex cursor-move items-center gap-3 rounded-full border border-border bg-card px-4 py-3 shadow-sm transition-all hover:shadow-md"
+                  className="group border-border bg-card flex cursor-move items-center gap-3 rounded-full border px-4 py-3 shadow-sm transition-all hover:shadow-md"
                   draggable
                   onDragStart={(e) => handleNodeDragStart(e, 'note')}
                 >
@@ -1600,7 +1600,7 @@ function WorkflowBuilderInner() {
               </h3>
               <div className="flex flex-col gap-2">
                 <div
-                  className="group flex cursor-move items-center gap-3 rounded-full border border-border bg-card px-4 py-3 shadow-sm transition-all hover:shadow-md"
+                  className="group border-border bg-card flex cursor-move items-center gap-3 rounded-full border px-4 py-3 shadow-sm transition-all hover:shadow-md"
                   draggable
                   onDragStart={(e) => handleNodeDragStart(e, 'state')}
                 >
@@ -1617,7 +1617,7 @@ function WorkflowBuilderInner() {
                   </div>
                 </div>
                 <div
-                  className="group flex cursor-move items-center gap-3 rounded-full border border-border bg-card px-4 py-3 shadow-sm transition-all hover:shadow-md"
+                  className="group border-border bg-card flex cursor-move items-center gap-3 rounded-full border px-4 py-3 shadow-sm transition-all hover:shadow-md"
                   draggable
                   onDragStart={(e) => handleNodeDragStart(e, 'condition')}
                 >
@@ -1639,7 +1639,7 @@ function WorkflowBuilderInner() {
 
           <div
             ref={reactFlowWrapper}
-            className="relative flex-1 bg-muted"
+            className="bg-muted dark:bg-background/10 relative flex-1"
           >
             <ReactFlow
               nodes={nodes}
@@ -1665,7 +1665,7 @@ function WorkflowBuilderInner() {
                   className="absolute inset-0 z-10"
                   onClick={handlePanelBackdropClick}
                 />
-                <div className="border-border absolute top-4 right-4 z-20 w-96 rounded-2xl border bg-card shadow-[0px_4px_40px_-3px_#0000001A]">
+                <div className="border-border bg-card absolute top-4 right-4 z-20 w-96 rounded-2xl border shadow-[0px_4px_40px_-3px_#0000001A]">
                   <div className="border-border flex items-center justify-between border-b p-4">
                     <h3 className="font-semibold text-gray-900 dark:text-white">
                       {selectedNode.type === 'start' && 'Start Node'}
@@ -1685,7 +1685,7 @@ function WorkflowBuilderInner() {
 
                   <div className="max-h-[calc(100vh-200px)] overflow-y-auto p-4">
                     <div className="mb-4 flex flex-col gap-2">
-                      <div className="rounded-lg bg-muted p-3">
+                      <div className="bg-muted rounded-lg p-3">
                         <div className="mb-1 text-xs text-gray-500 dark:text-gray-400">
                           Node ID
                         </div>
@@ -1714,7 +1714,7 @@ function WorkflowBuilderInner() {
                                     label: e.target.value,
                                   })
                                 }
-                                className="border-border focus:ring-ring w-full rounded-xl border bg-card px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
+                                className="border-border focus:ring-ring bg-card w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
                                 placeholder="Enter node title"
                               />
                             </div>
@@ -1808,7 +1808,7 @@ function WorkflowBuilderInner() {
                                         },
                                       })
                                     }
-                                    className="border-border focus:ring-ring w-full rounded-xl border bg-card px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
+                                    className="border-border focus:ring-ring bg-card w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
                                     rows={3}
                                     placeholder="System prompt for the agent"
                                   />
@@ -1851,7 +1851,7 @@ function WorkflowBuilderInner() {
                                         },
                                       });
                                     }}
-                                    className="border-border focus:ring-ring w-full rounded-xl border bg-card px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
+                                    className="border-border focus:ring-ring bg-card w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
                                     placeholder="Variable name for output"
                                   />
                                 </div>
@@ -1922,7 +1922,7 @@ function WorkflowBuilderInner() {
                                         e.target.value,
                                       )
                                     }
-                                    className="border-border focus:ring-ring w-full rounded-xl border bg-card px-3 py-2 font-mono text-xs transition-all outline-none focus:ring-2 dark:text-white"
+                                    className="border-border focus:ring-ring bg-card w-full rounded-xl border px-3 py-2 font-mono text-xs transition-all outline-none focus:ring-2 dark:text-white"
                                     rows={8}
                                     placeholder={`{
   "type": "object",
@@ -1962,7 +1962,7 @@ function WorkflowBuilderInner() {
                                       content: e.target.value,
                                     })
                                   }
-                                  className="border-border focus:ring-ring w-full rounded-xl border bg-card px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
+                                  className="border-border focus:ring-ring bg-card w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
                                   rows={4}
                                   placeholder="Enter note content"
                                 />
@@ -1987,7 +1987,7 @@ function WorkflowBuilderInner() {
                                   ) => (
                                     <div
                                       key={idx}
-                                      className="rounded-xl border border-border p-3"
+                                      className="border-border rounded-xl border p-3"
                                     >
                                       <div className="mb-2 flex items-center justify-between">
                                         <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
@@ -2037,7 +2037,7 @@ function WorkflowBuilderInner() {
                                             },
                                           });
                                         }}
-                                        className="border-border focus:ring-ring mb-1 w-full rounded-xl border bg-card px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:bg-accent dark:text-white"
+                                        className="border-border focus:ring-ring bg-card dark:bg-accent mb-1 w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
                                         rows={2}
                                         placeholder="input.foo + 1"
                                       />
@@ -2077,7 +2077,7 @@ function WorkflowBuilderInner() {
                                               },
                                             });
                                           }}
-                                          className="border-border focus:ring-ring w-full rounded-xl border bg-card px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:bg-accent dark:text-white"
+                                          className="border-border focus:ring-ring bg-card dark:bg-accent w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
                                           placeholder="variable_name"
                                         />
                                       </div>
@@ -2098,7 +2098,7 @@ function WorkflowBuilderInner() {
                                       },
                                     });
                                   }}
-                                  className="flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-600 transition-colors hover:bg-accent dark:text-gray-400"
+                                  className="hover:bg-accent flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-600 transition-colors dark:text-gray-400"
                                 >
                                   <Plus size={14} />
                                   Add
@@ -2111,7 +2111,7 @@ function WorkflowBuilderInner() {
                                 <p className="text-xs text-gray-500 dark:text-gray-400">
                                   Create conditions to branch your workflow
                                 </p>
-                                <div className="flex overflow-hidden rounded-lg border border-border">
+                                <div className="border-border flex overflow-hidden rounded-lg border">
                                   <button
                                     onClick={() =>
                                       handleUpdateNodeData({
@@ -2125,7 +2125,7 @@ function WorkflowBuilderInner() {
                                       (selectedNode.data.config?.mode ||
                                         'simple') === 'simple'
                                         ? 'bg-primary text-white'
-                                        : 'text-gray-600 hover:bg-accent dark:text-gray-400'
+                                        : 'hover:bg-accent text-gray-600 dark:text-gray-400'
                                     }`}
                                   >
                                     Simple
@@ -2143,7 +2143,7 @@ function WorkflowBuilderInner() {
                                       selectedNode.data.config?.mode ===
                                       'advanced'
                                         ? 'bg-primary text-white'
-                                        : 'text-gray-600 hover:bg-accent dark:text-gray-400'
+                                        : 'hover:bg-accent text-gray-600 dark:text-gray-400'
                                     }`}
                                   >
                                     Advanced
@@ -2154,7 +2154,7 @@ function WorkflowBuilderInner() {
                                   (c: ConditionCase, idx: number) => (
                                     <div
                                       key={c.sourceHandle}
-                                      className="rounded-xl border border-border p-3"
+                                      className="border-border rounded-xl border p-3"
                                     >
                                       <div className="mb-2 flex items-center justify-between">
                                         <span className="text-sm font-semibold text-orange-600 dark:text-orange-400">
@@ -2219,7 +2219,7 @@ function WorkflowBuilderInner() {
                                             },
                                           });
                                         }}
-                                        className="border-border focus:ring-ring mb-2 w-full rounded-xl border bg-card px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:bg-accent dark:text-white"
+                                        className="border-border focus:ring-ring bg-card dark:bg-accent mb-2 w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
                                         placeholder="Case name (optional)"
                                       />
                                       {(selectedNode.data.config?.mode ||
@@ -2255,7 +2255,7 @@ function WorkflowBuilderInner() {
                                                 },
                                               });
                                             }}
-                                            className="border-border focus:ring-ring w-full rounded-xl border bg-card px-3 py-2 text-sm outline-none focus:ring-2 dark:bg-accent dark:text-white"
+                                            className="border-border focus:ring-ring bg-card dark:bg-accent w-full rounded-xl border px-3 py-2 text-sm outline-none focus:ring-2 dark:text-white"
                                             placeholder="Variable"
                                           />
                                           <Select
@@ -2347,7 +2347,7 @@ function WorkflowBuilderInner() {
                                                 },
                                               });
                                             }}
-                                            className="border-border focus:ring-ring w-full rounded-xl border bg-card px-3 py-2 text-sm outline-none focus:ring-2 dark:bg-accent dark:text-white"
+                                            className="border-border focus:ring-ring bg-card dark:bg-accent w-full rounded-xl border px-3 py-2 text-sm outline-none focus:ring-2 dark:text-white"
                                             placeholder="Value"
                                           />
                                         </div>
@@ -2372,7 +2372,7 @@ function WorkflowBuilderInner() {
                                                 },
                                               });
                                             }}
-                                            className="border-border focus:ring-ring w-full rounded-xl border bg-card px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:bg-accent dark:text-white"
+                                            className="border-border focus:ring-ring bg-card dark:bg-accent w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
                                             rows={2}
                                             placeholder="Enter condition, e.g. input == 5"
                                           />
@@ -2414,7 +2414,7 @@ function WorkflowBuilderInner() {
                                       },
                                     });
                                   }}
-                                  className="flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-600 transition-colors hover:bg-accent dark:text-gray-400"
+                                  className="hover:bg-accent flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-600 transition-colors dark:text-gray-400"
                                 >
                                   <Plus size={14} />
                                   Add
diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
index 9897498a..98035971 100644
--- a/frontend/src/components/Dropdown.tsx
+++ b/frontend/src/components/Dropdown.tsx
@@ -157,7 +157,7 @@ function Dropdown<T extends DropdownOption>({
                 return (
                   <div
                     key={i}
-                    className={`flex cursor-pointer items-center justify-between hover:bg-muted ${active ? 'bg-muted' : ''}`}
+                    className={`flex cursor-pointer items-center justify-between hover:bg-accent ${active ? 'bg-accent' : ''}`}
                   >
                     <span
                       onClick={() => {
diff --git a/frontend/src/components/DropdownModel.tsx b/frontend/src/components/DropdownModel.tsx
index a3738db8..62f2f59e 100644
--- a/frontend/src/components/DropdownModel.tsx
+++ b/frontend/src/components/DropdownModel.tsx
@@ -80,7 +80,7 @@ export default function DropdownModel() {
   return (
     <div ref={dropdownRef}>
       <div
-        className={`border-border text-foreground mx-auto flex w-full cursor-pointer items-center justify-between border bg-transparent px-3 py-4 ${isOpen ? 'rounded-t-4xl' : 'rounded-4xl'}`}
+        className={`text-foreground bg-muted dark:bg-card mx-auto flex w-full cursor-pointer items-center justify-between px-3 py-4 ${isOpen ? 'rounded-t-4xl' : 'rounded-4xl'}`}
         onClick={() => setIsOpen(!isOpen)}
       >
         {selectedModel?.display_name ? (
@@ -101,7 +101,7 @@ export default function DropdownModel() {
         />
       </div>
       {isOpen && (
-        <div className="no-scrollbar border-border bg-card absolute right-0 left-0 z-20 -mt-1 max-h-52 w-full overflow-y-auto rounded-b-3xl border border-t-0 shadow-md">
+        <div className="no-scrollbar bg-muted dark:bg-card absolute right-0 left-0 z-20 -mt-1 max-h-52 w-full overflow-y-auto rounded-b-3xl shadow-md">
           {availableModels && (availableModels?.length ?? 0) > 0 ? (
             availableModels.map((model: Model) => (
               <div
@@ -110,7 +110,7 @@ export default function DropdownModel() {
                   dispatch(setSelectedModel(model));
                   setIsOpen(false);
                 }}
-                className={`border-border/50 hover:bg-muted flex h-10 w-full cursor-pointer items-center justify-between border-t`}
+                className={`border-border/30 hover:bg-accent flex h-10 w-full cursor-pointer items-center justify-between border-t`}
               >
                 <div className="flex w-full items-center justify-between">
                   <p className="flex-1 truncate py-3 pr-2 pl-5">
@@ -127,7 +127,7 @@ export default function DropdownModel() {
               </div>
             ))
           ) : (
-            <div className="border-border/50 flex h-10 w-full items-center border-t">
+            <div className="border-border/30 flex h-10 w-full items-center border-t">
               <p className="pl-5 text-sm text-muted-foreground">No models available</p>
             </div>
           )}
diff --git a/frontend/src/components/MessageInput.tsx b/frontend/src/components/MessageInput.tsx
index 14b75db1..02a0022b 100644
--- a/frontend/src/components/MessageInput.tsx
+++ b/frontend/src/components/MessageInput.tsx
@@ -1438,7 +1438,7 @@ export default function MessageInput({
         onChange={handleVoiceFileAttachment}
       />
 
-      <div className="border-border bg-card relative flex w-full flex-col rounded-[23px] border">
+      <div className="border-border bg-card dark:bg-transparent relative flex w-full flex-col rounded-[23px] border">
         <div className="flex flex-wrap gap-1.5 px-2 py-2 sm:gap-2 sm:px-3">
           {attachments.map((attachment) => {
             return (
diff --git a/frontend/src/conversation/SharedConversation.tsx b/frontend/src/conversation/SharedConversation.tsx
index 9f424446..556f18f7 100644
--- a/frontend/src/conversation/SharedConversation.tsx
+++ b/frontend/src/conversation/SharedConversation.tsx
@@ -138,7 +138,7 @@ export const SharedConversation = () => {
         twitterTitle={title}
         twitterDescription="Shared conversations with DocsGPT"
       />
-      <div className="bg-card flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden">
+      <div className="bg-background flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden">
         <div className="dark:border-b-silver w-full max-w-[1200px] border-b p-2 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
           <h1 className="font-semi-bold text-foreground dark:text-foreground text-4xl">
             {title}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index ca841903..a2b64818 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -868,7 +868,7 @@ Avoid over-scrolling in mobile browsers
 
 :root {
   --radius: 0.625rem;
-  --background: #fbfbfb;
+  --background: #ffffff;
   --foreground: #171717;
   --card: #ffffff;
   --card-foreground: #171717;
@@ -880,7 +880,7 @@ Avoid over-scrolling in mobile browsers
   --secondary-foreground: #7d54d1;
   --muted: #f6f6f6;
   --muted-foreground: #737373;
-  --accent: #f0eef6;
+  --accent: #ececec;
   --accent-foreground: #171717;
   --destructive: #ef4444;
   --border: #d9d9d9;
@@ -891,11 +891,11 @@ Avoid over-scrolling in mobile browsers
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: #ffffff;
+  --sidebar: #fbfbfb;
   --sidebar-foreground: #171717;
   --sidebar-primary: #7d54d1;
   --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: #f0eef6;
+  --sidebar-accent: #ececec;
   --sidebar-accent-foreground: #171717;
   --sidebar-border: #d9d9d9;
   --sidebar-ring: #7d54d1;
@@ -907,38 +907,38 @@ Avoid over-scrolling in mobile browsers
 */
 
 .dark {
-  --background: #0e0e0e;
+  --background: #222327;
   --foreground: #fafafa;
-  --card: #222222;
+  --card: #2b2c31;
   --card-foreground: #fafafa;
-  --popover: #2c2c2c;
+  --popover: #2b2c31;
   --popover-foreground: #fafafa;
   --primary: #976af3;
   --primary-foreground: #ffffff;
-  --secondary: #2c2c2c;
+  --secondary: #2b2c31;
   --secondary-foreground: #e0e0e0;
-  --muted: #2c2c2c;
+  --muted: #35363b;
   --muted-foreground: #a1a1a1;
-  --accent: #383838;
+  --accent: #3e3f45;
   --accent-foreground: #fafafa;
   --destructive: #dc2626;
-  --border: #404040;
-  --input: #404040;
+  --border: #44454c;
+  --input: #44454c;
   --ring: #976af3;
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: #0d0d0d;
+  --sidebar: #161616;
   --sidebar-foreground: #fafafa;
   --sidebar-primary: #976af3;
   --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: #2c2c2c;
+  --sidebar-accent: #222327;
   --sidebar-accent-foreground: #fafafa;
-  --sidebar-border: #404040;
+  --sidebar-border: #2b2c31;
   --sidebar-ring: #976af3;
-  --answer-bubble: #32333b;
+  --answer-bubble: #2e303e;
 }
 
 /*