diff --git a/designer/client/src/components/SidePanelToggleButton.tsx b/designer/client/src/components/SidePanelToggleButton.tsx
index 5c30a60305b..76008cd2606 100644
--- a/designer/client/src/components/SidePanelToggleButton.tsx
+++ b/designer/client/src/components/SidePanelToggleButton.tsx
@@ -1,10 +1,11 @@
-import { Fade, IconButton, styled } from "@mui/material";
+import { Fade, IconButton, styled, Theme } from "@mui/material";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import LeftIcon from "../assets/img/arrows/arrow-left.svg";
 import RightIcon from "../assets/img/arrows/arrow-right.svg";
 import { PanelSide } from "../actions/nk";
 import { useSidePanel } from "./sidePanels/SidePanelsContext";
+import { SxProps } from "@mui/system";
 
 const IconWrapper = styled(IconButton)(({ theme }) => ({
     borderRadius: 0,
@@ -16,9 +17,10 @@ const IconWrapper = styled(IconButton)(({ theme }) => ({
 
 type Props = {
     type: PanelSide;
+    handleStyle?: (isOpened: boolean) => SxProps<Theme>;
 };
 
-export function SidePanelToggleButton({ type, ...props }: Props) {
+export function SidePanelToggleButton({ type, handleStyle, ...props }: Props) {
     const { t } = useTranslation();
     const { isOpened, switchVisible, toggleCollapse } = useSidePanel(type);
     const left = type === PanelSide.Left ? isOpened : !isOpened;
@@ -26,7 +28,15 @@ export function SidePanelToggleButton({ type, ...props }: Props) {
 
     return (
         <Fade in={switchVisible}>
-            <IconWrapper title={title} onClick={toggleCollapse} disableFocusRipple color="inherit" size="small" {...props}>
+            <IconWrapper
+                title={title}
+                onClick={toggleCollapse}
+                disableFocusRipple
+                color="inherit"
+                size="small"
+                sx={handleStyle?.(isOpened)}
+                {...props}
+            >
                 {left ? <LeftIcon /> : <RightIcon />}
             </IconWrapper>
         </Fade>
diff --git a/designer/client/src/components/toolbarComponents/ToolbarsLayer.tsx b/designer/client/src/components/toolbarComponents/ToolbarsLayer.tsx
index 67b7f04dfc2..b6ea058ef82 100644
--- a/designer/client/src/components/toolbarComponents/ToolbarsLayer.tsx
+++ b/designer/client/src/components/toolbarComponents/ToolbarsLayer.tsx
@@ -67,7 +67,12 @@ const ToolbarsLayer = (props: ToolbarsLayerProps): JSX.Element => {
                         <Overlay gridArea="top/left / top/right" position="relative">
                             {children}
                         </Overlay>
-                        <Box component={SidePanelToggleButton} type={PanelSide.Left} gridArea="bottom/left" />
+                        <Box
+                            component={SidePanelToggleButton}
+                            type={PanelSide.Left}
+                            gridArea="bottom/left"
+                            handleStyle={(isOpened) => ({ marginLeft: isOpened ? "unset" : "32px" })}
+                        />
                         <Box component={SidePanelToggleButton} type={PanelSide.Right} gridArea="bottom/right" />
                     </OverlayGrid9>