diff --git a/packages/admin-ui/src/components/CustomAccordion.tsx b/packages/admin-ui/src/components/CustomAccordion.tsx
index e08a501f5..2b0a7fb46 100644
--- a/packages/admin-ui/src/components/CustomAccordion.tsx
+++ b/packages/admin-ui/src/components/CustomAccordion.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { Accordion, Card, useAccordionButton } from "react-bootstrap";
 import { IoIosArrowDown, IoIosArrowUp } from "react-icons/io";
+import "./customAccordion.scss";
 
 interface CustomAccordionProps {
   defaultOpen?: boolean;
@@ -20,7 +21,7 @@ export function CustomAccordion({ defaultOpen = true, children }: CustomAccordio
   const toggle = useAccordionButton("0", () => setIsOpen((v) => !v));
 
   return (
-    <Accordion activeKey={isOpen ? "0" : undefined}>
+    <Accordion activeKey={isOpen ? "0" : undefined} className="custom-accordion">
       {React.Children.map(children, (child) =>
         React.isValidElement(child)
           ? React.cloneElement(
@@ -49,6 +50,7 @@ export function CustomAccordionItem({
       <Card>
         <Card.Header
           as="div"
+          className={`custom-accordion-header ${!isOpen ? "closed" : ""}`}
           role="button"
           tabIndex={0}
           onClick={toggle}
@@ -58,12 +60,10 @@ export function CustomAccordionItem({
               toggle && toggle(e);
             }
           }}
-          style={{
-            cursor: "pointer",
-            ...(isOpen ? {} : { borderBottom: "none" })
-          }}
         >
-          <>{header}</> {isOpen ? <IoIosArrowUp /> : <IoIosArrowDown />}
+          <>
+            {header} {isOpen ? <IoIosArrowUp /> : <IoIosArrowDown />}
+          </>
         </Card.Header>
         <Accordion.Body>
           <Card.Body>{children}</Card.Body>
diff --git a/packages/admin-ui/src/components/customAccordion.scss b/packages/admin-ui/src/components/customAccordion.scss
new file mode 100644
index 000000000..d067dbd58
--- /dev/null
+++ b/packages/admin-ui/src/components/customAccordion.scss
@@ -0,0 +1,13 @@
+.custom-accordion {
+  .custom-accordion-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+
+    &.closed {
+      border-bottom: none;
+    }
+  }
+}