diff --git a/console/client/src/features/calls/CallList.tsx b/console/client/src/features/calls/CallList.tsx
index 9a2f0f44cc..0ce1f6ca68 100644
--- a/console/client/src/features/calls/CallList.tsx
+++ b/console/client/src/features/calls/CallList.tsx
@@ -82,7 +82,7 @@ export const CallList = ({ calls }: Props) => {
                   <td className='p-1 flex-1 flex-grow truncate' title={call.response}>
                     {call.response}
                   </td>
-                  <td className='p-1 flex-1 flex-grow truncate' title={call.error}>
+                  <td className='p-1 flex-1 flex-grow truncate text-red-500' title={call.error}>
                     {call.error}
                   </td>
                 </tr>
diff --git a/console/client/src/features/verbs/VerbForm.tsx b/console/client/src/features/verbs/VerbForm.tsx
index 8f4c2fdaf3..fad753fe2e 100644
--- a/console/client/src/features/verbs/VerbForm.tsx
+++ b/console/client/src/features/verbs/VerbForm.tsx
@@ -88,7 +88,7 @@ export const VerbForm = ({ module, verb }: Props) => {
         <div className='border border-gray-200 dark:border-slate-800 rounded-sm'>
           <Editor
             key={[module?.name, verb?.verb?.name].join('.')}
-            height='35vh'
+            height='20vh'
             theme={`${isDarkMode ? 'vs-dark' : 'light'}`}
             defaultLanguage='json'
             path={[module?.name, verb?.verb?.name].join('.')}
@@ -101,13 +101,14 @@ export const VerbForm = ({ module, verb }: Props) => {
             beforeMount={handleEditorWillMount}
           />
         </div>
-
-        <button
-          type='submit'
-          className='bg-indigo-700 text-white mt-4 px-4 py-2 rounded hover:bg-indigo-600 focus:outline-none focus:bg-indigo-600'
-        >
-          Submit
-        </button>
+        <div className='text-right'>
+          <button
+            type='submit'
+            className='bg-indigo-700 text-white mt-4 px-4 py-2 rounded hover:bg-indigo-600 focus:outline-none focus:bg-indigo-600'
+          >
+            Submit
+          </button>
+        </div>
       </form>
       {response && (
         <div className='pt-4'>
diff --git a/console/client/src/features/verbs/VerbPage.tsx b/console/client/src/features/verbs/VerbPage.tsx
index e60c17939f..d506ad448e 100644
--- a/console/client/src/features/verbs/VerbPage.tsx
+++ b/console/client/src/features/verbs/VerbPage.tsx
@@ -3,11 +3,12 @@ import React from 'react'
 import { useParams } from 'react-router-dom'
 import { CodeBlock } from '../../components/CodeBlock'
 import { Page } from '../../layout'
-import { CallEvent, Module, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
+import { CallEvent, EventType, Module, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { modulesContext } from '../../providers/modules-provider'
 import { SidePanelProvider } from '../../providers/side-panel-provider'
-import { getCalls } from '../../services/console.service'
+import { callFilter, eventTypesFilter, streamEvents } from '../../services/console.service'
 import { CallList } from '../calls/CallList'
+import { VerbForm } from './VerbForm'
 import { buildVerbSchema } from './verb.utils'
 
 export const VerbPage = () => {
@@ -15,7 +16,7 @@ export const VerbPage = () => {
   const modules = React.useContext(modulesContext)
   const [module, setModule] = React.useState<Module | undefined>()
   const [verb, setVerb] = React.useState<Verb | undefined>()
-  const [calls, setCalls] = React.useState<CallEvent[] | undefined>()
+  const [calls, setCalls] = React.useState<CallEvent[]>([])
 
   const callData =
     module?.data.filter((data) => [verb?.verb?.request?.name, verb?.verb?.response?.name].includes(data.data?.name)) ??
@@ -34,15 +35,17 @@ export const VerbPage = () => {
     const abortController = new AbortController()
     if (!module) return
 
-    const fetchCalls = async () => {
-      const calls = await getCalls({
+    const streamCalls = async () => {
+      setCalls([])
+      streamEvents({
         abortControllerSignal: abortController.signal,
-        destModule: module.name,
-        destVerb: verb?.verb?.name,
+        filters: [callFilter(module.name, verb?.verb?.name), eventTypesFilter([EventType.CALL])],
+        onEventReceived: (event) => {
+          setCalls((prev) => [event.entry.value as CallEvent, ...prev])
+        },
       })
-      setCalls(calls)
     }
-    fetchCalls()
+    streamCalls()
 
     return () => {
       abortController.abort()
@@ -62,16 +65,21 @@ export const VerbPage = () => {
         />
         <Page.Body className='p-4'>
           <div className='flex-1 flex flex-col h-full'>
-            <div className='flex-1 h-1/2 overflow-y-auto'>
-              {verb?.verb?.request?.toJsonString() && (
-                <CodeBlock
-                  code={buildVerbSchema(
-                    verb?.schema,
-                    callData.map((d) => d.schema),
-                  )}
-                  language='json'
-                />
-              )}
+            <div className='flex-1 flex flex-grow h-1/2 mb-4'>
+              <div className='mr-2 flex-1 w-1/2 overflow-y-auto'>
+                {verb?.verb?.request?.toJsonString() && (
+                  <CodeBlock
+                    code={buildVerbSchema(
+                      verb?.schema,
+                      callData.map((d) => d.schema),
+                    )}
+                    language='json'
+                  />
+                )}
+              </div>
+              <div className='ml-2 flex-1 w-1/2 overflow-y-auto'>
+                <VerbForm module={module} verb={verb} />
+              </div>
             </div>
             <div className='flex-1 h-1/2'>
               <CallList calls={calls} />
diff --git a/console/client/src/layout/SidePanel.tsx b/console/client/src/layout/SidePanel.tsx
index 688a4c2fbc..6342be4edf 100644
--- a/console/client/src/layout/SidePanel.tsx
+++ b/console/client/src/layout/SidePanel.tsx
@@ -8,7 +8,7 @@ export const SidePanel = () => {
   const { isOpen, component } = useContext(SidePanelContext)
 
   return (
-    <div className={`absolute z-20 top-0 border border-red-500 ${bgColor} ${textColor}`}>
+    <div className={`absolute z-20 top-0 ${bgColor} ${textColor}`}>
       <Transition
         show={isOpen}
         as={Fragment}