diff --git a/apps/client/src/features/control/message/MessageControlExport.module.scss b/apps/client/src/features/control/message/MessageControlExport.module.scss
index 9937fcdd3..1fa4dde5a 100644
--- a/apps/client/src/features/control/message/MessageControlExport.module.scss
+++ b/apps/client/src/features/control/message/MessageControlExport.module.scss
@@ -6,6 +6,11 @@
   overflow: hidden;
 }
 
+/* the extracted route has no flex parent to grow into */
+.extractedPanel {
+  height: 100%;
+}
+
 .contentLayout {
   flex: 1;
   min-height: 0;
diff --git a/apps/client/src/features/control/message/MessageControlExport.tsx b/apps/client/src/features/control/message/MessageControlExport.tsx
index 2a54d2bc8..c8337c513 100644
--- a/apps/client/src/features/control/message/MessageControlExport.tsx
+++ b/apps/client/src/features/control/message/MessageControlExport.tsx
@@ -5,6 +5,7 @@ import ErrorBoundary from '../../../common/components/error-boundary/ErrorBounda
 import ViewNavigationMenu from '../../../common/components/navigation-menu/ViewNavigationMenu';
 import ProtectRoute from '../../../common/components/protect-route/ProtectRoute';
 import { handleLinks } from '../../../common/utils/linkUtils';
+import { cx } from '../../../common/utils/styleUtils';
 import { getIsNavigationLocked } from '../../../externals';
 import MessageControl from './MessageControl';
 
@@ -16,7 +17,10 @@ function MessageControlExport() {
 
   return (
     <ProtectRoute permission='editor'>
-      <Editor.Panel className={style.growPanel} data-testid='panel-messages-control'>
+      <Editor.Panel
+        className={cx([style.growPanel, isExtracted && style.extractedPanel])}
+        data-testid='panel-messages-control'
+      >
         {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('messagecontrol', event)} />}
         {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
 
diff --git a/apps/client/src/features/control/message/TimerPreview.module.scss b/apps/client/src/features/control/message/TimerPreview.module.scss
index 8fcd756bd..aa4c26658 100644
--- a/apps/client/src/features/control/message/TimerPreview.module.scss
+++ b/apps/client/src/features/control/message/TimerPreview.module.scss
@@ -3,6 +3,8 @@
   min-height: 0;
   display: flex;
   flex-direction: column;
+  /* the stage caps at the panel width, so centre whatever slack a tall panel leaves */
+  justify-content: center;
   gap: $element-inner-spacing;
 }
 
diff --git a/apps/client/src/views/editor/pip-timer/PipTimer.tsx b/apps/client/src/views/editor/pip-timer/PipTimer.tsx
index 818bbfff7..a8a977947 100644
--- a/apps/client/src/views/editor/pip-timer/PipTimer.tsx
+++ b/apps/client/src/views/editor/pip-timer/PipTimer.tsx
@@ -41,9 +41,10 @@ export function PipTimer({ viewSettings }: PipTimerProps) {
   // gather timer data
   const totalTime = getTotalTime(time.duration, time.addedTime);
   const stageTimer = getTimerByType(false, timerTypeNow, clock, time, timerTypeNow);
+  // match the defaults of the timer view, which is what the preview is standing in for
   const display = getFormattedTimer(stageTimer, timerTypeNow, 'min', {
     removeSeconds: false,
-    removeLeadingZero: false,
+    removeLeadingZero: true,
   });
 
   const currentAux = (() => {
diff --git a/e2e/tests/features/201-message-control.spec.ts b/e2e/tests/features/201-message-control.spec.ts
index 2bb033c55..2e8fdb520 100644
--- a/e2e/tests/features/201-message-control.spec.ts
+++ b/e2e/tests/features/201-message-control.spec.ts
@@ -19,3 +19,29 @@ test('message control sends messages to screens', async ({ context }) => {
 
   await expect(featurePage.getByText('TIME NOW')).toBeVisible();
 });
+
+test('message control drives the stage screen state', async ({ context }) => {
+  const editorPage = await context.newPage();
+  const featurePage = await context.newPage();
+
+  await editorPage.goto('/messagecontrol');
+  await featurePage.goto('/timer');
+  await featurePage.waitForLoadState('load', { timeout: 5000 });
+
+  // the secondary line defaults to an aux timer, the select is what puts our text on screen
+  await editorPage.getByPlaceholder('Message shown as secondary text in stage timer').fill('testing secondary');
+  await editorPage.getByRole('combobox').click();
+  await editorPage.getByRole('option', { name: 'Message' }).click();
+  await expect(featurePage.getByText('testing secondary')).toBeVisible();
+
+  await editorPage.getByTestId('toggle timer blackout').click();
+  await expect(featurePage.locator('.blackout')).toHaveClass(/blackout--active/);
+
+  // clearing returns the screen to normal, but keeps what the operator typed
+  await editorPage.getByTestId('clear screen').click();
+  await expect(featurePage.locator('.blackout')).not.toHaveClass(/blackout--active/);
+  await expect(featurePage.getByText('testing secondary')).toHaveCount(0);
+  await expect(editorPage.getByPlaceholder('Message shown as secondary text in stage timer')).toHaveValue(
+    'testing secondary',
+  );
+});