diff --git a/deployables/app/app/components/pilotStatus/PilotStatus.tsx b/deployables/app/app/components/pilotStatus/PilotStatus.tsx
index 1093a42ec..d579314a2 100644
--- a/deployables/app/app/components/pilotStatus/PilotStatus.tsx
+++ b/deployables/app/app/components/pilotStatus/PilotStatus.tsx
@@ -1,9 +1,6 @@
 import { GhostButton } from '@zodiac/ui'
 import { Power, PowerOff } from 'lucide-react'
-import { useState } from 'react'
-import { useConnectChangeOnPilotEvents } from './useConnectChangeOnPilotEvents'
-import { useDisconnectWhenUnreachable } from './useDisconnectWhenUnreachable'
-import { usePingWhileDisconnected } from './usePingWhileDisconnected'
+import { useConnected } from './PilotStatusContext'
 
 export const PilotStatus = () => {
   const connected = useConnected()
@@ -32,18 +29,3 @@ export const PilotStatus = () => {
     </div>
   )
 }
-
-const useConnected = () => {
-  const [connected, setConnected] = useState(false)
-
-  useConnectChangeOnPilotEvents({
-    onConnect: () => setConnected(true),
-    onDisconnect: () => setConnected(false),
-  })
-  usePingWhileDisconnected(connected, { onConnect: () => setConnected(true) })
-  useDisconnectWhenUnreachable(connected, {
-    onDisconnect: () => setConnected(false),
-  })
-
-  return connected
-}
diff --git a/deployables/app/app/components/pilotStatus/PilotStatusContext.tsx b/deployables/app/app/components/pilotStatus/PilotStatusContext.tsx
new file mode 100644
index 000000000..fb64fc079
--- /dev/null
+++ b/deployables/app/app/components/pilotStatus/PilotStatusContext.tsx
@@ -0,0 +1,34 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  type PropsWithChildren,
+} from 'react'
+import { useConnectChangeOnPilotEvents } from './useConnectChangeOnPilotEvents'
+import { useDisconnectWhenUnreachable } from './useDisconnectWhenUnreachable'
+import { usePingWhileDisconnected } from './usePingWhileDisconnected'
+
+const PilotStatusContext = createContext(false)
+
+export const ProvidePilotStatus = ({ children }: PropsWithChildren) => (
+  <PilotStatusContext value={useUpdatedConnectionStatus()}>
+    {children}
+  </PilotStatusContext>
+)
+
+const useUpdatedConnectionStatus = () => {
+  const [connected, setConnected] = useState(false)
+
+  useConnectChangeOnPilotEvents({
+    onConnect: () => setConnected(true),
+    onDisconnect: () => setConnected(false),
+  })
+  usePingWhileDisconnected(connected, { onConnect: () => setConnected(true) })
+  useDisconnectWhenUnreachable(connected, {
+    onDisconnect: () => setConnected(false),
+  })
+
+  return connected
+}
+
+export const useConnected = () => useContext(PilotStatusContext)
diff --git a/deployables/app/app/components/pilotStatus/index.ts b/deployables/app/app/components/pilotStatus/index.ts
index 2f227b4a6..c376c2043 100644
--- a/deployables/app/app/components/pilotStatus/index.ts
+++ b/deployables/app/app/components/pilotStatus/index.ts
@@ -1 +1,2 @@
 export { PilotStatus } from './PilotStatus'
+export { ProvidePilotStatus, useConnected } from './PilotStatusContext'
diff --git a/deployables/app/app/routes/layout.tsx b/deployables/app/app/routes/layout.tsx
index c9e866844..c9d021684 100644
--- a/deployables/app/app/routes/layout.tsx
+++ b/deployables/app/app/routes/layout.tsx
@@ -1,52 +1,59 @@
-import { MinimumVersion, Navigation, PilotStatus } from '@/components'
+import {
+  MinimumVersion,
+  Navigation,
+  PilotStatus,
+  ProvidePilotStatus,
+} from '@/components'
 import { PilotType, ZodiacOsPlain } from '@zodiac/ui'
 import { ArrowUpFromLine, Edit, Landmark, Plus } from 'lucide-react'
 import { Outlet } from 'react-router'
 
 const Sidebar = () => {
   return (
-    <div className="flex h-full flex-1">
-      <div className="flex w-64 flex-col border-r border-zinc-200 bg-zinc-50 dark:border-zinc-800/80 dark:bg-zinc-950">
-        <div className="my-12 flex items-center justify-center gap-2">
-          <ZodiacOsPlain className="h-6" />
-          <PilotType className="h-7 dark:invert" />
-        </div>
-
-        <div className="flex-1">
-          <Navigation>
-            <Navigation.Section title="Tokens">
-              <Navigation.Link to="/tokens/send" icon={ArrowUpFromLine}>
-                Send tokens
-              </Navigation.Link>
-
-              <Navigation.Link to="/tokens/balances" icon={Landmark}>
-                Balances
-              </Navigation.Link>
-            </Navigation.Section>
-
-            <Navigation.Section title="Routes">
-              <Navigation.Link to="/new-route" icon={Plus}>
-                Create new route
-              </Navigation.Link>
-
-              <Navigation.Link to="/edit-route" icon={Edit}>
-                Edit a route
-              </Navigation.Link>
-            </Navigation.Section>
-          </Navigation>
-        </div>
+    <ProvidePilotStatus>
+      <div className="flex h-full flex-1">
+        <div className="flex w-64 flex-col border-r border-zinc-200 bg-zinc-50 dark:border-zinc-800/80 dark:bg-zinc-950">
+          <div className="my-12 flex items-center justify-center gap-2">
+            <ZodiacOsPlain className="h-6" />
+            <PilotType className="h-7 dark:invert" />
+          </div>
 
-        <MinimumVersion version="3.3.2">
-          <div className="flex justify-center py-8">
-            <PilotStatus />
+          <div className="flex-1">
+            <Navigation>
+              <Navigation.Section title="Tokens">
+                <Navigation.Link to="/tokens/send" icon={ArrowUpFromLine}>
+                  Send tokens
+                </Navigation.Link>
+
+                <Navigation.Link to="/tokens/balances" icon={Landmark}>
+                  Balances
+                </Navigation.Link>
+              </Navigation.Section>
+
+              <Navigation.Section title="Routes">
+                <Navigation.Link to="/new-route" icon={Plus}>
+                  Create new route
+                </Navigation.Link>
+
+                <Navigation.Link to="/edit-route" icon={Edit}>
+                  Edit a route
+                </Navigation.Link>
+              </Navigation.Section>
+            </Navigation>
           </div>
-        </MinimumVersion>
-      </div>
 
-      <div className="flex flex-1 flex-col">
-        <Outlet />
+          <MinimumVersion version="3.3.2">
+            <div className="flex justify-center py-8">
+              <PilotStatus />
+            </div>
+          </MinimumVersion>
+        </div>
+
+        <div className="flex flex-1 flex-col">
+          <Outlet />
+        </div>
       </div>
-    </div>
+    </ProvidePilotStatus>
   )
 }
 
diff --git a/deployables/app/e2e/edit-route/saveRoute.spec.ts b/deployables/app/e2e/edit-route/saveRoute.spec.ts
index 4f7b1363f..4cdc7c430 100644
--- a/deployables/app/e2e/edit-route/saveRoute.spec.ts
+++ b/deployables/app/e2e/edit-route/saveRoute.spec.ts
@@ -1,5 +1,4 @@
-import test, { expect } from '@playwright/test'
-import { loadExtension } from '../utils'
+import { expect, loadExtension, test } from '../utils'
 
 test.describe('Edit route', () => {
   test('it is possible to save a route', async ({ page }) => {
diff --git a/deployables/app/e2e/utils/fixture.ts b/deployables/app/e2e/utils/fixture.ts
index 36e87d394..0857aca72 100644
--- a/deployables/app/e2e/utils/fixture.ts
+++ b/deployables/app/e2e/utils/fixture.ts
@@ -8,7 +8,7 @@ export const test = base.extend<{
 }>({
   context: async ({}, use) => {
     const pathToExtension = fileURLToPath(
-      new URL('../../public', import.meta.url),
+      new URL('../../../extension/public', import.meta.url),
     )
 
     const context = await chromium.launchPersistentContext('', {
diff --git a/deployables/app/e2e/utils/loadExtension.ts b/deployables/app/e2e/utils/loadExtension.ts
index c75476d14..90cf7bfd0 100644
--- a/deployables/app/e2e/utils/loadExtension.ts
+++ b/deployables/app/e2e/utils/loadExtension.ts
@@ -1,10 +1,15 @@
 import type { Page } from '@playwright/test'
+import { expect } from './fixture'
 import { getExtensionPage } from './getExtensionPage'
 
 export const loadExtension = async (page: Page) => {
-  await page.goto('/')
+  await page.getByRole('button', { name: 'Open Pilot' }).click()
 
-  await page.getByRole('button', { name: 'Open extension' }).click()
+  const extension = await getExtensionPage(page)
 
-  return getExtensionPage(page)
+  await expect(
+    extension.getByRole('heading', { name: 'Welcome to Zodiac Pilot' }),
+  ).toBeInViewport()
+
+  return extension
 }
diff --git a/deployables/app/package.json b/deployables/app/package.json
index c17167ba3..a79550fb6 100644
--- a/deployables/app/package.json
+++ b/deployables/app/package.json
@@ -7,7 +7,7 @@
     "dev": "cross-env NODE_ENV=development node ./dev-server.js",
     "check-types": "react-router typegen && tsc -b",
     "test": "cross-env NODE_ENV=test vitest",
-    "test:e2e": "playwright test --headed",
+    "test:e2e": "PW_CHROMIUM_ATTACH_TO_OTHER=1 playwright test --headed",
     "test:e2e:ui": "pnpm test:e2e --ui",
     "lint": "eslint . --max-warnings=0"
   },
diff --git a/deployables/extension/src/panel/pages/$activeRouteId/transactions/RouteBubble/index.tsx b/deployables/extension/src/panel/pages/$activeRouteId/transactions/RouteBubble/index.tsx
index 11cd9fe86..9528c03ef 100644
--- a/deployables/extension/src/panel/pages/$activeRouteId/transactions/RouteBubble/index.tsx
+++ b/deployables/extension/src/panel/pages/$activeRouteId/transactions/RouteBubble/index.tsx
@@ -56,9 +56,9 @@ export const RouteBubble = () => {
           pilotAddress={pilotAddress}
         />
 
-        <p className="overflow-hidden text-ellipsis whitespace-nowrap">
+        <h1 className="overflow-hidden text-ellipsis whitespace-nowrap">
           {route.label || <span className="italic">Unnamed route</span>}
-        </p>
+        </h1>
       </div>
 
       <div className="flex shrink-0">