diff --git a/src/components/ThemeColor/ColorCard.js b/src/components/ThemeColor/ColorCard.js
index 2011bff..5cb4832 100644
--- a/src/components/ThemeColor/ColorCard.js
+++ b/src/components/ThemeColor/ColorCard.js
@@ -27,7 +27,7 @@ const ColorCard = ({ theme, text, dark, light, item, setItem }) => {
         {" "}
         {dark ? (
           <div
-            className={`flex-col cursor-pointer rounded-sm relative p-4 w-[165px] h-[75px] bg-${item}Dark ${
+            className={`flex flex-col cursor-pointer rounded-sm relative p-4 w-[165px] h-[75px] bg-${item}Dark ${
               text ? `text-${item}Text` : ""
             }`}
             onClick={() => setItem(item + "Dark")}
@@ -57,3 +57,5 @@ const ColorCard = ({ theme, text, dark, light, item, setItem }) => {
     </div>
   );
 };
+
+export default ColorCard;
diff --git a/src/components/ThemeColor/index.js b/src/components/ThemeColor/index.js
index 9334ae9..e178e6e 100644
--- a/src/components/ThemeColor/index.js
+++ b/src/components/ThemeColor/index.js
@@ -55,18 +55,20 @@ const ThemeColor = () => {
               setItem={setItem}
             />
           </div>
-          <ColorCard
-            theme={theme}
-            item="background"
-            text={true}
-            setItem={setItem}
-          />
-          <ColorCard
-            theme={theme}
-            item="surface"
-            text={true}
-            setItem={setItem}
-          />
+          <div className="flex flex-row justify-between mt-2 gap-x-5 bg-yellow-200">
+            <ColorCard
+              theme={theme}
+              item="background"
+              text={true}
+              setItem={setItem}
+            />
+            <ColorCard
+              theme={theme}
+              item="surface"
+              text={true}
+              setItem={setItem}
+            />
+          </div>
         </div>
       </div>
       {item && <Picker item={item} theme={theme} setTheme={setTheme} />}
diff --git a/tailwind.config.js b/tailwind.config.js
index a99aa9f..d7f884a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,6 +20,10 @@ module.exports = {
       primaryLight: "var(--theme-primaryLight)",
       secondaryDark: "var(--theme-secondaryDark)",
       secondaryLight: "var(--theme-secondaryLight)",
+      background: "var(--theme-background)",
+      backgroundText: "var(--theme-backgroundText)",
+      surface: "var(--theme-surface)",
+      surfaceText: "var(--theme-surfaceText)",
     },
   },
   plugins: [