diff --git a/.vscode/settings.json b/.vscode/settings.json
index 043bb10e90..3c3688372d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -9,5 +9,6 @@
   "[ignore]": {
     "editor.defaultFormatter": "foxundermoon.shell-format"
   },
-  "prettier.trailingComma": "none"
+  "prettier.trailingComma": "none",
+  "eslint.workingDirectories": [{ "pattern": "./apps/*/" }, { "pattern": "./packages/*/" }]
 }
diff --git a/apps/design-system/src/pages/view-preview/project-settings-wrapper.tsx b/apps/design-system/src/pages/view-preview/project-settings-wrapper.tsx
index 945b473ecb..68c80bbfe4 100644
--- a/apps/design-system/src/pages/view-preview/project-settings-wrapper.tsx
+++ b/apps/design-system/src/pages/view-preview/project-settings-wrapper.tsx
@@ -9,7 +9,7 @@ import RootViewWrapper from './root-view-wrapper'
 
 const Layout = () => {
   return (
-    <div className="bg-background-1 sticky top-[55px] z-40">
+    <div className="bg-background-1 top-14.5 sticky z-40">
       <ProjectSettingsTabNav useTranslationStore={useTranslationStore} />
     </div>
   )
diff --git a/apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx b/apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx
index d248b420d6..fab2463a64 100644
--- a/apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx
+++ b/apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx
@@ -13,7 +13,7 @@ const RepoViewWrapper: FC<PropsWithChildren<React.HTMLAttributes<HTMLElement>>>
       path="*"
       element={
         <>
-          <div className="layer-high bg-background-1 sticky top-[55px]">
+          <div className="layer-high bg-background-1 top-14.5 sticky">
             <RepoSubheader useTranslationStore={useTranslationStore} />
           </div>
           {children}
diff --git a/apps/gitness/src/pages-v2/profile-settings/profile-settings-layout.tsx b/apps/gitness/src/pages-v2/profile-settings/profile-settings-layout.tsx
index c4fd99e08e..e6f107af2b 100644
--- a/apps/gitness/src/pages-v2/profile-settings/profile-settings-layout.tsx
+++ b/apps/gitness/src/pages-v2/profile-settings/profile-settings-layout.tsx
@@ -10,7 +10,7 @@ export const ProfileSettingsLayout = () => {
 
   return (
     <>
-      <div className="bg-background-1 sticky top-[55px] z-40">
+      <div className="bg-background-1 sticky top-14.5 z-40">
         <ProfileSettingsTabNav activeTab={activeTab} useTranslationStore={useTranslationStore} />
       </div>
       <Outlet />
diff --git a/apps/gitness/src/pages-v2/project/project-settings-layout.tsx b/apps/gitness/src/pages-v2/project/project-settings-layout.tsx
index d968272538..ab56360319 100644
--- a/apps/gitness/src/pages-v2/project/project-settings-layout.tsx
+++ b/apps/gitness/src/pages-v2/project/project-settings-layout.tsx
@@ -7,7 +7,7 @@ import { useTranslationStore } from '../../i18n/stores/i18n-store'
 export const ProjectSettingsLayout = () => {
   return (
     <>
-      <div className="bg-background-1 sticky top-[55px] z-40">
+      <div className="bg-background-1 sticky top-14.5 z-40">
         <ProjectSettingsTabNav useTranslationStore={useTranslationStore} />
       </div>
       <Outlet />
diff --git a/apps/gitness/src/pages-v2/repo/repo-layout.tsx b/apps/gitness/src/pages-v2/repo/repo-layout.tsx
index b7021e19f4..dd3a716482 100644
--- a/apps/gitness/src/pages-v2/repo/repo-layout.tsx
+++ b/apps/gitness/src/pages-v2/repo/repo-layout.tsx
@@ -10,7 +10,7 @@ const RepoLayout = () => {
 
   return (
     <>
-      <div className="layer-high sticky top-[55px] bg-background-1">
+      <div className="layer-high bg-background-1 top-14.5 sticky">
         <RepoSubheader showPipelinesTab={!isMFE} useTranslationStore={useTranslationStore} />
       </div>
       <Outlet />
diff --git a/packages/ui/src/components/repo-subheader.tsx b/packages/ui/src/components/repo-subheader.tsx
index 06f35fb15e..93d9e6c828 100644
--- a/packages/ui/src/components/repo-subheader.tsx
+++ b/packages/ui/src/components/repo-subheader.tsx
@@ -1,5 +1,5 @@
-import { useMemo } from 'react'
-import { NavLink, useLocation } from 'react-router-dom'
+import { useCallback, useMemo } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 import { Tabs, TabsList, TabsTrigger } from '@/components'
 import { SandboxLayout, TranslationStore } from '@/views'
@@ -23,9 +23,12 @@ export const RepoSubheader = ({
   useTranslationStore: () => TranslationStore
   showPipelinesTab?: boolean
 }) => {
+  const navigate = useNavigate()
   const location = useLocation()
   const { t } = useTranslationStore()
 
+  const makeHandleTabChange = useCallback((tab: string) => () => navigate(tab), [navigate])
+
   const activeTab = useMemo(() => {
     // Prioritize 'pulls' over 'commits' if both are present in the pathname
     if (location.pathname.includes(RepoTabsKeys.PULLS)) {
@@ -36,32 +39,32 @@ export const RepoSubheader = ({
   }, [location.pathname])
 
   return (
-    <SandboxLayout.SubHeader className="h-[45px] overflow-hidden">
+    <SandboxLayout.SubHeader className="top-14.5 h-11">
       <Tabs variant="navigation" value={activeTab}>
         <TabsList>
-          <NavLink to={RepoTabsKeys.SUMMARY}>
-            <TabsTrigger value="summary">{t('views:repos.summary', 'Summary')}</TabsTrigger>
-          </NavLink>
-          <NavLink to={RepoTabsKeys.CODE}>
-            <TabsTrigger value="code">{t('views:repos.files', 'Files')}</TabsTrigger>
-          </NavLink>
+          <TabsTrigger role="link" value="summary" onClick={makeHandleTabChange(RepoTabsKeys.SUMMARY)}>
+            {t('views:repos.summary', 'Summary')}
+          </TabsTrigger>
+          <TabsTrigger role="link" value="code" onClick={makeHandleTabChange(RepoTabsKeys.CODE)}>
+            {t('views:repos.files', 'Files')}
+          </TabsTrigger>
           {showPipelinesTab && (
-            <NavLink to={RepoTabsKeys.PIPELINES}>
-              <TabsTrigger value="pipelines">{t('views:repos.pipelines', 'Pipelines')}</TabsTrigger>
-            </NavLink>
+            <TabsTrigger role="link" value="pipelines" onClick={makeHandleTabChange(RepoTabsKeys.PIPELINES)}>
+              {t('views:repos.pipelines', 'Pipelines')}
+            </TabsTrigger>
           )}
-          <NavLink to={RepoTabsKeys.COMMITS}>
-            <TabsTrigger value="commits">{t('views:repos.commits', 'Commits')}</TabsTrigger>
-          </NavLink>
-          <NavLink to={RepoTabsKeys.PULLS}>
-            <TabsTrigger value="pulls">{t('views:repos.pull-requests', 'Pull Requests')}</TabsTrigger>
-          </NavLink>
-          <NavLink to={RepoTabsKeys.BRANCHES}>
-            <TabsTrigger value="branches">{t('views:repos.branches', 'Branches')}</TabsTrigger>
-          </NavLink>
-          <NavLink to={RepoTabsKeys.SETTINGS}>
-            <TabsTrigger value="settings">{t('views:repos.settings', 'Settings')}</TabsTrigger>
-          </NavLink>
+          <TabsTrigger role="link" value="commits" onClick={makeHandleTabChange(RepoTabsKeys.COMMITS)}>
+            {t('views:repos.commits', 'Commits')}
+          </TabsTrigger>
+          <TabsTrigger role="link" value="pulls" onClick={makeHandleTabChange(RepoTabsKeys.PULLS)}>
+            {t('views:repos.pull-requests', 'Pull Requests')}
+          </TabsTrigger>
+          <TabsTrigger role="link" value="branches" onClick={makeHandleTabChange(RepoTabsKeys.BRANCHES)}>
+            {t('views:repos.branches', 'Branches')}
+          </TabsTrigger>
+          <TabsTrigger role="link" value="settings" onClick={makeHandleTabChange(RepoTabsKeys.SETTINGS)}>
+            {t('views:repos.settings', 'Settings')}
+          </TabsTrigger>
         </TabsList>
       </Tabs>
     </SandboxLayout.SubHeader>
diff --git a/packages/ui/src/components/topbar.tsx b/packages/ui/src/components/topbar.tsx
index 523306f100..62ba0508cb 100644
--- a/packages/ui/src/components/topbar.tsx
+++ b/packages/ui/src/components/topbar.tsx
@@ -18,7 +18,7 @@ const Topbar = {
     return (
       <div
         className={cx(
-          `grid w-full ${gridCols} font-regular h-[55px] items-center gap-6 border-b border-borders-5 px-5 text-sm`,
+          `grid w-full ${gridCols} font-regular h-14.5 items-center gap-6 border-b border-borders-5 px-5 text-sm`,
           className
         )}
       >
diff --git a/packages/ui/src/views/layouts/PullRequestLayout.tsx b/packages/ui/src/views/layouts/PullRequestLayout.tsx
index 66ce16f969..47b4477933 100644
--- a/packages/ui/src/views/layouts/PullRequestLayout.tsx
+++ b/packages/ui/src/views/layouts/PullRequestLayout.tsx
@@ -1,6 +1,8 @@
-import { NavLink, Outlet } from 'react-router-dom'
+import { useCallback } from 'react'
+import { Outlet, useLocation, useNavigate } from 'react-router-dom'
 
 import { Badge, Icon, Spacer, Tabs, TabsList, TabsTrigger } from '@components/index'
+import { TabsTriggerProps } from '@radix-ui/react-tabs'
 import { TranslationStore } from '@views/repo'
 import { PullRequestHeader } from '@views/repo/pull-request/components/pull-request-header'
 import { IPullRequestStore } from '@views/repo/pull-request/pull-request.types'
@@ -30,6 +32,22 @@ const PullRequestLayout: React.FC<PullRequestLayoutProps> = ({
 }) => {
   const { pullRequest } = usePullRequestStore()
   const { t } = useTranslationStore()
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  const getIsActiveTab = useCallback(
+    (tab: string) => (location.pathname.endsWith(tab) ? 'active' : 'inactive'),
+    [location.pathname]
+  )
+  const makeHandleTabChange = useCallback((tab: string) => () => navigate(tab), [navigate])
+
+  const getTabProps = (tab: PullRequestTabsKeys): TabsTriggerProps => ({
+    value: tab,
+    ...{ 'data-state': getIsActiveTab(tab) },
+    onClick: makeHandleTabChange(tab),
+    className: 'gap-x-1.5',
+    role: 'link'
+  })
 
   return (
     <SandboxLayout.Main fullWidth>
@@ -59,54 +77,30 @@ const PullRequestLayout: React.FC<PullRequestLayoutProps> = ({
         )}
         <Tabs variant="tabnav">
           <TabsList className="left-1/2 w-[calc(100%+48px)] -translate-x-1/2 px-6">
-            <NavLink to={PullRequestTabsKeys.CONVERSATION}>
-              {({ isActive }) => (
-                <TabsTrigger
-                  className="gap-x-1.5"
-                  value={PullRequestTabsKeys.CONVERSATION}
-                  data-state={isActive ? 'active' : 'inactive'}
-                >
-                  <div className="flex items-center gap-x-1">
-                    <Icon size={14} name="comments" />
-                    {t('views:pullRequests.conversation')}
-                  </div>
-                </TabsTrigger>
-              )}
-            </NavLink>
-            <NavLink to={PullRequestTabsKeys.COMMITS}>
-              {({ isActive }) => (
-                <TabsTrigger
-                  className="gap-x-1.5"
-                  value={PullRequestTabsKeys.COMMITS}
-                  data-state={isActive ? 'active' : 'inactive'}
-                >
-                  <div className="flex items-center gap-x-1">
-                    <Icon size={14} name="tube-sign" />
-                    {t('views:repos.commits')}
-                  </div>
-                  <Badge variant="outline" size="xs" borderRadius="base">
-                    {pullRequest?.stats?.commits}
-                  </Badge>
-                </TabsTrigger>
-              )}
-            </NavLink>
-            <NavLink to={PullRequestTabsKeys.CHANGES}>
-              {({ isActive }) => (
-                <TabsTrigger
-                  className="gap-x-1.5"
-                  value={PullRequestTabsKeys.CHANGES}
-                  data-state={isActive ? 'active' : 'inactive'}
-                >
-                  <div className="flex items-center gap-x-1">
-                    <Icon size={14} name="changes" />
-                    {t('views:pullRequests.changes')}
-                  </div>
-                  <Badge variant="outline" size="xs" borderRadius="base">
-                    {pullRequest?.stats?.files_changed}
-                  </Badge>
-                </TabsTrigger>
-              )}
-            </NavLink>
+            <TabsTrigger {...getTabProps(PullRequestTabsKeys.CONVERSATION)}>
+              <div className="flex items-center gap-x-1">
+                <Icon size={14} name="comments" />
+                {t('views:pullRequests.conversation')}
+              </div>
+            </TabsTrigger>
+            <TabsTrigger {...getTabProps(PullRequestTabsKeys.COMMITS)}>
+              <div className="flex items-center gap-x-1">
+                <Icon size={14} name="tube-sign" />
+                {t('views:repos.commits')}
+              </div>
+              <Badge variant="outline" size="xs" borderRadius="base">
+                {pullRequest?.stats?.commits}
+              </Badge>
+            </TabsTrigger>
+            <TabsTrigger {...getTabProps(PullRequestTabsKeys.CHANGES)}>
+              <div className="flex items-center gap-x-1">
+                <Icon size={14} name="changes" />
+                {t('views:pullRequests.changes')}
+              </div>
+              <Badge variant="outline" size="xs" borderRadius="base">
+                {pullRequest?.stats?.files_changed}
+              </Badge>
+            </TabsTrigger>
           </TabsList>
         </Tabs>
         <Spacer size={7} />
diff --git a/packages/ui/src/views/profile-settings/profile-settings-tab-nav.tsx b/packages/ui/src/views/profile-settings/profile-settings-tab-nav.tsx
index 2f1cdff54d..d035e5d5b5 100644
--- a/packages/ui/src/views/profile-settings/profile-settings-tab-nav.tsx
+++ b/packages/ui/src/views/profile-settings/profile-settings-tab-nav.tsx
@@ -1,4 +1,5 @@
-import { NavLink } from 'react-router-dom'
+import { useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
 
 import { Tabs, TabsList, TabsTrigger } from '@/components'
 import { SandboxLayout, TranslationStore } from '@/views'
@@ -11,17 +12,21 @@ function ProfileSettingsTabNav({
   useTranslationStore: () => TranslationStore
 }) {
   const { t } = useTranslationStore()
+  const navigate = useNavigate()
+
+  const makeHandleTabChange = useCallback((tab: string) => () => navigate(tab), [navigate])
+
   return (
     <>
-      <SandboxLayout.SubHeader className="h-[45px] overflow-hidden">
+      <SandboxLayout.SubHeader className="h-11">
         <Tabs variant="navigation" value={activeTab}>
           <TabsList fontSize="xs">
-            <NavLink to={`general`}>
-              <TabsTrigger value="general">{t('views:profileSettings.GeneralTab', 'General')}</TabsTrigger>
-            </NavLink>
-            <NavLink to={`keys`}>
-              <TabsTrigger value="keys">{t('views:profileSettings.KeysTab', 'Keys and Tokens')}</TabsTrigger>
-            </NavLink>
+            <TabsTrigger role="link" value="general" onClick={makeHandleTabChange('general')}>
+              {t('views:profileSettings.GeneralTab', 'General')}
+            </TabsTrigger>
+            <TabsTrigger role="link" value="keys" onClick={makeHandleTabChange('keys')}>
+              {t('views:profileSettings.KeysTab', 'Keys and Tokens')}
+            </TabsTrigger>
           </TabsList>
         </Tabs>
       </SandboxLayout.SubHeader>
diff --git a/packages/ui/src/views/project/project-settings-tab-nav.tsx b/packages/ui/src/views/project/project-settings-tab-nav.tsx
index 65e2b03b8a..243019f71b 100644
--- a/packages/ui/src/views/project/project-settings-tab-nav.tsx
+++ b/packages/ui/src/views/project/project-settings-tab-nav.tsx
@@ -21,13 +21,13 @@ const ProjectSettingsTabNav: FC<ProjectSettingsTabNavProps> = ({ useTranslationS
       <SandboxLayout.SubHeader className="h-11">
         <Tabs variant="navigation" value={activeTab}>
           <TabsList fontSize="xs">
-            <TabsTrigger value="general" onClick={makeHandleTabChange('general')}>
+            <TabsTrigger role="link" value="general" onClick={makeHandleTabChange('general')}>
               {t('views:projectSettings.tabs.general', 'General')}
             </TabsTrigger>
-            <TabsTrigger value="members" onClick={makeHandleTabChange('members')}>
+            <TabsTrigger role="link" value="members" onClick={makeHandleTabChange('members')}>
               {t('views:projectSettings.tabs.members', 'Members')}
             </TabsTrigger>
-            <TabsTrigger value="labels" onClick={makeHandleTabChange('labels')}>
+            <TabsTrigger role="link" value="labels" onClick={makeHandleTabChange('labels')}>
               {t('views:projectSettings.tabs.labels', 'Labels')}
             </TabsTrigger>
           </TabsList>
diff --git a/packages/ui/src/views/repo/repo-layout/index.tsx b/packages/ui/src/views/repo/repo-layout/index.tsx
index 90bd1b819a..f4addf2253 100644
--- a/packages/ui/src/views/repo/repo-layout/index.tsx
+++ b/packages/ui/src/views/repo/repo-layout/index.tsx
@@ -1,5 +1,5 @@
-import { useMemo } from 'react'
-import { NavLink, Outlet, useLocation } from 'react-router-dom'
+import { useCallback, useMemo } from 'react'
+import { Outlet, useLocation, useNavigate } from 'react-router-dom'
 
 import { Tabs, TabsList, TabsTrigger } from '@/components'
 import { SandboxLayout, TranslationStore } from '@/views'
@@ -20,6 +20,10 @@ export const RepoLayout = ({ useTranslationStore }: { useTranslationStore: () =>
   const location = useLocation()
   const { t } = useTranslationStore()
 
+  const navigate = useNavigate()
+
+  const makeHandleTabChange = useCallback((tab: string) => () => navigate(tab), [navigate])
+
   const activeTab = useMemo(() => {
     // Prioritize 'pulls' over 'commits' if both are present in the pathname
     if (location.pathname.includes(RepoTabsKeys.PULLS)) {
@@ -31,30 +35,30 @@ export const RepoLayout = ({ useTranslationStore }: { useTranslationStore: () =>
 
   return (
     <>
-      <SandboxLayout.SubHeader className="h-[45px] overflow-hidden">
+      <SandboxLayout.SubHeader className="h-11 ">
         <Tabs variant="navigation" value={activeTab}>
           <TabsList>
-            <NavLink to={RepoTabsKeys.SUMMARY}>
-              <TabsTrigger value="summary">{t('views:repos.summary', 'Summary')}</TabsTrigger>
-            </NavLink>
-            <NavLink to={RepoTabsKeys.CODE}>
-              <TabsTrigger value="code">{t('views:repos.files', 'Files')}</TabsTrigger>
-            </NavLink>
-            <NavLink to={RepoTabsKeys.PIPELINES}>
-              <TabsTrigger value="pipelines">{t('views:repos.pipelines', 'Pipelines')}</TabsTrigger>
-            </NavLink>
-            <NavLink to={RepoTabsKeys.COMMITS}>
-              <TabsTrigger value="commits">{t('views:repos.commits', 'Commits')}</TabsTrigger>
-            </NavLink>
-            <NavLink to={RepoTabsKeys.PULLS}>
-              <TabsTrigger value="pulls">{t('views:repos.pull-requests', 'Pull Requests')}</TabsTrigger>
-            </NavLink>
-            <NavLink to={RepoTabsKeys.BRANCHES}>
-              <TabsTrigger value="branches">{t('views:repos.branches', 'Branches')}</TabsTrigger>
-            </NavLink>
-            <NavLink to={RepoTabsKeys.SETTINGS}>
-              <TabsTrigger value="settings">{t('views:repos.settings', 'Settings')}</TabsTrigger>
-            </NavLink>
+            <TabsTrigger role="link" value="summary" onClick={makeHandleTabChange(RepoTabsKeys.SUMMARY)}>
+              {t('views:repos.summary', 'Summary')}
+            </TabsTrigger>
+            <TabsTrigger role="link" value="code" onClick={makeHandleTabChange(RepoTabsKeys.CODE)}>
+              {t('views:repos.files', 'Files')}
+            </TabsTrigger>
+            <TabsTrigger role="link" value="pipelines" onClick={makeHandleTabChange(RepoTabsKeys.PIPELINES)}>
+              {t('views:repos.pipelines', 'Pipelines')}
+            </TabsTrigger>
+            <TabsTrigger role="link" value="commits" onClick={makeHandleTabChange(RepoTabsKeys.COMMITS)}>
+              {t('views:repos.commits', 'Commits')}
+            </TabsTrigger>
+            <TabsTrigger role="link" value="pulls" onClick={makeHandleTabChange(RepoTabsKeys.PULLS)}>
+              {t('views:repos.pull-requests', 'Pull Requests')}
+            </TabsTrigger>
+            <TabsTrigger role="link" value="branches" onClick={makeHandleTabChange(RepoTabsKeys.BRANCHES)}>
+              {t('views:repos.branches', 'Branches')}
+            </TabsTrigger>
+            <TabsTrigger role="link" value="settings" onClick={makeHandleTabChange(RepoTabsKeys.SETTINGS)}>
+              {t('views:repos.settings', 'Settings')}
+            </TabsTrigger>
           </TabsList>
         </Tabs>
       </SandboxLayout.SubHeader>
diff --git a/packages/ui/src/views/tailwind-values-exporter.tsx b/packages/ui/src/views/tailwind-values-exporter.tsx
new file mode 100644
index 0000000000..4a5f58b821
--- /dev/null
+++ b/packages/ui/src/views/tailwind-values-exporter.tsx
@@ -0,0 +1 @@
+export const TailwindValuesExporter = () => <div className="top-14.5 h-14.5 sr-only" />
diff --git a/packages/ui/tailwind.ts b/packages/ui/tailwind.ts
index 3cf96f0d61..2b4a10ded8 100644
--- a/packages/ui/tailwind.ts
+++ b/packages/ui/tailwind.ts
@@ -339,6 +339,9 @@ export default {
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out'
+      },
+      spacing: {
+        '14.5': '3.625rem'
       }
     }
   },
diff --git a/packages/views/src/layouts/SandboxLayout.tsx b/packages/views/src/layouts/SandboxLayout.tsx
index 417185197b..ffe6b6db0f 100644
--- a/packages/views/src/layouts/SandboxLayout.tsx
+++ b/packages/views/src/layouts/SandboxLayout.tsx
@@ -40,7 +40,7 @@ function LeftSubPanel({
   className?: string
 }) {
   const paddingTopClass =
-    hasHeader && hasSubHeader ? 'top-[100px]' : hasHeader ? 'top-[55px]' : hasSubHeader ? 'top-[45px]' : ''
+    hasHeader && hasSubHeader ? 'top-[100px]' : hasHeader ? 'top-14.5' : hasSubHeader ? 'top-[2.75rem]' : ''
 
   return (
     <section
@@ -67,7 +67,7 @@ function Header({ children, className }: { children: React.ReactNode; className?
 function SubHeader({ children, className }: { children: React.ReactNode; className?: string }) {
   return (
     <header
-      className={cn('bg-background fixed left-[220px] right-0 top-[55px] z-40 h-[45px]', className)}
+      className={cn('bg-background fixed left-[220px] right-0 top-3.625rem z-40 h-[2.75rem]', className)}
       role="banner"
     >
       {children}
@@ -93,7 +93,7 @@ function Main({
   hasLeftSubPanel?: boolean
 }) {
   const paddingTopClass =
-    hasHeader && hasSubHeader ? `pt-[calc(55px+45px)]` : hasHeader ? 'pt-[55px]' : hasSubHeader ? 'pt-[45px]' : ''
+    hasHeader && hasSubHeader ? `pt-[calc(55px+45px)]` : hasHeader ? 'pt-[55px]' : hasSubHeader ? 'pt-[2.75rem]' : ''
 
   const paddingLeftClass =
     hasLeftPanel && hasLeftSubPanel