diff --git a/package.json b/package.json
index 9e2c64e67579..e785772c12b6 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "build-docs-content": "ts-node --esm --project scripts/tsconfig.json ./scripts/build-docs-content-main.mts",
     "build-and-check-release-output": "ts-node --esm --project scripts/tsconfig.json scripts/build-and-check-release-output.mts",
     "dev-app": "ibazel run //src/dev-app:devserver",
+    "universal-app": "bazel run //src/universal-app:server",
     "test": "node ./scripts/run-component-tests.js",
     "test-local": "yarn -s test --local",
     "test-firefox": "yarn -s test --firefox",
diff --git a/src/universal-app/BUILD.bazel b/src/universal-app/BUILD.bazel
index f981c0546e08..ae0c52b272fa 100644
--- a/src/universal-app/BUILD.bazel
+++ b/src/universal-app/BUILD.bazel
@@ -1,9 +1,10 @@
-load("@build_bazel_rules_nodejs//:index.bzl", "nodejs_test")
+load("@bazel_skylib//rules:build_test.bzl", "build_test")
+load("@build_bazel_rules_nodejs//:index.bzl", "nodejs_binary", "npm_package_bin")
 load("//src/cdk:config.bzl", "CDK_TARGETS")
 load("//src/cdk-experimental:config.bzl", "CDK_EXPERIMENTAL_TARGETS")
 load("//src/material:config.bzl", "MATERIAL_TARGETS")
 load("//src/material-experimental:config.bzl", "MATERIAL_EXPERIMENTAL_TARGETS")
-load("//tools:defaults.bzl", "devmode_esbuild", "ng_module", "sass_binary", "ts_library")
+load("//tools:defaults.bzl", "devmode_esbuild", "http_server", "ng_module", "sass_binary", "ts_library")
 load("//tools/angular:index.bzl", "LINKER_PROCESSED_FW_PACKAGES")
 
 package(default_visibility = ["//visibility:public"])
@@ -24,7 +25,18 @@ ng_module(
 )
 
 ts_library(
-    name = "server",
+    name = "client_lib",
+    srcs = [
+        "main.ts",
+    ],
+    deps = [
+        ":kitchen-sink",
+        "@npm//@angular/platform-browser",
+    ],
+)
+
+ts_library(
+    name = "prerender_lib",
     srcs = [
         "prerender.ts",
     ],
@@ -35,22 +47,45 @@ ts_library(
         "@npm//@angular/platform-server",
         "@npm//@bazel/runfiles",
         "@npm//@types/node",
-        "@npm//reflect-metadata",
-        "@npm//zone.js",
     ],
 )
 
 sass_binary(
-    name = "theme_scss",
-    src = "theme.scss",
+    name = "styles_scss",
+    src = "styles.scss",
     deps = [
         "//src/material:sass_lib",
         "//src/material-experimental:sass_lib",
     ],
 )
 
+nodejs_binary(
+    name = "prerender",
+    data = [
+        "index-source.html",
+        ":prerender_bundle",
+        ":styles_scss",
+    ],
+    entry_point = ":prerender_bundle.js",
+    templated_args = [
+        # TODO(josephperrott): update dependency usages to no longer need bazel patch module resolver
+        # See: https://github.com/bazelbuild/rules_nodejs/wiki#--bazel_patch_module_resolver-now-defaults-to-false-2324
+        "--bazel_patch_module_resolver",
+    ],
+)
+
+devmode_esbuild(
+    name = "client_bundle",
+    entry_points = [":main.ts"],
+    platform = "browser",
+    target = "es2016",
+    deps = LINKER_PROCESSED_FW_PACKAGES + [
+        ":client_lib",
+    ],
+)
+
 devmode_esbuild(
-    name = "server_bundle",
+    name = "prerender_bundle",
     entry_point = ":prerender.ts",
     platform = "node",
     # We cannot use `ES2017` or higher as that would result in `async/await` not being downleveled.
@@ -59,21 +94,46 @@ devmode_esbuild(
     # Note: We add all linker-processed FW packages as dependencies here so that ESBuild will
     # map all framework packages to their linker-processed bundles from `tools/angular`.
     deps = LINKER_PROCESSED_FW_PACKAGES + [
-        ":server",
+        ":prerender_lib",
     ],
 )
 
-nodejs_test(
-    name = "server_test",
-    data = [
-        "index.html",
-        ":server_bundle",
-        ":theme_scss",
+npm_package_bin(
+    name = "prerender_test_bin",
+    outs = ["index-prerendered.html"],
+    args = ["$@"],
+    tool = ":prerender",
+)
+
+npm_package_bin(
+    name = "debug_prerender_bin",
+    # Note: the file needs to be called `index.html` specifically so the server can pick it up.
+    outs = ["index.html"],
+    args = [
+        "$@",
+        "--debug",  # Disables some testing behavior that can be annoying while debugging.
     ],
-    entry_point = ":server_bundle.js",
-    templated_args = [
-        # TODO(josephperrott): update dependency usages to no longer need bazel patch module resolver
-        # See: https://github.com/bazelbuild/rules_nodejs/wiki#--bazel_patch_module_resolver-now-defaults-to-false-2324
-        "--bazel_patch_module_resolver",
+    tool = ":prerender",
+)
+
+build_test(
+    name = "prerender_test",
+    targets = [
+        ":prerender_test_bin",
+    ],
+)
+
+http_server(
+    name = "server",
+    srcs = [
+        ":debug_prerender_bin",
+    ],
+    additional_root_paths = [
+        "npm/node_modules",
+    ],
+    tags = ["manual"],
+    deps = [
+        ":client_bundle",
+        ":styles_scss",
     ],
 )
diff --git a/src/universal-app/DEBUG.md b/src/universal-app/DEBUG.md
deleted file mode 100644
index cf1190863bd3..000000000000
--- a/src/universal-app/DEBUG.md
+++ /dev/null
@@ -1,10 +0,0 @@
-### Debugging the pre-rendered HTML file
-
-Since the pre-rendered HTML file is built through a Bazel test target, the
-generated HTML file will not be stored in a folder of the repository. Instead,
-the file will be stored in the `bazel-out` folder.
-
-You can retrieve the path to the file by either running:
-
-* `bazel run //src/universal-app:server_test --test_output=all`
-* `echo $(bazel info bazel-testlogs)/src/universal-app/server_test/test.outputs/index-prerendered.html`
diff --git a/src/universal-app/README.md b/src/universal-app/README.md
new file mode 100644
index 000000000000..7236f8ac0e04
--- /dev/null
+++ b/src/universal-app/README.md
@@ -0,0 +1,8 @@
+### Server-side debugging app
+
+Application that renders all components on the server and hydrates them on the client. Common tasks:
+
+* Run `yarn universal-app` to start a local server. **Does not support live reload**
+* To inspect the server-side-generated HTML, run `yarn universal-app`, visit the local server and
+use either the dev tools or "View source" to see the `index.html` provided by the server.
+* To test if all components would render on the server, run `yarn bazel test src/universal-app:prerender_test`.
diff --git a/src/universal-app/index.html b/src/universal-app/index-source.html
similarity index 53%
rename from src/universal-app/index.html
rename to src/universal-app/index-source.html
index 7a2332c9b242..793b41b6725c 100644
--- a/src/universal-app/index.html
+++ b/src/universal-app/index-source.html
@@ -4,32 +4,18 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Angular Material Universal Kitchen Sink Test</title>
-  <link href="theme.css" rel="stylesheet">
+  <link href="styles.css" rel="stylesheet">
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <base href="/">
-
-  <style>
-    /* Make sure bottom sheet doesn't obscure components. */
-    body {
-      padding-bottom: 80px;
-    }
-
-    /*
-     * Hide the overlay so hover styles can be tested,
-     * but show a message so we can see that the overlay is there.
-     */
-    .cdk-overlay-backdrop {
-      bottom: 100vh !important;
-    }
-    .cdk-overlay-backdrop::after {
-      content: 'OVERLAY ACTIVE';
-      background: lime;
-    }
-  </style>
 </head>
-<body>
+<body class="mat-app-background mat-typography">
   <kitchen-sink>Loading...</kitchen-sink>
+
+  <script src="zone.js/bundles/zone.umd.min.js"></script>
+  <script src="https://maps.googleapis.com/maps/api/js?libraries=visualization"></script>
+  <script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>
+  <script src="client_bundle/main.js" type="module"></script>
 </body>
 </html>
diff --git a/src/universal-app/kitchen-sink/kitchen-sink.html b/src/universal-app/kitchen-sink/kitchen-sink.html
index e056f2e7b0d8..0577c3829a1a 100644
--- a/src/universal-app/kitchen-sink/kitchen-sink.html
+++ b/src/universal-app/kitchen-sink/kitchen-sink.html
@@ -1,10 +1,19 @@
 <h2>Autocomplete</h2>
-<mat-autocomplete>
-  <mat-option>Grace Hopper</mat-option>
-  <mat-option>Anita Borg</mat-option>
-  <mat-option>Ada Lovelace</mat-option>
+
+<mat-form-field>
+  <mat-label>Computer scientists</mat-label>
+  <input matInput [matAutocomplete]="autocomplete">
+</mat-form-field>
+
+<mat-autocomplete #autocomplete>
+  <mat-option value="Grace Hopper">Grace Hopper</mat-option>
+  <mat-option value="Anita Borg">Anita Borg</mat-option>
+  <mat-option value="Ada Lovelace">Ada Lovelace</mat-option>
 </mat-autocomplete>
 
+<h2>Bottom sheet</h2>
+<button mat-raised-button (click)="openBottomSheet()">Open bottom sheet</button>
+
 <h2>Button</h2>
 
 <button mat-button>go</button>
@@ -91,7 +100,7 @@ <h2>Datepicker</h2>
   <mat-datepicker #birthday></mat-datepicker>
 </mat-form-field>
 
-<h2>Disabled datepicker</h2>
+<h3>Disabled datepicker</h3>
 
 <mat-form-field>
   <input type="text" disabled matInput [matDatepicker]="departureDate" placeholder="Departure date">
@@ -99,6 +108,9 @@ <h2>Disabled datepicker</h2>
   <mat-datepicker #departureDate></mat-datepicker>
 </mat-form-field>
 
+<h2>Dialog</h2>
+<button mat-raised-button (click)="openDialog()">Open dialog</button>
+
 <h2>Grid list</h2>
 
 <mat-grid-list cols="4">
@@ -244,12 +256,19 @@ <h2>Select</h2>
 
 <h2>Sidenav</h2>
 <mat-sidenav-container>
-  <mat-sidenav opened>
+  <!--
+    TODO: add sample with multiple sidenavs which can be problematic for hydration.
+    Currently blocked on https://github.com/angular/angular/issues/53246
+  -->
+  <!--
+    Only attempt to capture focus when automated, otherwise it makes the page jump around.
+   -->
+  <mat-sidenav #sidenav opened [autoFocus]="isAutomated ? 'first-tabbable' : false">
     On the side
-    <button>Button for testing focus trapping</button>
+    <button (click)="sidenav.toggle()">Button for testing focus trapping</button>
   </mat-sidenav>
   Main content
-  <button>Click me</button>
+  <button (click)="sidenav.toggle()">Click me</button>
 </mat-sidenav-container>
 
 <h2>Slide-toggle</h2>
@@ -272,6 +291,9 @@ <h2>Slider</h2>
   <input value="400" matSliderEndThumb>
 </mat-slider>
 
+<h2>Snack bar</h2>
+<button mat-raised-button (click)="openSnackbar()">Open snackbar</button>
+
 <h2>Tabs</h2>
 
 <!--
@@ -313,21 +335,25 @@ <h2>Toolbar</h2>
 <h2>Sort</h2>
 
 <table matSort>
-  <tr>
-    <th mat-sort-header="name">Name</th>
-    <th mat-sort-header="calories">Calories</th>
-    <th mat-sort-header="fat">Fat</th>
-    <th mat-sort-header="carbs">Carbs</th>
-    <th mat-sort-header="protein">Protein</th>
-  </tr>
-
-  <tr>
-    <td>Cupcake</td>
-    <td>305</td>
-    <td>4</td>
-    <td>67</td>
-    <td>4</td>
-  </tr>
+  <thead>
+    <tr>
+      <th mat-sort-header="name">Name</th>
+      <th mat-sort-header="calories">Calories</th>
+      <th mat-sort-header="fat">Fat</th>
+      <th mat-sort-header="carbs">Carbs</th>
+      <th mat-sort-header="protein">Protein</th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr>
+      <td>Cupcake</td>
+      <td>305</td>
+      <td>4</td>
+      <td>67</td>
+      <td>4</td>
+    </tr>
+  </tbody>
 </table>
 
 <h2>Tooltip</h2>
@@ -453,7 +479,8 @@ <h2>YouTube player</h2>
 <youtube-player videoId="dQw4w9WgXcQ"></youtube-player>
 
 <h2>Google Map</h2>
-<google-map height="400px" width="750px">
+<!-- position: relative prevents the "Map failed to load" element from leaving the container -->
+<google-map height="400px" width="750px" style="position: relative">
   <map-marker [position]="{lat: 24, lng: 12}"></map-marker>
   <map-info-window>Hello</map-info-window>
   <map-polyline [options]="{
diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts
index 4ad7bf8f1ef1..288513968919 100644
--- a/src/universal-app/kitchen-sink/kitchen-sink.ts
+++ b/src/universal-app/kitchen-sink/kitchen-sink.ts
@@ -2,7 +2,7 @@ import {FocusMonitor} from '@angular/cdk/a11y';
 import {DragDropModule} from '@angular/cdk/drag-drop';
 import {ScrollingModule, ViewportRuler} from '@angular/cdk/scrolling';
 import {CdkTableModule, DataSource} from '@angular/cdk/table';
-import {Component, ElementRef} from '@angular/core';
+import {Component, ElementRef, InjectionToken, inject} from '@angular/core';
 import {MatNativeDateModule, MatRippleModule} from '@angular/material/core';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatButtonModule} from '@angular/material/button';
@@ -55,6 +55,7 @@ import {
   MapTransitLayer,
 } from '@angular/google-maps';
 import {Observable, of as observableOf} from 'rxjs';
+import {DOCUMENT} from '@angular/common';
 
 export class TableDataSource extends DataSource<any> {
   connect(): Observable<any> {
@@ -64,6 +65,8 @@ export class TableDataSource extends DataSource<any> {
   disconnect() {}
 }
 
+export const AUTOMATED_KITCHEN_SINK = new InjectionToken<boolean>('AUTOMATED_KITCHEN_SINK');
+
 @Component({
   template: `<button>Do the thing</button>`,
   standalone: true,
@@ -148,22 +151,43 @@ export class KitchenSink {
   /** Data used to render a virtual scrolling list. */
   virtualScrollData = Array(10000).fill(50);
 
+  /** Whether the kitchen sink is running as a part of an automated test or for local debugging. */
+  isAutomated: boolean;
+
   constructor(
-    snackBar: MatSnackBar,
-    dialog: MatDialog,
+    private _snackBar: MatSnackBar,
+    private _dialog: MatDialog,
     viewportRuler: ViewportRuler,
     focusMonitor: FocusMonitor,
     elementRef: ElementRef<HTMLElement>,
-    bottomSheet: MatBottomSheet,
+    private _bottomSheet: MatBottomSheet,
   ) {
+    this.isAutomated = inject(AUTOMATED_KITCHEN_SINK, {optional: true}) ?? true;
     focusMonitor.focusVia(elementRef, 'program');
-    snackBar.open('Hello there');
-    dialog.open(TestEntryComponent);
-    bottomSheet.open(TestEntryComponent);
 
     // Do a sanity check on the viewport ruler.
     viewportRuler.getViewportRect();
     viewportRuler.getViewportSize();
     viewportRuler.getViewportScrollPosition();
+
+    // Only open overlays when automation is enabled since they can prevent debugging.
+    if (this.isAutomated) {
+      inject(DOCUMENT).body.classList.add('test-automated');
+      this.openSnackbar();
+      this.openDialog();
+      this.openBottomSheet();
+    }
+  }
+
+  openSnackbar() {
+    this._snackBar.open('Hello there');
+  }
+
+  openDialog() {
+    this._dialog.open(TestEntryComponent);
+  }
+
+  openBottomSheet() {
+    this._bottomSheet.open(TestEntryComponent);
   }
 }
diff --git a/src/universal-app/main.ts b/src/universal-app/main.ts
new file mode 100644
index 000000000000..0d6de6f33959
--- /dev/null
+++ b/src/universal-app/main.ts
@@ -0,0 +1,14 @@
+import {bootstrapApplication, provideClientHydration} from '@angular/platform-browser';
+import {provideAnimations} from '@angular/platform-browser/animations';
+import {AUTOMATED_KITCHEN_SINK, KitchenSink} from './kitchen-sink/kitchen-sink';
+
+bootstrapApplication(KitchenSink, {
+  providers: [
+    provideAnimations(),
+    provideClientHydration(),
+    {
+      provide: AUTOMATED_KITCHEN_SINK,
+      useValue: false,
+    },
+  ],
+});
diff --git a/src/universal-app/prerender.ts b/src/universal-app/prerender.ts
index 75d255226f3f..af21a895e4e5 100644
--- a/src/universal-app/prerender.ts
+++ b/src/universal-app/prerender.ts
@@ -3,30 +3,51 @@ import 'zone.js';
 
 import {ErrorHandler} from '@angular/core';
 import {bootstrapApplication, provideClientHydration} from '@angular/platform-browser';
-import {renderApplication} from '@angular/platform-server';
-import {readFileSync, writeFileSync} from 'fs';
-import {join} from 'path';
+import {provideServerRendering, renderApplication} from '@angular/platform-server';
+import {provideNoopAnimations} from '@angular/platform-browser/animations';
 import {runfiles} from '@bazel/runfiles';
+import {readFileSync, writeFileSync} from 'fs';
 
-import {KitchenSink} from './kitchen-sink/kitchen-sink';
-import {provideNoopAnimations} from '@angular/platform-browser/animations';
+import {AUTOMATED_KITCHEN_SINK, KitchenSink} from './kitchen-sink/kitchen-sink';
+
+const outputPath = process.argv[2];
+const indexPath = runfiles.resolvePackageRelative('./index-source.html');
+
+// Debug mode disables some automated interactions to make it easier to debug components locally.
+const isDebugMode = process.argv.includes('--debug');
+
+if (!outputPath) {
+  throw new Error('Cannot determine output path for prerendered content');
+}
 
 // Do not enable production mode, because otherwise the `MatCommonModule` won't execute
 // the browser related checks that could cause NodeJS issues.
 
-// Resolve the path to the "index.html" through Bazel runfile resolution.
-const indexHtmlPath = runfiles.resolvePackageRelative('./index.html');
-const themeCssPath = runfiles.resolvePackageRelative('./theme.css');
+renderApplication(bootstrap, {
+  document: readFileSync(indexPath, 'utf-8'),
+})
+  .then(content => writeFileSync(outputPath, content))
+  .catch(error => {
+    // If rendering fails, print the error and exit the process with a non-zero exit code.
+    console.error(error);
+    process.exit(1);
+  });
 
 function bootstrap() {
   return bootstrapApplication(KitchenSink, {
     providers: [
       provideNoopAnimations(),
+      provideServerRendering(),
       provideClientHydration(),
       {
-        // If an error is thrown asynchronously during server-side rendering it'll get logged to
-        // stderr, but it won't cause the build to fail. We still want to catch these errors so we
-        // provide an ErrorHandler that rethrows the error and causes the process to exit correctly.
+        provide: AUTOMATED_KITCHEN_SINK,
+        useValue: !isDebugMode,
+      },
+      {
+        // If an error is thrown asynchronously during server-side rendering
+        // it'll get logged to stderr, but it won't cause the build to fail.
+        // We still want to catch these errors so we provide an ErrorHandler
+        // that rethrows the error and causes the process to exit correctly.
         provide: ErrorHandler,
         useValue: {
           handleError: (error: Error) => {
@@ -37,25 +58,3 @@ function bootstrap() {
     ],
   });
 }
-
-const result = renderApplication(bootstrap, {
-  document: readFileSync(indexHtmlPath, 'utf-8'),
-});
-const outDir = process.env['TEST_UNDECLARED_OUTPUTS_DIR'] as string;
-
-result
-  .then(content => {
-    const filename = join(outDir, 'index-prerendered.html');
-    const themeFilename = join(outDir, 'theme.css');
-
-    console.log('Inspect pre-rendered page here:');
-    console.log(`file://${filename}`);
-    writeFileSync(filename, content, 'utf-8');
-    writeFileSync(themeFilename, readFileSync(themeCssPath, 'utf-8'), 'utf-8');
-    console.log('Prerender done.');
-  })
-  // If rendering fails, print the error and exit the process with a non-zero exit code.
-  .catch(error => {
-    console.error(error);
-    process.exit(1);
-  });
diff --git a/src/universal-app/theme.scss b/src/universal-app/styles.scss
similarity index 59%
rename from src/universal-app/theme.scss
rename to src/universal-app/styles.scss
index 5e44bb588c60..9bab6949a03d 100644
--- a/src/universal-app/theme.scss
+++ b/src/universal-app/styles.scss
@@ -14,10 +14,28 @@ mat.$theme-legacy-inspection-api-compatibility: false;
 $candy-app-primary: mat.define-palette(mat.$indigo-palette);
 $candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
 $candy-app-theme: mat.define-light-theme((
-    color: (primary: $candy-app-primary, accent: $candy-app-accent),
-    typography: mat.define-typography-config(),
-    density: 0
+  color: (primary: $candy-app-primary, accent: $candy-app-accent),
+  typography: mat.define-typography-config(),
+  density: 0
 ));
 
 // Include the default theme styles.
 @include mat.all-component-themes($candy-app-theme);
+@include mat.typography-hierarchy($candy-app-theme);
+
+body.test-automated {
+  // Make sure bottom sheet doesn't obscure components.
+  padding-bottom: 80px;
+
+  // Hide the overlay so hover styles can be tested,
+  // but show a message so we can see that the overlay is there.
+  .cdk-overlay-backdrop {
+    bottom: 100vh !important;
+  }
+
+  .cdk-overlay-backdrop::after {
+    content: 'OVERLAY ACTIVE';
+    background: lime;
+  }
+}
+