diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index eb77f2c01..c80ff50ec 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -227,4 +227,16 @@ The cursor: default; property value restores the browser's default cursor style
   .message-button-icon {
     @apply w-6 fill-chat-trigger stroke-chat-trigger stroke-1
   }
+  .components-disclosure-arrangement {
+    @apply -mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2
+  }
+  .text-color {
+    @apply text-primary
+  }
+  .components-disclosure-title {
+    @apply flex items-center text-sm text-color
+  }
+  .components-disclosure-div {
+    @apply flex gap-2
+  }
 }
\ No newline at end of file
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index 60e086715..aa6da9f96 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -12,14 +12,14 @@ export default function DisclosureComponent({
       {({ open }) => (
         <>
           <div>
-            <Disclosure.Button className="-mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2">
+            <Disclosure.Button className="components-disclosure-arrangement">
               <div className="flex gap-4">
-                <Icon strokeWidth={1.5} size={22} className="text-primary " />
-                <span className="flex items-center text-sm text-primary">
+                <Icon strokeWidth={1.5} size={22} className="text-color" />
+                <span className="components-disclosure-title">
                   {title}
                 </span>
               </div>
-              <div className="flex gap-2">
+              <div className="components-disclosure-div">
                 {buttons.map((x, index) => (
                   <button key={index} onClick={x.onClick}>
                     {x.Icon}
@@ -35,7 +35,7 @@ export default function DisclosureComponent({
               </div>
             </Disclosure.Button>
           </div>
-          <Disclosure.Panel as="div" className="-mt-px" static={openDisc}>
+          <Disclosure.Panel as="div" static={openDisc}>
             {children}
           </Disclosure.Panel>
         </>