diff --git a/packages/app/cypress/e2e/sidebar_navigation.cy.ts b/packages/app/cypress/e2e/sidebar_navigation.cy.ts
index d4b336202107..2cfc8c6d4b36 100644
--- a/packages/app/cypress/e2e/sidebar_navigation.cy.ts
+++ b/packages/app/cypress/e2e/sidebar_navigation.cy.ts
@@ -1,5 +1,3 @@
-import type { Interception } from '@packages/net-stubbing/lib/external-types'
-
 describe('Sidebar Navigation', () => {
   context('as e2e testing type', () => {
     beforeEach(() => {
@@ -75,10 +73,6 @@ describe('Sidebar Navigation', () => {
       cy.percySnapshot()
       cy.get('[data-cy="sidebar-header"]').trigger('mouseout')
 
-      cy.get('[data-cy="switch-testing-type"]').realHover()
-      cy.contains('#tooltip-target > div', 'E2E Testing')
-      cy.get('[data-cy="switch-testing-type"]').trigger('mouseout')
-
       cy.get('[data-e2e-href="/runs"]').realHover()
       cy.contains('#tooltip-target > div', 'Runs')
       cy.get('[data-e2e-href="/runs"]').trigger('mouseout')
@@ -107,26 +101,42 @@ describe('Sidebar Navigation', () => {
       cy.findAllByText('todos').eq(1).should('be.visible')
     })
 
-    it('displays the project name (expanded state)', () => {
+    it('displays the project name and opens a modal to switch testing type', () => {
       cy.findByLabelText('Sidebar').closest('[aria-expanded]').should('have.attr', 'aria-expanded', 'true')
 
-      cy.findAllByText('todos').eq(1).should('be.visible')
-    })
-
-    it('has menu item labeled by current active testing type that opens a modal to switch testing type (expanded state)', () => {
-      cy.findByLabelText('Sidebar').closest('[aria-expanded]').should('have.attr', 'aria-expanded', 'true')
+      cy.get('[data-cy="sidebar-header"]').within(() => {
+        cy.get('[data-cy="testing-type-e2e"]').should('be.visible')
+        cy.findByText('todos').should('be.visible')
+      }).click()
 
-      cy.findByText('E2E Testing').should('be.visible')
-      cy.get('[data-cy="switch-testing-type"]').click()
       cy.findByText('Choose a testing type').should('be.visible')
+
+      cy.get('[data-cy-testingtype=e2e]').within(() => {
+        cy.contains('Configured')
+      })
+
       cy.intercept('mutation-SwitchTestingType_ReconfigureProject').as('SwitchTestingType')
-      cy.get('[data-cy-testingtype="component"]').click()
-      cy.wait('@SwitchTestingType').then((interception: Interception) => {
-        expect(interception.request.url).to.include('graphql/mutation-SwitchTestingType_ReconfigureProject')
+      cy.withCtx((ctx) => {
+        ctx.actions.project.reconfigureProject = sinon.stub()
+      })
+
+      cy.get('[data-cy-testingtype="component"]').within(() => {
+        cy.contains('Not Configured')
+      }).click()
+
+      cy.wait('@SwitchTestingType').then((interception) => {
+        expect(interception.request.body.variables.testingType).eq('component')
       })
 
       cy.get('[aria-label="Close"]').click()
       cy.findByText('Choose a testing type').should('not.exist')
+
+      cy.findByLabelText('toggle navigation', {
+        selector: 'button',
+      }).click()
+
+      cy.get('[data-cy="sidebar-header"]').click()
+      cy.findByText('Choose a testing type').should('be.visible')
     })
 
     it('has unlabeled menu item that shows the keyboard shortcuts modal (expanded state)', () => {
@@ -175,20 +185,6 @@ describe('Sidebar Navigation', () => {
       cy.get('[data-cy="app-header-bar"]').findByText('Settings').should('be.visible')
       cy.get('.router-link-active').findByText('Settings').should('be.visible')
     })
-
-    it('shows if testing type is configured when clicking switch testing type', () => {
-      cy.openProject('pristine-with-e2e-testing')
-
-      cy.findByText('E2E Testing').should('be.visible')
-      cy.get('[data-cy="switch-testing-type"]').click()
-      cy.get('[data-cy-testingtype=e2e]').within(() => {
-        cy.contains('Configured')
-      })
-
-      cy.get('[data-cy-testingtype=component]').within(() => {
-        cy.contains('Not Configured')
-      })
-    })
   })
 
   context('as component testing type', () => {
@@ -198,15 +194,23 @@ describe('Sidebar Navigation', () => {
       cy.startAppServer('component')
       cy.visitApp()
 
-      cy.findByText('Component Testing').should('be.visible')
-      cy.get('[data-cy="switch-testing-type"]').click()
-      cy.get('[data-cy-testingtype=e2e]').within(() => {
-        cy.contains('Not Configured')
-      })
-
+      cy.get('[data-cy="sidebar-header"]').within(() => cy.get('[data-cy="testing-type-component"]')).click()
       cy.get('[data-cy-testingtype=component]').within(() => {
         cy.contains('Configured')
       })
+
+      cy.intercept('mutation-SwitchTestingType_ReconfigureProject').as('SwitchTestingType')
+      cy.withCtx((ctx) => {
+        ctx.actions.project.reconfigureProject = sinon.stub()
+      })
+
+      cy.get('[data-cy-testingtype="e2e"]').within(() => {
+        cy.contains('Not Configured')
+      }).click()
+
+      cy.wait('@SwitchTestingType').then((interception) => {
+        expect(interception.request.body.variables.testingType).eq('e2e')
+      })
     })
   })
 })
diff --git a/packages/app/src/navigation/SidebarNavigation.cy.tsx b/packages/app/src/navigation/SidebarNavigation.cy.tsx
index 2c24e3f9e25e..17978dae1ec9 100644
--- a/packages/app/src/navigation/SidebarNavigation.cy.tsx
+++ b/packages/app/src/navigation/SidebarNavigation.cy.tsx
@@ -41,10 +41,6 @@ describe('SidebarNavigation', () => {
     cy.contains('#tooltip-target > div', 'test-project').should('be.visible')
     cy.get('[data-cy="sidebar-header"]').trigger('mouseout')
 
-    cy.get('[data-cy="switch-testing-type"]').realHover()
-    cy.contains('#tooltip-target > div', 'E2E Testing').should('be.visible')
-    cy.get('[data-cy="switch-testing-type"]').trigger('mouseout')
-
     cy.get('[data-e2e-href="/runs"]').realHover()
     cy.contains('#tooltip-target > div', 'Runs').should('be.visible')
     cy.get('[data-e2e-href="/runs"]').trigger('mouseout')
@@ -52,6 +48,6 @@ describe('SidebarNavigation', () => {
 
   it('opens a modal to switch testing type', { viewportWidth: 1280 }, () => {
     mountComponent()
-    cy.get('[data-cy="switch-testing-type"]').click()
+    cy.get('[data-cy="sidebar-header"]').click()
   })
 })
diff --git a/packages/app/src/navigation/SidebarNavigation.vue b/packages/app/src/navigation/SidebarNavigation.vue
index 3a4747febc81..7fd304613ebf 100644
--- a/packages/app/src/navigation/SidebarNavigation.vue
+++ b/packages/app/src/navigation/SidebarNavigation.vue
@@ -20,45 +20,14 @@
       </div>
     </button>
     <div class="flex flex-col flex-1 overflow-y-auto ">
-      <SidebarTooltip
-        class="border-b flex border-gray-900 flex-shrink-0 h-64px items-center"
-        :disabled="mainStore.navBarExpanded"
-        :popper-top-offset="4"
-        popper-class="h-56px"
-        data-cy="sidebar-header"
-      >
-        <i-cy-bookmark_x24
-          class="flex-shrink-0
-          h-24px
-          mx-20px
-          w-24px
-          icon-dark-gray-200 icon-light-gray-900"
-        />
-        <div class="text-gray-50 text-size-16px leading-24px truncate">
-          {{ currentProject?.title ?? 'Cypress' }}
-          <p class="text-gray-600 text-size-14px leading-20px truncate">
-            {{ currentProject?.branch }}
-          </p>
-        </div>
-
-        <template #popper>
-          <div class="text-left text-gray-50 text-size-16px leading-16px truncate">
-            {{ currentProject?.title ?? 'Cypress' }}
-            <p class="text-gray-600 text-size-14px leading-20px truncate">
-              {{ currentProject?.branch }}
-            </p>
-          </div>
-        </template>
-      </SidebarTooltip>
-
+      <SidebarNavigationHeader
+        v-if="query.data.value"
+        :gql="query.data.value"
+      />
       <nav
         class="space-y-1 bg-gray-1000 flex-1"
         aria-label="Sidebar"
       >
-        <SwitchTestingTypeButton
-          v-if="query.data.value"
-          :gql="query.data.value"
-        />
         <RouterLink
           v-for="item in navigation"
           v-slot="{ isActive }"
@@ -108,7 +77,6 @@
 import { computed, ref } from 'vue'
 import { gql, useQuery } from '@urql/vue'
 import SidebarNavigationRow from './SidebarNavigationRow.vue'
-import SwitchTestingTypeButton from './SwitchTestingTypeButton.vue'
 import KeyboardBindingsModal from './KeyboardBindingsModal.vue'
 import CodeIcon from '~icons/cy/code-editor_x24'
 import RunsIcon from '~icons/cy/runs_x24'
@@ -120,6 +88,7 @@ import { SideBarNavigationDocument } from '../generated/graphql'
 import CypressLogo from '@packages/frontend-shared/src/assets/logos/cypress_s.png'
 import { useI18n } from '@cy/i18n'
 import { useRoute } from 'vue-router'
+import SidebarNavigationHeader from './SidebarNavigationHeader.vue'
 
 const { t } = useI18n()
 
@@ -131,19 +100,12 @@ const navigation = [
 
 gql`
 query SideBarNavigation {
-  ...SwitchTestingTypeButton
-  currentProject {
-    id
-    title
-    branch
-  }
+  ...SidebarNavigationHeader
 }
 `
 
 const query = useQuery({ query: SideBarNavigationDocument, requestPolicy: 'network-only' })
 
-const currentProject = computed(() => query.data.value?.currentProject)
-
 const bindingsOpen = ref(false)
 
 const mainStore = useMainStore()
diff --git a/packages/app/src/navigation/SidebarNavigationHeader.vue b/packages/app/src/navigation/SidebarNavigationHeader.vue
new file mode 100644
index 000000000000..a1aac47c6b75
--- /dev/null
+++ b/packages/app/src/navigation/SidebarNavigationHeader.vue
@@ -0,0 +1,93 @@
+<template>
+  <SidebarTooltip
+    v-if="testingType"
+    class="border-b cursor-pointer flex border-gray-900 flex-shrink-0 h-64px pl-20px transition-all duration-300 items-center hover:bg-gray-900"
+    :disabled="mainStore.navBarExpanded"
+    :popper-top-offset="4"
+    popper-class="h-56px"
+    data-cy="sidebar-header"
+    tabindex="0"
+    @click="showModal = true"
+    @keydown.enter="showModal = true"
+  >
+    <SwitchTestingTypeModal
+      :show="showModal"
+      :gql="props.gql"
+      @close="showModal = false"
+    />
+    <component
+      :is="testingType.icon"
+      class="
+          flex-shrink-0 h-24px
+          mr-20px w-24px
+          icon-dark-jade-600 icon-light-jade-300
+          children:transition
+          children:duration-300"
+    />
+    <div class="text-gray-50 text-size-16px leading-24px truncate">
+      {{ props.gql.currentProject?.title ?? 'Cypress' }}
+      <p class="text-gray-600 text-size-14px leading-20px truncate">
+        {{ props.gql.currentProject?.branch }}
+      </p>
+    </div>
+
+    <template #popper>
+      <div class="text-left text-gray-50 text-size-16px leading-16px truncate">
+        {{ props.gql.currentProject?.title ?? 'Cypress' }}
+        <p class="text-gray-600 text-size-14px leading-20px truncate">
+          {{ props.gql.currentProject?.branch }}
+        </p>
+      </div>
+    </template>
+  </SidebarTooltip>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { gql } from '@urql/vue'
+import type { SidebarNavigationHeaderFragment } from '../generated/graphql'
+import { useMainStore } from '../store'
+import SidebarTooltip from './SidebarTooltip.vue'
+import SwitchTestingTypeModal from './SwitchTestingTypeModal.vue'
+import IconE2E from '~icons/cy/testing-type-e2e-solid-simple'
+import IconComponent from '~icons/cy/testing-type-component-solid_x64'
+import { useI18n } from '@cy/i18n'
+
+const { t } = useI18n()
+
+gql`
+fragment SidebarNavigationHeader on Query {
+  ...SwitchTestingTypeModal
+  currentProject {
+    id
+    currentTestingType
+    title
+    branch
+  }
+}
+`
+
+const showModal = ref(false)
+
+const props = defineProps<{
+  gql: SidebarNavigationHeaderFragment
+}>()
+
+const TESTING_TYPE_MAP = {
+  e2e: {
+    name: t(`testingType.e2e.name`),
+    icon: IconE2E,
+  },
+  component: {
+    name: t(`testingType.component.name`),
+    icon: IconComponent,
+  },
+} as const
+
+const testingType = computed(() => {
+  return props.gql.currentProject?.currentTestingType ? TESTING_TYPE_MAP[props.gql.currentProject.currentTestingType] : null
+})
+
+const mainStore = useMainStore()
+
+</script>
diff --git a/packages/app/src/navigation/SidebarNavigationRow.vue b/packages/app/src/navigation/SidebarNavigationRow.vue
index ae6525f5fd7f..23c80fc3eb2b 100644
--- a/packages/app/src/navigation/SidebarNavigationRow.vue
+++ b/packages/app/src/navigation/SidebarNavigationRow.vue
@@ -1,44 +1,31 @@
 <template>
   <SidebarTooltip
     :class="active
-      ? 'before:bg-jade-300 before:scale-x-100 before:transition-colors'
-      : 'before:scale-x-0 before:transition-transform'"
-    class="w-full
+      ? 'before:(bg-indigo-300 scale-x-100 transition-colors) cursor-default'
+      : 'before:(scale-x-0 transition-transform bg-gray-300)'"
+    class="rounded-md
+      flex
+      h-40px
+      my-16px
+      w-full
       min-w-40px
       relative
-      flex
       items-center
-      rounded-md
       group
-      h-40px
-      my-16px
       focus-visible:outline-none
-      before:content-open-square
-      before:mr-4px
-      before:rounded-r-md
-      before:text-transparent
-      before:h-40px
-      before:w-4px
-      before:bg-indigo-300
-      before:transform before:origin-left
-      before:duration-300
-      hover:before:scale-x-100
-      hover:before:bg-indigo-300
-      focus:before:bg-indigo-300"
+      before:(rounded-r-md h-40px mr-4px text-transparent transform origin-left w-4px duration-300 content-open-square) hover:before:scale-x-100 "
     :disabled="mainStore.navBarExpanded"
   >
     <component
       :is="
         icon"
-      :class="active ? 'icon-dark-jade-300 icon-light-jade-800' : 'icon-dark-gray-500 icon-light-gray-900'"
-      class="w-24px h-24px flex-shrink-0 m-12px
-            group-hover:icon-dark-indigo-300 group-hover:icon-light-indigo-600
-            group-focus:icon-dark-indigo-300 group-focus:icon-light-indigo-600
+      :class="active ? 'icon-dark-indigo-300 icon-light-indigo-700' : 'icon-dark-gray-500 icon-light-gray-900 group-hover:(icon-dark-gray-300 icon-light-gray-800) group-focus:(icon-dark-gray-300 icon-light-gray-800)'"
+      class="flex-shrink-0 h-24px m-12px w-24px
             children:transition children:duration-300"
     />
     <span
-      :class="[active ? 'text-jade-300' : 'text-gray-500']"
-      class="ml-8px truncate group-hocus:text-indigo-300 transition-colors duration-300"
+      :class="[active ? 'text-indigo-300' : 'text-gray-500 group-hocus:text-gray-300']"
+      class="ml-8px transition-colors duration-300 truncate"
     >
       {{ name }}
     </span>
diff --git a/packages/app/src/navigation/SwitchTestingTypeButton.vue b/packages/app/src/navigation/SwitchTestingTypeButton.vue
deleted file mode 100644
index c06e48e585c2..000000000000
--- a/packages/app/src/navigation/SwitchTestingTypeButton.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <SidebarTooltip
-    v-if="testingType"
-    class="flex items-center border border-transparent m-12px p-7px bg-gray-900
-    focus:outline-none
-    group rounded cursor-pointer overflow-hidden transition-colors duration-300"
-    :class="mainStore.navBarExpanded ? undefined : 'hover:border-gray-800'"
-    :disabled="mainStore.navBarExpanded"
-    tabindex="0"
-    data-cy="switch-testing-type"
-    @click="showModal = true"
-  >
-    <SwitchTestingTypeModal
-      :show="showModal"
-      :gql="props.gql"
-      @close="showModal = false"
-    />
-    <component
-      :is="testingType.icon"
-      class="
-          children:transition children:duration-300
-          icon-dark-jade-300 group-hover:icon-dark-white
-          icon-light-jade-600 group-hover:icon-light-gray-700
-          w-24px
-          h-24px
-          flex-shrink-0
-          mr-20px"
-    />
-    <span class="flex-grow text-white whitespace-nowrap">
-      {{ testingType.name }}
-    </span>
-    <i-cy-chevron-right_x16
-      class="icon-dark-gray-700
-          w-16px
-          h-16px"
-    />
-    <template #popper>
-      {{ testingType.name }}
-    </template>
-  </SidebarTooltip>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref } from 'vue'
-import { gql } from '@urql/vue'
-import type { SwitchTestingTypeButtonFragment } from '../generated/graphql'
-import { useMainStore } from '../store'
-import SidebarTooltip from './SidebarTooltip.vue'
-import SwitchTestingTypeModal from './SwitchTestingTypeModal.vue'
-import IconE2E from '~icons/cy/testing-type-e2e_x24'
-import IconComponent from '~icons/cy/testing-type-component_x24'
-import { useI18n } from '@cy/i18n'
-
-const { t } = useI18n()
-
-gql`
-fragment SwitchTestingTypeButton on Query {
-  ...SwitchTestingTypeModal
-  currentProject {
-    id
-    currentTestingType
-  }
-}
-`
-
-const showModal = ref(false)
-
-const props = defineProps<{
-  gql: SwitchTestingTypeButtonFragment
-}>()
-
-const TESTING_TYPE_MAP = {
-  e2e: {
-    name: t(`testingType.e2e.name`),
-    icon: IconE2E,
-  },
-  component: {
-    name: t(`testingType.component.name`),
-    icon: IconComponent,
-  },
-} as const
-
-const testingType = computed(() => {
-  return props.gql.currentProject?.currentTestingType ? TESTING_TYPE_MAP[props.gql.currentProject.currentTestingType] : null
-})
-
-const mainStore = useMainStore()
-
-</script>
diff --git a/packages/frontend-shared/src/assets/icons/testing-type-component-solid_x64.svg b/packages/frontend-shared/src/assets/icons/testing-type-component-solid_x64.svg
index ed9e4d8d2a1c..9e8253c46d61 100644
--- a/packages/frontend-shared/src/assets/icons/testing-type-component-solid_x64.svg
+++ b/packages/frontend-shared/src/assets/icons/testing-type-component-solid_x64.svg
@@ -1,6 +1,6 @@
-<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M36 4H57C58.6569 4 60 5.34315 60 7V28H36V4Z" fill="#00595D" class="icon-dark"/>
-<path d="M32 56H11C9.34315 56 8 54.6568 8 53V32H32V56Z" fill="#00595D" class="icon-dark"/>
-<path d="M36 28H34C34 29.1046 34.8954 30 36 30V28ZM8 32V30C6.89543 30 6 30.8954 6 32H8ZM32 56V58C33.1046 58 34 57.1045 34 56H32ZM36 4V2H34V4H36ZM60 28V30H62V28H60ZM32 32H34C34 30.8954 33.1046 30 32 30V32ZM32 54H11V58H32V54ZM10 53V32H6V53H10ZM36 6H57V2H36V6ZM58 7V28H62V7H58ZM60 26H36V30H60V26ZM38 28V4H34V28H38ZM30 32V56H34V32H30ZM32 30H8V34H32V30ZM57 6C57.5523 6 58 6.44772 58 7H62C62 4.23858 59.7614 2 57 2V6ZM11 54C10.4477 54 10 53.5522 10 53H6C6 55.7614 8.23858 58 11 58V54Z" class="icon-light"/>
-<path d="M11 8H32V32H56V53C56 54.6569 54.6568 56 53 56H32L32 32H8V11C8 9.34315 9.34315 8 11 8Z" fill="#69D3A7" class="icon-light"/>
+<svg data-cy="testing-type-component" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M36 4H57C58.6569 4 60 5.34315 60 7V28H36V4Z" fill="#00595D" class="icon-dark"/>
+  <path d="M32 56H11C9.34315 56 8 54.6568 8 53V32H32V56Z" fill="#00595D" class="icon-dark"/>
+  <path d="M36 28H34C34 29.1046 34.8954 30 36 30V28ZM8 32V30C6.89543 30 6 30.8954 6 32H8ZM32 56V58C33.1046 58 34 57.1045 34 56H32ZM36 4V2H34V4H36ZM60 28V30H62V28H60ZM32 32H34C34 30.8954 33.1046 30 32 30V32ZM32 54H11V58H32V54ZM10 53V32H6V53H10ZM36 6H57V2H36V6ZM58 7V28H62V7H58ZM60 26H36V30H60V26ZM38 28V4H34V28H38ZM30 32V56H34V32H30ZM32 30H8V34H32V30ZM57 6C57.5523 6 58 6.44772 58 7H62C62 4.23858 59.7614 2 57 2V6ZM11 54C10.4477 54 10 53.5522 10 53H6C6 55.7614 8.23858 58 11 58V54Z" class="icon-light"/>
+  <path d="M11 8H32V32H56V53C56 54.6569 54.6568 56 53 56H32L32 32H8V11C8 9.34315 9.34315 8 11 8Z" fill="#69D3A7" class="icon-light"/>
 </svg>
diff --git a/packages/frontend-shared/src/assets/icons/testing-type-e2e-solid-simple.svg b/packages/frontend-shared/src/assets/icons/testing-type-e2e-solid-simple.svg
new file mode 100644
index 000000000000..8f3731a88c86
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/testing-type-e2e-solid-simple.svg
@@ -0,0 +1,7 @@
+<svg data-cy="testing-type-e2e" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4 3C2.89543 3 2 3.89543 2 5V15C2 16.1046 2.89543 17 4 17H16C17.1046 17 18 16.1046 18 15V5C18 3.89543 17.1046 3 16 3H4Z" fill="#69D3A7"/>
+  <path d="M20 21C21.1046 21 22 20.1046 22 19V9C22 7.89543 21.1046 7 20 7H18V15C18 16.1046 17.1046 17 16 17H6V19C6 20.1046 6.89543 21 8 21H20Z" fill="#00595D"/>
+  <path d="M6 6C6 6.55228 5.55228 7 5 7C4.44772 7 4 6.55228 4 6C4 5.44772 4.44772 5 5 5C5.55228 5 6 5.44772 6 6Z" fill="#00595D"/>
+  <path d="M9 6C9 6.55228 8.55228 7 8 7C7.44772 7 7 6.55228 7 6C7 5.44772 7.44772 5 8 5C8.55228 5 9 5.44772 9 6Z" fill="#00595D"/>
+  <path d="M12 6C12 6.55228 11.5523 7 11 7C10.4477 7 10 6.55228 10 6C10 5.44772 10.4477 5 11 5C11.5523 5 12 5.44772 12 6Z" fill="#00595D"/>
+</svg>
diff --git a/packages/frontend-shared/src/gql-components/HeaderBarContent.vue b/packages/frontend-shared/src/gql-components/HeaderBarContent.vue
index b52530a9e941..19ddf0ae7e01 100644
--- a/packages/frontend-shared/src/gql-components/HeaderBarContent.vue
+++ b/packages/frontend-shared/src/gql-components/HeaderBarContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white border-b border-b-gray-100 py-15px px-6">
+  <div class="bg-white border-b border-b-gray-100 h-64px py-15px px-6">
     <div class="flex h-full gap-12px items-center justify-between">
       <div
         v-if="pageName"