diff --git a/packages/common/components/src/ui/header/header.css b/packages/common/components/src/ui/header/header.css
new file mode 100644
index 000000000..809fbb135
--- /dev/null
+++ b/packages/common/components/src/ui/header/header.css
@@ -0,0 +1,17 @@
+@tailwind components;
+
+@layer components {
+  [data-theme="blue"] {
+    header {
+      background: #00afe5;
+      border: none;
+    }
+    header h1 span {
+      color: #fff;
+    }
+    [data-trigger="dropdown"] {
+      background: transparent !important;
+      color: #fff;
+    }
+  }
+}
diff --git a/packages/common/components/src/ui/header/index.tsx b/packages/common/components/src/ui/header/index.tsx
index 56e20191e..5f51d2c43 100644
--- a/packages/common/components/src/ui/header/index.tsx
+++ b/packages/common/components/src/ui/header/index.tsx
@@ -1,3 +1,5 @@
+import "./header.css";
+
 import { useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { images } from "@common/assets";
@@ -102,7 +104,10 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
       </div>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button className="group m-0 flex h-[3rem] items-center !bg-background px-4 py-0 text-label">
+          <Button
+            className="group m-0 flex h-[3rem] items-center !bg-background px-4 py-0 text-label"
+            data-trigger="dropdown"
+          >
             <i className="diveicon di-account-circle static translate-y-0.5 pr-2 text-3xl" />
             {userInfo?.userName}
             <i className="diveicon di-chevron-down static p-0 transition-transform group-data-[state=open]:rotate-180" />
diff --git a/packages/common/components/src/ui/layout/common.css b/packages/common/components/src/ui/layout/common.css
index 5ab365cd3..b94da1cb8 100644
--- a/packages/common/components/src/ui/layout/common.css
+++ b/packages/common/components/src/ui/layout/common.css
@@ -206,3 +206,12 @@
   color: #ffffff;
   background: #40a5ff;
 }
+
+[data-theme="blue"] {
+  footer {
+    background: #6ec05d;
+  }
+  footer p {
+    color: #fff;
+  }
+}
diff --git a/packages/common/components/src/ui/lnb/index.tsx b/packages/common/components/src/ui/lnb/index.tsx
index 3ea573a76..744ddcfd1 100644
--- a/packages/common/components/src/ui/lnb/index.tsx
+++ b/packages/common/components/src/ui/lnb/index.tsx
@@ -63,6 +63,7 @@ export function LNB({
             "h-auto py-4 text-[1.4rem] text-label transition-colors hover:bg-accent",
             isMatched && "bg-accent !text-primary",
           )}
+          data-matched={isMatched}
           onClick={handleClick}
         >
           <i className={cn("diveicon ml-2", `di-${item.iconNm}`)} />
@@ -94,19 +95,21 @@ export function LNB({
       <Collapsible open={isOpen} onOpenChange={handleOpenChange}>
         <SidebarMenuItem>
           <CollapsibleTrigger asChild>
-            <div className="group flex items-center justify-between rounded-sm py-4 pr-2 hover:bg-accent">
-              <SidebarMenuButton className="group/menu-button text-[1.4rem] group-data-[state=open]:bg-transparent">
-                <i
-                  className={cn(
-                    "diveicon ml-2 text-label",
-                    `di-${item.iconNm}`,
-                  )}
-                />
-                <span className="text-label group-hover/menu-button:text-foreground">
-                  {item.menuKornNm}
-                </span>
+            <div className="group">
+              <SidebarMenuButton className="group/menu-button flex h-auto items-center justify-between py-4 pr-2 text-[1.4rem] group-data-[state=open]:bg-transparent">
+                <div className="flex items-center gap-2">
+                  <i
+                    className={cn(
+                      "diveicon ml-2 text-label",
+                      `di-${item.iconNm}`,
+                    )}
+                  />
+                  <span className="text-label group-hover/menu-button:text-foreground">
+                    {item.menuKornNm}
+                  </span>
+                </div>
+                <ChevronRight className="!size-6 text-label group-data-[state=open]:rotate-90" />
               </SidebarMenuButton>
-              <ChevronRight className="size-6 text-label group-data-[state=open]:rotate-90" />
             </div>
           </CollapsibleTrigger>
           <CollapsibleContent>
diff --git a/packages/common/components/src/ui/scroll-area/index.tsx b/packages/common/components/src/ui/scroll-area/index.tsx
index b1f11275a..4368b4b0e 100644
--- a/packages/common/components/src/ui/scroll-area/index.tsx
+++ b/packages/common/components/src/ui/scroll-area/index.tsx
@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
diff --git a/packages/common/components/src/ui/sidebar/index.tsx b/packages/common/components/src/ui/sidebar/index.tsx
index bce00bb84..d9545b8ae 100644
--- a/packages/common/components/src/ui/sidebar/index.tsx
+++ b/packages/common/components/src/ui/sidebar/index.tsx
@@ -1,3 +1,5 @@
+import "./sidebar.css";
+
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps, cva } from "class-variance-authority";
@@ -248,6 +250,7 @@ const Sidebar = React.forwardRef<
           )}
         />
         <div
+          data-sidebar="sidebar-wrapper"
           className={cn(
             "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
             side === "left"
diff --git a/packages/common/components/src/ui/sidebar/sidebar.css b/packages/common/components/src/ui/sidebar/sidebar.css
new file mode 100644
index 000000000..faea89cc6
--- /dev/null
+++ b/packages/common/components/src/ui/sidebar/sidebar.css
@@ -0,0 +1,33 @@
+@tailwind components;
+
+@layer components {
+  [data-theme="blue"] {
+    [data-sidebar="sidebar-wrapper"] {
+      background: none;
+      background-image: linear-gradient(
+        to bottom,
+        #00afe5 0%,
+        #48bfad 65%,
+        #6ec05d 100%
+      ) !important;
+      border: none;
+    }
+    [data-sidebar="sidebar"],
+    [data-sidebar="content"] {
+      background: transparent !important;
+    }
+    [data-sidebar="menu-item"] * {
+      color: #fff !important;
+    }
+    [data-sidebar="menu-item"] *:hover {
+      background: none !important;
+      color: #fff !important;
+    }
+    [data-sidebar="menu-button"]:hover {
+      background: rgba(0, 0, 0, 0.1) !important;
+    }
+    [data-sidebar="menu-button"][data-matched="true"] {
+      background: rgba(0, 0, 0, 0.2) !important;
+    }
+  }
+}