diff --git a/packages/common/assets/src/styles/base.css b/packages/common/assets/src/styles/base.css
index 2d73b09df..8a33518bc 100644
--- a/packages/common/assets/src/styles/base.css
+++ b/packages/common/assets/src/styles/base.css
@@ -32,6 +32,10 @@
     --chart-5: #ff7865;
     --chart-6: #e65db5;
     --radius: 1rem;
+    --field: #fff;
+    --form: #fff;
+    --container: #f1f6f9;
+    --title: #4c5e6f;
   }
   [data-mode="dark"] {
     --background: #0a0a0a;
@@ -62,5 +66,9 @@
     --chart-5: #ffbcad;
     --chart-6: #f4a0d3;
     --radius: 1rem;
+    --field: #5b6269;
+    --form: #1a1a1a;
+    --container: #0a0a0a;
+    --title: #fff;
   }
 }
diff --git a/packages/common/components/src/ui/dialog/index.tsx b/packages/common/components/src/ui/dialog/index.tsx
index 1186ce636..b2ba92d05 100644
--- a/packages/common/components/src/ui/dialog/index.tsx
+++ b/packages/common/components/src/ui/dialog/index.tsx
@@ -36,14 +36,14 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className,
       )}
       {...props}
     >
       {children}
       <DialogPrimitive.Close className="absolute right-6 top-6 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="size-6" />
+        <X className="size-6 text-muted-foreground" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
@@ -71,7 +71,7 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "-mx-6 flex flex-col-reverse border-t border-t-[#eaeef5] px-6 pt-6 sm:flex-row sm:justify-end sm:space-x-2",
+      "-mx-6 flex flex-col-reverse border-t border-t-border px-6 pt-6 sm:flex-row sm:justify-end sm:space-x-2",
       className,
     )}
     {...props}
@@ -86,7 +86,7 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "-mx-6 border-b border-b-[#eaeef5] px-6 pb-6 text-[1.4rem] font-semibold leading-none tracking-tight",
+      "-mx-6 border-b border-b-border px-6 pb-6 text-[1.4rem] font-semibold leading-none tracking-tight text-foreground",
       className,
     )}
     {...props}
diff --git a/packages/common/components/src/ui/header/index.tsx b/packages/common/components/src/ui/header/index.tsx
index 7f5a213cf..9cd6c9564 100644
--- a/packages/common/components/src/ui/header/index.tsx
+++ b/packages/common/components/src/ui/header/index.tsx
@@ -18,14 +18,16 @@ export function Header() {
   });
 
   return (
-    <header className="sticky top-0 box-border flex h-[5rem] w-full items-center justify-between border-b border-solid border-border">
+    <header className="sticky top-0 box-border flex h-[5rem] w-full items-center justify-between border-b border-solid border-border bg-background">
       <div className="flex items-center">
         <div className="MobMenuBtn">
           <img src={images.menuBtn} />
         </div>
         <h1 className="flex items-center gap-4">
           <img src={images.logo} className="h-[3rem]" alt="logo" />
-          <span className="text-[1.8rem] font-semibold">통합플랫폼관리</span>
+          <span className="text-[1.8rem] font-semibold text-foreground">
+            통합플랫폼관리
+          </span>
         </h1>
       </div>
       <DropdownMenu>
diff --git a/packages/common/components/src/ui/input/index.tsx b/packages/common/components/src/ui/input/index.tsx
index 70bb9827c..963ef1947 100644
--- a/packages/common/components/src/ui/input/index.tsx
+++ b/packages/common/components/src/ui/input/index.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "placeholder:text-placeholder flex h-[3.2rem] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "placeholder:text-placeholder bg-form flex h-[3.2rem] w-full rounded-md border border-input px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className,
         )}
         ref={ref}
diff --git a/packages/common/components/src/ui/layout/footer.tsx b/packages/common/components/src/ui/layout/footer.tsx
index a072d1e9f..f49b960b2 100644
--- a/packages/common/components/src/ui/layout/footer.tsx
+++ b/packages/common/components/src/ui/layout/footer.tsx
@@ -1,7 +1,9 @@
 export function Footer() {
   return (
-    <footer className="flex h-[5rem] w-full shrink-0 items-center border-t border-solid border-border p-4">
-      <p>© 2025 Ona And All. All Rights Reserved.</p>
+    <footer className="flex h-[5rem] w-full shrink-0 items-center border-t border-solid border-border bg-background p-4">
+      <p className="text-foreground">
+        © 2025 Ona And All. All Rights Reserved.
+      </p>
     </footer>
   );
 }
diff --git a/packages/common/components/src/ui/layout/lnb.tsx b/packages/common/components/src/ui/layout/lnb.tsx
index 761633414..f7d3a9be8 100644
--- a/packages/common/components/src/ui/layout/lnb.tsx
+++ b/packages/common/components/src/ui/layout/lnb.tsx
@@ -2,7 +2,7 @@ export function LNB() {
   return (
     <div
       id="lnb"
-      className="!w-[22rem] overflow-auto border-r border-solid border-border"
+      className="!w-[22rem] overflow-auto border-r border-solid border-border bg-background"
     >
       <ul>
         <li id="m_dashboard">
diff --git a/packages/common/components/src/ui/select/index.tsx b/packages/common/components/src/ui/select/index.tsx
index ffd63bb9a..77e8ec11a 100644
--- a/packages/common/components/src/ui/select/index.tsx
+++ b/packages/common/components/src/ui/select/index.tsx
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-[3.2rem] w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent px-4 py-2 text-sm ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1",
+      "bg-form flex h-[3.2rem] w-full items-center justify-between whitespace-nowrap rounded-sm border border-input px-4 py-2 text-[1.3rem] text-label ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1",
       className,
     )}
     {...props}
diff --git a/packages/common/components/src/ui/table/index.tsx b/packages/common/components/src/ui/table/index.tsx
index e96ea7e4d..34505c898 100644
--- a/packages/common/components/src/ui/table/index.tsx
+++ b/packages/common/components/src/ui/table/index.tsx
@@ -63,7 +63,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b bg-white transition-colors data-[state=selected]:bg-muted",
+      "border-b bg-background transition-colors data-[state=selected]:bg-muted",
       className,
     )}
     {...props}
@@ -89,7 +89,10 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("align-middle [&:has([role=checkbox])]:pr-0", className)}
+    className={cn(
+      "align-middle text-foreground [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
     {...props}
   />
 ));
diff --git a/packages/common/components/src/ui/table/table.css b/packages/common/components/src/ui/table/table.css
index 7736b04f0..53e7ea616 100644
--- a/packages/common/components/src/ui/table/table.css
+++ b/packages/common/components/src/ui/table/table.css
@@ -1,22 +1,38 @@
-th {
-  @apply bg-[#5987bf] px-4 py-[1.2rem] text-[1.3rem] font-medium leading-[1.2] text-[#fff];
-}
-td {
-  @apply border-b border-b-[#e0e6ea] px-2 py-[1.2rem] text-[1.3rem] font-normal leading-[1.2] text-[#666];
-}
+@tailwind components;
 
-.secondary th {
-  @apply border border-[#e0e6ea] bg-[#eaf3fb] text-[#647784];
-}
+@layer components {
+  th {
+    @apply bg-[#5987bf] px-4 py-[1.2rem] text-[1.3rem] font-medium leading-[1.2] text-[#fff];
+  }
+  td {
+    @apply border-b border-b-border px-2 py-[1.2rem] text-[1.3rem] font-normal leading-[1.2] text-[#666];
+  }
 
-.secondary td {
-  @apply border border-[#e0e6ea];
-}
+  .secondary th {
+    @apply border border-border bg-[#eaf3fb] text-[#647784];
+  }
 
-.line th {
-  @apply border-0 border-b-2 border-t border-b-[#d4e0ea] border-t-[#d4e0ea] bg-[#fff] text-[#555];
-}
+  .secondary td {
+    @apply border border-border;
+  }
 
-.line td {
-  @apply border-b border-b-[#e0e6ea];
+  .line th {
+    @apply border-0 border-b-2 border-t border-b-[#d4e0ea] border-t-[#d4e0ea] bg-[#fff] text-[#555];
+  }
+
+  .line td {
+    @apply border-b border-b-border;
+  }
+
+  [data-mode="dark"] {
+    th {
+      @apply bg-[#5e7b9c] text-[#fff];
+    }
+    .secondary th {
+      @apply bg-[#1a1c1d];
+    }
+    .line th {
+      @apply bg-[#0a0a0a];
+    }
+  }
 }
diff --git a/tailwind.config.preset.ts b/tailwind.config.preset.ts
index ee341683e..9eb83e4d7 100644
--- a/tailwind.config.preset.ts
+++ b/tailwind.config.preset.ts
@@ -50,6 +50,10 @@ export default {
           4: "var(--chart-4)",
           5: "var(--chart-5)",
         },
+        field: "var(--field)",
+        form: "var(--form)",
+        container: "var(--container)",
+        title: "var(--title)",
       },
       keyframes: {
         "accordion-down": {