diff --git a/apps/fo/src/app/index.tsx b/apps/fo/src/app/index.tsx
index 692b55ef0..4cf2ad5fa 100644
--- a/apps/fo/src/app/index.tsx
+++ b/apps/fo/src/app/index.tsx
@@ -1,5 +1,9 @@
 import "./styles/base.css";
 import "./styles/components.css";
+import "./styles/components-black.css";
+import "./styles/components-blue.css";
+import "./styles/components-green.css";
+import "./styles/components-red.css";
 import "@fontsource-variable/noto-sans-kr";
 
 import { AppProvider } from "./providers";
diff --git a/apps/fo/src/app/styles/components-black.css b/apps/fo/src/app/styles/components-black.css
new file mode 100644
index 000000000..4dc30bafd
--- /dev/null
+++ b/apps/fo/src/app/styles/components-black.css
@@ -0,0 +1,29 @@
+@tailwind components;
+
+@layer components {
+  .card {
+    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
+  }
+  .card-border {
+    @apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
+  }
+  .card-header {
+    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
+  }
+  .card-footer {
+    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
+  }
+
+  [data-theme="black"] {
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+  }
+
+  input[type="file"] {
+    @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
+  }
+}
diff --git a/apps/fo/src/app/styles/components-blue.css b/apps/fo/src/app/styles/components-blue.css
new file mode 100644
index 000000000..7c1e9db27
--- /dev/null
+++ b/apps/fo/src/app/styles/components-blue.css
@@ -0,0 +1,29 @@
+@tailwind components;
+
+@layer components {
+  .card {
+    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
+  }
+  .card-border {
+    @apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
+  }
+  .card-header {
+    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
+  }
+  .card-footer {
+    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
+  }
+
+  [data-theme="blue"] {
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+  }
+
+  input[type="file"] {
+    @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
+  }
+}
diff --git a/apps/fo/src/app/styles/components-green.css b/apps/fo/src/app/styles/components-green.css
new file mode 100644
index 000000000..4b4cc770e
--- /dev/null
+++ b/apps/fo/src/app/styles/components-green.css
@@ -0,0 +1,29 @@
+@tailwind components;
+
+@layer components {
+  .card {
+    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
+  }
+  .card-border {
+    @apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
+  }
+  .card-header {
+    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
+  }
+  .card-footer {
+    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
+  }
+
+  [data-theme="green"] {
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+  }
+
+  input[type="file"] {
+    @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
+  }
+}
diff --git a/apps/fo/src/app/styles/components-red.css b/apps/fo/src/app/styles/components-red.css
new file mode 100644
index 000000000..cadffac52
--- /dev/null
+++ b/apps/fo/src/app/styles/components-red.css
@@ -0,0 +1,29 @@
+@tailwind components;
+
+@layer components {
+  .card {
+    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
+  }
+  .card-border {
+    @apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
+  }
+  .card-header {
+    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
+  }
+  .card-footer {
+    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
+  }
+
+  [data-theme="red"] {
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+  }
+
+  input[type="file"] {
+    @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
+  }
+}
diff --git a/apps/fo/src/app/styles/components.css b/apps/fo/src/app/styles/components.css
index 4dc30bafd..3aa3c770d 100644
--- a/apps/fo/src/app/styles/components.css
+++ b/apps/fo/src/app/styles/components.css
@@ -14,15 +14,6 @@
     @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
   }
 
-  [data-theme="black"] {
-    .card-border {
-      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
-    }
-    .card-header {
-      @apply border-b-[#3f4042];
-    }
-  }
-
   input[type="file"] {
     @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
   }
diff --git a/apps/sn/src/app/index.tsx b/apps/sn/src/app/index.tsx
index 29d73b03f..d70dc3d73 100644
--- a/apps/sn/src/app/index.tsx
+++ b/apps/sn/src/app/index.tsx
@@ -1,3 +1,9 @@
+import "./styles/base.css";
+import "./styles/components.css";
+import "./styles/components-black.css";
+import "./styles/components-blue.css";
+import "./styles/components-green.css";
+import "./styles/components-red.css";
 import { AppProvider } from "./providers";
 import { cookies } from "next/headers";
 
diff --git a/apps/sn/src/app/styles/components-black.css b/apps/sn/src/app/styles/components-black.css
new file mode 100644
index 000000000..4dc30bafd
--- /dev/null
+++ b/apps/sn/src/app/styles/components-black.css
@@ -0,0 +1,29 @@
+@tailwind components;
+
+@layer components {
+  .card {
+    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
+  }
+  .card-border {
+    @apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
+  }
+  .card-header {
+    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
+  }
+  .card-footer {
+    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
+  }
+
+  [data-theme="black"] {
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+  }
+
+  input[type="file"] {
+    @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
+  }
+}
diff --git a/apps/sn/src/app/styles/components-blue.css b/apps/sn/src/app/styles/components-blue.css
new file mode 100644
index 000000000..7c1e9db27
--- /dev/null
+++ b/apps/sn/src/app/styles/components-blue.css
@@ -0,0 +1,29 @@
+@tailwind components;
+
+@layer components {
+  .card {
+    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
+  }
+  .card-border {
+    @apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
+  }
+  .card-header {
+    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
+  }
+  .card-footer {
+    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
+  }
+
+  [data-theme="blue"] {
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+  }
+
+  input[type="file"] {
+    @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
+  }
+}
diff --git a/apps/sn/src/app/styles/components-green.css b/apps/sn/src/app/styles/components-green.css
new file mode 100644
index 000000000..4b4cc770e
--- /dev/null
+++ b/apps/sn/src/app/styles/components-green.css
@@ -0,0 +1,29 @@
+@tailwind components;
+
+@layer components {
+  .card {
+    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
+  }
+  .card-border {
+    @apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
+  }
+  .card-header {
+    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
+  }
+  .card-footer {
+    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
+  }
+
+  [data-theme="green"] {
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+  }
+
+  input[type="file"] {
+    @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
+  }
+}
diff --git a/apps/sn/src/app/styles/components-red.css b/apps/sn/src/app/styles/components-red.css
new file mode 100644
index 000000000..cadffac52
--- /dev/null
+++ b/apps/sn/src/app/styles/components-red.css
@@ -0,0 +1,29 @@
+@tailwind components;
+
+@layer components {
+  .card {
+    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
+  }
+  .card-border {
+    @apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
+  }
+  .card-header {
+    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
+  }
+  .card-footer {
+    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
+  }
+
+  [data-theme="red"] {
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+  }
+
+  input[type="file"] {
+    @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
+  }
+}
diff --git a/apps/sn/src/app/styles/components.css b/apps/sn/src/app/styles/components.css
index 4dc30bafd..3aa3c770d 100644
--- a/apps/sn/src/app/styles/components.css
+++ b/apps/sn/src/app/styles/components.css
@@ -14,15 +14,6 @@
     @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
   }
 
-  [data-theme="black"] {
-    .card-border {
-      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
-    }
-    .card-header {
-      @apply border-b-[#3f4042];
-    }
-  }
-
   input[type="file"] {
     @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
   }