diff --git a/src/components/Accordion/AccordionDesign1/index.js b/src/components/Accordion/AccordionDesign1/index.js
index 5a3a373..83cdbad 100644
--- a/src/components/Accordion/AccordionDesign1/index.js
+++ b/src/components/Accordion/AccordionDesign1/index.js
@@ -126,7 +126,7 @@ function AccordionDesign1({ vod }) {
         <Droppable droppableId="characters">
           {(provided) => (
             <section
-              className="characters w-full flex flex-col bg-gray-200"
+              className="characters w-full flex flex-col bg-surface"
               id="container"
               {...provided.droppableProps}
               ref={provided.innerRef}
@@ -149,8 +149,8 @@ function AccordionDesign1({ vod }) {
                         }
                         className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
                           activeAccordion === item
-                            ? "border-surfaceBorder "
-                            : "border-secondary"
+                            ? "border-secondary"
+                            : "border-surfaceBorder"
                         }  cursor-pointer`}
                       >
                         <CircleInCircle
diff --git a/src/components/Accordion/index.js b/src/components/Accordion/index.js
index f171d6e..9fbe317 100644
--- a/src/components/Accordion/index.js
+++ b/src/components/Accordion/index.js
@@ -10,7 +10,7 @@ function Accordion() {
   return (
     <div className="w-full flex flex-col items-center">
       <select
-        className="mb-10 w-20 bg-gray-200"
+        className="mb-10 w-20 bg-surface"
         onChange={(e) => setType(e.target.value)}
       >
         {Object.keys(list).map((option, index) => (