diff --git a/packages/slate-editor/src/components/Accordion/Accordion.module.scss b/packages/slate-editor/src/components/Accordion/Accordion.module.scss
new file mode 100644
index 000000000..d0266bb63
--- /dev/null
+++ b/packages/slate-editor/src/components/Accordion/Accordion.module.scss
@@ -0,0 +1,37 @@
+@import "styles/variables";
+@import "styles/helpers";
+
+.Accordion {
+    border-top: 1px solid rgba($color: $white, $alpha: 0.12);
+}
+
+.button {
+    @include btn-unstyled;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: $spacing-2;
+    color: $grey-300;
+    font-size: $font-size-small;
+    font-weight: 600;
+}
+
+.content {
+    display: none;
+    padding: 0 $spacing-2 $spacing-2;
+
+    &.open {
+        display: block;
+    }
+}
+
+.icon {
+    fill: $white;
+    transition: transform 0.3s ease-in;
+
+    &.open {
+        transform: rotate(180deg);
+    }
+}
diff --git a/packages/slate-editor/src/components/Accordion/Accordion.tsx b/packages/slate-editor/src/components/Accordion/Accordion.tsx
new file mode 100644
index 000000000..ee1f02b5d
--- /dev/null
+++ b/packages/slate-editor/src/components/Accordion/Accordion.tsx
@@ -0,0 +1,41 @@
+import classNames from 'classnames';
+import React, { useState, type ReactNode } from 'react';
+
+import { Caret } from '#icons';
+
+import styles from './Accordion.module.scss';
+
+interface Props {
+    title: string;
+    children: ReactNode;
+}
+
+export function Accordion({ title, children }: Props) {
+    const [isOpen, setIsOpen] = useState(false);
+
+    function toggleOpen() {
+        setIsOpen(!isOpen);
+    }
+
+    return (
+        <div className={styles.Accordion}>
+            <button className={styles.button} onClick={toggleOpen}>
+                <span>{title}</span>
+                {
+                    <Caret
+                        className={classNames(styles.icon, {
+                            [styles.open]: isOpen,
+                        })}
+                    />
+                }
+            </button>
+            <div
+                className={classNames(styles.content, {
+                    [styles.open]: isOpen,
+                })}
+            >
+                {children}
+            </div>
+        </div>
+    );
+}
diff --git a/packages/slate-editor/src/components/Accordion/index.ts b/packages/slate-editor/src/components/Accordion/index.ts
new file mode 100644
index 000000000..feee0c4f0
--- /dev/null
+++ b/packages/slate-editor/src/components/Accordion/index.ts
@@ -0,0 +1 @@
+export { Accordion } from './Accordion';
diff --git a/packages/slate-editor/src/components/index.ts b/packages/slate-editor/src/components/index.ts
index 2678175ca..69372047a 100644
--- a/packages/slate-editor/src/components/index.ts
+++ b/packages/slate-editor/src/components/index.ts
@@ -1,3 +1,4 @@
+export { Accordion } from './Accordion';
 export { Avatar } from './Avatar';
 export { CloseButtonV2 } from './CloseButtonV2';
 export { CloseButton, EditorBlock, ResizableEditorBlock } from './EditorBlock';
diff --git a/packages/slate-editor/src/extensions/button-block/components/ButtonBlockMenu.tsx b/packages/slate-editor/src/extensions/button-block/components/ButtonBlockMenu.tsx
index bc9dba5ec..8e919cc42 100644
--- a/packages/slate-editor/src/extensions/button-block/components/ButtonBlockMenu.tsx
+++ b/packages/slate-editor/src/extensions/button-block/components/ButtonBlockMenu.tsx
@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import {
+    Accordion,
     Button,
     Input,
     type OptionsGroupOption,
@@ -166,18 +167,15 @@ export function ButtonMenu({ onUpdate, onClose, onRemove, value, withNewTabOptio
                 </VStack>
             </Toolbox.Section>
 
-            <Toolbox.Section>
+            <Accordion title="Styling options">
                 <VStack spacing="2">
-                    <VStack spacing="1-5">
-                        <Toolbox.Caption>Styling options</Toolbox.Caption>
-                        <OptionsGroup
-                            name="variant"
-                            onChange={(variant) => onUpdate({ variant })}
-                            options={BUTTON_MENU_VARIANT_OPTIONS}
-                            selectedValue={value.variant}
-                            variant="pills"
-                        />
-                    </VStack>
+                    <OptionsGroup
+                        name="variant"
+                        onChange={(variant) => onUpdate({ variant })}
+                        options={BUTTON_MENU_VARIANT_OPTIONS}
+                        selectedValue={value.variant}
+                        variant="pills"
+                    />
 
                     <VStack spacing="1-5">
                         <Toolbox.Caption>Alignment</Toolbox.Caption>
@@ -189,7 +187,7 @@ export function ButtonMenu({ onUpdate, onClose, onRemove, value, withNewTabOptio
                         />
                     </VStack>
                 </VStack>
-            </Toolbox.Section>
+            </Accordion>
 
             <Toolbox.Footer>
                 <Button variant="clear" icon={Delete} fullWidth onClick={onRemove}>
diff --git a/packages/slate-editor/src/icons/Caret.svg b/packages/slate-editor/src/icons/Caret.svg
new file mode 100644
index 000000000..855ea3c25
--- /dev/null
+++ b/packages/slate-editor/src/icons/Caret.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.13517 3.37019C0.875836 3.6178 0.871058 4.02391 1.1245 4.27728L5.46793 8.61938C5.59146 8.74288 5.76075 8.8125 5.93749 8.8125C6.11424 8.8125 6.28352 8.74288 6.40706 8.61938L10.7505 4.27728C11.0039 4.02391 10.9992 3.6178 10.7398 3.37019C10.4805 3.12259 10.0648 3.12726 9.81136 3.38062L5.93749 7.2533L2.06363 3.38062C1.81019 3.12726 1.3945 3.12259 1.13517 3.37019Z" fill="currentColor"/>
+</svg>
diff --git a/packages/slate-editor/src/icons/index.ts b/packages/slate-editor/src/icons/index.ts
index e34108286..db69bccf8 100644
--- a/packages/slate-editor/src/icons/index.ts
+++ b/packages/slate-editor/src/icons/index.ts
@@ -8,6 +8,7 @@ export { default as ButtonLayoutLeft } from './ButtonLayoutLeft.svg';
 export { default as ButtonLayoutRight } from './ButtonLayoutRight.svg';
 export { default as ButtonLayoutCenter } from './ButtonLayoutCenter.svg';
 export { default as ButtonLayoutWide } from './ButtonLayoutWide.svg';
+export { default as Caret } from './Caret.svg';
 export { default as ChickenNoSignalIllustration } from './Chicken-no-signal-Illustration.svg';
 export { default as Bookmark } from './Embed.svg'; // this will be reworked in scope of MT-4462
 export { default as Clear } from './Clear.svg';