diff --git a/frontend/app/[team]/layout.tsx b/frontend/app/[team]/layout.tsx
index c0c4a0e63..7718eef7b 100644
--- a/frontend/app/[team]/layout.tsx
+++ b/frontend/app/[team]/layout.tsx
@@ -52,7 +52,7 @@ export default function RootLayout({
       )}
     >
       {activeOrganisation && <UnlockKeyringDialog organisation={activeOrganisation} />}
-      {showNav && <NavBar team={params.team} />}
+      {showNav && <NavBar />}
       {showNav && <Sidebar />}
       <div className="grid h-screen">
         <div></div>
diff --git a/frontend/app/webauth/[requestCode]/page.tsx b/frontend/app/webauth/[requestCode]/page.tsx
index eb0cc1312..9013555ed 100644
--- a/frontend/app/webauth/[requestCode]/page.tsx
+++ b/frontend/app/webauth/[requestCode]/page.tsx
@@ -2,7 +2,6 @@
 
 import { OrganisationType } from '@/apollo/graphql'
 import { Button } from '@/components/common/Button'
-import { HeroPattern } from '@/components/common/HeroPattern'
 import { Input } from '@/components/common/Input'
 import Spinner from '@/components/common/Spinner'
 import OnboardingNavbar from '@/components/layout/OnboardingNavbar'
@@ -31,7 +30,6 @@ import { useSession } from 'next-auth/react'
 import { useRouter } from 'next/navigation'
 import { useContext, useEffect, useState } from 'react'
 import { FaChevronRight, FaExclamationTriangle, FaCheckCircle, FaShieldAlt } from 'react-icons/fa'
-import { MdContentCopy } from 'react-icons/md'
 import { SiGithub, SiGnometerminal, SiSlack } from 'react-icons/si'
 import { toast } from 'react-toastify'
 
@@ -325,7 +323,8 @@ export default function WebAuth({ params }: { params: { requestCode: string } })
               CLI Authentication failed
             </h1>
             <p className="text-neutral-500 text-base">
-              CLI authentication could not be completed from this page. Please follow these steps to retry the authentication:
+              CLI authentication could not be completed from this page. Please follow these steps to
+              retry the authentication:
             </p>
           </div>
 
@@ -336,7 +335,8 @@ export default function WebAuth({ params }: { params: { requestCode: string } })
                   1
                 </span>
                 <p className="text-black dark:text-white">
-                  Exit out of the CLI by pressing <code className="font-mono font-bold">Ctrl+C</code>
+                  Exit out of the CLI by pressing{' '}
+                  <code className="font-mono font-bold">Ctrl+C</code>
                 </p>
               </div>
             </div>
@@ -346,7 +346,10 @@ export default function WebAuth({ params }: { params: { requestCode: string } })
                 <span className="flex h-6 w-6 items-center justify-center rounded-full bg-neutral-500/20 text-sm font-medium">
                   2
                 </span>
-                <p className="text-black dark:text-white">Retry authentication manually via the <code className="font-mono font-bold">token</code> mode:</p>
+                <p className="text-black dark:text-white">
+                  Retry authentication manually via the{' '}
+                  <code className="font-mono font-bold">token</code> mode:
+                </p>
               </div>
               <CliCommand command="auth --mode token" />
               <div className="pl-8 text-neutral-500 text-sm space-y-2">
@@ -356,7 +359,13 @@ export default function WebAuth({ params }: { params: { requestCode: string } })
                       Choose your Phase instance type as: <b>☁️ Phase Cloud</b>
                     </li>
                     <li>
-                      Enter your email address: <code className="text-emerald-500 cursor-pointer font-mono" onClick={() => handleCopy(session?.user?.email || '')}>{session?.user?.email}</code>
+                      Enter your email address:{' '}
+                      <code
+                        className="text-emerald-500 cursor-pointer font-mono"
+                        onClick={() => handleCopy(session?.user?.email || '')}
+                      >
+                        {session?.user?.email}
+                      </code>
                     </li>
                   </ul>
                 ) : (
@@ -365,10 +374,22 @@ export default function WebAuth({ params }: { params: { requestCode: string } })
                       Choose your Phase instance type as: <b>🛠️ Self Hosted</b>
                     </li>
                     <li>
-                      Enter the host: <code className="text-emerald-500 cursor-pointer font-mono" onClick={() => handleCopy(getHostname() || '')}>{getHostname()}</code>
+                      Enter the host:{' '}
+                      <code
+                        className="text-emerald-500 cursor-pointer font-mono"
+                        onClick={() => handleCopy(getHostname() || '')}
+                      >
+                        {getHostname()}
+                      </code>
                     </li>
                     <li>
-                      Enter your email address: <code className="text-emerald-500 cursor-pointer font-mono" onClick={() => handleCopy(session?.user?.email || '')}>{session?.user?.email}</code>
+                      Enter your email address:{' '}
+                      <code
+                        className="text-emerald-500 cursor-pointer font-mono"
+                        onClick={() => handleCopy(session?.user?.email || '')}
+                      >
+                        {session?.user?.email}
+                      </code>
                     </li>
                   </ul>
                 )}
@@ -384,20 +405,16 @@ export default function WebAuth({ params }: { params: { requestCode: string } })
                 </p>
               </div>
               <div className="ph-no-capture">
-                <CliCommand
-                  command={userToken}
-                  prefix=""
-                  wrap={true}
-                />
+                <CliCommand command={userToken} prefix="" wrap={true} />
               </div>
             </div>
           </div>
 
           <div className="space-y-4 pt-16">
             <div className="text-center">
-              <a 
-                href="https://docs.phase.dev/cli/commands#auth" 
-                target="_blank" 
+              <a
+                href="https://docs.phase.dev/cli/commands#auth"
+                target="_blank"
                 rel="noreferrer"
                 className="text-sm text-emerald-500 hover:text-emerald-400 transition ease"
               >
diff --git a/frontend/components/layout/Navbar.tsx b/frontend/components/layout/Navbar.tsx
index 728b0efcf..6350df6ef 100644
--- a/frontend/components/layout/Navbar.tsx
+++ b/frontend/components/layout/Navbar.tsx
@@ -1,21 +1,31 @@
-import UserMenu from '../UserMenu'
+'use client'
+
 import { useLazyQuery, useQuery } from '@apollo/client'
+import { useContext, useEffect, useMemo } from 'react'
+import Link from 'next/link'
+import { startCase } from 'lodash'
+import { useSearchParams } from 'next/navigation'
+
 import { GetApps } from '@/graphql/queries/getApps.gql'
 import { GetAppEnvironments } from '@/graphql/queries/secrets/getAppEnvironments.gql'
-import { usePathname } from 'next/navigation'
-import { useContext, useEffect } from 'react'
 import { AppType, EnvironmentType } from '@/apollo/graphql'
-import Link from 'next/link'
+import { organisationContext } from '@/contexts/organisationContext'
+import { userHasPermission } from '@/utils/access/permissions'
+import { generateBreadcrumbs, generatePageTitle, NavigationContext } from '@/utils/navigation'
+
 import { Button } from '../common/Button'
 import { StatusIndicator } from '../common/StatusIndicator'
-import { organisationContext } from '@/contexts/organisationContext'
-import clsx from 'clsx'
 import { LogoMark } from '../common/LogoMark'
 import CommandPalette from '../common/CommandPalette'
-import { userHasPermission } from '@/utils/access/permissions'
+import UserMenu from '../UserMenu'
+
+import { useParsedRoute } from '@/utils/route'
 
-export const NavBar = (props: { team: string }) => {
+export const NavBar = () => {
   const { activeOrganisation: organisation } = useContext(organisationContext)
+  const { team, context, appId, envId, page, subPage } = useParsedRoute()
+  const searchParams = useSearchParams()
+  const tab = searchParams?.get('tab')
 
   const userCanReadApps = userHasPermission(organisation?.role?.permissions, 'Apps', 'read')
 
@@ -25,87 +35,74 @@ export const NavBar = (props: { team: string }) => {
     },
     skip: !organisation || !userCanReadApps,
   })
-  const [getAppEnvs, { data: appEnvsData }] = useLazyQuery(GetAppEnvironments)
-
-  const orgContext = usePathname()?.split('/')[2]
 
-  const apps = appsData?.apps as AppType[]
+  const [getAppEnvs, { data: appEnvsData }] = useLazyQuery(GetAppEnvironments)
 
+  const apps = (appsData?.apps as AppType[]) || []
   const envs: EnvironmentType[] = appEnvsData?.appEnvironments ?? []
 
-  const appId = usePathname()?.split('/')[3]
-
-  const envId = usePathname()?.split('/')[5]
-
-  const appPage = usePathname()?.split('/')[4]
-
-  const activeApp = orgContext === 'apps' ? apps?.find((app) => app.id === appId) : undefined
+  const activeApp = context === 'apps' ? apps.find((app) => app.id === appId) : undefined
+  const activeEnv = activeApp ? envs.find((env) => env.id === envId) : undefined
 
-  useEffect(() => {
-    if (activeApp) getAppEnvs({ variables: { appId: activeApp.id } })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeApp])
+  // Create navigation context
+  const navigationContext: NavigationContext = useMemo(
+    () => ({
+      team,
+      context,
+      appId,
+      envId,
+      page,
+      subPage,
+      activeApp,
+      activeEnv,
+    }),
+    [team, context, appId, envId, page, subPage, activeApp, activeEnv]
+  )
 
-  const activeEnv = activeApp ? envs.find((env) => env.id === envId) : undefined
+  const breadcrumbs = generateBreadcrumbs(navigationContext)
 
-  return (
-    <header className="pr-8 pl-4 w-full h-16 border-b border-neutral-500/20 fixed top-0 z-10 grid grid-cols-3 gap-4 items-center justify-between text-neutral-500 font-medium text-sm bg-neutral-100/70 dark:bg-neutral-800/20 backdrop-blur-md">
+  const BreadCrumbs = () => {
+    return (
       <div className="flex items-center gap-2 min-w-0 overflow-hidden">
         <Link href="/" className="shrink-0">
           <LogoMark className="size-8 fill-black dark:fill-white" />
         </Link>
-        <span className="shrink-0">/</span>
-
-        <Link
-          href={`/${props.team}`}
-          className={clsx(
-            'overflow-hidden text-ellipsis whitespace-nowrap',
-            orgContext ? 'text-neutral-500' : 'text-black dark:text-white'
-          )}
-        >
-          {props.team}
-        </Link>
 
-        {activeApp && <span className="shrink-0">/</span>}
-
-        {activeApp &&
-          (appPage ? (
-            <Link
-              href={`/${props.team}/apps/${activeApp.id}`}
-              className="overflow-hidden text-ellipsis whitespace-nowrap"
-            >
-              {activeApp.name}
-            </Link>
-          ) : (
-            <span className="text-black dark:text-white overflow-hidden text-ellipsis whitespace-nowrap">
-              {activeApp.name}
-            </span>
-          ))}
-
-        {activeApp && appPage && <span className="shrink-0">/</span>}
-
-        {activeApp && appPage && (
-          <span
-            className={clsx(
-              'capitalize overflow-hidden text-ellipsis whitespace-nowrap',
-              activeEnv ? 'text-neutral-500' : 'text-black dark:text-white'
+        {breadcrumbs.map((crumb, index) => (
+          <div key={index} className="flex items-center gap-2 text-xs">
+            <span className="shrink-0">/</span>
+            {crumb.isLink && crumb.href ? (
+              <Link
+                href={crumb.href}
+                className="capitalize overflow-hidden text-ellipsis whitespace-nowrap text-zinc-500"
+              >
+                {startCase(crumb.label)}
+              </Link>
+            ) : (
+              <span className="capitalize text-zinc-900 dark:text-zinc-100 overflow-hidden text-ellipsis whitespace-nowrap">
+                {startCase(crumb.label)}
+              </span>
             )}
-          >
-            {appPage}
-          </span>
-        )}
+          </div>
+        ))}
+      </div>
+    )
+  }
 
-        {activeEnv && <span className="shrink-0">/</span>}
+  useEffect(() => {
+    if (activeApp) {
+      getAppEnvs({ variables: { appId: activeApp.id } })
+    }
+  }, [activeApp, getAppEnvs])
 
-        {activeEnv && (
-          <span className="text-black dark:text-white overflow-hidden text-ellipsis whitespace-nowrap">
-            {activeEnv.name}
-          </span>
-        )}
+  // Update page title using the utility
+  useEffect(() => {
+    document.title = generatePageTitle(navigationContext)
+  }, [navigationContext, tab])
 
-        {!activeApp && orgContext && <span className="shrink-0">/</span>}
-        {!activeApp && <span className="capitalize text-black dark:text-white">{orgContext}</span>}
-      </div>
+  return (
+    <header className="pr-8 pl-4 w-full h-16 border-b border-neutral-500/20 fixed top-0 z-10 grid grid-cols-3 gap-4 items-center justify-between text-neutral-500 font-medium text-sm bg-neutral-100/70 dark:bg-neutral-800/20 backdrop-blur-md">
+      <BreadCrumbs />
 
       <div className="flex justify-center w-full">
         <CommandPalette />
@@ -113,7 +110,6 @@ export const NavBar = (props: { team: string }) => {
 
       <div className="flex gap-4 items-center justify-end">
         <StatusIndicator />
-
         <Link href="https://docs.phase.dev" target="_blank" className="hidden lg:block">
           <Button variant="secondary">Docs</Button>
         </Link>
diff --git a/frontend/components/layout/OnboardingNavbar.tsx b/frontend/components/layout/OnboardingNavbar.tsx
index 9393f59e7..e171cd348 100644
--- a/frontend/components/layout/OnboardingNavbar.tsx
+++ b/frontend/components/layout/OnboardingNavbar.tsx
@@ -1,8 +1,33 @@
+'use client'
+
 import Link from 'next/link'
+import { useEffect } from 'react'
+import { usePathname } from 'next/navigation'
 import UserMenu from '../UserMenu'
 import { LogoWordMark } from '../common/LogoWordMark'
+import { generatePageTitle } from '@/utils/navigation'
 
 const OnboardingNavbar = () => {
+  const pathname = usePathname()
+
+  useEffect(() => {
+    // Parse the current route to determine page title
+    const pathSegments = (pathname ?? '').split('/').filter(Boolean)
+    let route = null
+    let routeParam = null
+
+    if (pathSegments.length > 0) {
+      route = pathSegments[0]
+      if (pathSegments.length > 1) {
+        routeParam = pathSegments[1]
+      }
+    }
+
+    // Set page title based on route
+    const title = generatePageTitle({ route, routeParam })
+    document.title = title
+  }, [pathname])
+
   return (
     <header className="fixed z-20 w-full" data-testid="navbar">
       <nav className="mx-auto flex w-full items-center justify-between p-4">
diff --git a/frontend/utils/copy.ts b/frontend/utils/copy.ts
index 1317bdb61..0c0ee94eb 100644
--- a/frontend/utils/copy.ts
+++ b/frontend/utils/copy.ts
@@ -108,11 +108,20 @@ export const stringContainsCharacters = (value: string) => {
   return isValid
 }
 
+/**
+ * Regex to check if a string is a valid UUID
+ *
+ * @param {string} value
+ * @returns {boolean}
+ */
+export const isUUID = (value: string) =>
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(value)
+
 /**
  * Generates a random alphanumeric string of specified length.
- * @param {string} min Minimum length of the string (default is 6)
- * @param {string} max Maximum length of the string (default is 18)
- * @returns  A random string
+ * @param {number} min Minimum length of the string (default is 6)
+ * @param {number} max Maximum length of the string (default is 18)
+ * @returns {string} A random string
  */
 export const randomString = (min = 6, max = 18) => {
   const length = Math.floor(Math.random() * (max - min + 1)) + min
diff --git a/frontend/utils/navigation.ts b/frontend/utils/navigation.ts
new file mode 100644
index 000000000..c995240e9
--- /dev/null
+++ b/frontend/utils/navigation.ts
@@ -0,0 +1,138 @@
+import { startCase } from 'lodash'
+import { AppType, EnvironmentType } from '@/apollo/graphql'
+import { isUUID } from '@/utils/copy'
+
+export type NavigationItem = {
+  label: string
+  href?: string
+  isLink?: boolean
+}
+
+export type NavigationContext = {
+  team?: string | null
+  context?: string | null
+  appId?: string | null
+  envId?: string | null
+  page?: string | null
+  subPage?: string | null
+  activeApp?: AppType
+  activeEnv?: EnvironmentType
+  // Add support for non-team routes
+  route?: string | null // e.g., 'signup', 'webauth', 'lockbox'
+  routeParam?: string | null // e.g., boxId, requestCode
+}
+
+export const generateBreadcrumbs = (ctx: NavigationContext): NavigationItem[] => {
+  const { team, context, page, subPage, activeApp, activeEnv, route, routeParam } = ctx
+
+  // Handle non-team routes first
+  if (route) {
+    const breadcrumbs: NavigationItem[] = []
+
+    switch (route) {
+      case 'signup':
+        breadcrumbs.push({ label: 'Sign Up', isLink: false })
+        break
+      case 'login':
+        breadcrumbs.push({ label: 'Login', isLink: false })
+        break
+      case 'webauth':
+        breadcrumbs.push({ label: 'WebAuth', isLink: false })
+        break
+      case 'lockbox':
+        breadcrumbs.push({ label: 'Lockbox', isLink: false })
+        break
+      case 'invite':
+        breadcrumbs.push({ label: 'Invitation', isLink: false })
+        break
+      case 'ip-restricted':
+        breadcrumbs.push({ label: 'Access Restricted', isLink: false })
+        break
+      default:
+        breadcrumbs.push({ label: startCase(route), isLink: false })
+    }
+
+    return breadcrumbs
+  }
+
+  // Team-based routes (existing logic)
+  const breadcrumbs: NavigationItem[] = [
+    { label: team ?? '', href: `/${team}`, isLink: Boolean(team) },
+  ]
+
+  if (activeApp) {
+    // App name should only be clickable if we're not at the app home
+    const isAtAppHome = !page && !activeEnv
+    breadcrumbs.push({
+      label: activeApp.name,
+      href: isAtAppHome ? undefined : `/${team}/apps/${activeApp.id}`,
+      isLink: !isAtAppHome, // Only clickable when not at app home
+    })
+  }
+
+  if (!activeApp && context && page === undefined) {
+    breadcrumbs.push({
+      label: context,
+      isLink: false,
+    })
+  }
+
+  // Handle different app sections
+  if (page) {
+    if (page === 'environments' && activeEnv) {
+      // For environment routes: /apps/[app]/environments/[environment]/[...path]
+      breadcrumbs.push({
+        label: 'environments',
+        href: activeApp ? `/${team}/apps/${activeApp.id}` : undefined,
+        isLink: Boolean(activeApp),
+      })
+      breadcrumbs.push({
+        label: activeEnv.name,
+        isLink: false,
+      })
+      // Add folder path if present
+      if (subPage && !isUUID(subPage)) {
+        breadcrumbs.push({
+          label: subPage,
+          isLink: false,
+        })
+      }
+    } else {
+      // For other app routes: /apps/[app]/[page]
+      breadcrumbs.push({
+        label: page,
+        isLink: Boolean(activeApp),
+      })
+      // Add subPage if present and not in environments
+      if (subPage && !isUUID(subPage)) {
+        breadcrumbs.push({
+          label: subPage,
+          isLink: false,
+        })
+      }
+    }
+  } else if (activeEnv && !page) {
+    breadcrumbs.push({
+      label: activeEnv.name,
+      isLink: false,
+    })
+  }
+
+  return breadcrumbs
+}
+
+export const generatePageTitle = (ctx: NavigationContext): string => {
+  const breadcrumbs = generateBreadcrumbs(ctx)
+
+  // Filter out empty labels and reverse for title (most specific first)
+  const titleParts = breadcrumbs
+    .filter((crumb) => crumb.label && crumb.label.trim())
+    .map((crumb) => startCase(crumb.label))
+    .reverse()
+
+  if (titleParts.length === 0) {
+    return 'Phase Console'
+  }
+
+  return `${titleParts.join(' · ')} | Phase Console`
+}
diff --git a/frontend/utils/route.ts b/frontend/utils/route.ts
new file mode 100644
index 000000000..d7d179e83
--- /dev/null
+++ b/frontend/utils/route.ts
@@ -0,0 +1,42 @@
+'use client'
+
+import { useParams, usePathname } from 'next/navigation'
+
+export function useParsedRoute() {
+  const params = useParams()
+  const pathname = usePathname()
+  const segments = pathname?.split('/').filter(Boolean) || []
+
+  const team = params?.team as string | undefined
+
+  const context = segments[1] // apps, access, integrations, etc.
+
+  const appId = context === 'apps' ? segments[2] : undefined
+
+  // envId only appears for: /apps/[app]/environments/[envId]/...
+  const envId = context === 'apps' && segments[3] === 'environments' ? segments[4] : undefined
+
+  const page =
+    context === 'apps'
+      ? segments[3] === 'environments'
+        ? segments[5] // in /apps/[app]/environments/[envId]/<page>
+        : segments[3] // in /apps/[app]/<page>
+      : segments[2] // in /access/<page>, /integrations/<page>
+
+  const subPage =
+    context === 'apps'
+      ? segments[3] === 'environments'
+        ? segments[6] // deeper nesting
+        : segments[4]
+      : segments[3]
+
+  return {
+    pathname,
+    team,
+    context, // apps | access | integrations
+    appId, // uuid if apps
+    envId, // uuid if environments route
+    page, // syncing | logs | members | etc.
+    subPage, // tokens | additional nesting
+  }
+}