diff --git a/apps/gitness/src/AppV2.tsx b/apps/gitness/src/AppV2.tsx
new file mode 100644
index 000000000..7437de380
--- /dev/null
+++ b/apps/gitness/src/AppV2.tsx
@@ -0,0 +1,52 @@
+import { I18nextProvider } from 'react-i18next'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+
+import { QueryClientProvider } from '@tanstack/react-query'
+import { NuqsAdapter } from 'nuqs/adapters/react-router'
+
+import { TooltipProvider } from '@harnessio/canary'
+import { CodeServiceAPIClient } from '@harnessio/code-service-client'
+
+import { AppProvider } from './framework/context/AppContext'
+import { ExitConfirmProvider } from './framework/context/ExitConfirmContext'
+import { ThemeProvider } from './framework/context/ThemeContext'
+import { queryClient } from './framework/queryClient'
+import i18n from './i18n/i18n'
+import { routes } from './routes'
+
+const BASE_URL_PREFIX = `${window.apiUrl || ''}/api/v1`
+
+export default function AppV1() {
+  new CodeServiceAPIClient({
+    urlInterceptor: (url: string) => `${BASE_URL_PREFIX}${url}`,
+    responseInterceptor: (response: Response) => {
+      switch (response.status) {
+        case 401:
+          window.location.href = '/signin'
+          break
+      }
+      return response
+    }
+  })
+
+  // Router Configuration
+  const router = createBrowserRouter(routes)
+
+  return (
+    <AppProvider>
+      <I18nextProvider i18n={i18n}>
+        <ThemeProvider defaultTheme="dark-std-std">
+          <QueryClientProvider client={queryClient}>
+            <TooltipProvider>
+              <ExitConfirmProvider>
+                <NuqsAdapter>
+                  <RouterProvider router={router} />
+                </NuqsAdapter>
+              </ExitConfirmProvider>
+            </TooltipProvider>
+          </QueryClientProvider>
+        </ThemeProvider>
+      </I18nextProvider>
+    </AppProvider>
+  )
+}
diff --git a/apps/gitness/src/components-v2/app-shell.tsx b/apps/gitness/src/components-v2/app-shell.tsx
new file mode 100644
index 000000000..2a49f1e7c
--- /dev/null
+++ b/apps/gitness/src/components-v2/app-shell.tsx
@@ -0,0 +1,200 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { Outlet, useLocation, useNavigate } from 'react-router-dom'
+
+import {
+  ManageNavigation,
+  MenuGroupType,
+  MenuGroupTypes,
+  MoreSubmenu,
+  Navbar,
+  NavbarItemType,
+  SettingsMenu
+} from '@harnessio/ui/components'
+import { useLocationChange } from '@harnessio/ui/hooks'
+import { SandboxLayout } from '@harnessio/ui/views'
+
+import { useNav } from '../components/stores/recent-pinned-nav-links.store'
+import { getNavbarMenuData } from '../data/navbar-menu-data'
+import { getPinnedMenuItemsData } from '../data/pinned-menu-items-data'
+import { useAppContext } from '../framework/context/AppContext'
+import { useThemeStore } from '../framework/context/ThemeContext'
+import { useTranslationStore } from '../i18n/stores/i18n-store'
+import BreadcrumbsV1 from './breadcrumbs/breadcrumbs'
+
+interface NavLinkStorageInterface {
+  state: {
+    recent: NavbarItemType[]
+    pinned: NavbarItemType[]
+  }
+}
+
+const AppShell = () => {
+  const { currentUser } = useAppContext()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const { pinnedMenu, recentMenu, setPinned, setRecent, setNavLinks } = useNav()
+  const { t } = useTranslationStore()
+  const [showMoreMenu, setShowMoreMenu] = useState(false)
+  const [showSettingMenu, setShowSettingMenu] = useState(false)
+  const [showCustomNav, setShowCustomNav] = useState(false)
+
+  const pinnedMenuItemsData = useMemo(() => getPinnedMenuItemsData(t), [t])
+
+  useLocationChange({ t, onRouteChange: setRecent })
+
+  useEffect(() => {
+    const linksFromStorage = localStorage.getItem('nav-items')
+    let parsedLinksFromStorage: NavLinkStorageInterface | undefined
+
+    if (linksFromStorage) {
+      parsedLinksFromStorage = JSON.parse(linksFromStorage)
+    }
+
+    /**
+     * Logic for setting initial pinned links
+     *
+     * setting initial pinned link only if no pinned links are stored in local storage.
+     * Pinned links cannot be empty as we will have some links permanantly.
+     */
+    if (parsedLinksFromStorage && !parsedLinksFromStorage?.state?.pinned?.length) {
+      const pinnedItems = pinnedMenu.filter(
+        item => !pinnedMenuItemsData.some(staticPinned => staticPinned.id === item.id)
+      )
+      setNavLinks({ pinnedMenu: [...pinnedMenuItemsData, ...pinnedItems] })
+    }
+  }, [])
+
+  /**
+   * Map mock data menu by type to Settings and More
+   */
+  const { moreMenu, settingsMenu } = useMemo(() => {
+    const navbarMenuData = getNavbarMenuData(t)
+    return navbarMenuData.reduce<{
+      moreMenu: MenuGroupType[]
+      settingsMenu: MenuGroupType[]
+    }>(
+      (acc, item) => {
+        if (item.type === MenuGroupTypes.SETTINGS) {
+          acc.settingsMenu.push(item)
+        } else {
+          acc.moreMenu.push(item)
+        }
+
+        return acc
+      },
+      {
+        moreMenu: [],
+        settingsMenu: []
+      }
+    )
+  }, [t])
+
+  /**
+   * Handle logout
+   */
+  const handleLogOut = () => navigate('/logout')
+
+  /**
+   * Toggle show more menu
+   */
+  const handleMoreMenu = useCallback(() => {
+    setShowSettingMenu(false)
+    setShowMoreMenu(prevState => !prevState)
+  }, [])
+
+  /**
+   * Toggle system settings menu
+   */
+  const handleSettingsMenu = useCallback(() => {
+    setShowMoreMenu(false)
+    setShowSettingMenu(prevState => !prevState)
+  }, [])
+
+  /**
+   * Toggle custom navigation modal
+   */
+  const handleCustomNav = useCallback(() => {
+    setShowCustomNav(prevState => !prevState)
+  }, [])
+
+  /**
+   * Close all menu when location changed
+   */
+  useEffect(() => {
+    setShowMoreMenu(false)
+    setShowSettingMenu(false)
+    setShowCustomNav(false)
+  }, [location])
+
+  /**
+   * Handle save recent and pinned items
+   */
+  const handleSave = (nextRecentItems: NavbarItemType[], nextPinnedItems: NavbarItemType[]) => {
+    setNavLinks({
+      pinnedMenu: nextPinnedItems,
+      recentMenu: nextRecentItems
+    })
+  }
+
+  /**
+   * Remove recent menu item
+   */
+  const handleRemoveRecentMenuItem = useCallback(
+    (item: NavbarItemType) => {
+      setRecent(item, true)
+    },
+    [setRecent]
+  )
+
+  /**
+   * Change pinned menu items
+   */
+  const handleChangePinnedMenuItem = useCallback(
+    (item: NavbarItemType, pin: boolean) => {
+      setPinned(item, pin)
+    },
+    [setPinned]
+  )
+
+  return (
+    <SandboxLayout.Root>
+      <SandboxLayout.LeftPanel>
+        <Navbar
+          showMoreMenu={showMoreMenu}
+          showSettingMenu={showSettingMenu}
+          handleMoreMenu={handleMoreMenu}
+          handleSettingsMenu={handleSettingsMenu}
+          currentUser={currentUser}
+          handleCustomNav={handleCustomNav}
+          handleLogOut={handleLogOut}
+          recentMenuItems={recentMenu}
+          pinnedMenuItems={pinnedMenu}
+          handleChangePinnedMenuItem={handleChangePinnedMenuItem}
+          handleRemoveRecentMenuItem={handleRemoveRecentMenuItem}
+          useThemeStore={useThemeStore}
+          useTranslationStore={useTranslationStore}
+        />
+      </SandboxLayout.LeftPanel>
+      <div className="flex flex-col">
+        <div className="sticky top-0 z-40 bg-background-1">
+          <BreadcrumbsV1 />
+        </div>
+        <Outlet />
+      </div>
+      <MoreSubmenu showMoreMenu={showMoreMenu} handleMoreMenu={handleMoreMenu} items={moreMenu} />
+      <SettingsMenu showSettingMenu={showSettingMenu} handleSettingsMenu={handleSettingsMenu} items={settingsMenu} />
+      <ManageNavigation
+        pinnedItems={pinnedMenu}
+        recentItems={recentMenu}
+        navbarMenuData={getNavbarMenuData(t)}
+        showManageNavigation={showCustomNav}
+        isSubmitting={false}
+        submitted={false}
+        onSave={handleSave}
+        onClose={handleCustomNav}
+      />
+    </SandboxLayout.Root>
+  )
+}
+
+export default AppShell
diff --git a/apps/gitness/src/components-v2/breadcrumbs/breadcrumbs.tsx b/apps/gitness/src/components-v2/breadcrumbs/breadcrumbs.tsx
new file mode 100644
index 000000000..7b3f7760e
--- /dev/null
+++ b/apps/gitness/src/components-v2/breadcrumbs/breadcrumbs.tsx
@@ -0,0 +1,47 @@
+import { useMatches } from 'react-router-dom'
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+  Topbar
+} from '@harnessio/ui/components'
+
+import { CustomHandle } from '../../routes'
+
+function Breadcrumbs() {
+  const matches = useMatches()
+
+  return (
+    <Topbar.Root>
+      <Topbar.Left>
+        <Breadcrumb className="select-none">
+          <BreadcrumbList>
+            {matches.map((match, index) => {
+              const { breadcrumb } = (match.handle || {}) as CustomHandle
+              const isFirst = index === 0
+              const isLast = index === matches.length - 1
+
+              if (!breadcrumb) return null
+
+              return (
+                <BreadcrumbItem key={index}>
+                  {!isFirst ? <BreadcrumbSeparator>/</BreadcrumbSeparator> : null}
+                  {isLast ? (
+                    breadcrumb(match.params)
+                  ) : (
+                    <BreadcrumbLink href={match.pathname}>{breadcrumb(match.params)}</BreadcrumbLink>
+                  )}
+                </BreadcrumbItem>
+              )
+            })}
+          </BreadcrumbList>
+        </Breadcrumb>
+      </Topbar.Left>
+    </Topbar.Root>
+  )
+}
+
+export default Breadcrumbs
diff --git a/apps/gitness/src/components-v2/breadcrumbs/project-dropdown.tsx b/apps/gitness/src/components-v2/breadcrumbs/project-dropdown.tsx
new file mode 100644
index 000000000..7af7214b9
--- /dev/null
+++ b/apps/gitness/src/components-v2/breadcrumbs/project-dropdown.tsx
@@ -0,0 +1,44 @@
+import { useNavigate, useParams } from 'react-router-dom'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Icon,
+  Text
+} from '@harnessio/ui/components'
+
+import { useAppContext } from '../../framework/context/AppContext'
+import { PathParams } from '../../RouteDefinitions'
+
+function ProjectDropdown(): JSX.Element {
+  const { spaceId } = useParams<PathParams>()
+  const navigate = useNavigate()
+  const { spaces } = useAppContext()
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger className="flex items-center gap-x-1.5">
+        {spaceId ?? 'Select project'}
+        <Icon className="chevron-down text-icons-4" name="chevron-fill-down" size={6} />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-[300px]">
+        {spaces.map(({ identifier }) => (
+          <DropdownMenuItem
+            className="flex flex-col"
+            key={identifier}
+            onClick={() => {
+              if (identifier) {
+                navigate(`/${identifier}/repos`)
+              }
+            }}
+          >
+            <Text className="inline-block w-full text-left">{identifier}</Text>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export { ProjectDropdown }
diff --git a/apps/gitness/src/data/navbar-menu-data.ts b/apps/gitness/src/data/navbar-menu-data.ts
new file mode 100644
index 000000000..c5bc81b24
--- /dev/null
+++ b/apps/gitness/src/data/navbar-menu-data.ts
@@ -0,0 +1,339 @@
+import { TFunction } from 'i18next'
+
+import { MenuGroupType, MenuGroupTypes } from '@harnessio/ui/components'
+
+export const getNavbarMenuData = (t: TFunction): MenuGroupType[] => [
+  {
+    groupId: 0,
+    title: t('component:navbar.devops'),
+    type: MenuGroupTypes.GENERAL,
+    items: [
+      {
+        id: 0,
+        iconName: 'repositories-gradient',
+        title: t('component:navbar.repositories'),
+        description: 'Integrated & familiar git experience.',
+        to: '/repos'
+      },
+      {
+        id: 1,
+        iconName: 'pipelines-gradient',
+        title: t('component:navbar.pipelines'),
+        description: 'Up to 4X faster than other solutions.',
+        to: '/pipelines'
+      },
+      {
+        id: 2,
+        iconName: 'execution-gradient',
+        title: t('component:navbar.executions'),
+        description: 'Optimize feature rollout velocity.',
+        to: '/executions'
+      },
+      {
+        id: 3,
+        iconName: 'database-gradient',
+        title: t('component:navbar.databases'),
+        description: 'Manage all your infrastructure.',
+        to: '/databases'
+      },
+      {
+        id: 4,
+        iconName: 'artifacts-gradient',
+        title: t('component:navbar.artifacts'),
+        description: 'Validate service resilience.',
+        to: '/artifacts'
+      },
+      {
+        id: 5,
+        iconName: 'infrastructure-gradient',
+        title: t('component:navbar.infrastructure'),
+        description: 'Manage all your infrastructure.',
+        to: '/infrastructure'
+      },
+      {
+        id: 6,
+        iconName: 'flag-gradient',
+        title: t('component:navbar.feature-flags'),
+        description: 'Optimize feature rollout velocity.',
+        to: '/feature-flags'
+      }
+    ]
+  },
+  {
+    groupId: 1,
+    title: 'Devex',
+    type: MenuGroupTypes.GENERAL,
+    items: [
+      {
+        id: 7,
+        iconName: 'dev-portal-gradient',
+        title: t('component:navbar.developer-portal'),
+        description: 'Built for developers, onboard in minutes.',
+        to: '/developer/portal'
+      },
+      {
+        id: 8,
+        iconName: 'dev-envs-gradient',
+        title: t('component:navbar.developer-environments'),
+        description: 'Integrated & familiar git experience.',
+        to: '/developer/environments'
+      },
+      {
+        id: 9,
+        iconName: 'dev-insights-gradient',
+        title: t('component:navbar.developer-insights'),
+        description: 'Actionable insights on SDLC.',
+        to: '/developer/insights'
+      }
+    ]
+  },
+  {
+    groupId: 2,
+    title: t('component:navbar.secops'),
+    type: MenuGroupTypes.GENERAL,
+    items: [
+      {
+        id: 10,
+        iconName: 'security-tests-gradient',
+        title: t('component:navbar.security-tests'),
+        description: 'Shift left security testing.',
+        to: '/security-tests'
+      },
+      {
+        id: 11,
+        iconName: 'supply-chain-gradient',
+        title: t('component:navbar.supply-chain'),
+        description: 'Artifact integrity and governance.',
+        to: '/supply-chain'
+      }
+    ]
+  },
+  {
+    groupId: 3,
+    title: t('component:navbar.finops'),
+    type: MenuGroupTypes.GENERAL,
+    items: [
+      {
+        id: 12,
+        iconName: 'cloud-costs-gradient',
+        title: t('component:navbar.cloud-costs'),
+        description: 'Intelligent cost management.',
+        to: '/cloud-costs'
+      }
+    ]
+  },
+  {
+    groupId: 4,
+    title: t('component:navbar.reliability'),
+    type: MenuGroupTypes.GENERAL,
+    items: [
+      {
+        id: 13,
+        iconName: 'incidents-gradient',
+        title: t('component:navbar.incidents'),
+        description: 'Shift left security testing.',
+        to: '/incidents'
+      },
+      {
+        id: 14,
+        iconName: 'chaos-engineering-gradient',
+        title: t('component:navbar.chaos-engineering'),
+        description: 'Validate service resilience.',
+        to: '/chaos'
+      }
+    ]
+  },
+  {
+    groupId: 5,
+    title: t('component:navbar.platform'),
+    type: MenuGroupTypes.GENERAL,
+    items: [
+      {
+        id: 15,
+        iconName: 'dashboards-gradient',
+        title: t('component:navbar.dashboards'),
+        description: 'Intelligent cost management.',
+        to: '/dashboards'
+      }
+    ]
+  },
+  {
+    groupId: 6,
+    title: t('component:navbar.general'),
+    type: MenuGroupTypes.SETTINGS,
+    items: [
+      {
+        id: 16,
+        iconName: 'settings-2',
+        title: t('component:navbar.settings'),
+        to: '/admin/default-settings'
+      },
+      {
+        id: 17,
+        iconName: 'notification',
+        title: t('component:navbar.notifications'),
+        to: '/admin/notifications'
+      }
+    ]
+  },
+  {
+    groupId: 7,
+    title: t('component:navbar.resources'),
+    type: MenuGroupTypes.SETTINGS,
+    items: [
+      {
+        id: 18,
+        iconName: 'wrench',
+        title: t('component:navbar.services'),
+        to: '/admin/services'
+      },
+      {
+        id: 19,
+        iconName: 'environment',
+        title: t('component:navbar.environments'),
+        to: '/admin/environments'
+      },
+      {
+        id: 20,
+        iconName: 'connectors',
+        title: t('component:navbar.connectors'),
+        to: '/admin/connectors'
+      },
+      {
+        id: 21,
+        iconName: 'hierarchy',
+        title: t('component:navbar.delegates'),
+        to: '/admin/delegates'
+      },
+      {
+        id: 22,
+        iconName: 'key',
+        title: t('component:navbar.secrets'),
+        to: '/admin/secrets'
+      },
+      {
+        id: 23,
+        iconName: 'file-icon',
+        title: t('component:navbar.file-store'),
+        to: '/admin/filte-store'
+      },
+      {
+        id: 24,
+        iconName: 'sidebar-icon',
+        title: t('component:navbar.templates'),
+        to: '/admin/templates'
+      },
+      {
+        id: 25,
+        iconName: 'variable',
+        title: t('component:navbar.variables'),
+        to: '/admin/variables'
+      },
+      {
+        id: 26,
+        iconName: 'clock-icon',
+        title: t('component:navbar.slo-downtime'),
+        to: '/admin/slo-downtime'
+      },
+      {
+        id: 27,
+        iconName: 'search',
+        title: t('component:navbar.discovery'),
+        to: '/admin/discovery'
+      },
+      {
+        id: 28,
+        iconName: 'eye',
+        title: t('component:navbar.monitored-services'),
+        to: '/admin/monitored-services'
+      },
+      {
+        id: 29,
+        iconName: 'stack',
+        title: t('component:navbar.overrides'),
+        to: '/admin/overrides'
+      },
+      {
+        id: 30,
+        iconName: 'bookmark-icon',
+        title: t('component:navbar.certificates'),
+        to: '/admin/certificates'
+      },
+      {
+        id: 31,
+        iconName: 'webhook',
+        title: t('component:navbar.webhooks'),
+        to: '/admin/webhooks'
+      }
+    ]
+  },
+  {
+    groupId: 8,
+    title: t('component:navbar.access-control'),
+    type: MenuGroupTypes.SETTINGS,
+    items: [
+      {
+        id: 32,
+        iconName: 'user',
+        title: t('component:navbar.users'),
+        to: '/admin/users'
+      },
+      {
+        id: 33,
+        iconName: 'users',
+        title: t('component:navbar.user-groups'),
+        to: '/admin/users-group'
+      },
+      {
+        id: 34,
+        iconName: 'account-icon',
+        title: t('component:navbar.service-accounts'),
+        to: '/admin/service-accounts'
+      },
+      {
+        id: 35,
+        iconName: 'folder-icon',
+        title: t('component:navbar.resource-groups'),
+        to: '/admin/resource-groups'
+      },
+      {
+        id: 36,
+        iconName: 'briefcase',
+        title: t('component:navbar.roles'),
+        to: '/admin/roles'
+      }
+    ]
+  },
+  {
+    groupId: 9,
+    title: t('component:navbar.security-and-governance'),
+    type: MenuGroupTypes.SETTINGS,
+    items: [
+      {
+        id: 37,
+        iconName: 'shield',
+        title: t('component:navbar.policies'),
+        to: '/admin/policies'
+      },
+      {
+        id: 38,
+        iconName: 'snow',
+        title: t('component:navbar.freeze-windows'),
+        to: '/admin/freeze-windows'
+      }
+    ]
+  },
+  {
+    groupId: 10,
+    title: t('component:navbar.external-tickets'),
+    type: MenuGroupTypes.SETTINGS,
+    items: [
+      {
+        id: 39,
+        iconName: 'ticket',
+        title: t('component:navbar.external-tickets'),
+        to: '/admin/external-tickets'
+      }
+    ]
+  }
+]
diff --git a/apps/gitness/src/data/pinned-menu-items-data.ts b/apps/gitness/src/data/pinned-menu-items-data.ts
new file mode 100644
index 000000000..2c5f9def9
--- /dev/null
+++ b/apps/gitness/src/data/pinned-menu-items-data.ts
@@ -0,0 +1,22 @@
+import { TFunction } from 'i18next'
+
+import { NavbarItemType } from '@harnessio/ui/components'
+
+export const getPinnedMenuItemsData = (t: TFunction): NavbarItemType[] => [
+  {
+    id: 0,
+    iconName: 'repositories-gradient',
+    title: t('component:navbar.repositories'),
+    description: 'Integrated & familiar git experience.',
+    to: '/repos',
+    permanentlyPinned: true
+  },
+  {
+    id: 1,
+    iconName: 'pipelines-gradient',
+    title: t('component:navbar.pipelines'),
+    description: 'Up to 4X faster than other solutions.',
+    to: '/pipelines',
+    permanentlyPinned: true
+  }
+]
diff --git a/apps/gitness/src/main.tsx b/apps/gitness/src/main.tsx
index d9ff25fa2..5bbffc8fb 100644
--- a/apps/gitness/src/main.tsx
+++ b/apps/gitness/src/main.tsx
@@ -1,5 +1,5 @@
 import { createRoot } from 'react-dom/client'
 
-import App from './App'
+import App from './AppV2'
 
 createRoot(document.getElementById('root')!).render(<App />)
diff --git a/apps/gitness/src/pages-v2/profile-settings/settings-layout.tsx b/apps/gitness/src/pages-v2/profile-settings/settings-layout.tsx
index 73f940632..9f6ada525 100644
--- a/apps/gitness/src/pages-v2/profile-settings/settings-layout.tsx
+++ b/apps/gitness/src/pages-v2/profile-settings/settings-layout.tsx
@@ -2,7 +2,6 @@ import { Outlet, useLocation } from 'react-router-dom'
 
 import { ProfileSettingsTabNav } from '@harnessio/ui/views'
 
-import Breadcrumbs from '../../components/breadcrumbs/breadcrumbs'
 import { useTranslationStore } from '../../i18n/stores/i18n-store'
 
 export const SettingsLayout = () => {
@@ -11,8 +10,7 @@ export const SettingsLayout = () => {
 
   return (
     <>
-      <div className="sticky top-0 z-40 bg-background-1">
-        <Breadcrumbs />
+      <div className="sticky top-breadcrumbs z-40 bg-background-1">
         <ProfileSettingsTabNav activeTab={activeTab} useTranslationStore={useTranslationStore} />
       </div>
       <Outlet />
diff --git a/apps/gitness/src/pages-v2/project/settings-layout.tsx b/apps/gitness/src/pages-v2/project/settings-layout.tsx
index d79f730d1..82aa830a0 100644
--- a/apps/gitness/src/pages-v2/project/settings-layout.tsx
+++ b/apps/gitness/src/pages-v2/project/settings-layout.tsx
@@ -2,13 +2,10 @@ import { Outlet } from 'react-router-dom'
 
 import { ProjectSettingsPage } from '@harnessio/ui/views'
 
-import Breadcrumbs from '../../components/breadcrumbs/breadcrumbs'
-
 export const SettingsLayout = () => {
   return (
     <>
-      <div className="sticky top-0 z-40 bg-background-1">
-        <Breadcrumbs />
+      <div className="sticky top-breadcrumbs z-40 bg-background-1">
         <ProjectSettingsPage />
       </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 3ed5e22f6..328b1671b 100644
--- a/apps/gitness/src/pages-v2/repo/repo-layout.tsx
+++ b/apps/gitness/src/pages-v2/repo/repo-layout.tsx
@@ -2,14 +2,12 @@ import { Outlet } from 'react-router-dom'
 
 import { RepoSubheader } from '@harnessio/ui/components'
 
-import Breadcrumbs from '../../components/breadcrumbs/breadcrumbs'
 import { useTranslationStore } from '../../i18n/stores/i18n-store'
 
 const RepoLayout = () => {
   return (
     <>
-      <div className="sticky top-0 z-40 bg-background-1">
-        <Breadcrumbs />
+      <div className="sticky top-breadcrumbs z-40 bg-background-1">
         <RepoSubheader useTranslationStore={useTranslationStore} />
       </div>
       <Outlet />
diff --git a/apps/gitness/src/pages-v2/repo/repo-list.tsx b/apps/gitness/src/pages-v2/repo/repo-list.tsx
index fdbf61edd..b2d621501 100644
--- a/apps/gitness/src/pages-v2/repo/repo-list.tsx
+++ b/apps/gitness/src/pages-v2/repo/repo-list.tsx
@@ -5,7 +5,6 @@ import { parseAsInteger, useQueryState } from 'nuqs'
 import { ListReposOkResponse, useListReposQuery } from '@harnessio/code-service-client'
 import { SandboxRepoListPage } from '@harnessio/ui/views'
 
-import Breadcrumbs from '../../components/breadcrumbs/breadcrumbs'
 import { useGetSpaceURLParam } from '../../framework/hooks/useGetSpaceParam'
 import useSpaceSSE from '../../framework/hooks/useSpaceSSE'
 import { useTranslationStore } from '../../i18n/stores/i18n-store'
@@ -75,7 +74,6 @@ export default function ReposListPage() {
 
   return (
     <>
-      <Breadcrumbs />
       <SandboxRepoListPage
         useRepoStore={useRepoStore}
         useTranslationStore={useTranslationStore}
diff --git a/apps/gitness/src/routes.tsx b/apps/gitness/src/routes.tsx
new file mode 100644
index 000000000..724f9ba6e
--- /dev/null
+++ b/apps/gitness/src/routes.tsx
@@ -0,0 +1,460 @@
+import { Navigate, Params, RouteObject } from 'react-router-dom'
+
+import { BreadcrumbSeparator } from '@harnessio/canary'
+import { Text } from '@harnessio/ui/components'
+import { EmptyPage, RepoSettingsPage, SandboxLayout } from '@harnessio/ui/views'
+
+import AppShell from './components-v2/app-shell'
+import { ProjectDropdown } from './components-v2/breadcrumbs/project-dropdown'
+import { ExplorerPathsProvider } from './framework/context/ExplorerPathsContext'
+import { useTranslationStore } from './i18n/stores/i18n-store'
+import CreateProject from './pages-v2/create-project/create-project-container'
+import { LandingPage } from './pages-v2/landing-page-container'
+import { Logout } from './pages-v2/logout'
+import { SettingsProfileGeneralPage } from './pages-v2/profile-settings/profile-settings-general-container'
+import { SettingsProfileKeysPage } from './pages-v2/profile-settings/profile-settings-keys-container'
+import { ProfileSettingsThemePage } from './pages-v2/profile-settings/profile-settings-theme-page'
+import { SettingsLayout as ProfileSettingsLayout } from './pages-v2/profile-settings/settings-layout'
+import { ProjectMemberListPage } from './pages-v2/project/project-member-list'
+import { SettingsLayout as ProjectSettingsLayout } from './pages-v2/project/settings-layout'
+import PullRequestChanges from './pages-v2/pull-request/pull-request-changes'
+import { PullRequestCommitPage } from './pages-v2/pull-request/pull-request-commits'
+import { CreatePullRequest } from './pages-v2/pull-request/pull-request-compare'
+import PullRequestConversationPage from './pages-v2/pull-request/pull-request-conversation'
+import PullRequestDataProvider from './pages-v2/pull-request/pull-request-data-provider'
+import PullRequestLayout from './pages-v2/pull-request/pull-request-layout'
+import PullRequestListPage from './pages-v2/pull-request/pull-request-list'
+import { RepoBranchesListPage } from './pages-v2/repo/repo-branch-list'
+import { RepoBranchSettingsRulesPageContainer } from './pages-v2/repo/repo-branch-rules-container'
+import { RepoCode } from './pages-v2/repo/repo-code'
+import RepoCommitsPage from './pages-v2/repo/repo-commits'
+import { CreateRepo } from './pages-v2/repo/repo-create-page'
+import RepoExecutionListPage from './pages-v2/repo/repo-execution-list'
+import { ImportRepo } from './pages-v2/repo/repo-import-page'
+import RepoLayout from './pages-v2/repo/repo-layout'
+import ReposListPage from './pages-v2/repo/repo-list'
+import RepoPipelineListPage from './pages-v2/repo/repo-pipeline-list'
+import { RepoSettingsGeneralPageContainer } from './pages-v2/repo/repo-settings-general-container'
+import { RepoSidebar } from './pages-v2/repo/repo-sidebar'
+import RepoSummaryPage from './pages-v2/repo/repo-summary'
+import { SignIn } from './pages-v2/signin'
+import { SignUp } from './pages-v2/signup'
+import { UserManagementPageContainer } from './pages-v2/user-management/user-management-container'
+import { CreateWebhookContainer } from './pages-v2/webhooks/create-webhook-container'
+import WebhookListPage from './pages-v2/webhooks/webhook-list'
+
+// Define a custom handle with the breadcrumb property
+export interface CustomHandle {
+  breadcrumb?: (params: Params<string>) => string
+}
+
+// Create a new type by intersecting RouteObject with the custom handle
+type CustomRouteObject = RouteObject & {
+  handle?: CustomHandle
+}
+
+export const routes: CustomRouteObject[] = [
+  {
+    path: '/',
+    element: <AppShell />,
+    handle: {
+      breadcrumb: () => <ProjectDropdown />
+    },
+    children: [
+      {
+        index: true,
+        element: <LandingPage />
+      },
+      {
+        path: ':spaceId/repos',
+        handle: {
+          breadcrumb: () => <Text>Repositories</Text>
+        },
+        children: [
+          { index: true, element: <ReposListPage /> },
+          {
+            path: 'create',
+            element: <CreateRepo />
+          },
+          {
+            path: 'import',
+            element: <ImportRepo />
+          },
+          {
+            path: ':repoId',
+            element: <RepoLayout />,
+            handle: {
+              breadcrumb: ({ repoId }: { repoId: string }) => <Text>{repoId}</Text>
+            },
+            children: [
+              {
+                index: true,
+                element: <Navigate to="summary" replace />
+              },
+              {
+                path: 'summary',
+                element: <RepoSummaryPage />,
+                handle: {
+                  breadcrumb: () => <Text>Summary</Text>
+                }
+              },
+              {
+                path: 'commits',
+                element: <RepoCommitsPage />,
+                handle: {
+                  breadcrumb: () => <Text>Commits</Text>
+                }
+              },
+              {
+                path: 'branches',
+                element: <RepoBranchesListPage />,
+                handle: {
+                  breadcrumb: () => <Text>Branches</Text>
+                }
+              },
+              {
+                path: 'code',
+                element: (
+                  <ExplorerPathsProvider>
+                    <RepoSidebar />
+                  </ExplorerPathsProvider>
+                ),
+                handle: {
+                  breadcrumb: () => <Text>Files</Text>
+                },
+                children: [
+                  {
+                    index: true,
+                    element: <RepoCode />
+                  },
+                  {
+                    path: '*',
+                    element: <RepoCode />
+                  }
+                ]
+              },
+              {
+                path: 'pulls',
+                handle: {
+                  breadcrumb: () => <Text>Pull Requests</Text>
+                },
+                children: [
+                  { index: true, element: <PullRequestListPage /> },
+                  {
+                    path: 'compare/:diffRefs*?',
+                    element: <CreatePullRequest />
+                  },
+                  {
+                    path: ':pullRequestId',
+                    element: <PullRequestLayout />,
+                    handle: {
+                      breadcrumb: ({ pullRequestId }: { pullRequestId: string }) => <Text>{pullRequestId}</Text>
+                    },
+                    children: [
+                      {
+                        index: true,
+                        element: <Navigate to="conversation" replace />
+                      },
+                      {
+                        path: 'conversation',
+                        element: (
+                          <PullRequestDataProvider>
+                            <PullRequestConversationPage />
+                          </PullRequestDataProvider>
+                        )
+                      },
+                      {
+                        path: 'commits',
+                        element: <PullRequestCommitPage />,
+                        handle: {
+                          breadcrumb: () => <Text>Commits</Text>
+                        }
+                      },
+                      {
+                        path: 'changes',
+                        element: (
+                          <PullRequestDataProvider>
+                            <PullRequestChanges />
+                          </PullRequestDataProvider>
+                        ),
+                        handle: {
+                          breadcrumb: () => <Text>Changes</Text>
+                        }
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                path: 'pipelines',
+                handle: {
+                  breadcrumb: () => <Text>Pipelines</Text>
+                },
+                children: [
+                  { index: true, element: <RepoPipelineListPage /> },
+                  {
+                    path: ':pipelineId',
+                    element: <RepoExecutionListPage />,
+                    handle: {
+                      breadcrumb: ({ pipelineId }: { pipelineId: string }) => (
+                        <div className="flex items-center gap-1">
+                          <Text>{pipelineId}</Text>
+                          <BreadcrumbSeparator>/</BreadcrumbSeparator>
+                          <Text>Executions</Text>
+                        </div>
+                      )
+                    }
+                  }
+                ]
+              },
+              {
+                path: 'settings',
+                element: <RepoSettingsPage useTranslationStore={useTranslationStore} />,
+                handle: {
+                  breadcrumb: () => <Text>Settings</Text>
+                },
+                children: [
+                  {
+                    index: true,
+                    element: <Navigate to="general" replace />
+                  },
+                  {
+                    path: 'general',
+                    element: <RepoSettingsGeneralPageContainer />,
+                    handle: {
+                      breadcrumb: () => <Text>General</Text>
+                    }
+                  },
+                  {
+                    path: 'rules',
+                    element: <RepoSettingsGeneralPageContainer />,
+                    handle: {
+                      breadcrumb: () => <Text>Rules</Text>
+                    }
+                  },
+                  {
+                    path: 'rules/create',
+                    element: <RepoBranchSettingsRulesPageContainer />,
+                    children: [
+                      {
+                        path: ':identifier',
+                        element: <RepoBranchSettingsRulesPageContainer />
+                      }
+                    ]
+                  },
+                  {
+                    path: 'webhooks',
+                    element: <WebhookListPage />,
+                    handle: {
+                      breadcrumb: () => <Text>Webhooks</Text>
+                    }
+                  },
+                  {
+                    path: 'webhooks/create',
+                    element: <CreateWebhookContainer />,
+                    children: [
+                      {
+                        path: ':webhookId',
+                        element: <CreateWebhookContainer />
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        path: ':spaceId/settings',
+        element: <ProjectSettingsLayout />,
+        handle: {
+          breadcrumb: () => <Text>Settings</Text>
+        },
+        children: [
+          {
+            index: true,
+            element: <Navigate to="general" replace />
+          },
+          {
+            path: 'general',
+            element: <>General</>,
+            handle: {
+              breadcrumb: () => <Text>General</Text>
+            }
+          },
+          {
+            path: 'members',
+            element: <ProjectMemberListPage />,
+            handle: {
+              breadcrumb: () => <Text>Members</Text>
+            }
+          }
+        ]
+      }
+    ]
+  },
+  {
+    path: 'create',
+    element: <CreateProject />,
+    handle: {
+      breadcrumb: () => <Text>Create project</Text>
+    },
+    children: []
+  },
+  {
+    path: 'repos',
+    element: (
+      <SandboxLayout.Main>
+        <h1>Repo</h1>
+      </SandboxLayout.Main>
+    )
+  },
+  {
+    path: 'pipelines',
+    element: (
+      <SandboxLayout.Main>
+        <h1>pipelines</h1>
+      </SandboxLayout.Main>
+    )
+  },
+  {
+    path: 'executions',
+    element: (
+      <SandboxLayout.Main>
+        <h1>executions</h1>
+      </SandboxLayout.Main>
+    )
+  },
+  {
+    path: 'databases',
+    element: (
+      <SandboxLayout.Main>
+        <h1>databases</h1>
+      </SandboxLayout.Main>
+    )
+  },
+  {
+    path: 'signin',
+    element: <SignIn />
+  },
+  {
+    path: 'signup',
+    element: <SignUp />
+  },
+  {
+    path: 'settings',
+    element: <ProfileSettingsLayout />,
+    handle: {
+      breadcrumb: () => <Text>Settings</Text>
+    },
+    children: [
+      {
+        index: true,
+        element: <Navigate to="general" replace />
+      },
+      {
+        path: 'general',
+        element: <SettingsProfileGeneralPage />,
+        handle: {
+          breadcrumb: () => <Text>General</Text>
+        }
+      },
+      {
+        path: 'keys',
+        element: <SettingsProfileKeysPage />,
+        handle: {
+          breadcrumb: () => <Text>Keys</Text>
+        }
+      }
+    ]
+  },
+  {
+    path: 'admin/default-settings',
+    element: <UserManagementPageContainer />
+  },
+  {
+    path: 'theme',
+    element: <ProfileSettingsThemePage />
+  },
+  {
+    path: 'logout',
+    element: <Logout />
+  },
+  {
+    path: 'chaos',
+    element: <EmptyPage pathName="Chaos Engineering" />
+  },
+  {
+    path: 'artifacts',
+    element: <EmptyPage pathName="Artifacts" />
+  },
+  {
+    path: 'secrets',
+    element: <EmptyPage pathName="Secrets" />
+  },
+  {
+    path: 'connectors',
+    element: <EmptyPage pathName="Connectors" />
+  },
+  {
+    path: 'continuous-delivery-gitops',
+    element: <EmptyPage pathName="Continuous Delivery Gitops" />
+  },
+  {
+    path: 'continuous-integration',
+    element: <EmptyPage pathName="Continuous Integration" />
+  },
+  {
+    path: 'feature-flags',
+    element: <EmptyPage pathName="Feature Flags" />
+  },
+  {
+    path: 'infrastructure-as-code',
+    element: <EmptyPage pathName="Infrastructure as Code" />
+  },
+  {
+    path: 'service-reliability',
+    element: <EmptyPage pathName="Service Reliability" />
+  },
+  {
+    path: 'developer/portal',
+    element: <EmptyPage pathName="Internal Developer Portal" />
+  },
+  {
+    path: 'developer/environments',
+    element: <EmptyPage pathName="Environments" />
+  },
+  {
+    path: 'developer/insights',
+    element: <EmptyPage pathName="Software Engineering Insights" />
+  },
+  {
+    path: 'infrastructure',
+    element: <EmptyPage pathName="Infrastructure as Code" />
+  },
+  {
+    path: 'code-repository',
+    element: <EmptyPage pathName="Code Repository" />
+  },
+  {
+    path: 'supply-chain',
+    element: <EmptyPage pathName="Software Supply Chain Assurance" />
+  },
+  {
+    path: 'security-tests',
+    element: <EmptyPage pathName="Security Testing Orchestration" />
+  },
+  {
+    path: 'cloud-costs',
+    element: <EmptyPage pathName="Cloud Cost Management" />
+  },
+  {
+    path: 'incidents',
+    element: <EmptyPage pathName="Incidents" />
+  },
+  {
+    path: 'dashboards',
+    element: <EmptyPage pathName="Dashboards" />
+  }
+]
diff --git a/apps/gitness/src/styles.css b/apps/gitness/src/styles.css
index 8ed79197f..521b57531 100644
--- a/apps/gitness/src/styles.css
+++ b/apps/gitness/src/styles.css
@@ -3,3 +3,11 @@
 @import '@harnessio/canary/src/styles.css'; */
 
 @import 'highlight.js/styles/atom-one-dark.css';
+
+:root {
+  --breadcrumbs-height: 55px;
+}
+
+.top-breadcrumbs {
+  top: var(--breadcrumbs-height);
+}
diff --git a/packages/ui/src/components/breadcrumb.tsx b/packages/ui/src/components/breadcrumb.tsx
index 68f88918f..22cada0b1 100644
--- a/packages/ui/src/components/breadcrumb.tsx
+++ b/packages/ui/src/components/breadcrumb.tsx
@@ -62,9 +62,9 @@ BreadcrumbPage.displayName = 'BreadcrumbPage'
 type BreadcrumbSeparatorProps = ComponentProps<'li'>
 
 const BreadcrumbSeparator = ({ children, className, ...props }: BreadcrumbSeparatorProps) => (
-  <li role="presentation" aria-hidden="true" className={cn('[&>svg]:size-3.5', className)} {...props}>
+  <span role="presentation" aria-hidden="true" className={cn('[&>svg]:size-3.5', className)} {...props}>
     {children ?? <ChevronRightIcon />}
-  </li>
+  </span>
 )
 BreadcrumbSeparator.displayName = 'BreadcrumbSeparator'