diff --git a/frontend/src/app/agent/components/agent-view/strategy-agent-area.tsx b/frontend/src/app/agent/components/agent-view/strategy-agent-area.tsx
index 9cf09f962..0970aed33 100644
--- a/frontend/src/app/agent/components/agent-view/strategy-agent-area.tsx
+++ b/frontend/src/app/agent/components/agent-view/strategy-agent-area.tsx
@@ -27,10 +27,24 @@ const EmptyIllustration = () => (
     xmlns="http://www.w3.org/2000/svg"
     className="h-[185px] w-[258px]"
   >
-    <rect x="40" y="30" width="178" height="125" rx="8" fill="#F3F4F6" />
-    <rect x="60" y="60" width="138" height="8" rx="4" fill="#E5E7EB" />
-    <rect x="60" y="80" width="100" height="8" rx="4" fill="#E5E7EB" />
-    <rect x="60" y="100" width="120" height="8" rx="4" fill="#E5E7EB" />
+    <rect
+      x="40"
+      y="30"
+      width="178"
+      height="125"
+      rx="8"
+      className="fill-muted"
+    />
+    <rect x="60" y="60" width="138" height="8" rx="4" className="fill-border" />
+    <rect x="60" y="80" width="100" height="8" rx="4" className="fill-border" />
+    <rect
+      x="60"
+      y="100"
+      width="120"
+      height="8"
+      rx="4"
+      className="fill-border"
+    />
   </svg>
 );
 
@@ -79,9 +93,9 @@ const StrategyAgentArea: FC<AgentViewProps> = () => {
   if (isLoadingStrategies) return null;
 
   return (
-    <div className="flex flex-1 overflow-hidden">
+    <div className="flex flex-1 overflow-hidden bg-muted/30">
       {/* Left section: Strategy list */}
-      <div className="flex w-96 flex-col gap-4 border-r py-6 *:px-6">
+      <div className="flex w-96 flex-col gap-4 border-r bg-card py-6 *:px-6">
         <p className="font-semibold text-base">{t("strategy.title")}</p>
 
         {strategies && strategies.length > 0 ? (
@@ -99,7 +113,7 @@ const StrategyAgentArea: FC<AgentViewProps> = () => {
         ) : (
           <div className="flex flex-1 flex-col items-center justify-center gap-4">
             <EmptyIllustration />
-            <div className="flex flex-col gap-3 text-center text-base text-gray-400">
+            <div className="flex flex-col gap-3 text-center text-base text-muted-foreground">
               <p>{t("strategy.noStrategies")}</p>
               <p>{t("strategy.createFirst")}</p>
             </div>
@@ -135,7 +149,7 @@ const StrategyAgentArea: FC<AgentViewProps> = () => {
         ) : (
           <div className="flex size-full flex-col items-center justify-center gap-8">
             <EmptyIllustration />
-            <p className="font-normal text-base text-gray-400">
+            <p className="font-normal text-base text-muted-foreground">
               {t("strategy.noStrategies")}
             </p>
           </div>
diff --git a/frontend/src/app/agent/components/chat-conversation/chat-conversation-header.tsx b/frontend/src/app/agent/components/chat-conversation/chat-conversation-header.tsx
index 03398376f..98fd72ffa 100644
--- a/frontend/src/app/agent/components/chat-conversation/chat-conversation-header.tsx
+++ b/frontend/src/app/agent/components/chat-conversation/chat-conversation-header.tsx
@@ -26,7 +26,7 @@ const ChatConversationHeader: FC<ChatConversationHeaderProps> = ({ agent }) => {
 
         {/* Agent Info */}
         <div className="flex flex-col gap-1.5">
-          <h1 className="font-semibold text-gray-950 text-lg">
+          <h1 className="font-semibold text-foreground text-lg">
             {agent.display_name}
           </h1>
           <TagGroups tags={agent.agent_metadata.tags} />
@@ -40,10 +40,10 @@ const ChatConversationHeader: FC<ChatConversationHeaderProps> = ({ agent }) => {
             <TooltipTrigger asChild>
               <Button
                 variant="secondary"
-                className="size-8 cursor-pointer rounded-lg hover:bg-gray-200"
+                className="size-8 cursor-pointer rounded-lg hover:bg-muted"
                 size="icon"
               >
-                <MessageCircle size={16} className="text-gray-700" />
+                <MessageCircle size={16} className="text-foreground" />
               </Button>
             </TooltipTrigger>
             <TooltipContent>{t("chat.newConversation")}</TooltipContent>
@@ -54,10 +54,10 @@ const ChatConversationHeader: FC<ChatConversationHeaderProps> = ({ agent }) => {
             <TooltipTrigger asChild>
               <Button
                 variant="secondary"
-                className="size-8 cursor-pointer rounded-lg hover:bg-gray-200"
+                className="size-8 cursor-pointer rounded-lg hover:bg-muted"
                 size="icon"
               >
-                <Settings size={16} className="text-gray-700" />
+                <Settings size={16} className="text-foreground" />
               </Button>
             </TooltipTrigger>
             <TooltipContent>{t("chat.settings")}</TooltipContent>
diff --git a/frontend/src/app/agent/components/chat-conversation/chat-input-area.tsx b/frontend/src/app/agent/components/chat-conversation/chat-input-area.tsx
index 4b86e9cc6..49b9043b3 100644
--- a/frontend/src/app/agent/components/chat-conversation/chat-input-area.tsx
+++ b/frontend/src/app/agent/components/chat-conversation/chat-input-area.tsx
@@ -48,9 +48,9 @@ const ChatInputArea: FC<ChatInputAreaProps> = ({
   return (
     <div
       className={cn(
-        "flex flex-col gap-2 rounded-2xl bg-white p-4",
-        "border border-gray-200 shadow-[0px_4px_20px_8px_rgba(17,17,17,0.04)]",
-        "focus-within:border-gray-300",
+        "flex flex-col gap-2 rounded-2xl bg-card p-4",
+        "border border-border shadow-[0px_4px_20px_8px_rgba(17,17,17,0.04)]",
+        "focus-within:border-ring",
         isWelcomeVariant && "w-2/3 min-w-[600px]",
         !isWelcomeVariant && "w-full",
         className,
@@ -72,7 +72,7 @@ const ChatInputArea: FC<ChatInputAreaProps> = ({
         disabled={disabled || !value.trim()}
         aria-label="Send message"
       >
-        <ArrowUp size={16} className="text-white" />
+        <ArrowUp size={16} className="text-primary-foreground" />
       </Button>
     </div>
   );
diff --git a/frontend/src/app/agent/components/chat-conversation/chat-item-area.tsx b/frontend/src/app/agent/components/chat-conversation/chat-item-area.tsx
index 0355da699..3ca2b893f 100644
--- a/frontend/src/app/agent/components/chat-conversation/chat-item-area.tsx
+++ b/frontend/src/app/agent/components/chat-conversation/chat-item-area.tsx
@@ -28,9 +28,13 @@ const ChatItemArea: FC<ChatItemAreaProps> = ({ items }) => {
         >
           <div
             id="chat-item"
-            className={cn("max-w-[80%] rounded-2xl px-4", {
-              "ml-auto bg-gray-50 py-2.5": item.role === "user",
-            })}
+            className={cn(
+              "max-w-[80%] rounded-2xl px-4 text-foreground dark:text-white",
+              "dark:[&_a:hover]:text-sky-200 dark:[&_a]:text-sky-300 dark:[&_em]:text-white dark:[&_h1]:text-white dark:[&_h2]:text-white dark:[&_h3]:text-white dark:[&_h4]:text-white dark:[&_h5]:text-white dark:[&_h6]:text-white dark:[&_li]:text-white dark:[&_p]:text-white dark:[&_span]:text-white dark:[&_strong]:text-white",
+              {
+                "ml-auto bg-muted py-2.5": item.role === "user",
+              },
+            )}
           >
             {/* Render different message types based on payload structure */}
             {(() => {
diff --git a/frontend/src/app/agent/components/chat-conversation/chat-section-component.tsx b/frontend/src/app/agent/components/chat-conversation/chat-section-component.tsx
index 897fe5df6..7e9005a5d 100644
--- a/frontend/src/app/agent/components/chat-conversation/chat-section-component.tsx
+++ b/frontend/src/app/agent/components/chat-conversation/chat-section-component.tsx
@@ -42,18 +42,18 @@ const ScheduledTaskResultComponent: FC<{ tasks: Record<string, TaskView> }> = ({
   }, [taskList, selectedTaskId]);
 
   return selectedItemContent ? (
-    <section className="flex flex-1 flex-col border-gray-200 border-l px-5 py-6">
+    <section className="flex flex-1 flex-col border-border border-l px-5 py-6">
       <BackButton className="mb-3" onClick={() => setSelectedItemContent("")} />
       <div className="scroll-container flex-1">
         <MarkdownRenderer content={selectedItemContent} />
       </div>
     </section>
   ) : (
-    <section className="flex flex-1 flex-col gap-5 border-gray-200 border-l px-5 py-6">
+    <section className="flex flex-1 flex-col gap-5 border-border border-l px-5 py-6">
       {/* Task Selector */}
       {taskList.length > 0 && (
         <Select value={selectedTaskId} onValueChange={setSelectedTaskId}>
-          <SelectTrigger className="rounded-lg bg-gray-200 p-1.5">
+          <SelectTrigger className="rounded-lg bg-muted p-1.5">
             <SelectValue placeholder="Select a task" />
           </SelectTrigger>
           <SelectContent>
diff --git a/frontend/src/app/agent/components/chat-conversation/chat-streaming-indicator.tsx b/frontend/src/app/agent/components/chat-conversation/chat-streaming-indicator.tsx
index 6dc51fe44..ef99d2b01 100644
--- a/frontend/src/app/agent/components/chat-conversation/chat-streaming-indicator.tsx
+++ b/frontend/src/app/agent/components/chat-conversation/chat-streaming-indicator.tsx
@@ -3,14 +3,14 @@ import { type FC, memo } from "react";
 const StreamingIndicator: FC = () => {
   return (
     <output
-      className="flex items-center gap-2 text-gray-500 text-sm"
+      className="flex items-center gap-2 text-muted-foreground text-sm"
       aria-live="polite"
       aria-label="AI is thinking"
     >
       <div className="flex space-x-1" aria-hidden="true">
-        <div className="h-2 w-2 animate-bounce rounded-full bg-gray-400 delay-0" />
-        <div className="h-2 w-2 animate-bounce rounded-full bg-gray-400 delay-150" />
-        <div className="h-2 w-2 animate-bounce rounded-full bg-gray-400 delay-300" />
+        <div className="h-2 w-2 animate-bounce rounded-full bg-muted-foreground delay-0" />
+        <div className="h-2 w-2 animate-bounce rounded-full bg-muted-foreground delay-150" />
+        <div className="h-2 w-2 animate-bounce rounded-full bg-muted-foreground delay-300" />
       </div>
       <span>AI is thinking...</span>
     </output>
diff --git a/frontend/src/app/agent/components/chat-conversation/chat-welcome-screen.tsx b/frontend/src/app/agent/components/chat-conversation/chat-welcome-screen.tsx
index 0ae690a0f..47bec07de 100644
--- a/frontend/src/app/agent/components/chat-conversation/chat-welcome-screen.tsx
+++ b/frontend/src/app/agent/components/chat-conversation/chat-welcome-screen.tsx
@@ -23,7 +23,7 @@ const ChatWelcomeScreen: FC<ChatWelcomeScreenProps> = ({
 
       {/* Welcome content */}
       <div className="flex flex-1 flex-col items-center justify-center gap-12">
-        <h1 className="text-center font-semibold text-3xl text-gray-950 leading-12">
+        <h1 className="text-center font-semibold text-3xl text-foreground leading-12">
           {title}
         </h1>
 
@@ -41,37 +41,42 @@ const ChatWelcomeScreen: FC<ChatWelcomeScreenProps> = ({
 };
 
 const ChatBackground = () => (
-  <div className="absolute inset-0 -z-10 overflow-hidden opacity-30">
+  <div className="absolute inset-0 -z-10 overflow-hidden opacity-30 dark:opacity-15">
     {[
       {
         left: "12%",
         top: "50%",
         size: "h-[40vh] w-[18vw]",
-        colors: "from-yellow-100 to-yellow-200",
+        colors:
+          "from-yellow-100 to-yellow-200 dark:from-yellow-900/40 dark:to-yellow-800/30",
       },
       {
         left: "28%",
         top: "50%",
         size: "h-[38vh] w-[16vw]",
-        colors: "from-green-100 to-green-200",
+        colors:
+          "from-green-100 to-green-200 dark:from-green-900/40 dark:to-green-800/30",
       },
       {
         left: "45%",
         top: "50%",
         size: "h-[42vh] w-[19vw]",
-        colors: "from-teal-100 to-teal-200",
+        colors:
+          "from-teal-100 to-teal-200 dark:from-teal-900/40 dark:to-teal-800/30",
       },
       {
         left: "62%",
         top: "50%",
         size: "h-[40vh] w-[18vw]",
-        colors: "from-blue-100 to-blue-200",
+        colors:
+          "from-blue-100 to-blue-200 dark:from-blue-900/40 dark:to-blue-800/30",
       },
       {
         left: "78%",
         top: "50%",
         size: "h-[35vh] w-[15vw]",
-        colors: "from-purple-100 to-purple-200",
+        colors:
+          "from-purple-100 to-purple-200 dark:from-purple-900/40 dark:to-purple-800/30",
       },
     ].map((blur) => (
       <div
diff --git a/frontend/src/app/agent/components/strategy-items/modals/create-strategy-modal.tsx b/frontend/src/app/agent/components/strategy-items/modals/create-strategy-modal.tsx
index 40542004f..3bc4dd527 100644
--- a/frontend/src/app/agent/components/strategy-items/modals/create-strategy-modal.tsx
+++ b/frontend/src/app/agent/components/strategy-items/modals/create-strategy-modal.tsx
@@ -234,7 +234,7 @@ const CreateStrategyModal: FC<CreateStrategyModalProps> = ({
               type="button"
               variant="outline"
               onClick={currentStep === 1 ? resetAll : handleBack}
-              className="border-gray-100 py-4 font-semibold text-base"
+              className="py-4 font-semibold text-base"
             >
               {currentStep === 1
                 ? t("strategy.action.cancel")
@@ -255,7 +255,7 @@ const CreateStrategyModal: FC<CreateStrategyModalProps> = ({
                     await form3.handleSubmit();
                 }
               }}
-              className="relative py-4 font-semibold text-base text-white hover:bg-gray-800"
+              className="relative py-4 font-semibold text-base"
             >
               {isCreatingStrategy && <Spinner className="absolute left-4" />}
               {currentStep === 3
diff --git a/frontend/src/app/agent/components/strategy-items/modals/new-prompt-modal.tsx b/frontend/src/app/agent/components/strategy-items/modals/new-prompt-modal.tsx
index 4b6be5210..05f6b7afb 100644
--- a/frontend/src/app/agent/components/strategy-items/modals/new-prompt-modal.tsx
+++ b/frontend/src/app/agent/components/strategy-items/modals/new-prompt-modal.tsx
@@ -65,7 +65,7 @@ const NewPromptModal: FC<NewPromptModalProps> = ({ onSave, children }) => {
         showCloseButton={false}
         aria-describedby={undefined}
       >
-        <DialogTitle className="flex items-center justify-between font-medium text-gray-950 text-lg">
+        <DialogTitle className="flex items-center justify-between font-medium text-foreground text-lg">
           Create New Prompt
           <CloseButton onClick={handleCancel} />
         </DialogTitle>
@@ -76,7 +76,7 @@ const NewPromptModal: FC<NewPromptModalProps> = ({ onSave, children }) => {
             <form.Field name="name">
               {(field) => (
                 <Field>
-                  <FieldLabel className="font-medium text-base text-gray-950">
+                  <FieldLabel className="font-medium text-base text-foreground">
                     Prompt Name
                   </FieldLabel>
                   <Input
@@ -94,7 +94,7 @@ const NewPromptModal: FC<NewPromptModalProps> = ({ onSave, children }) => {
             <form.Field name="content">
               {(field) => (
                 <Field>
-                  <FieldLabel className="font-medium text-base text-gray-950">
+                  <FieldLabel className="font-medium text-base text-foreground">
                     Prompt Template
                   </FieldLabel>
                   <Textarea
@@ -122,7 +122,7 @@ const NewPromptModal: FC<NewPromptModalProps> = ({ onSave, children }) => {
           </Button>
           <Button
             type="submit"
-            className="flex-1 py-4 font-semibold text-base text-white hover:bg-gray-800"
+            className="flex-1 py-4 font-semibold text-base"
             onClick={form.handleSubmit}
             disabled={isSaving}
           >
diff --git a/frontend/src/app/agent/components/strategy-items/modals/share-portfolio-modal.tsx b/frontend/src/app/agent/components/strategy-items/modals/share-portfolio-modal.tsx
index 3b351266e..5896d5341 100644
--- a/frontend/src/app/agent/components/strategy-items/modals/share-portfolio-modal.tsx
+++ b/frontend/src/app/agent/components/strategy-items/modals/share-portfolio-modal.tsx
@@ -121,8 +121,10 @@ const SharePortfolioModal: FC<{
         {/* Card to be captured */}
         <div
           ref={cardRef}
-          className="relative space-y-10 overflow-hidden rounded-2xl border border-gray-200 p-8"
+          className="relative space-y-10 overflow-hidden rounded-2xl border p-8"
           style={{
+            borderColor: "rgba(0, 0, 0, 0.1)",
+            color: "#111827",
             background:
               "linear-gradient(141deg, rgba(255, 255, 255, 0.32) 2.67%, rgba(255, 255, 255, 0.00) 48.22%), radial-gradient(109.08% 168.86% at 54.34% 8.71%, #FFF 0%, #FFF 37.09%, rgba(255, 255, 255, 0.30) 94.85%, rgba(0, 0, 0, 0.00) 100%), linear-gradient(90deg, rgba(255, 36, 61, 0.85) 0.01%, rgba(0, 99, 246, 0.85) 99.77%), #FFF",
           }}
@@ -134,14 +136,17 @@ const SharePortfolioModal: FC<{
                 ValueCell
               </span>
             </div>
-            <p className="font-medium text-black/30 text-sm">
+            <p
+              className="font-medium text-sm"
+              style={{ color: "rgba(0, 0, 0, 0.3)" }}
+            >
               {TimeUtils.now().format(TIME_FORMATS.DATETIME)}
             </p>
           </div>
 
           {/* Main Return */}
           <div className="space-y-4 text-center">
-            <div className="font-normal text-gray-950 text-xl">
+            <div className="font-normal text-xl">
               {TimeUtils.formUTCDiff(data.created_at)}-Day ROI
             </div>
             <div
@@ -155,7 +160,7 @@ const SharePortfolioModal: FC<{
           </div>
 
           {/* Details Grid */}
-          <div className="grid grid-cols-[auto_1fr] gap-y-2 text-nowrap text-gray-950 text-sm [&>span]:text-right">
+          <div className="grid grid-cols-[auto_1fr] gap-y-2 text-nowrap text-sm [&>span]:text-right">
             <p>P&L</p>
             <span style={{ color: stockColors[getChangeType(data.total_pnl)] }}>
               {formatChange(data.total_pnl, "", 2)}
@@ -181,15 +186,27 @@ const SharePortfolioModal: FC<{
             <span>{data.strategy_type}</span>
           </div>
 
-          <div className="flex items-center justify-between rounded-2xl border border-white/60 bg-white/20 p-4 shadow-[0,4px,20px,0,rgba(113,113,113,0.08)] backdrop-blur-sm">
+          <div
+            className="flex items-center justify-between rounded-2xl border p-4 shadow-[0,4px,20px,0,rgba(113,113,113,0.08)] backdrop-blur-sm"
+            style={{
+              borderColor: "rgba(255, 255, 255, 0.6)",
+              backgroundColor: "rgba(255, 255, 255, 0.2)",
+            }}
+          >
             <div className="space-y-1">
-              <div className="font-medium text-black/30 text-sm">Publisher</div>
-              <span className="font-normal text-base text-gray-950">
-                {name}
-              </span>
+              <div
+                className="font-medium text-sm"
+                style={{ color: "rgba(0, 0, 0, 0.3)" }}
+              >
+                Publisher
+              </div>
+              <span className="font-normal text-base">{name}</span>
             </div>
 
-            <div className="font-medium text-black/30 text-sm">
+            <div
+              className="font-medium text-sm"
+              style={{ color: "rgba(0, 0, 0, 0.3)" }}
+            >
               ValueCell.ai
             </div>
           </div>
@@ -199,14 +216,14 @@ const SharePortfolioModal: FC<{
         <div className="mt-6 flex gap-4">
           <Button
             variant="outline"
-            className="h-12 flex-1 rounded-xl border-gray-200 bg-white font-medium text-base hover:bg-gray-50"
+            className="h-12 flex-1 rounded-xl border-border bg-card font-medium text-base hover:bg-muted"
             onClick={() => setOpen(false)}
           >
             Cancel
           </Button>
 
           <Button
-            className="h-12 flex-1 rounded-xl bg-gray-950 font-medium text-base text-white hover:bg-gray-800"
+            className="h-12 flex-1 rounded-xl bg-primary font-medium text-base text-primary-foreground hover:bg-primary/90"
             onClick={handleDownload}
             disabled={isDownloading}
           >
diff --git a/frontend/src/app/agent/components/strategy-items/modals/strategy-detail-modal.tsx b/frontend/src/app/agent/components/strategy-items/modals/strategy-detail-modal.tsx
index 8e6c42d57..bd2a77ef9 100644
--- a/frontend/src/app/agent/components/strategy-items/modals/strategy-detail-modal.tsx
+++ b/frontend/src/app/agent/components/strategy-items/modals/strategy-detail-modal.tsx
@@ -98,13 +98,13 @@ const StrategyDetailModal: FC<StrategyDetailModalProps> = ({ ref }) => {
                   >
                     {numberFixed(strategyDetail.return_rate_pct, 2)}%
                   </div>
-                  <div className="text-gray-500 text-sm">
+                  <div className="text-muted-foreground text-sm">
                     {t("strategy.detail.returnRate")}
                   </div>
                 </div>
               </div>
 
-              <div className="grid grid-cols-[auto_1fr] gap-y-2 text-nowrap text-sm [&>p]:text-gray-500 [&>span]:text-right">
+              <div className="grid grid-cols-[auto_1fr] gap-y-2 text-nowrap text-sm [&>p]:text-muted-foreground [&>span]:text-right">
                 <p>{t("strategy.detail.strategyType")}</p>
                 <span>
                   {t(`strategy.types.${strategyDetail.strategy_type}`)}
@@ -132,10 +132,10 @@ const StrategyDetailModal: FC<StrategyDetailModalProps> = ({ ref }) => {
               </div>
 
               <div className="gap-2">
-                <span className="text-gray-500 text-sm">
+                <span className="text-muted-foreground text-sm">
                   {t("strategy.detail.prompt")}
                 </span>
-                <p className="rounded-md bg-gray-50 p-3 text-gray-700 text-sm">
+                <p className="rounded-md bg-muted p-3 text-foreground text-sm">
                   {strategyDetail.prompt}
                 </p>
               </div>
diff --git a/frontend/src/app/agent/components/strategy-items/modals/view-strategy-modal.tsx b/frontend/src/app/agent/components/strategy-items/modals/view-strategy-modal.tsx
index 8c3399bd2..f95e35e54 100644
--- a/frontend/src/app/agent/components/strategy-items/modals/view-strategy-modal.tsx
+++ b/frontend/src/app/agent/components/strategy-items/modals/view-strategy-modal.tsx
@@ -28,14 +28,14 @@ const ViewStrategyModal: FC<ViewStrategyModalProps> = ({
         showCloseButton={false}
         aria-describedby={undefined}
       >
-        <DialogTitle className="flex items-center justify-between font-medium text-gray-950 text-lg">
+        <DialogTitle className="flex items-center justify-between font-medium text-foreground text-lg">
           {prompt.name}
           <DialogClose asChild>
             <CloseButton />
           </DialogClose>
         </DialogTitle>
 
-        <p className="scroll-container whitespace-pre-line font-normal text-base text-gray-950 leading-relaxed tracking-wide">
+        <p className="scroll-container whitespace-pre-line font-normal text-base text-foreground leading-relaxed tracking-wide">
           {prompt.content}
         </p>
       </DialogContent>
diff --git a/frontend/src/app/agent/components/strategy-items/portfolio-positions-group.tsx b/frontend/src/app/agent/components/strategy-items/portfolio-positions-group.tsx
index 2ee02c0de..f6bf8b400 100644
--- a/frontend/src/app/agent/components/strategy-items/portfolio-positions-group.tsx
+++ b/frontend/src/app/agent/components/strategy-items/portfolio-positions-group.tsx
@@ -62,7 +62,9 @@ const PositionRow: FC<PositionRowProps> = ({ position }) => {
             src={getCoinCapIcon(position.symbol)}
             callback={ValueCellAgentPng}
           />
-          <p className="font-medium text-gray-950 text-sm">{position.symbol}</p>
+          <p className="font-medium text-foreground text-sm">
+            {position.symbol}
+          </p>
         </div>
       </TableCell>
       <TableCell>
@@ -76,12 +78,14 @@ const PositionRow: FC<PositionRowProps> = ({ position }) => {
         </Badge>
       </TableCell>
       <TableCell>
-        <p className="font-medium text-gray-950 text-sm">
+        <p className="font-medium text-foreground text-sm">
           {position.leverage}X
         </p>
       </TableCell>
       <TableCell>
-        <p className="font-medium text-gray-950 text-sm">{position.quantity}</p>
+        <p className="font-medium text-foreground text-sm">
+          {position.quantity}
+        </p>
       </TableCell>
       <TableCell>
         <p
@@ -150,7 +154,7 @@ const PortfolioPositionsGroup: FC<PortfolioPositionsGroupProps> = ({
       {/* Portfolio Value History Section */}
       <div className="flex flex-1 flex-col gap-4">
         <div className="flex items-center justify-between">
-          <h3 className="font-semibold text-base text-gray-950">
+          <h3 className="font-semibold text-base text-foreground">
             {t("strategy.portfolio.title")}
           </h3>
           {isTauriApp &&
@@ -191,28 +195,28 @@ const PortfolioPositionsGroup: FC<PortfolioPositionsGroupProps> = ({
         </div>
 
         <div className="grid grid-cols-3 gap-4 text-nowrap">
-          <div className="rounded-lg bg-gray-50 p-4">
-            <p className="text-gray-500 text-sm">
+          <div className="rounded-lg bg-muted p-4">
+            <p className="text-muted-foreground text-sm">
               {t("strategy.portfolio.totalEquity")}
             </p>
-            <p className="mt-1 font-semibold text-gray-900 text-lg">
+            <p className="mt-1 font-semibold text-foreground text-lg">
               {numberFixed(summary?.total_value, 4)}
             </p>
           </div>
-          <div className="rounded-lg bg-gray-50 p-4">
-            <p className="text-gray-500 text-sm">
+          <div className="rounded-lg bg-muted p-4">
+            <p className="text-muted-foreground text-sm">
               {t("strategy.portfolio.availableBalance")}
             </p>
-            <p className="mt-1 font-semibold text-gray-900 text-lg">
+            <p className="mt-1 font-semibold text-foreground text-lg">
               {numberFixed(summary?.cash, 4)}
             </p>
           </div>
-          <div className="rounded-lg bg-gray-50 p-4">
-            <p className="text-gray-500 text-sm">
+          <div className="rounded-lg bg-muted p-4">
+            <p className="text-muted-foreground text-sm">
               {t("strategy.portfolio.totalPnl")}
             </p>
             <p
-              className="mt-1 font-semibold text-gray-900 text-lg"
+              className="mt-1 font-semibold text-foreground text-lg"
               style={{ color: stockColors[changeType] }}
             >
               {numberFixed(summary?.total_pnl, 4)}
@@ -224,16 +228,16 @@ const PortfolioPositionsGroup: FC<PortfolioPositionsGroupProps> = ({
           {hasPriceCurve ? (
             <MultiLineChart data={priceCurve} showLegend={false} />
           ) : (
-            <div className="flex h-full items-center justify-center rounded-xl bg-gray-50">
+            <div className="flex h-full items-center justify-center rounded-xl bg-muted">
               <div className="flex flex-col items-center gap-4 px-6 py-12 text-center">
-                <div className="flex size-14 items-center justify-center rounded-full bg-gray-100">
-                  <LineChart className="size-7 text-gray-400" />
+                <div className="flex size-14 items-center justify-center rounded-full bg-muted">
+                  <LineChart className="size-7 text-muted-foreground" />
                 </div>
                 <div className="flex flex-col gap-2">
-                  <p className="font-semibold text-base text-gray-700">
+                  <p className="font-semibold text-base text-foreground">
                     {t("strategy.portfolio.noData")}
                   </p>
-                  <p className="max-w-xs text-gray-500 text-sm leading-relaxed">
+                  <p className="max-w-xs text-muted-foreground text-sm leading-relaxed">
                     {t("strategy.portfolio.noDataDesc")}
                   </p>
                 </div>
@@ -245,7 +249,7 @@ const PortfolioPositionsGroup: FC<PortfolioPositionsGroupProps> = ({
 
       {/* Positions Section */}
       <div className="flex flex-col gap-4">
-        <h3 className="font-semibold text-base text-gray-950">
+        <h3 className="font-semibold text-base text-foreground">
           {t("strategy.positions.title")}
         </h3>
         {hasPositions ? (
@@ -253,27 +257,27 @@ const PortfolioPositionsGroup: FC<PortfolioPositionsGroupProps> = ({
             <TableHeader>
               <TableRow>
                 <TableHead>
-                  <p className="font-normal text-gray-400 text-sm">
+                  <p className="font-normal text-muted-foreground text-sm">
                     {t("strategy.positions.symbol")}
                   </p>
                 </TableHead>
                 <TableHead>
-                  <p className="font-normal text-gray-400 text-sm">
+                  <p className="font-normal text-muted-foreground text-sm">
                     {t("strategy.positions.type")}
                   </p>
                 </TableHead>
                 <TableHead>
-                  <p className="font-normal text-gray-400 text-sm">
+                  <p className="font-normal text-muted-foreground text-sm">
                     {t("strategy.positions.leverage")}
                   </p>
                 </TableHead>
                 <TableHead>
-                  <p className="font-normal text-gray-400 text-sm">
+                  <p className="font-normal text-muted-foreground text-sm">
                     {t("strategy.positions.quantity")}
                   </p>
                 </TableHead>
                 <TableHead>
-                  <p className="font-normal text-gray-400 text-sm">
+                  <p className="font-normal text-muted-foreground text-sm">
                     {t("strategy.positions.pnl")}
                   </p>
                 </TableHead>
@@ -289,16 +293,16 @@ const PortfolioPositionsGroup: FC<PortfolioPositionsGroupProps> = ({
             </TableBody>
           </Table>
         ) : (
-          <div className="flex min-h-[240px] items-center justify-center rounded-xl bg-gray-50">
+          <div className="flex min-h-[240px] items-center justify-center rounded-xl bg-muted">
             <div className="flex flex-col items-center gap-4 px-6 py-10 text-center">
-              <div className="flex size-12 items-center justify-center rounded-full bg-gray-100">
-                <Wallet className="size-6 text-gray-400" />
+              <div className="flex size-12 items-center justify-center rounded-full bg-muted">
+                <Wallet className="size-6 text-muted-foreground" />
               </div>
               <div className="flex flex-col gap-1.5">
-                <p className="font-semibold text-gray-700 text-sm">
+                <p className="font-semibold text-foreground text-sm">
                   {t("strategy.positions.noOpen")}
                 </p>
-                <p className="max-w-xs text-gray-500 text-xs leading-relaxed">
+                <p className="max-w-xs text-muted-foreground text-xs leading-relaxed">
                   {t("strategy.positions.noOpenDesc")}
                 </p>
               </div>
diff --git a/frontend/src/app/agent/components/strategy-items/strategy-compose-list.tsx b/frontend/src/app/agent/components/strategy-items/strategy-compose-list.tsx
index 705bb4f5e..33526077b 100644
--- a/frontend/src/app/agent/components/strategy-items/strategy-compose-list.tsx
+++ b/frontend/src/app/agent/components/strategy-items/strategy-compose-list.tsx
@@ -35,34 +35,34 @@ const StrategyComposeItem: FC<StrategyComposeItemProps> = ({ compose }) => {
   const [isReasoningOpen, setIsReasoningOpen] = useState(false);
 
   return (
-    <div className="flex flex-col gap-2 rounded-lg border border-gray-100 bg-gray-50 p-4">
+    <div className="flex flex-col gap-2 rounded-lg border border-border bg-muted p-4">
       <div className="flex items-center justify-between">
-        <h3 className="font-bold text-base text-gray-900">
+        <h3 className="font-bold text-base text-foreground">
           {t("strategy.history.cycle", { index: compose.cycle_index })}
         </h3>
-        <span className="text-gray-400 text-xs">
+        <span className="text-muted-foreground text-xs">
           {TimeUtils.formatUTC(compose.created_at, TIME_FORMATS.DATETIME)}
         </span>
       </div>
 
       {/* AI Reasoning Logic */}
-      <p className="text-gray-400 text-xs">
+      <p className="text-muted-foreground text-xs">
         {t("strategy.history.aiReasoning")}
       </p>
       <Collapsible open={isReasoningOpen} onOpenChange={setIsReasoningOpen}>
         <CollapsibleTrigger
           data-active={isReasoningOpen}
-          className="flex w-full cursor-pointer items-start justify-between rounded-md border-gradient bg-white px-3 py-2 text-left"
+          className="flex w-full cursor-pointer items-start justify-between rounded-md border-gradient bg-card px-3 py-2 text-left"
         >
           <span
-            className={`text-gray-700 text-sm leading-relaxed ${
+            className={`text-foreground text-sm leading-relaxed ${
               isReasoningOpen ? "" : "line-clamp-1"
             }`}
           >
             {compose.rationale}
           </span>
           <ChevronDown
-            className={`mt-1 ml-2 size-4 shrink-0 text-gray-400 transition-transform duration-200 ${
+            className={`mt-1 ml-2 size-4 shrink-0 text-muted-foreground transition-transform duration-200 ${
               isReasoningOpen ? "rotate-180" : ""
             }`}
           />
@@ -72,7 +72,7 @@ const StrategyComposeItem: FC<StrategyComposeItemProps> = ({ compose }) => {
       {/* Perform Operation */}
       {compose.actions.length > 0 && (
         <>
-          <p className="text-gray-400 text-xs">
+          <p className="text-muted-foreground text-xs">
             {t("strategy.history.operation")}
           </p>
           {compose.actions.map((action) => (
@@ -111,14 +111,14 @@ const ActionItem: FC<{ action: StrategyAction }> = ({ action }) => {
   return (
     <HoverCard openDelay={300}>
       <HoverCardTrigger asChild>
-        <Button className="flex items-center justify-between rounded-md border-gradient bg-white p-3">
+        <Button className="flex items-center justify-between rounded-md border-gradient bg-card p-3">
           <div className="flex items-center gap-2">
             <PngIcon
               src={getCoinCapIcon(action.symbol)}
               className="size-5"
               callback={ValueCellAgentPng}
             />
-            <span className="font-medium text-gray-950 text-sm">
+            <span className="font-medium text-foreground text-sm">
               {action.symbol}
             </span>
 
@@ -137,7 +137,7 @@ const ActionItem: FC<{ action: StrategyAction }> = ({ action }) => {
         </Button>
       </HoverCardTrigger>
       <HoverCardContent
-        className="rounded-xl border border-gray-200 p-4 shadow-[0_-4px_100px_8px_rgba(17,17,17,0.08)]"
+        className="rounded-xl border border-border p-4 shadow-[0_-4px_100px_8px_rgba(17,17,17,0.08)]"
         side="right"
       >
         {/* HoverCard Header */}
@@ -148,7 +148,7 @@ const ActionItem: FC<{ action: StrategyAction }> = ({ action }) => {
               className="size-5"
               callback={ValueCellAgentPng}
             />
-            <span className="font-bold text-base text-gray-900">
+            <span className="font-bold text-base text-foreground">
               {action.symbol}
             </span>
           </div>
@@ -163,16 +163,16 @@ const ActionItem: FC<{ action: StrategyAction }> = ({ action }) => {
 
         {/* Popover Tags */}
         <div className="mb-4 flex gap-2">
-          <span className="rounded-md bg-gray-100 px-2 py-1 font-medium text-gray-900 text-xs">
+          <span className="rounded-md bg-muted px-2 py-1 font-medium text-foreground text-xs">
             {action.action_display}
           </span>
-          <span className="rounded-md bg-gray-100 px-2 py-1 font-medium text-gray-900 text-xs">
+          <span className="rounded-md bg-muted px-2 py-1 font-medium text-foreground text-xs">
             {action.leverage}X
           </span>
         </div>
 
         {/* Data Grid */}
-        <div className="mb-4 grid grid-cols-[auto_1fr] gap-y-1 text-nowrap text-gray-500 text-xs">
+        <div className="mb-4 grid grid-cols-[auto_1fr] gap-y-1 text-nowrap text-muted-foreground text-xs">
           <span>{t("strategy.history.details.time")}</span>
           <span className="text-right">
             {TimeUtils.formatUTC(
@@ -197,11 +197,11 @@ const ActionItem: FC<{ action: StrategyAction }> = ({ action }) => {
         </div>
 
         {/* Reasoning Box */}
-        <div className="rounded-lg bg-blue-50 p-3">
-          <p className="mb-1 font-medium text-gray-900 text-xs">
+        <div className="rounded-lg bg-muted p-3">
+          <p className="mb-1 font-medium text-foreground text-xs">
             {t("strategy.history.details.reasoning")}
           </p>
-          <p className="text-gray-500 text-xs leading-relaxed">
+          <p className="text-muted-foreground text-xs leading-relaxed">
             {action.rationale}
           </p>
         </div>
@@ -221,13 +221,13 @@ const StrategyComposeList: FC<StrategyComposeListProps> = ({
 }) => {
   const { t } = useTranslation();
   return (
-    <div className="flex w-[420px] flex-col overflow-hidden border-r bg-white">
+    <div className="flex w-[420px] flex-col overflow-hidden border-border border-r bg-card">
       <div className="flex items-center justify-between px-6 py-4">
-        <h3 className="font-semibold text-base text-gray-950">
+        <h3 className="font-semibold text-base text-foreground">
           {t("strategy.history.title")}
         </h3>
 
-        <p className="rounded-md bg-gray-100 px-2.5 py-1 font-medium text-gray-950 text-sm">
+        <p className="rounded-md bg-muted px-2.5 py-1 font-medium text-foreground text-sm">
           {tradingMode === "live"
             ? t("strategy.history.live")
             : t("strategy.history.virtual")}
@@ -244,14 +244,14 @@ const StrategyComposeList: FC<StrategyComposeListProps> = ({
         ) : (
           <div className="flex flex-1 items-center justify-center">
             <div className="flex flex-col items-center gap-4 px-6 py-12 text-center">
-              <div className="flex size-14 items-center justify-center rounded-full bg-gray-100">
-                <History className="size-7 text-gray-400" />
+              <div className="flex size-14 items-center justify-center rounded-full bg-muted">
+                <History className="size-7 text-muted-foreground" />
               </div>
               <div className="flex flex-col gap-2">
-                <p className="font-semibold text-base text-gray-700">
+                <p className="font-semibold text-base text-foreground">
                   {t("strategy.history.empty.title")}
                 </p>
-                <p className="max-w-[280px] text-gray-500 text-sm leading-relaxed">
+                <p className="max-w-[280px] text-muted-foreground text-sm leading-relaxed">
                   {t("strategy.history.empty.desc")}
                 </p>
               </div>
diff --git a/frontend/src/app/agent/components/strategy-items/trade-strategy-group.tsx b/frontend/src/app/agent/components/strategy-items/trade-strategy-group.tsx
index 16ea1b930..78ff2e668 100644
--- a/frontend/src/app/agent/components/strategy-items/trade-strategy-group.tsx
+++ b/frontend/src/app/agent/components/strategy-items/trade-strategy-group.tsx
@@ -82,10 +82,10 @@ const TradeStrategyCard: FC<TradeStrategyCardProps> = ({
     >
       {/* Header: Name and Time */}
       <div className="flex items-center justify-between">
-        <p className="font-medium text-base text-gray-950 leading-[22px]">
+        <p className="font-medium text-base text-foreground leading-[22px]">
           {strategy.strategy_name}
         </p>
-        <p className="font-normal text-gray-400 text-xs">
+        <p className="font-normal text-muted-foreground text-xs">
           {TimeUtils.formatUTC(
             strategy.created_at,
             TIME_FORMATS.DATETIME_SHORT,
@@ -95,11 +95,11 @@ const TradeStrategyCard: FC<TradeStrategyCardProps> = ({
 
       <div className="flex items-center gap-2">
         {strategy.strategy_type && (
-          <p className="rounded-sm bg-gray-100 px-2 py-1 text-gray-700 text-xs">
+          <p className="rounded-sm bg-muted px-2 py-1 text-foreground text-xs">
             {t(`strategy.types.${strategy.strategy_type}`)}
           </p>
         )}
-        <p className="rounded-sm bg-gray-100 px-2 py-1 text-gray-700 text-xs">
+        <p className="rounded-sm bg-muted px-2 py-1 text-foreground text-xs">
           {strategy.trading_mode === "live"
             ? t("strategy.status.live")
             : t("strategy.status.virtual")}
@@ -107,7 +107,7 @@ const TradeStrategyCard: FC<TradeStrategyCardProps> = ({
       </div>
 
       {/* Model and Exchange Info */}
-      <div className="flex items-center gap-2 font-medium text-gray-400 text-sm">
+      <div className="flex items-center gap-2 font-medium text-muted-foreground text-sm">
         <p>{strategy.model_id}</p>
         <p>{strategy.exchange_id}</p>
       </div>
@@ -127,7 +127,7 @@ const TradeStrategyCard: FC<TradeStrategyCardProps> = ({
           {strategy.status === "stopped" && strategy.stop_reason ? (
             <Tooltip>
               <TooltipTrigger asChild>
-                <p className="font-medium text-gray-400 text-sm">
+                <p className="font-medium text-muted-foreground text-sm">
                   {t("strategy.status.stopped")}
                 </p>
               </TooltipTrigger>
@@ -147,7 +147,7 @@ const TradeStrategyCard: FC<TradeStrategyCardProps> = ({
                   {strategy.status === "running" && (
                     <SvgIcon name={StrategyStatus} className="size-4" />
                   )}
-                  <p className="font-medium text-gray-700 text-sm">
+                  <p className="font-medium text-foreground text-sm">
                     {strategy.status === "running"
                       ? t("strategy.status.running")
                       : t("strategy.status.stopped")}
@@ -298,16 +298,16 @@ const TradeStrategyGroup: FC<TradeStrategyGroupProps> = ({
           ))}
         </div>
       ) : (
-        <div className="flex w-80 items-center justify-center rounded-xl border-2 border-gray-200 border-dashed bg-gray-50/50">
+        <div className="flex w-80 items-center justify-center rounded-xl border-2 border-border border-dashed bg-muted/50">
           <div className="flex flex-col items-center gap-4 px-6 py-12 text-center">
-            <div className="flex size-14 items-center justify-center rounded-full bg-gray-100">
-              <TrendingUp className="size-7 text-gray-400" />
+            <div className="flex size-14 items-center justify-center rounded-full bg-muted">
+              <TrendingUp className="size-7 text-muted-foreground" />
             </div>
             <div className="flex flex-col gap-2">
-              <p className="font-semibold text-base text-gray-700">
+              <p className="font-semibold text-base text-foreground">
                 {t("strategy.noStrategies")}
               </p>
-              <p className="max-w-xs text-gray-500 text-sm leading-relaxed">
+              <p className="max-w-xs text-muted-foreground text-sm leading-relaxed">
                 {t("strategy.createFirst")}
               </p>
             </div>
diff --git a/frontend/src/app/agent/config.tsx b/frontend/src/app/agent/config.tsx
index b7d17598f..bda55c908 100644
--- a/frontend/src/app/agent/config.tsx
+++ b/frontend/src/app/agent/config.tsx
@@ -30,11 +30,11 @@ export default function AgentConfig() {
       <BackButton />
 
       {/* Agent info and configure button */}
-      <div className="mb-6 flex items-center justify-between rounded-lg bg-gray-50 px-4 py-8">
+      <div className="mb-6 flex items-center justify-between rounded-lg bg-muted px-4 py-8">
         <div className="flex flex-col gap-4">
           <div className="flex items-center gap-4">
             <AgentAvatar agentName={agentName ?? ""} className="size-16" />
-            <h1 className="font-semibold text-4xl leading-9">
+            <h1 className="font-semibold text-4xl text-foreground leading-9">
               {agent?.display_name}
             </h1>
           </div>
@@ -42,7 +42,7 @@ export default function AgentConfig() {
             {agent?.agent_metadata.tags.map((tag) => (
               <span
                 key={tag}
-                className="text-nowrap rounded-md border border-gray-200 px-3 py-1 font-normal text-gray-700 text-xs"
+                className="text-nowrap rounded-md border border-border px-3 py-1 font-normal text-muted-foreground text-xs"
               >
                 {tag}
               </span>
@@ -58,7 +58,7 @@ export default function AgentConfig() {
               </Button>
             )}
             <Link
-              className="flex items-center gap-2 rounded-md bg-black px-5 py-1.5 font-semibold text-base text-white hover:bg-black/80"
+              className="flex items-center gap-2 rounded-md bg-primary px-5 py-1.5 font-semibold text-base text-primary-foreground hover:bg-primary/80"
               to={`/agent/${agentName}`}
             >
               {t("agent.config.chat")} <ArrowRight size={16} />
@@ -66,7 +66,7 @@ export default function AgentConfig() {
           </div>
         ) : (
           <Link
-            className="flex items-center gap-2 rounded-md bg-black px-5 py-3 font-semibold text-base text-white hover:bg-black/80"
+            className="flex items-center gap-2 rounded-md bg-primary px-5 py-3 font-semibold text-base text-primary-foreground hover:bg-primary/80"
             to={`/agent/${agentName}`}
             onClick={handleEnableAgent}
           >
diff --git a/frontend/src/app/home/_layout.tsx b/frontend/src/app/home/_layout.tsx
index 50ceed701..9687675df 100644
--- a/frontend/src/app/home/_layout.tsx
+++ b/frontend/src/app/home/_layout.tsx
@@ -7,22 +7,19 @@ import { StockList, StockSearchModal } from "./components";
 export default function HomeLayout() {
   const { t } = useTranslation();
   return (
-    <div className="flex flex-1 flex-col gap-4 overflow-hidden bg-gray-100 py-4 pr-4 pl-2">
+    <div className="flex flex-1 flex-col gap-4 overflow-hidden bg-muted py-4 pr-4 pl-2">
       <h1 className="font-medium text-3xl">{t("home.welcome")}</h1>
 
       <div className="flex flex-1 gap-3 overflow-hidden">
-        <main className="scroll-container flex-1 rounded-lg">
+        <main className="scroll-container flex-1 rounded-lg bg-card">
           <Outlet />
         </main>
 
-        <aside className="flex w-72 flex-col overflow-hidden rounded-lg bg-white">
+        <aside className="flex w-72 flex-col overflow-hidden rounded-lg bg-card">
           <StockList />
 
           <StockSearchModal>
-            <Button
-              variant="secondary"
-              className="mx-5 mb-6 font-bold text-sm hover:bg-gray-200"
-            >
+            <Button variant="secondary" className="mx-5 mb-6 font-bold text-sm">
               <Plus size={16} />
               {t("home.stock.add")}
             </Button>
diff --git a/frontend/src/app/home/components/agent-suggestions-list.tsx b/frontend/src/app/home/components/agent-suggestions-list.tsx
index 5cc356a5b..bfb9474e4 100644
--- a/frontend/src/app/home/components/agent-suggestions-list.tsx
+++ b/frontend/src/app/home/components/agent-suggestions-list.tsx
@@ -52,13 +52,15 @@ function AgentSuggestionsHeader({
       {...props}
     >
       {title && (
-        <h2 className="font-medium text-black text-xl leading-7">{title}</h2>
+        <h2 className="font-medium text-foreground text-xl leading-7">
+          {title}
+        </h2>
       )}
       {actionText && (
         <button
           type="button"
           onClick={onActionClick}
-          className="font-normal text-base text-black/60 transition-colors hover:text-black/80"
+          className="font-normal text-base text-muted-foreground transition-colors hover:text-foreground"
         >
           {actionText}
         </button>
@@ -99,7 +101,7 @@ function AgentSuggestionItem({
               {suggestion.avatars.map((avatar, index) => (
                 <div
                   key={`${suggestion.id}-avatar-${index}`}
-                  className="relative -mr-2 size-6 overflow-hidden rounded-full border-2 border-white last:mr-0"
+                  className="relative -mr-2 size-6 overflow-hidden rounded-full border-2 border-background last:mr-0"
                 >
                   {avatar}
                 </div>
diff --git a/frontend/src/app/home/components/agent-task-cards.tsx b/frontend/src/app/home/components/agent-task-cards.tsx
index ec9849e2f..8a26dad8a 100644
--- a/frontend/src/app/home/components/agent-task-cards.tsx
+++ b/frontend/src/app/home/components/agent-task-cards.tsx
@@ -17,15 +17,15 @@ const AgentTaskCard: FC<TaskCardItem> = ({
   if (!Component) return null;
 
   return (
-    <div className="flex size-full flex-col gap-4 rounded-lg border border-gray-100 bg-[linear-gradient(98deg,#FFF_5.05%,#E7EFFF_100%)] px-5 py-4">
+    <div className="flex size-full flex-col gap-4 rounded-lg border border-border bg-[linear-gradient(98deg,hsl(var(--card))_5.05%,hsl(var(--muted))_100%)] px-5 py-4">
       <div className="flex w-full items-center justify-between">
         <div className="flex shrink-0 items-center gap-2">
           <AgentAvatar agentName={agent_name} className="size-8" />
-          <p className="whitespace-nowrap font-normal text-base text-gray-950 leading-[22px]">
+          <p className="whitespace-nowrap font-normal text-base text-foreground leading-[22px]">
             {agent_name}
           </p>
         </div>
-        <p className="shrink-0 whitespace-nowrap text-gray-400 text-xs leading-[18px]">
+        <p className="shrink-0 whitespace-nowrap text-muted-foreground text-xs leading-[18px]">
           {TimeUtils.fromUTCRelative(update_time)}
         </p>
       </div>
diff --git a/frontend/src/app/home/components/stock-search-modal.tsx b/frontend/src/app/home/components/stock-search-modal.tsx
index a5cae80bd..221d7ad9f 100644
--- a/frontend/src/app/home/components/stock-search-modal.tsx
+++ b/frontend/src/app/home/components/stock-search-modal.tsx
@@ -44,17 +44,17 @@ const StockItem = ({ stock }: { stock: Stock }) => {
   return (
     <div
       key={stock.ticker}
-      className="flex items-center justify-between px-4 py-2 transition-colors hover:bg-gray-50"
+      className="flex items-center justify-between px-4 py-2 transition-colors hover:bg-muted"
     >
       <div className="flex flex-col gap-px">
-        <p className="text-neutral-900 text-sm">{stock.display_name}</p>
-        <p className="text-neutral-400 text-xs">{stock.ticker}</p>
+        <p className="text-foreground text-sm">{stock.display_name}</p>
+        <p className="text-muted-foreground text-xs">{stock.ticker}</p>
       </div>
 
       <Button
         disabled={isPendingAddStockToWatchlist || isStockInWatchlist}
         size="sm"
-        className="cursor-pointer font-normal text-sm text-white"
+        className="cursor-pointer font-normal text-sm"
         onClick={async () =>
           await addStockToWatchlist({ ticker: stock.ticker })
         }
@@ -108,38 +108,38 @@ export default function StockSearchModal({ children }: StockSearchModalProps) {
     <Dialog>
       <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent
-        className="flex h-3/5 min-h-[400px] w-md flex-col gap-3 rounded-2xl bg-neutral-50 p-6"
+        className="flex h-3/5 min-h-[400px] w-md flex-col gap-3 rounded-2xl bg-card p-6"
         showCloseButton={false}
       >
         <header className="flex items-center justify-between">
-          <DialogTitle className="font-semibold text-2xl text-neutral-900">
+          <DialogTitle className="font-semibold text-2xl text-foreground">
             {t("home.search.title")}
           </DialogTitle>
           <DialogClose asChild>
             <Button size="icon" variant="ghost" className="cursor-pointer">
-              <X className="size-6 text-neutral-400" />
+              <X className="size-6 text-muted-foreground" />
             </Button>
           </DialogClose>
         </header>
 
         {/* Search Input */}
-        <div className="flex items-center gap-4 rounded-lg bg-white px-4 py-2 focus-within:ring-neutral-600! hover:ring-1 hover:ring-neutral-200">
-          <Search className="size-5 text-neutral-400" />
+        <div className="flex items-center gap-4 rounded-lg bg-background px-4 py-2 focus-within:ring-2 focus-within:ring-ring/50 hover:ring-1 hover:ring-border">
+          <Search className="size-5 text-muted-foreground" />
           <Input
             onChange={(e) => setQuery(e.target.value)}
             placeholder={t("home.search.placeholder")}
-            className="border-none bg-transparent p-0 text-neutral-900 text-sm shadow-none placeholder:text-neutral-400 focus-visible:ring-0 focus-visible:ring-offset-0"
+            className="border-none bg-transparent p-0 text-foreground text-sm shadow-none placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0"
           />
         </div>
 
         {/* Search Results */}
         <div className="scroll-container">
           {isLoading ? (
-            <p className="p-4 text-center text-neutral-400 text-sm">
+            <p className="p-4 text-center text-muted-foreground text-sm">
               {t("home.search.searching")}
             </p>
           ) : filteredStockList && filteredStockList.length > 0 ? (
-            <div className="rounded-lg bg-white py-2">
+            <div className="rounded-lg bg-background py-2">
               {filteredStockList.map((stock) => (
                 <StockItem key={stock.ticker} stock={stock} />
               ))}
@@ -149,7 +149,7 @@ export default function StockSearchModal({ children }: StockSearchModalProps) {
             !isLoading &&
             stockList &&
             filteredStockList.length === 0 && (
-              <p className="p-4 text-center text-neutral-400 text-sm">
+              <p className="p-4 text-center text-muted-foreground text-sm">
                 {t("home.search.noResults")}
               </p>
             )
diff --git a/frontend/src/app/home/home.tsx b/frontend/src/app/home/home.tsx
index 2a99d2641..e016e9a35 100644
--- a/frontend/src/app/home/home.tsx
+++ b/frontend/src/app/home/home.tsx
@@ -1,8 +1,16 @@
+import { useTheme } from "next-themes";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router";
 import { useAllPollTaskList } from "@/api/conversation";
-import { IconGroupPng, MessageGroupPng, TrendPng } from "@/assets/png";
+import {
+  IconGroupDarkPng,
+  IconGroupPng,
+  MessageGroupDarkPng,
+  MessageGroupPng,
+  TrendDarkPng,
+  TrendPng,
+} from "@/assets/png";
 import { AutoTrade, NewsPush, ResearchReport } from "@/assets/svg";
 import TradingViewTickerTape from "@/components/tradingview/tradingview-ticker-tape";
 import SvgIcon from "@/components/valuecell/icon/svg-icon";
@@ -21,6 +29,7 @@ const INDEX_SYMBOLS = [
 
 function Home() {
   const { t, i18n } = useTranslation();
+  const { resolvedTheme } = useTheme();
   const navigate = useNavigate();
   const [inputValue, setInputValue] = useState<string>("");
 
@@ -30,33 +39,47 @@ function Home() {
     navigate(`/agent/${agentId}`);
   };
 
+  const isDark = resolvedTheme === "dark";
+
   const suggestions = [
     {
       id: "ResearchAgent",
       title: t("home.suggestions.research.title"),
       icon: <SvgIcon name={ResearchReport} />,
       description: t("home.suggestions.research.description"),
-      bgColor:
-        "bg-gradient-to-r from-[#FFFFFF]/70 from-[5.05%] to-[#E7EFFF]/70 to-[100%]",
-      decorativeGraphics: <img src={IconGroupPng} alt="IconGroup" />,
+      bgColor: isDark
+        ? "bg-gradient-to-r from-[#111827]/80 from-[5.05%] to-[#1D4ED8]/35 to-[100%]"
+        : "bg-gradient-to-r from-[#FFFFFF]/70 from-[5.05%] to-[#E7EFFF]/70 to-[100%]",
+      decorativeGraphics: (
+        <img src={isDark ? IconGroupDarkPng : IconGroupPng} alt="IconGroup" />
+      ),
     },
     {
       id: "StrategyAgent",
       title: t("home.suggestions.strategy.title"),
       icon: <SvgIcon name={AutoTrade} />,
       description: t("home.suggestions.strategy.description"),
-      bgColor:
-        "bg-gradient-to-r from-[#FFFFFF]/70 from-[5.05%] to-[#EAE8FF]/70 to-[100%]",
-      decorativeGraphics: <img src={TrendPng} alt="Trend" />,
+      bgColor: isDark
+        ? "bg-gradient-to-r from-[#111827]/80 from-[5.05%] to-[#7C3AED]/30 to-[100%]"
+        : "bg-gradient-to-r from-[#FFFFFF]/70 from-[5.05%] to-[#EAE8FF]/70 to-[100%]",
+      decorativeGraphics: (
+        <img src={isDark ? TrendDarkPng : TrendPng} alt="Trend" />
+      ),
     },
     {
       id: "NewsAgent",
       title: t("home.suggestions.news.title"),
       icon: <SvgIcon name={NewsPush} />,
       description: t("home.suggestions.news.description"),
-      bgColor:
-        "bg-gradient-to-r from-[#FFFFFF]/70 from-[5.05%] to-[#FFE7FD]/70 to-[100%]",
-      decorativeGraphics: <img src={MessageGroupPng} alt="MessageGroup" />,
+      bgColor: isDark
+        ? "bg-gradient-to-r from-[#111827]/80 from-[5.05%] to-[#DB2777]/25 to-[100%]"
+        : "bg-gradient-to-r from-[#FFFFFF]/70 from-[5.05%] to-[#FFE7FD]/70 to-[100%]",
+      decorativeGraphics: (
+        <img
+          src={isDark ? MessageGroupDarkPng : MessageGroupPng}
+          alt="MessageGroup"
+        />
+      ),
     },
   ];
 
@@ -66,6 +89,7 @@ function Home() {
         <section className="flex w-full flex-1 flex-col items-center justify-between gap-4">
           <TradingViewTickerTape
             symbols={INDEX_SYMBOLS}
+            theme={resolvedTheme === "dark" ? "dark" : "light"}
             locale={i18n.language}
           />
 
@@ -86,13 +110,14 @@ function Home() {
           />
         </section>
       ) : (
-        <section className="flex w-full flex-1 flex-col items-center gap-8 rounded-lg bg-white px-6 pt-12">
+        <section className="flex w-full flex-1 flex-col items-center gap-8 rounded-lg bg-card px-6 pt-12">
           <TradingViewTickerTape
             symbols={INDEX_SYMBOLS}
+            theme={resolvedTheme === "dark" ? "dark" : "light"}
             locale={i18n.language}
           />
 
-          <h1 className="mt-16 font-medium text-3xl text-gray-950">
+          <h1 className="mt-16 font-medium text-3xl text-foreground">
             {t("home.hello")}
           </h1>
 
diff --git a/frontend/src/app/home/stock.tsx b/frontend/src/app/home/stock.tsx
index 22b2018c5..b32036d44 100644
--- a/frontend/src/app/home/stock.tsx
+++ b/frontend/src/app/home/stock.tsx
@@ -1,4 +1,5 @@
 import BackButton from "@valuecell/button/back-button";
+import { useTheme } from "next-themes";
 import { memo } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router";
@@ -6,18 +7,16 @@ import { useGetStockDetail, useRemoveStockFromWatchlist } from "@/api/stock";
 import TradingViewAdvancedChart from "@/components/tradingview/tradingview-advanced-chart";
 import { Button } from "@/components/ui/button";
 import LinkButton from "@/components/valuecell/button/link-button";
-import { useIsLoggedIn } from "@/store/system-store";
 import type { Route } from "./+types/stock";
 
 function Stock() {
   const { t, i18n } = useTranslation();
+  const { resolvedTheme } = useTheme();
   const { stockId } = useParams<Route.LoaderArgs["params"]>();
   const navigate = useNavigate();
   // Use stockId as ticker to fetch real data from API
   const ticker = stockId || "";
 
-  const isLoggedIn = useIsLoggedIn();
-
   // Fetch stock detail data
   const {
     data: stockDetailData,
@@ -43,7 +42,9 @@ function Stock() {
   if (isDetailLoading) {
     return (
       <div className="flex h-96 items-center justify-center">
-        <div className="text-gray-500 text-lg">{t("home.stock.loading")}</div>
+        <div className="text-lg text-muted-foreground">
+          {t("home.stock.loading")}
+        </div>
       </div>
     );
   }
@@ -60,16 +61,16 @@ function Stock() {
   }
 
   return (
-    <div className="flex h-full flex-col gap-8 bg-white px-8 py-6">
+    <div className="flex h-full flex-col gap-8 bg-card px-8 py-6">
       <div className="flex flex-col gap-4">
         <BackButton />
         <div className="flex items-center gap-2">
-          <span className="font-bold text-lg">
+          <span className="font-bold text-foreground text-lg">
             {stockDetailData?.display_name ?? ticker}
           </span>
           <Button
             variant="secondary"
-            className="ml-auto text-neutral-400"
+            className="ml-auto text-muted-foreground"
             onClick={handleRemoveStock}
             disabled={isRemovingStock}
           >
@@ -87,7 +88,7 @@ function Stock() {
           ticker={ticker}
           interval="D"
           minHeight={420}
-          theme="light"
+          theme={resolvedTheme === "dark" ? "dark" : "light"}
           locale={i18n.language}
           timezone="UTC"
         />
@@ -98,7 +99,7 @@ function Stock() {
         <h2 className="font-bold text-lg">{t("home.stock.about")}</h2>
 
         {stockDetailData?.properties.business_summary && (
-          <p className="line-clamp-4 text-neutral-500 text-sm leading-6">
+          <p className="line-clamp-4 text-muted-foreground text-sm leading-6">
             {stockDetailData?.properties?.business_summary}
           </p>
         )}
@@ -128,7 +129,7 @@ function Stock() {
                 </span>
                 <LinkButton
                   url={stockDetailData.properties.website}
-                  className="ml-2 text-blue-600"
+                  className="ml-2 text-primary"
                 >
                   {stockDetailData.properties.website}
                 </LinkButton>
diff --git a/frontend/src/app/market/agents.tsx b/frontend/src/app/market/agents.tsx
index 644c7a6b6..35e220ee2 100644
--- a/frontend/src/app/market/agents.tsx
+++ b/frontend/src/app/market/agents.tsx
@@ -13,7 +13,7 @@ export default function AgentMarket() {
   }
 
   return (
-    <div className="flex size-full flex-col items-center justify-start gap-8 pt-8">
+    <div className="flex size-full flex-col items-center justify-start gap-8 bg-card pt-8">
       {/* Page Title */}
       <h1 className="w-full text-center font-medium text-3xl leading-7">
         {t("market.title")}
diff --git a/frontend/src/app/market/components/agent-card.tsx b/frontend/src/app/market/components/agent-card.tsx
index 1f1e46e5b..b1a63062a 100644
--- a/frontend/src/app/market/components/agent-card.tsx
+++ b/frontend/src/app/market/components/agent-card.tsx
@@ -16,9 +16,9 @@ export const AgentCard: FC<AgentCardProps> = ({
     <div
       className={cn(
         "box-border flex w-full cursor-pointer flex-col gap-5 p-6",
-        "rounded-2xl border border-gray-200 bg-white shadow-sm",
+        "rounded-2xl border border-border bg-card shadow-sm",
         "transition-all duration-300",
-        "hover:-translate-y-0.5 hover:border-gray-300 hover:shadow-md",
+        "hover:-translate-y-0.5 hover:border-border hover:shadow-md",
         className,
       )}
       {...props}
@@ -31,13 +31,13 @@ export const AgentCard: FC<AgentCardProps> = ({
         </div>
 
         {/* Name */}
-        <h3 className="line-clamp-1 font-semibold text-gray-900 text-lg leading-6">
+        <h3 className="line-clamp-1 font-semibold text-foreground text-lg leading-6">
           {agent.display_name}
         </h3>
       </div>
 
       {/* Description */}
-      <p className="line-clamp-3 w-full text-gray-600 text-sm leading-6">
+      <p className="line-clamp-3 w-full text-muted-foreground text-sm leading-6">
         {agent.description}
       </p>
     </div>
diff --git a/frontend/src/app/rank/board.tsx b/frontend/src/app/rank/board.tsx
index 396212588..ab5334e58 100644
--- a/frontend/src/app/rank/board.tsx
+++ b/frontend/src/app/rank/board.tsx
@@ -41,7 +41,7 @@ export default function RankBoard() {
     if (rank === 1) return <Rank1Icon />;
     if (rank === 2) return <Rank2Icon />;
     if (rank === 3) return <Rank3Icon />;
-    return <span className="text-gray-950 text-sm">{rank}</span>;
+    return <span className="text-foreground text-sm">{rank}</span>;
   };
 
   const handleViewStrategy = (strategyId: number) => {
@@ -49,7 +49,7 @@ export default function RankBoard() {
   };
 
   return (
-    <div className="flex size-full flex-col p-6">
+    <div className="flex size-full flex-col bg-card p-6">
       <Card className="border-none p-0 shadow-none">
         <CardHeader className="flex flex-row items-center justify-between px-0">
           <CardTitle className="font-bold text-xl">{t("rank.title")}</CardTitle>
@@ -88,7 +88,7 @@ export default function RankBoard() {
                   </TableRow>
                 ) : (
                   strategies?.map((strategy, index) => (
-                    <TableRow key={strategy.id} className="hover:bg-gray-50/50">
+                    <TableRow key={strategy.id} className="hover:bg-muted/50">
                       <TableCell className="font-medium">
                         <div className="flex w-8 items-center justify-center">
                           {getRankIcon(index + 1)}
diff --git a/frontend/src/app/rank/components/strategy-remote-modal.tsx b/frontend/src/app/rank/components/strategy-remote-modal.tsx
index 643040725..3baa38e37 100644
--- a/frontend/src/app/rank/components/strategy-remote-modal.tsx
+++ b/frontend/src/app/rank/components/strategy-remote-modal.tsx
@@ -85,13 +85,13 @@ const StrategyRemoteModal: FC<StrategyRemoteModalProps> = ({ ref }) => {
                   >
                     {numberFixed(strategyDetail.return_rate_pct, 2)}%
                   </div>
-                  <div className="text-gray-500 text-sm">
+                  <div className="text-muted-foreground text-sm">
                     {t("strategy.detail.returnRate")}
                   </div>
                 </div>
               </div>
 
-              <div className="grid grid-cols-[auto_1fr] gap-y-2 text-nowrap text-sm [&>p]:text-gray-500 [&>span]:text-right">
+              <div className="grid grid-cols-[auto_1fr] gap-y-2 text-nowrap text-sm [&>p]:text-muted-foreground [&>span]:text-right">
                 <p>{t("strategy.detail.strategyType")}</p>
                 <span>
                   {t(`strategy.types.${strategyDetail.strategy_type}`)}
@@ -119,10 +119,10 @@ const StrategyRemoteModal: FC<StrategyRemoteModalProps> = ({ ref }) => {
               </div>
 
               <div className="gap-2">
-                <span className="text-gray-500 text-sm">
+                <span className="text-muted-foreground text-sm">
                   {t("strategy.detail.prompt")}
                 </span>
-                <p className="rounded-md bg-gray-50 p-3 text-gray-700 text-sm">
+                <p className="rounded-md bg-muted p-3 text-foreground text-sm">
                   {strategyDetail.prompt}
                 </p>
               </div>
diff --git a/frontend/src/app/setting/_layout.tsx b/frontend/src/app/setting/_layout.tsx
index 51b350009..e5d911f25 100644
--- a/frontend/src/app/setting/_layout.tsx
+++ b/frontend/src/app/setting/_layout.tsx
@@ -36,11 +36,11 @@ export default function SettingLayout() {
   ];
 
   return (
-    <div className="flex size-full overflow-hidden bg-gray-100">
+    <div className="flex size-full overflow-hidden bg-muted">
       {/* Left navigation */}
-      <aside className="flex w-52 flex-col gap-4 rounded-tl-xl rounded-bl-xl bg-white px-6 py-8">
+      <aside className="flex w-52 flex-col gap-4 rounded-tl-xl rounded-bl-xl bg-card px-6 py-8">
         <div className="flex flex-col gap-4">
-          <h2 className="font-bold text-gray-950 text-xl">
+          <h2 className="font-bold text-foreground text-xl">
             {t("settings.title")}
           </h2>
 
@@ -55,8 +55,7 @@ export default function SettingLayout() {
                   variant={isActive ? "muted" : "default"}
                   size="sm"
                   className={cn(
-                    "cursor-pointer px-3 py-2.5",
-                    isActive ? "bg-gray-100" : "bg-white hover:bg-gray-50",
+                    "cursor-pointer px-3 py-2.5 hover:bg-accent/50",
                   )}
                   asChild
                 >
@@ -76,7 +75,7 @@ export default function SettingLayout() {
       </aside>
 
       {/* Right content area */}
-      <main className="flex flex-1 overflow-hidden rounded-tr-xl rounded-br-xl bg-white">
+      <main className="flex flex-1 overflow-hidden rounded-tr-xl rounded-br-xl bg-card">
         <Outlet />
       </main>
     </div>
diff --git a/frontend/src/app/setting/components/memory/memory-item-card.tsx b/frontend/src/app/setting/components/memory/memory-item-card.tsx
index 835d18814..6f417fdb6 100644
--- a/frontend/src/app/setting/components/memory/memory-item-card.tsx
+++ b/frontend/src/app/setting/components/memory/memory-item-card.tsx
@@ -26,7 +26,7 @@ export function MemoryItemCard({ item, onDelete }: MemoryItemCardProps) {
   return (
     <Item variant="outline" className="rounded-xl">
       <ItemContent>
-        <ItemDescription className="line-clamp-none text-base text-gray-950">
+        <ItemDescription className="line-clamp-none text-base text-foreground">
           {item.content}
         </ItemDescription>
       </ItemContent>
@@ -36,9 +36,9 @@ export function MemoryItemCard({ item, onDelete }: MemoryItemCardProps) {
             <Button
               variant="ghost"
               size="icon"
-              className="size-8 shrink-0 hover:bg-gray-100"
+              className="size-8 shrink-0 hover:bg-muted"
             >
-              <MoreVertical className="size-5 text-gray-950" />
+              <MoreVertical className="size-5 text-foreground" />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
diff --git a/frontend/src/app/setting/components/models/model-detail.tsx b/frontend/src/app/setting/components/models/model-detail.tsx
index 156e3d7bd..4a9d38cc2 100644
--- a/frontend/src/app/setting/components/models/model-detail.tsx
+++ b/frontend/src/app/setting/components/models/model-detail.tsx
@@ -148,7 +148,7 @@ export function ModelDetail({ provider }: ModelDetailProps) {
 
   if (detailLoading) {
     return (
-      <div className="text-gray-400 text-sm">
+      <div className="text-muted-foreground text-sm">
         {t("settings.models.loading")}
       </div>
     );
@@ -161,11 +161,11 @@ export function ModelDetail({ provider }: ModelDetailProps) {
   return (
     <div className="scroll-container flex flex-1 flex-col px-8">
       <div className="mb-4 flex items-center justify-between">
-        <p className="font-semibold text-gray-950 text-lg">
+        <p className="font-semibold text-foreground text-lg">
           {t(`strategy.providers.${provider}`) || provider}
         </p>
         <div className="flex items-center gap-2">
-          <p className="font-semibold text-base text-gray-700">
+          <p className="font-semibold text-base text-muted-foreground">
             {t("settings.models.defaultProvider")}
           </p>
           <Switch
@@ -181,7 +181,7 @@ export function ModelDetail({ provider }: ModelDetailProps) {
           <FieldGroup>
             <configForm.Field name="api_key">
               {(field) => (
-                <Field className="text-gray-950">
+                <Field className="text-foreground">
                   <FieldLabel
                     htmlFor="api_key"
                     className="font-medium text-base"
@@ -264,7 +264,7 @@ export function ModelDetail({ provider }: ModelDetailProps) {
                     </div>
                   )}
                   <LinkButton
-                    className="w-fit! hover:text-gray-700"
+                    className="w-fit! hover:text-foreground"
                     url={providerDetail.api_key_url}
                   >
                     {t("settings.models.getApiKey")}
@@ -277,7 +277,7 @@ export function ModelDetail({ provider }: ModelDetailProps) {
             {/* API Host section */}
             <configForm.Field name="base_url">
               {(field) => (
-                <Field className="text-gray-950">
+                <Field className="text-foreground">
                   <FieldLabel className="font-medium text-base">
                     {t("settings.models.apiHost")}
                   </FieldLabel>
@@ -302,7 +302,7 @@ export function ModelDetail({ provider }: ModelDetailProps) {
           {/* Models section */}
           <div className="flex flex-col gap-2">
             <div className="flex items-center justify-between">
-              <div className="font-medium text-base text-gray-950">
+              <div className="font-medium text-base text-foreground">
                 {t("settings.models.models")}
               </div>
               <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
@@ -310,7 +310,7 @@ export function ModelDetail({ provider }: ModelDetailProps) {
                   <Button
                     variant="outline"
                     size="sm"
-                    className="h-8 border-gray-200 px-2.5 font-semibold text-gray-700 text-sm"
+                    className="h-8 border-border px-2.5 font-semibold text-muted-foreground text-sm"
                     disabled={isBusy}
                   >
                     <Plus className="size-4" />
@@ -397,17 +397,17 @@ export function ModelDetail({ provider }: ModelDetailProps) {
             </div>
 
             {providerDetail.models.length === 0 ? (
-              <div className="rounded-lg border border-gray-200 border-dashed p-4 text-gray-400 text-sm">
+              <div className="rounded-lg border border-border border-dashed p-4 text-muted-foreground text-sm">
                 {t("settings.models.noModels")}
               </div>
             ) : (
-              <div className="flex flex-col gap-2 rounded-lg border border-gray-200 bg-white p-3">
+              <div className="flex flex-col gap-2 rounded-lg border border-border bg-card p-3">
                 {providerDetail.models.map((m) => (
                   <div
                     key={m.model_id}
                     className="flex items-center justify-between"
                   >
-                    <span className="font-normal text-gray-950 text-sm">
+                    <span className="font-normal text-foreground text-sm">
                       {m.model_name}
                     </span>
 
diff --git a/frontend/src/app/setting/components/models/model-providers.tsx b/frontend/src/app/setting/components/models/model-providers.tsx
index 58f3734ef..f278759d4 100644
--- a/frontend/src/app/setting/components/models/model-providers.tsx
+++ b/frontend/src/app/setting/components/models/model-providers.tsx
@@ -20,13 +20,13 @@ export function ModelProviders({
 
   return (
     <div className="flex flex-col gap-4 overflow-hidden *:px-6">
-      <h2 className="font-semibold text-gray-950 text-lg">
+      <h2 className="font-semibold text-foreground text-lg">
         {t("settings.models.title")}
       </h2>
 
       <ItemGroup className="scroll-container">
         {providers.length === 0 ? (
-          <div className="rounded-xl border border-gray-200 border-dashed px-4 py-6 text-center text-gray-400 text-sm">
+          <div className="rounded-xl border border-border border-dashed px-4 py-6 text-center text-muted-foreground text-sm">
             {t("settings.models.noProviders")}
           </div>
         ) : (
@@ -38,7 +38,7 @@ export function ModelProviders({
                 size="sm"
                 className={cn(
                   "cursor-pointer px-3 py-2.5",
-                  isActive ? "bg-gray-100" : "bg-white hover:bg-gray-50",
+                  isActive ? "bg-muted" : "bg-card hover:bg-muted",
                 )}
                 key={provider.provider}
                 onClick={() => onSelect(provider.provider)}
@@ -56,7 +56,7 @@ export function ModelProviders({
                     {t(`strategy.providers.${provider.provider}`) ||
                       provider.provider}
                   </span>
-                  <span className="font-normal text-gray-500 text-xs">
+                  <span className="font-normal text-muted-foreground text-xs">
                     {provider.provider}
                   </span>
                 </div>
diff --git a/frontend/src/app/setting/general.tsx b/frontend/src/app/setting/general.tsx
index a5dbde0c1..c2661deff 100644
--- a/frontend/src/app/setting/general.tsx
+++ b/frontend/src/app/setting/general.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from "next-themes";
 import { useTranslation } from "react-i18next";
 import { useSignOut } from "@/api/system";
 import { Badge } from "@/components/ui/badge";
@@ -32,6 +33,7 @@ import { useIsLoggedIn, useSystemInfo } from "@/store/system-store";
 
 export default function GeneralPage() {
   const { t } = useTranslation();
+  const { theme, setTheme } = useTheme();
   const stockColorMode = useStockColorMode();
   const language = useLanguage();
   const { setStockColorMode, setLanguage } = useSettingsActions();
@@ -44,10 +46,8 @@ export default function GeneralPage() {
   return (
     <div className="flex flex-1 flex-col gap-4 p-10">
       <div className="flex flex-col gap-1.5">
-        <h1 className="font-bold text-gray-950 text-xl">
-          {t("general.title")}
-        </h1>
-        <p className="font-normal text-gray-500 text-sm">
+        <h1 className="font-bold text-xl">{t("general.title")}</h1>
+        <p className="font-normal text-muted-foreground text-sm">
           {t("general.description")}
         </p>
       </div>
@@ -56,7 +56,7 @@ export default function GeneralPage() {
         {isTauriApp && (
           <Field orientation="horizontal">
             <FieldContent>
-              <FieldTitle className="font-medium text-base text-gray-950">
+              <FieldTitle className="font-medium text-base">
                 {t("general.account.title")}
               </FieldTitle>
               <FieldDescription>
@@ -81,7 +81,7 @@ export default function GeneralPage() {
 
         <Field orientation="horizontal">
           <FieldContent>
-            <FieldTitle className="font-medium text-base text-gray-950">
+            <FieldTitle className="font-medium text-base">
               {t("general.language.title")}
             </FieldTitle>
             <FieldDescription>
@@ -106,7 +106,37 @@ export default function GeneralPage() {
 
         <Field orientation="horizontal">
           <FieldContent>
-            <FieldTitle className="font-medium text-base text-gray-950">
+            <FieldTitle className="font-medium text-base">
+              {t("general.theme.title")}
+            </FieldTitle>
+            <FieldDescription>
+              {t("general.theme.description")}
+            </FieldDescription>
+          </FieldContent>
+          <Select
+            value={theme ?? "system"}
+            onValueChange={(value) => setTheme(value)}
+          >
+            <SelectTrigger className="w-[280px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="system">
+                {t("general.theme.options.system")}
+              </SelectItem>
+              <SelectItem value="light">
+                {t("general.theme.options.light")}
+              </SelectItem>
+              <SelectItem value="dark">
+                {t("general.theme.options.dark")}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </Field>
+
+        <Field orientation="horizontal">
+          <FieldContent>
+            <FieldTitle className="font-medium text-base">
               {t("general.quotesColor.title")}
             </FieldTitle>
             <FieldDescription>
@@ -121,14 +151,14 @@ export default function GeneralPage() {
             }
           >
             <FieldLabel
-              className="flex cursor-pointer items-center space-x-3 text-nowrap rounded-lg border border-gray-200 p-3"
+              className="flex cursor-pointer items-center space-x-3 text-nowrap rounded-lg border border-border p-3"
               htmlFor="green-up"
             >
               <RadioGroupItem value="GREEN_UP_RED_DOWN" id="green-up" />
               {t("general.quotesColor.greenUpRedDown")}
             </FieldLabel>
             <FieldLabel
-              className="flex cursor-pointer items-center space-x-3 text-nowrap rounded-lg border border-gray-200 p-3"
+              className="flex cursor-pointer items-center space-x-3 text-nowrap rounded-lg border border-border p-3"
               htmlFor="red-up"
             >
               <RadioGroupItem value="RED_UP_GREEN_DOWN" id="red-up" />
@@ -139,7 +169,7 @@ export default function GeneralPage() {
 
         {isTauriApp && (
           <Field orientation="responsive">
-            <FieldTitle className="flex items-center gap-2 font-medium text-base text-gray-950">
+            <FieldTitle className="flex items-center gap-2 font-medium text-base">
               {t("general.updates.title")}
               {appVersion && <Badge variant="secondary">v{appVersion}</Badge>}
             </FieldTitle>
diff --git a/frontend/src/app/setting/memory.tsx b/frontend/src/app/setting/memory.tsx
index 47c33c4b1..9629a8c51 100644
--- a/frontend/src/app/setting/memory.tsx
+++ b/frontend/src/app/setting/memory.tsx
@@ -15,14 +15,14 @@ export default function MemoryPage() {
     return (
       <div className="flex flex-col gap-5 px-16 py-10">
         <div className="flex flex-col gap-1.5">
-          <h1 className="font-bold text-gray-950 text-xl">
+          <h1 className="font-bold text-foreground text-xl">
             {t("settings.memory.title")}
           </h1>
-          <p className="text-base text-gray-400 leading-[22px]">
+          <p className="text-base text-muted-foreground leading-[22px]">
             {t("settings.memory.description")}
           </p>
         </div>
-        <div className="flex items-center justify-center py-12 text-gray-400">
+        <div className="flex items-center justify-center py-12 text-muted-foreground">
           {t("settings.memory.loading")}
         </div>
       </div>
@@ -33,10 +33,10 @@ export default function MemoryPage() {
     <div className="flex flex-col gap-5 px-16 py-10">
       {/* Title section */}
       <div className="flex flex-col gap-1.5">
-        <h1 className="font-bold text-gray-950 text-xl">
+        <h1 className="font-bold text-foreground text-xl">
           {t("settings.memory.title")}
         </h1>
-        <p className="text-base text-gray-400 leading-[22px]">
+        <p className="text-base text-muted-foreground leading-[22px]">
           {t("settings.memory.description")}
         </p>
       </div>
@@ -44,7 +44,7 @@ export default function MemoryPage() {
       {/* Memory list */}
       <div className="flex flex-1 flex-col gap-4 overflow-y-auto">
         {memories.length === 0 ? (
-          <div className="flex items-center justify-center py-12 text-gray-400">
+          <div className="flex items-center justify-center py-12 text-muted-foreground">
             {t("settings.memory.noMemories")}
           </div>
         ) : (
diff --git a/frontend/src/assets/png/icon-group-dark.png b/frontend/src/assets/png/icon-group-dark.png
new file mode 100644
index 000000000..ac41b42df
Binary files /dev/null and b/frontend/src/assets/png/icon-group-dark.png differ
diff --git a/frontend/src/assets/png/index.ts b/frontend/src/assets/png/index.ts
index afa19c9d1..f305cb590 100644
--- a/frontend/src/assets/png/index.ts
+++ b/frontend/src/assets/png/index.ts
@@ -30,7 +30,9 @@ export { default as HyperliquidPng } from "./exchanges/hyperliquid.png";
 export { default as MexcPng } from "./exchanges/mexc.png";
 export { default as OkxPng } from "./exchanges/okx.png";
 export { default as IconGroupPng } from "./icon-group.png";
+export { default as IconGroupDarkPng } from "./icon-group-dark.png";
 export { default as MessageGroupPng } from "./message-group.png";
+export { default as MessageGroupDarkPng } from "./message-group-dark.png";
 export { default as AzurePng } from "./model-providers/azure.png";
 export { default as DashScopePng } from "./model-providers/dashscope.png";
 export { default as DeepSeekPng } from "./model-providers/deepseek.png";
@@ -41,3 +43,4 @@ export { default as OpenRouterPng } from "./model-providers/openrouter.png";
 export { default as SiliconFlowPng } from "./model-providers/siliconflow.png";
 
 export { default as TrendPng } from "./trend.png";
+export { default as TrendDarkPng } from "./trend-dark.png";
diff --git a/frontend/src/assets/png/message-group-dark.png b/frontend/src/assets/png/message-group-dark.png
new file mode 100644
index 000000000..414b79674
Binary files /dev/null and b/frontend/src/assets/png/message-group-dark.png differ
diff --git a/frontend/src/assets/png/trend-dark.png b/frontend/src/assets/png/trend-dark.png
new file mode 100644
index 000000000..b1ed36e7c
Binary files /dev/null and b/frontend/src/assets/png/trend-dark.png differ
diff --git a/frontend/src/components/valuecell/app/app-conversation-sheet.tsx b/frontend/src/components/valuecell/app/app-conversation-sheet.tsx
index 5ca70180b..8cfd001d3 100644
--- a/frontend/src/components/valuecell/app/app-conversation-sheet.tsx
+++ b/frontend/src/components/valuecell/app/app-conversation-sheet.tsx
@@ -50,11 +50,11 @@ const AppConversationSheet: FC<{ children: ReactNode }> = ({ children }) => {
 
         <SidebarMenu className="scroll-container gap-[5px] px-4">
           {isLoading ? (
-            <div className="px-2 py-4 text-center text-gray-400 text-sm">
+            <div className="px-2 py-4 text-center text-muted-foreground text-sm">
               {t("chat.conversationList.loading")}
             </div>
           ) : conversations.length === 0 ? (
-            <div className="px-2 py-4 text-center text-gray-400 text-sm">
+            <div className="px-2 py-4 text-center text-muted-foreground text-sm">
               {t("chat.conversationList.empty")}
             </div>
           ) : (
@@ -79,7 +79,7 @@ const AppConversationSheet: FC<{ children: ReactNode }> = ({ children }) => {
                           {conversation.title}
                         </span>
                       </div>
-                      <span className="w-full font-normal text-gray-400 text-xs leading-[18px]">
+                      <span className="w-full font-normal text-muted-foreground text-xs leading-[18px]">
                         {TimeUtils.formatUTC(
                           conversation.update_time,
                           TIME_FORMATS.DATE,
diff --git a/frontend/src/components/valuecell/app/app-sidebar.tsx b/frontend/src/components/valuecell/app/app-sidebar.tsx
index 0daf17028..3d3f1f0b5 100644
--- a/frontend/src/components/valuecell/app/app-sidebar.tsx
+++ b/frontend/src/components/valuecell/app/app-sidebar.tsx
@@ -60,12 +60,7 @@ interface SidebarMenuProps {
 
 const Sidebar: FC<SidebarProps> = ({ children, className }) => {
   return (
-    <div
-      className={cn(
-        "flex w-16 flex-col items-center bg-neutral-100",
-        className,
-      )}
-    >
+    <div className={cn("flex w-16 flex-col items-center bg-muted", className)}>
       {children}
     </div>
   );
@@ -112,14 +107,14 @@ const SidebarMenuItem: FC<SidebarItemProps> = ({
         "box-border flex size-10 items-center justify-center rounded-full",
         "cursor-pointer transition-all",
         type === "button" && [
-          "bg-neutral-200 p-3 text-gray-700",
-          "hover:data-[active=false]:bg-neutral-300",
-          "data-[active=true]:bg-black data-[active=true]:text-white",
+          "bg-muted p-3 text-muted-foreground",
+          "hover:data-[active=false]:bg-accent hover:data-[active=false]:text-accent-foreground",
+          "data-[active=true]:bg-primary data-[active=true]:text-primary-foreground",
         ],
         type === "agent" && [
-          "box-border border border-neutral-200 bg-white",
-          "hover:data-[active=false]:border-neutral-300",
-          "data-[active=true]:border-white data-[active=true]:shadow-[0_4px_12px_0_rgba(14,1,1,0.4)]",
+          "box-border border border-border bg-background",
+          "hover:data-[active=false]:border-ring/50",
+          "data-[active=true]:border-primary data-[active=true]:shadow-[0_4px_12px_0_rgba(0,0,0,0.25)]",
         ],
         className,
       )}
@@ -195,7 +190,7 @@ const AppSidebar: FC = () => {
   const verifyActive = (to: string) => prefix === to;
 
   return (
-    <Sidebar className="bg-gray-100">
+    <Sidebar>
       <SidebarHeader>
         <SidebarMenu>
           {navItems.home.map((item) => {
@@ -204,7 +199,7 @@ const AppSidebar: FC = () => {
                 <SidebarMenuItem
                   aria-label={item.label}
                   data-active={verifyActive(item.to)}
-                  className="bg-white p-2"
+                  className="p-2"
                 >
                   <SvgIcon name={item.icon} />
                 </SidebarMenuItem>
@@ -213,14 +208,14 @@ const AppSidebar: FC = () => {
           })}
 
           <AppConversationSheet>
-            <SidebarMenuItem className="cursor-pointer bg-white p-2 text-gray-700 hover:bg-neutral-300">
+            <SidebarMenuItem className="cursor-pointer p-2">
               <SvgIcon name={Conversation} className="size-6" />
             </SidebarMenuItem>
           </AppConversationSheet>
         </SidebarMenu>
       </SidebarHeader>
 
-      <Separator className="w-10! bg-white" />
+      <Separator className="w-10! bg-border" />
 
       <SidebarContent>
         <SidebarMenu className="py-3">
diff --git a/frontend/src/components/valuecell/button/tag-groups.tsx b/frontend/src/components/valuecell/button/tag-groups.tsx
index fc717eff7..a319dfb05 100644
--- a/frontend/src/components/valuecell/button/tag-groups.tsx
+++ b/frontend/src/components/valuecell/button/tag-groups.tsx
@@ -24,7 +24,7 @@ export const Tag = ({
   return (
     <span
       className={cn(
-        "flex w-fit items-center gap-2 text-nowrap rounded-md bg-gray-100 px-3 py-1 font-normal text-gray-700 text-xs",
+        "flex w-fit items-center gap-2 text-nowrap rounded-md bg-muted px-3 py-1 font-normal text-foreground text-xs",
         className,
       )}
     >
@@ -56,7 +56,7 @@ const TagGroups: FC<TagGroupsProps> = ({
           <TooltipTrigger asChild>
             <button
               type="button"
-              className="flex items-center text-nowrap rounded-md bg-gray-100 px-2 py-1 font-normal text-gray-600 text-xs transition-colors hover:bg-gray-200"
+              className="flex items-center text-nowrap rounded-md bg-muted px-2 py-1 font-normal text-muted-foreground text-xs transition-colors hover:bg-muted/80"
             >
               <Plus size={12} />
               <span>{remainingTags.length}</span>
@@ -65,7 +65,7 @@ const TagGroups: FC<TagGroupsProps> = ({
           <TooltipContent side="bottom" className="max-w-xs">
             <div className="flex flex-wrap gap-1.5">
               {remainingTags.map((tag) => (
-                <Tag key={tag} className="bg-gray-700 text-white">
+                <Tag key={tag} className="bg-foreground text-background">
                   {tag}
                 </Tag>
               ))}
diff --git a/frontend/src/components/valuecell/form/copy-strategy-form.tsx b/frontend/src/components/valuecell/form/copy-strategy-form.tsx
index a3c4bb963..7aba5cc6c 100644
--- a/frontend/src/components/valuecell/form/copy-strategy-form.tsx
+++ b/frontend/src/components/valuecell/form/copy-strategy-form.tsx
@@ -97,7 +97,7 @@ export const CopyStrategyForm = withForm({
               <form.Field name="symbols">
                 {(field) => (
                   <Field>
-                    <FieldLabel className="font-medium text-base text-gray-950">
+                    <FieldLabel className="font-medium text-base text-foreground">
                       Trading Symbols
                     </FieldLabel>
                     <MultiSelect
@@ -128,10 +128,10 @@ export const CopyStrategyForm = withForm({
                 <form.Field name="prompt">
                   {(field) => (
                     <Field>
-                      <FieldLabel className="font-medium text-base text-gray-950">
+                      <FieldLabel className="font-medium text-base text-foreground">
                         System Prompt Template
                       </FieldLabel>
-                      <div className="text-gray-500 text-sm">
+                      <div className="text-muted-foreground text-sm">
                         {field.state.value}
                       </div>
                       <FieldError errors={field.state.meta.errors} />
diff --git a/frontend/src/components/valuecell/form/exchange-form.tsx b/frontend/src/components/valuecell/form/exchange-form.tsx
index 0d7c462e2..afea9b387 100644
--- a/frontend/src/components/valuecell/form/exchange-form.tsx
+++ b/frontend/src/components/valuecell/form/exchange-form.tsx
@@ -318,7 +318,7 @@ export const ExchangeForm = withForm({
                       type="button"
                     >
                       {isPending ? (
-                        <Spinner className="size-5 text-gray-500" />
+                        <Spinner className="size-5 text-muted-foreground" />
                       ) : (
                         <Wallet className="size-5" />
                       )}
diff --git a/frontend/src/components/valuecell/form/field/number-field.tsx b/frontend/src/components/valuecell/form/field/number-field.tsx
index 4ae600c8c..8217235e0 100644
--- a/frontend/src/components/valuecell/form/field/number-field.tsx
+++ b/frontend/src/components/valuecell/form/field/number-field.tsx
@@ -23,7 +23,7 @@ export const NumberField: FC<NumberFieldProps> = ({
 
   return (
     <Field className={className}>
-      <FieldLabel className="font-medium text-base text-gray-950">
+      <FieldLabel className="font-medium text-base text-foreground">
         {label}
       </FieldLabel>
       <Input
diff --git a/frontend/src/components/valuecell/form/field/password-field.tsx b/frontend/src/components/valuecell/form/field/password-field.tsx
index 11ed51a26..94d0642eb 100644
--- a/frontend/src/components/valuecell/form/field/password-field.tsx
+++ b/frontend/src/components/valuecell/form/field/password-field.tsx
@@ -25,7 +25,7 @@ export const PasswordField: FC<PasswordFieldProps> = ({
 
   return (
     <Field className={className}>
-      <FieldLabel className="font-medium text-base text-gray-950">
+      <FieldLabel className="font-medium text-base text-foreground">
         {label}
       </FieldLabel>
       <InputGroup>
diff --git a/frontend/src/components/valuecell/form/field/radio-field.tsx b/frontend/src/components/valuecell/form/field/radio-field.tsx
index b2673403d..501384b17 100644
--- a/frontend/src/components/valuecell/form/field/radio-field.tsx
+++ b/frontend/src/components/valuecell/form/field/radio-field.tsx
@@ -13,7 +13,7 @@ export const RadioField: FC<RadioFieldProps> = ({ label, children }) => {
 
   return (
     <Field>
-      <FieldLabel className="font-medium text-base text-gray-950">
+      <FieldLabel className="font-medium text-base text-foreground">
         {label}
       </FieldLabel>
       <RadioGroup
diff --git a/frontend/src/components/valuecell/form/field/select-field.tsx b/frontend/src/components/valuecell/form/field/select-field.tsx
index 383454bd0..ad57f34ef 100644
--- a/frontend/src/components/valuecell/form/field/select-field.tsx
+++ b/frontend/src/components/valuecell/form/field/select-field.tsx
@@ -18,7 +18,7 @@ export const SelectField: FC<SelectFieldProps> = ({ label, children }) => {
 
   return (
     <Field>
-      <FieldLabel className="font-medium text-base text-gray-950">
+      <FieldLabel className="font-medium text-base text-foreground">
         {label}
       </FieldLabel>
       <Select value={field.state.value} onValueChange={field.handleChange}>
diff --git a/frontend/src/components/valuecell/form/field/text-field.tsx b/frontend/src/components/valuecell/form/field/text-field.tsx
index 2a8950293..52528f769 100644
--- a/frontend/src/components/valuecell/form/field/text-field.tsx
+++ b/frontend/src/components/valuecell/form/field/text-field.tsx
@@ -18,7 +18,7 @@ export const TextField: FC<TextFieldProps> = ({
 
   return (
     <Field className={className}>
-      <FieldLabel className="font-medium text-base text-gray-950">
+      <FieldLabel className="font-medium text-base text-foreground">
         {label}
       </FieldLabel>
       <Input
diff --git a/frontend/src/components/valuecell/form/trading-strategy-form.tsx b/frontend/src/components/valuecell/form/trading-strategy-form.tsx
index fedc4a5d4..b96cb137d 100644
--- a/frontend/src/components/valuecell/form/trading-strategy-form.tsx
+++ b/frontend/src/components/valuecell/form/trading-strategy-form.tsx
@@ -160,7 +160,7 @@ export const TradingStrategyForm = withForm({
               <form.Field name="symbols">
                 {(field) => (
                   <Field>
-                    <FieldLabel className="font-medium text-base text-gray-950">
+                    <FieldLabel className="font-medium text-base text-foreground">
                       {t("strategy.form.tradingSymbols.label")}
                     </FieldLabel>
                     <MultiSelect
@@ -195,7 +195,7 @@ export const TradingStrategyForm = withForm({
                 <form.Field name="template_id">
                   {(field) => (
                     <Field>
-                      <FieldLabel className="font-medium text-base text-gray-950">
+                      <FieldLabel className="font-medium text-base text-foreground">
                         {t("strategy.form.promptTemplate.label")}
                       </FieldLabel>
                       <div className="flex items-center gap-3">
@@ -257,11 +257,7 @@ export const TradingStrategyForm = withForm({
                             (prompt) => prompt.id === field.state.value,
                           )}
                         >
-                          <Button
-                            type="button"
-                            variant="outline"
-                            className="hover:bg-gray-50"
-                          >
+                          <Button type="button" variant="outline">
                             <Eye />
                             {t("strategy.form.promptTemplate.view")}
                           </Button>
@@ -296,7 +292,7 @@ export const TradingStrategyForm = withForm({
               </AlertDialogCancel>
               <AlertDialogAction
                 onClick={confirmDeletePrompt}
-                className="bg-red-600 hover:bg-red-700 focus:ring-red-600"
+                className="bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20"
               >
                 {t("strategy.action.confirmDelete")}
               </AlertDialogAction>
diff --git a/frontend/src/components/valuecell/menus/agent-menus.tsx b/frontend/src/components/valuecell/menus/agent-menus.tsx
index c366dfe03..1a15da71e 100644
--- a/frontend/src/components/valuecell/menus/agent-menus.tsx
+++ b/frontend/src/components/valuecell/menus/agent-menus.tsx
@@ -37,9 +37,9 @@ function AgentMenu({ className, children, onClick, ...props }: AgentMenuProps) {
   return (
     <button
       className={cn(
-        "border border-white bg-white backdrop-blur-[2px] backdrop-filter",
+        "border border-border bg-card backdrop-blur-[2px] backdrop-filter",
         "relative flex items-center justify-between rounded-xl px-4 py-3 transition-colors",
-        onClick && "cursor-pointer hover:bg-gray-50",
+        onClick && "cursor-pointer hover:bg-muted",
         className,
       )}
       onClick={onClick}
@@ -81,7 +81,7 @@ function AgentMenuIcon({ className, children, ...props }: AgentMenuIconProps) {
   return (
     <div
       className={cn(
-        "flex size-6 shrink-0 items-center justify-center rounded-[6px] bg-gray-100 p-1",
+        "flex size-6 shrink-0 items-center justify-center rounded-[6px] bg-muted p-1",
         className,
       )}
       {...props}
@@ -99,7 +99,7 @@ function AgentMenuTitle({
   return (
     <p
       className={cn(
-        "whitespace-nowrap font-medium text-[16px] text-gray-950 leading-[22px]",
+        "whitespace-nowrap font-medium text-[16px] text-foreground leading-[22px]",
         className,
       )}
       title={typeof children === "string" ? children : undefined}
@@ -118,7 +118,7 @@ function AgentMenuDescription({
   return (
     <p
       className={cn(
-        "line-clamp-2 text-left text-gray-500 text-sm leading-4.5",
+        "line-clamp-2 text-left text-muted-foreground text-sm leading-4.5",
         className,
       )}
       {...props}
@@ -139,8 +139,8 @@ function AgentMenuCard({
     <button
       type="button"
       className={cn(
-        "relative flex-1 overflow-hidden rounded-xl border border-gray-100 p-4 transition-all hover:shadow-md",
-        bgColor || "bg-white",
+        "relative flex-1 overflow-hidden rounded-xl border border-border p-4 transition-all hover:shadow-md",
+        bgColor || "bg-card",
         className,
       )}
       onClick={onClick}
diff --git a/frontend/src/components/valuecell/modal/copy-strategy-modal.tsx b/frontend/src/components/valuecell/modal/copy-strategy-modal.tsx
index d07427868..3d9e49355 100644
--- a/frontend/src/components/valuecell/modal/copy-strategy-modal.tsx
+++ b/frontend/src/components/valuecell/modal/copy-strategy-modal.tsx
@@ -239,7 +239,7 @@ const CopyStrategyModal: FC<CopyStrategyModalProps> = ({
               type="button"
               variant="outline"
               onClick={currentStep === 1 ? resetAll : handleBack}
-              className="border-gray-100 py-4 font-semibold text-base"
+              className="py-4 font-semibold text-base"
             >
               {currentStep === 1 ? "Cancel" : "Back"}
             </Button>
@@ -258,7 +258,7 @@ const CopyStrategyModal: FC<CopyStrategyModalProps> = ({
                     await form3.handleSubmit();
                 }
               }}
-              className="relative py-4 font-semibold text-base text-white hover:bg-gray-800"
+              className="relative py-4 font-semibold text-base"
             >
               {isCreatingStrategy && <Spinner className="absolute left-4" />}
               {currentStep === 3 ? "Confirm" : "Next"}
diff --git a/frontend/src/components/valuecell/modal/login-modal.tsx b/frontend/src/components/valuecell/modal/login-modal.tsx
index bfdabb617..015282e4f 100644
--- a/frontend/src/components/valuecell/modal/login-modal.tsx
+++ b/frontend/src/components/valuecell/modal/login-modal.tsx
@@ -2,6 +2,7 @@ import { getCurrentWindow } from "@tauri-apps/api/window";
 import { onOpenUrl } from "@tauri-apps/plugin-deep-link";
 import { openUrl } from "@tauri-apps/plugin-opener";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { getUserInfo } from "@/api/system";
 import { Logo } from "@/assets/svg";
@@ -26,6 +27,7 @@ export interface LoginModalProps {
 }
 
 export default function LoginModal({ children }: LoginModalProps) {
+  const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [pendingAction, setPendingAction] = useState<PendingAction | null>(
     null,
@@ -62,6 +64,11 @@ export default function LoginModal({ children }: LoginModalProps) {
     clearLoginHandlers();
     setPendingAction(provider);
 
+    const providerLabel =
+      provider === "gmail"
+        ? t("auth.login.providers.google")
+        : t("auth.login.providers.apple");
+
     try {
       await openUrl(`https://valuecell.ai/login?provider=${provider}`);
 
@@ -100,13 +107,20 @@ export default function LoginModal({ children }: LoginModalProps) {
       timeoutRef.current = window.setTimeout(
         () => {
           clearLoginHandlers();
-          toast.error("Login timed out, please try again.");
+          toast.error(t("auth.login.errors.timeout.title"), {
+            description: t("auth.login.errors.timeout.description"),
+          });
         },
         2 * 60 * 1000,
       );
     } catch (error) {
       toast.error(
-        `Failed to login with ${provider}, info: ${JSON.stringify(error)}`,
+        t("auth.login.errors.failed.title", { provider: providerLabel }),
+        {
+          description: t("auth.login.errors.failed.description", {
+            info: JSON.stringify(error),
+          }),
+        },
       );
     }
   };
@@ -126,7 +140,7 @@ export default function LoginModal({ children }: LoginModalProps) {
         aria-describedby={undefined}
       >
         <DialogTitle className="flex items-center justify-between">
-          Sign in
+          {t("auth.login.title")}
           <DialogClose asChild>
             <CloseButton />
           </DialogClose>
@@ -135,18 +149,18 @@ export default function LoginModal({ children }: LoginModalProps) {
         <div className="mt-10 flex flex-col items-center gap-3 text-center">
           <SvgIcon
             name={Logo}
-            className="size-14 rounded-full bg-black p-2.5 text-white"
+            className="size-14 rounded-full bg-primary p-2.5 text-primary-foreground"
           />
-          <p className="font-medium text-3xl text-gray-950">ValueCell</p>
-          <p className="font-medium text-gray-500 text-sm">
-            The first open-source platform for financial agents
+          <p className="font-medium text-3xl text-foreground">ValueCell</p>
+          <p className="font-medium text-muted-foreground text-sm">
+            {t("auth.login.tagline")}
           </p>
         </div>
 
         <div className="mt-10 flex flex-col gap-4 px-4 pb-4">
           <Button
             variant="outline"
-            className="relative bg-gray-50 py-6 text-base focus-visible:ring-gray-200"
+            className="relative py-6 text-base"
             onClick={() => handleLogin("gmail")}
             disabled={pendingAction !== null}
           >
@@ -174,7 +188,9 @@ export default function LoginModal({ children }: LoginModalProps) {
                 fill="#4285F4"
               />
             </svg>
-            Continue with Google
+            {t("auth.login.actions.continueWith", {
+              provider: t("auth.login.providers.google"),
+            })}
             {pendingAction === "gmail" && (
               <Spinner className="absolute top-1/2 right-4 -translate-y-1/2" />
             )}
@@ -182,7 +198,7 @@ export default function LoginModal({ children }: LoginModalProps) {
           {/* 
             <Button
               variant="outline"
-              className="relative bg-gray-50 py-6 text-base focus-visible:ring-gray-200"
+              className="relative py-6 text-base"
               onClick={() => handleLogin("apple")}
               disabled={pendingAction !== null}
             >
diff --git a/frontend/src/components/valuecell/renderer/chat-conversation-renderer.tsx b/frontend/src/components/valuecell/renderer/chat-conversation-renderer.tsx
index 8c5dc6d2a..29ad1982a 100644
--- a/frontend/src/components/valuecell/renderer/chat-conversation-renderer.tsx
+++ b/frontend/src/components/valuecell/renderer/chat-conversation-renderer.tsx
@@ -39,14 +39,14 @@ const ChatConversationRenderer: FC<ChatConversationRendererProps> = ({
   if (!currentConversation) return null;
 
   return (
-    <div className="overflow-hidden rounded-lg border border-gray-100 bg-neutral-100 [&_#chat-item]:max-w-none">
+    <div className="overflow-hidden rounded-lg border border-border bg-muted [&_#chat-item]:max-w-none">
       {/* Header section */}
-      <div className="flex items-center justify-between bg-white p-4">
-        <div className="flex min-w-40 items-center gap-2 rounded-full border border-gray-200 bg-gray-50 py-1 pr-5 pl-1.5">
+      <div className="flex items-center justify-between bg-card p-4">
+        <div className="flex min-w-40 items-center gap-2 rounded-full border border-border bg-muted py-1 pr-5 pl-1.5">
           {agent && (
             <AgentAvatar agentName={agent.agent_name} className="size-9" />
           )}
-          <p className="whitespace-nowrap font-normal text-base text-gray-950 leading-[22px]">
+          <p className="whitespace-nowrap font-normal text-base text-foreground leading-[22px]">
             {agent?.display_name || t("agent.unknown")}
           </p>
         </div>
@@ -63,7 +63,7 @@ const ChatConversationRenderer: FC<ChatConversationRendererProps> = ({
         {phase === "end" && (
           <NavLink
             to={`/agent/${agent_name}?id=${conversation_id}`}
-            className="rounded-full bg-blue-500 px-2.5 py-1.5 font-normal text-sm text-white hover:bg-blue-500/80"
+            className="rounded-full bg-primary px-2.5 py-1.5 font-normal text-primary-foreground text-sm hover:bg-primary/90"
           >
             {t("agent.action.view")}
           </NavLink>
diff --git a/frontend/src/components/valuecell/renderer/markdown-renderer.tsx b/frontend/src/components/valuecell/renderer/markdown-renderer.tsx
index afe3f5b20..3720abfad 100644
--- a/frontend/src/components/valuecell/renderer/markdown-renderer.tsx
+++ b/frontend/src/components/valuecell/renderer/markdown-renderer.tsx
@@ -10,7 +10,13 @@ const MarkdownRenderer: FC<MarkdownRendererProps> = ({
   className,
 }) => {
   return (
-    <div className={cn("prose text-sm", className)}>
+    <div
+      className={cn(
+        "prose dark:prose-invert text-sm",
+        "prose-a:text-sky-600 dark:prose-a:text-sky-300",
+        className,
+      )}
+    >
       <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
         {content}
       </ReactMarkdown>
diff --git a/frontend/src/components/valuecell/renderer/reasoning-renderer.tsx b/frontend/src/components/valuecell/renderer/reasoning-renderer.tsx
index 6bce78973..137fa1bf3 100644
--- a/frontend/src/components/valuecell/renderer/reasoning-renderer.tsx
+++ b/frontend/src/components/valuecell/renderer/reasoning-renderer.tsx
@@ -31,7 +31,7 @@ const ReasoningRenderer: FC<ReasoningRendererProps> = ({
         )}
         disabled={!hasContent}
       >
-        <div className="flex items-center gap-2 text-gray-950">
+        <div className="flex items-center gap-2 text-foreground">
           {isComplete ? (
             <Brain className="size-5" />
           ) : (
@@ -44,7 +44,7 @@ const ReasoningRenderer: FC<ReasoningRendererProps> = ({
         {hasContent && (
           <ChevronDown
             className={cn(
-              "h-6 w-6 text-gray-950 transition-transform",
+              "h-6 w-6 text-muted-foreground transition-transform",
               isOpen && "rotate-180",
             )}
           />
@@ -57,7 +57,7 @@ const ReasoningRenderer: FC<ReasoningRendererProps> = ({
           {hasContent && (
             <MarkdownRenderer
               content={content}
-              className="text-gray-600 text-xs"
+              className="text-muted-foreground text-xs"
             />
           )}
         </div>
diff --git a/frontend/src/components/valuecell/renderer/report-renderer.tsx b/frontend/src/components/valuecell/renderer/report-renderer.tsx
index 00fed7ec7..68afc67fa 100644
--- a/frontend/src/components/valuecell/renderer/report-renderer.tsx
+++ b/frontend/src/components/valuecell/renderer/report-renderer.tsx
@@ -30,17 +30,17 @@ const ReportRenderer: FC<ReportRendererProps> = ({
 
         {/* Text content */}
         <div className="flex flex-col gap-1">
-          <p className="font-normal text-base text-gray-950 leading-5">
+          <p className="font-normal text-base text-foreground leading-5">
             {title}
           </p>
-          <p className="whitespace-nowrap text-gray-400 text-xs leading-4">
+          <p className="whitespace-nowrap text-muted-foreground text-xs leading-4">
             {`Created at: ${TimeUtils.formatUTC(create_time, TIME_FORMATS.DATE)}`}
           </p>
         </div>
       </div>
 
       {/* Right side: Arrow icon */}
-      <ChevronRight className="size-6 text-gray-700" />
+      <ChevronRight className="size-6 text-muted-foreground" />
     </div>
   );
 };
diff --git a/frontend/src/components/valuecell/renderer/scheduled-task-controller-renderer.tsx b/frontend/src/components/valuecell/renderer/scheduled-task-controller-renderer.tsx
index 8f864acee..a56d19fb6 100644
--- a/frontend/src/components/valuecell/renderer/scheduled-task-controller-renderer.tsx
+++ b/frontend/src/components/valuecell/renderer/scheduled-task-controller-renderer.tsx
@@ -25,12 +25,12 @@ const ScheduledTaskControllerRenderer: FC<
   };
 
   return (
-    <div className="flex min-w-96 items-center justify-between gap-3 rounded-xl bg-gray-50 px-4 py-3">
+    <div className="flex min-w-96 items-center justify-between gap-3 rounded-xl bg-card px-4 py-3">
       <div className="flex shrink-0 items-center gap-3">
         <div className="flex size-8 shrink-0 items-center justify-center">
           <Clock className="size-5 text-primary" />
         </div>
-        <p className="font-medium text-base text-gray-950">
+        <p className="font-medium text-base text-foreground">
           {task_title || "Untitled Task"}
         </p>
       </div>
@@ -42,7 +42,7 @@ const ScheduledTaskControllerRenderer: FC<
         size="sm"
         disabled={!isRunning}
         className={cn(
-          "cursor-pointer text-base text-blue-500 transition-colors hover:text-blue-500/80 disabled:text-gray-400",
+          "cursor-pointer text-base text-primary transition-colors hover:text-primary/80 disabled:text-muted-foreground",
         )}
       >
         {isRunning ? "Cancel" : "Cancelled"}
diff --git a/frontend/src/components/valuecell/renderer/scheduled-task-renderer.tsx b/frontend/src/components/valuecell/renderer/scheduled-task-renderer.tsx
index 1b2b582d3..3b227d47d 100644
--- a/frontend/src/components/valuecell/renderer/scheduled-task-renderer.tsx
+++ b/frontend/src/components/valuecell/renderer/scheduled-task-renderer.tsx
@@ -13,11 +13,11 @@ const ScheduledTaskRenderer: FC<ScheduledTaskRendererProps> = ({
   return (
     <div
       className={cn(
-        "group relative flex h-full cursor-pointer flex-col gap-3 rounded-lg border-gradient bg-gray-50 p-4 text-gray-950 transition-all",
+        "group relative flex h-full cursor-pointer flex-col gap-3 rounded-lg border-gradient bg-card p-4 text-foreground transition-all",
       )}
       onClick={() => onOpen?.(result)}
     >
-      <p className="whitespace-nowrap text-gray-400 text-sm">
+      <p className="whitespace-nowrap text-muted-foreground text-sm">
         {TimeUtils.formatUTC(create_time, TIME_FORMATS.DATETIME_SHORT)}
       </p>
       {/* content */}
diff --git a/frontend/src/components/valuecell/renderer/tool-call-renderer.tsx b/frontend/src/components/valuecell/renderer/tool-call-renderer.tsx
index d12a3736d..d9f0ec2b4 100644
--- a/frontend/src/components/valuecell/renderer/tool-call-renderer.tsx
+++ b/frontend/src/components/valuecell/renderer/tool-call-renderer.tsx
@@ -30,7 +30,7 @@ const ToolCallRenderer: FC<ToolCallRendererProps> = ({ content }) => {
         )}
         disabled={!tool_result}
       >
-        <div className="flex items-center gap-2 text-gray-950">
+        <div className="flex items-center gap-2 text-foreground">
           {tool_result ? (
             <Search className="size-5" />
           ) : (
@@ -41,7 +41,7 @@ const ToolCallRenderer: FC<ToolCallRendererProps> = ({ content }) => {
         {tool_result_array && (
           <ChevronDown
             className={cn(
-              "h-6 w-6 text-gray-950 transition-transform",
+              "h-6 w-6 text-muted-foreground transition-transform",
               isOpen && "rotate-180",
             )}
           />
diff --git a/frontend/src/components/valuecell/renderer/unknown-renderer.tsx b/frontend/src/components/valuecell/renderer/unknown-renderer.tsx
index b32a61c72..d7ca01253 100644
--- a/frontend/src/components/valuecell/renderer/unknown-renderer.tsx
+++ b/frontend/src/components/valuecell/renderer/unknown-renderer.tsx
@@ -10,14 +10,14 @@ interface UnknownRendererProps {
 const UnknownRenderer: FC<UnknownRendererProps> = ({ item, content }) => {
   return (
     <div>
-      <div className="mt-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
+      <div className="mt-3 rounded-lg border border-border bg-muted p-3">
         <div className="mb-2 flex items-center gap-2">
-          <FileText size={16} className="text-blue-600" />
-          <span className="font-medium text-blue-900 text-sm capitalize">
+          <FileText size={16} className="text-primary" />
+          <span className="font-medium text-foreground text-sm capitalize">
             {item.component_type} (Unknown Component Type)
           </span>
         </div>
-        <div className="rounded bg-white p-3 text-gray-800 text-sm">
+        <div className="rounded bg-card p-3 text-foreground text-sm">
           <pre className="whitespace-pre-wrap font-mono text-xs">{content}</pre>
         </div>
       </div>
diff --git a/frontend/src/components/valuecell/scroll/scroll-textarea.tsx b/frontend/src/components/valuecell/scroll/scroll-textarea.tsx
index 2f056d182..66aee1c0e 100644
--- a/frontend/src/components/valuecell/scroll/scroll-textarea.tsx
+++ b/frontend/src/components/valuecell/scroll/scroll-textarea.tsx
@@ -93,7 +93,7 @@ function ScrollTextarea({
         ref={textareaRef}
         onInput={handleInput}
         className={cn(
-          "w-full resize-none border-0 bg-transparent p-0 text-base leading-5.5 outline-none placeholder:text-gray-400",
+          "w-full resize-none border-0 bg-transparent p-0 text-base leading-5.5 outline-none placeholder:text-muted-foreground",
           className,
         )}
         {...props}
diff --git a/frontend/src/components/valuecell/skeleton/agent-market-skeleton.tsx b/frontend/src/components/valuecell/skeleton/agent-market-skeleton.tsx
index 8b606a34c..ad86209dd 100644
--- a/frontend/src/components/valuecell/skeleton/agent-market-skeleton.tsx
+++ b/frontend/src/components/valuecell/skeleton/agent-market-skeleton.tsx
@@ -7,7 +7,7 @@ function AgentCardSkeleton({ className, ...props }: AgentCardSkeletonProps) {
   return (
     <div
       className={cn(
-        "box-border flex w-full flex-col items-center gap-4 rounded-xl border border-gray-100 bg-neutral-50 p-4",
+        "box-border flex w-full flex-col items-center gap-4 rounded-xl border border-border bg-card p-4",
         className,
       )}
       {...props}
diff --git a/frontend/src/components/valuecell/step-indicator.tsx b/frontend/src/components/valuecell/step-indicator.tsx
index 46082a82c..762100031 100644
--- a/frontend/src/components/valuecell/step-indicator.tsx
+++ b/frontend/src/components/valuecell/step-indicator.tsx
@@ -24,8 +24,8 @@ export const StepIndicator: FC<StepIndicatorProps> = ({
   ) => {
     if (isCompleted) {
       return (
-        <div className="flex size-6 items-center justify-center rounded-full bg-gray-950">
-          <Check className="size-3 text-white" />
+        <div className="flex size-6 items-center justify-center rounded-full bg-primary">
+          <Check className="size-3 text-primary-foreground" />
         </div>
       );
     }
@@ -34,12 +34,12 @@ export const StepIndicator: FC<StepIndicatorProps> = ({
       <div className="relative flex size-6 items-center justify-center">
         <div
           className={`absolute inset-0 rounded-full border-2 ${
-            isCurrent ? "border-gray-950 bg-gray-950" : "border-black/40"
+            isCurrent ? "border-primary bg-primary" : "border-border"
           }`}
         />
         <span
           className={`relative font-semibold text-base ${
-            isCurrent ? "text-white" : "text-black/40"
+            isCurrent ? "text-primary-foreground" : "text-muted-foreground"
           }`}
         >
           {step}
@@ -67,7 +67,7 @@ export const StepIndicator: FC<StepIndicatorProps> = ({
               <div className="flex min-w-0 flex-1 items-center gap-3 pr-3">
                 <span
                   className={`shrink-0 whitespace-nowrap text-base ${
-                    isActive ? "text-black/90" : "text-black/40"
+                    isActive ? "text-foreground" : "text-muted-foreground"
                   }`}
                 >
                   {step.title}
@@ -76,7 +76,7 @@ export const StepIndicator: FC<StepIndicatorProps> = ({
                 {!isLast && (
                   <div
                     className={`h-0.5 min-w-0 flex-1 ${
-                      isCompleted ? "bg-gray-950" : "bg-gray-200"
+                      isCompleted ? "bg-primary" : "bg-border"
                     }`}
                   />
                 )}
diff --git a/frontend/src/global.css b/frontend/src/global.css
index 087ec0668..f0c9e674a 100644
--- a/frontend/src/global.css
+++ b/frontend/src/global.css
@@ -135,7 +135,7 @@
     background-image: linear-gradient(var(--color-background), var(--color-background));
     background-clip: padding-box;
     background-origin: border-box;
-    border: 1px solid var(--color-gray-100);
+    border: 1px solid var(--color-border);
     transition: border-color 0.2s ease-in-out;
 
     &[data-active="true"] {
@@ -190,4 +190,4 @@
       overflow-y: auto;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index 0499399d5..d337bbc54 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -18,6 +18,15 @@
         "ja-JP": "日本語"
       }
     },
+    "theme": {
+      "title": "Theme",
+      "description": "Choose light, dark, or follow system settings.",
+      "options": {
+        "system": "System",
+        "light": "Light",
+        "dark": "Dark"
+      }
+    },
     "quotesColor": {
       "title": "Quotes Color",
       "description": "Choose how stock quote movements are visualized across the app.",
@@ -29,6 +38,29 @@
       "check": "Check for Update"
     }
   },
+  "auth": {
+    "login": {
+      "title": "Sign In",
+      "tagline": "The first open-source platform for financial agents.",
+      "providers": {
+        "google": "Google",
+        "apple": "Apple"
+      },
+      "actions": {
+        "continueWith": "Continue with {{provider}}"
+      },
+      "errors": {
+        "timeout": {
+          "title": "Login timed out",
+          "description": "Please try again."
+        },
+        "failed": {
+          "title": "Failed to sign in with {{provider}}",
+          "description": "Info: {{info}}"
+        }
+      }
+    }
+  },
   "settings": {
     "title": "Settings",
     "nav": {
diff --git a/frontend/src/i18n/locales/ja.json b/frontend/src/i18n/locales/ja.json
index dfc12bcec..5cddac8f7 100644
--- a/frontend/src/i18n/locales/ja.json
+++ b/frontend/src/i18n/locales/ja.json
@@ -18,6 +18,15 @@
         "ja-JP": "日本語"
       }
     },
+    "theme": {
+      "title": "テーマ",
+      "description": "ライト、ダーク、またはシステム設定に従うを選択します。",
+      "options": {
+        "system": "システム",
+        "light": "ライト",
+        "dark": "ダーク"
+      }
+    },
     "quotesColor": {
       "title": "チャートの配色",
       "description": "株価の変動を視覚化する方法を選択してください。",
@@ -29,6 +38,29 @@
       "check": "アップデートを確認"
     }
   },
+  "auth": {
+    "login": {
+      "title": "サインイン",
+      "tagline": "金融エージェント向けの最初のオープンソースプラットフォーム。",
+      "providers": {
+        "google": "Google",
+        "apple": "Apple"
+      },
+      "actions": {
+        "continueWith": "{{provider}}で続行"
+      },
+      "errors": {
+        "timeout": {
+          "title": "サインインがタイムアウトしました",
+          "description": "もう一度お試しください。"
+        },
+        "failed": {
+          "title": "{{provider}}でのサインインに失敗しました",
+          "description": "情報: {{info}}"
+        }
+      }
+    }
+  },
   "settings": {
     "title": "設定",
     "nav": {
diff --git a/frontend/src/i18n/locales/zh_CN.json b/frontend/src/i18n/locales/zh_CN.json
index 23960ad29..800ba46f2 100644
--- a/frontend/src/i18n/locales/zh_CN.json
+++ b/frontend/src/i18n/locales/zh_CN.json
@@ -18,6 +18,15 @@
         "ja-JP": "日本語"
       }
     },
+    "theme": {
+      "title": "主题",
+      "description": "选择浅色、深色或跟随系统。",
+      "options": {
+        "system": "跟随系统",
+        "light": "浅色",
+        "dark": "深色"
+      }
+    },
     "quotesColor": {
       "title": "行情颜色",
       "description": "选择股票行情涨跌的显示颜色。",
@@ -29,6 +38,29 @@
       "check": "检查更新"
     }
   },
+  "auth": {
+    "login": {
+      "title": "登录",
+      "tagline": "首个开源金融智能体平台。",
+      "providers": {
+        "google": "Google",
+        "apple": "Apple"
+      },
+      "actions": {
+        "continueWith": "使用 {{provider}} 继续"
+      },
+      "errors": {
+        "timeout": {
+          "title": "登录超时",
+          "description": "请重试。"
+        },
+        "failed": {
+          "title": "使用 {{provider}} 登录失败",
+          "description": "错误信息：{{info}}"
+        }
+      }
+    }
+  },
   "settings": {
     "title": "设置",
     "nav": {
diff --git a/frontend/src/i18n/locales/zh_TW.json b/frontend/src/i18n/locales/zh_TW.json
index f13de6326..5810f0d63 100644
--- a/frontend/src/i18n/locales/zh_TW.json
+++ b/frontend/src/i18n/locales/zh_TW.json
@@ -18,6 +18,15 @@
         "ja-JP": "日本語"
       }
     },
+    "theme": {
+      "title": "主題",
+      "description": "選擇淺色、深色或跟隨系統。",
+      "options": {
+        "system": "跟隨系統",
+        "light": "淺色",
+        "dark": "深色"
+      }
+    },
     "quotesColor": {
       "title": "行情顏色",
       "description": "選擇股票行情漲跌的顯示顏色。",
@@ -29,6 +38,29 @@
       "check": "檢查更新"
     }
   },
+  "auth": {
+    "login": {
+      "title": "登入",
+      "tagline": "首個開源金融智能體平台。",
+      "providers": {
+        "google": "Google",
+        "apple": "Apple"
+      },
+      "actions": {
+        "continueWith": "使用 {{provider}} 繼續"
+      },
+      "errors": {
+        "timeout": {
+          "title": "登入逾時",
+          "description": "請再試一次。"
+        },
+        "failed": {
+          "title": "使用 {{provider}} 登入失敗",
+          "description": "錯誤資訊：{{info}}"
+        }
+      }
+    }
+  },
   "settings": {
     "title": "設定",
     "nav": {
diff --git a/frontend/src/root.tsx b/frontend/src/root.tsx
index e20f9414b..bd53b7954 100644
--- a/frontend/src/root.tsx
+++ b/frontend/src/root.tsx
@@ -1,4 +1,5 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ThemeProvider } from "next-themes";
 import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
 import "@/i18n";
 import AppSidebar from "@/components/valuecell/app/app-sidebar";
@@ -9,7 +10,7 @@ import { SidebarProvider } from "./components/ui/sidebar";
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head>
         <meta charSet="UTF-8" />
         <link rel="icon" type="image/svg+xml" href="/logo.svg" />
@@ -48,24 +49,32 @@ import { TrackerProvider } from "./provider/tracker-provider";
 export default function Root() {
   return (
     <QueryClientProvider client={queryClient}>
-      <BackendHealthCheck>
-        <TrackerProvider>
-          <SidebarProvider>
-            <div className="fixed flex size-full overflow-hidden">
-              <AppSidebar />
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+        enableColorScheme
+        storageKey="valuecell-theme"
+      >
+        <BackendHealthCheck>
+          <TrackerProvider>
+            <SidebarProvider>
+              <div className="fixed flex size-full overflow-hidden">
+                <AppSidebar />
 
-              <main
-                className="relative flex flex-1 overflow-hidden"
-                id="main-content"
-              >
-                <Outlet />
-              </main>
-              <Toaster />
-            </div>
-          </SidebarProvider>
-        </TrackerProvider>
-        <AutoUpdateCheck />
-      </BackendHealthCheck>
+                <main
+                  className="relative flex flex-1 overflow-hidden"
+                  id="main-content"
+                >
+                  <Outlet />
+                </main>
+                <Toaster />
+              </div>
+            </SidebarProvider>
+          </TrackerProvider>
+          <AutoUpdateCheck />
+        </BackendHealthCheck>
+      </ThemeProvider>
     </QueryClientProvider>
   );
 }