diff --git a/src/components/ThemeColor/ColorCard.js b/src/components/ThemeColor/ColorCard.js
index 301c030..0d903ad 100644
--- a/src/components/ThemeColor/ColorCard.js
+++ b/src/components/ThemeColor/ColorCard.js
@@ -13,9 +13,9 @@ const ColorCard = ({
   return (
     <div className="flex flex-col gap-y-3">
       <div
-        className={`w-[344px] h-[130px] flex flex-col border-2 border-${borderColor} cursor-pointer rounded-sm relative p-4 bg-${item} ${
+        className={`w-[344px] h-[130px] flex flex-col border-2 cursor-pointer rounded-sm relative p-4 bg-${item} ${
           text ? `text-${item}Text` : ""
-        } `}
+        } ${borderColor ? `border-${item}Border` : ""} `}
         onClick={() => setItem(item)}
       >
         <ItemColor className=" text-2xl font-bold" item={item} theme={theme} />
@@ -30,6 +30,17 @@ const ColorCard = ({
             }}
           />
         )}
+        {borderColor && (
+          <ItemColor
+            className="self-start text-sm"
+            item={item + "Border"}
+            theme={theme}
+            onClick={(e) => {
+              e.stopPropagation();
+              setItem(item + "Border");
+            }}
+          />
+        )}
       </div>
       <div className="flex flex-row justify-between">
         {" "}