diff --git a/packages/pl-fe/src/components/ui/accordion.tsx b/packages/pl-fe/src/components/ui/accordion.tsx
index 230434d00..cc5e7fd3a 100644
--- a/packages/pl-fe/src/components/ui/accordion.tsx
+++ b/packages/pl-fe/src/components/ui/accordion.tsx
@@ -4,9 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import DropdownMenu from 'pl-fe/components/dropdown-menu';
 
-import HStack from './hstack';
 import Icon from './icon';
-import Text from './text';
 
 import type { Menu } from 'pl-fe/components/dropdown-menu';
 
@@ -46,17 +44,20 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
   };
 
   return (
-    <div className='rounded-lg bg-white text-gray-900 shadow dark:bg-primary-800 dark:text-gray-100 dark:shadow-none'>
+    <div className={clsx('⁂-accordion', {
+      '⁂-accordion--expanded': expanded,
+    })}
+    >
       <button
         type='button'
         onClick={handleToggle}
         title={intl.formatMessage(expanded ? messages.collapse : messages.expand)}
         aria-expanded={expanded}
-        className='flex w-full items-center justify-between px-4 py-3 font-semibold'
+        className='⁂-accordion__header'
       >
         <span>{headline}</span>
 
-        <HStack alignItems='center' space={2}>
+        <div className='⁂-accordion__header__actions'>
           {menu && (
             <DropdownMenu
               items={menu}
@@ -64,31 +65,21 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
             />
           )}
           {action && actionIcon && (
-            <button onClick={handleAction} title={actionLabel}>
-              <Icon
-                src={actionIcon}
-                className='size-5 text-gray-700 dark:text-gray-600'
-              />
+            <button className='⁂-accordion__header__action' onClick={handleAction} title={actionLabel}>
+              <Icon src={actionIcon} />
             </button>
           )}
           <Icon
             src={require('@tabler/icons/outline/chevron-down.svg')}
-            className={clsx('size-5 text-gray-700 transition-transform dark:text-gray-600', {
-              'rotate-180': expanded,
-            })}
+            className='⁂-accordion__header__chevron'
           />
-        </HStack>
+        </div>
       </button>
 
       <div
-        className={
-          clsx({
-            'p-4 rounded-b-lg border-t border-solid border-gray-100 dark:border-primary-900 black:border-black': true,
-            'h-0 hidden': !expanded,
-          })
-        }
+        className='⁂-accordion__body'
       >
-        <Text>{children}</Text>
+        <p>{children}</p>
       </div>
     </div>
   );
diff --git a/packages/pl-fe/src/styles/new/index.scss b/packages/pl-fe/src/styles/new/index.scss
index 9bb772c3d..99780026f 100644
--- a/packages/pl-fe/src/styles/new/index.scss
+++ b/packages/pl-fe/src/styles/new/index.scss
@@ -1 +1,2 @@
-@use 'ui';
\ No newline at end of file
+@use 'ui';
+
diff --git a/packages/pl-fe/src/styles/new/mixins.scss b/packages/pl-fe/src/styles/new/mixins.scss
new file mode 100644
index 000000000..e44438df3
--- /dev/null
+++ b/packages/pl-fe/src/styles/new/mixins.scss
@@ -0,0 +1,3 @@
+@mixin text() {
+  @apply text-base leading-5 text-gray-900 dark:text-gray-100 font-normal tracking-normal font-sans normal-case;
+}
diff --git a/packages/pl-fe/src/styles/new/ui.scss b/packages/pl-fe/src/styles/new/ui.scss
index 66a027706..f54cd3085 100644
--- a/packages/pl-fe/src/styles/new/ui.scss
+++ b/packages/pl-fe/src/styles/new/ui.scss
@@ -1,5 +1,44 @@
-.⁂-select {
-  @apply truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm;
+@use 'mixins';
+
+.⁂-accordion {
+  @apply rounded-lg bg-white text-gray-900 shadow dark:bg-primary-800 dark:text-gray-100 dark:shadow-none;
+
+  &__header {
+    @apply flex w-full items-center justify-between px-4 py-3 font-semibold;
+  
+    &__actions {
+      @apply flex items-center gap-2;
+    }
+
+    &__action .⁂-icon {
+      @apply size-5 text-gray-700 dark:text-gray-600;
+    }
+
+    &__chevron {
+      @apply size-5 text-gray-700 transition-transform dark:text-gray-600;
+    }
+  }
+
+  &__body {
+    @apply p-4 rounded-b-lg border-t border-solid border-gray-100 dark:border-primary-900 black:border-black;
+  }
+
+  &:not(&--expanded) {
+    .⁂-accordion {
+      &__header__chevron {
+        transform: rotate(180deg);
+      }
+
+      &__body {
+        height: 0;
+        display: none;
+
+        p {
+          @include mixins.text();
+        }
+      }
+    }
+  }
 }
 
 .⁂-list {
@@ -65,4 +104,8 @@ a.⁂-list-item,
   cursor: pointer;
 
   @apply hover:from-gradient-start/20 hover:to-gradient-end/20 dark:hover:from-gradient-start/5 dark:hover:to-gradient-end/5;
-}
\ No newline at end of file
+}
+
+.⁂-select {
+  @apply truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm;
+}