diff --git a/src/components/AsideHeader/AsideHeader.scss b/src/components/AsideHeader/AsideHeader.scss
index 5538586..b7837c5 100644
--- a/src/components/AsideHeader/AsideHeader.scss
+++ b/src/components/AsideHeader/AsideHeader.scss
@@ -252,39 +252,4 @@ $block: '.#{variables.$ns}aside-header';
         z-index: 95;
         margin-top: var(--gn-aside-top-panel-height);
     }
-
-    &__collapse-button {
-        --g-button-background-color-hover: transparent;
-
-        // TODO: remove temporary fix for expand button
-        & > .g-button__text {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 20px;
-        }
-
-        overflow: hidden;
-        box-sizing: border-box;
-        flex: none;
-        width: 100%;
-        height: 20px;
-        border-top: 1px solid
-            var(--gn-aside-header-divider-horizontal-color, var(--_--horizontal-divider-line-color));
-        margin-top: auto;
-
-        &:not(&_compact) {
-            #{$class}__collapse-icon {
-                transform: rotate(180deg);
-            }
-        }
-
-        #{$class}__collapse-icon {
-            color: var(--g-color-text-secondary);
-        }
-
-        &:hover #{$class}__collapse-icon {
-            color: var(--g-color-text-primary);
-        }
-    }
 }
diff --git a/src/components/AsideHeader/components/CollapseButton.tsx b/src/components/AsideHeader/components/CollapseButton.tsx
deleted file mode 100644
index 42590f5..0000000
--- a/src/components/AsideHeader/components/CollapseButton.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, {useCallback} from 'react';
-
-import {Button, Icon} from '@gravity-ui/uikit';
-
-import {fakeDisplayName} from '../../helpers';
-import {useAsideHeaderInnerContext} from '../AsideHeaderContext';
-import i18n from '../i18n';
-import {b} from '../utils';
-
-import controlMenuButtonIcon from '../../../../assets/icons/control-menu-button.svg';
-
-// TODO: remove temporary fix for expand button
-const NotIcon = fakeDisplayName('NotIcon', Icon);
-
-export const CollapseButton = () => {
-    const {onChangeCompact, compact, expandTitle, collapseTitle} = useAsideHeaderInnerContext();
-
-    const onCollapseButtonClick = useCallback(() => {
-        onChangeCompact?.(!compact);
-    }, [compact, onChangeCompact]);
-
-    const buttonTitle = compact
-        ? expandTitle || i18n('button_expand')
-        : collapseTitle || i18n('button_collapse');
-    return (
-        <Button
-            className={b('collapse-button', {compact})}
-            view="flat"
-            pin="brick-brick"
-            onClick={onCollapseButtonClick}
-            title={buttonTitle}
-        >
-            <NotIcon
-                data={controlMenuButtonIcon}
-                className={b('collapse-icon')}
-                width="16"
-                height="10"
-            />
-        </Button>
-    );
-};
diff --git a/src/components/AsideHeader/components/CollapseButton/CollapseButton.scss b/src/components/AsideHeader/components/CollapseButton/CollapseButton.scss
new file mode 100644
index 0000000..a2932cc
--- /dev/null
+++ b/src/components/AsideHeader/components/CollapseButton/CollapseButton.scss
@@ -0,0 +1,34 @@
+@use '../../../variables';
+
+$block: '.#{variables.$ns}collapse-button';
+
+$buttonHeight: 20px;
+
+#{$block} {
+    --g-button-background-color-hover: transparent;
+    --g-button-height: #{$buttonHeight};
+
+    box-sizing: border-box;
+    overflow: hidden;
+    height: $buttonHeight;
+    border-top: 1px solid
+        var(--gn-aside-header-divider-horizontal-color, var(--_--horizontal-divider-line-color));
+
+    &__button {
+        width: 100%;
+
+        &:not(&_compact) {
+            #{$block}__icon {
+                transform: rotate(180deg);
+            }
+        }
+
+        &:hover #{$block}__icon {
+            color: var(--g-color-text-primary);
+        }
+    }
+
+    &__icon {
+        color: var(--g-color-text-secondary);
+    }
+}
diff --git a/src/components/AsideHeader/components/CollapseButton/CollapseButton.tsx b/src/components/AsideHeader/components/CollapseButton/CollapseButton.tsx
new file mode 100644
index 0000000..7e1cfbb
--- /dev/null
+++ b/src/components/AsideHeader/components/CollapseButton/CollapseButton.tsx
@@ -0,0 +1,43 @@
+import React, {useCallback} from 'react';
+
+import {Button, Icon} from '@gravity-ui/uikit';
+
+import {block} from '../../../utils/cn';
+import {useAsideHeaderInnerContext} from '../../AsideHeaderContext';
+import i18n from '../../i18n';
+
+import controlMenuButtonIcon from '../../../../../assets/icons/control-menu-button.svg';
+
+import './CollapseButton.scss';
+
+const b = block('collapse-button');
+
+export interface CollapseButtonProps {
+    className?: string;
+}
+
+export const CollapseButton = ({className}: CollapseButtonProps) => {
+    const {onChangeCompact, compact, expandTitle, collapseTitle} = useAsideHeaderInnerContext();
+
+    const onCollapseButtonClick = useCallback(() => {
+        onChangeCompact?.(!compact);
+    }, [compact, onChangeCompact]);
+
+    const buttonTitle = compact
+        ? expandTitle || i18n('button_expand')
+        : collapseTitle || i18n('button_collapse');
+    return (
+        <div className={b(null, className)}>
+            <Button
+                className={b('button', {compact})}
+                view="flat"
+                pin="brick-brick"
+                onClick={onCollapseButtonClick}
+                title={buttonTitle}
+                width="max"
+            >
+                <Icon data={controlMenuButtonIcon} className={b('icon')} width="16" height="10" />
+            </Button>
+        </div>
+    );
+};
diff --git a/src/components/AsideHeader/components/FirstPanel.tsx b/src/components/AsideHeader/components/FirstPanel.tsx
index d221aac..759d0dc 100644
--- a/src/components/AsideHeader/components/FirstPanel.tsx
+++ b/src/components/AsideHeader/components/FirstPanel.tsx
@@ -8,7 +8,7 @@ import {useAsideHeaderInnerContext} from '../AsideHeaderContext';
 import i18n from '../i18n';
 import {b} from '../utils';
 
-import {CollapseButton} from './CollapseButton';
+import {CollapseButton} from './CollapseButton/CollapseButton';
 import {Header} from './Header';
 import {Panels} from './Panels';
 
diff --git a/src/components/helpers.tsx b/src/components/helpers.tsx
deleted file mode 100644
index 1c3056f..0000000
--- a/src/components/helpers.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-export function fakeDisplayName<T extends {}>(newDisplayName: string, Component: React.FC<T>) {
-    const Fake = (props: T) => <Component {...props} />;
-    Fake.displayName = newDisplayName;
-    return Fake;
-}