diff --git a/src/layouts/dashbard-layout.tsx b/src/layouts/dashbard-layout.tsx
index 600cf65..4a3a18c 100644
--- a/src/layouts/dashbard-layout.tsx
+++ b/src/layouts/dashbard-layout.tsx
@@ -1,15 +1,13 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 
 import * as React from 'react';
-
 import { DashboardHeader, DashboardRoot } from '~/components/dashboard';
-import { LayoutType } from '.';
 
-export const DashboardLayout: LayoutType = page => {
+export function DashboardLayout({ children }: React.PropsWithChildren) {
   return (
     <DashboardRoot>
       <DashboardHeader />
-      {page}
+      {children}
     </DashboardRoot>
   );
-};
+}
diff --git a/src/layouts/overlay-layout.tsx b/src/layouts/overlay-layout.tsx
index f872a33..8367d72 100644
--- a/src/layouts/overlay-layout.tsx
+++ b/src/layouts/overlay-layout.tsx
@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { GoogleFontsPrefetch } from '~/modules/webfonts/google-fonts-prefetch';
-import { LayoutType } from '.';
 
-export const OverlayLayout: LayoutType = page => {
+export function OverlayLayout({ children }: React.PropsWithChildren) {
   return (
     <>
       <GoogleFontsPrefetch />
-      <div className="flex flex-col w-full h-screen bg-transparent overflow-hidden">{page}</div>
+      <div className="flex flex-col w-full h-screen bg-transparent overflow-hidden">{children}</div>
     </>
   );
-};
+}
diff --git a/src/pages/blocks/bottom-bar.tsx b/src/pages/blocks/bottom-bar.tsx
index 9b9c71d..eb41dd0 100644
--- a/src/pages/blocks/bottom-bar.tsx
+++ b/src/pages/blocks/bottom-bar.tsx
@@ -1,13 +1,11 @@
-import { NextPage } from 'next';
 import * as React from 'react';
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { BottomBar } from '~/modules/bottom-bar';
 
-const BottomBarPage: NextPage = () => {
-  return <BottomBar />;
-};
-
-export default createNextPage(BottomBarPage, {
-  layout: OverlayLayout,
-});
+export default function BottomBarPage() {
+  return (
+    <OverlayLayout>
+      <BottomBar />
+    </OverlayLayout>
+  );
+}
diff --git a/src/pages/blocks/capture-guard.tsx b/src/pages/blocks/capture-guard.tsx
index 8e4a840..4074a73 100644
--- a/src/pages/blocks/capture-guard.tsx
+++ b/src/pages/blocks/capture-guard.tsx
@@ -1,18 +1,14 @@
 import * as React from 'react';
-import { NextPage } from 'next';
-import { createNextPage } from '~/lib/create-next-page';
 import { OverlayLayout } from '~/layouts/overlay-layout';
 
-const CaptureGuardBlock: NextPage = () => {
+export default function CaptureGuardBlock() {
   return (
-    <div className="flex flex-auto items-center justify-center bg-chungking-black border-4 border-chungking-green-500">
-      <span className="inline-block max-w-[480px] text-4xl text-chungking-white font-semibold">
-        if you&apos;re reading this then something bad happened
-      </span>
-    </div>
+    <OverlayLayout>
+      <div className="flex flex-auto items-center justify-center bg-chungking-black border-4 border-chungking-green-500">
+        <span className="inline-block max-w-[480px] text-4xl text-chungking-white font-semibold">
+          if you&apos;re reading this then something bad happened
+        </span>
+      </div>
+    </OverlayLayout>
   );
-};
-
-export default createNextPage(CaptureGuardBlock, {
-  layout: OverlayLayout,
-});
+}
diff --git a/src/pages/blocks/countdown-timer.tsx b/src/pages/blocks/countdown-timer.tsx
index dd25c0c..beefa35 100644
--- a/src/pages/blocks/countdown-timer.tsx
+++ b/src/pages/blocks/countdown-timer.tsx
@@ -2,11 +2,10 @@ import { useRouter } from 'next/router';
 import * as React from 'react';
 import Countdown from 'react-countdown';
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { useOnMount } from '~/lib/hooks/use-on-mount';
 import { parseNumber } from '~/lib/query-parser';
 
-function CountdownTimerPage() {
+export default function CountdownTimerPage() {
   const router = useRouter();
   const [isCountdownRendered, setIsCountdownRendered] = React.useState(false);
 
@@ -20,23 +19,21 @@ function CountdownTimerPage() {
   );
 
   return (
-    <div>
-      {isCountdownRendered ? (
-        <Countdown
-          date={Date.now() + minutes}
-          precision={3}
-          renderer={props => (
-            <p className="block text-4xl font-bold text-white">
-              {props.minutes.toString().padStart(2, '0')}:
-              {props.seconds.toString().padStart(2, '0')}
-            </p>
-          )}
-        />
-      ) : null}
-    </div>
+    <OverlayLayout>
+      <div>
+        {isCountdownRendered ? (
+          <Countdown
+            date={Date.now() + minutes}
+            precision={3}
+            renderer={props => (
+              <p className="block text-4xl font-bold text-white">
+                {props.minutes.toString().padStart(2, '0')}:
+                {props.seconds.toString().padStart(2, '0')}
+              </p>
+            )}
+          />
+        ) : null}
+      </div>
+    </OverlayLayout>
   );
 }
-
-export default createNextPage(CountdownTimerPage, {
-  layout: OverlayLayout,
-});
diff --git a/src/pages/blocks/flightsim-pip.tsx b/src/pages/blocks/flightsim-pip.tsx
index 81d83a5..a5b3649 100644
--- a/src/pages/blocks/flightsim-pip.tsx
+++ b/src/pages/blocks/flightsim-pip.tsx
@@ -1,14 +1,10 @@
 import * as React from 'react';
-import { NextPage } from 'next';
-import { createNextPage } from '~/lib/create-next-page';
 import { OverlayLayout } from '~/layouts/overlay-layout';
 
-const FlightsimPIPPage: NextPage = () => {
+export default function FlightsimPIPPage() {
   return (
-    <div className="flex-auto h-full max-h-[376px] bg-chungking-blue-500 bg-opacity-25 border-t-4 border-chungking-blue-500" />
+    <OverlayLayout>
+      <div className="flex-auto h-full max-h-[376px] bg-chungking-blue-500 bg-opacity-25 border-t-4 border-chungking-blue-500" />
+    </OverlayLayout>
   );
-};
-
-export default createNextPage(FlightsimPIPPage, {
-  layout: OverlayLayout,
-});
+}
diff --git a/src/pages/blocks/flylive.tsx b/src/pages/blocks/flylive.tsx
index 3793008..3c06783 100644
--- a/src/pages/blocks/flylive.tsx
+++ b/src/pages/blocks/flylive.tsx
@@ -1,13 +1,11 @@
 import * as React from 'react';
-import { NextPage } from 'next';
 import { FlyLiveStats } from '~/modules/flightsim/flylive-stats';
-import { createNextPage } from '~/lib/create-next-page';
 import { OverlayLayout } from '~/layouts/overlay-layout';
 
-const FlyLiveOverlayPage: NextPage = () => {
-  return <FlyLiveStats />;
-};
-
-export default createNextPage(FlyLiveOverlayPage, {
-  layout: OverlayLayout,
-});
+export default function FlyLiveOverlayPage() {
+  return (
+    <OverlayLayout>
+      <FlyLiveStats />
+    </OverlayLayout>
+  );
+}
diff --git a/src/pages/blocks/nye-clock.tsx b/src/pages/blocks/nye-clock.tsx
index 9b519ca..89a4c79 100644
--- a/src/pages/blocks/nye-clock.tsx
+++ b/src/pages/blocks/nye-clock.tsx
@@ -1,12 +1,11 @@
 import { useRouter } from 'next/router';
 import * as React from 'react';
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { useOnMount } from '~/lib/hooks/use-on-mount';
 import { parseString } from '~/lib/query-parser';
 import { StudioClockInterface } from '~/modules/studio-clock/studio-clock-interface';
 
-function NYEClockPage() {
+export default function NYEClockPage() {
   const router = useRouter();
   const [isClockRendered, setIsClockRendered] = React.useState(false);
 
@@ -23,9 +22,9 @@ function NYEClockPage() {
     [router.query],
   );
 
-  return <div>{isClockRendered ? <StudioClockInterface {...clockProps} /> : null}</div>;
+  return (
+    <OverlayLayout>
+      <div>{isClockRendered ? <StudioClockInterface {...clockProps} /> : null}</div>
+    </OverlayLayout>
+  );
 }
-
-export default createNextPage(NYEClockPage, {
-  layout: OverlayLayout,
-});
diff --git a/src/pages/blocks/studio-clock-obs.tsx b/src/pages/blocks/studio-clock-obs.tsx
index 598d353..f8f3c01 100644
--- a/src/pages/blocks/studio-clock-obs.tsx
+++ b/src/pages/blocks/studio-clock-obs.tsx
@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { useOnMount } from '~/lib/hooks/use-on-mount';
 import { StudioClockInterface } from '~/modules/studio-clock/studio-clock-interface';
 
-function StudioClockOBSSourcePage() {
+export default function StudioClockOBSSourcePage() {
   const [isClockRendered, setIsClockRendered] = React.useState(false);
 
   useOnMount(() => {
@@ -12,16 +11,14 @@ function StudioClockOBSSourcePage() {
   });
 
   return (
-    <div className="flex w-full h-screen items-center justify-center bg-chungking-black">
-      {isClockRendered ? (
-        <div className="scale-50">
-          <StudioClockInterface hideTimezone />
-        </div>
-      ) : null}
-    </div>
+    <OverlayLayout>
+      <div className="flex w-full h-screen items-center justify-center bg-chungking-black">
+        {isClockRendered ? (
+          <div className="scale-50">
+            <StudioClockInterface hideTimezone />
+          </div>
+        ) : null}
+      </div>
+    </OverlayLayout>
   );
 }
-
-export default createNextPage(StudioClockOBSSourcePage, {
-  layout: OverlayLayout,
-});
diff --git a/src/pages/blocks/studio-clock.tsx b/src/pages/blocks/studio-clock.tsx
index 611b6d6..cdc3fdb 100644
--- a/src/pages/blocks/studio-clock.tsx
+++ b/src/pages/blocks/studio-clock.tsx
@@ -1,12 +1,11 @@
 import { useRouter } from 'next/router';
 import * as React from 'react';
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { useOnMount } from '~/lib/hooks/use-on-mount';
 import { parseString } from '~/lib/query-parser';
 import { StudioClockInterface } from '~/modules/studio-clock/studio-clock-interface';
 
-function StudioClockPage() {
+export default function StudioClockPage() {
   const router = useRouter();
   const [isClockRendered, setIsClockRendered] = React.useState(false);
 
@@ -23,9 +22,9 @@ function StudioClockPage() {
     [router.query],
   );
 
-  return <div>{isClockRendered ? <StudioClockInterface {...clockProps} /> : null}</div>;
+  return (
+    <OverlayLayout>
+      <div>{isClockRendered ? <StudioClockInterface {...clockProps} /> : null}</div>
+    </OverlayLayout>
+  );
 }
-
-export default createNextPage(StudioClockPage, {
-  layout: OverlayLayout,
-});
diff --git a/src/pages/blocks/time-signal-cerveza.tsx b/src/pages/blocks/time-signal-cerveza.tsx
index abb72f2..410fdeb 100644
--- a/src/pages/blocks/time-signal-cerveza.tsx
+++ b/src/pages/blocks/time-signal-cerveza.tsx
@@ -1,17 +1,15 @@
-import { NextPage } from 'next';
 import dynamic from 'next/dynamic';
 import * as React from 'react';
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 
 const TimeSignalWrapper = dynamic(() => import('~/modules/time-signal/time-signal-wrapper'), {
   ssr: false,
 });
 
-const TimeSignalPage: NextPage = () => {
-  return <TimeSignalWrapper cerveza />;
-};
-
-export default createNextPage(TimeSignalPage, {
-  layout: OverlayLayout,
-});
+export default function TimeSignalPage() {
+  return (
+    <OverlayLayout>
+      <TimeSignalWrapper cerveza />
+    </OverlayLayout>
+  );
+}
diff --git a/src/pages/blocks/time-signal.tsx b/src/pages/blocks/time-signal.tsx
index d2520f0..59e3fea 100644
--- a/src/pages/blocks/time-signal.tsx
+++ b/src/pages/blocks/time-signal.tsx
@@ -1,17 +1,15 @@
-import { NextPage } from 'next';
 import dynamic from 'next/dynamic';
 import * as React from 'react';
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 
 const TimeSignalWrapper = dynamic(() => import('~/modules/time-signal/time-signal-wrapper'), {
   ssr: false,
 });
 
-const TimeSignalPage: NextPage = () => {
-  return <TimeSignalWrapper />;
-};
-
-export default createNextPage(TimeSignalPage, {
-  layout: OverlayLayout,
-});
+export default function TimeSignalPage() {
+  return (
+    <OverlayLayout>
+      <TimeSignalWrapper />
+    </OverlayLayout>
+  );
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index b536cce..ce001a1 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -5,36 +5,33 @@ import { DashboardPageContent, DashboardPageHeader } from '~/components/dashboar
 import { DashboardSection, DashboardSectionHeader } from '~/components/dashboard/section';
 import { LinkList } from '~/components/link-list';
 import { DashboardLayout } from '~/layouts/dashbard-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { blocks, overlays, scenes } from '~/lib/data/dashboard';
 
-function IndexPage() {
+export default function IndexPage() {
   return (
-    <section className="flex h-[calc(100vh-60px)]">
-      <DashboardSidebar />
-      <div className="flex flex-col flex-auto">
-        <DashboardPageHeader title="Home" />
-        <DashboardPageContent>
-          <div className="space-y-8">
-            <DashboardSection>
-              <DashboardSectionHeader>Scenes</DashboardSectionHeader>
-              <LinkList items={scenes} />
-            </DashboardSection>
-            <DashboardSection>
-              <DashboardSectionHeader>Overlays</DashboardSectionHeader>
-              <LinkList items={overlays} />
-            </DashboardSection>
-            <DashboardSection>
-              <DashboardSectionHeader>Blocks</DashboardSectionHeader>
-              <LinkList items={blocks} />
-            </DashboardSection>
-          </div>
-        </DashboardPageContent>
-      </div>
-    </section>
+    <DashboardLayout>
+      <section className="flex h-[calc(100vh-60px)]">
+        <DashboardSidebar />
+        <div className="flex flex-col flex-auto">
+          <DashboardPageHeader title="Home" />
+          <DashboardPageContent>
+            <div className="space-y-8">
+              <DashboardSection>
+                <DashboardSectionHeader>Scenes</DashboardSectionHeader>
+                <LinkList items={scenes} />
+              </DashboardSection>
+              <DashboardSection>
+                <DashboardSectionHeader>Overlays</DashboardSectionHeader>
+                <LinkList items={overlays} />
+              </DashboardSection>
+              <DashboardSection>
+                <DashboardSectionHeader>Blocks</DashboardSectionHeader>
+                <LinkList items={blocks} />
+              </DashboardSection>
+            </div>
+          </DashboardPageContent>
+        </div>
+      </section>
+    </DashboardLayout>
   );
 }
-
-export default createNextPage(IndexPage, {
-  layout: DashboardLayout,
-});
diff --git a/src/pages/overlays/streamelements.tsx b/src/pages/overlays/streamelements.tsx
index c7fb957..77c9738 100644
--- a/src/pages/overlays/streamelements.tsx
+++ b/src/pages/overlays/streamelements.tsx
@@ -1,17 +1,16 @@
 import * as React from 'react';
 import dynamic from 'next/dynamic';
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 
 const StreamElementsAlerts = dynamic(
   () => import('~/modules/alerts/streamelements-alerts').then(mod => mod.StreamElementsAlerts),
   { ssr: false },
 );
 
-function StreamElementsOverlayPage() {
-  return <StreamElementsAlerts />;
+export default function StreamElementsOverlayPage() {
+  return (
+    <OverlayLayout>
+      <StreamElementsAlerts />
+    </OverlayLayout>
+  );
 }
-
-export default createNextPage(StreamElementsOverlayPage, {
-  layout: OverlayLayout,
-});
diff --git a/src/pages/scenes/brb.tsx b/src/pages/scenes/brb.tsx
index 4950c92..50d7a4b 100644
--- a/src/pages/scenes/brb.tsx
+++ b/src/pages/scenes/brb.tsx
@@ -1,14 +1,12 @@
 import * as React from 'react';
-import { NextPage } from 'next';
 
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { PreStreamScene } from '~/modules/pre-stream/pre-stream-scene';
 
-const BeRightBackScenePage: NextPage = () => {
-  return <PreStreamScene headerText="Be right back." variant="brb" />;
-};
-
-export default createNextPage(BeRightBackScenePage, {
-  layout: OverlayLayout,
-});
+export default function BeRightBackScenePage() {
+  return (
+    <OverlayLayout>
+      <PreStreamScene headerText="Be right back." variant="brb" />
+    </OverlayLayout>
+  );
+}
diff --git a/src/pages/scenes/countdown-standalone.tsx b/src/pages/scenes/countdown-standalone.tsx
index bf68be6..a2e4dfc 100644
--- a/src/pages/scenes/countdown-standalone.tsx
+++ b/src/pages/scenes/countdown-standalone.tsx
@@ -1,12 +1,10 @@
 import * as React from 'react';
-import { NextPage } from 'next';
 
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { useOnMount } from '~/lib/hooks/use-on-mount';
 import { PrestreamCountdown } from '~/modules/pre-stream/pre-stream-countdown';
 
-const StandaloneCountdownPage: NextPage = () => {
+export default function StandaloneCountdownPage() {
   const [clockRendered, setClockRendered] = React.useState(false);
 
   useOnMount(() => {
@@ -23,9 +21,9 @@ const StandaloneCountdownPage: NextPage = () => {
     return null;
   };
 
-  return <div className="flex items-center justify-center h-full w-full">{renderCountdown()}</div>;
-};
-
-export default createNextPage(StandaloneCountdownPage, {
-  layout: OverlayLayout,
-});
+  return (
+    <OverlayLayout>
+      <div className="flex items-center justify-center h-full w-full">{renderCountdown()}</div>
+    </OverlayLayout>
+  );
+}
diff --git a/src/pages/scenes/deep-dip/brb.tsx b/src/pages/scenes/deep-dip/brb.tsx
index 9cb88f4..6700c73 100644
--- a/src/pages/scenes/deep-dip/brb.tsx
+++ b/src/pages/scenes/deep-dip/brb.tsx
@@ -1,14 +1,12 @@
 import * as React from 'react';
-import { NextPage } from 'next';
 
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { PreStreamDeepDipScene } from '~/modules/pre-stream/pre-stream-deep-dip';
 
-const DeepDipBRBScenePage: NextPage = () => {
-  return <PreStreamDeepDipScene headerText="Be right back." variant="brb" />;
-};
-
-export default createNextPage(DeepDipBRBScenePage, {
-  layout: OverlayLayout,
-});
+export default function DeepDipBRBScenePage() {
+  return (
+    <OverlayLayout>
+      <PreStreamDeepDipScene headerText="Be right back." variant="brb" />
+    </OverlayLayout>
+  );
+}
diff --git a/src/pages/scenes/deep-dip/end.tsx b/src/pages/scenes/deep-dip/end.tsx
index 09a1579..5104288 100644
--- a/src/pages/scenes/deep-dip/end.tsx
+++ b/src/pages/scenes/deep-dip/end.tsx
@@ -1,14 +1,12 @@
 import * as React from 'react';
-import { NextPage } from 'next';
 
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { PreStreamDeepDipScene } from '~/modules/pre-stream/pre-stream-deep-dip';
 
-const DeepDipEndScenePage: NextPage = () => {
-  return <PreStreamDeepDipScene headerText="Thanks for watching!" variant="end" />;
-};
-
-export default createNextPage(DeepDipEndScenePage, {
-  layout: OverlayLayout,
-});
+export default function DeepDipEndScenePage() {
+  return (
+    <OverlayLayout>
+      <PreStreamDeepDipScene headerText="Thanks for watching!" variant="end" />
+    </OverlayLayout>
+  );
+}
diff --git a/src/pages/scenes/deep-dip/pre-stream.tsx b/src/pages/scenes/deep-dip/pre-stream.tsx
index 01813a7..9ff82cd 100644
--- a/src/pages/scenes/deep-dip/pre-stream.tsx
+++ b/src/pages/scenes/deep-dip/pre-stream.tsx
@@ -1,14 +1,12 @@
 import * as React from 'react';
-import { NextPage } from 'next';
 
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { PreStreamDeepDipScene } from '~/modules/pre-stream/pre-stream-deep-dip';
 
-const DeepDipPreStreamScenePage: NextPage = () => {
-  return <PreStreamDeepDipScene headerText="Starting soon." variant="pre-stream" />;
-};
-
-export default createNextPage(DeepDipPreStreamScenePage, {
-  layout: OverlayLayout,
-});
+export default function DeepDipPrestreamScenePage() {
+  return (
+    <OverlayLayout>
+      <PreStreamDeepDipScene headerText="Starting soon." variant="pre-stream" />
+    </OverlayLayout>
+  );
+}
diff --git a/src/pages/scenes/end.tsx b/src/pages/scenes/end.tsx
index 81e5db5..5f2cde8 100644
--- a/src/pages/scenes/end.tsx
+++ b/src/pages/scenes/end.tsx
@@ -1,14 +1,12 @@
 import * as React from 'react';
-import { NextPage } from 'next';
 
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { PreStreamScene } from '~/modules/pre-stream/pre-stream-scene';
 
-const EndScenePage: NextPage = () => {
-  return <PreStreamScene headerText="Thanks for watching!" variant="end" />;
-};
-
-export default createNextPage(EndScenePage, {
-  layout: OverlayLayout,
-});
+export default function EndScenePage() {
+  return (
+    <OverlayLayout>
+      <PreStreamScene headerText="Thanks for watching!" variant="end" />
+    </OverlayLayout>
+  );
+}
diff --git a/src/pages/scenes/intermission-standalone.tsx b/src/pages/scenes/intermission-standalone.tsx
index 349a6c8..e1b9c8b 100644
--- a/src/pages/scenes/intermission-standalone.tsx
+++ b/src/pages/scenes/intermission-standalone.tsx
@@ -1,12 +1,10 @@
 import * as React from 'react';
-import { NextPage } from 'next';
 
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { useOnMount } from '~/lib/hooks/use-on-mount';
 import { PrestreamIntermission } from '~/modules/pre-stream/pre-stream-intermission';
 
-const StandaloneIntermissionPage: NextPage = () => {
+export default function StandaloneIntermissionPage() {
   const [clockRendered, setClockRendered] = React.useState(false);
 
   useOnMount(() => {
@@ -23,9 +21,9 @@ const StandaloneIntermissionPage: NextPage = () => {
     return null;
   };
 
-  return <div className="flex items-center justify-center h-full w-full">{renderCountdown()}</div>;
-};
-
-export default createNextPage(StandaloneIntermissionPage, {
-  layout: OverlayLayout,
-});
+  return (
+    <OverlayLayout>
+      <div className="flex items-center justify-center h-full w-full">{renderCountdown()}</div>
+    </OverlayLayout>
+  );
+}
diff --git a/src/pages/scenes/pre-stream-cerveza.tsx b/src/pages/scenes/pre-stream-cerveza.tsx
index acdc1c9..d883b2a 100644
--- a/src/pages/scenes/pre-stream-cerveza.tsx
+++ b/src/pages/scenes/pre-stream-cerveza.tsx
@@ -1,14 +1,12 @@
 import * as React from 'react';
-import { NextPage } from 'next';
 
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { PreStreamScene } from '~/modules/pre-stream/pre-stream-scene';
 
-const PrestreamScenePage: NextPage = () => {
-  return <PreStreamScene headerText="Starting soon." variant="pre-stream-cerveza" />;
-};
-
-export default createNextPage(PrestreamScenePage, {
-  layout: OverlayLayout,
-});
+export default function PrestreamScenePage() {
+  return (
+    <OverlayLayout>
+      <PreStreamScene headerText="Starting soon." variant="pre-stream-cerveza" />
+    </OverlayLayout>
+  );
+}
diff --git a/src/pages/scenes/pre-stream.tsx b/src/pages/scenes/pre-stream.tsx
index f5286cf..59e2b6a 100644
--- a/src/pages/scenes/pre-stream.tsx
+++ b/src/pages/scenes/pre-stream.tsx
@@ -1,14 +1,12 @@
 import * as React from 'react';
-import { NextPage } from 'next';
 
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { PreStreamScene } from '~/modules/pre-stream/pre-stream-scene';
 
-const PrestreamScenePage: NextPage = () => {
-  return <PreStreamScene headerText="Starting soon." variant="pre-stream" />;
-};
-
-export default createNextPage(PrestreamScenePage, {
-  layout: OverlayLayout,
-});
+export default function PrestreamScenePage() {
+  return (
+    <OverlayLayout>
+      <PreStreamScene headerText="Starting soon." variant="pre-stream" />
+    </OverlayLayout>
+  );
+}
diff --git a/src/pages/scenes/studio-clock.tsx b/src/pages/scenes/studio-clock.tsx
index b6c1bd8..1a773ba 100644
--- a/src/pages/scenes/studio-clock.tsx
+++ b/src/pages/scenes/studio-clock.tsx
@@ -1,12 +1,11 @@
 import Image from 'next/image';
 import * as React from 'react';
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { useOnMount } from '~/lib/hooks/use-on-mount';
 import { SceneWrapper } from '~/modules/scenes/scene-wrapper';
 import { StudioClockInterface } from '~/modules/studio-clock/studio-clock-interface';
 
-function StudioClockScenePage() {
+export default function StudioClockScenePage() {
   const [isClockRendered, setIsClockRendered] = React.useState(false);
 
   useOnMount(() => {
@@ -14,28 +13,26 @@ function StudioClockScenePage() {
   });
 
   return (
-    <SceneWrapper transparent className="bg-chungking-black/90">
-      <div className="grid grid-rows-scene-wrapper grid-cols-1 flex-1">
-        <div className="flex flex-col items-center justify-center p-12 space-y-6">
-          {isClockRendered ? (
-            <div className="flex items-center justify-center w-[672px] h-[672px]">
-              <StudioClockInterface hideTimezone transparent className="scale-150" />
-            </div>
-          ) : null}
-          {isClockRendered ? (
-            <Image
-              src="/static/resir014-logo-wordmark.png"
-              width={369}
-              height={114}
-              alt="resir014 logo"
-            />
-          ) : null}
+    <OverlayLayout>
+      <SceneWrapper transparent className="bg-chungking-black/90">
+        <div className="grid grid-rows-scene-wrapper grid-cols-1 flex-1">
+          <div className="flex flex-col items-center justify-center p-12 space-y-6">
+            {isClockRendered ? (
+              <div className="flex items-center justify-center w-[672px] h-[672px]">
+                <StudioClockInterface hideTimezone transparent className="scale-150" />
+              </div>
+            ) : null}
+            {isClockRendered ? (
+              <Image
+                src="/static/resir014-logo-wordmark.png"
+                width={369}
+                height={114}
+                alt="resir014 logo"
+              />
+            ) : null}
+          </div>
         </div>
-      </div>
-    </SceneWrapper>
+      </SceneWrapper>
+    </OverlayLayout>
   );
 }
-
-export default createNextPage(StudioClockScenePage, {
-  layout: OverlayLayout,
-});
diff --git a/src/pages/scenes/tech-issues.tsx b/src/pages/scenes/tech-issues.tsx
index b4ba2bc..431e15d 100644
--- a/src/pages/scenes/tech-issues.tsx
+++ b/src/pages/scenes/tech-issues.tsx
@@ -1,14 +1,11 @@
 import * as React from 'react';
-import { NextPage } from 'next';
-
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { PreStreamScene } from '~/modules/pre-stream/pre-stream-scene';
 
-const TechIssuesPage: NextPage = () => {
-  return <PreStreamScene headerText="Technical issues." variant="tech-issues" />;
-};
-
-export default createNextPage(TechIssuesPage, {
-  layout: OverlayLayout,
-});
+export default function TechIssuesPage() {
+  return (
+    <OverlayLayout>
+      <PreStreamScene headerText="Technical issues." variant="tech-issues" />
+    </OverlayLayout>
+  );
+}
diff --git a/src/pages/scenes/tfh.tsx b/src/pages/scenes/tfh.tsx
index 4aecf0d..2ebb034 100644
--- a/src/pages/scenes/tfh.tsx
+++ b/src/pages/scenes/tfh.tsx
@@ -1,14 +1,11 @@
 import * as React from 'react';
-import { NextPage } from 'next';
-
 import { OverlayLayout } from '~/layouts/overlay-layout';
-import { createNextPage } from '~/lib/create-next-page';
 import { TrackmaniaForHoursMainScene } from '~/modules/tfh/tfh-main-scene';
 
-const TrackmaniaForHoursScenePage: NextPage = () => {
-  return <TrackmaniaForHoursMainScene />;
-};
-
-export default createNextPage(TrackmaniaForHoursScenePage, {
-  layout: OverlayLayout,
-});
+export default function TrackmaniaForHoursScenePage() {
+  return (
+    <OverlayLayout>
+      <TrackmaniaForHoursMainScene />
+    </OverlayLayout>
+  );
+}