diff --git a/frontend/console/src/features/console/BottomPanel.tsx b/frontend/console/src/features/console/BottomPanel.tsx
deleted file mode 100644
index ba16d10c23..0000000000
--- a/frontend/console/src/features/console/BottomPanel.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { useMemo } from 'react'
-import { Timeline } from '../timeline/Timeline'
-
-const timeSettings = { isTailing: true, isPaused: false }
-
-const BottomPanel = () => {
-  const filters = useMemo(() => {
-    return []
-  }, [])
-  return <Timeline timeSettings={timeSettings} filters={filters} />
-}
-
-export default BottomPanel
diff --git a/frontend/console/src/features/console/ConsolePage.tsx b/frontend/console/src/features/console/ConsolePage.tsx
index 71ec658c3b..bf53d8c1fc 100644
--- a/frontend/console/src/features/console/ConsolePage.tsx
+++ b/frontend/console/src/features/console/ConsolePage.tsx
@@ -1,11 +1,11 @@
 import { useState } from 'react'
 import { type NavigateFunction, useNavigate } from 'react-router-dom'
 import { useModules } from '../../api/modules/use-modules'
+import { Loader } from '../../components/Loader'
 import { ResizablePanels } from '../../components/ResizablePanels'
-import { Page } from '../../layout'
 import { Config, Module, Secret, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { type FTLNode, GraphPane } from '../graph/GraphPane'
-import BottomPanel from './BottomPanel'
+import { Timeline } from '../timeline/Timeline'
 import type { ExpandablePanelProps } from './ExpandablePanel'
 import { configPanels } from './right-panel/ConfigPanels'
 import { modulePanels } from './right-panel/ModulePanels'
@@ -19,20 +19,22 @@ export const ConsolePage = () => {
   const [selectedNode, setSelectedNode] = useState<FTLNode | null>(null)
 
   if (!modules.isSuccess) {
-    return <Page>Loading...</Page>
+    return (
+      <div className='flex justify-center items-center h-full'>
+        <Loader />
+      </div>
+    )
   }
 
   return (
-    <Page>
-      <Page.Body className='flex h-full'>
-        <ResizablePanels
-          mainContent={<GraphPane onTapped={setSelectedNode} />}
-          rightPanelHeader={headerForNode(selectedNode)}
-          rightPanelPanels={panelsForNode(modules.data.modules, selectedNode, navigate)}
-          bottomPanelContent={<BottomPanel />}
-        />
-      </Page.Body>
-    </Page>
+    <div className='flex h-full'>
+      <ResizablePanels
+        mainContent={<GraphPane onTapped={setSelectedNode} />}
+        rightPanelHeader={headerForNode(selectedNode)}
+        rightPanelPanels={panelsForNode(modules.data.modules, selectedNode, navigate)}
+        bottomPanelContent={<Timeline timeSettings={{ isTailing: true, isPaused: false }} filters={[]} />}
+      />
+    </div>
   )
 }
 
diff --git a/frontend/console/src/features/deployments/DeploymentPage.tsx b/frontend/console/src/features/deployments/DeploymentPage.tsx
deleted file mode 100644
index 23dc8c7ec5..0000000000
--- a/frontend/console/src/features/deployments/DeploymentPage.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { useEffect, useMemo, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useModules } from '../../api/modules/use-modules'
-import { modulesFilter } from '../../api/timeline'
-import { Badge } from '../../components/Badge'
-import { Card } from '../../components/Card'
-import { Page } from '../../layout'
-import type { Module, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
-import { SidePanelProvider } from '../../providers/side-panel-provider'
-import { Timeline } from '../timeline/Timeline'
-import { isCron, isExported, isHttpIngress } from '../verbs/verb.utils'
-
-const timeSettings = { isTailing: true, isPaused: false }
-
-export const DeploymentPage = ({ moduleName }: { moduleName: string }) => {
-  const modules = useModules()
-  const navigate = useNavigate()
-  const [module, setModule] = useState<Module | undefined>()
-
-  const filters = useMemo(() => {
-    if (!module?.deploymentKey) return []
-
-    return [modulesFilter([module.deploymentKey])]
-  }, [module?.deploymentKey])
-
-  useEffect(() => {
-    if (modules.isSuccess && modules.data.modules.length > 0) {
-      const module = modules.data.modules.find((module) => module.name === moduleName)
-      setModule(module)
-    }
-  }, [modules.data, moduleName])
-
-  return (
-    <SidePanelProvider>
-      <Page>
-        <Page.Body className='flex'>
-          <div className=''>
-            <div className='flex-1 h-1/2 p-4 overflow-y-scroll'>
-              <div className='grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4'>
-                {module?.verbs.map((verb) => (
-                  <Card key={verb.verb?.name} topBarColor='bg-green-500' onClick={() => navigate(`/modules/${module.name}/verb/${verb.verb?.name}`)}>
-                    <p className='trucate text-sm overflow-hidden'>{verb.verb?.name}</p>
-                    {badges(verb).length > 0 && (
-                      <div className='pt-1 space-x-1'>
-                        {badges(verb).map((badge) => (
-                          <Badge key={badge} name={badge} />
-                        ))}
-                      </div>
-                    )}
-                  </Card>
-                ))}
-              </div>
-            </div>
-            <div className='cursor-col-resize bg-gray-200 dark:bg-gray-700 hover:bg-indigo-600 h-0.5' />
-            <div className='flex-1 h-1/2 overflow-y-scroll'>{module?.deploymentKey && <Timeline timeSettings={timeSettings} filters={filters} />}</div>
-          </div>
-        </Page.Body>
-      </Page>
-    </SidePanelProvider>
-  )
-}
-
-const badges = (verb?: Verb) => {
-  const all: string[] = []
-  if (isHttpIngress(verb)) all.push('http')
-  if (isCron(verb)) all.push('cron')
-  if (isExported(verb)) all.push('exported')
-  return all
-}
diff --git a/frontend/console/src/features/deployments/DeploymentsPage.tsx b/frontend/console/src/features/deployments/DeploymentsPage.tsx
deleted file mode 100644
index cbde32f835..0000000000
--- a/frontend/console/src/features/deployments/DeploymentsPage.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useModules } from '../../api/modules/use-modules'
-import { Page } from '../../layout'
-import { DeploymentCard } from './DeploymentCard'
-
-export const DeploymentsPage = () => {
-  const modules = useModules()
-
-  if (!modules.isSuccess) {
-    return <Page>Loading...</Page>
-  }
-
-  return (
-    <Page>
-      <Page.Body className='flex'>
-        {modules.isLoading && <div>Loading...</div>}
-        {modules.isSuccess && (
-          <div className='p-4 grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 overflow-y-scroll'>
-            {modules.data.modules.map((module) => (
-              <DeploymentCard key={module.deploymentKey} deploymentKey={module.deploymentKey} />
-            ))}
-          </div>
-        )}
-      </Page.Body>
-    </Page>
-  )
-}
diff --git a/frontend/console/src/features/logs/LogLevelBadge.tsx b/frontend/console/src/features/logs/LogLevelBadge.tsx
deleted file mode 100644
index d48b654a89..0000000000
--- a/frontend/console/src/features/logs/LogLevelBadge.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { logLevelBadge, logLevelText } from './log.utils'
-
-export const LogLevelBadge = ({ logLevel }: { logLevel: number }) => {
-  return (
-    <span className={`${logLevelBadge[logLevel]} inline-flex items-center rounded-md px-2 py-1 text-xs font-medium font-roboto-mono`}>
-      {logLevelText[logLevel]}
-    </span>
-  )
-}
diff --git a/frontend/console/src/features/map/Map.tsx b/frontend/console/src/features/map/Map.tsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/frontend/console/src/features/modules/decls/VerbPanel.tsx b/frontend/console/src/features/modules/decls/VerbPanel.tsx
deleted file mode 100644
index 42f94b86aa..0000000000
--- a/frontend/console/src/features/modules/decls/VerbPanel.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { useNavigate } from 'react-router-dom'
-import { Badge } from '../../../components/Badge'
-import type { Ref, Type, Verb } from '../../../protos/xyz/block/ftl/v1/schema/schema_pb'
-import { VerbRequestEditor } from './VerbRequestEditor'
-
-const DataRef = ({ heading, r }: { heading: string; r: Ref }) => {
-  const navigate = useNavigate()
-  return (
-    <div
-      className={ioBlockClassName}
-      onClick={() => {
-        navigate(`/modules/${r.module}/data/${r.name}${window.location.search}`)
-      }}
-    >
-      <div className='text-sm'>{heading}</div>
-      <span className='text-xs'>
-        {r.module}.{r.name}
-      </span>
-    </div>
-  )
-}
-
-const ioBlockClassName =
-  'rounded-md inline-block align-middle w-40 bg-gray-200 dark:bg-gray-900 my-3 mr-3 py-1 px-2 hover:bg-gray-100 hover:cursor-pointer hover:dark:bg-gray-700'
-const IOBlock = ({ heading, t }: { heading: string; t?: Type }) => {
-  if (!t) {
-    return
-  }
-  if (t.value.case === 'ref') {
-    return <DataRef heading={heading} r={t.value.value} />
-  }
-  return (
-    <div className={ioBlockClassName}>
-      <div className='text-sm'>{heading}</div>
-      <div className='text-xs'>{t.value.case}</div>
-    </div>
-  )
-}
-
-export const VerbHeader = ({ value, moduleName, declName }: { value: Verb; moduleName: string; declName: string }) => {
-  return (
-    <div className='flex-1 py-2 px-4 border-b-2 border-gray-200 dark:border-gray-700'>
-      {value.export ? (
-        <div>
-          <Badge name='Exported' />
-        </div>
-      ) : (
-        []
-      )}
-      <div className='inline-block mr-3 align-middle'>
-        <p>
-          verb: {moduleName}.{declName}
-        </p>
-        {value.comments.length > 0 ? <p className='text-xs my-1'>{value.comments}</p> : []}
-      </div>
-      <IOBlock heading='Request' t={value.request} />
-      <IOBlock heading='Response' t={value.response} />
-    </div>
-  )
-}
-
-export const VerbPanel = ({ value, moduleName, declName }: { value: Verb; moduleName: string; declName: string }) => {
-  return (
-    <div className='h-full'>
-      <VerbHeader value={value} moduleName={moduleName} declName={declName} />
-      <VerbRequestEditor moduleName={moduleName} v={value} />
-    </div>
-  )
-}
diff --git a/frontend/console/src/features/timeline/TimelinePage.tsx b/frontend/console/src/features/timeline/TimelinePage.tsx
index f56c829f7c..da80a90109 100644
--- a/frontend/console/src/features/timeline/TimelinePage.tsx
+++ b/frontend/console/src/features/timeline/TimelinePage.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { Page } from '../../layout'
 import type { EventsQuery_Filter } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { SidePanelProvider } from '../../providers/side-panel-provider'
 import { Timeline } from './Timeline'
@@ -33,17 +32,15 @@ export const TimelinePage = () => {
 
   return (
     <SidePanelProvider>
-      <Page>
-        <Page.Body className='flex'>
-          <div className='sticky top-0 flex-none overflow-y-auto'>
-            <TimelineTimeControls selectedTimeRange={selectedTimeRange} isTimelinePaused={isTimelinePaused} onTimeSettingsChange={handleTimeSettingsChanged} />
-            <TimelineFilterPanel onFiltersChanged={handleFiltersChanged} />
-          </div>
-          <div className='flex-grow overflow-y-scroll'>
-            <Timeline timeSettings={timeSettings} filters={filters} />
-          </div>
-        </Page.Body>
-      </Page>
+      <div className='flex h-full'>
+        <div className='flex-none overflow-y-auto'>
+          <TimelineTimeControls selectedTimeRange={selectedTimeRange} isTimelinePaused={isTimelinePaused} onTimeSettingsChange={handleTimeSettingsChanged} />
+          <TimelineFilterPanel onFiltersChanged={handleFiltersChanged} />
+        </div>
+        <div className='flex-grow overflow-y-scroll'>
+          <Timeline timeSettings={timeSettings} filters={filters} />
+        </div>
+      </div>
     </SidePanelProvider>
   )
 }
diff --git a/frontend/console/src/features/traces/TraceRequestList.tsx b/frontend/console/src/features/traces/TraceRequestList.tsx
index 4b2b92f316..ea0f3462cd 100644
--- a/frontend/console/src/features/traces/TraceRequestList.tsx
+++ b/frontend/console/src/features/traces/TraceRequestList.tsx
@@ -4,6 +4,8 @@ import type { Event } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { SidePanelContext } from '../../providers/side-panel-provider'
 import TimelineEventList from '../timeline/TimelineEventList'
 import { TimelineCallDetails } from '../timeline/details/TimelineCallDetails'
+import { TimelineDetailsHeader } from '../timeline/details/TimelineDetailsHeader'
+import { TimelineIngressDetails } from '../timeline/details/TimelineIngressDetails'
 import { groupEventsByRequestKey } from './traces.utils'
 
 export const TraceRequestList = ({ module, verb }: { module: string; verb?: string }) => {
@@ -22,7 +24,14 @@ export const TraceRequestList = ({ module, verb }: { module: string; verb?: stri
       return
     }
     setSelectedEventId(event.id)
-    openPanel(<TimelineCallDetails event={event} />)
+    switch (event.entry?.case) {
+      case 'call':
+        openPanel(<TimelineCallDetails event={event} />, <TimelineDetailsHeader event={event} />)
+        break
+      case 'ingress':
+        openPanel(<TimelineIngressDetails event={event} />, <TimelineDetailsHeader event={event} />)
+        break
+    }
   }
 
   const events = Object.entries(traceEvents).map(([_, events]) => events[0])
diff --git a/frontend/console/src/features/verbs/VerbPage.tsx b/frontend/console/src/features/verbs/VerbPage.tsx
index eddb922eec..450b301d99 100644
--- a/frontend/console/src/features/verbs/VerbPage.tsx
+++ b/frontend/console/src/features/verbs/VerbPage.tsx
@@ -4,7 +4,6 @@ import { useNavigate } from 'react-router-dom'
 import { useModules } from '../../api/modules/use-modules'
 import { Loader } from '../../components/Loader'
 import { ResizablePanels } from '../../components/ResizablePanels'
-import { Page } from '../../layout'
 import type { Module, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { NotificationType, NotificationsContext } from '../../providers/notifications-provider'
 import { SidePanelProvider } from '../../providers/side-panel-provider'
@@ -55,16 +54,16 @@ export const VerbPage = ({ moduleName, declName }: { moduleName: string; declNam
 
   return (
     <SidePanelProvider>
-      <Page>
-        <Page.Body className='flex h-full'>
+      <div className='flex flex-col h-full'>
+        <div className='flex h-full'>
           <ResizablePanels
             mainContent={<VerbRequestForm module={module} verb={verb} />}
             rightPanelHeader={header}
             rightPanelPanels={verbPanels(verb)}
             bottomPanelContent={<TraceRequestList module={module.name} verb={verb.verb?.name} />}
           />
-        </Page.Body>
-      </Page>
+        </div>
+      </div>
     </SidePanelProvider>
   )
 }
diff --git a/frontend/console/src/layout/Page.tsx b/frontend/console/src/layout/Page.tsx
deleted file mode 100644
index 78e30c2290..0000000000
--- a/frontend/console/src/layout/Page.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import type React from 'react'
-import { classNames } from '../utils'
-
-const Body: React.FC<{
-  className?: string
-  style?: React.CSSProperties
-  children?: React.ReactNode
-}> = ({ className, style, children }) => {
-  return (
-    <div className={classNames(className, 'flex-1')} style={{ height: 'calc(100% - 44px)', ...style }}>
-      {children}
-    </div>
-  )
-}
-
-export const Page: React.FC<{
-  className?: string
-  style?: React.CSSProperties
-  children?: React.ReactNode
-}> & {
-  Body: typeof Body
-} = ({ className, style, children }) => {
-  return (
-    <div className={classNames(className, 'flex flex-col h-full')} style={style}>
-      {children}
-    </div>
-  )
-}
-
-Page.Body = Body
diff --git a/frontend/console/src/layout/index.ts b/frontend/console/src/layout/index.ts
deleted file mode 100644
index 504cdc12a3..0000000000
--- a/frontend/console/src/layout/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Page'