diff --git a/packages/base/default-templates/head.gts b/packages/base/default-templates/head.gts
index 6e7d893f37a..4209e250b30 100644
--- a/packages/base/default-templates/head.gts
+++ b/packages/base/default-templates/head.gts
@@ -23,8 +23,7 @@ export default class DefaultHeadTemplate extends GlimmerComponent<{
 
   <template>
     {{! template-lint-disable no-forbidden-elements }}
-    {{! TODO: restore in CS-9807 }}
-    {{!-- <title data-test-card-head-title>{{this.title}}</title> --}}
+    <title data-test-card-head-title>{{this.title}}</title>
     <meta property='og:title' content={{this.title}} />
     <meta name='twitter:title' content={{this.title}} />
 
diff --git a/packages/host/app/index.html b/packages/host/app/index.html
index cdb36deefab..570dafe5056 100644
--- a/packages/host/app/index.html
+++ b/packages/host/app/index.html
@@ -1,54 +1,48 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>Boxel</title>
-    <meta name="description" content="" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-    {{content-for "head"}}
-
-    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
-    <link
-      integrity=""
-      rel="stylesheet"
-      href="{{rootURL}}assets/@cardstack/host.css"
-    />
-    <link
-      href="{{rootURL}}boxel-favicon.png"
-      rel="shortcut icon"
-      type="image/x-icon"
-    />
-    <link href="{{rootURL}}boxel-webclip.png" rel="apple-touch-icon" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
-      rel="stylesheet"
-    />
-
-    {{content-for "head-footer"}}
-
-    <meta data-boxel-head-start />
-    <meta data-boxel-head-end />
-
-  </head>
-  <body>
-    <script type="x/boundary" id="boxel-isolated-start"></script>
-    <script type="x/boundary" id="boxel-isolated-end"></script>
-
-    <!-- in case embercli's hooks insn't run,
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="description" content="" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  {{content-for "head"}}
+
+  <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
+  <link integrity="" rel="stylesheet" href="{{rootURL}}assets/@cardstack/host.css" />
+  <link href="{{rootURL}}boxel-favicon.png" rel="shortcut icon" type="image/x-icon" />
+  <link href="{{rootURL}}boxel-webclip.png" rel="apple-touch-icon" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
+    rel="stylesheet" />
+
+  {{content-for "head-footer"}}
+
+  <meta data-boxel-head-start />
+  <title>Boxel</title>
+  <meta data-boxel-head-end />
+
+</head>
+
+<body>
+  <script type="x/boundary" id="boxel-isolated-start"></script>
+  <script type="x/boundary" id="boxel-isolated-end"></script>
+
+  <!-- in case embercli's hooks insn't run,
          we embed the following div manually -->
-    <div id="ember-basic-dropdown-wormhole"></div>
-    {{content-for "body"}}
-
-    <script type="module">
-      import * as ContentTag from '{{rootURL}}assets/content-tag/standalone.js';
-      globalThis.ContentTagGlobal = ContentTag;
-    </script>
-    <script src="{{rootURL}}assets/vendor.js"></script>
-    <script src="{{rootURL}}assets/@cardstack/host.js"></script>
-
-    {{content-for "body-footer"}}
-  </body>
-</html>
+  <div id="ember-basic-dropdown-wormhole"></div>
+  {{content-for "body"}}
+
+  <script type="module">
+    import * as ContentTag from '{{rootURL}}assets/content-tag/standalone.js';
+    globalThis.ContentTagGlobal = ContentTag;
+  </script>
+  <script src="{{rootURL}}assets/vendor.js"></script>
+  <script src="{{rootURL}}assets/@cardstack/host.js"></script>
+
+  {{content-for "body-footer"}}
+</body>
+
+</html>
\ No newline at end of file
diff --git a/packages/host/app/services/host-mode-service.ts b/packages/host/app/services/host-mode-service.ts
index 0653779e9c6..f35934feef9 100644
--- a/packages/host/app/services/host-mode-service.ts
+++ b/packages/host/app/services/host-mode-service.ts
@@ -1,8 +1,21 @@
 import Service, { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 
 import window from 'ember-window-mock';
 
 import config from '@cardstack/host/config/environment';
+
+const DEFAULT_HEAD_HTML = '<title>Boxel</title>';
+
+function headContainsTitle(html: string): boolean {
+  return /<title[\s>]/.test(html);
+}
+
+function ensureSingleTitle(headHTML: string): string {
+  return headContainsTitle(headHTML)
+    ? headHTML
+    : `${DEFAULT_HEAD_HTML}\n${headHTML}`;
+}
 import type HostModeStateService from '@cardstack/host/services/host-mode-state-service';
 import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
 import type RealmService from '@cardstack/host/services/realm';
@@ -23,6 +36,9 @@ export default class HostModeService extends Service {
   // increasing token to ignore stale async head fetches
   private headUpdateRequestId = 0;
 
+  // tracks whether the current head template contains a title tag
+  @tracked headTemplateContainsTitle = false;
+
   get isActive() {
     if (this.simulatingHostMode) {
       return true;
@@ -167,6 +183,7 @@ export default class HostModeService extends Service {
 
     if (normalizedCardURL === null) {
       // If there is no card, clear the head content
+      this.headTemplateContainsTitle = false;
       this.replaceHeadTemplate(null);
       return;
     }
@@ -192,7 +209,13 @@ export default class HostModeService extends Service {
       return;
     }
 
-    this.replaceHeadTemplate(headHTML);
+    // Track whether the fetched head HTML contains a title
+    this.headTemplateContainsTitle =
+      headHTML !== null && headContainsTitle(headHTML);
+
+    this.replaceHeadTemplate(
+      headHTML !== null ? ensureSingleTitle(headHTML) : null,
+    );
   }
 
   private async fetchPrerenderedHead(
@@ -270,11 +293,11 @@ export default class HostModeService extends Service {
       node = next;
     }
 
-    if (!headHTML || headHTML.trim().length === 0) {
-      return;
-    }
-
-    let fragment = document.createRange().createContextualFragment(headHTML);
+    let contentToInsert =
+      !headHTML || headHTML.trim().length === 0 ? DEFAULT_HEAD_HTML : headHTML;
+    let fragment = document
+      .createRange()
+      .createContextualFragment(contentToInsert);
     parent.insertBefore(fragment, end);
   }
 
diff --git a/packages/host/app/templates/index.gts b/packages/host/app/templates/index.gts
index 8a8a60d7fda..fa5d3f853a5 100644
--- a/packages/host/app/templates/index.gts
+++ b/packages/host/app/templates/index.gts
@@ -219,7 +219,9 @@ export class IndexComponent extends Component<IndexComponentComponentSignature>
 
   <template>
     {{#if this.hostModeService.isActive}}
-      {{pageTitle this.title}}
+      {{#unless this.hostModeService.headTemplateContainsTitle}}
+        {{pageTitle this.title}}
+      {{/unless}}
 
       {{#if this.isError}}
         <div data-test-error='not-found'>
diff --git a/packages/host/tests/acceptance/prerender-html-test.gts b/packages/host/tests/acceptance/prerender-html-test.gts
index f84ce5e6679..b3aef30d07d 100644
--- a/packages/host/tests/acceptance/prerender-html-test.gts
+++ b/packages/host/tests/acceptance/prerender-html-test.gts
@@ -578,8 +578,7 @@ module('Acceptance | prerender | html', function (hooks) {
   test('prerender head html', async function (assert) {
     let url = `${testRealmURL}Cat/paper.json`;
     await visit(renderPath(url, '/html/head/0'));
-    // TODO: restore in CS-9807
-    // assert.dom(`title`).containsText('Paper', 'head format is rendered');
+    assert.dom(`title`).containsText('Paper', 'head format is rendered');
     assert.dom('meta[property="og:title"]').hasAttribute('content', 'Paper');
   });
 
diff --git a/packages/matrix/helpers/isolated-realm-server.ts b/packages/matrix/helpers/isolated-realm-server.ts
index 06168e84511..0a700afaf07 100644
--- a/packages/matrix/helpers/isolated-realm-server.ts
+++ b/packages/matrix/helpers/isolated-realm-server.ts
@@ -333,7 +333,7 @@ export async function startServer({
       };
       realmServer.on('message', onMessage);
     }),
-    new Promise<true>((r) => setTimeout(() => r(true), 60_000)),
+    new Promise<true>((r) => setTimeout(() => r(true), 1500_000)),
   ]);
   if (timeout) {
     throw new Error(
diff --git a/packages/matrix/tests/host-mode.spec.ts b/packages/matrix/tests/host-mode.spec.ts
index eb450c0c0b2..1d8e1950a19 100644
--- a/packages/matrix/tests/host-mode.spec.ts
+++ b/packages/matrix/tests/host-mode.spec.ts
@@ -13,6 +13,7 @@ test.describe('Host mode', () => {
   let publishedRealmURL: string;
   let publishedCardURL: string;
   let publishedWhitePaperCardURL: string;
+  let publishedMyCardURL: string;
   let connectRouteURL: string;
   let username: string;
   let password: string;
@@ -136,6 +137,51 @@ test.describe('Host mode', () => {
       }),
     );
 
+    await postCardSource(
+      page,
+      realmURL,
+      'card-with-head-title.gts',
+      `
+        import { CardDef, Component } from 'https://cardstack.com/base/card-api';
+
+        export class CardWithHeadTitle extends CardDef {
+          static displayName = 'Card With Head Title';
+
+          static head = class Head extends Component<typeof this> {
+            <template>
+              {{! template-lint-disable no-forbidden-elements }}
+              <title>My Custom Title From Head Template</title>
+              <meta name='description' content='A card with a custom title' />
+            </template>
+          };
+
+          static isolated = class Isolated extends Component<typeof this> {
+            <template>
+              <p data-test-card-with-head-title>Card content</p>
+            </template>
+          };
+        }
+      `,
+    );
+
+    await postCardSource(
+      page,
+      realmURL,
+      'my-card.json',
+      JSON.stringify({
+        data: {
+          type: 'card',
+          attributes: {},
+          meta: {
+            adoptsFrom: {
+              module: './card-with-head-title.gts',
+              name: 'CardWithHeadTitle',
+            },
+          },
+        },
+      }),
+    );
+
     await page.reload();
     await page.locator('[data-test-host-mode-isolated]').waitFor();
 
@@ -175,6 +221,7 @@ test.describe('Host mode', () => {
 
     publishedCardURL = `${publishedRealmURL}index.json`;
     publishedWhitePaperCardURL = `${publishedRealmURL}white-paper.json`;
+    publishedMyCardURL = `${publishedRealmURL}my-card.json`;
     connectRouteURL = `http://localhost:4205/connect/${encodeURIComponent(
       publishedRealmURL,
     )}`;
@@ -282,4 +329,18 @@ test.describe('Host mode', () => {
       'No published realm found for origin http://example.com',
     );
   });
+
+  test('page title comes from head format template', async ({ page }) => {
+    await page.goto(publishedMyCardURL);
+    await page.locator('[data-test-card-with-head-title]').waitFor();
+
+    // Wait for the head template to be injected
+    await waitUntil(async () => {
+      const title = await page.title();
+      return title === 'My Custom Title From Head Template';
+    });
+
+    const pageTitle = await page.title();
+    expect(pageTitle).toBe('My Custom Title From Head Template');
+  });
 });
diff --git a/packages/realm-server/server.ts b/packages/realm-server/server.ts
index e6df1c22042..570808e6a79 100644
--- a/packages/realm-server/server.ts
+++ b/packages/realm-server/server.ts
@@ -380,7 +380,7 @@ export class RealmServer {
       let headFragments: string[] = [];
 
       if (headHTML != null) {
-        headFragments.push(headHTML);
+        headFragments.push(this.ensureSingleTitle(headHTML));
       }
 
       if (scopedCSS != null) {
@@ -615,6 +615,13 @@ export class RealmServer {
     ) as Expression;
   }
 
+  private ensureSingleTitle(headHTML: string): string {
+    if (/<title[\s>]/.test(headHTML)) {
+      return headHTML;
+    }
+    return `<title>Boxel</title>\n${headHTML}`;
+  }
+
   private truncateLogLines(value: string, maxLines = 3): string {
     let lines = value.split(/\r?\n/);
     if (lines.length <= maxLines) {
diff --git a/packages/realm-server/tests/indexing-test.ts b/packages/realm-server/tests/indexing-test.ts
index ca983533a68..82894ae3fc3 100644
--- a/packages/realm-server/tests/indexing-test.ts
+++ b/packages/realm-server/tests/indexing-test.ts
@@ -529,13 +529,12 @@ module(basename(__filename), function () {
           'pre-rendered embedded format html is correct',
         );
 
+        let cleanedHead = cleanWhiteSpace(entry.headHtml!);
         assert.ok(entry.headHtml, 'pre-rendered head format html is present');
-
-        // TODO: restore in CS-9807
-        // assert.ok(
-        //   cleanedHead.includes('<title data-test-card-head-title>'),
-        //   `head html includes cardTitle: ${cleanedHead}`,
-        // );
+        assert.ok(
+          cleanedHead.includes('<title data-test-card-head-title>'),
+          `head html includes cardTitle: ${cleanedHead}`,
+        );
 
         assert.strictEqual(
           trimCardContainer(
diff --git a/packages/realm-server/tests/prerendering-test.ts b/packages/realm-server/tests/prerendering-test.ts
index 870b186bd61..88de3141fa0 100644
--- a/packages/realm-server/tests/prerendering-test.ts
+++ b/packages/realm-server/tests/prerendering-test.ts
@@ -1576,13 +1576,12 @@ module(basename(__filename), function () {
         assert.ok(result.headHTML, 'headHTML should be present');
         let cleanedHead = cleanWhiteSpace(result.headHTML!);
 
-        // TODO: restore in CS-9807
-        // assert.ok(
-        //   cleanedHead.includes(
-        //     '<title data-test-card-head-title>Untitled Cat</title>',
-        //   ),
-        //   `failed to find title in head html:${cleanedHead}`,
-        // );
+        assert.ok(
+          cleanedHead.includes(
+            '<title data-test-card-head-title>Untitled Cat</title>',
+          ),
+          `failed to find title in head html:${cleanedHead}`,
+        );
         assert.ok(
           cleanedHead.includes('property="og:title" content="Untitled Cat"'),
           `failed to find og:title in head html:${cleanedHead}`,
