diff --git a/src/components/ThemeColor/ColorCard.js b/src/components/ThemeColor/ColorCard.js
new file mode 100644
index 0000000..2011bff
--- /dev/null
+++ b/src/components/ThemeColor/ColorCard.js
@@ -0,0 +1,59 @@
+import React from "react";
+import ItemColor from "./ItemColor";
+
+const ColorCard = ({ theme, text, dark, light, item, setItem }) => {
+  return (
+    <div className="flex flex-col gap-y-3">
+      <div
+        className={`w-[344px] h-[130px] flex flex-col cursor-pointer rounded-sm relative p-4 bg-${item} ${
+          text ? `text-${item}Text` : ""
+        }`}
+        onClick={() => setItem(item)}
+      >
+        <ItemColor className=" text-2xl font-bold" item={item} theme={theme} />
+        {text && (
+          <ItemColor
+            className="self-end text-sm"
+            item={item + "Text"}
+            theme={theme}
+            onClick={(e) => {
+              e.stopPropagation();
+              setItem(item + "Text");
+            }}
+          />
+        )}
+      </div>
+      <div className="flex flex-row justify-between">
+        {" "}
+        {dark ? (
+          <div
+            className={`flex-col cursor-pointer rounded-sm relative p-4 w-[165px] h-[75px] bg-${item}Dark ${
+              text ? `text-${item}Text` : ""
+            }`}
+            onClick={() => setItem(item + "Dark")}
+          >
+            <ItemColor
+              className=" text-lg font-bold"
+              item={item + "Dark"}
+              theme={theme}
+            />
+          </div>
+        ) : null}
+        {light ? (
+          <div
+            className={`flex flex-col cursor-pointer rounded-sm relative p-4 w-[165px] h-[75px]  bg-${item}Light ${
+              text ? `text-${item}Text` : ""
+            }`}
+            onClick={() => setItem(item + "Light")}
+          >
+            <ItemColor
+              className=" text-lg font-bold"
+              item={item + "Light"}
+              theme={theme}
+            />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/ThemeColor/index.js b/src/components/ThemeColor/index.js
index 55c1d0b..9334ae9 100644
--- a/src/components/ThemeColor/index.js
+++ b/src/components/ThemeColor/index.js
@@ -3,7 +3,7 @@ import SwitchDesign from "../SwitchDesign/Switch";
 import putTheme from "./util/putTheme";
 import defaultTheme from "./default";
 import Picker from "./util/Picker";
-import ItemColor from "./ItemColor";
+import ColorCard from "./ColorCard";
 
 const ThemeColor = () => {
   const [item, setItem] = useState(null);
@@ -75,60 +75,3 @@ const ThemeColor = () => {
 };
 
 export default ThemeColor;
-
-const ColorCard = ({ theme, text, dark, light, item, setItem }) => {
-  return (
-    <div className="flex flex-col gap-y-3">
-      <div
-        className={`w-[344px] h-[130px] flex flex-col cursor-pointer rounded-sm relative p-4 bg-${item} ${
-          text ? `text-${item}Text` : ""
-        }`}
-        onClick={() => setItem(item)}
-      >
-        <ItemColor className=" text-2xl font-bold" item={item} theme={theme} />
-        {text && (
-          <ItemColor
-            className="self-end text-sm"
-            item={item + "Text"}
-            theme={theme}
-            onClick={(e) => {
-              e.stopPropagation();
-              setItem(item + "Text");
-            }}
-          />
-        )}
-      </div>
-      <div className="flex flex-row justify-between">
-        {" "}
-        {dark ? (
-          <div
-            className={`flex-col cursor-pointer rounded-sm relative p-4 w-[165px] h-[75px] bg-${item}Dark ${
-              text ? `text-${item}Text` : ""
-            }`}
-            onClick={() => setItem(item + "Dark")}
-          >
-            <ItemColor
-              className=" text-lg font-bold"
-              item={item + "Dark"}
-              theme={theme}
-            />
-          </div>
-        ) : null}
-        {light ? (
-          <div
-            className={`flex flex-col cursor-pointer rounded-sm relative p-4 w-[165px] h-[75px]  bg-${item}Light ${
-              text ? `text-${item}Text` : ""
-            }`}
-            onClick={() => setItem(item + "Light")}
-          >
-            <ItemColor
-              className=" text-lg font-bold"
-              item={item + "Light"}
-              theme={theme}
-            />
-          </div>
-        ) : null}
-      </div>
-    </div>
-  );
-};