diff --git a/packages/app/src/layouts/default.vue b/packages/app/src/layouts/default.vue
index c791873dacb..e44507d69ee 100644
--- a/packages/app/src/layouts/default.vue
+++ b/packages/app/src/layouts/default.vue
@@ -1,41 +1,34 @@
 <template>
-  <div class="h-screen overflow-hidden flex flex-row">
-    <main class="h-screen min-w-0 flex-1 lg:flex">
-      <section
-        aria-labelledby="primary-heading"
-        class="min-w-0 flex-1 h-full flex flex-col overflow-hidden lg:order-last"
-      >
-        <HeaderBar
-          v-if="showHeader"
-          :show-browsers="true"
-          :page-name="pageName"
-        />
-        <router-view v-slot="{ Component, route }">
-          <h1
-            id="primary-heading"
-            class="sr-only"
-          >
-            {{ route.name }}
-          </h1>
-          <transition
-            name="fade"
-            mode="out-in"
-          >
-            <!-- <keep-alive> -->
-            <component :is="Component" />
-            <!-- </keep-alive> -->
-          </transition>
-        </router-view>
-      </section>
-    </main>
-    <div
-      class="h-screen order-first transition-all"
-      :class="mainStore.navBarExpanded ? 'w-248px' : 'w-64px'"
+  <div class="h-screen layout-grid">
+    <SidebarNavigation class="row-span-full" />
+
+    <HeaderBar
+      v-if="showHeader"
+      :show-browsers="true"
+      :page-name="pageName"
+    />
+
+    <main
+      class="overflow-y-auto"
+      aria-labelledby="primary-heading"
     >
-      <SidebarNavigation />
-    </div>
-    <div id="tooltip-target" />
+      <router-view v-slot="{ Component, route }">
+        <h1
+          id="primary-heading"
+          class="sr-only"
+        >
+          {{ route.name }}
+        </h1>
+        <transition
+          name="fade"
+          mode="out-in"
+        >
+          <component :is="Component" />
+        </transition>
+      </router-view>
+    </main>
   </div>
+  <div id="tooltip-target" />
 </template>
 
 <script lang="ts" setup>
@@ -43,9 +36,7 @@ import SidebarNavigation from '../navigation/SidebarNavigation.vue'
 import HeaderBar from '@cy/gql-components/HeaderBar.vue'
 import { useRoute } from 'vue-router'
 import { computed } from 'vue'
-import { useMainStore } from '../store'
 
-const mainStore = useMainStore()
 const currentRoute = useRoute()
 
 const showHeader = computed(() => {
@@ -56,3 +47,11 @@ const pageName = computed((): string | undefined => {
   return currentRoute.meta?.title as string
 })
 </script>
+
+<style lang="scss" scoped>
+.layout-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 64px 1fr;
+}
+</style>
diff --git a/packages/app/src/navigation/SidebarNavigation.vue b/packages/app/src/navigation/SidebarNavigation.vue
index 992cf5443a9..bc908d221c3 100644
--- a/packages/app/src/navigation/SidebarNavigation.vue
+++ b/packages/app/src/navigation/SidebarNavigation.vue
@@ -1,8 +1,11 @@
 <template>
-  <HideDuringScreenshot class="flex relative flex-col flex-1 h-full bg-gray-1000">
+  <HideDuringScreenshot
+    :aria-expanded="mainStore.navBarExpanded"
+    class="relative flex flex-col bg-gray-1000 transition-all duration-300"
+    :class="mainStore.navBarExpanded ? 'w-248px' : 'w-64px'"
+  >
     <div
       class="absolute cursor-pointer w-16px bottom-0 top-0 left-full group"
-      :aria-expanded="mainStore.navBarExpanded"
       @click="mainStore.toggleNavBar"
     >
       <div class="w-16px origin-left transform scale-x-0 group-hover:scale-x-100 h-full transition-transform duration-300 flex items-center">
@@ -15,7 +18,7 @@
     </div>
     <div class="flex flex-col flex-1 overflow-y-auto ">
       <SidebarTooltip
-        class="flex items-center h-64px"
+        class="flex items-center h-64px flex-shrink-0 border-b border-gray-900"
         :disabled="mainStore.navBarExpanded"
         :popper-top-offset="4"
         popper-class="h-56px"
@@ -45,7 +48,6 @@
         </template>
       </SidebarTooltip>
 
-      <hr class="border-gray-900">
       <nav
         class="flex-1 space-y-1 bg-gray-1000"
         aria-label="Sidebar"
@@ -117,7 +119,7 @@ import { useI18n } from '@cy/i18n'
 const { t } = useI18n()
 
 const navigation = [
-  { name: 'Home', icon: CodeIcon, href: '/' },
+  { name: 'Specs', icon: CodeIcon, href: '/' },
   { name: 'Runs', icon: RunsIcon, href: '/runs' },
   { name: 'Settings', icon: SettingsIcon, href: '/settings' },
 ]
diff --git a/packages/app/src/pages/Runs.vue b/packages/app/src/pages/Runs.vue
index dcd1b2976fb..5a67a554d6b 100644
--- a/packages/app/src/pages/Runs.vue
+++ b/packages/app/src/pages/Runs.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative p-24px h-full overflow-y-scroll">
+  <div class="relative p-24px h-full">
     <TransitionQuickFade>
       <RunsSkeleton v-if="query.fetching.value || !query.data.value" />
       <RunsPage
diff --git a/packages/app/src/settings/SettingsContainer.vue b/packages/app/src/settings/SettingsContainer.vue
index b0e66e97e73..15ad88923d9 100644
--- a/packages/app/src/settings/SettingsContainer.vue
+++ b/packages/app/src/settings/SettingsContainer.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="p-24px h-full overflow-auto"
+    class="p-24px h-full"
     data-cy="settings"
   >
     <SettingsCard
diff --git a/packages/app/src/specs/SpecsListRow.vue b/packages/app/src/specs/SpecsListRow.vue
index 89856e38ee0..b26d2941de3 100644
--- a/packages/app/src/specs/SpecsListRow.vue
+++ b/packages/app/src/specs/SpecsListRow.vue
@@ -10,9 +10,12 @@
         :is="icon.component"
         :class="icon.classes"
       />
-      <div>
+      <div
+        class="overflow-hidden truncate text-gray-400 group-hocus:text-indigo-500"
+        :title="`${spec.fileName}${spec.specFileExtension}`"
+      >
         <span class="font-medium text-gray-700 group-hocus:text-indigo-500">{{ spec.fileName }}</span>
-        <span class="font-light text-gray-400 group-hocus:text-indigo-500">{{ spec.specFileExtension }}</span>
+        <span class="font-light group-hocus:text-indigo-500">{{ spec.specFileExtension }}</span>
       </div>
     </div>
     <div class="grid git-info-row grid-cols-[16px,auto] items-center gap-9px">
@@ -27,7 +30,10 @@
           class="min-w-16px max-w-16px min-h-16px icon-dark-gray-300 group-hocus:icon-dark-indigo-500 max-h-16px"
         />
       </span>
-      <div :class="classes?.gitText">
+      <div
+        class="overflow-hidden truncate"
+        :class="classes?.gitText"
+      >
         {{ gitInfoText }}
       </div>
     </div>
diff --git a/packages/app/src/store/main-store.ts b/packages/app/src/store/main-store.ts
index 244c2a5d6a8..1bc8caa13fd 100644
--- a/packages/app/src/store/main-store.ts
+++ b/packages/app/src/store/main-store.ts
@@ -13,7 +13,7 @@ export const useMainStore = defineStore({
   id: 'main',
   state: (): MainStoreState => {
     return {
-      navBarExpanded: false,
+      navBarExpanded: true,
     }
   },
   actions: {
diff --git a/packages/frontend-shared/.windicss/shortcuts.ts b/packages/frontend-shared/.windicss/shortcuts.ts
index 1b8d2111e0e..8a084f4d15b 100644
--- a/packages/frontend-shared/.windicss/shortcuts.ts
+++ b/packages/frontend-shared/.windicss/shortcuts.ts
@@ -6,7 +6,7 @@
  * outline with that, do border-transparent for the non-hocus state.
  */
 
-const focusDefault = 'outline-none focus:border focus:border-indigo-300 focus:ring-2 focus:ring-indigo-100 focus:outline-transparent transition duration-150 disabled:hover:ring-0 disabled:hover:border-0'
+const focusDefault = 'outline-none focus:border focus:border-indigo-300 focus:ring-2 focus:ring-indigo-100 focus:outline-transparent transition duration-150 disabled:hover:ring-0 disabled:hover:border-transparent'
 
 // Usually what you want
 const hocusDefault = focusDefault.replace(/focus:/g, 'hocus:')
diff --git a/packages/frontend-shared/src/components/Button.spec.tsx b/packages/frontend-shared/src/components/Button.spec.tsx
index 033dd58ff53..4d946f359d9 100644
--- a/packages/frontend-shared/src/components/Button.spec.tsx
+++ b/packages/frontend-shared/src/components/Button.spec.tsx
@@ -30,4 +30,10 @@ describe('<Button />', { viewportWidth: 300, viewportHeight: 300 }, () => {
 
     cy.contains('a', 'test').should('not.have.attr', 'data-cy')
   })
+
+  it('shows disabled properly', () => {
+    cy.mount(() => (
+      <Button disabled>test</Button>
+    ))
+  })
 })
diff --git a/packages/frontend-shared/src/components/Button.vue b/packages/frontend-shared/src/components/Button.vue
index b8b01c56120..eaac7a3c815 100644
--- a/packages/frontend-shared/src/components/Button.vue
+++ b/packages/frontend-shared/src/components/Button.vue
@@ -4,6 +4,7 @@
     style="width: fit-content"
     class="flex items-center leading-tight border rounded gap-8px outline-none"
     :class="classes"
+    :disabled="disabled"
   >
     <ButtonInternals>
       <template
@@ -33,7 +34,7 @@
       </template>
     </ButtonInternals>
   </button>
-  <Component
+  <component
     :is="internalLink ? BaseLink : ExternalLink"
     v-else
     :href="href"
@@ -68,7 +69,7 @@
         </slot>
       </template>
     </ButtonInternals>
-  </Component>
+  </component>
 </template>
 
 <script lang="ts">
@@ -119,6 +120,7 @@ const props = defineProps<{
   suffixIconClass?: string
   href?: string // will cause the button to render as link element with button styles
   internalLink?: boolean
+  disabled?: boolean
 }>()
 
 const attrs = useAttrs() as ButtonHTMLAttributes
@@ -133,7 +135,7 @@ const classes = computed(() => {
     variantClasses.value,
     sizeClasses.value,
     attrs.class,
-    (attrs.disabled && props.variant !== 'pending') ? 'opacity-50' : '',
+    (props.disabled && props.variant !== 'pending') ? 'opacity-50' : '',
   ]
 })
 </script>
diff --git a/packages/frontend-shared/windi.config.ts b/packages/frontend-shared/windi.config.ts
index b15a3a30ffd..cf19cb2da36 100644
--- a/packages/frontend-shared/windi.config.ts
+++ b/packages/frontend-shared/windi.config.ts
@@ -19,12 +19,6 @@ export const defaultConfig: WindiCssOptions = {
       fontFamily: {
         mono: '"Fira Code", monospace',
       },
-      gridTemplateColumns: {
-        launchpad: '64px 1fr',
-      },
-      gridTemplateRows: {
-        launchpad: '64px 1fr',
-      },
       colors,
     },
   },