diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelTopBar.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelTopBar.tsx
index 8a6aa5e61c..10c90e2c82 100644
--- a/packages/twenty-front/src/modules/side-panel/components/SidePanelTopBar.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelTopBar.tsx
@@ -142,7 +142,7 @@ export const SidePanelTopBar = () => {
 
   const shouldShowBackButton = canGoBack;
 
-  const shouldShowCloseButton = !isMobile;
+  const shouldHideCloseButton = isMobile && shouldShowBackButton;
 
   const lastChip = contextChips.at(-1);
 
@@ -182,7 +182,7 @@ export const SidePanelTopBar = () => {
       </StyledContentContainer>
       <StyledRightControlsContainer>
         <SidePanelTopBarRightCornerIcon />
-        {shouldShowCloseButton && (
+        {!shouldHideCloseButton && (
           <IconButton
             Icon={IconX}
             size="small"
diff --git a/packages/twenty-front/src/modules/side-panel/components/__stories__/SidePanelTopBar.stories.tsx b/packages/twenty-front/src/modules/side-panel/components/__stories__/SidePanelTopBar.stories.tsx
new file mode 100644
index 0000000000..ca2ca6bfa6
--- /dev/null
+++ b/packages/twenty-front/src/modules/side-panel/components/__stories__/SidePanelTopBar.stories.tsx
@@ -0,0 +1,91 @@
+import {
+  type Decorator,
+  type Meta,
+  type StoryObj,
+} from '@storybook/react-vite';
+import { expect, within } from 'storybook/test';
+
+import { SidePanelTopBar } from '@/side-panel/components/SidePanelTopBar';
+import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState';
+import { sidePanelNavigationStackState } from '@/side-panel/states/sidePanelNavigationStackState';
+import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
+import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
+import { SidePanelPages } from 'twenty-shared/types';
+import { IconDotsVertical } from 'twenty-ui/icon';
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
+
+type SidePanelNavigationStackItem = {
+  page: SidePanelPages;
+  pageTitle: string;
+  pageIcon: typeof IconDotsVertical;
+  pageId: string;
+};
+
+const ROOT_PAGE: SidePanelNavigationStackItem = {
+  page: SidePanelPages.CommandMenuDisplay,
+  pageTitle: 'Command Menu',
+  pageIcon: IconDotsVertical,
+  pageId: 'command-menu',
+};
+
+const SUBPAGE: SidePanelNavigationStackItem = {
+  page: SidePanelPages.CommandMenuEdit,
+  pageTitle: 'Edit',
+  pageIcon: IconDotsVertical,
+  pageId: 'command-menu-edit',
+};
+
+const createSidePanelDecorator = (
+  navigationStack: SidePanelNavigationStackItem[],
+): Decorator => {
+  return (Story) => {
+    const currentPage = navigationStack[navigationStack.length - 1];
+
+    jotaiStore.set(isSidePanelOpenedState.atom, true);
+    jotaiStore.set(sidePanelPageState.atom, currentPage.page);
+    jotaiStore.set(sidePanelNavigationStackState.atom, navigationStack);
+
+    return <Story />;
+  };
+};
+
+const meta: Meta<typeof SidePanelTopBar> = {
+  title: 'Modules/SidePanel/SidePanelTopBar',
+  component: SidePanelTopBar,
+  decorators: [
+    ObjectMetadataItemsDecorator,
+    SnackBarDecorator,
+    ComponentWithRouterDecorator,
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof SidePanelTopBar>;
+
+export const RootCommandMenu: Story = {
+  decorators: [createSidePanelDecorator([ROOT_PAGE])],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(
+      await canvas.findByRole('button', { name: 'Close side panel' }),
+    ).toBeVisible();
+    expect(
+      canvas.queryByRole('button', { name: 'Back' }),
+    ).not.toBeInTheDocument();
+  },
+};
+
+export const Subpage: Story = {
+  decorators: [createSidePanelDecorator([ROOT_PAGE, SUBPAGE])],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(await canvas.findByRole('button', { name: 'Back' })).toBeVisible();
+    expect(
+      await canvas.findByRole('button', { name: 'Close side panel' }),
+    ).toBeVisible();
+  },
+};
diff --git a/packages/twenty-front/src/modules/side-panel/components/__tests__/SidePanelTopBar.test.tsx b/packages/twenty-front/src/modules/side-panel/components/__tests__/SidePanelTopBar.test.tsx
index b79da47d61..d04bfddeac 100644
--- a/packages/twenty-front/src/modules/side-panel/components/__tests__/SidePanelTopBar.test.tsx
+++ b/packages/twenty-front/src/modules/side-panel/components/__tests__/SidePanelTopBar.test.tsx
@@ -150,27 +150,6 @@ describe('SidePanelTopBar', () => {
     });
   });
 
-  it('shows only the close button on the root command menu', () => {
-    renderSidePanelCommandMenu();
-
-    expect(
-      screen.getByRole('button', { name: 'Close side panel' }),
-    ).toBeInTheDocument();
-    expect(
-      screen.queryByRole('button', { name: 'Back' }),
-    ).not.toBeInTheDocument();
-  });
-
-  it('does not show the close button on mobile', () => {
-    mockIsMobile = true;
-
-    renderSidePanelCommandMenu();
-
-    expect(
-      screen.queryByRole('button', { name: 'Close side panel' }),
-    ).not.toBeInTheDocument();
-  });
-
   it('renders the close button after the command menu content', () => {
     renderSidePanelCommandMenu();
 
@@ -187,7 +166,19 @@ describe('SidePanelTopBar', () => {
     ).toBe(true);
   });
 
-  it('shows both back and close buttons for command menu subpages', () => {
+  it('shows the close button on mobile when there is no back button to dismiss the panel', () => {
+    mockIsMobile = true;
+
+    renderSidePanelCommandMenu();
+
+    expect(
+      screen.getByRole('button', { name: 'Close side panel' }),
+    ).toBeInTheDocument();
+  });
+
+  it('hides the close button on mobile when a back button is available', () => {
+    mockIsMobile = true;
+
     renderSidePanelCommandMenu(
       createSidePanelTopBarStore({
         sidePanelPage: SidePanelPages.SearchRecords,
@@ -210,30 +201,7 @@ describe('SidePanelTopBar', () => {
 
     expect(screen.getByRole('button', { name: 'Back' })).toBeInTheDocument();
     expect(
-      screen.getByRole('button', { name: 'Close side panel' }),
-    ).toBeInTheDocument();
-  });
-
-  it('shows only the close button when a page was opened directly', () => {
-    renderSidePanelCommandMenu(
-      createSidePanelTopBarStore({
-        sidePanelPage: SidePanelPages.ViewRecord,
-        sidePanelNavigationStack: [
-          {
-            page: SidePanelPages.ViewRecord,
-            pageTitle: 'Company',
-            pageIcon: IconDotsVertical,
-            pageId: 'view-record',
-          },
-        ],
-      }),
-    );
-
-    expect(
-      screen.getByRole('button', { name: 'Close side panel' }),
-    ).toBeInTheDocument();
-    expect(
-      screen.queryByRole('button', { name: 'Back' }),
+      screen.queryByRole('button', { name: 'Close side panel' }),
     ).not.toBeInTheDocument();
   });
 });