diff --git a/console/client/src/App.test.tsx b/console/client/src/App.test.tsx
index cd9ec8ecad..5a9159a90d 100644
--- a/console/client/src/App.test.tsx
+++ b/console/client/src/App.test.tsx
@@ -5,6 +5,8 @@ import { App } from './App'
 
 describe('App', () => {
   it('renders the app', () => {
+    window.history.pushState({}, 'Modules', '/modules')
+
     render(
       <BrowserRouter>
         <App />
diff --git a/console/client/src/App.tsx b/console/client/src/App.tsx
index 0631612d9d..98379e0345 100644
--- a/console/client/src/App.tsx
+++ b/console/client/src/App.tsx
@@ -1,14 +1,20 @@
-import { Route, Routes } from 'react-router-dom'
+import { Navigate, Route, Routes } from 'react-router-dom'
 import { GraphPage } from './features/graph/GraphPage.tsx'
-import { IDELayout } from './layout/IDELayout.tsx'
+import { ModulesList } from './features/modules/ModulesList.tsx'
+import { Timeline } from './features/timeline/Timeline.tsx'
+import { Layout } from './layout/Layout.tsx'
 import { bgColor, textColor } from './utils/style.utils.ts'
 
 export const App = () => {
   return (
     <div className={`h-screen flex flex-col min-w-[1024px] min-h-[600px] ${bgColor} ${textColor}`}>
       <Routes>
-        <Route index element={<IDELayout />} />
-        <Route path='graph' element={<GraphPage />} />
+        <Route path='/' element={<Layout />}>
+          <Route path='/' element={<Navigate to='events' replace />} />
+          <Route path='events' element={<Timeline />} />
+          <Route path='modules' element={<ModulesList />} />
+          <Route path='graph' element={<GraphPage />} />
+        </Route>
       </Routes>
     </div>
   )
diff --git a/console/client/src/features/graph/GraphPage.tsx b/console/client/src/features/graph/GraphPage.tsx
index eed52dbdec..ded19c419d 100644
--- a/console/client/src/features/graph/GraphPage.tsx
+++ b/console/client/src/features/graph/GraphPage.tsx
@@ -1,7 +1,6 @@
 import { useContext, useEffect } from 'react'
 import ReactFlow, { Controls, MiniMap, useEdgesState, useNodesState } from 'reactflow'
 import 'reactflow/dist/style.css'
-import { Navigation } from '../../layout/Navigation'
 import { modulesContext } from '../../providers/modules-provider'
 import { GroupNode } from './GroupNode'
 import { VerbNode } from './VerbNode'
@@ -22,7 +21,6 @@ export const GraphPage = () => {
 
   return (
     <>
-      <Navigation />
       <div style={{ width: '100vw', height: '100vh' }}>
         <ReactFlow
           nodes={nodes}
diff --git a/console/client/src/features/modules/ModuleDetails.tsx b/console/client/src/features/modules/ModuleDetails.tsx
index 5a2aad6547..2b7ba809cb 100644
--- a/console/client/src/features/modules/ModuleDetails.tsx
+++ b/console/client/src/features/modules/ModuleDetails.tsx
@@ -1,16 +1,12 @@
 import React from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { modulesContext } from '../../providers/modules-provider'
 import { SelectedModuleContext } from '../../providers/selected-module-provider'
-import { TabsContext } from '../../providers/tabs-provider'
 import { textColor } from '../../utils'
-import { VerbTab } from '../verbs/VerbTab'
 
 export const ModuleDetails = () => {
   const modules = React.useContext(modulesContext)
   const { selectedModule, setSelectedModule } = React.useContext(SelectedModuleContext)
-  const { openTab } = React.useContext(TabsContext)
   const [searchParams] = useSearchParams()
   const moduleId = searchParams.get('module')
   // When mounting with a valid module in query params set selected module
@@ -29,16 +25,6 @@ export const ModuleDetails = () => {
     )
   }
 
-  const handleVerbClicked = (verb: Verb) => {
-    const verbId = [selectedModule.name, verb.verb?.name].join('.')
-    openTab({
-      id: verbId,
-      label: verb.verb?.name ?? 'Verb',
-      isClosable: true,
-      component: <VerbTab id={verbId} />,
-    })
-  }
-
   return (
     <div className='flex-1 overflow-auto text-sm font-medium text-gray-500 dark:text-gray-400'>
       <div className='flex justify-between'>
@@ -60,9 +46,6 @@ export const ModuleDetails = () => {
           {selectedModule.verbs.map((verb, index) => (
             <div
               key={index}
-              onClick={() => {
-                handleVerbClicked(verb)
-              }}
               className='rounded bg-indigo-600 px-2 py-1 text-xs font-semibold text-white text-center cursor-pointer
             shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
             >
diff --git a/console/client/src/features/verbs/VerbForm.tsx b/console/client/src/features/verbs/VerbForm.tsx
index ceee2dd027..8f4c2fdaf3 100644
--- a/console/client/src/features/verbs/VerbForm.tsx
+++ b/console/client/src/features/verbs/VerbForm.tsx
@@ -10,7 +10,6 @@ import { Module, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { VerbService } from '../../protos/xyz/block/ftl/v1/ftl_connect'
 import { VerbRef } from '../../protos/xyz/block/ftl/v1/schema/schema_pb'
 import { useDarkMode } from '../../providers/dark-mode-provider'
-import { TabsContext } from '../../providers/tabs-provider'
 
 export type Schema = JSONSchema4 | JSONSchema6 | JSONSchema7
 
@@ -22,7 +21,6 @@ interface Props {
 export const VerbForm = ({ module, verb }: Props) => {
   const client = useClient(VerbService)
   const { isDarkMode } = useDarkMode()
-  const { activeTabId } = React.useContext(TabsContext)
   const [editorText, setEditorText] = React.useState<string>('')
   const [response, setResponse] = React.useState<string | null>(null)
   const [error, setError] = React.useState<string | null>(null)
@@ -82,7 +80,7 @@ export const VerbForm = ({ module, verb }: Props) => {
         validate: true,
         schemas: [{ schema, uri: 'http://myserver/foo-schema.json', fileMatch: ['*'] }],
       })
-  }, [monaco, schema, activeTabId])
+  }, [monaco, schema])
 
   return (
     <>
diff --git a/console/client/src/layout/IDELayout.tsx b/console/client/src/layout/IDELayout.tsx
deleted file mode 100644
index 197462c884..0000000000
--- a/console/client/src/layout/IDELayout.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { ModuleDetails } from '../features/modules/ModuleDetails'
-import { ModulesList } from '../features/modules/ModulesList'
-import { bgColor, headerColor, headerTextColor, panelColor, textColor } from '../utils'
-import { Navigation } from './Navigation'
-import { Notification } from './Notification'
-import { SidePanel } from './SidePanel'
-import { Tabs } from './Tabs'
-
-export const IDELayout = () => {
-  return (
-    <>
-      <div className={`h-screen flex flex-col ${bgColor} ${textColor}`}>
-        <Navigation />
-
-        <div className='flex-grow flex overflow-hidden p-1'>
-          {/* Left Column */}
-          <aside className={`w-80 flex flex-col`}>
-            {/* Top Section */}
-            <div className={`flex flex-col h-1/2 overflow-hidden rounded-t ${panelColor}`}>
-              <header className={`px-4 py-2 ${headerTextColor} ${headerColor}`}>Modules</header>
-              <section className={`${panelColor} p-4 overflow-y-auto`}>
-                <ModulesList />
-              </section>
-            </div>
-
-            {/* Bottom Section */}
-            <div className={`flex flex-col h-1/2 overflow-hidden mt-1 rounded-t ${panelColor}`}>
-              <header className={`px-4 py-2 ${headerTextColor} ${headerColor}`}>Module Details</header>
-              <section className={`${panelColor} p-4 overflow-y-auto`}>
-                <ModuleDetails />
-              </section>
-            </div>
-          </aside>
-
-          {/* Main Content */}
-          <main className='flex-grow flex flex-col overflow-hidden pl-1'>
-            <section className='flex-grow overflow-y-auto'>
-              <div className='flex flex-grow overflow-hidden h-full'>
-                <Tabs />
-                <SidePanel />
-              </div>
-            </section>
-          </main>
-        </div>
-      </div>
-      <Notification />
-    </>
-  )
-}
diff --git a/console/client/src/layout/Layout.tsx b/console/client/src/layout/Layout.tsx
new file mode 100644
index 0000000000..ec31c9eab8
--- /dev/null
+++ b/console/client/src/layout/Layout.tsx
@@ -0,0 +1,21 @@
+import { Outlet } from 'react-router-dom'
+import { Navigation } from './Navigation'
+import { Notification } from './Notification'
+import { SidePanel } from './SidePanel'
+
+export const Layout = () => {
+  return (
+    <div className='flex h-screen'>
+      <Navigation />
+
+      <main className='overflow-hidden'>
+        <section className='overflow-y-auto h-full'>
+          <Outlet />
+        </section>
+      </main>
+
+      <SidePanel />
+      <Notification />
+    </div>
+  )
+}
diff --git a/console/client/src/layout/Navigation.tsx b/console/client/src/layout/Navigation.tsx
index a986441914..54ab8c345b 100644
--- a/console/client/src/layout/Navigation.tsx
+++ b/console/client/src/layout/Navigation.tsx
@@ -1,36 +1,82 @@
-import { NavLink } from 'react-router-dom'
+import { Schema, Timeline, ViewModuleSharp } from '@mui/icons-material'
+import { useContext } from 'react'
+import { Link, NavLink } from 'react-router-dom'
 import { DarkModeSwitch } from '../components/DarkModeSwitch'
-import { classNames } from '../utils/react.utils'
-import { navColor } from '../utils/style.utils'
+import { modulesContext } from '../providers/modules-provider'
+import { classNames } from '../utils'
+
+const navigation = [
+  { name: 'Events', href: '/events', icon: Timeline },
+  { name: 'Modules', href: '/modules', icon: ViewModuleSharp },
+  { name: 'Graph', href: '/graph', icon: Schema },
+]
 
 export const Navigation = () => {
+  const modules = useContext(modulesContext)
+
   return (
-    <div className={`px-4 py-2 flex items-center justify-between ${navColor} text-white shadow-md`}>
-      <div className='flex items-center space-x-2'>
-        <NavLink to='/'>
-          <div className='pb-1'>
-            <span className='text-xl font-medium'>FTL</span>
-            <span className='px-2 text-pink-400 text-2xl font-medium'>∞</span>
-          </div>
-        </NavLink>
-        <div className='hidden md:block'>
-          <div className='ml-2 flex items-baseline space-x-4'>
-            <NavLink
-              to='/graph'
-              key='graph'
-              className={({ isActive }) =>
-                classNames(
-                  isActive ? 'bg-indigo-700 text-white' : 'text-white hover:bg-indigo-500 hover:bg-opacity-75',
-                  'rounded-md px-3 py-2 text-sm font-medium',
-                )
-              }
-            >
-              Graph
-            </NavLink>
+    <div className='bg-gray-800 flex-shrink-0 w-52 h-full'>
+      <aside className={`flex flex-col h-full`}>
+        <div className='flex flex-col h-full overflow-y-auto bg-indigo-600'>
+          <div className='flex grow flex-col overflow-y-auto bg-indigo-600 px-4'>
+            <Link to='/events'>
+              <div className='-mx-2 space-y-1'>
+                <div className='flex shrink-0 items-center p-2 rounded-md hover:bg-indigo-700'>
+                  <span className='text-2xl font-medium text-white'>FTL</span>
+                  <span className='px-2 text-pink-400 text-2xl font-medium'>∞</span>
+                </div>
+              </div>
+            </Link>
+            <nav className='flex flex-1 flex-col pt-4'>
+              <ul role='list' className='flex flex-1 flex-col gap-y-7'>
+                <li>
+                  <ul role='list' className='-mx-2 space-y-1'>
+                    {navigation.map((item) => (
+                      <li key={item.name}>
+                        <NavLink
+                          to={item.href}
+                          className={({ isActive }) =>
+                            classNames(
+                              isActive
+                                ? 'bg-indigo-700 text-white'
+                                : 'text-indigo-200 hover:text-white hover:bg-indigo-700',
+                              'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold',
+                            )
+                          }
+                        >
+                          {({ isActive }) => (
+                            <>
+                              <item.icon
+                                className={classNames(
+                                  isActive ? 'text-white' : 'text-indigo-200 group-hover:text-white',
+                                  'h-6 w-6 shrink-0',
+                                )}
+                                aria-hidden='true'
+                              />
+                              {item.name}
+                              {item.href === '/modules' && (
+                                <span
+                                  className='ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-indigo-600 px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-white ring-1 ring-inset ring-indigo-500'
+                                  aria-hidden='true'
+                                >
+                                  {modules.modules.length}
+                                </span>
+                              )}
+                            </>
+                          )}
+                        </NavLink>
+                      </li>
+                    ))}
+                  </ul>
+                </li>
+                <li className='pb-2 mt-auto'>
+                  <DarkModeSwitch />
+                </li>
+              </ul>
+            </nav>
           </div>
         </div>
-      </div>
-      <DarkModeSwitch />
+      </aside>
     </div>
   )
 }
diff --git a/console/client/src/layout/SidePanel.tsx b/console/client/src/layout/SidePanel.tsx
index ca88b98c43..e8fdb3309e 100644
--- a/console/client/src/layout/SidePanel.tsx
+++ b/console/client/src/layout/SidePanel.tsx
@@ -20,9 +20,7 @@ export const SidePanel = () => {
         leaveTo='translate-x-full'
       >
         <div className={`fixed right-0 w-1/3 h-full ${sidePanelColor} shadow-xl`}>
-          <div
-            className={`flex items-center justify-between pl-4 pr-2 py-2 rounded-tl ${headerTextColor} ${headerColor}`}
-          >
+          <div className={`flex items-center justify-between pl-4 pr-2 py-2 ${headerTextColor} ${headerColor}`}>
             Event Details
             <button onClick={() => closePanel()} className='hover:bg-indigo-800 dark:hover:bg-indigo-500'>
               <XMarkIcon className={`h-5 w-5`} />
diff --git a/console/client/src/layout/Tabs.tsx b/console/client/src/layout/Tabs.tsx
deleted file mode 100644
index 8aa5ef4a28..0000000000
--- a/console/client/src/layout/Tabs.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { Tab as TabComponent } from '@headlessui/react'
-import { XMarkIcon } from '@heroicons/react/24/outline'
-import React from 'react'
-import { useSearchParams } from 'react-router-dom'
-import { Timeline } from '../features/timeline/Timeline'
-import { VerbTab } from '../features/verbs/VerbTab'
-import { modulesContext } from '../providers/modules-provider'
-import { NotificationType, NotificationsContext } from '../providers/notifications-provider'
-import { Tab, TabsContext } from '../providers/tabs-provider'
-import { headerColor, headerTextColor, panelColor } from '../utils'
-
-const selectedTabStyle = `${headerTextColor} ${headerColor}`
-const unselectedTabStyle = `text-gray-300 bg-slate-100 dark:bg-slate-600`
-
-export const Tabs = () => {
-  const [searchParams] = useSearchParams()
-  const { tabs, activeTabId, openTab, closeTab } = React.useContext(TabsContext)
-  const { showNotification } = React.useContext(NotificationsContext)
-  const { modules } = React.useContext(modulesContext)
-
-  React.useEffect(() => {
-    openTab({
-      id: 'timeline',
-      label: 'Timeline',
-      isClosable: false,
-      component: <Timeline />,
-    } as Tab)
-  }, [])
-
-  React.useEffect(() => {
-    const verbRef = searchParams.get('verb')
-    if (!verbRef || modules.length === 0) return
-
-    const [moduleName, verbName] = verbRef.split('.')
-    const module = modules.find((module) => module?.name === moduleName)
-    if (!module) {
-      showNotification(
-        {
-          title: 'Module not found',
-          message: `Module '${moduleName}' does not exist`,
-          type: NotificationType.Error,
-        },
-        10000,
-      )
-      return
-    }
-
-    const verb = module?.verbs.find((v) => v.verb?.name === verbName)
-    if (!verb) {
-      showNotification(
-        {
-          title: 'Verb not found',
-          message: `Verb '${verbName}' does not exist on module '${moduleName}'`,
-          type: NotificationType.Error,
-        },
-        10000,
-      )
-      return
-    }
-
-    openTab({
-      id: verbRef,
-      label: verb.verb?.name ?? 'Verb',
-      isClosable: true,
-      component: <VerbTab id={verbRef} />,
-    })
-  }, [modules])
-
-  const handleChangeTab = (index: number) => {
-    const tab = tabs[index]
-    openTab(tab)
-  }
-
-  return (
-    <div className={`flex-1 flex flex-col rounded`}>
-      <TabComponent.Group selectedIndex={tabs.findIndex((tab) => tab.id === activeTabId)} onChange={handleChangeTab}>
-        <div>
-          <TabComponent.List className={`flex items-center rounded-t ${headerTextColor}`}>
-            {tabs.map((tab) => {
-              return (
-                <TabComponent key={tab.id} className='flex items-center mr-1 relative cursor-pointer' as='span'>
-                  <span
-                    className={`px-4 py-2 rounded-t ${tab.isClosable ? 'pr-8' : ''} ${
-                      activeTabId === tab.id ? `${selectedTabStyle}` : `${unselectedTabStyle}`
-                    }`}
-                  >
-                    {tab.label}
-                  </span>
-                  {tab.isClosable && (
-                    <button
-                      onClick={(e) => {
-                        e.preventDefault()
-                        closeTab(tab.id)
-                      }}
-                      className='absolute right-0 mr-2 text-gray-400 hover:text-white'
-                    >
-                      <XMarkIcon className={`h-5 w-5`} />
-                    </button>
-                  )}
-                </TabComponent>
-              )
-            })}
-          </TabComponent.List>
-          <div className='flex-grow'></div>
-        </div>
-        <div className={`flex-1 overflow-y-scroll ${panelColor}`}>
-          <TabComponent.Panels>
-            {tabs.map((tab) => (
-              <TabComponent.Panel key={tab.id}>{tab.component}</TabComponent.Panel>
-            ))}
-          </TabComponent.Panels>
-        </div>
-      </TabComponent.Group>
-    </div>
-  )
-}
diff --git a/console/client/src/providers/AppProviders.tsx b/console/client/src/providers/AppProviders.tsx
index e40f8c5007..e2ffcbe00c 100644
--- a/console/client/src/providers/AppProviders.tsx
+++ b/console/client/src/providers/AppProviders.tsx
@@ -6,7 +6,6 @@ import { SchemaProvider } from './schema-provider'
 import { SelectedModuleProvider } from './selected-module-provider'
 import { SelectedTimelineEntryProvider } from './selected-timeline-entry-provider'
 import { SidePanelProvider } from './side-panel-provider'
-import { TabsProvider } from './tabs-provider'
 
 export const AppProviders = () => {
   return (
@@ -15,13 +14,11 @@ export const AppProviders = () => {
         <ModulesProvider>
           <SelectedModuleProvider>
             <SelectedTimelineEntryProvider>
-              <TabsProvider>
-                <SidePanelProvider>
-                  <NotificationsProvider>
-                    <App />
-                  </NotificationsProvider>
-                </SidePanelProvider>
-              </TabsProvider>
+              <SidePanelProvider>
+                <NotificationsProvider>
+                  <App />
+                </NotificationsProvider>
+              </SidePanelProvider>
             </SelectedTimelineEntryProvider>
           </SelectedModuleProvider>
         </ModulesProvider>
diff --git a/console/client/src/providers/tabs-provider.tsx b/console/client/src/providers/tabs-provider.tsx
deleted file mode 100644
index 3db89b44af..0000000000
--- a/console/client/src/providers/tabs-provider.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react'
-import { useSearchParams } from 'react-router-dom'
-
-export interface Tab {
-  id: string
-  label: string
-  isClosable: boolean
-  component: React.ReactNode
-}
-
-interface TabsContextType {
-  tabs: Tab[]
-  activeTabId?: string
-  openTab: (tab: Tab) => void
-  closeTab: (tabId: string) => void
-}
-
-export const TabsContext = React.createContext<TabsContextType>({
-  tabs: [],
-  activeTabId: undefined,
-  openTab: () => {},
-  closeTab: () => {},
-})
-
-export const TabsProvider = (props: React.PropsWithChildren) => {
-  const [searchParams, setSearchParams] = useSearchParams()
-  const [tabs, setTabs] = React.useState<Tab[]>([])
-  const [activeTabId, setActiveTabId] = React.useState<string>()
-
-  const updateParams = (tab: Tab) => {
-    if (tab.id !== 'timeline') {
-      setSearchParams({
-        ...Object.fromEntries(searchParams),
-        verb: tab.id,
-      })
-    }
-  }
-
-  const openTab = (tab: Tab) => {
-    setTabs((prevTabs) => {
-      // Add the tab if it doesn't exist
-      if (!prevTabs.some((existingTab) => existingTab.id === tab.id)) {
-        return [...prevTabs, tab]
-      }
-      return prevTabs
-    })
-
-    setActiveTabId(tab.id)
-    updateParams(tab)
-  }
-
-  const closeTab = (tabId: string) => {
-    const newTabs = tabs.filter((tab) => tab.id !== tabId)
-    const closedTabIndex = tabs.findIndex((tab) => tab.id === tabId)
-
-    if (activeTabId === tabId) {
-      const activeTab = newTabs[closedTabIndex - 1]
-      setActiveTabId(activeTab?.id)
-      updateParams(activeTab)
-    }
-
-    if (newTabs.length === 1 && newTabs[0].id === 'timeline') {
-      searchParams.delete('verb')
-      setSearchParams(searchParams)
-    }
-    setTabs(newTabs)
-  }
-
-  return <TabsContext.Provider value={{ tabs, activeTabId, openTab, closeTab }}>{props.children}</TabsContext.Provider>
-}