diff --git a/packages/frontend/src/apis/queries/auth/schema.ts b/packages/frontend/src/apis/queries/auth/schema.ts
index e82b0bef..fc847ddd 100644
--- a/packages/frontend/src/apis/queries/auth/schema.ts
+++ b/packages/frontend/src/apis/queries/auth/schema.ts
@@ -14,42 +14,8 @@ export const GetTestLoginSchema = z.object({
 
 export type GetTestLogin = z.infer<typeof GetTestLoginSchema>;
 
-export const GetUserInfoSchema = z.object({
-  nickname: z.string(),
-  subName: z.string(),
-  createdAt: z.string().datetime(),
-  email: z.string(),
-  type: z.string(),
-});
-
-export type GetUserInfo = z.infer<typeof GetUserInfoSchema>;
-
-export const PostUserNicknameSchema = z.object({
-  message: z.string(),
-  date: z.string().datetime(),
-});
-
-export type PostUserNickname = z.infer<typeof PostUserNicknameSchema>;
-
 export const PostLogoutSchema = z.object({
   message: z.string(),
 });
 
 export type PostLogout = z.infer<typeof PostLogoutSchema>;
-
-export const GetUserStockSchema = z.object({
-  id: z.number(),
-  stockId: z.string(),
-  name: z.string(),
-  isTrading: z.boolean(),
-  groupCode: z.string(),
-  createdAt: z.string().datetime(),
-});
-
-export type GetUserStock = z.infer<typeof GetUserStockSchema>;
-
-export const GetUserStockResponseSchema = z.object({
-  userStocks: z.array(GetUserStockSchema),
-});
-
-export type GetUserStockResponse = z.infer<typeof GetUserStockResponseSchema>;
diff --git a/packages/frontend/src/apis/queries/user/index.ts b/packages/frontend/src/apis/queries/user/index.ts
new file mode 100644
index 00000000..9e26a7fd
--- /dev/null
+++ b/packages/frontend/src/apis/queries/user/index.ts
@@ -0,0 +1,4 @@
+export * from './schema';
+export * from './useGetUserInfo';
+export * from './useGetUserStock';
+export * from './usePostUserNickname';
diff --git a/packages/frontend/src/apis/queries/user/schema.ts b/packages/frontend/src/apis/queries/user/schema.ts
new file mode 100644
index 00000000..bc716011
--- /dev/null
+++ b/packages/frontend/src/apis/queries/user/schema.ts
@@ -0,0 +1,41 @@
+import { z } from 'zod';
+
+export const GetUserInfoSchema = z.object({
+  nickname: z.string(),
+  subName: z.string(),
+  createdAt: z.string().datetime(),
+  email: z.string(),
+  type: z.string(),
+});
+
+export type GetUserInfo = z.infer<typeof GetUserInfoSchema>;
+
+export const GetUserStockSchema = z.object({
+  id: z.number(),
+  stockId: z.string(),
+  name: z.string(),
+  isTrading: z.boolean(),
+  groupCode: z.string(),
+  createdAt: z.string().datetime(),
+});
+
+export type GetUserStock = z.infer<typeof GetUserStockSchema>;
+
+export const GetUserStockResponseSchema = z.object({
+  userStocks: z.array(GetUserStockSchema),
+});
+
+export type GetUserStockResponse = z.infer<typeof GetUserStockResponseSchema>;
+
+export const PostUserNicknameSchema = z.object({
+  message: z.string(),
+  date: z.string().datetime(),
+});
+
+export type PostUserNickname = z.infer<typeof PostUserNicknameSchema>;
+
+export const GetUserThemeSchema = z.object({
+  theme: z.enum(['light', 'dark']),
+});
+
+export type GetUserTheme = z.infer<typeof GetUserThemeSchema>;
diff --git a/packages/frontend/src/apis/queries/auth/useGetUserInfo.ts b/packages/frontend/src/apis/queries/user/useGetUserInfo.ts
similarity index 100%
rename from packages/frontend/src/apis/queries/auth/useGetUserInfo.ts
rename to packages/frontend/src/apis/queries/user/useGetUserInfo.ts
diff --git a/packages/frontend/src/apis/queries/auth/useGetUserStock.ts b/packages/frontend/src/apis/queries/user/useGetUserStock.ts
similarity index 100%
rename from packages/frontend/src/apis/queries/auth/useGetUserStock.ts
rename to packages/frontend/src/apis/queries/user/useGetUserStock.ts
diff --git a/packages/frontend/src/apis/queries/auth/usePostUserNickname.ts b/packages/frontend/src/apis/queries/user/usePostUserNickname.ts
similarity index 100%
rename from packages/frontend/src/apis/queries/auth/usePostUserNickname.ts
rename to packages/frontend/src/apis/queries/user/usePostUserNickname.ts
diff --git a/packages/frontend/src/assets/google.png b/packages/frontend/src/assets/google.png
deleted file mode 100644
index 33d8f0ee..00000000
Binary files a/packages/frontend/src/assets/google.png and /dev/null differ
diff --git a/packages/frontend/src/assets/google.svg b/packages/frontend/src/assets/google.svg
new file mode 100644
index 00000000..088288fa
--- /dev/null
+++ b/packages/frontend/src/assets/google.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/><path d="M1 1h22v22H1z" fill="none"/></svg>
\ No newline at end of file
diff --git a/packages/frontend/src/components/layouts/Layout.tsx b/packages/frontend/src/components/layouts/Layout.tsx
index d3d77474..0bb93b7d 100644
--- a/packages/frontend/src/components/layouts/Layout.tsx
+++ b/packages/frontend/src/components/layouts/Layout.tsx
@@ -3,7 +3,7 @@ import { Sidebar } from './Sidebar';
 
 export const Layout = () => {
   return (
-    <div className="flex min-h-screen">
+    <div className="bg-extra-light-gray flex min-h-screen">
       <Sidebar />
       <main className="ml-20 flex-1">
         <div className="h-full overflow-auto px-16 py-16 md:px-24 lg:px-28 xl:px-44">
diff --git a/packages/frontend/src/components/layouts/Sidebar.tsx b/packages/frontend/src/components/layouts/Sidebar.tsx
index f17273c8..2a166981 100644
--- a/packages/frontend/src/components/layouts/Sidebar.tsx
+++ b/packages/frontend/src/components/layouts/Sidebar.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import logoCharacter from '/logoCharacter.png';
 import logoTitle from '/logoTitle.png';
 import { Alarm } from './alarm';
@@ -9,30 +10,41 @@ import { useOutsideClick } from '@/hooks/useOutsideClick';
 import { type MenuSection } from '@/types/menu';
 import { cn } from '@/utils/cn';
 
+type TabKey = 'search' | 'alarm';
+
 export const Sidebar = () => {
+  const navigate = useNavigate();
   const [isHovered, setIsHovered] = useState(false);
-  const [showSearch, setShowSearch] = useState(false);
-  const [showAlarm, setShowAlarm] = useState(false);
+  const [showTabs, setShowTabs] = useState<Record<TabKey, boolean>>({
+    search: false,
+    alarm: false,
+  });
 
   const ref = useOutsideClick(() => {
-    if (showSearch) {
-      setShowSearch(false);
-    }
-
-    if (showAlarm) {
-      setShowAlarm(false);
-    }
+    setShowTabs({ search: false, alarm: false });
   });
 
   const handleMenuItemClick = (item: MenuSection) => {
-    if (item.text === '검색') {
-      setShowSearch(true);
-      setShowAlarm(false);
+    const tab: Record<string, TabKey> = {
+      검색: 'search',
+      알림: 'alarm',
+    };
+
+    const tabKey = tab[item.text];
+    if (tabKey) {
+      setShowTabs((prev) =>
+        Object.keys(prev).reduce(
+          (acc, key) => ({
+            ...acc,
+            [key]: key === tabKey,
+          }),
+          {} as Record<TabKey, boolean>,
+        ),
+      );
     }
 
-    if (item.text === '알림') {
-      setShowSearch(false);
-      setShowAlarm(true);
+    if (item.text === '다크모드') {
+      document.body.classList.toggle('dark');
     }
   };
 
@@ -48,7 +60,10 @@ export const Sidebar = () => {
         onMouseLeave={() => setIsHovered(false)}
       >
         <section className="flex flex-col justify-center gap-8">
-          <header className="flex items-center gap-4">
+          <header
+            className="flex items-center gap-4"
+            onClick={() => navigate('/')}
+          >
             <img src={logoCharacter} alt="로고 캐릭터" className="w-20" />
             <img
               src={logoTitle}
@@ -68,7 +83,11 @@ export const Sidebar = () => {
                 isHovered={isHovered}
                 onItemClick={handleMenuItemClick}
               />
-              <MenuList items={BOTTOM_MENU_ITEMS} isHovered={isHovered} />
+              <MenuList
+                items={BOTTOM_MENU_ITEMS}
+                isHovered={isHovered}
+                onItemClick={handleMenuItemClick}
+              />
             </div>
           </div>
         </section>
@@ -79,8 +98,8 @@ export const Sidebar = () => {
           isHovered ? 'left-60' : 'left-24',
         )}
       >
-        {showSearch && <Search className="h-screen" />}
-        {showAlarm && <Alarm className="h-screen" />}
+        {showTabs.search && <Search className="h-screen" />}
+        {showTabs.alarm && <Alarm className="h-screen" />}
       </div>
     </div>
   );
diff --git a/packages/frontend/src/components/ui/alarm/Alarm.tsx b/packages/frontend/src/components/ui/alarm/Alarm.tsx
index 04750869..1057c6ee 100644
--- a/packages/frontend/src/components/ui/alarm/Alarm.tsx
+++ b/packages/frontend/src/components/ui/alarm/Alarm.tsx
@@ -10,7 +10,7 @@ export interface AlarmProps {
 
 export const Alarm = ({ goalPrice, method, date }: AlarmProps) => {
   return (
-    <article className="display-medium14 text-dark-gray flex flex-col gap-2 rounded-md bg-[#f6f6f6] p-4">
+    <article className="display-medium14 text-dark-gray bg-extra-light-gray flex flex-col gap-2 rounded-md p-4">
       <span className="flex items-center gap-2">
         <Flag />
         목표가: {goalPrice?.toLocaleString()}원
diff --git a/packages/frontend/src/components/ui/input/Input.tsx b/packages/frontend/src/components/ui/input/Input.tsx
index dea815e4..fb4fce4f 100644
--- a/packages/frontend/src/components/ui/input/Input.tsx
+++ b/packages/frontend/src/components/ui/input/Input.tsx
@@ -10,7 +10,7 @@ export const Input = ({ placeholder, className, ...props }: InputProps) => {
     <input
       placeholder={placeholder}
       className={cn(
-        'border-dark-gray w-36 border-b focus:outline-none',
+        'border-dark-gray w-36 border-b bg-white focus:outline-none',
         className,
       )}
       {...props}
diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
index cd69632b..78786c7f 100644
--- a/packages/frontend/src/index.css
+++ b/packages/frontend/src/index.css
@@ -13,7 +13,42 @@
 @layer base {
   html {
     font-family: 'Pretendard-Regular';
-    background-color: #f0f0f0;
+  }
+
+  body {
+    color: var(--black);
+  }
+}
+
+@layer base {
+  :root {
+    --extra-light-gray: #f0f0f0;
+    --light-gray: #d9d9d9;
+    --gray: #8c8c8c;
+    --dark-gray: #4f4f4f;
+    --black: #000000;
+    --white: #ffffff;
+    --light-yellow: #ffdcac;
+    --light-orange: #ffcfac;
+    --orange: #ffa868;
+    --red: #ff4d4d;
+    --green: #7eeb7e;
+    --blue: #1a75ff;
+  }
+
+  .dark {
+    --extra-light-gray: #1f1f1f;
+    --light-gray: #4f4f4f;
+    --gray: #8c8c8c;
+    --dark-gray: #d9d9d9;
+    --black: #ffffff;
+    --white: #121212;
+    --light-yellow: #7c4818;
+    --light-orange: #ecb172;
+    --orange: #ff9137;
+    --red: #ff6b6b;
+    --green: #4caf50;
+    --blue: #4d9eff;
   }
 }
 
diff --git a/packages/frontend/src/pages/login/Login.tsx b/packages/frontend/src/pages/login/Login.tsx
index f3a7f7ac..6b6f1793 100644
--- a/packages/frontend/src/pages/login/Login.tsx
+++ b/packages/frontend/src/pages/login/Login.tsx
@@ -1,49 +1,37 @@
-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { useGetTestLogin } from '@/apis/queries/auth/useGetTestLogin';
-import google from '@/assets/google.png';
+import Google from '@/assets/google.svg?react';
 import { Button } from '@/components/ui/button';
 
-interface LoginButtonProps {
-  to: string;
-  src: string;
-  alt: string;
-  onClick?: () => void;
-}
-
 export const Login = () => {
-  const navigate = useNavigate();
   const googleLoginUrl = '/api/auth/google/login';
   const { refetch } = useGetTestLogin({ password: 'test', username: 'test' });
 
   return (
     <div className="flex h-[calc(100vh-8rem)] flex-col items-center justify-center">
-      <main className="relative flex flex-col gap-36 rounded-lg bg-gradient-to-br from-[#ffe259] to-[#ffa751] p-16 py-24 shadow-sm">
+      <main className="relative flex flex-col gap-36 rounded-lg bg-gradient-to-br from-[#ffe259] to-[#ffa751] p-16 py-24 shadow-sm dark:from-[#e35f5f] dark:to-[#ead16b]">
         <div className="absolute inset-0 rounded-md bg-white/40 backdrop-blur-sm" />
         <section className="relative z-10">
           <h2 className="display-bold24">스마트한 투자의 첫걸음,</h2>
           <p className="display-medium20">주춤주춤과 함께해요!</p>
         </section>
         <section className="relative z-10 flex flex-col gap-4">
-          <LoginButton to={googleLoginUrl} src={google} alt="구글 로그인" />
-          <Button
-            onClick={() => {
-              refetch();
-              navigate('/');
-            }}
-            className="h-10 w-full"
-          >
-            게스트로 로그인
-          </Button>
+          <Link to={googleLoginUrl} className="w-72" reloadDocument>
+            <Button className="flex h-10 w-full items-center justify-center gap-4 px-10 dark:bg-black">
+              <Google />
+              <span>구글 로그인</span>
+            </Button>
+          </Link>
+          <Link to="/">
+            <Button
+              onClick={() => refetch()}
+              className="h-10 w-full dark:bg-black"
+            >
+              게스트로 로그인
+            </Button>
+          </Link>
         </section>
       </main>
     </div>
   );
 };
-
-export const LoginButton = ({ to, src, alt, onClick }: LoginButtonProps) => {
-  return (
-    <Link to={to} className="w-72" onClick={onClick} reloadDocument>
-      <img src={src} alt={alt} />
-    </Link>
-  );
-};
diff --git a/packages/frontend/src/pages/my-page/StockInfo.tsx b/packages/frontend/src/pages/my-page/StockInfo.tsx
index e104f150..0cec9256 100644
--- a/packages/frontend/src/pages/my-page/StockInfo.tsx
+++ b/packages/frontend/src/pages/my-page/StockInfo.tsx
@@ -1,8 +1,8 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import { GetLoginStatus } from '@/apis/queries/auth/schema';
-import { useGetUserStock } from '@/apis/queries/auth/useGetUserStock';
 import { useDeleteStockUser } from '@/apis/queries/stock-detail';
+import { useGetUserStock } from '@/apis/queries/user/useGetUserStock';
 import { Button } from '@/components/ui/button';
 
 interface StockInfoProps {
diff --git a/packages/frontend/src/pages/my-page/UserInfo.tsx b/packages/frontend/src/pages/my-page/UserInfo.tsx
index 8e8e9d1a..0fceeb1a 100644
--- a/packages/frontend/src/pages/my-page/UserInfo.tsx
+++ b/packages/frontend/src/pages/my-page/UserInfo.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { useGetUserInfo } from '@/apis/queries/auth/useGetUserInfo';
 import { usePostLogout } from '@/apis/queries/auth/usePostLogout';
-import { usePostUserNickname } from '@/apis/queries/auth/usePostUserNickname';
+import { useGetUserInfo } from '@/apis/queries/user/useGetUserInfo';
+import { usePostUserNickname } from '@/apis/queries/user/usePostUserNickname';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 
diff --git a/packages/frontend/src/pages/stock-detail/AddAlarmForm.tsx b/packages/frontend/src/pages/stock-detail/AddAlarmForm.tsx
index 3bffa75a..dfdf938b 100644
--- a/packages/frontend/src/pages/stock-detail/AddAlarmForm.tsx
+++ b/packages/frontend/src/pages/stock-detail/AddAlarmForm.tsx
@@ -1,4 +1,5 @@
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import { ALARM_OPTIONS } from '@/constants/alarmOptions';
 import { cn } from '@/utils/cn';
 
@@ -25,28 +26,34 @@ export const AddAlarmForm = ({ className }: AddAlarmFormProps) => {
           <article className="flex flex-col gap-2">
             <p className="display-bold16">언제 알림을 보낼까요?</p>
             <section className="flex">
-              <select className="display-medium14 focus:outline-none">
+              <select className="display-medium14 bg-white focus:outline-none">
                 {ALARM_OPTIONS.map((option) => (
                   <option key={option.id} value={option.label}>
                     {option.label}
                   </option>
                 ))}
               </select>
-              <input
+              <Input
                 type="number"
                 placeholder="1,000"
-                className="border-gray border-b-[1px] text-right focus:outline-none"
+                className="w-full text-right"
               />
             </section>
           </article>
           <article className="flex flex-col gap-2">
             <p className="display-bold16">어떻게 알림을 보낼까요?</p>
             <section className="flex items-center">
-              <input type="radio" name="method" id="push" checked />
+              <Input
+                type="radio"
+                name="method"
+                id="push"
+                checked
+                className="w-fit"
+              />
               <label htmlFor="push" className="display-medium14">
                 웹 푸시
               </label>
-              <input type="radio" name="method" id="email" />
+              <Input type="radio" name="method" id="email" className="w-fit" />
               <label htmlFor="email" className="display-medium14">
                 이메일
               </label>
@@ -54,10 +61,7 @@ export const AddAlarmForm = ({ className }: AddAlarmFormProps) => {
           </article>
           <article className="flex flex-col gap-2">
             <p className="display-bold16">언제까지 알림을 보낼까요?</p>
-            <input
-              type="date"
-              className="display-medium14 focus:outline-none"
-            />
+            <Input type="date" className="display-medium14" />
           </article>
         </div>
         <Button>알림 추가하기</Button>
diff --git a/packages/frontend/src/pages/stock-detail/components/TextArea.tsx b/packages/frontend/src/pages/stock-detail/components/TextArea.tsx
index 5b1f9739..515062ad 100644
--- a/packages/frontend/src/pages/stock-detail/components/TextArea.tsx
+++ b/packages/frontend/src/pages/stock-detail/components/TextArea.tsx
@@ -29,7 +29,7 @@ export const TextArea = ({ disabled, onSend, placeholder }: TextAreaProps) => {
           disabled={disabled}
           autoFocus
           className={cn(
-            'display-medium12 border-light-yellow h-20 w-full resize-none rounded-md border-4 p-3 pr-10 focus:outline-none',
+            'display-medium12 border-light-yellow h-20 w-full resize-none rounded-md border-4 bg-white p-3 pr-10 focus:outline-none',
             disabled && 'bg-light-gray/40 cursor-not-allowed',
           )}
           onChange={(e) => {
diff --git a/packages/frontend/src/styles/theme/darkTheme.ts b/packages/frontend/src/styles/theme/darkTheme.ts
index 2122b987..bf6b3d91 100644
--- a/packages/frontend/src/styles/theme/darkTheme.ts
+++ b/packages/frontend/src/styles/theme/darkTheme.ts
@@ -1,8 +1,4 @@
-import resolveConfig from 'tailwindcss/resolveConfig';
 import { ChartTheme } from '.';
-import tailwindConfig from '@/../tailwind.config';
-
-const colorConfig = resolveConfig(tailwindConfig).theme.colors;
 
 export const darkTheme: ChartTheme = {
   background: '#1a1a1a',
@@ -10,11 +6,11 @@ export const darkTheme: ChartTheme = {
   gridLines: '#334158',
   borderColor: '#485c7b',
   candlestick: {
-    upColor: colorConfig.red.toString(),
-    downColor: colorConfig.blue.toString(),
-    borderUpColor: colorConfig.red.toString(),
-    borderDownColor: colorConfig.blue.toString(),
-    wickUpColor: '#838ca1',
-    wickDownColor: '#838ca1',
+    upColor: '#ff4d4d',
+    downColor: '#1a75ff',
+    borderUpColor: '#ff4d4d',
+    borderDownColor: '#1a75ff',
+    wickUpColor: '#737375',
+    wickDownColor: '#737375',
   },
 };
diff --git a/packages/frontend/src/styles/theme/lightTheme.ts b/packages/frontend/src/styles/theme/lightTheme.ts
index c1f2698d..08a436a7 100644
--- a/packages/frontend/src/styles/theme/lightTheme.ts
+++ b/packages/frontend/src/styles/theme/lightTheme.ts
@@ -1,19 +1,15 @@
-import resolveConfig from 'tailwindcss/resolveConfig';
 import { ChartTheme } from '.';
-import tailwindConfig from '@/../tailwind.config';
-
-const colorConfig = resolveConfig(tailwindConfig).theme.colors;
 
 export const lightTheme: ChartTheme = {
-  background: colorConfig.white,
+  background: '#ffffff',
   textColor: '#000000e6',
   gridLines: '#e0e3eb',
   borderColor: '#d6dcde',
   candlestick: {
-    upColor: colorConfig.red.toString(),
-    downColor: colorConfig.blue.toString(),
-    borderUpColor: colorConfig.red.toString(),
-    borderDownColor: colorConfig.blue.toString(),
+    upColor: '#ff4d4d',
+    downColor: '#1a75ff',
+    borderUpColor: '#ff4d4d',
+    borderDownColor: '#1a75ff',
     wickUpColor: '#737375',
     wickDownColor: '#737375',
   },
diff --git a/packages/frontend/src/utils/getHistogramColorData.ts b/packages/frontend/src/utils/getHistogramColorData.ts
index 397144ee..d3b98029 100644
--- a/packages/frontend/src/utils/getHistogramColorData.ts
+++ b/packages/frontend/src/utils/getHistogramColorData.ts
@@ -1,19 +1,14 @@
-import resolveConfig from 'tailwindcss/resolveConfig';
-import tailwindConfig from '@/../tailwind.config';
-
 interface VolumeData {
   time: string;
   value: number;
 }
 
-const colorConfig = resolveConfig(tailwindConfig).theme.colors;
-
 export const getHistogramColorData = (data: VolumeData[]) => {
   return data.map((item, index) => {
     const color =
       index === 0 || item.value >= data[index - 1].value
-        ? colorConfig.red
-        : colorConfig.blue;
+        ? '#ff4d4d'
+        : '#1a75ff';
 
     return { ...item, color };
   });
diff --git a/packages/frontend/tailwind.config.ts b/packages/frontend/tailwind.config.ts
index 10590b9f..883d3320 100644
--- a/packages/frontend/tailwind.config.ts
+++ b/packages/frontend/tailwind.config.ts
@@ -1,24 +1,26 @@
-import type { Config } from 'tailwindcss'
+import type { Config } from 'tailwindcss';
 
 const config: Config = {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'selector',
   theme: {
     extend: {},
     colors: {
-      'light-gray': '#d9d9d9',
-      gray: '#8c8c8c',
-      'dark-gray': '#4f4f4f',
-      black: '#000000',
-      white: '#ffffff',
-      'light-yellow': '#ffdcac',
-      'light-orange': '#ffcfac',
-      orange: '#ffa868',
-      red: '#ff4d4d',
-      green: '#7eeb7e',
-      blue: '#1a75ff',
+      'extra-light-gray': 'var(--extra-light-gray)',
+      'light-gray': 'var(--light-gray)',
+      gray: 'var(--gray)',
+      'dark-gray': 'var(--dark-gray)',
+      black: 'var(--black)',
+      white: 'var(--white)',
+      'light-yellow': 'var(--light-yellow)',
+      'light-orange': 'var(--light-orange)',
+      orange: 'var(--orange)',
+      red: 'var(--red)',
+      green: 'var(--green)',
+      blue: 'var(--blue)',
     },
   },
   plugins: [],
-}
+};
 
-export default config
\ No newline at end of file
+export default config;