diff --git a/extension/src/chains/const.ts b/extension/src/chains/const.ts
index be96c3a7..e4b2f027 100644
--- a/extension/src/chains/const.ts
+++ b/extension/src/chains/const.ts
@@ -2,6 +2,8 @@
 
 import { ChainId } from 'ser-kit'
 
+export const ETH_ZERO_ADDRESS = 'eth:0x0000000000000000000000000000000000000000'
+
 export const RPC: Record<ChainId, string> = {
   1: 'https://airlock.gnosisguild.org/api/v1/1/rpc',
   10: 'https://airlock.gnosisguild.org/api/v1/10/rpc',
diff --git a/extension/src/components/Button/index.tsx b/extension/src/components/Button/index.tsx
index 3464389c..c3354d05 100644
--- a/extension/src/components/Button/index.tsx
+++ b/extension/src/components/Button/index.tsx
@@ -4,13 +4,20 @@ import classes from './style.module.css'
 
 type ButtonProps = ComponentPropsWithoutRef<'button'> & {
   secondary?: boolean
+  fluid?: boolean
 }
 
-const Button = ({ className, secondary = false, ...rest }: ButtonProps) => (
+const Button = ({
+  className,
+  secondary = false,
+  fluid = false,
+  ...rest
+}: ButtonProps) => (
   <button
     className={cn(
-      'flex w-full items-center justify-center whitespace-nowrap border-[3px] border-double bg-gradient-to-r from-zodiac-dark-blue via-zodiac-light-blue to-zodiac-dark-blue p-2 font-spectral text-base text-white transition-all enabled:hover:cursor-pointer enabled:hover:border-zodiac-light-mustard disabled:opacity-60',
+      'flex items-center justify-center whitespace-nowrap border-[3px] border-double bg-gradient-to-r from-zodiac-dark-blue via-zodiac-light-blue to-zodiac-dark-blue p-2 font-spectral text-base text-white transition-all enabled:hover:cursor-pointer enabled:hover:border-zodiac-light-mustard disabled:opacity-60',
       secondary && 'bg-none',
+      fluid && 'flex-1',
       classes.button,
       className
     )}
diff --git a/extension/src/panel/app-routes/edit-route/EditRoute.tsx b/extension/src/panel/app-routes/edit-route/EditRoute.tsx
index c7580fcd..a9a06d12 100644
--- a/extension/src/panel/app-routes/edit-route/EditRoute.tsx
+++ b/extension/src/panel/app-routes/edit-route/EditRoute.tsx
@@ -1,82 +1,48 @@
-import {
-  Box,
-  Button,
-  Divider,
-  Field,
-  Flex,
-  IconButton,
-  useConfirmationModal,
-} from '@/components'
-import { ProviderType, Route } from '@/types'
-import { useRoute, useRoutes, useSelectedRouteId } from '@/zodiac-routes'
+import { Box, Divider, Field, Flex } from '@/components'
+import { LegacyConnection } from '@/types'
+import { INITIAL_DEFAULT_ROUTE, useZodiacRoutes } from '@/zodiac-routes'
 import { KnownContracts } from '@gnosis.pm/zodiac'
 import { ZeroAddress } from 'ethers'
 import React, { useState } from 'react'
-import { RiDeleteBinLine } from 'react-icons/ri'
-import { Link, useNavigate, useParams } from 'react-router-dom'
-import { ChainId } from 'ser-kit'
+import { RiArrowLeftSLine } from 'react-icons/ri'
+import { Link } from 'react-router-dom'
 import { MODULE_NAMES } from '../../../const'
 import { useSafeDelegates, useSafesWithOwner } from '../../integrations/safe'
 import {
   queryRolesV1MultiSend,
   queryRolesV2MultiSend,
 } from '../../integrations/zodiac/rolesMultisend'
-import { SupportedModuleType } from '../../integrations/zodiac/types'
 import { useZodiacModules } from '../../integrations/zodiac/useZodiacModules'
-import { useClearTransactions } from '../../state/transactionHooks'
 import { decodeRoleKey, encodeRoleKey } from '../../utils'
 import {
   asLegacyConnection,
   fromLegacyConnection,
 } from '../legacyConnectionMigrations'
+import { useConfirmClearTransactions } from '../useConfirmClearTransaction'
 import { AvatarInput } from './AvatarInput'
 import { ChainSelect } from './ChainSelect'
+import { LaunchButton } from './LaunchButton'
 import { ModSelect, NO_MODULE_OPTION } from './ModSelect'
+import { RemoveButton } from './RemoveButton'
 import classes from './style.module.css'
 import { useConnectionDryRun } from './useConnectionDryRun'
+import { useRouteId } from './useRouteId'
 import { ConnectWallet } from './wallet'
 
-type ConnectionPatch = {
-  label?: string
-  avatarAddress?: string
-  moduleAddress?: string
-  pilotAddress?: string
-  moduleType?: SupportedModuleType
-  roleId?: string
-  chainId?: ChainId
-  multisend?: string
-  multisendCallOnly?: string
-  providerType?: ProviderType
-}
-
-const ETH_ZERO_ADDRESS = 'eth:0x0000000000000000000000000000000000000000'
+type ConnectionPatch = Omit<Partial<LegacyConnection>, 'id' | 'lastUsed'>
 
 export const EditRoute = () => {
-  const [routes, saveRoute, removeRouteById] = useRoutes()
-  const { routeId } = useParams()
-  if (!routeId) {
-    throw new Error('Route ID is required')
-  }
-  const originalRoute =
-    routes.find((r) => r.id === routeId) ||
-    ({
-      id: routeId,
-      label: '',
-      providerType: ProviderType.InjectedWallet,
-      avatar: ETH_ZERO_ADDRESS,
-      initiator: undefined,
-      waypoints: undefined,
-    } satisfies Route)
-  const [route, setRoute] = useState(originalRoute)
+  const routes = useZodiacRoutes()
+  const routeId = useRouteId()
 
-  const navigate = useNavigate()
-
-  const [, setSelectedRouteId] = useSelectedRouteId()
-  const currentlySelected = useRoute()
+  const initialRouteState = routes.find((r) => r.id === routeId) || {
+    ...INITIAL_DEFAULT_ROUTE,
+    id: routeId,
+  }
+  const [currentRouteState, setRoute] = useState(initialRouteState)
 
-  const connection = asLegacyConnection(route)
-  const { label, avatarAddress, pilotAddress, moduleAddress, roleId } =
-    connection
+  const { label, avatarAddress, pilotAddress, moduleAddress, roleId, chainId } =
+    asLegacyConnection(currentRouteState)
 
   const { safes } = useSafesWithOwner(pilotAddress, routeId)
   const { delegates } = useSafeDelegates(avatarAddress, routeId)
@@ -90,26 +56,8 @@ export const EditRoute = () => {
     modules,
   } = useZodiacModules(avatarAddress, routeId)
 
-  const { hasTransactions, clearTransactions } = useClearTransactions()
-  const [getConfirmation, ConfirmationModal] = useConfirmationModal()
-
-  const confirmClearTransactions = async () => {
-    if (!hasTransactions) {
-      return true
-    }
-
-    const confirmation = await getConfirmation(
-      'Switching the Piloted Safe will empty your current transaction bundle.'
-    )
-
-    if (!confirmation) {
-      return false
-    }
-
-    clearTransactions()
-
-    return true
-  }
+  const [confirmClearTransactions, ConfirmationModal] =
+    useConfirmClearTransactions()
 
   const selectedModule = moduleAddress
     ? modules.find((mod) => mod.moduleAddress === moduleAddress)
@@ -122,32 +70,7 @@ export const EditRoute = () => {
     )
   }
 
-  const removeRoute = () => {
-    removeRouteById(routeId)
-    navigate('/routes')
-  }
-
-  const launchRoute = async () => {
-    if (route !== originalRoute) {
-      saveRoute(route)
-    }
-
-    // we continue working with the same avatar, so don't have to clear the recorded transaction
-    const keepTransactionBundle =
-      currentlySelected.route.avatar === route.avatar
-
-    const confirmed =
-      keepTransactionBundle || (await confirmClearTransactions())
-
-    if (!confirmed) {
-      return
-    }
-
-    setSelectedRouteId(route.id)
-    navigate('/')
-  }
-
-  const error = useConnectionDryRun(asLegacyConnection(route))
+  const error = useConnectionDryRun(asLegacyConnection(currentRouteState))
 
   const [roleIdError, setRoleIdError] = React.useState<string | null>(null)
 
@@ -162,33 +85,32 @@ export const EditRoute = () => {
 
   return (
     <>
-      <div className="relative flex flex-1 flex-col gap-4 px-6 py-8">
-        <Flex gap={2} direction="column">
-          <Flex gap={1} justifyContent="space-between" alignItems="baseline">
-            <Flex gap={1} direction="column" alignItems="baseline">
-              <h2>{route.label || 'New connection'}</h2>
-              <Link className={classes.backLink} to="/routes">
-                &#8592; All Connections
-              </Link>
-            </Flex>
+      <div className="relative flex flex-1 flex-col gap-4 px-6 pb-8 pt-6">
+        <div className="flex flex-col gap-1">
+          <Link
+            className="flex items-center gap-2 font-mono text-xs uppercase no-underline opacity-75"
+            to="/routes"
+          >
+            <RiArrowLeftSLine /> All Connections
+          </Link>
+
+          <div className="flex items-center justify-between gap-2">
+            <h2 className="text-2xl">
+              {currentRouteState.label || 'New connection'}
+            </h2>
+
             <div className="flex items-center gap-4">
-              <Button
-                className={classes.launchButton}
-                disabled={!connection.avatarAddress}
-                onClick={launchRoute}
-              >
-                {route !== originalRoute ? 'Save & Launch' : 'Launch'}
-              </Button>
-              <IconButton
-                onClick={removeRoute}
-                danger
-                className={classes.removeButton}
-              >
-                <RiDeleteBinLine size={24} title="Remove this connection" />
-              </IconButton>
+              <LaunchButton
+                disabled={!avatarAddress}
+                initialRouteState={initialRouteState}
+                currentRouteState={currentRouteState}
+                onNeedConfirmationToClearTransactions={confirmClearTransactions}
+              />
+
+              <RemoveButton />
             </div>
-          </Flex>
-        </Flex>
+          </div>
+        </div>
 
         <Divider />
 
@@ -218,13 +140,13 @@ export const EditRoute = () => {
             </Field>
             <Field label="Chain">
               <ChainSelect
-                value={connection.chainId}
+                value={chainId}
                 onChange={(chainId) => updateConnection({ chainId })}
               />
             </Field>
             <Field label="Pilot Account" labelFor="">
               <ConnectWallet
-                route={route}
+                route={currentRouteState}
                 onConnect={({ providerType, chainId, account }) => {
                   updateConnection({
                     providerType,
@@ -243,8 +165,7 @@ export const EditRoute = () => {
                 value={avatarAddress === ZeroAddress ? '' : avatarAddress || ''}
                 onChange={async (address) => {
                   const keepTransactionBundle =
-                    address.toLowerCase() ===
-                    connection.avatarAddress.toLowerCase()
+                    address.toLowerCase() === avatarAddress.toLowerCase()
                   const confirmed =
                     keepTransactionBundle || (await confirmClearTransactions())
 
@@ -291,17 +212,14 @@ export const EditRoute = () => {
                   if (mod?.type === KnownContracts.ROLES_V1) {
                     updateConnection({
                       multisend: await queryRolesV1MultiSend(
-                        connection.chainId,
+                        chainId,
                         mod.moduleAddress
                       ),
                     })
                   }
                   if (mod?.type === KnownContracts.ROLES_V2) {
                     updateConnection(
-                      await queryRolesV2MultiSend(
-                        connection.chainId,
-                        mod.moduleAddress
-                      )
+                      await queryRolesV2MultiSend(chainId, mod.moduleAddress)
                     )
                   }
                 }}
@@ -325,7 +243,7 @@ export const EditRoute = () => {
                 <input
                   type="text"
                   value={roleId}
-                  onChange={async (ev) => {
+                  onChange={(ev) => {
                     updateConnection({ roleId: ev.target.value })
                   }}
                   placeholder="0"
@@ -336,7 +254,7 @@ export const EditRoute = () => {
               <Field label="Role Key">
                 <input
                   type="text"
-                  key={route.id} // makes sure the defaultValue is reset when switching connections
+                  key={currentRouteState.id} // makes sure the defaultValue is reset when switching connections
                   defaultValue={decodedRoleKey || roleId}
                   onChange={(ev) => {
                     try {
diff --git a/extension/src/panel/app-routes/edit-route/LaunchButton.tsx b/extension/src/panel/app-routes/edit-route/LaunchButton.tsx
new file mode 100644
index 00000000..3ecdc7c7
--- /dev/null
+++ b/extension/src/panel/app-routes/edit-route/LaunchButton.tsx
@@ -0,0 +1,60 @@
+import { Button } from '@/components'
+import { ZodiacRoute } from '@/types'
+import {
+  useSaveZodiacRoute,
+  useSelectedRouteId,
+  useZodiacRoute,
+} from '@/zodiac-routes'
+import { useNavigate } from 'react-router-dom'
+
+type LaunchButtonProps = {
+  disabled: boolean
+
+  initialRouteState: ZodiacRoute
+  currentRouteState: ZodiacRoute
+
+  onNeedConfirmationToClearTransactions: () => Promise<boolean>
+}
+
+export const LaunchButton = ({
+  disabled,
+  initialRouteState,
+  currentRouteState,
+
+  onNeedConfirmationToClearTransactions,
+}: LaunchButtonProps) => {
+  const [, setSelectedRouteId] = useSelectedRouteId()
+  const currentZodiacRoute = useZodiacRoute()
+  const saveRoute = useSaveZodiacRoute()
+
+  const navigate = useNavigate()
+
+  return (
+    <Button
+      className="px-6 py-1"
+      disabled={disabled}
+      onClick={async () => {
+        if (currentRouteState !== initialRouteState) {
+          saveRoute(currentRouteState)
+        }
+
+        // we continue working with the same avatar, so don't have to clear the recorded transaction
+        const keepTransactionBundle =
+          currentZodiacRoute.route.avatar === currentRouteState.avatar
+
+        const confirmed =
+          keepTransactionBundle ||
+          (await onNeedConfirmationToClearTransactions())
+
+        if (!confirmed) {
+          return
+        }
+
+        setSelectedRouteId(currentRouteState.id)
+        navigate('/')
+      }}
+    >
+      {currentRouteState !== initialRouteState ? 'Save & Launch' : 'Launch'}
+    </Button>
+  )
+}
diff --git a/extension/src/panel/app-routes/edit-route/RemoveButton.tsx b/extension/src/panel/app-routes/edit-route/RemoveButton.tsx
new file mode 100644
index 00000000..4c3ae714
--- /dev/null
+++ b/extension/src/panel/app-routes/edit-route/RemoveButton.tsx
@@ -0,0 +1,24 @@
+import { IconButton } from '@/components'
+import { useRemoveZodiacRoute } from '@/zodiac-routes'
+import { RiDeleteBinLine } from 'react-icons/ri'
+import { useNavigate } from 'react-router-dom'
+import { useRouteId } from './useRouteId'
+
+export const RemoveButton = () => {
+  const navigate = useNavigate()
+  const removeRouteById = useRemoveZodiacRoute()
+  const routeId = useRouteId()
+
+  return (
+    <IconButton
+      danger
+      onClick={() => {
+        removeRouteById(routeId)
+        navigate('/routes')
+      }}
+      className="aspect-square border-[3px] border-double border-red-800 p-1 hover:bg-zodiac-light-red hover:bg-opacity-20"
+    >
+      <RiDeleteBinLine size={24} title="Remove this connection" />
+    </IconButton>
+  )
+}
diff --git a/extension/src/panel/app-routes/edit-route/style.module.css b/extension/src/panel/app-routes/edit-route/style.module.css
index 2f9c2f69..add6f687 100644
--- a/extension/src/panel/app-routes/edit-route/style.module.css
+++ b/extension/src/panel/app-routes/edit-route/style.module.css
@@ -1,36 +1,3 @@
-.editContainer {
-  position: relative;
-}
-h2 {
-  font-size: 1.5em;
-  margin: 0em;
-}
-
-.launchButton {
-  width: auto;
-  padding: 4px 24px;
-}
-
-button.removeButton {
-  height: auto;
-  width: auto;
-  aspect-ratio: 1/1;
-  padding: 4px;
-  border: 3px double crimson;
-}
-
-button.removeButton:hover {
-  background-color: rgba(220, 20, 60, 0.2);
-}
-
-.backLink {
-  position: absolute;
-  top: -25px;
-  left: 0;
-  font-size: 0.8em;
-  text-decoration: none;
-}
-
 .form {
   flex-grow: 1;
 }
diff --git a/extension/src/panel/app-routes/edit-route/useConnectionDryRun.tsx b/extension/src/panel/app-routes/edit-route/useConnectionDryRun.tsx
index 682e985e..b40f54ff 100644
--- a/extension/src/panel/app-routes/edit-route/useConnectionDryRun.tsx
+++ b/extension/src/panel/app-routes/edit-route/useConnectionDryRun.tsx
@@ -1,7 +1,7 @@
 import { getReadOnlyProvider } from '@/providers'
 import { JsonRpcError, LegacyConnection } from '@/types'
 import { isSmartContractAddress, validateAddress } from '@/utils'
-import { useRoute } from '@/zodiac-routes'
+import { useZodiacRoute } from '@/zodiac-routes'
 import { KnownContracts } from '@gnosis.pm/zodiac'
 import { useEffect, useState } from 'react'
 import {
@@ -14,7 +14,7 @@ import { wrapRequest } from './wrapRequest'
 
 export const useConnectionDryRun = (connection: LegacyConnection) => {
   const [error, setError] = useState<string | null>(null)
-  const { connected } = useRoute(connection.id)
+  const { connected } = useZodiacRoute(connection.id)
 
   useEffect(() => {
     const { pilotAddress, avatarAddress, moduleAddress, moduleType, roleId } =
diff --git a/extension/src/panel/app-routes/edit-route/useRouteId.ts b/extension/src/panel/app-routes/edit-route/useRouteId.ts
new file mode 100644
index 00000000..ea367bf5
--- /dev/null
+++ b/extension/src/panel/app-routes/edit-route/useRouteId.ts
@@ -0,0 +1,10 @@
+import { invariant } from '@epic-web/invariant'
+import { useParams } from 'react-router-dom'
+
+export const useRouteId = () => {
+  const { routeId } = useParams()
+
+  invariant(routeId != null, 'No "routeId" found in params')
+
+  return routeId
+}
diff --git a/extension/src/panel/app-routes/edit-route/wallet/ConnectWallet.tsx b/extension/src/panel/app-routes/edit-route/wallet/ConnectWallet.tsx
index da190cd0..d299f7b1 100644
--- a/extension/src/panel/app-routes/edit-route/wallet/ConnectWallet.tsx
+++ b/extension/src/panel/app-routes/edit-route/wallet/ConnectWallet.tsx
@@ -4,14 +4,14 @@ import {
   WalletConnectResult,
   isConnected as isConnectedBase,
 } from '@/providers'
-import { ProviderType, Route } from '@/types'
+import { ProviderType, ZodiacRoute } from '@/types'
 import { ZeroAddress } from 'ethers'
 import { ChainId, parsePrefixedAddress } from 'ser-kit'
 import { InjectedWallet, InjectedWalletConnect } from './injectedWallet'
 import { WalletConnect, WalletConnectConnect } from './walletConnect'
 
 interface Props {
-  route: Route
+  route: ZodiacRoute
   onConnect(args: {
     providerType: ProviderType
     chainId: ChainId
@@ -80,7 +80,7 @@ export const ConnectWallet = ({ route, onConnect, onDisconnect }: Props) => {
   }
 }
 
-const getPilotAddress = (route: Route) => {
+const getPilotAddress = (route: ZodiacRoute) => {
   if (route.initiator == null) {
     return null
   }
diff --git a/extension/src/panel/app-routes/edit-route/wallet/Connected.tsx b/extension/src/panel/app-routes/edit-route/wallet/Connected.tsx
index 1a844028..5141a460 100644
--- a/extension/src/panel/app-routes/edit-route/wallet/Connected.tsx
+++ b/extension/src/panel/app-routes/edit-route/wallet/Connected.tsx
@@ -10,6 +10,8 @@ export const Connected = ({ children, onDisconnect }: ConnectedProps) => (
   <Section>
     {children}
 
-    <Button onClick={onDisconnect}>Disconnect</Button>
+    <Button fluid onClick={onDisconnect}>
+      Disconnect
+    </Button>
   </Section>
 )
diff --git a/extension/src/panel/app-routes/edit-route/wallet/SwitchChain.tsx b/extension/src/panel/app-routes/edit-route/wallet/SwitchChain.tsx
index 80aa8ed1..4607536e 100644
--- a/extension/src/panel/app-routes/edit-route/wallet/SwitchChain.tsx
+++ b/extension/src/panel/app-routes/edit-route/wallet/SwitchChain.tsx
@@ -30,10 +30,16 @@ export const SwitchChain = ({
 
       <Section.Actions>
         {onSwitch && (
-          <Button onClick={onSwitch}>Switch wallet to {chainName}</Button>
+          <Button fluid onClick={onSwitch}>
+            Switch wallet to {chainName}
+          </Button>
         )}
 
-        {onDisconnect && <Button onClick={onDisconnect}>Disconnect</Button>}
+        {onDisconnect && (
+          <Button fluid onClick={onDisconnect}>
+            Disconnect
+          </Button>
+        )}
       </Section.Actions>
     </Section>
   )
diff --git a/extension/src/panel/app-routes/edit-route/wallet/WalletDisconnected.tsx b/extension/src/panel/app-routes/edit-route/wallet/WalletDisconnected.tsx
index c7cd5cba..7f95b9fc 100644
--- a/extension/src/panel/app-routes/edit-route/wallet/WalletDisconnected.tsx
+++ b/extension/src/panel/app-routes/edit-route/wallet/WalletDisconnected.tsx
@@ -21,8 +21,12 @@ export const WalletDisconnected = ({
     {children}
 
     <Section.Actions>
-      <Button onClick={onReconnect}>Connect</Button>
-      <Button onClick={onDisconnect}>Disconnect</Button>
+      <Button fluid onClick={onReconnect}>
+        Connect
+      </Button>
+      <Button fluid onClick={onDisconnect}>
+        Disconnect
+      </Button>
     </Section.Actions>
   </Section>
 )
diff --git a/extension/src/panel/app-routes/edit-route/wallet/WrongAccount.tsx b/extension/src/panel/app-routes/edit-route/wallet/WrongAccount.tsx
index 62284643..ef8278a6 100644
--- a/extension/src/panel/app-routes/edit-route/wallet/WrongAccount.tsx
+++ b/extension/src/panel/app-routes/edit-route/wallet/WrongAccount.tsx
@@ -14,6 +14,8 @@ export const WrongAccount = ({ children, onDisconnect }: WrongAccountProps) => (
 
     {children}
 
-    <Button onClick={onDisconnect}>Disconnect</Button>
+    <Button fluid onClick={onDisconnect}>
+      Disconnect
+    </Button>
   </Section>
 )
diff --git a/extension/src/panel/app-routes/edit-route/wallet/injectedWallet/InjectedWalletConnect.tsx b/extension/src/panel/app-routes/edit-route/wallet/injectedWallet/InjectedWalletConnect.tsx
index 5530922c..a1cd801f 100644
--- a/extension/src/panel/app-routes/edit-route/wallet/injectedWallet/InjectedWalletConnect.tsx
+++ b/extension/src/panel/app-routes/edit-route/wallet/injectedWallet/InjectedWalletConnect.tsx
@@ -17,6 +17,7 @@ export const InjectedWalletConnect = ({ onConnect }: InjectedWalletProps) => {
 
   return (
     <Button
+      fluid
       disabled={injectedWallet.connected === false}
       onClick={async () => {
         const { chainId, accounts } = await injectedWallet.connect()
diff --git a/extension/src/panel/app-routes/edit-route/wallet/walletConnect/WalletConnectConnect.tsx b/extension/src/panel/app-routes/edit-route/wallet/walletConnect/WalletConnectConnect.tsx
index d7c645de..70fca2d5 100644
--- a/extension/src/panel/app-routes/edit-route/wallet/walletConnect/WalletConnectConnect.tsx
+++ b/extension/src/panel/app-routes/edit-route/wallet/walletConnect/WalletConnectConnect.tsx
@@ -18,6 +18,7 @@ export const WalletConnectConnect = ({
 
   return (
     <Button
+      fluid
       disabled={walletConnect == null}
       onClick={async () => {
         invariant(
diff --git a/extension/src/panel/app-routes/legacyConnectionMigrations.ts b/extension/src/panel/app-routes/legacyConnectionMigrations.ts
index e42de875..f93a0c91 100644
--- a/extension/src/panel/app-routes/legacyConnectionMigrations.ts
+++ b/extension/src/panel/app-routes/legacyConnectionMigrations.ts
@@ -1,4 +1,4 @@
-import { LegacyConnection, ProviderType, Route } from '@/types'
+import { LegacyConnection, ProviderType, ZodiacRoute } from '@/types'
 import { KnownContracts } from '@gnosis.pm/zodiac'
 import { ZeroAddress } from 'ethers'
 import {
@@ -15,7 +15,9 @@ import {
   MULTISEND_CALL_ONLY,
 } from '../integrations/zodiac/rolesMultisend'
 
-export function fromLegacyConnection(connection: LegacyConnection): Route {
+export function fromLegacyConnection(
+  connection: LegacyConnection
+): ZodiacRoute {
   const { chainId, providerType, moduleType } = connection
 
   // We assume an EOA if the providerType is MetaMask, a Safe otherwise
@@ -121,13 +123,13 @@ export function fromLegacyConnection(connection: LegacyConnection): Route {
     label: connection.label,
     lastUsed: connection.lastUsed,
     providerType,
-    waypoints: waypoints as Route['waypoints'],
+    waypoints: waypoints as ZodiacRoute['waypoints'],
     initiator: pilotAddress ? pilotPrefixedAddress : undefined,
     avatar: avatarPrefixedAddress,
   }
 }
 
-export function asLegacyConnection(route: Route): LegacyConnection {
+export function asLegacyConnection(route: ZodiacRoute): LegacyConnection {
   if (route.waypoints && route.waypoints.length > 3) {
     throw new Error('Not representable as legacy connection')
   }
diff --git a/extension/src/panel/app-routes/list-routes/ListRoutes.tsx b/extension/src/panel/app-routes/list-routes/ListRoutes.tsx
index b671149d..79a585a5 100644
--- a/extension/src/panel/app-routes/list-routes/ListRoutes.tsx
+++ b/extension/src/panel/app-routes/list-routes/ListRoutes.tsx
@@ -1,185 +1,44 @@
-import {
-  Box,
-  BoxButton,
-  Button,
-  ConnectionStack,
-  Divider,
-  Flex,
-  useConfirmationModal,
-} from '@/components'
-import { Route } from '@/types'
-import { useRoute, useRoutes, useSelectedRouteId } from '@/zodiac-routes'
-import { formatDistanceToNow } from 'date-fns'
+import { Button, Divider } from '@/components'
+import { useSelectedRouteId, useZodiacRoutes } from '@/zodiac-routes'
 import { nanoid } from 'nanoid'
-import React from 'react'
 import { useNavigate } from 'react-router-dom'
-import { useClearTransactions } from '../../state/transactionHooks'
-import { asLegacyConnection } from '../legacyConnectionMigrations'
-import { ConnectedIcon } from './ConnectedIcon'
-import { DisconnectedIcon } from './DisconnectedIcon'
-import classes from './style.module.css'
-
-interface RouteItemProps {
-  route: Route
-  onLaunch: (routeId: string) => void
-  onModify: (routeId: string) => void
-}
-
-const RouteItem: React.FC<RouteItemProps> = ({ onLaunch, onModify, route }) => {
-  const { connected, connect, chainId } = useRoute(route.id)
-  const { route: currentlySelectedRoute } = useRoute()
-  const [getConfirmation, ConfirmationModal] = useConfirmationModal()
-  const { hasTransactions, clearTransactions } = useClearTransactions()
-
-  const confirmClearTransactions = async () => {
-    if (!hasTransactions) {
-      return true
-    }
-
-    const confirmation = await getConfirmation(
-      'Switching the Piloted Safe will empty your current transaction bundle.'
-    )
-
-    if (!confirmation) {
-      return false
-    }
-
-    clearTransactions()
-
-    return true
-  }
-
-  const handleModify = () => onModify(route.id)
-
-  const handleLaunch = async () => {
-    // we continue working with the same avatar, so don't have to clear the recorded transaction
-    const keepTransactionBundle =
-      currentlySelectedRoute && currentlySelectedRoute.avatar === route.avatar
-
-    const confirmed =
-      keepTransactionBundle || (await confirmClearTransactions())
-
-    if (!confirmed) {
-      return
-    }
-
-    if (connected) {
-      onLaunch(route.id)
-      return
-    }
-
-    if (!connected && connect) {
-      const success = await connect()
-      if (success) {
-        onLaunch(route.id)
-        return
-      }
-    }
-
-    handleModify()
-  }
-
-  return (
-    <>
-      <div className="relative">
-        <BoxButton
-          className={classes.connectionItemContainer}
-          onClick={handleLaunch}
-        >
-          <Flex direction="column" gap={4}>
-            <Flex
-              direction="row"
-              gap={2}
-              justifyContent="space-between"
-              className={classes.labelContainer}
-            >
-              <Flex direction="row" alignItems="center" gap={3}>
-                <Box className={classes.connectionIcon}>
-                  {connected ? (
-                    <ConnectedIcon>Pilot wallet is connected</ConnectedIcon>
-                  ) : connect ? (
-                    <ConnectedIcon color="orange">
-                      Pilot wallet is connected to a different chain
-                    </ConnectedIcon>
-                  ) : (
-                    <DisconnectedIcon>
-                      Pilot wallet is not connected
-                    </DisconnectedIcon>
-                  )}
-                </Box>
-                <h2>
-                  {route.label || <em>Unnamed route</em>}
-
-                  <div className="flex items-end gap-2 text-sm font-normal">
-                    <div className="text-xs uppercase text-zodiac-light-mustard">
-                      Last Used
-                    </div>
-                    <div className="font-mono opacity-70">
-                      {route.lastUsed ? (
-                        `${formatDistanceToNow(route.lastUsed)} ago`
-                      ) : (
-                        <>N/A</>
-                      )}
-                    </div>
-                  </div>
-                </h2>
-              </Flex>
-            </Flex>
-
-            <ConnectionStack
-              chainId={chainId}
-              connection={asLegacyConnection(route)}
-              addressBoxClass={classes.addressBox}
-              className={classes.connectionStack}
-            />
-          </Flex>
-        </BoxButton>
-        <BoxButton onClick={handleModify} className={classes.modifyButton}>
-          Modify
-        </BoxButton>
-      </div>
-      <ConfirmationModal />
-    </>
-  )
-}
+import { Route } from './Route'
 
 export const ListRoutes = () => {
   const [, selectRoute] = useSelectedRouteId()
-  const [routes] = useRoutes()
+  const routes = useZodiacRoutes()
   const navigate = useNavigate()
 
-  const handleLaunch = (routeId: string) => {
-    selectRoute(routeId)
-    navigate('/')
-  }
-  const handleModify = (routeId: string) => {
-    navigate('/routes/' + routeId)
-  }
-
-  const handleCreate = () => {
-    const newRouteId = nanoid()
-    navigate('/routes/' + newRouteId)
-  }
-
   return (
     <div className="flex flex-1 flex-col gap-4 px-6 py-8">
-      <Flex gap={2} direction="column">
-        <Flex gap={1} justifyContent="space-between" alignItems="baseline">
-          <h2>Pilot Routes</h2>
-          <Button onClick={handleCreate} className={classes.addConnection}>
-            Add Route
-          </Button>
-        </Flex>
-      </Flex>
+      <div className="flex items-center justify-between">
+        <h2 className="text-2xl">Pilot Routes</h2>
+
+        <Button
+          onClick={() => {
+            const newRouteId = nanoid()
+            navigate('/routes/' + newRouteId)
+          }}
+          className="px-6 py-1"
+        >
+          Add Route
+        </Button>
+      </div>
 
       <Divider />
 
       {routes.map((route) => (
-        <RouteItem
+        <Route
           key={route.id}
           route={route}
-          onLaunch={handleLaunch}
-          onModify={handleModify}
+          onLaunch={(routeId) => {
+            selectRoute(routeId)
+
+            navigate('/')
+          }}
+          onModify={(routeId) => {
+            navigate('/routes/' + routeId)
+          }}
         />
       ))}
     </div>
diff --git a/extension/src/panel/app-routes/list-routes/Route.tsx b/extension/src/panel/app-routes/list-routes/Route.tsx
new file mode 100644
index 00000000..077a75ea
--- /dev/null
+++ b/extension/src/panel/app-routes/list-routes/Route.tsx
@@ -0,0 +1,112 @@
+import { Box, BoxButton, ConnectionStack, Flex } from '@/components'
+import { ZodiacRoute } from '@/types'
+import { useZodiacRoute } from '@/zodiac-routes'
+import { formatDistanceToNow } from 'date-fns'
+import { asLegacyConnection } from '../legacyConnectionMigrations'
+import { useConfirmClearTransactions } from '../useConfirmClearTransaction'
+import { ConnectedIcon } from './ConnectedIcon'
+import { DisconnectedIcon } from './DisconnectedIcon'
+
+interface RouteProps {
+  route: ZodiacRoute
+  onLaunch: (routeId: string) => void
+  onModify: (routeId: string) => void
+}
+
+export const Route = ({ onLaunch, onModify, route }: RouteProps) => {
+  const { connected, connect, chainId } = useZodiacRoute(route.id)
+  const { route: currentlySelectedRoute } = useZodiacRoute()
+
+  const [confirmClearTransactions, ConfirmationModal] =
+    useConfirmClearTransactions()
+
+  const handleLaunch = async () => {
+    // we continue working with the same avatar, so don't have to clear the recorded transaction
+    const keepTransactionBundle =
+      currentlySelectedRoute && currentlySelectedRoute.avatar === route.avatar
+
+    const confirmed =
+      keepTransactionBundle || (await confirmClearTransactions())
+
+    if (!confirmed) {
+      return
+    }
+
+    if (connected) {
+      onLaunch(route.id)
+      return
+    }
+
+    if (!connected && connect) {
+      const success = await connect()
+      if (success) {
+        onLaunch(route.id)
+        return
+      }
+    }
+
+    onModify(route.id)
+  }
+
+  return (
+    <>
+      <div className="relative">
+        <BoxButton
+          className="w-full border-white border-opacity-30 bg-zodiac-very-dark-blue bg-opacity-70 p-4 hover:border-zodiac-light-mustard hover:border-opacity-50"
+          onClick={handleLaunch}
+        >
+          <Flex direction="column" gap={4}>
+            <div className="flex items-center justify-between gap-2 overflow-hidden">
+              <Flex direction="row" alignItems="center" gap={3}>
+                <Box className="relative m-1 flex items-center justify-center rounded-full border-[4px] border-double bg-black bg-opacity-30">
+                  {connected ? (
+                    <ConnectedIcon>Pilot wallet is connected</ConnectedIcon>
+                  ) : connect ? (
+                    <ConnectedIcon color="orange">
+                      Pilot wallet is connected to a different chain
+                    </ConnectedIcon>
+                  ) : (
+                    <DisconnectedIcon>
+                      Pilot wallet is not connected
+                    </DisconnectedIcon>
+                  )}
+                </Box>
+                <h2 className="overflow-hidden text-ellipsis whitespace-nowrap text-left text-2xl">
+                  {route.label || <em>Unnamed route</em>}
+
+                  <div className="flex items-end gap-2 text-sm font-normal">
+                    <div className="text-xs uppercase text-zodiac-light-mustard">
+                      Last Used
+                    </div>
+                    <div className="font-mono opacity-70">
+                      {route.lastUsed ? (
+                        `${formatDistanceToNow(route.lastUsed)} ago`
+                      ) : (
+                        <>N/A</>
+                      )}
+                    </div>
+                  </div>
+                </h2>
+              </Flex>
+
+              <BoxButton
+                onClick={() => onModify(route.id)}
+                className="bg-none px-4 py-1 before:content-none"
+              >
+                Modify
+              </BoxButton>
+            </div>
+
+            <div className="my-6 flex justify-center">
+              <ConnectionStack
+                chainId={chainId}
+                connection={asLegacyConnection(route)}
+              />
+            </div>
+          </Flex>
+        </BoxButton>
+      </div>
+      <ConfirmationModal />
+    </>
+  )
+}
diff --git a/extension/src/panel/app-routes/list-routes/style.module.css b/extension/src/panel/app-routes/list-routes/style.module.css
index 24f40e7c..9da29a54 100644
--- a/extension/src/panel/app-routes/list-routes/style.module.css
+++ b/extension/src/panel/app-routes/list-routes/style.module.css
@@ -1,33 +1,8 @@
-h2 {
-  font-size: 1.5em;
-  margin: 0em;
-}
-
-button.removeButton {
-  height: auto;
-  width: auto;
-  aspect-ratio: 1/1;
-  padding: 0 8px;
-  border: 1px solid crimson;
-}
-
-button.removeButton:hover {
-  background-color: rgba(220, 20, 60, 0.2);
-}
-
-.addConnection {
-  width: auto;
-  padding: 4px 24px;
-}
-
 .connection {
   position: relative;
 }
 
 .connectionItemContainer {
-  width: 100%;
-  background-color: rgba(39, 38, 30, 0.7);
-  border-color: rgba(255, 255, 255, 0.3);
   box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
   padding: var(--spacing-4);
 }
@@ -46,69 +21,10 @@ button.removeButton:hover {
   padding-top: 34px;
 }
 
-.connectionStack {
-  min-width: 505px;
-}
-
-.modifyButton {
-  position: absolute !important;
-  top: var(--spacing-4);
-  right: var(--spacing-4);
-  background: none;
-  padding: var(--spacing-1) var(--spacing-3);
-}
-
-.modifyButton:before {
-  content: none;
-}
-
-.connectionIcon {
-  position: relative;
-  border: 1px solid;
-  padding: 0;
-  border-color: var(--border-color);
-  border-radius: 50px;
-  background: rgb(0 0 0 / 0.3);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 4px;
-}
-.connectionIcon:before {
-  content: ' ';
-  position: absolute;
-  z-index: 1;
-  top: -4px;
-  left: -4px;
-  right: -4px;
-  bottom: -4px;
-  border: 1px solid var(--border-color);
-  pointer-events: none;
-  border-radius: 50px;
-}
-
-.connectionIcon svg {
-  border-radius: 50px;
-}
-
 .infoContainer {
   padding: 0 0 0 45px;
 }
 
-.labelContainer {
-  overflow: hidden;
-}
-
-.labelContainer h2 {
-  font-size: 1.4em;
-  margin-bottom: 0;
-  line-height: 1.2;
-  text-align: left;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
 .infoDatum {
   font-family: 'Roboto Mono', monospace;
 }
diff --git a/extension/src/panel/app-routes/transactions/RolePermissionCheck.tsx b/extension/src/panel/app-routes/transactions/RolePermissionCheck.tsx
index c26a0c6a..98b8de4b 100644
--- a/extension/src/panel/app-routes/transactions/RolePermissionCheck.tsx
+++ b/extension/src/panel/app-routes/transactions/RolePermissionCheck.tsx
@@ -1,8 +1,8 @@
 import { Flex, Tag } from '@/components'
 import { useProvider } from '@/providers'
 import { TransactionState } from '@/state'
-import { Eip1193Provider, JsonRpcError, Route } from '@/types'
-import { useRoute } from '@/zodiac-routes'
+import { Eip1193Provider, JsonRpcError, ZodiacRoute } from '@/types'
+import { useZodiacRoute } from '@/zodiac-routes'
 import { MetaTransactionData } from '@safe-global/safe-core-sdk-types'
 import { toQuantity, ZeroAddress } from 'ethers'
 import React, { useEffect, useState } from 'react'
@@ -22,7 +22,7 @@ import classes from './style.module.css'
 
 const simulateRolesTransaction = async (
   encodedTransaction: MetaTransactionData,
-  route: Route,
+  route: ZodiacRoute,
   provider: Eip1193Provider
 ) => {
   const routeWithInitiator = (
@@ -82,7 +82,7 @@ const RolePermissionCheck: React.FC<{
   mini?: boolean
 }> = ({ transactionState, index, mini = false }) => {
   const [error, setError] = useState<string | undefined | false>(undefined)
-  const { route } = useRoute()
+  const { route } = useZodiacRoute()
   const provider = useProvider()
 
   const translationAvailable = !!useApplicableTranslation(
diff --git a/extension/src/panel/app-routes/transactions/RouteBubble/index.tsx b/extension/src/panel/app-routes/transactions/RouteBubble/index.tsx
index 8d81f2d3..44b234f7 100644
--- a/extension/src/panel/app-routes/transactions/RouteBubble/index.tsx
+++ b/extension/src/panel/app-routes/transactions/RouteBubble/index.tsx
@@ -1,5 +1,5 @@
 import { Blockie, Box, ConnectionStack } from '@/components'
-import { useRoute } from '@/zodiac-routes'
+import { useZodiacRoute } from '@/zodiac-routes'
 import React from 'react'
 import { Link } from 'react-router-dom'
 import { asLegacyConnection } from '../../legacyConnectionMigrations'
@@ -7,7 +7,7 @@ import ConnectionsIcon from './ConnectionsIcon'
 import classes from './style.module.css'
 
 export const RouteBubble: React.FC = () => {
-  const { route, chainId } = useRoute()
+  const { route, chainId } = useZodiacRoute()
   const connection = asLegacyConnection(route)
 
   return (
diff --git a/extension/src/panel/app-routes/transactions/Submit.tsx b/extension/src/panel/app-routes/transactions/Submit.tsx
index 4be8bfa4..ebc0d671 100644
--- a/extension/src/panel/app-routes/transactions/Submit.tsx
+++ b/extension/src/panel/app-routes/transactions/Submit.tsx
@@ -3,7 +3,7 @@ import { Button, IconButton, RawAddress, toastClasses } from '@/components'
 import { getReadOnlyProvider, useSubmitTransactions } from '@/providers'
 import { useTransactions } from '@/state'
 import { JsonRpcError, ProviderType } from '@/types'
-import { useRoute } from '@/zodiac-routes'
+import { useZodiacRoute } from '@/zodiac-routes'
 import React, { useState } from 'react'
 import { RiCloseLine, RiExternalLinkLine } from 'react-icons/ri'
 import Modal, { Styles } from 'react-modal'
@@ -19,7 +19,7 @@ import {
 import classes from './style.module.css'
 
 const Submit: React.FC = () => {
-  const { route, chainId, connect, connected } = useRoute()
+  const { route, chainId, connect, connected } = useZodiacRoute()
   const { initiator, providerType, avatar } = route
   const navigate = useNavigate()
 
@@ -141,6 +141,7 @@ const Submit: React.FC = () => {
     <>
       {(connected || !!connect) && (
         <Button
+          fluid
           onClick={submit}
           disabled={!submitTransactions || transactions.length === 0}
         >
@@ -150,6 +151,7 @@ const Submit: React.FC = () => {
 
       {!connected && !connect && (
         <Button
+          fluid
           onClick={connectWallet}
           disabled={!submitTransactions || transactions.length === 0}
           secondary
diff --git a/extension/src/panel/app-routes/transactions/Transaction.tsx b/extension/src/panel/app-routes/transactions/Transaction.tsx
index a2ce563c..ad1c959a 100644
--- a/extension/src/panel/app-routes/transactions/Transaction.tsx
+++ b/extension/src/panel/app-routes/transactions/Transaction.tsx
@@ -1,8 +1,8 @@
 import { CHAIN_CURRENCY } from '@/chains'
 import { Box, Flex, ToggleButton } from '@/components'
 import { TransactionState } from '@/state'
-import { Route } from '@/types'
-import { useRoute } from '@/zodiac-routes'
+import { ZodiacRoute } from '@/types'
+import { useZodiacRoute } from '@/zodiac-routes'
 import { formatEther, Fragment } from 'ethers'
 import React, { useEffect, useRef, useState } from 'react'
 import { AccountType } from 'ser-kit'
@@ -81,7 +81,7 @@ export const Transaction: React.FC<Props> = ({
   scrollIntoView,
 }) => {
   const [expanded, setExpanded] = useState(true)
-  const { route, chainId } = useRoute()
+  const { route, chainId } = useZodiacRoute()
   const elementRef = useScrollIntoView(scrollIntoView)
 
   const decoded = useDecodedFunctionData(transactionState)
@@ -169,7 +169,7 @@ const TransactionStatus: React.FC<StatusProps> = ({
 )
 
 const EtherValue: React.FC<{ value: string }> = ({ value }) => {
-  const { chainId } = useRoute()
+  const { chainId } = useZodiacRoute()
   return (
     <Flex
       gap={1}
@@ -234,7 +234,7 @@ function getScrollParent(node: Element | null): Element | null {
   }
 }
 
-const routeGoesThroughRoles = (route: Route) =>
+const routeGoesThroughRoles = (route: ZodiacRoute) =>
   route.waypoints?.some(
     (waypoint) => waypoint.account.type === AccountType.ROLES
   )
diff --git a/extension/src/panel/app-routes/transactions/Transactions.tsx b/extension/src/panel/app-routes/transactions/Transactions.tsx
index 0b6b05ac..d006ea14 100644
--- a/extension/src/panel/app-routes/transactions/Transactions.tsx
+++ b/extension/src/panel/app-routes/transactions/Transactions.tsx
@@ -1,7 +1,7 @@
 import { Button, IconButton } from '@/components'
 import { ForkProvider, useProvider } from '@/providers'
 import { useDispatch, useTransactions } from '@/state'
-import { useRoute } from '@/zodiac-routes'
+import { useZodiacRoute } from '@/zodiac-routes'
 import { useEffect, useRef, useState } from 'react'
 import { RiFileCopy2Line, RiRefreshLine } from 'react-icons/ri'
 import { toast } from 'react-toastify'
@@ -14,7 +14,7 @@ export const Transactions = () => {
   const transactions = useTransactions()
   const dispatch = useDispatch()
   const provider = useProvider()
-  const { route } = useRoute()
+  const { route } = useZodiacRoute()
 
   const scrollContainerRef = useRef<HTMLDivElement | null>(null)
 
diff --git a/extension/src/panel/app-routes/useConfirmClearTransaction.ts b/extension/src/panel/app-routes/useConfirmClearTransaction.ts
new file mode 100644
index 00000000..3fc8bd0d
--- /dev/null
+++ b/extension/src/panel/app-routes/useConfirmClearTransaction.ts
@@ -0,0 +1,27 @@
+import { useConfirmationModal } from '@/components'
+import { useClearTransactions } from '../state/transactionHooks'
+
+export const useConfirmClearTransactions = () => {
+  const { hasTransactions, clearTransactions } = useClearTransactions()
+  const [getConfirmation, ConfirmationModal] = useConfirmationModal()
+
+  const confirmClearTransactions = async () => {
+    if (!hasTransactions) {
+      return true
+    }
+
+    const confirmation = await getConfirmation(
+      'Switching the Piloted Safe will empty your current transaction bundle.'
+    )
+
+    if (!confirmation) {
+      return false
+    }
+
+    clearTransactions()
+
+    return true
+  }
+
+  return [confirmClearTransactions, ConfirmationModal] as const
+}
diff --git a/extension/src/panel/app.tsx b/extension/src/panel/app.tsx
index 5884d0a9..55155dd8 100644
--- a/extension/src/panel/app.tsx
+++ b/extension/src/panel/app.tsx
@@ -7,9 +7,9 @@ import {
   useProvider,
 } from '@/providers'
 import {
-  ProvideRoutes,
-  useRoute,
-  useUpdateLastUsedRoute,
+  ProvideZodiacRoutes,
+  useMarkRouteAsUsed,
+  useZodiacRoute,
 } from '@/zodiac-routes'
 import { invariant } from '@epic-web/invariant'
 import React, { useEffect } from 'react'
@@ -30,17 +30,19 @@ const router = createHashRouter(appRoutes)
 
 const App = () => {
   // update the last used timestamp for the current route
-  useUpdateLastUsedRoute()
+  useMarkRouteAsUsed()
 
   // make sure the injected provider stays updated on every relevant route change
-  const { route, chainId } = useRoute()
+  const { route, chainId } = useZodiacRoute()
   const provider = useProvider()
   const [, avatarAddress] = parsePrefixedAddress(route.avatar)
+
   useEffect(() => {
     update(provider, chainId, avatarAddress)
   }, [provider, chainId, avatarAddress])
 
   useStorage('lastUsedRoute', route.id)
+
   return (
     <>
       <RouterProvider router={router} />
@@ -56,7 +58,7 @@ invariant(rootEl != null, 'Could not find DOM node to attach app')
 createRoot(rootEl).render(
   <React.StrictMode>
     <ProvideState>
-      <ProvideRoutes>
+      <ProvideZodiacRoutes>
         <ProvideInjectedWallet>
           <ProvideProvider>
             <div className="flex flex-1 flex-col">
@@ -64,7 +66,7 @@ createRoot(rootEl).render(
             </div>
           </ProvideProvider>
         </ProvideInjectedWallet>
-      </ProvideRoutes>
+      </ProvideZodiacRoutes>
     </ProvideState>
   </React.StrictMode>
 )
diff --git a/extension/src/panel/integrations/safe/useSafeDelegates.ts b/extension/src/panel/integrations/safe/useSafeDelegates.ts
index a766523d..9e34681b 100644
--- a/extension/src/panel/integrations/safe/useSafeDelegates.ts
+++ b/extension/src/panel/integrations/safe/useSafeDelegates.ts
@@ -1,5 +1,5 @@
 import { validateAddress } from '@/utils'
-import { useRoute } from '@/zodiac-routes'
+import { useZodiacRoute } from '@/zodiac-routes'
 import { useEffect, useState } from 'react'
 import { ChainId } from 'ser-kit'
 import { initSafeApiKit } from './kits'
@@ -8,7 +8,7 @@ export const useSafeDelegates = (
   safeAddress: string,
   connectionId?: string
 ) => {
-  const { provider, chainId } = useRoute(connectionId)
+  const { provider, chainId } = useZodiacRoute(connectionId)
 
   const [loading, setLoading] = useState(false)
   const [delegates, setDelegates] = useState<string[]>([])
diff --git a/extension/src/panel/integrations/safe/useSafesWithOwner.ts b/extension/src/panel/integrations/safe/useSafesWithOwner.ts
index a1ca6ef3..6283d091 100644
--- a/extension/src/panel/integrations/safe/useSafesWithOwner.ts
+++ b/extension/src/panel/integrations/safe/useSafesWithOwner.ts
@@ -1,5 +1,5 @@
 import { validateAddress } from '@/utils'
-import { useRoute } from '@/zodiac-routes'
+import { useZodiacRoute } from '@/zodiac-routes'
 import { useEffect, useState } from 'react'
 import { ChainId } from 'ser-kit'
 import { initSafeApiKit } from './kits'
@@ -8,7 +8,7 @@ export const useSafesWithOwner = (
   ownerAddress: string,
   connectionId?: string
 ) => {
-  const { chainId } = useRoute(connectionId)
+  const { chainId } = useZodiacRoute(connectionId)
 
   const [loading, setLoading] = useState(false)
   const [safes, setSafes] = useState<string[]>([])
diff --git a/extension/src/panel/integrations/zodiac/useZodiacModules.ts b/extension/src/panel/integrations/zodiac/useZodiacModules.ts
index c76634e0..0a70a297 100644
--- a/extension/src/panel/integrations/zodiac/useZodiacModules.ts
+++ b/extension/src/panel/integrations/zodiac/useZodiacModules.ts
@@ -1,6 +1,6 @@
 import { getReadOnlyProvider } from '@/providers'
 import { validateAddress } from '@/utils'
-import { useRoute } from '@/zodiac-routes'
+import { useZodiacRoute } from '@/zodiac-routes'
 import {
   ContractAbis,
   ContractAddresses,
@@ -33,7 +33,7 @@ export const useZodiacModules = (
   const [error, setError] = useState(false)
   const [modules, setModules] = useState<Module[]>([])
 
-  const { chainId } = useRoute(connectionId)
+  const { chainId } = useZodiacRoute(connectionId)
   useEffect(() => {
     setLoading(true)
     setError(false)
diff --git a/extension/src/panel/providers/ProvideProvider.tsx b/extension/src/panel/providers/ProvideProvider.tsx
index 71f4ef3d..668a2697 100644
--- a/extension/src/panel/providers/ProvideProvider.tsx
+++ b/extension/src/panel/providers/ProvideProvider.tsx
@@ -1,5 +1,5 @@
 import { Eip1193Provider } from '@/types'
-import { useRoute } from '@/zodiac-routes'
+import { useZodiacRoute } from '@/zodiac-routes'
 import { MetaTransactionData } from '@safe-global/safe-core-sdk-types'
 import { AbiCoder, BrowserProvider, id, TransactionReceipt } from 'ethers'
 import {
@@ -40,7 +40,7 @@ const SubmitTransactionsContext = createContext<
 export const useSubmitTransactions = () => useContext(SubmitTransactionsContext)
 
 export const ProvideProvider = ({ children }: PropsWithChildren) => {
-  const { provider, route, chainId } = useRoute()
+  const { provider, route, chainId } = useZodiacRoute()
   const dispatch = useDispatch()
   const transactions = useTransactions()
 
diff --git a/extension/src/panel/transactionTranslations/index.ts b/extension/src/panel/transactionTranslations/index.ts
index bc596118..74b5bb2e 100644
--- a/extension/src/panel/transactionTranslations/index.ts
+++ b/extension/src/panel/transactionTranslations/index.ts
@@ -1,4 +1,4 @@
-import { useRoute } from '@/zodiac-routes'
+import { useZodiacRoute } from '@/zodiac-routes'
 import { MetaTransactionData } from '@safe-global/safe-core-sdk-types'
 import { useEffect, useState } from 'react'
 import { ChainId } from 'ser-kit'
@@ -26,7 +26,7 @@ export const useApplicableTranslation = (
     ApplicableTranslation | undefined
   >(undefined)
 
-  const { chainId } = useRoute()
+  const { chainId } = useZodiacRoute()
 
   useEffect(() => {
     findApplicableTranslation(encodedTransaction, chainId).then(setTranslation)
diff --git a/extension/src/panel/zodiac-routes/SelectedRouteContext.tsx b/extension/src/panel/zodiac-routes/SelectedRouteContext.tsx
new file mode 100644
index 00000000..11308220
--- /dev/null
+++ b/extension/src/panel/zodiac-routes/SelectedRouteContext.tsx
@@ -0,0 +1,39 @@
+import { createContext, Dispatch, PropsWithChildren, useContext } from 'react'
+import { useStorage } from '../utils'
+
+type Context = {
+  selectedRouteId: string | undefined
+  setSelectedRouteId: Dispatch<string>
+}
+
+const SelectedRouteContext = createContext<Context>({
+  selectedRouteId: undefined,
+  setSelectedRouteId() {
+    throw new Error(
+      '"setSelectedRouteId" cannot be used outside <ProvideSelectedZodiacRoute /> context.'
+    )
+  },
+})
+
+export const ProvideSelectedZodiacRoute = ({ children }: PropsWithChildren) => {
+  const [selectedRouteId, setSelectedRouteId] =
+    useStorage<string>('selectedRoute')
+
+  return (
+    <SelectedRouteContext.Provider
+      value={{
+        selectedRouteId,
+        setSelectedRouteId,
+      }}
+    >
+      {children}
+    </SelectedRouteContext.Provider>
+  )
+}
+
+export const useSelectedRouteId = () => {
+  const { selectedRouteId, setSelectedRouteId } =
+    useContext(SelectedRouteContext)
+
+  return [selectedRouteId, setSelectedRouteId] as const
+}
diff --git a/extension/src/panel/zodiac-routes/ZodiacRoutesContext.tsx b/extension/src/panel/zodiac-routes/ZodiacRoutesContext.tsx
new file mode 100644
index 00000000..2b8e1c50
--- /dev/null
+++ b/extension/src/panel/zodiac-routes/ZodiacRoutesContext.tsx
@@ -0,0 +1,115 @@
+import { ZodiacRoute } from '@/types'
+import {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react'
+import { useStorageEntries } from '../utils'
+import {
+  ProvideSelectedZodiacRoute,
+  useSelectedRouteId,
+} from './SelectedRouteContext'
+
+type Context = {
+  routes: ZodiacRoute[]
+  saveRoute: (route: ZodiacRoute) => void
+  removeRoute: (routeId: string) => void
+}
+
+const ZodiacRoutesContext = createContext<Context>({
+  routes: [],
+  saveRoute() {
+    throw new Error(
+      '"saveRoute" is not available outside of `<ProvideZodiacRoutes />` context.'
+    )
+  },
+  removeRoute() {
+    throw new Error(
+      '"removeRoute" is not available outside of `<ProvideZodiacRoutes /> context.'
+    )
+  },
+})
+
+export const ProvideZodiacRoutes = ({ children }: PropsWithChildren) => {
+  // we store routes as individual storage entries to alleviate concurrent write issues and to avoid running into the 8kb storage entry limit
+  // (see: https://developer.chrome.com/docs/extensions/reference/api/storage#property-sync)
+  const [routes, setRoute, removeRoute] =
+    useStorageEntries<ZodiacRoute>('routes')
+
+  const saveRoute = useCallback(
+    (route: ZodiacRoute) => {
+      setRoute(route.id, route)
+    },
+    [setRoute]
+  )
+
+  const routesList = useMemo(
+    () => (routes == null ? [] : Object.values(routes)),
+    [routes]
+  )
+
+  // wait for routes to be loaded from storage
+  if (!routes) {
+    return null
+  }
+
+  return (
+    <ZodiacRoutesContext.Provider
+      value={{
+        routes: routesList,
+        saveRoute,
+        removeRoute,
+      }}
+    >
+      <ProvideSelectedZodiacRoute>{children}</ProvideSelectedZodiacRoute>
+    </ZodiacRoutesContext.Provider>
+  )
+}
+
+export const useZodiacRoutes = () => {
+  const { routes } = useContext(ZodiacRoutesContext)
+
+  return routes
+}
+
+export const useSaveZodiacRoute = () => {
+  const { saveRoute } = useContext(ZodiacRoutesContext)
+
+  return saveRoute
+}
+
+export const useRemoveZodiacRoute = () => {
+  const { removeRoute } = useContext(ZodiacRoutesContext)
+
+  return removeRoute
+}
+
+export const useMarkRouteAsUsed = () => {
+  const [selectedRouteId] = useSelectedRouteId()
+  const routes = useZodiacRoutes()
+  const saveRoute = useSaveZodiacRoute()
+
+  const updateRef = useRef<(routeId: string | undefined) => void>()
+  updateRef.current = (routeId) => {
+    if (routeId == null) {
+      return
+    }
+
+    const route = routes.find((route) => route.id === routeId)
+
+    if (route == null) {
+      return
+    }
+
+    saveRoute({ ...route, lastUsed: Date.now() })
+  }
+
+  useEffect(() => {
+    console.debug('update last used timestamp for route', selectedRouteId)
+    updateRef.current!(selectedRouteId)
+  }, [selectedRouteId])
+}
diff --git a/extension/src/panel/zodiac-routes/index.ts b/extension/src/panel/zodiac-routes/index.ts
index 916c6fd9..85963c01 100644
--- a/extension/src/panel/zodiac-routes/index.ts
+++ b/extension/src/panel/zodiac-routes/index.ts
@@ -1 +1,9 @@
-export * from './routeHooks'
+export { useSelectedRouteId } from './SelectedRouteContext'
+export { INITIAL_DEFAULT_ROUTE, useZodiacRoute } from './useZodiacRoute'
+export {
+  ProvideZodiacRoutes,
+  useMarkRouteAsUsed,
+  useRemoveZodiacRoute,
+  useSaveZodiacRoute,
+  useZodiacRoutes,
+} from './ZodiacRoutesContext'
diff --git a/extension/src/panel/zodiac-routes/routeHooks.tsx b/extension/src/panel/zodiac-routes/useZodiacRoute.ts
similarity index 50%
rename from extension/src/panel/zodiac-routes/routeHooks.tsx
rename to extension/src/panel/zodiac-routes/useZodiacRoute.ts
index b46f9e01..3ac2683a 100644
--- a/extension/src/panel/zodiac-routes/routeHooks.tsx
+++ b/extension/src/panel/zodiac-routes/useZodiacRoute.ts
@@ -1,36 +1,19 @@
-import { getChainId } from '@/chains'
+import { ETH_ZERO_ADDRESS, getChainId } from '@/chains'
 import {
   getEip1193ReadOnlyProvider,
   isConnected,
   useInjectedWallet,
   useWalletConnect,
 } from '@/providers'
-import { Eip1193Provider, ProviderType, Route } from '@/types'
+import { Eip1193Provider, ProviderType, ZodiacRoute } from '@/types'
 import { ZeroAddress } from 'ethers'
 import { nanoid } from 'nanoid'
-import React, {
-  createContext,
-  ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react'
+import { useCallback, useEffect } from 'react'
 import { parsePrefixedAddress } from 'ser-kit'
-import { useStorage, useStorageEntries } from '../utils'
-
-type RouteContextT = readonly [
-  Route[],
-  (value: Route) => void,
-  (id: string) => void,
-]
-const RouteContext = createContext<RouteContextT | null>(null)
-type SelectedRouteContextT = readonly [string, React.Dispatch<string>]
-const SelectedRouteContext = createContext<SelectedRouteContextT | null>(null)
-
-const ETH_ZERO_ADDRESS = 'eth:0x0000000000000000000000000000000000000000'
-const INITIAL_DEFAULT_ROUTE: Route = {
+import { useSelectedRouteId } from './SelectedRouteContext'
+import { useZodiacRoutes } from './ZodiacRoutesContext'
+
+export const INITIAL_DEFAULT_ROUTE: ZodiacRoute = {
   id: nanoid(),
   label: '',
   providerType: ProviderType.InjectedWallet,
@@ -39,82 +22,8 @@ const INITIAL_DEFAULT_ROUTE: Route = {
   waypoints: undefined,
 }
 
-export const ProvideRoutes: React.FC<{ children: ReactNode }> = ({
-  children,
-}) => {
-  // we store routes as individual storage entries to alleviate concurrent write issues and to avoid running into the 8kb storage entry limit
-  // (see: https://developer.chrome.com/docs/extensions/reference/api/storage#property-sync)
-  const [routes, setRoute, removeRoute] = useStorageEntries<Route>('routes')
-
-  const saveRoute = useCallback(
-    (route: Route) => {
-      setRoute(route.id, route)
-    },
-    [setRoute]
-  )
-
-  const [selectedRouteId, setSelectedRouteId] =
-    useStorage<string>('selectedRoute')
-
-  const packedRoutesContext: RouteContextT = useMemo(
-    () => [Object.values(routes || {}), saveRoute, removeRoute] as const,
-    [routes, saveRoute, removeRoute]
-  )
-  const packedSelectedRouteContext: SelectedRouteContextT = useMemo(
-    () => [selectedRouteId || '', setSelectedRouteId] as const,
-    [selectedRouteId, setSelectedRouteId]
-  )
-
-  // wait for routes to be loaded from storage
-  if (!routes) {
-    return null
-  }
-
-  return (
-    <RouteContext.Provider value={packedRoutesContext}>
-      <SelectedRouteContext.Provider value={packedSelectedRouteContext}>
-        {children}
-      </SelectedRouteContext.Provider>
-    </RouteContext.Provider>
-  )
-}
-
-export const useUpdateLastUsedRoute = () => {
-  const [selectedRouteId] = useSelectedRouteId()
-  const [routes, saveRoute] = useRoutes()
-
-  const updateRef = useRef<(routeId: string) => void>()
-  updateRef.current = (routeId: string) => {
-    const route = routes.find((route) => route.id === routeId)
-    if (route) {
-      saveRoute({ ...route, lastUsed: Date.now() })
-    }
-  }
-
-  useEffect(() => {
-    console.debug('update last used timestamp for route', selectedRouteId)
-    updateRef.current!(selectedRouteId)
-  }, [selectedRouteId])
-}
-
-export const useRoutes = () => {
-  const result = useContext(RouteContext)
-  if (!result) {
-    throw new Error('useRoutes must be used within a <ProvideRoutes>')
-  }
-  return result
-}
-
-export const useSelectedRouteId = () => {
-  const result = useContext(SelectedRouteContext)
-  if (!result) {
-    throw new Error('useSelectedRouteId must be used within a <ProvideRoutes>')
-  }
-  return result
-}
-
-export const useRoute = (id?: string) => {
-  const [routes] = useRoutes()
+export const useZodiacRoute = (id?: string) => {
+  const routes = useZodiacRoutes()
   const [selectedRouteId] = useSelectedRouteId()
   const routeId = id || selectedRouteId
   const route =
diff --git a/extension/src/types.ts b/extension/src/types.ts
index af05335f..fc6dd133 100644
--- a/extension/src/types.ts
+++ b/extension/src/types.ts
@@ -27,14 +27,14 @@ export interface LegacyConnection {
   lastUsed?: number
 }
 
-interface PartialRoute {
+interface PartialZodiacRoute {
   id: string
   initiator: PrefixedAddress | undefined
   avatar: PrefixedAddress
   waypoints: CompleteRoute['waypoints'] | undefined
 }
 
-export type Route = PartialRoute & {
+export type ZodiacRoute = PartialZodiacRoute & {
   providerType: ProviderType
   label: string
   lastUsed?: number
diff --git a/extension/tailwind.config.js b/extension/tailwind.config.js
index ba00aa82..12738fb5 100644
--- a/extension/tailwind.config.js
+++ b/extension/tailwind.config.js
@@ -16,6 +16,10 @@ export default {
           'dark-mustard': '#3e3d2ad1',
 
           'dark-green': 'rgba(0, 166, 56, 0.47)',
+
+          'light-red': 'rgba(220, 20, 60)',
+
+          'very-dark-blue': 'rgba(39, 38, 30)',
         },
       },
     },