From 43fbe2147492a365c8e3b687f02f1f19db39a2b4 Mon Sep 17 00:00:00 2001
From: Leo McArdle <lmcardle@mozilla.com>
Date: Tue, 2 Jul 2024 12:53:37 +0100
Subject: [PATCH] feat(observatory): launch HTTP Observatory (#10371)

Introduces the HTTP Observatory on MDN.

Originally part of the Mozilla Observatory standalone tool, the
HTTP Observatory is now available on MDN under the new "Tools" menu.

Backend: https://github.com/mdn/mdn-http-observatory

(MP-556)

---------

Co-authored-by: Andi Pieper <apieper@mozilla.com>
Co-authored-by: Claas Augner <caugner@mozilla.com>
Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
Co-authored-by: Claas Augner <495429+caugner@users.noreply.github.com>
Co-authored-by: Florian Dieminger <me@fiji-flo.de>
---
 .github/workflows/prod-build.yml              |   3 +
 .github/workflows/stage-build.yml             |   3 +
 .github/workflows/test-build.yml              |   3 +
 build/spas.ts                                 |  43 +-
 .../public/assets/observatory/assessment.svg  |   4 +
 .../public/assets/observatory/fail-icon.svg   |  13 +
 .../observatory/landing-illustration.svg      |  93 +++
 client/public/assets/observatory/lines.svg    |  12 +
 client/public/assets/observatory/mdn.svg      |   8 +
 .../public/assets/observatory/pass-icon.svg   |   7 +
 .../assets/observatory/results-icon.svg       |   4 +
 client/public/assets/observatory/scanning.svg |   4 +
 client/public/assets/observatory/security.svg |   3 +
 client/public/assets/observatory/stars.svg    |   3 +
 .../assets/observatory/summary-icon.svg       |   4 +
 .../assets/observatory/tooltip-arrow.svg      |   5 +
 client/src/app.tsx                            |  18 +-
 client/src/assets/icons/message-question.svg  |   5 +
 client/src/env.ts                             |   4 +
 client/src/homepage/static-page/index.tsx     |  33 +-
 .../observatory/benchmark-chart/index.scss    |  61 ++
 .../src/observatory/benchmark-chart/index.tsx | 253 ++++++++
 client/src/observatory/docs/index.scss        |  28 +
 client/src/observatory/docs/index.tsx         | 217 +++++++
 client/src/observatory/index.scss             | 138 +++++
 client/src/observatory/index.tsx              |  21 +
 client/src/observatory/landing.scss           | 233 ++++++++
 client/src/observatory/landing.tsx            | 208 +++++++
 client/src/observatory/layout.tsx             |  35 ++
 client/src/observatory/progress/index.scss    |  34 ++
 client/src/observatory/progress/index.tsx     |  25 +
 client/src/observatory/results.scss           | 540 ++++++++++++++++++
 client/src/observatory/results.tsx            | 233 ++++++++
 client/src/observatory/results/benchmark.tsx  |  71 +++
 client/src/observatory/results/cookies.tsx    | 117 ++++
 client/src/observatory/results/csp.tsx        | 107 ++++
 client/src/observatory/results/headers.tsx    |  63 ++
 client/src/observatory/results/history.tsx    |  28 +
 .../observatory/results/human-duration.tsx    |  51 ++
 client/src/observatory/results/rating.tsx     | 171 ++++++
 .../src/observatory/results/rescan-button.tsx |  57 ++
 client/src/observatory/results/tests.tsx      | 110 ++++
 client/src/observatory/tooltip/index.scss     |  78 +++
 client/src/observatory/tooltip/index.tsx      |  55 ++
 client/src/observatory/types.ts               | 124 ++++
 client/src/observatory/utils.tsx              | 139 +++++
 client/src/placement-context.tsx              |   3 +-
 client/src/plus/ai-help/banners.tsx           |   1 -
 client/src/telemetry/constants.ts             |   1 +
 client/src/ui/base/_themes.scss               |  62 ++
 client/src/ui/molecules/main-menu/index.tsx   |  15 +-
 client/src/ui/molecules/menu/index.tsx        |   5 +-
 client/src/ui/molecules/plus-menu/index.tsx   |   2 +-
 client/src/ui/molecules/submenu/index.tsx     |   3 +-
 client/src/ui/molecules/tools-menu/index.scss |  11 +
 client/src/ui/molecules/tools-menu/index.tsx  |  45 ++
 .../organisms/top-navigation-main/index.scss  |   1 -
 copy/observatory/faq.md                       | 138 +++++
 copy/observatory/tests_and_scoring.md         |  60 ++
 docs/envvars.md                               |   6 +
 kumascript/macros/HTTPSidebar.ejs             |   4 +-
 libs/constants/index.d.ts                     |   2 +
 libs/constants/index.js                       |   6 +
 libs/types/hydration.ts                       |   1 +
 ssr/render.ts                                 |   2 +-
 65 files changed, 3805 insertions(+), 32 deletions(-)
 create mode 100644 client/public/assets/observatory/assessment.svg
 create mode 100644 client/public/assets/observatory/fail-icon.svg
 create mode 100644 client/public/assets/observatory/landing-illustration.svg
 create mode 100644 client/public/assets/observatory/lines.svg
 create mode 100644 client/public/assets/observatory/mdn.svg
 create mode 100644 client/public/assets/observatory/pass-icon.svg
 create mode 100644 client/public/assets/observatory/results-icon.svg
 create mode 100644 client/public/assets/observatory/scanning.svg
 create mode 100644 client/public/assets/observatory/security.svg
 create mode 100644 client/public/assets/observatory/stars.svg
 create mode 100644 client/public/assets/observatory/summary-icon.svg
 create mode 100644 client/public/assets/observatory/tooltip-arrow.svg
 create mode 100644 client/src/assets/icons/message-question.svg
 create mode 100644 client/src/observatory/benchmark-chart/index.scss
 create mode 100644 client/src/observatory/benchmark-chart/index.tsx
 create mode 100644 client/src/observatory/docs/index.scss
 create mode 100644 client/src/observatory/docs/index.tsx
 create mode 100644 client/src/observatory/index.scss
 create mode 100644 client/src/observatory/index.tsx
 create mode 100644 client/src/observatory/landing.scss
 create mode 100644 client/src/observatory/landing.tsx
 create mode 100644 client/src/observatory/layout.tsx
 create mode 100644 client/src/observatory/progress/index.scss
 create mode 100644 client/src/observatory/progress/index.tsx
 create mode 100644 client/src/observatory/results.scss
 create mode 100644 client/src/observatory/results.tsx
 create mode 100644 client/src/observatory/results/benchmark.tsx
 create mode 100644 client/src/observatory/results/cookies.tsx
 create mode 100644 client/src/observatory/results/csp.tsx
 create mode 100644 client/src/observatory/results/headers.tsx
 create mode 100644 client/src/observatory/results/history.tsx
 create mode 100644 client/src/observatory/results/human-duration.tsx
 create mode 100644 client/src/observatory/results/rating.tsx
 create mode 100644 client/src/observatory/results/rescan-button.tsx
 create mode 100644 client/src/observatory/results/tests.tsx
 create mode 100644 client/src/observatory/tooltip/index.scss
 create mode 100644 client/src/observatory/tooltip/index.tsx
 create mode 100644 client/src/observatory/types.ts
 create mode 100644 client/src/observatory/utils.tsx
 create mode 100644 client/src/ui/molecules/tools-menu/index.scss
 create mode 100644 client/src/ui/molecules/tools-menu/index.tsx
 create mode 100644 copy/observatory/faq.md
 create mode 100644 copy/observatory/tests_and_scoring.md

diff --git a/.github/workflows/prod-build.yml b/.github/workflows/prod-build.yml
index 19210702d04e..b2134db8c9e1 100644
--- a/.github/workflows/prod-build.yml
+++ b/.github/workflows/prod-build.yml
@@ -243,6 +243,9 @@ jobs:
           # Playground
           REACT_APP_PLAYGROUND_BASE_HOST: mdnplay.dev
 
+          # Observatory
+          REACT_APP_OBSERVATORY_API_URL: https://observatory-api.mdn.mozilla.net
+
           # Sentry.
           SENTRY_DSN_BUILD: ${{ secrets.SENTRY_DSN_BUILD }}
           SENTRY_ENVIRONMENT: prod
diff --git a/.github/workflows/stage-build.yml b/.github/workflows/stage-build.yml
index c49aa7009736..2e513a546a5b 100644
--- a/.github/workflows/stage-build.yml
+++ b/.github/workflows/stage-build.yml
@@ -260,6 +260,9 @@ jobs:
           # Playground
           REACT_APP_PLAYGROUND_BASE_HOST: mdnyalp.dev
 
+          # Observatory
+          REACT_APP_OBSERVATORY_API_URL: https://observatory-api.mdn.allizom.net
+
           # Sentry.
           SENTRY_DSN_BUILD: ${{ secrets.SENTRY_DSN_BUILD }}
           SENTRY_ENVIRONMENT: stage
diff --git a/.github/workflows/test-build.yml b/.github/workflows/test-build.yml
index c03defa5a6d4..4f8c96e0af0e 100644
--- a/.github/workflows/test-build.yml
+++ b/.github/workflows/test-build.yml
@@ -156,6 +156,9 @@ jobs:
 
           # Playground
           REACT_APP_PLAYGROUND_BASE_HOST: play.test.mdn.allizom.net
+
+          # Observatory
+          REACT_APP_OBSERVATORY_API_URL: https://observatory-api.mdn.allizom.net
         run: |
 
           # Info about which CONTENT_* environment variables were set and to what.
diff --git a/build/spas.ts b/build/spas.ts
index 2d827eb3ccf7..2cfce722b3dc 100644
--- a/build/spas.ts
+++ b/build/spas.ts
@@ -12,6 +12,8 @@ import {
   VALID_LOCALES,
   MDN_PLUS_TITLE,
   DEFAULT_LOCALE,
+  OBSERVATORY_TITLE_FULL,
+  OBSERVATORY_TITLE,
 } from "../libs/constants/index.js";
 import {
   CONTENT_ROOT,
@@ -38,11 +40,17 @@ const FEATURED_ARTICLES = [
 ];
 
 const LATEST_NEWS: (NewsItem | string)[] = [
+  "blog/mdn-http-observatory-launch/",
   "blog/mdn-curriculum-launch/",
   "blog/baseline-evolution-on-mdn/",
   "blog/introducing-the-mdn-playground/",
 ];
 
+const PAGE_DESCRIPTIONS = Object.freeze({
+  observatory:
+    "Test your site’s HTTP headers, including CSP and HSTS, to find security problems and get actionable recommendations to make your website more secure. Test other websites to see how you compare.",
+});
+
 const contributorSpotlightRoot = CONTRIBUTOR_SPOTLIGHT_ROOT;
 
 async function buildContributorSpotlight(
@@ -145,6 +153,27 @@ export async function buildSPAs(options: {
 
       const SPAs = [
         { prefix: "play", pageTitle: "Playground | MDN" },
+        {
+          prefix: "observatory",
+          pageTitle: `HTTP Header Security Test - ${OBSERVATORY_TITLE_FULL}`,
+          pageDescription: PAGE_DESCRIPTIONS.observatory,
+        },
+        {
+          prefix: "observatory/analyze",
+          pageTitle: `Scan results - ${OBSERVATORY_TITLE_FULL}`,
+          pageDescription: PAGE_DESCRIPTIONS.observatory,
+          noIndexing: true,
+        },
+        {
+          prefix: "observatory/docs/tests_and_scoring",
+          pageTitle: `Tests & Scoring - ${OBSERVATORY_TITLE_FULL}`,
+          pageDescription: PAGE_DESCRIPTIONS.observatory,
+        },
+        {
+          prefix: "observatory/docs/faq",
+          pageTitle: `FAQ - ${OBSERVATORY_TITLE_FULL}`,
+          pageDescription: PAGE_DESCRIPTIONS.observatory,
+        },
         { prefix: "search", pageTitle: "Search", onlyFollow: true },
         { prefix: "plus", pageTitle: MDN_PLUS_TITLE },
         {
@@ -182,10 +211,17 @@ export async function buildSPAs(options: {
         },
       ];
       const locale = VALID_LOCALES.get(pathLocale) || pathLocale;
-      for (const { prefix, pageTitle, noIndexing, onlyFollow } of SPAs) {
+      for (const {
+        prefix,
+        pageTitle,
+        pageDescription,
+        noIndexing,
+        onlyFollow,
+      } of SPAs) {
         const url = `/${locale}/${prefix}`;
         const context: HydrationData = {
           pageTitle,
+          pageDescription,
           locale,
           noIndexing,
           onlyFollow,
@@ -283,6 +319,11 @@ export async function buildSPAs(options: {
     "plus/docs",
     "MDN Plus"
   );
+  await buildStaticPages(
+    fileURLToPath(new URL("../copy/observatory/", import.meta.url)),
+    "observatory/docs",
+    OBSERVATORY_TITLE
+  );
 
   // Build all the home pages in all locales.
   // Fetch merged content PRs for the latest contribution section.
diff --git a/client/public/assets/observatory/assessment.svg b/client/public/assets/observatory/assessment.svg
new file mode 100644
index 000000000000..5ef0f1390efc
--- /dev/null
+++ b/client/public/assets/observatory/assessment.svg
@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="#000" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M33.9263 30.3019L44.6406 41.0162L41.4263 44.2305L30.7121 33.5162V31.8233L30.1335 31.2233C27.6906 33.3233 24.5192 34.5876 21.0692 34.5876C17.3751 34.5876 13.8323 33.1201 11.2202 30.508C8.60809 27.8959 7.14063 24.3531 7.14062 20.659C7.14063 16.965 8.60809 13.4222 11.2202 10.8101C13.8323 8.19794 17.3751 6.73047 21.0692 6.73047C24.7633 6.73047 28.3061 8.19794 30.9182 10.8101C33.5303 13.4222 34.9978 16.965 34.9978 20.659C34.9978 24.109 33.7335 27.2805 31.6335 29.7233L32.2335 30.3019H33.9263ZM21.0692 9.94475L19.8906 10.009C19.3763 11.1233 18.5835 13.009 18.0049 15.3019H24.1335C23.5549 13.009 22.7621 11.1233 22.2478 10.009C21.8621 9.94475 21.4763 9.94475 21.0692 9.94475ZM30.3478 15.3019C29.0835 13.0948 27.0478 11.3805 24.6049 10.5448C25.1192 11.6805 25.7835 13.3305 26.2763 15.3019H30.3478ZM11.7906 15.3019H15.8621C16.3549 13.3305 17.0192 11.6805 17.5335 10.5448C15.0906 11.3805 13.0549 13.0948 11.7906 15.3019ZM10.3549 20.659C10.3549 21.7305 10.5263 22.8662 10.8478 23.8733H15.4335L15.1763 20.659L15.4335 17.4448H10.8478C10.5263 18.4519 10.3549 19.5876 10.3549 20.659ZM31.2906 23.8733C31.6121 22.8662 31.7835 21.7305 31.7835 20.659C31.7835 19.5876 31.6121 18.4519 31.2906 17.4448H26.7049C26.8763 18.5162 26.9621 19.5876 26.9621 20.659C26.9621 21.7305 26.8763 22.8019 26.7049 23.8733H31.2906ZM17.5763 17.4448L17.3192 20.659L17.5763 23.8733H24.5621C24.7335 22.8019 24.8192 21.7305 24.8192 20.659C24.8192 19.5876 24.7335 18.5162 24.5621 17.4448H17.5763ZM21.0692 31.3733C21.4549 31.3733 21.8406 31.3733 22.2049 31.309C22.7406 30.1948 23.5549 28.309 24.1335 26.0162H18.0049C18.5835 28.309 19.3978 30.1948 19.9335 31.309L21.0692 31.3733ZM30.3478 26.0162H26.2763C25.7835 27.9876 25.1192 29.6376 24.6049 30.7733C27.0478 29.9376 29.0835 28.2233 30.3478 26.0162ZM11.7906 26.0162C13.0549 28.2233 15.0906 29.9376 17.5335 30.7733C17.0192 29.6376 16.3549 27.9876 15.8621 26.0162H11.7906Z" />
+</svg>
\ No newline at end of file
diff --git a/client/public/assets/observatory/fail-icon.svg b/client/public/assets/observatory/fail-icon.svg
new file mode 100644
index 000000000000..ace6fbcc3b9e
--- /dev/null
+++ b/client/public/assets/observatory/fail-icon.svg
@@ -0,0 +1,13 @@
+<svg aria-hidden="true" className="fail" width="24" height="27" viewBox="0 -2 24 25" fill="#000"
+  xmlns="http://www.w3.org/2000/svg">
+  <g clipPath="url(#clip0_6033_1063)">
+    <circle cx="12" cy="11.8984" r="9" fill="#fff" />
+    <path
+      d="M12 1.79688C17.53 1.79688 22 6.26687 22 11.7969C22 17.3269 17.53 21.7969 12 21.7969C6.47 21.7969 2 17.3269 2 11.7969C2 6.26687 6.47 1.79688 12 1.79688ZM15.59 6.79688L12 10.3869L8.41 6.79688L7 8.20687L10.59 11.7969L7 15.3869L8.41 16.7969L12 13.2069L15.59 16.7969L17 15.3869L13.41 11.7969L17 8.20687L15.59 6.79688Z" />
+  </g>
+  <defs>
+    <clipPath id="clip0_6033_1063">
+      <rect width="24" height="24" fill="white" transform="translate(0 0.203125)" />
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/client/public/assets/observatory/landing-illustration.svg b/client/public/assets/observatory/landing-illustration.svg
new file mode 100644
index 000000000000..5d25bb039ab8
--- /dev/null
+++ b/client/public/assets/observatory/landing-illustration.svg
@@ -0,0 +1,93 @@
+<svg width="345" height="318" viewBox="0 0 345 318" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M202.364 217.973C226.702 210.209 298.185 171.631 308.448 149.06C319.259 125.283 300.49 90.5217 273.73 71.5437C247.456 52.9111 217.579 71.6478 193.35 65.529C171.354 59.9739 149.164 51.5938 127.36 60.0365C104.116 69.037 129.341 105.169 82.804 117.681C34.5343 130.659 34.0934 176.87 47.5673 197.3C60.4283 216.801 115.041 197.29 138.454 203.734C160.252 209.733 180.153 225.059 202.364 217.973Z"
+    fill="url(#paint0_linear_6797_502)" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M187.165 304.049C149.315 303.775 112.033 304.682 83.6966 305.957C53.8451 307.301 26.9894 312.009 30.7804 314C31.9242 318.249 72.7662 314.073 101.564 315.343C127.709 316.496 152.302 317.859 187.165 317.997C224.331 318.144 243.846 312.875 287.574 316.078C335.061 319.556 348.503 315.933 343.409 314C338.547 312.155 291.835 308.528 264.346 307.262C238.754 306.084 221.707 304.298 187.165 304.049Z"
+    fill="#D5D5D5" />
+  <path
+    d="M268.422 156L330.422 183.818V225.545C330.422 264.143 303.969 300.237 268.422 309C232.875 300.237 206.422 264.143 206.422 225.545V183.818L268.422 156ZM268.422 197.727C258.777 197.727 249.133 205.377 249.133 215.114V225.545C245 225.545 240.866 229.718 240.866 234.586V258.927C240.866 263.1 245 267.273 249.822 267.273H287.711C291.844 267.273 295.977 263.1 295.977 258.232V233.891C295.977 229.718 291.844 225.545 287.711 225.545V215.114C287.711 205.377 278.066 197.727 268.422 197.727ZM268.422 206.073C273.933 206.073 278.755 209.55 278.755 215.114V225.545H258.089V215.114C258.089 209.55 262.911 206.073 268.422 206.073Z"
+    fill="#B5B1F8" />
+  <path
+    d="M179.308 155.193L192.82 150.799L188.316 163.249L171.051 164.713L168.048 161.784C168.048 161.784 164.14 156.12 162.043 152.263C158.777 146.258 154.536 128.096 154.536 128.096L160.542 127.363L179.308 155.193Z"
+    fill="#D99654" />
+  <path
+    d="M217.157 303.844L224.562 305.296V309.654L209.752 310.38C209.752 310.38 209.461 309.003 209.752 308.201C210.458 306.256 213.279 308.023 214.936 306.749C216.073 305.874 217.157 303.844 217.157 303.844Z"
+    fill="#0D086C" />
+  <path
+    d="M193.813 302.91L201.219 304.363V308.72L186.408 309.446C186.408 309.446 186.117 308.069 186.408 307.268C187.114 305.322 189.935 307.09 191.592 305.815C192.729 304.94 193.813 302.91 193.813 302.91Z"
+    fill="#0D086C" />
+  <path
+    d="M201.692 138.958L206.9 136.726C206.9 136.726 212.853 130.029 207.645 127.052C202.436 124.076 209.906 123.229 208.389 121.844C206.826 120.418 204.945 124.498 203.18 123.332C201.24 122.05 209.133 117.379 203.18 117.379C197.227 117.379 202.663 115.266 201.692 114.402C199.954 112.858 196.941 112.413 195.739 114.402C195.609 114.618 195.531 114.863 195.493 115.124C194.917 113.728 194.045 112.419 192.762 112.17C191.308 111.888 189.042 112.914 189.042 112.914V114.402C189.042 114.402 187.453 115.064 186.81 115.891C186.411 116.404 186.016 116.731 186.065 117.379C186.128 118.198 187.23 118.112 187.554 118.867C187.897 119.668 187.51 120.229 187.554 121.099C187.986 129.714 199.459 139.702 199.459 139.702L201.692 138.958Z"
+    fill="black" stroke="black" />
+  <path
+    d="M178.307 128.409C178.186 130.446 180.636 130.955 181.264 131.79C184.453 136.031 181.006 139.439 187.158 140.825C191.963 139.733 192.666 140.874 195.205 132.189C195.84 123.069 192.979 121.899 189.06 121C185.692 120.801 185.606 124.213 183.603 126.814C181.444 128.732 180.746 128.206 178.307 128.409Z"
+    fill="#F2AE9B" />
+  <path d="M197.227 130.027L189.786 128.539" stroke="black" stroke-width="0.5" />
+  <path
+    d="M202.332 143.032L199.27 133.843C199.27 133.843 200.682 133.452 201.312 132.822C202.203 131.93 202.511 131.006 202.332 129.758C202.206 128.876 202.024 128.252 201.311 127.717C200.354 127 199.345 127.239 198.248 127.717C196.729 128.38 195.949 131.284 195.949 131.284L194.998 130.03L187.158 140.829C187.158 140.829 191.004 138.757 193.142 139.785C196.002 141.16 194.998 147.696 194.998 147.696C196.527 145.991 200.802 144.737 202.332 143.032Z"
+    fill="#F2AE9B" />
+  <path d="M188.125 135.93C188.125 135.93 185.123 137.728 183.07 136.75" stroke="black" stroke-width="0.2"
+    stroke-linecap="round" stroke-linejoin="round" />
+  <path
+    d="M185.33 126.66C184.577 128.001 184.963 129.595 186.117 130.242C187.272 130.889 188.833 130.388 189.585 129.047C190.338 127.705 189.952 126.112 188.798 125.465C187.643 124.817 186.082 125.318 185.33 126.66Z"
+    stroke="black" stroke-width="0.5" />
+  <path d="M185.32 126.311C185.32 126.311 184.576 125.565 183.832 125.566" stroke="black" stroke-width="0.5" />
+  <ellipse cx="0.744105" cy="1.48821" rx="0.744105" ry="1.48821"
+    transform="matrix(-0.848214 -0.529653 -0.529653 0.848214 188.297 126.352)" fill="black" />
+  <path
+    d="M187.35 256.591C184.285 239.592 195.135 214.855 195.135 214.855C195.135 214.855 194.209 217.945 208.75 217.946C223.291 217.946 224.25 215.185 224.25 215.185C224.25 215.185 223.943 235.072 224.907 248.194C226.237 266.314 224.907 305.648 224.907 305.648L215.825 306.38L203.903 248.194V277.092V305.648L193.335 302.719C193.335 302.719 189.595 269.038 187.35 256.591Z"
+    fill="#EA9541" />
+  <path
+    d="M204.664 250.001L195.735 216.32C195.735 216.32 184.573 232.429 187.55 252.198C190.526 271.967 194.247 303.452 194.247 303.452L204.664 306.381V250.001Z"
+    fill="#E8672C" />
+  <path
+    d="M195.759 216.506C196.079 220.014 214.451 220.341 225.498 216.506C225.498 216.506 225.6 200.406 224.266 190.215C222.623 177.658 219.706 170.987 216.784 158.666C216.404 157.03 207.057 145.145 205.561 144.394L202.568 142.892C201.251 142.892 195.881 146.961 194.608 147.94C194.658 147.875 194.684 147.84 194.684 147.84L194.337 148.15C194.337 148.15 194.435 148.074 194.608 147.94C193.819 148.987 187.052 157.939 185.359 159.417C183.12 161.371 181.617 161.671 181.617 161.671L169.068 130.73L164.409 131.766L171.143 163.173C171.143 163.173 174.482 170.126 178.625 171.436C181.414 172.318 183.305 171.971 186.107 171.129C188.689 170.353 192.093 167.68 192.093 167.68L195.759 216.506Z"
+    fill="#F7E7CD" />
+  <path
+    d="M160.949 126.367L155.195 128.642C155.195 128.642 151.283 122.349 151.201 121.404C151.118 120.459 151.34 121.024 151.34 121.024M155.568 117.083C155.568 117.083 154.985 116.334 155.178 117.562C155.372 118.789 156.923 122.738 156.923 122.738M153.484 116.925C153.484 116.925 153.012 116.459 153.094 117.403C153.177 118.348 155.562 122.947 155.562 122.947M152.426 118.643C152.426 118.643 151.704 118.275 152.148 119.404C152.591 120.533 154.672 123.623 154.672 123.623"
+    stroke="black" stroke-width="0.5" stroke-linecap="round" />
+  <path
+    d="M160.133 126.636C160.133 126.636 165.051 121.233 162.962 122.265C161.17 123.151 160.173 123.119 159.695 122.988L159.33 122.818L156.26 117.262C156.26 117.262 155.048 116.151 155.174 117.339C155.3 118.526 156.628 122.374 156.628 122.374L153.873 116.865C153.873 116.865 153.08 116.216 153.111 117.128C153.141 118.04 155.263 122.537 155.263 122.537L152.982 118.403C152.982 118.403 151.681 117.929 152.061 119.029C152.44 120.129 154.341 123.163 154.341 123.163L151.678 120.391C151.678 120.391 150.98 120.017 151.011 120.929C151.041 121.842 155.158 128.558 155.158 128.558L160.133 126.636Z"
+    fill="#FE987B" />
+  <path
+    d="M156.56 125.367C156.56 125.367 157.053 124.373 157.568 123.818C158.026 123.326 159.314 122.956 159.314 122.956"
+    stroke="black" stroke-width="0.5" stroke-linecap="round" />
+  <path
+    d="M176.175 121.545L108.619 92.8173C108.619 92.8173 88.611 90.3547 87.5709 93.6779C86.4387 97.2953 102.646 108.137 102.646 108.137L130.305 115.366L174.641 127.443L176.175 121.545Z"
+    fill="#D9D9D9" />
+  <path
+    d="M112.039 94.2898C112.039 94.2898 107.131 90.7225 102.518 88.3772C98.4299 86.2986 91.7406 83.885 91.7406 83.885C91.7406 83.885 89.2522 88.6426 87.8224 91.798C86.266 95.2328 84.274 100.988 84.274 100.988C84.274 100.988 90.7658 105.666 95.5136 106.413C100.171 107.146 102.644 108.135 102.644 108.135C102.644 108.135 106.305 104.714 108.499 101.999C110.686 99.2925 112.039 94.2898 112.039 94.2898Z"
+    fill="#3E7AD8" />
+  <path
+    d="M142.375 115.157C142.375 115.157 133.706 120.407 128.89 119.657C124.075 118.907 123.111 110.656 123.111 110.656C123.111 110.656 123.784 120.218 127.927 119.657C131.796 119.133 128.89 115.157 128.89 115.157"
+    stroke="#90BAE1" />
+  <path
+    d="M132.745 124.157C129.971 123.202 128.893 118.906 128.893 118.906C127.351 120.106 126.966 120.906 126.966 121.156C126.966 121.406 127.6 123.692 128.893 124.907C130.292 126.222 131.597 126.695 133.708 127.157C134.282 127.283 134.955 127.342 135.635 127.361V204.389C133.472 204.689 131.782 205.164 131.782 205.164L128.893 208.915L123.113 251.669L118.298 306.424H123.113L126.003 251.669L131.782 208.915L135.635 208.165V306.424H139.488V208.165L143.34 208.915L148.156 252.419L149.119 306.424H154.898L152.009 251.669L146.23 208.915C146.23 208.915 145.006 206.276 143.34 205.164C142.347 204.501 140.959 204.223 139.488 204.161V127.157V124.157L135.635 124.588C135.635 124.588 133.796 124.518 132.745 124.157Z"
+    fill="#90BAE1" />
+  <path
+    d="M169.695 129.945L165.741 130.907C165.741 130.907 161.978 124.135 161.982 123.17C161.986 122.205 162.141 122.809 162.141 122.809M166.33 119.482C166.33 119.482 165.86 118.638 165.934 119.904C166.008 121.17 167.094 125.386 167.094 125.386M164.441 119.005C164.441 119.005 164.049 118.463 164.045 119.428C164.041 120.392 165.833 125.389 165.833 125.389M163.332 120.575C163.332 120.575 162.703 120.094 163.014 121.299C163.324 122.504 164.964 125.934 164.964 125.934"
+    stroke="black" stroke-width="0.5" stroke-linecap="round" />
+  <path
+    d="M169.058 126.166C169.058 126.166 169.244 124.852 169.539 124.115C169.801 123.461 170.412 122.606 170.412 122.606"
+    stroke="black" stroke-width="0.5" stroke-linecap="round" />
+  <path
+    d="M169.448 129.704C169.448 129.704 171.801 121.405 170.254 122.965C169.92 123.301 169.681 123.864 169.512 124.44C169.221 125.431 169.137 126.463 169.137 126.463L166.643 119.721C166.643 119.721 165.86 118.637 165.933 119.903C166.007 121.169 167.093 125.384 167.093 125.384L164.754 119.244C164.754 119.244 164.049 118.462 164.045 119.427C164.041 120.391 165.833 125.388 165.833 125.388L163.882 120.753C163.882 120.753 162.703 120.093 163.013 121.298C163.323 122.503 164.964 125.933 164.964 125.933L162.613 122.685C162.613 122.685 161.985 122.204 161.981 123.169C161.977 124.134 165.74 130.906 165.74 130.906L169.448 129.704Z"
+    fill="#F2AE9B" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M0 48.5C0 62.5833 11.1929 74 25 74C38.8071 74 50 62.5833 50 48.5C50 34.4167 38.8071 23 25 23C11.1929 23 0 34.4167 0 48.5ZM27.8018 51.8236L30.0802 58.2315L28.1579 58.915L25.8795 52.5071L26.2057 51.8209L26.0868 51.4662C24.6919 51.8466 23.1627 51.748 21.7642 51.0831C20.2667 50.3712 19.1134 49.0937 18.5579 47.5314C18.0025 45.9692 18.0903 44.2503 18.8022 42.7529C19.5141 41.2554 20.7917 40.1021 22.3539 39.5466C23.9162 38.9912 25.6351 39.079 27.1325 39.7909C28.6299 40.5028 29.7832 41.7804 30.3387 43.3426C30.8942 44.9049 30.8063 46.6238 30.0944 48.1212C29.4296 49.5197 28.3059 50.5616 26.9839 51.1472L27.1156 51.4973L27.8018 51.8236ZM26.5131 41.0939L26.0229 40.8928C25.5997 41.2454 24.9149 41.857 24.2386 42.6749L26.7228 43.856C26.9302 42.815 26.9722 41.8979 26.9784 41.3471C26.8345 41.2467 26.6781 41.1723 26.5131 41.0939ZM29.2419 45.0535C29.1547 43.9152 28.6599 42.828 27.8307 42.0185C27.8203 42.5779 27.7716 43.3748 27.5915 44.2689L29.2419 45.0535ZM21.7195 41.4774L23.3699 42.262C23.9496 41.5578 24.5369 41.017 24.9642 40.6557C23.8129 40.5237 22.6574 40.8263 21.7195 41.4774ZM20.1052 43.3723C19.8987 43.8066 19.7493 44.3 19.6855 44.7702L21.5444 45.6539L22.0596 44.3014L22.7833 43.048L20.9244 42.1643C20.6 42.5106 20.3116 42.938 20.1052 43.3723ZM27.9723 48.7097C28.2967 48.3634 28.585 47.9361 28.7915 47.5018C28.998 47.0675 29.1473 46.574 29.2111 46.1038L27.3522 45.2201C27.2153 45.6875 27.0435 46.1383 26.8371 46.5726C26.6306 47.007 26.3894 47.4247 26.1134 47.826L27.9723 48.7097ZM23.6519 43.461L22.9282 44.7144L22.413 46.0669L25.2448 47.4131C25.5207 47.0118 25.762 46.594 25.9684 46.1597C26.1749 45.7254 26.3466 45.2745 26.4836 44.8072L23.6519 43.461ZM22.3836 49.7802C22.5399 49.8545 22.6963 49.9288 22.8563 49.973C23.2882 49.6245 23.9817 49.0171 24.6581 48.1991L22.1738 47.0181C21.9665 48.059 21.9332 48.9803 21.9356 49.5353L22.3836 49.7802ZM27.1771 49.3967L25.5267 48.6121C24.947 49.3162 24.3598 49.8571 23.9324 50.2183C25.0837 50.3503 26.2393 50.0477 27.1771 49.3967ZM19.6548 45.8205C19.7419 46.9589 20.2368 48.0461 21.066 48.8556C21.0764 48.2961 21.1251 47.4993 21.3052 46.6051L19.6548 45.8205ZM18.4519 29.7369C17.8351 29.9562 17.3306 30.4117 17.0495 31.003L14.9296 35.462L17.1591 36.5219L19.279 32.0629L23.738 34.1827L24.7979 31.9532L20.3389 29.8334C19.7476 29.5522 19.0688 29.5175 18.4519 29.7369ZM31.802 67.2833C32.4189 67.0639 32.9234 66.6085 33.2045 66.0172L35.3243 61.5582L33.0948 60.4982L30.975 64.9573L26.5159 62.8374L25.456 65.067L29.9151 67.1868C30.5064 67.4679 31.1851 67.5026 31.802 67.2833ZM6.35379 55.1851C6.57314 55.802 7.02855 56.3065 7.61986 56.5876L12.0789 58.7074L13.1388 56.4779L8.67978 54.3581L10.7996 49.899L8.5701 48.8391L6.45026 53.2982C6.16915 53.8895 6.13445 54.5682 6.35379 55.1851ZM43.9002 41.835C43.6808 41.2182 43.2254 40.7137 42.6341 40.4326L38.1751 38.3127L37.1151 40.5422L41.5742 42.6621L39.4543 47.1211L41.6839 48.181L43.8037 43.722C44.0848 43.1307 44.1195 42.4519 43.9002 41.835Z"
+    fill="#F9CD6B" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M99.5 67C89.2827 67 81 58.7173 81 48.5C81 38.2827 89.2827 30 99.5 30C109.717 30 118 38.2827 118 48.5C118 58.7173 109.717 67 99.5 67ZM102.183 44.4996L104.116 43.6144C104.116 43.6144 104.696 43.3489 105.207 43.6995C105.525 44.1386 105.747 44.6219 105.968 45.1053C108.181 49.9389 106.085 55.5762 101.251 57.7892C96.4173 60.0022 90.78 57.9057 88.567 53.0721C86.354 48.2385 88.4505 42.6012 93.2841 40.3882C93.2841 40.3882 94.2508 39.9456 94.6934 40.9123L95.5786 42.8458L96.5453 42.4032C96.5453 42.4032 97.5121 41.9606 97.9547 42.9273L98.3973 43.894L100.331 43.0088C100.331 43.0088 101.297 42.5662 101.74 43.5329L102.183 44.4996ZM90.2792 51.7035C90.6332 52.4769 91.6198 52.8438 92.3931 52.4897C93.1665 52.1356 93.5334 51.1491 93.1793 50.3757C92.8252 49.6024 91.8387 49.2355 91.0653 49.5896C90.292 49.9436 89.9251 50.9302 90.2792 51.7035ZM92.1951 44.3949C91.4217 44.749 91.0548 45.7355 91.4089 46.5089C91.763 47.2822 92.7495 47.6491 93.5229 47.295C94.2963 46.941 94.6632 45.9544 94.3091 45.1811C93.955 44.4077 92.9685 44.0408 92.1951 44.3949ZM97.285 55.5122C97.6391 56.2855 98.6256 56.6524 99.399 56.2983C100.172 55.9443 100.539 54.9577 100.185 54.1844C99.8311 53.411 98.8446 53.0441 98.0712 53.3982C97.2978 53.7523 96.9309 54.7388 97.285 55.5122ZM95.5554 50.4573C95.9094 51.2306 96.896 51.5975 97.6693 51.2434C98.4427 50.8894 98.8096 49.9028 98.4555 49.1295C98.1014 48.3561 97.1149 47.9892 96.3415 48.3433C95.5682 48.6974 95.2013 49.6839 95.5554 50.4573ZM101.274 50.1777C101.628 50.9511 102.615 51.3179 103.388 50.9639C104.162 50.6098 104.528 49.6233 104.174 48.8499C103.82 48.0765 102.834 47.7096 102.06 48.0637C101.287 48.4178 100.92 49.4043 101.274 50.1777ZM111.163 46.235L109.229 47.1202L110.114 49.0537L112.048 48.1685L111.163 46.235ZM110.277 44.3016L107.622 38.5013L105.688 39.3865L108.344 45.1868L110.277 44.3016Z"
+    fill="#F9CD6B" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M47 100.5C47 108.508 53.4919 115 61.5 115C69.5081 115 76 108.508 76 100.5C76 92.4919 69.5081 86 61.5 86C53.4919 86 47 92.4919 47 100.5ZM69.1046 97.5965C69.0351 97.7689 68.9449 97.9864 68.8349 98.2381C68.5449 98.9016 68.1194 99.7992 67.5768 100.738C67.0334 101.679 66.3789 102.651 65.6336 103.468C64.8855 104.288 64.0695 104.928 63.2083 105.244C62.382 105.548 61.3849 105.602 60.3237 105.491C59.2666 105.38 58.1788 105.108 57.1913 104.79C56.2053 104.473 55.3307 104.113 54.7022 103.833C54.4678 103.728 54.2681 103.635 54.1103 103.559C54.1766 103.404 54.2613 103.212 54.3634 102.99C54.644 102.382 55.0542 101.555 55.5723 100.684C56.6267 98.9112 58.0613 97.0695 59.682 96.377C60.5156 96.0208 61.5372 95.9109 62.6321 95.9665C63.7227 96.0219 64.8531 96.2398 65.8828 96.5101C66.9108 96.7799 67.8269 97.0989 68.4863 97.3508C68.7306 97.4441 68.9392 97.528 69.1046 97.5965ZM53.4701 103.799C53.2369 104.241 53.237 104.241 53.2371 104.241L53.2375 104.241L53.2387 104.242L53.2428 104.244L53.2578 104.252L53.3136 104.281C53.3622 104.305 53.433 104.341 53.5239 104.386C53.7057 104.475 53.9683 104.6 54.2945 104.746C54.9462 105.037 55.8555 105.411 56.8848 105.742C57.9125 106.073 59.0712 106.365 60.2192 106.486C61.3631 106.606 62.5298 106.559 63.5534 106.183C64.6216 105.79 65.5657 105.027 66.3726 104.142C67.1823 103.254 67.8776 102.217 68.4427 101.239C69.0089 100.259 69.4508 99.3258 69.7512 98.6386C69.9015 98.2945 70.0168 98.0111 70.0948 97.8127C70.1339 97.7135 70.1636 97.6355 70.1838 97.5819L70.2068 97.5199L70.2128 97.5033L70.2145 97.4988L70.215 97.4974L70.2152 97.497C70.2152 97.4968 70.2153 97.4967 69.7447 97.3275C69.9532 96.873 69.9531 96.873 69.9529 96.8729L69.9525 96.8727L69.9512 96.8721L69.9469 96.8702L69.9313 96.8631L69.8726 96.8369C69.8216 96.8144 69.7472 96.7819 69.6516 96.7414C69.4607 96.6604 69.185 96.5472 68.8431 96.4166C68.16 96.1557 67.2086 95.8242 66.1367 95.5428C65.0664 95.2619 63.8645 95.0279 62.6829 94.9678C61.5055 94.908 60.315 95.019 59.2891 95.4574C57.3493 96.2862 55.7761 98.3853 54.7129 100.173C54.1723 101.082 53.7461 101.941 53.4552 102.572C53.3096 102.888 53.1974 103.148 53.1213 103.329C53.0833 103.42 53.0542 103.492 53.0345 103.541L53.012 103.597L53.006 103.613L53.0044 103.617L53.0039 103.618L53.0037 103.618C53.0037 103.619 53.0036 103.619 53.4701 103.799ZM53.4701 103.799L53.0036 103.619L52.8435 104.034L53.2369 104.241L53.4701 103.799ZM69.7447 97.3275L70.2153 97.4967L70.3707 97.0645L69.9532 96.873L69.7447 97.3275ZM59.1206 101.893C59.7757 103.54 61.6425 104.345 63.2902 103.69C64.9379 103.035 65.7425 101.168 65.0873 99.5203C64.4322 97.8726 62.5653 97.068 60.9177 97.7232C59.27 98.3783 58.4654 100.245 59.1206 101.893ZM59.5718 101.384C59.8525 102.09 60.6526 102.434 61.3588 102.154C62.0649 101.873 62.4097 101.073 62.129 100.367C61.8482 99.6606 61.0481 99.3157 60.342 99.5965C59.6358 99.8773 59.291 100.677 59.5718 101.384Z"
+    fill="#F9CD6B" />
+  <defs>
+    <linearGradient id="paint0_linear_6797_502" x1="127.551" y1="45.6208" x2="202.834" y2="204.145"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#090968" />
+      <stop offset="1" stop-color="#A388FF" />
+    </linearGradient>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/client/public/assets/observatory/lines.svg b/client/public/assets/observatory/lines.svg
new file mode 100644
index 000000000000..e0f766dd409f
--- /dev/null
+++ b/client/public/assets/observatory/lines.svg
@@ -0,0 +1,12 @@
+<svg width="75" height="75" viewBox="-25 0 75 75" version="1.1" id="svg1">
+   <path d="M 1,0 V 35 H 48 V 75" stroke="url(#gradient)" stroke-width="2" stroke-dasharray="4, 4" fill="none"
+      style="stroke-linejoin:miter;stroke-linecap:butt;stroke-width:2;stroke-dasharray:4, 3.992;stroke-dashoffset:0;stroke:url(#gradient)"
+      id="path1" />
+   <defs id="defs3">
+      <linearGradient id="gradient" x1="25.321022" y1="0" x2="48" y2="75" gradientUnits="userSpaceOnUse">
+         <stop offset="0.01046867" stop-color="#7171E1" id="stop1" />
+         <stop offset="0.57600665" stop-color="#CFCFF5" id="stop2" />
+         <stop offset="1" stop-color="#ECECFB" id="stop3" />
+      </linearGradient>
+   </defs>
+</svg>
\ No newline at end of file
diff --git a/client/public/assets/observatory/mdn.svg b/client/public/assets/observatory/mdn.svg
new file mode 100644
index 000000000000..ffe515b7fe65
--- /dev/null
+++ b/client/public/assets/observatory/mdn.svg
@@ -0,0 +1,8 @@
+<svg width="50" height="53" viewBox="0 -5 50 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M44.1704 3.97266H6.66704C4.37517 3.97266 2.5 5.96016 2.5 8.38932V43.7227C2.5 46.1518 4.37517 48.1393 6.66704 48.1393H44.1704C46.4623 48.1393 48.3375 46.1518 48.3375 43.7227V8.38932C48.3375 5.96016 46.4623 3.97266 44.1704 3.97266ZM44.1704 43.7227H6.66704V12.806H44.1704V43.7227Z"
+    fill="#5A23D7" />
+  <path
+    d="M22.9494 17.2266L17.3079 36.4822H15L20.6218 17.2266H22.9494ZM25.0009 17.2266V36.4822H22.9494V17.2266H25.0009ZM32.9503 17.2266L27.3285 36.4822H25.0206L30.6424 17.2266H32.9503ZM35.0018 17.2266V36.4822H32.9503V17.2266H35.0018Z"
+    fill="#5A23D7" />
+</svg>
\ No newline at end of file
diff --git a/client/public/assets/observatory/pass-icon.svg b/client/public/assets/observatory/pass-icon.svg
new file mode 100644
index 000000000000..b341bf1c2970
--- /dev/null
+++ b/client/public/assets/observatory/pass-icon.svg
@@ -0,0 +1,7 @@
+<svg aria-hidden="true" className="pass" width="24" height="27" viewBox="0 -2 24 25" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="11.8984" r="9" fill="#fff" />
+  <path
+    d="M12 1.89844C6.5 1.89844 2 6.39844 2 11.8984C2 17.3984 6.5 21.8984 12 21.8984C17.5 21.8984 22 17.3984 22 11.8984C22 6.39844 17.5 1.89844 12 1.89844ZM10 16.8984L5 11.8984L6.41 10.4884L10 14.0684L17.59 6.47844L19 7.89844L10 16.8984Z"
+    fill="#000" />
+</svg>
\ No newline at end of file
diff --git a/client/public/assets/observatory/results-icon.svg b/client/public/assets/observatory/results-icon.svg
new file mode 100644
index 000000000000..343bcaf47d80
--- /dev/null
+++ b/client/public/assets/observatory/results-icon.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="19" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M15.45 12.73L20 4.86V16.55V18.55H0V0.55H2V13.09L7.5 3.55L14 7.33L18.24 0L19.97 1L14.74 10.05L8.23 6.3L2.31 16.55H4.57L8.96 8.99L15.45 12.73Z" />
+</svg>
\ No newline at end of file
diff --git a/client/public/assets/observatory/scanning.svg b/client/public/assets/observatory/scanning.svg
new file mode 100644
index 000000000000..61131a145746
--- /dev/null
+++ b/client/public/assets/observatory/scanning.svg
@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 8.33333C5 7.44928 5.35119 6.60143 5.97631 5.97631C6.60143 5.35119 7.44928 5 8.33333 5H15V8.33333H8.33333V15H5V8.33333ZM45 41.6667C45 42.5507 44.6488 43.3986 44.0237 44.0237C43.3986 44.6488 42.5507 45 41.6667 45H35V41.6667H41.6667V35H45V41.6667ZM8.33333 45C7.44928 45 6.60143 44.6488 5.97631 44.0237C5.35119 43.3986 5 42.5507 5 41.6667V35H8.33333V41.6667H15V45H8.33333ZM41.6667 5C42.5507 5 43.3986 5.35119 44.0237 5.97631C44.6488 6.60143 45 7.44928 45 8.33333V15H41.6667V8.33333H35V5H41.6667Z" fill="#5A23D7"/>
+<path d="M34.7936 13.2656H14.3989C13.1525 13.2656 12.1328 14.2854 12.1328 15.5317V33.6604C12.1328 34.9067 13.1525 35.9264 14.3989 35.9264H34.7936C36.04 35.9264 37.0597 34.9067 37.0597 33.6604V15.5317C37.0597 14.2854 36.04 13.2656 34.7936 13.2656ZM34.7936 33.6604H14.3989V17.7978H34.7936V33.6604Z" fill="#5A23D7"/>
+</svg>
diff --git a/client/public/assets/observatory/security.svg b/client/public/assets/observatory/security.svg
new file mode 100644
index 000000000000..499702596a37
--- /dev/null
+++ b/client/public/assets/observatory/security.svg
@@ -0,0 +1,3 @@
+<svg width="50" height="53" viewBox="0 0 50 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.9167 28.1578H27.0833V30.3659H22.9167V28.1578ZM43.75 10.4927V23.7415C43.75 35.8862 35.8333 47.3685 25 50.2391C14.1667 47.3685 6.25 35.8862 6.25 23.7415V10.4927L25 1.66016L43.75 10.4927ZM35.4167 21.5334H30.8333C30.4167 20.2085 29.5833 19.1044 28.5417 18.2212L31.0417 15.5714L29.5833 14.0257L26.6667 17.1171H25C24.5833 17.1171 23.9583 17.1171 23.5417 17.3379L20.625 14.0257L18.9583 15.7922L21.4583 18.442C20.4167 19.1044 19.5833 20.2085 19.1667 21.5334H14.5833V23.7415H18.75V25.9496H14.5833V28.1578H18.75V30.3659H14.5833V32.574H19.1667C20 35.2238 22.2917 36.9903 25 36.9903C27.7083 36.9903 30 35.2238 30.8333 32.574H35.4167V30.3659H31.25V28.1578H35.4167V25.9496H31.25V23.7415H35.4167V21.5334ZM22.9167 25.9496H27.0833V23.7415H22.9167V25.9496Z" fill="#5A23D7"/>
+</svg>
diff --git a/client/public/assets/observatory/stars.svg b/client/public/assets/observatory/stars.svg
new file mode 100644
index 000000000000..8a18c6ffa278
--- /dev/null
+++ b/client/public/assets/observatory/stars.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 0L16.74 2.75L14 4L16.74 5.26L18 8L19.25 5.26L22 4L19.25 2.75M8 3L5.5 8.5L0 11L5.5 13.5L8 19L10.5 13.5L16 11L10.5 8.5M18 14L16.74 16.74L14 18L16.74 19.25L18 22L19.25 19.25L22 18L19.25 16.74" fill="#DFD172"/>
+</svg>
diff --git a/client/public/assets/observatory/summary-icon.svg b/client/public/assets/observatory/summary-icon.svg
new file mode 100644
index 000000000000..4a0728efcf71
--- /dev/null
+++ b/client/public/assets/observatory/summary-icon.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="21" viewBox="0 0 16 21" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M9 6.04143C9 6.93111 9.72123 7.65234 10.6109 7.65234C12.0461 7.65234 12.7648 5.91716 11.75 4.90234C10.7352 3.88753 9 4.60626 9 6.04143ZM2 0.652344H9.17157C9.70201 0.652344 10.2107 0.863057 10.5858 1.23813L15.4142 6.06656C15.7893 6.44163 16 6.95034 16 7.48077V18.6523C16 19.1828 15.7893 19.6915 15.4142 20.0666C15.0391 20.4416 14.5304 20.6523 14 20.6523H2C0.89 20.6523 0 19.7523 0 18.6523V2.65234C0 1.54234 0.89 0.652344 2 0.652344ZM3 17.6523C3 18.2046 3.44772 18.6523 4 18.6523C4.55228 18.6523 5 18.2046 5 17.6523V13.6523C5 13.1001 4.55228 12.6523 4 12.6523C3.44772 12.6523 3 13.1001 3 13.6523V17.6523ZM7 17.6523C7 18.2046 7.44772 18.6523 8 18.6523C8.55229 18.6523 9 18.2046 9 17.6523V11.6523C9 11.1001 8.55229 10.6523 8 10.6523C7.44772 10.6523 7 11.1001 7 11.6523V17.6523ZM11 17.6523C11 18.2046 11.4477 18.6523 12 18.6523C12.5523 18.6523 13 18.2046 13 17.6523V15.6523C13 15.1001 12.5523 14.6523 12 14.6523C11.4477 14.6523 11 15.1001 11 15.6523V17.6523Z" />
+</svg>
\ No newline at end of file
diff --git a/client/public/assets/observatory/tooltip-arrow.svg b/client/public/assets/observatory/tooltip-arrow.svg
new file mode 100644
index 000000000000..5c1afd6ccdc7
--- /dev/null
+++ b/client/public/assets/observatory/tooltip-arrow.svg
@@ -0,0 +1,5 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="#000">
+   <path
+      d="m 12.124245,1.7326853 c 0.394693,-0.6021957 1.277247,-0.6025185 1.67234,-6.199e-4 l 8.811894,13.4234876 c 0.43647,0.664838 -0.04025,1.548435 -0.835536,1.548746 l -17.6138661,0.0065 C 3.363768,16.71112 2.8863753,15.827807 3.3223322,15.16266 Z"
+      id="path1" />
+</svg>
\ No newline at end of file
diff --git a/client/src/app.tsx b/client/src/app.tsx
index 99a43ee4f148..a64b26a9e056 100644
--- a/client/src/app.tsx
+++ b/client/src/app.tsx
@@ -42,6 +42,7 @@ const Translations = React.lazy(() => import("./translations"));
 const WritersHomepage = React.lazy(() => import("./writers-homepage"));
 const Sitemap = React.lazy(() => import("./sitemap"));
 const Playground = React.lazy(() => import("./playground"));
+const Observatory = React.lazy(() => import("./observatory"));
 
 function Layout({ pageType, children }) {
   const { pathname } = useLocation();
@@ -62,7 +63,7 @@ function Layout({ pageType, children }) {
         } ${pageType}`}
       >
         <TopPlacement />
-        {pageType !== "document-page" && pageType !== "curriculum" && (
+        {!["document-page", "curriculum", "observatory"].includes(pageType) && (
           <div className="sticky-header-container without-actions">
             <TopNavigation />
           </div>
@@ -87,6 +88,7 @@ function LoadingFallback({ message }: { message?: string }) {
 }
 
 function LazyStandardLayout(props: {
+  pageType?: string;
   extraClasses?: string;
   children: React.ReactNode;
 }) {
@@ -101,14 +103,18 @@ function LazyStandardLayout(props: {
 }
 
 function StandardLayout({
+  pageType,
   extraClasses,
   children,
 }: {
+  pageType?: string;
   extraClasses?: string;
   children: React.ReactNode;
 }) {
   return (
-    <Layout pageType={`standard-page ${extraClasses || ""}`}>{children}</Layout>
+    <Layout pageType={pageType || `standard-page ${extraClasses || ""}`}>
+      {children}
+    </Layout>
   );
 }
 function DocumentLayout({ children }) {
@@ -266,6 +272,14 @@ export function App(appProps: HydrationData) {
                 </LazyStandardLayout>
               }
             />
+            <Route
+              path="observatory/*"
+              element={
+                <LazyStandardLayout pageType="observatory">
+                  <Observatory {...appProps} />
+                </LazyStandardLayout>
+              }
+            />
             <Route
               path="/search"
               element={
diff --git a/client/src/assets/icons/message-question.svg b/client/src/assets/icons/message-question.svg
new file mode 100644
index 000000000000..ecfc64ddf304
--- /dev/null
+++ b/client/src/assets/icons/message-question.svg
@@ -0,0 +1,5 @@
+<svg viewBox="2 2 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M20 2H4C2.9 2 2 2.9 2 4V20.7929C2 21.2383 2.53857 21.4614 2.85355 21.1464L5.85355 18.1464C5.94732 18.0527 6.0745 18 6.20711 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2ZM13 13.5C13 13.7761 12.7761 14 12.5 14H11.5C11.2239 14 11 13.7761 11 13.5V12.5C11 12.2239 11.2239 12 11.5 12H12.5C12.7761 12 13 12.2239 13 12.5V13.5ZM14.8 9C14.5 9.4 14.1 9.6 13.7 9.8C13.4379 9.9747 13.3285 10.0731 13.2384 10.2285C13.2114 10.275 13.1794 10.3184 13.1457 10.3603C13.1072 10.4081 13.0788 10.4565 13.058 10.5068C12.9523 10.7619 12.7761 11 12.5 11H11.5C11.2239 11 10.9889 10.7733 11.0439 10.5027C11.0876 10.2878 11.164 10.1131 11.273 9.94152C11.2906 9.91372 11.3115 9.88821 11.3354 9.86553C11.538 9.6731 11.9026 9.40205 12.353 9.12837C12.3842 9.10943 12.4176 9.09457 12.4517 9.08143C12.7231 8.97658 12.9059 8.78829 13 8.6C13.1 8.4 13.2 8.1 13.2 7.9C13.2 7.6 13.1 7.4 12.9 7.2C12.7 7 12.4 6.9 12.1 6.9C11.8 6.9 11.6 7 11.4 7.1C11.335 7.1325 11.2806 7.17556 11.2367 7.22919C11.0618 7.44291 10.8761 7.7 10.6 7.7H9.67651C9.37223 7.7 9.13449 7.42796 9.23053 7.13924C9.38311 6.68055 9.6396 6.28832 10 6C10.5 5.6 11.2 5.5 12.1 5.5C13 5.5 13.8 5.7 14.3 6.1C14.7853 6.48822 15.0822 7.06484 15.0992 7.73844C15.1003 7.7793 15.1055 7.81999 15.1135 7.86008C15.1895 8.24005 15.085 8.62003 14.8 9Z"
+    fill="black" />
+</svg>
\ No newline at end of file
diff --git a/client/src/env.ts b/client/src/env.ts
index cfeb2bfe4336..5364afdeee26 100644
--- a/client/src/env.ts
+++ b/client/src/env.ts
@@ -131,3 +131,7 @@ export function survey_rates(surveyKey: string): {
   );
   return { rateFrom, rateTill };
 }
+
+export const OBSERVATORY_API_URL =
+  process.env.REACT_APP_OBSERVATORY_API_URL ||
+  "https://observatory-api.mdn.allizom.net";
diff --git a/client/src/homepage/static-page/index.tsx b/client/src/homepage/static-page/index.tsx
index 68970eaafce2..45459c8be912 100644
--- a/client/src/homepage/static-page/index.tsx
+++ b/client/src/homepage/static-page/index.tsx
@@ -1,11 +1,12 @@
 import React, { ReactElement } from "react";
 import useSWR from "swr";
-import { DEV_MODE } from "../../env";
+import { DEV_MODE, PLACEMENT_ENABLED } from "../../env";
 import { SidebarContainer } from "../../document/organisms/sidebar";
 import { TOC } from "../../document/organisms/toc";
 import { Toc } from "../../../../libs/types/document";
 import { PageNotFound } from "../../page-not-found";
 import { Loading } from "../../ui/atoms/loading";
+import { SidePlacement } from "../../ui/organisms/placement";
 
 interface StaticPageDoc {
   id: string;
@@ -14,13 +15,15 @@ interface StaticPageDoc {
   toc: Toc[];
 }
 
-interface StaticPageProps {
+export interface StaticPageProps {
   extraClasses?: string;
   locale: string;
   slug: string;
   fallbackData?: any;
   title?: string;
   sidebarHeader?: ReactElement;
+  children?: React.ReactNode;
+  additionalToc?: Toc[];
 }
 
 function StaticPage({
@@ -30,6 +33,8 @@ function StaticPage({
   fallbackData = undefined,
   title = "MDN",
   sidebarHeader = <></>,
+  children = <></>,
+  additionalToc = [],
 }: StaticPageProps) {
   const baseURL = `/${locale}/${slug}`;
   const featureJSONUrl = `${baseURL}/index.json`;
@@ -60,17 +65,24 @@ function StaticPage({
     return <Loading />;
   }
 
-  const toc = hyData.toc?.length && <TOC toc={hyData.toc} />;
-
   return (
     <>
       <div className="main-wrapper">
-        <SidebarContainer doc={hyData}>
-          {sidebarHeader || null}
-        </SidebarContainer>
-        <aside className="toc">
-          <nav>{toc || null}</nav>
-        </aside>
+        <div className="sidebar-container">
+          <SidebarContainer doc={hyData}>
+            {sidebarHeader || null}
+          </SidebarContainer>
+          <div className="toc-container">
+            <aside className="toc">
+              <nav>
+                {hyData.toc && !!hyData.toc.length && (
+                  <TOC toc={[...hyData.toc, ...additionalToc]} />
+                )}
+              </nav>
+            </aside>
+            {PLACEMENT_ENABLED && <SidePlacement />}
+          </div>
+        </div>
         <main id="content" className="main-content" role="main">
           <article className={`main-page-content ${extraClasses || ""}`}>
             {hyData.sections.map((section, index) => (
@@ -79,6 +91,7 @@ function StaticPage({
                 dangerouslySetInnerHTML={{ __html: section }}
               ></section>
             ))}
+            {children}
           </article>
         </main>
       </div>
diff --git a/client/src/observatory/benchmark-chart/index.scss b/client/src/observatory/benchmark-chart/index.scss
new file mode 100644
index 000000000000..80d8a30fd5ea
--- /dev/null
+++ b/client/src/observatory/benchmark-chart/index.scss
@@ -0,0 +1,61 @@
+@use "../../ui/vars" as *;
+
+.observatory {
+  svg.chart {
+    background-color: var(--background-primary);
+    border-radius: var(--border-radius);
+
+    .tick text {
+      fill: var(--observatory-color-secondary);
+      font-family: var(--font-body);
+      font-size: 1rem;
+      font-weight: 300;
+      transform: scale(1);
+
+      &.x-labels {
+        text-anchor: middle;
+
+        &.current {
+          fill: var(--grade-border);
+        }
+      }
+
+      &.y-labels {
+        text-anchor: end;
+      }
+    }
+
+    .tick line {
+      color: var(--observatory-color-secondary);
+      opacity: 0.9;
+      stroke: var(--observatory-border);
+      stroke-dasharray: 5, 5;
+      stroke-width: 1px;
+    }
+
+    .bar {
+      fill: var(--grade-bg);
+      stroke: var(--grade-bg);
+      stroke-width: 1;
+
+      &.current-grade {
+        stroke: var(--grade-border);
+      }
+    }
+
+    .you-are-here {
+      polyline {
+        fill: var(--background-primary);
+        filter: drop-shadow(0 0 3px rgb(170 170 170));
+        z-index: 9;
+      }
+
+      text {
+        fill: var(--text-primary);
+        font-family: var(--font-body);
+        font-size: 0.85rem;
+        font-weight: 300;
+      }
+    }
+  }
+}
diff --git a/client/src/observatory/benchmark-chart/index.tsx b/client/src/observatory/benchmark-chart/index.tsx
new file mode 100644
index 000000000000..1279a8f5bfdc
--- /dev/null
+++ b/client/src/observatory/benchmark-chart/index.tsx
@@ -0,0 +1,253 @@
+import { GradeDistribution, ObservatoryResult } from "../types";
+import { formatMinus } from "../utils";
+import "./index.scss";
+
+export default function GradeSVG({
+  gradeDistribution,
+  result,
+}: {
+  gradeDistribution: GradeDistribution[];
+  result: ObservatoryResult;
+}) {
+  const width = 1200;
+  const height = 380;
+  const leftSpace = 100; // left edge to left edge of first bar
+  const rightSpace = 80; // right edge to tight edge of last bar
+  const bottomSpace = 60; // bottom edge to bottom edge of bars
+  const topSpace = 60; // top padding
+  const itemCount = gradeDistribution.length;
+  const barWidth = 60;
+
+  // The x-axis has the different grades from "A+" to "D-".
+  const xTickIncr =
+    (width - leftSpace - rightSpace - barWidth) / (itemCount - 1);
+  const xTickOffset = leftSpace + xTickIncr / 2;
+
+  // The y-axis has ticks according to the maximum value of all grades.
+  const yMarks = calculateTicks(gradeDistribution);
+  const yTickOffset = height - bottomSpace;
+  const yTickIncr = (height - bottomSpace - topSpace) / (yMarks.length - 1);
+  const yTickMax = Math.max(...yMarks);
+
+  return (
+    <>
+      <table id="grade-svg-a11y-table" className="visually-hidden">
+        <caption>Number of sites by grade</caption>
+        <thead>
+          <tr>
+            <th scope="col">Grade</th>
+            <th scope="col">Sites</th>
+          </tr>
+        </thead>
+        <tbody>
+          {gradeDistribution.map((item, index) => (
+            <tr key={`grade-svg-a11y-table-row-${index}`}>
+              <th>
+                {formatMinus(item.grade)}
+                {item.grade === result.scan.grade ? " (Current grade)" : ""}
+              </th>
+              <td>{item.count} sites</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <svg
+        className="chart"
+        viewBox="0 0 1200 380"
+        aria-labelledby="grade-svg-title"
+        aria-describedby="grade-svg-a11y-table"
+      >
+        <title id="grade-svg-title">Number of sites by grade</title>
+        <g className="axes-g">
+          <g
+            className="x-axis"
+            transform={`translate(${xTickOffset}, ${height - bottomSpace})`}
+          >
+            {gradeDistribution.map((item, index) => (
+              <g // x-axis labels
+                key={`tick-x-${index}`}
+                className="tick tick-x"
+                transform={`translate(${index * xTickIncr}, 0)`}
+              >
+                <text
+                  fill="currentColor"
+                  y="6"
+                  dy="1em"
+                  className={[
+                    "x-labels",
+                    item.grade === result.scan.grade // highlight the current grade
+                      ? `current grade-${item.grade[0].toLowerCase()}`
+                      : undefined,
+                  ]
+                    .filter(Boolean)
+                    .join(" ")}
+                >
+                  {formatMinus(item.grade)}
+                </text>
+              </g>
+            ))}
+          </g>
+          <g>
+            {gradeDistribution.map((item, index) => {
+              // draw the individual grade bars
+              const barHeight =
+                (height - bottomSpace - topSpace) * (item.count / yTickMax);
+              return (
+                <rect
+                  key={`bar-${index}`}
+                  className={`bar grade-${item.grade.replace(/[+-]/, "").toLowerCase()} ${item.grade === result.scan.grade ? "current-grade" : ""}`}
+                  x={xTickOffset + index * xTickIncr - barWidth / 2}
+                  y={yTickOffset - barHeight - 1} // do not overlap the y-axis dashed lines
+                  rx="4"
+                  ry="4"
+                  width={barWidth}
+                  height={barHeight}
+                ></rect>
+              );
+            })}
+          </g>
+          <g
+            className="y-axis"
+            fill="none"
+            textAnchor="end"
+            transform={`translate(${leftSpace}, 0)`}
+          >
+            {yMarks.map((item, index) => (
+              <g
+                key={`tick-y-${index}`}
+                className="tick tick-y"
+                transform={`translate(0, ${yTickOffset - yTickIncr * index})`}
+              >
+                <line
+                  stroke="currentColor"
+                  x2={width - leftSpace - rightSpace + barWidth / 2}
+                ></line>
+                <text
+                  className="y-labels"
+                  fill="currentColor"
+                  x="-25"
+                  dy="0.32em"
+                >
+                  {/* format as kilo-sites, which works well for our current and future ranges below 10^6*/}
+                  {item / 1000}k
+                </text>
+              </g>
+            ))}
+          </g>
+        </g>
+        <g>
+          {gradeDistribution.map((item, index) => {
+            // Draw the "This website is here" marker. Drawn explicitly last so it is above all other elements in the drawing.
+            if (item.grade === result.scan.grade) {
+              const barHeight =
+                (height - bottomSpace - topSpace) * (item.count / yTickMax);
+              return (
+                <g
+                  key="you-are-here"
+                  className="you-are-here"
+                  transform={`translate(${xTickOffset + index * xTickIncr}, ${height - bottomSpace - barHeight - 50})`}
+                >
+                  <polyline points="-60,0 60,0 60,36 7,36 0,48 -7,36 -60,36"></polyline>
+                  <text
+                    x="0"
+                    y="0"
+                    textAnchor="middle"
+                    transform="translate(0, 24)"
+                  >
+                    Current grade
+                  </text>
+                </g>
+              );
+            } else {
+              return [];
+            }
+          })}
+        </g>
+      </svg>
+    </>
+  );
+}
+
+/**
+ * Calculate
+ * @param {GradeDistribution[]} gradeDistribution
+ * @returns {number[]}
+ */
+function calculateTicks(gradeDistribution: GradeDistribution[]): number[] {
+  const maxValue = Math.max(...gradeDistribution.map((item) => item.count));
+  const tickTargetCount = 7; // Target number of ticks between 5 and 10
+  const range = rangeForValue(maxValue, false); // Get a nice range
+  const tickInterval = rangeForValue(range / tickTargetCount, true); // Determine a nice tick interval
+  const niceMaxValue = Math.ceil(maxValue / tickInterval) * tickInterval; // Adjust max value to a nice number
+  const tickCount = Math.ceil(niceMaxValue / tickInterval) + 1; // Calculate the number of ticks
+
+  const ticks: number[] = [];
+  for (let i = 0; i < tickCount; i++) {
+    ticks.push(i * tickInterval);
+  }
+  return ticks;
+}
+
+/**
+ * This returns values to construct proper axis measurements in
+ * diagrams. The returned value is 1|2|5 * 10^x.
+ *
+ * If `round` is `true`, the returned value can be also rounded down,
+ * useful for calculating ticks on an axis.
+ *
+ * Examples:
+ *
+ *  |range    |rounded=false|rounded=true|
+ *  |---------|-------------|------------|
+ *  |  1      |  1          |  1         |
+ *  |  2      |  2          |  2         |
+ *  |  3      |  5          |  5         |
+ *  |  4      |  5          |  5         |
+ *  |  5      |  5          |  5         |
+ *  |  6      |  10         |  5         |
+ *  |  7      |  10         |  10        |
+ *  |  8      |  10         |  10        |
+ *  |  9      |  10         |  10        |
+ *  |  10     |  10         |  10        |
+ *  |  34     |  50         |  50        |
+ *  |  450    |  500        |  500       |
+ *  |  560    |  1000       |  500       |
+ *  |  6780   |  10000      |  5000      |
+ *  |  10     |  10         |  10        |
+ *  |  100    |  100        |  100       |
+ *  |  1000   |  1000       |  1000      |
+ *  |  10000  |  10000      |  10000     |
+ *
+ * @param {number} range The input value
+ * @param {boolean} round If false, the returned value will always be greater than `range`, otherwise it can be rounded off
+ * @returns {number} a number according to `1|2|5 * 10^x`, where x is derived from `range` to be in the same order of magnitude
+ */
+
+function rangeForValue(range: number, round: boolean): number {
+  const exponent = Math.floor(Math.log10(range));
+  const fraction = range / Math.pow(10, exponent);
+
+  let niceFraction: number;
+  if (round) {
+    if (fraction < 1.5) {
+      niceFraction = 1;
+    } else if (fraction < 3) {
+      niceFraction = 2;
+    } else if (fraction < 7) {
+      niceFraction = 5;
+    } else {
+      niceFraction = 10;
+    }
+  } else {
+    if (fraction <= 1) {
+      niceFraction = 1;
+    } else if (fraction <= 2) {
+      niceFraction = 2;
+    } else if (fraction <= 5) {
+      niceFraction = 5;
+    } else {
+      niceFraction = 10;
+    }
+  }
+  return niceFraction * Math.pow(10, exponent);
+}
diff --git a/client/src/observatory/docs/index.scss b/client/src/observatory/docs/index.scss
new file mode 100644
index 000000000000..f5a94ea9a271
--- /dev/null
+++ b/client/src/observatory/docs/index.scss
@@ -0,0 +1,28 @@
+@use "../../ui/vars" as *;
+
+.observatory {
+  --category-color: var(--observatory-accent);
+
+  .article-actions-container {
+    display: flex;
+  }
+
+  .sidebar {
+    @media (min-width: $screen-md) {
+      padding-top: 3rem;
+    }
+  }
+
+  &,
+  .observatory-wrapper {
+    .document-toc-heading {
+      font-size: var(--type-base-font-size-rem);
+      margin-top: 1.5rem;
+
+      a,
+      a:hover {
+        text-decoration: none;
+      }
+    }
+  }
+}
diff --git a/client/src/observatory/docs/index.tsx b/client/src/observatory/docs/index.tsx
new file mode 100644
index 000000000000..76ff31e4af77
--- /dev/null
+++ b/client/src/observatory/docs/index.tsx
@@ -0,0 +1,217 @@
+import { useParams, useLocation } from "react-router-dom";
+import StaticPage, { StaticPageProps } from "../../homepage/static-page";
+import "./index.scss";
+import { useLocale } from "../../hooks";
+import { ObservatoryLayout } from "../layout";
+import {
+  OBSERVATORY_TITLE,
+  OBSERVATORY_TITLE_FULL,
+} from "../../../../libs/constants";
+import useSWR from "swr";
+import { OBSERVATORY_API_URL } from "../../env";
+import { Loading } from "../../ui/atoms/loading";
+
+export const ITEMS = [
+  {
+    slug: "observatory/docs/tests_and_scoring",
+    title: "Tests & Scoring",
+  },
+  {
+    slug: "observatory/docs/faq",
+    title: "FAQ",
+  },
+];
+
+export function ObservatoryDocsNav() {
+  return <RelatedTopics items={ITEMS} />;
+}
+
+function RelatedTopics({
+  items,
+}: {
+  items: { slug: string; title: string }[];
+}) {
+  const locale = useLocale();
+  const { pathname: locationPathname } = useLocation();
+
+  return (
+    <aside className="document-toc-container">
+      <section className="document-toc">
+        <header>
+          <h2 className="document-toc-heading">{OBSERVATORY_TITLE}</h2>
+        </header>
+        <ul className="document-toc-list">
+          {items.map(({ slug, title }) => {
+            const itemPathname = `/${locale}/${slug}`;
+
+            return (
+              <li key={itemPathname} className="document-toc-item">
+                <a
+                  href={itemPathname}
+                  className="document-toc-link"
+                  aria-current={
+                    itemPathname.toLowerCase() ===
+                    locationPathname.toLowerCase()
+                  }
+                >
+                  {title}
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      </section>
+    </aside>
+  );
+}
+
+interface ObservatoryMatrixResultEntry {
+  name: string;
+  scoreModifier: number;
+  description: { __html: string };
+  recommendation: { __html: string };
+}
+
+interface ObservatoryMatrixEntry {
+  name: string;
+  title: string;
+  mdnLink: string;
+  results: ObservatoryMatrixResultEntry[];
+}
+
+function ObservatoryMatrix({
+  data,
+}: {
+  data?: ObservatoryMatrixEntry[] | null;
+}) {
+  return (
+    <>
+      {data &&
+        data?.map((entry) => {
+          return (
+            <section>
+              <h2 id={entry.name}>{entry.title}</h2>
+              <p>
+                See <a href={entry.mdnLink}>{entry.title}</a> for guidance.
+              </p>
+              <figure className="table-container">
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Test result</th>
+                      <th>Description</th>
+                      <th align="center">Modifier</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {entry.results.map((result) => {
+                      return (
+                        <tr>
+                          <td>{result.name}</td>
+                          <td
+                            dangerouslySetInnerHTML={
+                              result.description as { __html: string }
+                            }
+                          ></td>
+                          <td>{result.scoreModifier}</td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </figure>
+            </section>
+          );
+        })}
+    </>
+  );
+}
+
+function TestAndScoringPage({ ...props }: StaticPageProps) {
+  const { "*": slug } = useParams();
+
+  const { data, isLoading } = useSWR<null | ObservatoryMatrixEntry[]>(
+    `${OBSERVATORY_API_URL}/api/v2/recommendation_matrix`,
+    async (url) => {
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error(await response.text());
+      }
+      let data = await response.json();
+      data.map((entry) =>
+        entry.results.map((result) => {
+          result.description = { __html: result.description };
+          result.recommendation = { __html: result.recommendation };
+          return result;
+        })
+      );
+      return data;
+    },
+    {
+      revalidateOnFocus: false,
+      revalidateIfStale: false,
+      revalidateOnReconnect: false,
+    }
+  );
+
+  let additionalToc = data?.map((entry) => ({
+    text: entry.title,
+    id: entry.name,
+  }));
+
+  return isLoading ? (
+    <Loading message="loading data"></Loading>
+  ) : (
+    <StaticPage {...props} additionalToc={additionalToc}>
+      {slug === "tests_and_scoring" && (
+        <>
+          <ObservatoryMatrix data={data} />
+        </>
+      )}{" "}
+    </StaticPage>
+  );
+}
+
+function GenericDoc({ ...props }: StaticPageProps) {
+  return <StaticPage {...props} />;
+}
+
+function ObservatoryDocs({ ...props }) {
+  const { pathname } = useLocation();
+  const locale = useLocale();
+  const { "*": slug } = useParams();
+
+  const sidebarHeader = <ObservatoryDocsNav />;
+
+  const fullSlug = `observatory/docs/${slug}`;
+
+  const staticPageProps = {
+    extraClasses: "plus-docs",
+    locale,
+    slug: fullSlug,
+    title: OBSERVATORY_TITLE_FULL,
+    sidebarHeader,
+    fallbackData: props.hyData ? props : undefined,
+  };
+
+  return (
+    <ObservatoryLayout
+      parents={[
+        {
+          title:
+            ITEMS.find((i) => i.slug === fullSlug)?.title ?? "Documentation",
+          uri: pathname,
+        },
+      ]}
+      withSidebar={true}
+    >
+      {slug === "tests_and_scoring" ? (
+        <TestAndScoringPage {...staticPageProps} />
+      ) : (
+        <GenericDoc {...staticPageProps} />
+      )}
+    </ObservatoryLayout>
+  );
+}
+
+export default ObservatoryDocs;
diff --git a/client/src/observatory/index.scss b/client/src/observatory/index.scss
new file mode 100644
index 000000000000..58671727f9a3
--- /dev/null
+++ b/client/src/observatory/index.scss
@@ -0,0 +1,138 @@
+@use "../ui/vars" as *;
+
+.observatory {
+  --border-radius: 0.3rem;
+  --code-background-block: var(--observatory-bg-code);
+  --spacing: 2rem;
+  background-color: var(--observatory-bg);
+
+  h1,
+  h2 {
+    font-style: normal;
+    font-weight: 600;
+    letter-spacing: var(--heading-letter-spacing);
+  }
+
+  .obs-none {
+    color: var(--observatory-color-secondary);
+  }
+
+  .obs-score-value {
+    margin-right: 0.5rem;
+  }
+
+  .obs-pass-icon {
+    svg.pass {
+      path {
+        fill: var(--observatory-pass-icon-bg);
+      }
+
+      circle {
+        fill: var(--observatory-pass-icon-color);
+      }
+    }
+
+    svg.fail {
+      path {
+        fill: var(--observatory-fail-icon-bg);
+      }
+
+      circle {
+        fill: var(--observatory-fail-icon-color);
+      }
+    }
+  }
+
+  .accent {
+    color: var(--observatory-accent);
+  }
+
+  .observatory-wrapper {
+    display: grid;
+    grid-template-areas: "header header header" "main main main" ". sidebar .";
+    grid-template-columns: 1rem 1fr 1rem;
+    max-width: var(--max-width);
+    padding: 1.5rem 1rem;
+
+    section.header {
+      grid-area: header;
+    }
+
+    section.main {
+      grid-area: main;
+    }
+
+    a {
+      color: var(--observatory-color);
+      text-decoration: underline;
+      text-decoration-color: var(--observatory-color-secondary);
+
+      &:hover,
+      &:active {
+        text-decoration: none;
+      }
+    }
+
+    .feedback-link {
+      --feedback-link-icon: var(--observatory-color-secondary);
+      --text-link: var(--observatory-color-secondary);
+      color: var(--observatory-color-secondary);
+      display: block;
+      font-size: var(--type-tiny-font-size);
+      margin-top: 1.5rem;
+    }
+
+    .feedback-link.faq-link::before {
+      mask-image: url("../assets/icons/message-question.svg");
+    }
+
+    .error {
+      color: var(--form-invalid-color);
+      margin-top: 0.5rem;
+
+      &::before {
+        background-color: var(--form-invalid-color);
+        content: "";
+        display: inline-block;
+        height: 1.15rem;
+        margin-bottom: 0.25rem;
+        margin-right: 0.5rem;
+        mask-image: url("../assets/icons/alert-circle.svg");
+        mask-position: center;
+        mask-repeat: no-repeat;
+        vertical-align: middle;
+        width: 1.5em;
+      }
+
+      + form input {
+        outline-color: var(--observatory-border-accent);
+      }
+    }
+
+    @media (min-width: $screen-md) {
+      column-gap: 1rem;
+      grid-template-areas: "header sidebar" "main sidebar";
+      grid-template-columns: minmax(0, 1fr) 12rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+
+      section.header,
+      section.main {
+        padding: 0;
+      }
+    }
+
+    @media (min-width: $screen-xl) {
+      column-gap: 3rem;
+      grid-template-areas: "header sidebar" "main sidebar";
+      grid-template-columns: 2fr minmax(0, 200px);
+    }
+  }
+
+  .scroll-container {
+    margin-bottom: 1.5rem;
+    margin-top: 0.8rem;
+    overflow-x: auto;
+    overscroll-behavior-x: none;
+  }
+}
diff --git a/client/src/observatory/index.tsx b/client/src/observatory/index.tsx
new file mode 100644
index 000000000000..47e53faa91e2
--- /dev/null
+++ b/client/src/observatory/index.tsx
@@ -0,0 +1,21 @@
+import { Route, Routes } from "react-router-dom";
+
+import { PageNotFound } from "../page-not-found";
+
+import ObservatoryLanding from "./landing";
+import ObservatoryResults from "./results";
+import ObservatoryDocs from "./docs";
+import "./index.scss";
+
+export default function Observatory({ ...props }) {
+  return (
+    <div className="observatory">
+      <Routes>
+        <Route path="/" element={<ObservatoryLanding />} />
+        <Route path="/analyze" element={<ObservatoryResults />} />
+        <Route path="/docs/*" element={<ObservatoryDocs {...props} />} />
+        <Route path="*" element={<PageNotFound />} />
+      </Routes>
+    </div>
+  );
+}
diff --git a/client/src/observatory/landing.scss b/client/src/observatory/landing.scss
new file mode 100644
index 000000000000..c14dcb255eb0
--- /dev/null
+++ b/client/src/observatory/landing.scss
@@ -0,0 +1,233 @@
+@use "../ui/vars" as *;
+
+.observatory {
+  .observatory-landing.observatory-landing-top {
+    background: var(--observatory-bg-secondary);
+
+    .observatory-wrapper {
+      grid-template-areas: "header .";
+
+      @media (max-width: #{$screen-xl - 1}) {
+        grid-template-areas: "header";
+        grid-template-columns: auto;
+      }
+    }
+  }
+
+  .observatory-landing {
+    background: var(--observatory-bg);
+
+    .observatory-wrapper {
+      .feedback-link,
+      .faq-link {
+        display: inline-block;
+        margin-right: 1rem;
+        margin-top: 2rem;
+      }
+    }
+
+    .place {
+      grid-area: sidebar;
+    }
+
+    .header {
+      display: grid;
+      gap: 0 6.25rem;
+      grid-template-areas: "form svg";
+      grid-template-columns: 2fr 1fr;
+
+      .scan-form {
+        grid-area: form;
+      }
+
+      .landing-illustration {
+        grid-area: svg;
+
+        svg {
+          height: auto;
+          max-width: 50vw;
+          width: 100%;
+        }
+      }
+
+      @media (max-width: #{$screen-md - 1}) {
+        grid-template:
+          "form" auto
+          "svg" auto;
+
+        .landing-illustration {
+          text-align: center;
+        }
+      }
+    }
+
+    h1 {
+      margin-bottom: unset;
+    }
+
+    p {
+      color: var(--observatory-color-secondary);
+    }
+
+    form {
+      .input-group {
+        display: flex;
+        height: 3rem;
+
+        :focus-visible {
+          outline: 1px solid var(--observatory-accent);
+          outline-offset: -1px;
+          outline-width: 1px;
+        }
+
+        ::placeholder {
+          color: var(--observatory-color-secondary);
+          opacity: 0.8;
+        }
+
+        input {
+          background-color: var(--observatory-bg);
+          border: 1px solid var(--observatory-border);
+          border-bottom-left-radius: var(--border-radius);
+          border-top-left-radius: var(--border-radius);
+          flex-grow: 1;
+          padding: 0 0.75rem;
+          width: 100%;
+
+          &::placeholder {
+            overflow-x: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+
+        button {
+          background: var(--button-primary-default);
+          border-bottom-right-radius: var(--border-radius);
+          border-top-right-radius: var(--border-radius);
+          color: var(--background-primary);
+          cursor: pointer;
+          font: var(--type-emphasis-m);
+          font-size: 1rem;
+          padding: 0 2rem;
+
+          &:hover {
+            background: var(--button-primary-hover);
+          }
+
+          &:active {
+            background: var(--button-primary-active);
+          }
+        }
+      }
+
+      label {
+        align-items: center;
+        display: flex;
+        margin: 1.75rem 0;
+      }
+
+      input[type="checkbox"] {
+        height: 1.25rem;
+        margin: 0;
+        margin-right: 0.5rem;
+        width: 1.25rem;
+      }
+    }
+
+    .main {
+      background: var(--observatory-bg);
+      border-radius: var(--border-radius);
+      margin: 1rem 0;
+
+      h2 {
+        margin-top: unset;
+      }
+
+      .about {
+        display: flex;
+        flex-direction: column;
+
+        h2 {
+          margin-bottom: 2rem;
+        }
+
+        // Make a gradient from the accent color to the background color,
+        // replacing the light-mode-only colors in the original SVG data.
+        svg.lines defs#defs3 #gradient {
+          stop#stop1 {
+            stop-color: var(--observatory-accent);
+          }
+
+          stop#stop2 {
+            stop-color: color-mix(
+              in srgb,
+              var(--observatory-accent),
+              var(--observatory-bg)
+            );
+          }
+
+          stop#stop3 {
+            stop-color: var(--observatory-bg);
+          }
+        }
+
+        figure {
+          &.assessment,
+          &.scanning,
+          &.security,
+          &.mdn {
+            svg path {
+              fill: var(--observatory-accent);
+            }
+          }
+        }
+      }
+
+      @media (min-width: $screen-md) {
+        .assessment {
+          margin-left: 0;
+        }
+
+        .scanning {
+          margin-left: 3.125rem;
+        }
+
+        .security {
+          margin-left: 6.25rem;
+        }
+
+        .mdn {
+          margin-left: 9.75rem;
+        }
+      }
+      @media (max-width: #{$screen-md - 1}) {
+        figure ~ figure {
+          margin-top: 1.75rem;
+        }
+
+        .lines {
+          display: none;
+        }
+      }
+      @media (min-width: $screen-md) and (max-width: #{$screen-lg - 1}) {
+        .about-copy {
+          width: 80%;
+        }
+      }
+
+      figure {
+        align-items: start;
+        display: grid;
+        gap: 1.5rem;
+        grid-template-columns: 2rem 1fr;
+
+        figcaption {
+          p {
+            color: var(--observatory-color);
+            margin: 0;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/client/src/observatory/landing.tsx b/client/src/observatory/landing.tsx
new file mode 100644
index 000000000000..df04d2ea95d7
--- /dev/null
+++ b/client/src/observatory/landing.tsx
@@ -0,0 +1,208 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useGleanClick } from "../telemetry/glean-context";
+import { OBSERVATORY } from "../telemetry/constants";
+import Container from "../ui/atoms/container";
+import { SidePlacement } from "../ui/organisms/placement";
+import {
+  OBSERVATORY_TITLE,
+  OBSERVATORY_TITLE_FULL,
+} from "../../../libs/constants";
+
+import { ObservatoryAnalyzeRequest } from "./types";
+import { ObservatoryLayout } from "./layout";
+import { Progress } from "./progress";
+import { ERROR_MAP, FaqLink, FeedbackLink, useUpdateResult } from "./utils";
+
+import "./landing.scss";
+import { ReactComponent as LandingSVG } from "../../public/assets/observatory/landing-illustration.svg";
+import { ReactComponent as LinesSVG } from "../../public/assets/observatory/lines.svg";
+import { ReactComponent as AssessmentSVG } from "../../public/assets/observatory/assessment.svg";
+import { ReactComponent as ScanningSVG } from "../../public/assets/observatory/scanning.svg";
+import { ReactComponent as SecuritySVG } from "../../public/assets/observatory/security.svg";
+import { ReactComponent as MdnSVG } from "../../public/assets/observatory/mdn.svg";
+
+export default function ObservatoryLanding() {
+  document.title = `HTTP Header Security Test - ${OBSERVATORY_TITLE_FULL}`;
+
+  const [form, setForm] = useState<ObservatoryAnalyzeRequest>({
+    host: "",
+  });
+  const [cleanHostname, setCleanHostname] = useState("");
+  const {
+    trigger,
+    isMutating,
+    data,
+    error: updateError,
+  } = useUpdateResult(cleanHostname);
+  const [error, setError] = useState<Error>();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    try {
+      // tolerate url-style host values and pick out the hostname part
+      const url = new URL(form.host);
+      setCleanHostname(url.hostname.trim() || form.host);
+    } catch {
+      setCleanHostname(form.host);
+    }
+  }, [form.host]);
+
+  useEffect(() => {
+    if (!isMutating && data) {
+      if (data.scan.error) {
+        setError(new Error(data.scan.error));
+      } else {
+        navigate(`./analyze?host=${encodeURIComponent(cleanHostname)}`);
+      }
+    }
+  }, [isMutating, data, navigate, cleanHostname]);
+
+  useEffect(() => {
+    setError(updateError);
+  }, [updateError]);
+
+  const submit: React.FormEventHandler<HTMLFormElement> = async (e) => {
+    e.preventDefault();
+    setError(undefined);
+    if (form.host.trim().length === 0) {
+      setError(new Error("Please enter a valid hostname"));
+    } else {
+      trigger();
+    }
+  };
+
+  const gleanClick = useGleanClick();
+
+  useEffect(() => {
+    if (error && !isMutating) {
+      gleanClick(
+        `${OBSERVATORY}: error -> ${ERROR_MAP[error.name] || error.message}`
+      );
+    }
+  }, [error, isMutating, gleanClick]);
+
+  return (
+    <ObservatoryLayout>
+      <section className="observatory-landing observatory-landing-top">
+        <Container extraClasses="observatory-wrapper">
+          <section className="header">
+            <section className="scan-form">
+              <h1>
+                <span className="accent">{OBSERVATORY_TITLE}</span>
+              </h1>
+              <p>
+                Launched in 2016, the HTTP Observatory enhances web security by
+                analyzing compliance with best security practices. It has
+                provided insights to over 6.9 million websites through 47
+                million scans. If you still need to access the previous version
+                of HTTP Observatory,{" "}
+                <a href="https://observatory.mozilla.org/">click here</a>.
+                Please note the old Observatory is now deprecated and will soon
+                be sunsetted.
+              </p>
+              {isMutating ? (
+                <Progress message={`Scanning ${cleanHostname}…`} />
+              ) : (
+                <form onSubmit={submit}>
+                  <div className="input-group">
+                    <label htmlFor="host" className="visually-hidden">
+                      Domain name or URL
+                    </label>
+                    <input
+                      placeholder="Scan a website for free (e.g. mdn.dev)"
+                      type="text"
+                      name="host"
+                      id="host"
+                      value={form.host}
+                      autoFocus
+                      onChange={(e) =>
+                        setForm({ ...form, host: e.target.value })
+                      }
+                    />
+                    <button
+                      type="submit"
+                      disabled={isMutating}
+                      onClick={() => gleanClick(`${OBSERVATORY}: scan`)}
+                    >
+                      Scan
+                    </button>
+                  </div>
+                </form>
+              )}
+              {error && !isMutating && (
+                <div className="error">
+                  Error: {ERROR_MAP[error.name] || error.message}
+                </div>
+              )}
+            </section>
+            <section className="landing-illustration">
+              <LandingSVG role="none" />
+            </section>
+          </section>
+        </Container>
+      </section>
+      <section className="observatory-landing">
+        <Container extraClasses="observatory-wrapper">
+          <section className="main">
+            <section className="about">
+              <h2>About the HTTP Observatory</h2>
+              <div className="about-copy">
+                <figure className="assessment">
+                  <AssessmentSVG role="none" />
+                  <figcaption>
+                    <p>
+                      Developed by Mozilla, the HTTP Observatory performs an
+                      in-depth assessment of a site’s HTTP headers and other key
+                      security configurations.
+                    </p>
+                  </figcaption>
+                </figure>
+                <LinesSVG className="lines assessment" role="none" />
+                <figure className="scanning">
+                  <ScanningSVG role="none" />
+                  <figcaption>
+                    <p>
+                      Its automated scanning process provides developers and
+                      website administrators with detailed, actionable feedback,
+                      focusing on identifying and addressing potential security
+                      vulnerabilities.
+                    </p>
+                  </figcaption>
+                </figure>
+                <LinesSVG className="lines scanning" role="none" />
+                <figure className="security">
+                  <SecuritySVG role="none" />
+                  <figcaption>
+                    <p>
+                      The tool is instrumental in helping developers and website
+                      administrators strengthen their sites against common
+                      security threats in a constantly advancing digital
+                      environment.
+                    </p>
+                  </figcaption>
+                </figure>
+                <LinesSVG className="lines security" role="none" />
+                <figure className="mdn">
+                  <MdnSVG role="none" />
+                  <figcaption>
+                    <p>
+                      The HTTP Observatory provides effective security insights,
+                      guided by Mozilla's expertise and commitment to a safer
+                      and more secure internet and based on well-established
+                      trends and guidelines.
+                    </p>
+                  </figcaption>
+                </figure>
+              </div>
+            </section>
+            <FaqLink />
+            <FeedbackLink />
+          </section>
+          <SidePlacement />
+        </Container>
+      </section>
+    </ObservatoryLayout>
+  );
+}
diff --git a/client/src/observatory/layout.tsx b/client/src/observatory/layout.tsx
new file mode 100644
index 000000000000..e9923ab375ec
--- /dev/null
+++ b/client/src/observatory/layout.tsx
@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+import { DocParent } from "../../../libs/types/document";
+import { ArticleActionsContainer } from "../ui/organisms/article-actions-container";
+import { TopNavigation } from "../ui/organisms/top-navigation";
+import { DEFAULT_LOCALE } from "../../../libs/constants";
+import { OBSERVATORY_TITLE } from "../../../libs/constants";
+
+export function ObservatoryLayout({
+  parents = [],
+  children,
+  withSidebar = false,
+}: {
+  parents?: DocParent[];
+  children: ReactNode;
+  withSidebar?: boolean;
+}) {
+  return (
+    <>
+      <div className="sticky-header-container">
+        <TopNavigation />
+        <ArticleActionsContainer
+          parents={[
+            {
+              title: OBSERVATORY_TITLE,
+              uri: `/${DEFAULT_LOCALE}/observatory`,
+            },
+            ...parents,
+          ].filter(Boolean)}
+          withSidebar={withSidebar}
+        />
+      </div>
+      {children}
+    </>
+  );
+}
diff --git a/client/src/observatory/progress/index.scss b/client/src/observatory/progress/index.scss
new file mode 100644
index 000000000000..91365032ee71
--- /dev/null
+++ b/client/src/observatory/progress/index.scss
@@ -0,0 +1,34 @@
+.progress-bar {
+  background-color: var(--observatory-bg);
+  height: 4px;
+  overflow: hidden;
+  width: 100%;
+}
+
+.progress-bar-value {
+  animation: indeterminateAnimation 2.5s infinite linear;
+  background-color: var(--observatory-accent);
+  height: 100%;
+  transform-origin: 0% 50%;
+  width: 100%;
+}
+
+@keyframes indeterminateAnimation {
+  0% {
+    transform: translateX(0) scaleX(0);
+  }
+
+  40% {
+    transform: translateX(0) scaleX(0.4);
+  }
+
+  100% {
+    transform: translateX(100%) scaleX(0.5);
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .progress-bar-value {
+    animation-duration: 60s;
+  }
+}
diff --git a/client/src/observatory/progress/index.tsx b/client/src/observatory/progress/index.tsx
new file mode 100644
index 000000000000..a0d01dcd6fb5
--- /dev/null
+++ b/client/src/observatory/progress/index.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+import "./index.scss";
+
+export function useTimeout(callback: React.EffectCallback, delay: number) {
+  React.useEffect(() => {
+    const timeout = setTimeout(callback, delay);
+    return () => clearTimeout(timeout);
+  }, [delay, callback]);
+}
+
+export function Progress({ message = "Scanning…" }: { message?: string }) {
+  return (
+    <div className="progress">
+      <p id="progress-title">{message}</p>
+      <div
+        className="progress-bar"
+        role="progressbar"
+        aria-labelledby="progress-title"
+      >
+        <div className="progress-bar-value"></div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/observatory/results.scss b/client/src/observatory/results.scss
new file mode 100644
index 000000000000..cc1bacbfcf52
--- /dev/null
+++ b/client/src/observatory/results.scss
@@ -0,0 +1,540 @@
+@use "../ui/vars" as *;
+
+.observatory-results {
+  .sidebar {
+    grid-area: sidebar;
+    padding-top: 0;
+
+    .place {
+      display: flex;
+    }
+  }
+
+  h2::before {
+    background-color: var(--observatory-color);
+    content: "";
+    display: inline-block;
+    mask-position: left;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+  }
+
+  h2.summary::before {
+    height: 1.4rem;
+    mask-image: url("../../public/assets/observatory/summary-icon.svg");
+    width: 2rem;
+  }
+
+  h2.result::before {
+    height: 1.2rem;
+    mask-image: url("../../public/assets/observatory/results-icon.svg");
+    width: 2rem;
+  }
+
+  h2.summary .host {
+    font-weight: initial;
+  }
+
+  .heading-and-actions {
+    align-items: start;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    justify-content: space-between;
+    margin-bottom: 3rem;
+
+    h1 {
+      align-self: flex-start;
+    }
+
+    .actions {
+      align-self: center;
+    }
+  }
+
+  h1 {
+    letter-spacing: var(--heading-letter-spacing);
+    margin-bottom: unset;
+  }
+
+  h2 {
+    font-size: 1.375rem;
+    font-weight: 600;
+    letter-spacing: var(--heading-letter-spacing);
+    margin-bottom: 1rem;
+    margin-top: 1.5rem;
+  }
+
+  p {
+    font-weight: 400;
+    letter-spacing: -0.03rem;
+  }
+
+  code {
+    font-weight: 600;
+  }
+
+  .arrow-down {
+    color: var(--observatory-arrow-down-color);
+  }
+
+  .arrow-up {
+    color: var(--observatory-arrow-up-color);
+  }
+
+  .grade-trend {
+    grid-area: grade;
+    justify-self: start;
+
+    .trend {
+      color: var(--observatory-color-secondary);
+      font-weight: 400;
+      margin-top: 1rem;
+    }
+  }
+
+  .scan-results {
+    .footnote {
+      font-size: var(--type-smaller-font-size);
+      margin-top: 1rem;
+    }
+
+    table {
+      background: var(--observatory-table-bg);
+      border: none;
+      min-width: calc($screen-lg - 2rem - 12rem);
+
+      th {
+        background: var(--observatory-table-header-bg);
+        color: var(--text-secondary);
+        font-weight: 500;
+        vertical-align: top;
+      }
+
+      tr:nth-child(odd) {
+        background-color: var(--observatory-table-bg-alternate);
+      }
+
+      td {
+        overflow-wrap: anywhere;
+        padding: 0.5rem 1.5rem;
+        vertical-align: top;
+
+        &.cookie-name:first-child {
+          max-width: 15rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        &.score > span {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+        }
+      }
+
+      a {
+        color: var(--observatory-color);
+        text-decoration: underline;
+        text-decoration-color: var(--observatory-color-secondary);
+
+        &:hover,
+        &:active {
+          text-decoration: none;
+        }
+      }
+
+      span.not-counted {
+        color: var(--observatory-color-secondary);
+
+        a {
+          text-decoration: none;
+        }
+      }
+
+      // Some column width hints on the different result table.
+      &.tests {
+        th,
+        td {
+          &:first-of-type {
+            width: 25%;
+          }
+        }
+
+        td.score {
+          white-space: nowrap;
+        }
+      }
+
+      &.csp {
+        th,
+        td {
+          &:first-of-type {
+            width: 45%;
+          }
+        }
+      }
+
+      &.headers {
+        th,
+        td {
+          &:first-of-type {
+            width: 30%;
+          }
+        }
+      }
+
+      &.cookies {
+        th,
+        td {
+          &:nth-of-type(n + 3) {
+            text-align: center;
+          }
+        }
+      }
+
+      th,
+      td {
+        border: none;
+        padding: 1.5rem;
+
+        :first-child {
+          margin-top: 0;
+        }
+
+        :last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      .icon {
+        height: 1.3rem;
+        width: 1.3rem;
+      }
+
+      @media (max-width: #{$screen-lg - 0.02}) {
+        // responsive table
+        min-width: 0;
+
+        thead {
+          display: none;
+        }
+
+        tbody {
+          display: block;
+        }
+
+        tr {
+          display: grid;
+          grid-template-columns: max-content auto;
+        }
+
+        tr:nth-of-type(odd) {
+          background: var(--observatory-table-header-bg);
+        }
+
+        td {
+          column-gap: 2em;
+          display: grid;
+          grid-auto-flow: column;
+          grid-column: span 2;
+          grid-template-columns: subgrid;
+        }
+
+        td:before {
+          content: attr(data-header);
+          display: inline;
+          font-weight: 600;
+        }
+
+        &.tests,
+        &.csp,
+        &.headers,
+        &.cookies {
+          td:first-of-type {
+            width: auto;
+          }
+        }
+
+        td:not(:last-of-type) {
+          padding-bottom: 0;
+        }
+
+        td:nth-of-type(n + 2) {
+          padding-top: 0.75rem;
+        }
+
+        &.cookies {
+          td:nth-of-type(n + 3) {
+            text-align: left;
+          }
+        }
+
+        td.score {
+          display: grid;
+
+          > span {
+            display: block;
+          }
+
+          .obs-pass-icon {
+            display: inline-block;
+            height: 1.5em;
+            vertical-align: top;
+          }
+        }
+      }
+    }
+
+    input[type="radio"]:not(:checked) ~ .tab-content {
+      display: none;
+    }
+
+    ol.tabs-list {
+      column-gap: 3rem;
+      display: grid;
+      grid-template-areas:
+        "tab-0 tab-1 tab-2 tab-3 tab-4 tab-5 ."
+        "hr    hr    hr    hr    hr    hr    hr "
+        "mod   mod   mod   mod   mod   mod   mod";
+      grid-template-columns: repeat(6, max-content) 1fr;
+      margin: 0;
+      overflow-x: auto;
+      overscroll-behavior-x: none;
+      padding: 0;
+
+      @media (max-width: #{$screen-lg - 0.02}) {
+        column-gap: 1.75rem;
+        grid-template-columns: repeat(6, max-content) auto;
+      }
+
+      &::before {
+        border: none;
+        border-top: 1px solid var(--observatory-border);
+        content: "";
+        grid-area: hr;
+        margin: 0;
+        width: 100%;
+      }
+
+      li.tabs-list-item {
+        display: contents;
+
+        > input:checked + label {
+          border-bottom: 2px solid var(--observatory-accent);
+          color: var(--text-primary);
+        }
+
+        > input:not(:checked) + label:hover {
+          border-bottom: 2px solid var(--observatory-accent-light);
+          color: var(--text-primary);
+        }
+
+        > input:checked:focus-visible + label {
+          outline-color: var(--accent-primary);
+          outline-offset: 1px;
+          outline-style: auto;
+        }
+
+        > input:not(:checked) + label {
+          color: var(--text-secondary);
+          opacity: 0.775;
+        }
+
+        > label {
+          cursor: pointer;
+          height: 2.2rem;
+          width: max-content;
+        }
+
+        &#tabs-0 {
+          > label,
+          > input {
+            grid-area: tab-0;
+          }
+        }
+
+        &#tabs-1 {
+          > label,
+          > input {
+            grid-area: tab-1;
+          }
+        }
+
+        &#tabs-2 {
+          > label,
+          > input {
+            grid-area: tab-2;
+          }
+        }
+
+        &#tabs-3 {
+          > label,
+          > input {
+            grid-area: tab-3;
+          }
+        }
+
+        &#tabs-4 {
+          > label,
+          > input {
+            grid-area: tab-4;
+          }
+        }
+
+        &#tabs-5 {
+          > label,
+          > input {
+            grid-area: tab-5;
+          }
+        }
+
+        > section.tab-content {
+          grid-area: mod;
+          left: 0;
+          margin: 0;
+          position: sticky;
+
+          @media (max-width: #{$screen-lg - 0.02}) {
+            width: calc(
+              100vw - 12rem - 3rem
+            ); // 12rem: placement width; 3rem: padding
+          }
+          @media (max-width: #{$screen-md - 0.02}) {
+            width: calc(100vw - 2rem); // 2rem: padding
+          }
+        }
+      }
+    }
+  }
+
+  section.scan-rescan {
+    background-color: var(--background-primary);
+    border-radius: var(--border-radius);
+    justify-content: space-between;
+    margin-bottom: 3rem;
+    max-width: var(--max-width);
+    padding: var(--spacing);
+  }
+
+  section.scan-result {
+    background-color: var(--background-primary);
+    border-radius: var(--border-radius);
+    column-gap: var(--spacing);
+    display: grid;
+    grid-template-areas: "grade data actions";
+    grid-template-columns: auto 1fr auto;
+    justify-content: space-between;
+    margin-bottom: 3rem;
+    max-width: var(--max-width);
+    padding: var(--spacing);
+
+    .progress {
+      border-radius: 50%;
+      display: block;
+      height: 0.8rem;
+      width: 0.8rem;
+    }
+
+    a {
+      color: var(--observatory-color);
+      text-decoration: none;
+    }
+
+    a:hover {
+      text-decoration: underline;
+      text-decoration-color: var(--observatory-color-secondary);
+    }
+
+    .scan-another {
+      font-size: var(--type-smaller-font-size);
+      font-weight: 400;
+      margin-top: 1.2rem;
+
+      a {
+        color: var(--observatory-color-secondary);
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .label {
+      font-weight: 600;
+    }
+
+    .actions {
+      grid-area: actions;
+
+      .button-wrap {
+        width: 9rem;
+      }
+    }
+
+    .data {
+      grid-area: data;
+    }
+
+    @media (max-width: #{$screen-xl - 1}) {
+      align-items: flex-start;
+      grid-template-areas: "grade data actions";
+      grid-template-columns: auto 1fr auto;
+      justify-content: space-between;
+      row-gap: calc(var(--spacing) / 2);
+
+      .data {
+        align-self: start;
+      }
+    }
+
+    @media (max-width: #{$screen-lg - 1}) {
+      grid-template-areas: "grade data" ". actions";
+      grid-template-columns: min-content 1fr;
+    }
+
+    @media (max-width: #{$screen-md - 1}) {
+      padding: calc(var(--spacing) / 2);
+    }
+  }
+
+  .grade {
+    background: var(--grade-bg);
+    border: 1px solid var(--grade-border);
+    border-radius: 0.2em;
+    color: var(--grade-border);
+    display: inline-block;
+    font-size: 1.7rem;
+    font-weight: 600;
+    height: 5rem;
+    line-height: 5rem;
+    text-align: center;
+    width: 5rem;
+  }
+
+  .grade-a {
+    --grade-bg: var(--observatory-grade-a-bg);
+    --grade-border: var(--observatory-grade-a-border);
+  }
+
+  .grade-b {
+    --grade-bg: var(--observatory-grade-b-bg);
+    --grade-border: var(--observatory-grade-b-border);
+  }
+
+  .grade-c {
+    --grade-bg: var(--observatory-grade-c-bg);
+    --grade-border: var(--observatory-grade-c-border);
+  }
+
+  .grade-d {
+    --grade-bg: var(--observatory-grade-d-bg);
+    --grade-border: var(--observatory-grade-d-border);
+  }
+
+  .grade-f {
+    --grade-bg: var(--observatory-grade-f-bg);
+    --grade-border: var(--observatory-grade-f-border);
+  }
+}
diff --git a/client/src/observatory/results.tsx b/client/src/observatory/results.tsx
new file mode 100644
index 000000000000..7667b6244281
--- /dev/null
+++ b/client/src/observatory/results.tsx
@@ -0,0 +1,233 @@
+import { useEffect, useMemo, useState } from "react";
+import { Navigate, useLocation } from "react-router";
+import { useSearchParams } from "react-router-dom";
+
+import { useGleanClick } from "../telemetry/glean-context";
+import { OBSERVATORY } from "../telemetry/constants";
+import Container from "../ui/atoms/container";
+
+import ObservatoryCSP from "./results/csp";
+import {
+  ERROR_MAP,
+  FeedbackLink,
+  useResult,
+  useUpdateResult as useRescanTrigger,
+} from "./utils";
+import { ObservatoryLayout } from "./layout";
+import { Progress } from "./progress";
+import { ObservatoryDocsNav } from "./docs";
+import { ObservatoryCookies } from "./results/cookies";
+import { ObservatoryHeaders } from "./results/headers";
+import { ObservatoryHistory } from "./results/history";
+import { ObservatoryRating } from "./results/rating";
+import { ObservatoryTests } from "./results/tests";
+import ObservatoryBenchmark from "./results/benchmark";
+import "./results.scss";
+import {
+  OBSERVATORY_TITLE,
+  OBSERVATORY_TITLE_FULL,
+} from "../../../libs/constants";
+import { SidebarContainer } from "../document/organisms/sidebar";
+
+export default function ObservatoryResults() {
+  const { pathname, search } = useLocation();
+  const [searchParams] = useSearchParams();
+  const host = searchParams.get("host");
+
+  const { data: result, isLoading, error } = useResult(host!);
+
+  // Used for rescanning the current host
+  const {
+    trigger,
+    isMutating,
+    error: updateError,
+  } = useRescanTrigger(host || "");
+
+  const gleanClick = useGleanClick();
+
+  document.title = `Scan results for ${host} | ${OBSERVATORY_TITLE_FULL}`;
+
+  const combinedError = error || updateError;
+
+  useEffect(() => {
+    if (combinedError && !isMutating) {
+      gleanClick(
+        `${OBSERVATORY}: error -> ${ERROR_MAP[combinedError.name] || combinedError.message}`
+      );
+    }
+  }, [combinedError, isMutating, gleanClick]);
+
+  const hasData = host && result && !isLoading && !isMutating;
+  return host ? (
+    <ObservatoryLayout
+      withSidebar={true}
+      parents={[
+        {
+          title: `Report: ${host}`,
+          uri: `${pathname}${search}`,
+        },
+      ]}
+    >
+      <div className="observatory-results">
+        <Container extraClasses="observatory-wrapper">
+          <section className="header">
+            <section className="heading-and-actions">
+              <h1>
+                <span className="accent">{OBSERVATORY_TITLE}</span> Report{" "}
+              </h1>
+              <FeedbackLink />
+            </section>
+            {hasData && !combinedError ? (
+              <ObservatoryRating
+                result={result!}
+                host={host}
+                rescanTrigger={trigger}
+              />
+            ) : isLoading ? (
+              <section className="scan-rescan">
+                <Progress message={`Loading ${host}…`} />
+              </section>
+            ) : isMutating ? (
+              <section className="scan-rescan">
+                <Progress message={`Rescanning ${host}…`} />
+              </section>
+            ) : (
+              <section className="scan-rescan">
+                <div className="error">
+                  Error:{" "}
+                  {ERROR_MAP[combinedError.name] || combinedError.message}
+                </div>
+                <a href="./">Observatory Home</a>
+              </section>
+            )}
+          </section>
+          <div className="sidebar-container">
+            <SidebarContainer doc={{}}>
+              {<ObservatoryDocsNav /> || null}
+            </SidebarContainer>
+          </div>
+          {hasData && !combinedError && (
+            <section className="main">
+              <ObservatoryScanResults result={result} host={host} />
+            </section>
+          )}
+        </Container>
+      </div>
+    </ObservatoryLayout>
+  ) : (
+    <Navigate to="../" />
+  );
+}
+
+function ObservatoryScanResults({ result, host }) {
+  const tabs = useMemo(() => {
+    return [
+      {
+        label: "Scoring",
+        key: "scoring",
+        element: <ObservatoryTests result={result} />,
+      },
+      {
+        label: "CSP analysis",
+        key: "csp",
+        element: <ObservatoryCSP result={result} />,
+      },
+      {
+        label: "Raw server headers",
+        key: "headers",
+        element: <ObservatoryHeaders result={result} />,
+      },
+      {
+        label: "Cookies",
+        key: "cookies",
+        element: <ObservatoryCookies result={result} />,
+      },
+      {
+        label: "Scan history",
+        key: "history",
+        element: <ObservatoryHistory result={result} />,
+      },
+      {
+        label: "Benchmark comparison",
+        key: "benchmark",
+        element: <ObservatoryBenchmark result={result} />,
+      },
+    ];
+  }, [result]);
+  const defaultTabKey = tabs[0].key!;
+  const initialTabKey = window.location.hash.replace("#", "") || defaultTabKey;
+  const initialTab = tabs.findIndex((tab) => tab.key === initialTabKey);
+  const [selectedTab, setSelectedTab] = useState(
+    initialTab === -1 ? 0 : initialTab
+  );
+  useEffect(() => {
+    const handleHashChange = () => {
+      const tabIndex = tabs.findIndex(
+        (tab) => tab.key === window.location.hash.replace("#", "")
+      );
+      setSelectedTab(tabIndex === -1 ? 0 : tabIndex);
+    };
+
+    window.addEventListener("hashchange", handleHashChange);
+    return () => {
+      window.removeEventListener("hashchange", handleHashChange);
+    };
+  });
+
+  const gleanClick = useGleanClick();
+
+  useEffect(() => {
+    const hash = tabs[selectedTab]?.key || defaultTabKey;
+    window.history.replaceState(
+      "",
+      "",
+      window.location.pathname +
+        window.location.search +
+        (hash !== defaultTabKey ? "#" + hash : "")
+    );
+  }, [tabs, selectedTab, defaultTabKey]);
+
+  return (
+    <section className="scan-results">
+      <h2 className="result" id="scan-results-header">
+        Scan results
+      </h2>
+      <ol
+        className="tabs-list"
+        role="tablist"
+        aria-labelledby="scan-results-header"
+      >
+        {tabs.map((t, i) => {
+          return (
+            <li id={`tabs-${i}`} className="tabs-list-item" key={`tli-${i}`}>
+              <input
+                className="visually-hidden"
+                id={`tab-${i}`}
+                name="selected"
+                type="radio"
+                role="tab"
+                checked={i === selectedTab}
+                aria-controls={`tab-container-${i}`}
+                onChange={() => {
+                  gleanClick(`${OBSERVATORY}: tab -> ${t.key}`);
+                  setSelectedTab(i);
+                }}
+              />
+              <label htmlFor={`tab-${i}`} id={`tab-label-${i}`}>
+                {t.label}
+              </label>
+              <section
+                className="tab-content"
+                role="tabpanel"
+                aria-labelledby={`tab-label-${i}`}
+                id={`tab-container-${i}`}
+              >
+                <div className="scroll-container">{t.element}</div>
+              </section>
+            </li>
+          );
+        })}
+      </ol>
+    </section>
+  );
+}
diff --git a/client/src/observatory/results/benchmark.tsx b/client/src/observatory/results/benchmark.tsx
new file mode 100644
index 000000000000..9ae192ef0d30
--- /dev/null
+++ b/client/src/observatory/results/benchmark.tsx
@@ -0,0 +1,71 @@
+import useSWRImmutable from "swr/immutable";
+
+import { Loading } from "../../ui/atoms/loading";
+import NoteCard from "../../ui/molecules/notecards";
+
+import { GradeDistribution, ObservatoryResult } from "../types";
+import { OBSERVATORY_API_URL } from "../../env";
+import GradeSVG from "../benchmark-chart";
+import { handleJsonResponse } from "../utils";
+
+export function useGradeDistribution(grade: string | null | undefined) {
+  return useSWRImmutable("gradeDistribution", async () => {
+    const url = new URL(OBSERVATORY_API_URL + "/api/v2/grade_distribution");
+    const res = await fetch(url);
+    return await handleJsonResponse<GradeDistribution[]>(res);
+  });
+}
+
+export async function handleGradeDistributionResponse(
+  res: Response
+): Promise<GradeDistribution[]> {
+  if (!res.ok) {
+    let message = `${res.status}: ${res.statusText}`;
+    try {
+      const data = await res.json();
+      if (data.error) {
+        message = data.message;
+      }
+    } finally {
+      throw Error(message);
+    }
+  }
+  return await res.json();
+}
+
+export default function ObservatoryBenchmark({
+  result,
+}: {
+  result: ObservatoryResult;
+}) {
+  const {
+    data: gradeDistribution,
+    isLoading,
+    error,
+  } = useGradeDistribution(result.scan.grade);
+  const hasData = !!gradeDistribution;
+
+  return hasData ? (
+    <>
+      <h2>Performance trends from the past year</h2>
+      {
+        <GradeSVG
+          gradeDistribution={gradeDistribution}
+          result={result}
+        ></GradeSVG>
+      }
+      <p>
+        Refer to this graph to assess the website's current status. By following
+        the recommendations provided and rescanning, you can expect an
+        improvement in the website's grade.
+      </p>
+    </>
+  ) : isLoading ? (
+    <Loading />
+  ) : (
+    <NoteCard type="error">
+      <h4>Error</h4>
+      <p>{error ? error.message : "An error occurred."}</p>
+    </NoteCard>
+  );
+}
diff --git a/client/src/observatory/results/cookies.tsx b/client/src/observatory/results/cookies.tsx
new file mode 100644
index 000000000000..c72c647b44c3
--- /dev/null
+++ b/client/src/observatory/results/cookies.tsx
@@ -0,0 +1,117 @@
+import { ObservatoryResult } from "../types";
+import { formatDateTime, PassIcon } from "../utils";
+
+export function ObservatoryCookies({ result }: { result: ObservatoryResult }) {
+  const cookies = result.tests["cookies"]?.data;
+  return cookies && Object.keys(cookies).length !== 0 ? (
+    <table className="cookies">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>
+            <a
+              target="_blank"
+              href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#expires"
+            >
+              Expires
+            </a>
+          </th>
+          <th>
+            <a
+              target="_blank"
+              href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#path"
+            >
+              Path
+            </a>
+          </th>
+          <th>
+            <a
+              target="_blank"
+              href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#secure"
+            >
+              Secure
+            </a>
+          </th>
+          <th>
+            <a
+              target="_blank"
+              href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#httponly"
+            >
+              HttpOnly
+            </a>
+          </th>
+          <th>
+            <a
+              target="_blank"
+              href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#samesite"
+            >
+              SameSite
+            </a>
+          </th>
+          <th>
+            <a
+              target="_blank"
+              href="/en-US/docs/Web/Security/Practical_implementation_guides/Cookies#name"
+            >
+              Prefix
+            </a>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {Object.entries(cookies).map(([key, value]) => (
+          <tr key={key}>
+            <td data-header="Name" className="cookie-name">
+              {key}
+            </td>
+            <td data-header="Expires">
+              {value.expires
+                ? formatDateTime(new Date(value.expires))
+                : "Session"}
+            </td>
+            <td data-header="Path">
+              <code>{value.path}</code>
+            </td>
+            <td data-header="Secure">
+              <PassIcon pass={value.secure} />
+            </td>
+            <td data-header="HttpOnly">
+              <PassIcon pass={value.httponly} />
+            </td>
+            <td data-header="SameSite">
+              {value.samesite ? <code>{capitalize(value.samesite)}</code> : "-"}
+            </td>
+            <td data-header="Prefixed">
+              <CookiePrefix name={key} />
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  ) : (
+    <table className="cookies">
+      <tbody>
+        <tr>
+          <td>No cookies detected</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}
+
+function capitalize(input: string) {
+  return input
+    .split("-")
+    .map((p) => (p ? p[0].toUpperCase() + p.substring(1) : ""))
+    .join("-");
+}
+
+function CookiePrefix({ name }: { name: string }) {
+  if (name.startsWith("__Host-")) {
+    return <code>Host</code>;
+  } else if (name.startsWith("__Secure-")) {
+    return <code>Secure</code>;
+  } else {
+    return <>-</>;
+  }
+}
diff --git a/client/src/observatory/results/csp.tsx b/client/src/observatory/results/csp.tsx
new file mode 100644
index 000000000000..93f61265420f
--- /dev/null
+++ b/client/src/observatory/results/csp.tsx
@@ -0,0 +1,107 @@
+import { ObservatoryResult } from "../types";
+import { PassIcon } from "../utils";
+
+const policyTests = [
+  "unsafeInline",
+  "unsafeEval",
+  "unsafeObjects",
+  "unsafeInlineStyle",
+  "insecureSchemeActive",
+  "insecureSchemePassive",
+  "antiClickjacking",
+  "defaultNone",
+  "insecureBaseUri",
+  "insecureFormAction",
+  "strictDynamic",
+];
+
+export default function ObservatoryCSP({
+  result,
+}: {
+  result: ObservatoryResult;
+}) {
+  const policy = result.tests["content-security-policy"]?.policy;
+
+  // Awkward, but so it has been on python-observatory:
+  // Negate some of the `pass` flags because sometimes
+  // a `pass` on the policy is bad, and sometimes not.
+  const negatedPolicies = [
+    "insecureBaseUri",
+    "insecureFormAction",
+    "insecureSchemeActive",
+    "insecureSchemePassive",
+    "unsafeEval",
+    "unsafeInline",
+    "unsafeInlineStyle",
+    "unsafeObjects",
+  ];
+
+  return (
+    <table className="csp">
+      {policy ? (
+        <>
+          <thead>
+            <tr>
+              <th>Test</th>
+              <th>Result</th>
+              <th>Info</th>
+            </tr>
+          </thead>
+          <tbody>
+            {policyTests.map((pt) => {
+              return policy[pt] ? (
+                <tr key={policy[pt].description}>
+                  <td
+                    data-header="Test"
+                    dangerouslySetInnerHTML={{
+                      __html: policy[pt].description,
+                    }}
+                  />
+                  <td data-header="Pass">
+                    <PassIcon
+                      pass={
+                        negatedPolicies.includes(pt)
+                          ? !policy[pt].pass
+                          : policy[pt].pass
+                      }
+                    />
+                  </td>
+                  <td
+                    data-header="Info"
+                    dangerouslySetInnerHTML={{
+                      __html: policy[pt].info,
+                    }}
+                  ></td>
+                </tr>
+              ) : (
+                []
+              );
+            })}
+          </tbody>
+        </>
+      ) : (
+        <tbody>
+          <tr>
+            <td>
+              <p>
+                {result.tests["content-security-policy"]?.result ===
+                "csp-not-implemented-but-reporting-enabled" ? (
+                  <>
+                    <code>Content-Security-Policy-Report-Only</code> header
+                    detected. Implement an enforced policy; see{" "}
+                    <a href="/en-US/docs/Web/HTTP/CSP" target="_blank">
+                      MDN's Content Security Policy (CSP) documentation
+                    </a>
+                    .
+                  </>
+                ) : (
+                  "No CSP headers detected"
+                )}
+              </p>
+            </td>
+          </tr>
+        </tbody>
+      )}
+    </table>
+  );
+}
diff --git a/client/src/observatory/results/headers.tsx b/client/src/observatory/results/headers.tsx
new file mode 100644
index 000000000000..2858693ab761
--- /dev/null
+++ b/client/src/observatory/results/headers.tsx
@@ -0,0 +1,63 @@
+import useSWRImmutable from "swr/immutable";
+
+import { ObservatoryResult } from "../types";
+
+export function ObservatoryHeaders({ result }: { result: ObservatoryResult }) {
+  return result.scan.response_headers ? (
+    <table className="headers">
+      <thead>
+        <tr>
+          <th>Header</th>
+          <th>Value</th>
+        </tr>
+      </thead>
+      <tbody>
+        {Object.entries(result.scan.response_headers).map(([header, value]) => (
+          <tr key={header}>
+            <td data-header="Header">
+              <HeaderLink header={header} />
+            </td>
+            <td data-header="Value">{value}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  ) : null;
+}
+
+function HeaderLink({ header }: { header: string }) {
+  // try a HEAD fetch for /en-US/docs/Web/HTTP/Headers/<HEADERNAME>/metadata.json
+  // if successful, link to /en-US/docs/Web/HTTP/Headers/<HEADERNAME>
+  const { data } = useHeaderLink(header);
+  const hasData = !!data;
+  const displayHeaderName = upperCaseHeaderName(header);
+  return hasData ? (
+    <a href={data} target="_blank" rel="noreferrer">
+      {displayHeaderName}
+    </a>
+  ) : (
+    <>{displayHeaderName}</>
+  );
+}
+
+function useHeaderLink(header: string) {
+  const prettyHeaderName = upperCaseHeaderName(header);
+  return useSWRImmutable(`headerLink-${header}`, async (key) => {
+    const url = `/en-US/docs/Web/HTTP/Headers/${encodeURIComponent(prettyHeaderName)}/metadata.json`;
+    try {
+      const res = await fetch(url, { method: "HEAD" });
+      return res.ok
+        ? `/en-US/docs/Web/HTTP/Headers/${encodeURIComponent(prettyHeaderName)}`
+        : null;
+    } catch (e) {
+      return null;
+    }
+  });
+}
+
+function upperCaseHeaderName(header: string) {
+  return header
+    .split("-")
+    .map((p) => (p ? p[0].toUpperCase() + p.substring(1) : ""))
+    .join("-");
+}
diff --git a/client/src/observatory/results/history.tsx b/client/src/observatory/results/history.tsx
new file mode 100644
index 000000000000..15bb9b973cd5
--- /dev/null
+++ b/client/src/observatory/results/history.tsx
@@ -0,0 +1,28 @@
+import { ObservatoryResult } from "../types";
+import { formatDateTime, formatMinus } from "../utils";
+
+export function ObservatoryHistory({ result }: { result: ObservatoryResult }) {
+  return result.history.length ? (
+    <>
+      <h2>Changes in score over time</h2>
+      <table className="history">
+        <thead>
+          <tr>
+            <th>Date</th>
+            <th>Score</th>
+            <th>Grade</th>
+          </tr>
+        </thead>
+        <tbody>
+          {[...result.history].reverse().map(({ scanned_at, score, grade }) => (
+            <tr key={scanned_at}>
+              <td data-header="Date">{formatDateTime(new Date(scanned_at))}</td>
+              <td data-header="Score">{score}</td>
+              <td data-header="Grade">{formatMinus(grade)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
+  ) : null;
+}
diff --git a/client/src/observatory/results/human-duration.tsx b/client/src/observatory/results/human-duration.tsx
new file mode 100644
index 000000000000..5eb5dacdadae
--- /dev/null
+++ b/client/src/observatory/results/human-duration.tsx
@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+
+import { formatDateTime } from "../utils";
+
+export function HumanDuration({ date }: { date: Date }) {
+  const [text, setText] = useState(() => displayString(date));
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setText(displayString(date));
+    }, 1000);
+
+    return () => clearInterval(interval);
+  });
+
+  return (
+    <time dateTime={date.toISOString()} title={formatDateTime(date)}>
+      {text}
+    </time>
+  );
+}
+
+function displayString(date: Date) {
+  const currentTime = new Date().getTime();
+  const targetTime = date.getTime();
+  const diffSecs = Math.round((currentTime - targetTime) / 1000);
+
+  if (diffSecs < 0) {
+    return formatDateTime(date);
+  }
+
+  if (diffSecs < 60) {
+    return `Just now`;
+  }
+  if (diffSecs < 60 * 60) {
+    const minutes = Math.floor(diffSecs / 60);
+    return minutes === 1 ? `1 minute ago` : `${minutes} minutes ago`;
+  }
+  if (diffSecs < 60 * 60 * 24) {
+    const hours = Math.floor(diffSecs / 3600);
+    return hours === 1 ? `1 hour ago` : `${hours} hours ago`;
+  }
+  // up to 30 days as days
+  if (diffSecs < 60 * 60 * 24 * 30) {
+    const days = Math.floor(diffSecs / 86400);
+    return days === 1 ? `1 day ago` : `${days} days ago`;
+  }
+
+  // after a week, return the formatted date
+  return formatDateTime(date);
+}
diff --git a/client/src/observatory/results/rating.tsx b/client/src/observatory/results/rating.tsx
new file mode 100644
index 000000000000..bbcb1ac6ba63
--- /dev/null
+++ b/client/src/observatory/results/rating.tsx
@@ -0,0 +1,171 @@
+import { useMemo } from "react";
+
+import { useIsServer } from "../../hooks";
+import { useGleanClick } from "../../telemetry/glean-context";
+import InternalLink from "../../ui/atoms/internal-link";
+import { OBSERVATORY } from "../../telemetry/constants";
+import { ReactComponent as StarsSVG } from "../../../public/assets/observatory/stars.svg";
+
+import { ObservatoryResult, SCORING_TABLE } from "../types";
+import { formatMinus, hostAsRedirectChain } from "../utils";
+import { Tooltip } from "../tooltip";
+import { RescanButton } from "./rescan-button";
+import { HumanDuration } from "./human-duration";
+
+export function ObservatoryRating({
+  result,
+  host,
+  rescanTrigger,
+}: {
+  result: ObservatoryResult;
+  host: string;
+  rescanTrigger: () => void;
+}) {
+  const gleanClick = useGleanClick();
+  const isServer = useIsServer();
+
+  const arrowState = useMemo(() => {
+    const [oldScore, oldGrade] = result.history.length
+      ? [result.history.at(-2)?.score, result.history.at(-2)?.grade]
+      : [undefined, undefined];
+    const newScore = result.scan.score;
+    const newGrade = result.scan.grade;
+    if (
+      typeof newScore === "number" &&
+      typeof oldScore === "number" &&
+      newGrade !== oldGrade &&
+      newScore !== oldScore
+    ) {
+      return oldScore < newScore ? "up" : "down";
+    } else {
+      return "none";
+    }
+  }, [result.history, result.scan.grade, result.scan.score]);
+
+  return (
+    <>
+      <h2 className="summary">
+        Scan summary:{" "}
+        <span className="host">{hostAsRedirectChain(host, result)}</span>
+      </h2>
+      <section className="scan-result">
+        <section className="grade-trend">
+          <div className="overall">
+            <span
+              aria-label="show info tooltip"
+              className="info-tooltip"
+              tabIndex={0}
+            >
+              <div
+                className={`grade grade-${result.scan.grade?.[0]?.toLowerCase()}`}
+              >
+                {formatMinus(result.scan.grade)}
+              </div>
+              <Tooltip>
+                <table
+                  className="grade-tooltip"
+                  id="grades-table"
+                  role="tooltip"
+                >
+                  <thead>
+                    <tr>
+                      <th>Grade</th>
+                      <th>Score</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {SCORING_TABLE.map((st) => {
+                      return (
+                        <tr
+                          className={
+                            result.scan.grade === st.grade ? "current" : ""
+                          }
+                          key={st.grade}
+                        >
+                          <td>{formatMinus(st.grade)}</td>
+                          <td>
+                            {st.scoreText}{" "}
+                            {result.scan.grade === st.grade && st.stars && (
+                              <StarsSVG />
+                            )}
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </Tooltip>
+            </span>
+          </div>
+          <Trend arrowState={arrowState} />
+        </section>
+        <section className="data">
+          <div>
+            <a href="/en-US/observatory/docs/tests_and_scoring" target="_blank">
+              <span className="label">Score</span>
+            </a>
+            : <>{result.scan.score}&thinsp;/&thinsp;100</>
+          </div>
+          <div>
+            <a href="#history">
+              <span className="label">Scan Time</span>
+            </a>
+            :{" "}
+            {!isServer && (
+              <HumanDuration date={new Date(result.scan.scanned_at)} />
+            )}
+          </div>
+          <a href="/en-US/observatory/docs/tests_and_scoring" target="_blank">
+            <span className="label">Tests Passed</span>
+          </a>
+          : {result.scan.tests_passed}&thinsp;/&thinsp;
+          {result.scan.tests_quantity}
+        </section>
+        <section className="actions">
+          {!isServer && (
+            <RescanButton
+              from={new Date(result.scan.scanned_at)}
+              duration={60}
+              onClickHandler={rescanTrigger}
+            />
+          )}
+          <div className="scan-another">
+            <InternalLink
+              to="../"
+              onClick={() => gleanClick(`${OBSERVATORY}: scan-another`)}
+            >
+              Scan another website
+            </InternalLink>
+          </div>
+        </section>
+      </section>
+    </>
+  );
+}
+
+type ARROW_STATE = "up" | "down" | "none";
+
+function Trend({ arrowState }: { arrowState: ARROW_STATE }) {
+  switch (arrowState) {
+    case "up":
+      return (
+        <div className="trend">
+          <span className="arrow-up" aria-hidden="true">
+            ↗︎
+          </span>{" "}
+          since last scan
+        </div>
+      );
+    case "down":
+      return (
+        <div className="trend">
+          <span className="arrow-down" aria-hidden="true">
+            ↘︎
+          </span>{" "}
+          since last scan
+        </div>
+      );
+    default:
+      return [];
+  }
+}
diff --git a/client/src/observatory/results/rescan-button.tsx b/client/src/observatory/results/rescan-button.tsx
new file mode 100644
index 000000000000..217bfd585751
--- /dev/null
+++ b/client/src/observatory/results/rescan-button.tsx
@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react";
+
+import { useGleanClick } from "../../telemetry/glean-context";
+import { OBSERVATORY } from "../../telemetry/constants";
+import { Button } from "../../ui/atoms/button";
+
+export function RescanButton({
+  from,
+  duration,
+  onClickHandler,
+}: {
+  from: Date;
+  duration: number;
+  onClickHandler: () => void;
+}) {
+  function calculateRemainingTime() {
+    const endTime = from.getTime() + duration * 1000;
+    return Math.max(0, endTime - new Date().getTime());
+  }
+  const [remainingTime, setRemainingTime] = useState(() =>
+    calculateRemainingTime()
+  );
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setRemainingTime(calculateRemainingTime());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  });
+
+  const gleanClick = useGleanClick();
+
+  function rescan() {
+    gleanClick(`${OBSERVATORY}: rescan`);
+    onClickHandler();
+  }
+
+  const isExpired = remainingTime <= 0;
+  const remainingSecs = Math.floor(remainingTime / 1000) + 1;
+  const progressPercent = (remainingSecs * 100) / 60;
+  return !isExpired ? (
+    <Button isDisabled={true}>
+      <div
+        className="progress"
+        role="progressbar"
+        aria-labelledby="wait-secs"
+        style={{
+          background: `conic-gradient(var(--button-color) 0grad, ${progressPercent}%, rgba(0,0,0,0) ${progressPercent}% 100%)`,
+        }}
+      ></div>
+      <small id="wait-secs">Wait {remainingSecs}s to rescan</small>
+    </Button>
+  ) : (
+    <Button onClickHandler={rescan}>Rescan</Button>
+  );
+}
diff --git a/client/src/observatory/results/tests.tsx b/client/src/observatory/results/tests.tsx
new file mode 100644
index 000000000000..604f98684282
--- /dev/null
+++ b/client/src/observatory/results/tests.tsx
@@ -0,0 +1,110 @@
+import { useMemo } from "react";
+import { ObservatoryResult, TEST_NAMES_IN_ORDER } from "../types";
+import { formatMinus, Link, PassIcon } from "../utils";
+
+export function ObservatoryTests({ result }: { result: ObservatoryResult }) {
+  const showFootnote = useMemo(() => {
+    return (
+      (result.scan.score || 0) <= 90 &&
+      Object.entries(result.tests).find(([_n, t]) => t.score_modifier > 0)
+    );
+  }, [result]);
+
+  return Object.keys(result.tests).length !== 0 ? (
+    <>
+      <table className="tests">
+        <thead>
+          <tr>
+            <th>Test</th>
+            <th>Score</th>
+            <th>Reason</th>
+            <th>Recommendation</th>
+          </tr>
+        </thead>
+        <tbody>
+          {TEST_NAMES_IN_ORDER.map((name) => {
+            const test = result.tests[name];
+            return (
+              test && (
+                <tr key={name}>
+                  <td data-header="Test">
+                    <Link href={test.link}>{test.title}</Link>
+                  </td>
+                  {test.pass === null ? (
+                    <td data-header="Score">-</td>
+                  ) : (
+                    <td className="score" data-header="Score">
+                      <span>
+                        <span className="obs-score-value">
+                          <ScoreModifier
+                            overallScore={result.scan.score || 0}
+                            scoreModifier={test.score_modifier}
+                          />
+                        </span>
+                        <PassIcon pass={test.pass} />
+                      </span>
+                    </td>
+                  )}
+                  <td
+                    data-header="Reason"
+                    dangerouslySetInnerHTML={{
+                      __html: test.score_description,
+                    }}
+                  />
+                  <td
+                    data-header="Advice"
+                    dangerouslySetInnerHTML={{
+                      __html:
+                        test.recommendation || `<p class="obs-none">None</p>`,
+                    }}
+                  />
+                </tr>
+              )
+            );
+          })}
+        </tbody>
+      </table>
+      {showFootnote && (
+        <section className="footnote" id="bonus-points-explanation">
+          <sup>*</sup> Normally awards bonus points, however, in this case they
+          are not included in the overall score (
+          <a href="/en-US/observatory/docs/tests_and_scoring" target="_blank">
+            find out why
+          </a>
+          ).
+        </section>
+      )}
+    </>
+  ) : null;
+}
+
+function ScoreModifier({
+  overallScore,
+  scoreModifier,
+}: {
+  overallScore: number;
+  scoreModifier: number;
+}) {
+  const [bonusEligible, formattedScoreModifier] = useMemo(() => {
+    return [
+      overallScore >= 90,
+      formatMinus(`${scoreModifier > 0 ? `+${scoreModifier}` : scoreModifier}`),
+    ];
+  }, [overallScore, scoreModifier]);
+  return (
+    <span
+      className={`${!bonusEligible && scoreModifier > 0 ? "not-counted" : ""}`}
+    >
+      {!bonusEligible && scoreModifier > 0 ? (
+        <>
+          0
+          <sup>
+            <a href="#bonus-points-explanation">*</a>
+          </sup>
+        </>
+      ) : (
+        <>{formattedScoreModifier}</>
+      )}
+    </span>
+  );
+}
diff --git a/client/src/observatory/tooltip/index.scss b/client/src/observatory/tooltip/index.scss
new file mode 100644
index 000000000000..2c0dcb2b0531
--- /dev/null
+++ b/client/src/observatory/tooltip/index.scss
@@ -0,0 +1,78 @@
+@use "../../ui/vars" as *;
+
+.observatory {
+  .tooltip-popup table {
+    border: 0;
+    border-collapse: collapse;
+    white-space: nowrap;
+    width: 10rem;
+
+    tr {
+      color: var(--observatory-inverse-color-secondary);
+      font-size: 0.875rem;
+
+      &.current {
+        color: var(--observatory-inverse-color);
+      }
+    }
+
+    th,
+    td {
+      background-color: unset;
+      border: 0;
+      font-weight: var(--font-body);
+      text-align: left;
+      width: 50%;
+    }
+
+    th {
+      font-size: 1rem;
+      padding: 0 0 0.75rem;
+    }
+
+    td {
+      padding: 0;
+
+      svg {
+        vertical-align: -0.3rem;
+      }
+    }
+  }
+
+  .info-tooltip {
+    position: relative;
+
+    .arrow {
+      fill: var(--button-primary-default);
+      margin-left: -20px;
+      margin-top: -2rem;
+      padding: 0;
+      position: absolute;
+    }
+
+    .tooltip-popup {
+      --tooltip-offset: 0;
+      background-color: var(--button-primary-default);
+      border-radius: var(--border-radius);
+      color: var(--observatory-inverse-color-secondary);
+      left: 50%;
+      margin-top: 2rem;
+      max-width: min(100vw, 20rem);
+      padding: 1.5rem;
+      position: absolute;
+      text-align: center;
+      top: 100%;
+      transform: translateX(var(--tooltip-offset));
+      visibility: hidden;
+      width: max-content;
+      z-index: 1;
+    }
+
+    &:hover,
+    &:focus {
+      .tooltip-popup {
+        visibility: visible;
+      }
+    }
+  }
+}
diff --git a/client/src/observatory/tooltip/index.tsx b/client/src/observatory/tooltip/index.tsx
new file mode 100644
index 000000000000..6a4e035f8926
--- /dev/null
+++ b/client/src/observatory/tooltip/index.tsx
@@ -0,0 +1,55 @@
+import { useEffect, useRef, useState } from "react";
+import "./index.scss";
+import { ReactComponent as ArrowSVG } from "../../../public/assets/observatory/tooltip-arrow.svg";
+
+export function Tooltip({
+  children,
+  extraClasses,
+}: {
+  children: React.ReactNode;
+  extraClasses?: string;
+}) {
+  let ref = useRef<HTMLSpanElement | null>(null);
+  let [style, setStyle] = useState<Record<string, string>>({});
+  useEffect(() => {
+    const onResize = () => {
+      const parentRect = ref.current?.parentElement?.getBoundingClientRect();
+      const parentWH = (parentRect?.width || 0) / 2;
+      const x = (parentRect?.x || 0) + parentWH;
+      const rect = ref.current?.getBoundingClientRect();
+      const wH = (rect?.width || 0) / 2;
+      const iW = window.innerWidth;
+      const offset =
+        -1 *
+        (x <= iW / 2 // if the center of the parent is on the left half of the window
+          ? x < wH // if the center of the parent is smaller than half of the tooltip
+            ? x
+            : wH
+          : // the center of the parent is on the right half of the window
+            x > iW - wH // if the inner width of the window is less than half the tooltip
+            ? 2 * wH - (iW - x)
+            : wH);
+      const tooltipOffset = `${offset.toFixed(2)}px`;
+      setStyle(Object.fromEntries([["--tooltip-offset", tooltipOffset]]));
+    };
+    onResize();
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, [ref]);
+  return (
+    <>
+      <span
+        ref={ref}
+        aria-describedby="grade-table"
+        className={`tooltip-popup ${extraClasses || ""}`}
+        style={style}
+      >
+        <ArrowSVG className="arrow" aria-hidden="true" />
+        {children}
+      </span>
+    </>
+  );
+}
diff --git a/client/src/observatory/types.ts b/client/src/observatory/types.ts
new file mode 100644
index 000000000000..a262b1831305
--- /dev/null
+++ b/client/src/observatory/types.ts
@@ -0,0 +1,124 @@
+export interface ObservatoryAnalyzeRequest {
+  host: string;
+}
+
+export type ObservatoryScanState =
+  | "ABORTED"
+  | "FAILED"
+  | "FINISHED"
+  | "PENDING"
+  | "STARTING"
+  | "RUNNING";
+
+export const SCORING_TABLE = [
+  { grade: "A+", scoreText: "100+", score: 100, stars: true },
+  { grade: "A", scoreText: "90", score: 90, stars: true },
+  { grade: "A-", scoreText: "85", score: 85, stars: true },
+  { grade: "B+", scoreText: "80", score: 80 },
+  { grade: "B", scoreText: "70", score: 70 },
+  { grade: "B-", scoreText: "65", score: 65 },
+  { grade: "C+", scoreText: "60", score: 60 },
+  { grade: "C", scoreText: "50", score: 50 },
+  { grade: "C-", scoreText: "45", score: 45 },
+  { grade: "D+", scoreText: "40", score: 40 },
+  { grade: "D", scoreText: "30", score: 30 },
+  { grade: "D-", scoreText: "25", score: 25 },
+  { grade: "F", scoreText: "0", score: 0 },
+];
+
+// Maintain consistent test order.
+export const TEST_NAMES_IN_ORDER = [
+  "content-security-policy",
+  "cookies",
+  "cross-origin-resource-sharing",
+  "redirection",
+  "referrer-policy",
+  "strict-transport-security",
+  "subresource-integrity",
+  "x-content-type-options",
+  "x-frame-options",
+  "cross-origin-resource-policy",
+];
+
+export interface ObservatoryResult {
+  scan: ObservatoryScanResult;
+  tests: ObservatoryTestResult;
+  history: ObservatoryHistoryResult[];
+}
+
+export interface GradeDistribution {
+  grade: string;
+  count: number;
+}
+
+export interface ObservatoryScanResult {
+  algorithm_version: number;
+  scanned_at: string;
+  error?: string | null;
+  grade?: string | null;
+  id: number;
+  response_headers?: Record<string, string>;
+  score?: number;
+  status_code?: number;
+  tests_failed: number;
+  tests_passed: number;
+  tests_quantity: number;
+}
+
+export type ObservatoryTestResult = Record<string, ObservatoryIndividualTest>;
+
+export interface ObservatoryIndividualTest {
+  data: null | ObservatoryCookiesData;
+  expectation: string;
+  name: string;
+  title: string;
+  link: string;
+  pass: boolean;
+  result: string;
+  score_description: string;
+  recommendation: string;
+  score_modifier: number;
+  policy?: ObservatoryCSPPolicy;
+  route?: string[];
+}
+
+export interface ObservatoryHistoryResult {
+  scanned_at: string;
+  grade: string;
+  id: number;
+  score: number;
+}
+
+export type ObservatoryCookiesData = Record<
+  string,
+  ObservatoryIndividualCookie
+>;
+
+export interface ObservatoryIndividualCookie {
+  domain: string;
+  expires: number;
+  httponly: boolean;
+  path: string;
+  samesite: string;
+  secure: boolean;
+}
+
+export interface ObservatoryPolicyItem {
+  pass: boolean | null;
+  description: string;
+  info: string;
+}
+
+export interface ObservatoryCSPPolicy {
+  antiClickjacking: ObservatoryPolicyItem;
+  defaultNone: ObservatoryPolicyItem;
+  insecureBaseUri: ObservatoryPolicyItem;
+  insecureFormAction: ObservatoryPolicyItem;
+  insecureSchemeActive: ObservatoryPolicyItem;
+  insecureSchemePassive: ObservatoryPolicyItem;
+  strictDynamic: ObservatoryPolicyItem;
+  unsafeEval: ObservatoryPolicyItem;
+  unsafeInline: ObservatoryPolicyItem;
+  unsafeInlineStyle: ObservatoryPolicyItem;
+  unsafeObjects: ObservatoryPolicyItem;
+}
diff --git a/client/src/observatory/utils.tsx b/client/src/observatory/utils.tsx
new file mode 100644
index 000000000000..f16050375a5c
--- /dev/null
+++ b/client/src/observatory/utils.tsx
@@ -0,0 +1,139 @@
+import useSWRMutation from "swr/mutation";
+import useSWRImmutable from "swr/immutable";
+
+import { OBSERVATORY_API_URL } from "../env";
+
+import { ObservatoryResult } from "./types";
+import { ReactComponent as PassSVG } from "../../public/assets/observatory/pass-icon.svg";
+import { ReactComponent as FailSVG } from "../../public/assets/observatory/fail-icon.svg";
+
+export function Link({ href, children }: { href: string; children: any }) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      className={`${href.startsWith("/") ? "" : "external"}`}
+    >
+      {children}
+    </a>
+  );
+}
+
+export function PassIcon({ pass }: { pass: boolean | null }) {
+  if (pass === null) {
+    return <>-</>;
+  }
+  return (
+    <span className="obs-pass-icon">
+      {pass ? <PassSVG /> : <FailSVG />}
+      <span className="visually-hidden">{pass ? "Passed" : "Failed"}</span>
+    </span>
+  );
+}
+
+export function FeedbackLink() {
+  return (
+    // eslint-disable-next-line react/jsx-no-target-blank
+    <a
+      href="https://survey.alchemer.com/s3/7897385/MDN-HTTP-Observatory"
+      target="_blank"
+      rel="noopener"
+      className="feedback-link"
+    >
+      Report Feedback
+    </a>
+  );
+}
+
+export function FaqLink() {
+  return (
+    // eslint-disable-next-line react/jsx-no-target-blank
+    <a
+      href="/en-US/observatory/docs/faq"
+      target="_blank"
+      rel="noopener"
+      className="feedback-link faq-link"
+    >
+      Read our FAQ
+    </a>
+  );
+}
+
+export const ERROR_MAP = {
+  TypeError: "Observatory is currently down.", // `fetch()` errors catch-all
+};
+
+export function formatMinus(term: string | null | undefined) {
+  if (!term) {
+    return null;
+  }
+  // replace dash with unicode minus symbol
+  // −
+  // MINUS SIGN
+  // Unicode: U+2212, UTF-8: E2 88 92
+  return `${term}`.replaceAll(/-/g, "−");
+}
+
+export function useUpdateResult(host: string) {
+  return useSWRMutation(
+    host,
+    async (key: string) => {
+      const url = new URL(OBSERVATORY_API_URL + "/api/v2/analyze");
+      url.searchParams.set("host", key);
+      const res = await fetch(url, {
+        method: "POST",
+      });
+      return await handleJsonResponse<ObservatoryResult>(res);
+    },
+    { populateCache: true, throwOnError: false }
+  );
+}
+
+export function useResult(host?: string) {
+  return useSWRImmutable(host, async (key) => {
+    const url = new URL(OBSERVATORY_API_URL + "/api/v2/analyze");
+    url.searchParams.set("host", key);
+    const res = await fetch(url);
+    return await handleJsonResponse<ObservatoryResult>(res);
+  });
+}
+
+export async function handleJsonResponse<T>(res: Response): Promise<T> {
+  if (!res.ok && res.status !== 429) {
+    let message = `${res.status}: ${res.statusText}`;
+    try {
+      const data = await res.json();
+      if (data.error) {
+        message = data.message;
+      }
+    } finally {
+      throw Error(message);
+    }
+  }
+  return await res.json();
+}
+
+export function formatDateTime(date: Date): string {
+  return date.toLocaleString([], {
+    dateStyle: "medium",
+    timeStyle: "medium",
+  });
+}
+
+export function hostAsRedirectChain(host, result: ObservatoryResult) {
+  const chain = result.tests.redirection?.route;
+  if (!chain || chain.length < 1) {
+    return host;
+  }
+  try {
+    const firstUrl = new URL(chain[0]);
+    const lastUrl = new URL(chain[chain.length - 1]);
+    if (firstUrl.hostname === lastUrl.hostname) {
+      return host;
+    }
+    return `${firstUrl.hostname} → ${lastUrl.hostname}`;
+  } catch (e) {
+    return host;
+  }
+}
diff --git a/client/src/placement-context.tsx b/client/src/placement-context.tsx
index f7b4d969b2dd..847b86e6e330 100644
--- a/client/src/placement-context.tsx
+++ b/client/src/placement-context.tsx
@@ -23,7 +23,8 @@ export interface PlacementContextData
 const PLACEMENT_MAP: Record<PlacementType, { typ: string; pattern: RegExp }> = {
   side: {
     typ: "side",
-    pattern: /\/[^/]+\/(play|docs\/|blog\/|curriculum\/[^$]|search$)/i,
+    pattern:
+      /\/[^/]+\/(play|docs\/|blog\/|observatory\/?|curriculum\/[^$]|search$)/i,
   },
   top: {
     typ: "top-banner",
diff --git a/client/src/plus/ai-help/banners.tsx b/client/src/plus/ai-help/banners.tsx
index 9453ad223826..3044fb2b000e 100644
--- a/client/src/plus/ai-help/banners.tsx
+++ b/client/src/plus/ai-help/banners.tsx
@@ -28,7 +28,6 @@ export function AiHelpBanner({
           ? "Now with chat history, enhanced context, and optimized prompts."
           : "Upgrade to MDN Plus 5 or MDN Supporter 10 to unlock the potential of GPT-4-powered AI Help."}
       </p>
-      <p>This is a beta feature.</p>
       {!isSubscriber && (
         <SignUpLink gleanContext={`${AI_HELP}: upsell-banner`} toPlans={true} />
       )}
diff --git a/client/src/telemetry/constants.ts b/client/src/telemetry/constants.ts
index 4351ff6244d1..672ce00c9323 100644
--- a/client/src/telemetry/constants.ts
+++ b/client/src/telemetry/constants.ts
@@ -24,6 +24,7 @@ export const BANNER_AI_HELP_CLICK = "banner_ai_help_click";
 export const PLAYGROUND = "play_action";
 export const AI_EXPLAIN = "ai_explain";
 export const SETTINGS = "settings";
+export const OBSERVATORY = "observatory";
 
 export const A11Y_MENU = "a11y_menu";
 
diff --git a/client/src/ui/base/_themes.scss b/client/src/ui/base/_themes.scss
index f2cdd8fa1b8f..48a121e593de 100644
--- a/client/src/ui/base/_themes.scss
+++ b/client/src/ui/base/_themes.scss
@@ -188,6 +188,37 @@
   --ai-help-icon: #{$mdn-color-light-theme-green-50};
   --ai-help-accent-background-color: #{$mdn-color-light-theme-green-50}10;
 
+  --observatory-bg: rgba(242, 242, 245, 1);
+  --observatory-bg-code: #e1e1e1;
+  --observatory-bg-secondary: rgba(255, 255, 255, 1);
+  --observatory-color: #000;
+  --observatory-color-secondary: rgba(105, 105, 105, 1);
+  --observatory-inverse-color: rgba(255, 255, 255, 1);
+  --observatory-inverse-color-secondary: rgba(179, 179, 179, 1);
+  --observatory-accent: #5a23d7;
+  --observatory-accent-light: #5a23d7aa;
+  --observatory-border: rgba(228, 228, 246, 1);
+  --observatory-border-accent: rgba(90, 35, 215, 1);
+  --observatory-pass-icon-bg: rgba(229, 250, 230, 1);
+  --observatory-pass-icon-color: rgba(0, 121, 54, 1);
+  --observatory-fail-icon-bg: rgba(250, 229, 229, 1);
+  --observatory-fail-icon-color: rgba(211, 0, 56, 1);
+  --observatory-table-bg: rgba(255, 255, 255, 1);
+  --observatory-table-bg-alternate: #f9f9fb;
+  --observatory-table-header-bg: rgba(249, 249, 251, 1);
+  --observatory-grade-a-bg: #d2fadd;
+  --observatory-grade-a-border: #017a37;
+  --observatory-grade-b-bg: #e8fad2;
+  --observatory-grade-b-border: #547a01;
+  --observatory-grade-c-bg: #faf8d2;
+  --observatory-grade-c-border: #7a7001;
+  --observatory-grade-d-bg: #fae8d2;
+  --observatory-grade-d-border: #a65001;
+  --observatory-grade-f-bg: #fad2d2;
+  --observatory-grade-f-border: #a00;
+  --observatory-arrow-down-color: rgba(158, 0, 39, 1);
+  --observatory-arrow-up-color: rgba(0, 121, 54, 1);
+
   --form-limit-color: #{$mdn-color-neutral-60};
   --form-limit-color-emphasis: #{$mdn-color-neutral-70};
   --form-invalid-color: #{$mdn-color-light-theme-red-60};
@@ -465,6 +496,37 @@
   --ai-help-icon: #{$mdn-color-dark-theme-green-30};
   --ai-help-accent-background-color: #{$mdn-color-light-theme-green-50}30;
 
+  --observatory-bg: rgba(52, 52, 52, 1);
+  --observatory-bg-code: #4d4d4d;
+  --observatory-bg-secondary: rgba(0, 0, 0, 1);
+  --observatory-color: #fff;
+  --observatory-color-secondary: rgba(249, 249, 251, 1);
+  --observatory-inverse-color: rgb(27, 27, 27);
+  --observatory-inverse-color-secondary: rgba(105, 105, 105, 1);
+  --observatory-accent: #a388ff;
+  --observatory-accent-light: #a388ffaa;
+  --observatory-border: rgba(105, 105, 105, 1);
+  --observatory-border-accent: rgba(163, 136, 255, 1);
+  --observatory-pass-icon-bg: rgba(38, 92, 61, 1);
+  --observatory-pass-icon-color: rgba(138, 255, 163, 1);
+  --observatory-fail-icon-bg: rgba(92, 38, 38, 1);
+  --observatory-fail-icon-color: rgba(255, 121, 155, 1);
+  --observatory-table-bg: rgb(27, 27, 27);
+  --observatory-table-bg-alternate: #212121;
+  --observatory-table-header-bg: rgb(27, 27, 27);
+  --observatory-grade-a-bg: #265c3d;
+  --observatory-grade-a-border: #89fca1;
+  --observatory-grade-b-bg: #52662a;
+  --observatory-grade-b-border: #d5fc88;
+  --observatory-grade-c-bg: #66602a;
+  --observatory-grade-c-border: #fcf988;
+  --observatory-grade-d-bg: #5c3d26;
+  --observatory-grade-d-border: #ff6a00;
+  --observatory-grade-f-bg: #5c2626;
+  --observatory-grade-f-border: #fc8888;
+  --observatory-arrow-down-color: rgba(255, 112, 127, 1);
+  --observatory-arrow-up-color: rgba(0, 255, 106, 1);
+
   --form-limit-color: #{$mdn-color-neutral-40};
   --form-limit-color-emphasis: #{$mdn-color-neutral-30};
   --form-invalid-color: #{$mdn-color-light-theme-red-30};
diff --git a/client/src/ui/molecules/main-menu/index.tsx b/client/src/ui/molecules/main-menu/index.tsx
index 0776c689995a..a61dc3e1e28d 100644
--- a/client/src/ui/molecules/main-menu/index.tsx
+++ b/client/src/ui/molecules/main-menu/index.tsx
@@ -6,13 +6,12 @@ import { PlusMenu } from "../plus-menu";
 
 import "./index.scss";
 import { PLUS_IS_ENABLED } from "../../../env";
-import { useLocale } from "../../../hooks";
 import { useGleanClick } from "../../../telemetry/glean-context";
 import { MENU } from "../../../telemetry/constants";
 import { useLocation } from "react-router";
+import { ToolsMenu } from "../tools-menu";
 
 export default function MainMenu({ isOpenOnMobile }) {
-  const locale = useLocale();
   const previousActiveElement = useRef<null | HTMLButtonElement>(null);
   const mainMenuRef = useRef<null | HTMLUListElement>(null);
   const [visibleSubMenuId, setVisibleSubMenuId] = useState<string | null>(null);
@@ -82,14 +81,12 @@ export default function MainMenu({ isOpenOnMobile }) {
             toggleMenu={toggleMenu}
           />
         )}
-        <TopLevelMenuLink to="/en-US/curriculum/">
-          Curriculum<sup className="new">New</sup>
-        </TopLevelMenuLink>
+        <TopLevelMenuLink to="/en-US/curriculum/">Curriculum</TopLevelMenuLink>
         <TopLevelMenuLink to="/en-US/blog/">Blog</TopLevelMenuLink>
-        <TopLevelMenuLink to={`/${locale}/play`}>Play</TopLevelMenuLink>
-        <TopLevelMenuLink to="/en-US/plus/ai-help">
-          AI Help <sup className="new beta">Beta</sup>
-        </TopLevelMenuLink>
+        <ToolsMenu
+          visibleSubMenuId={visibleSubMenuId}
+          toggleMenu={toggleMenu}
+        />
       </ul>
     </nav>
   );
diff --git a/client/src/ui/molecules/menu/index.tsx b/client/src/ui/molecules/menu/index.tsx
index f89f90ec1440..8dc272cc1fa4 100644
--- a/client/src/ui/molecules/menu/index.tsx
+++ b/client/src/ui/molecules/menu/index.tsx
@@ -25,8 +25,9 @@ export const Menu = ({
 
   isActive =
     isActive ??
-    (typeof menu.to === "string" &&
-      pathname.startsWith(menu.to.split("#", 2)[0]));
+    (typeof menu.to === "string"
+      ? pathname.startsWith(menu.to.split("#", 2)[0])
+      : menu.items.some((item) => item.url && pathname.startsWith(item.url)));
   const hasAnyDot = menu.items.some((item) => item.dot);
 
   return (
diff --git a/client/src/ui/molecules/plus-menu/index.tsx b/client/src/ui/molecules/plus-menu/index.tsx
index 9455dc5011cb..5aa5138688c7 100644
--- a/client/src/ui/molecules/plus-menu/index.tsx
+++ b/client/src/ui/molecules/plus-menu/index.tsx
@@ -39,7 +39,7 @@ export const PlusMenu = ({ visibleSubMenuId, toggleMenu }) => {
         description: "Get real-time assistance and support",
         hasIcon: true,
         iconClasses: "submenu-icon",
-        label: "AI Help (beta)",
+        label: "AI Help",
         url: aiHelpUrl,
       },
       ...(!isServer && isAuthenticated
diff --git a/client/src/ui/molecules/submenu/index.tsx b/client/src/ui/molecules/submenu/index.tsx
index 9f2313a1f71a..1931e98db100 100644
--- a/client/src/ui/molecules/submenu/index.tsx
+++ b/client/src/ui/molecules/submenu/index.tsx
@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import { MENU } from "../../../telemetry/constants";
 import { useGleanClick } from "../../../telemetry/glean-context";
 import "./index.scss";
@@ -17,7 +18,7 @@ export type SubmenuItem = {
 export type MenuEntry = {
   id: string;
   items: SubmenuItem[];
-  label: string;
+  label: string | ReactNode;
   to?: string;
 };
 
diff --git a/client/src/ui/molecules/tools-menu/index.scss b/client/src/ui/molecules/tools-menu/index.scss
new file mode 100644
index 000000000000..a5082ad29ca4
--- /dev/null
+++ b/client/src/ui/molecules/tools-menu/index.scss
@@ -0,0 +1,11 @@
+@use "../../vars" as *;
+
+@media screen and (min-width: $screen-lg) {
+  #tools-button {
+    display: flex;
+
+    &::after {
+      display: none;
+    }
+  }
+}
diff --git a/client/src/ui/molecules/tools-menu/index.tsx b/client/src/ui/molecules/tools-menu/index.tsx
new file mode 100644
index 000000000000..67bf16d06219
--- /dev/null
+++ b/client/src/ui/molecules/tools-menu/index.tsx
@@ -0,0 +1,45 @@
+import { OBSERVATORY_TITLE } from "../../../../../libs/constants";
+import { useLocale } from "../../../hooks";
+import { Menu } from "../menu";
+
+import "./index.scss";
+
+export const ToolsMenu = ({ visibleSubMenuId, toggleMenu }) => {
+  const locale = useLocale();
+
+  const menu = {
+    id: "tools",
+    label: (
+      <>
+        Tools <sup className="new">New</sup>
+      </>
+    ),
+    items: [
+      {
+        description: "Write, test and share your code",
+        hasIcon: true,
+        iconClasses: "submenu-icon",
+        label: "Playground",
+        url: `/${locale}/play`,
+      },
+      {
+        description: "Scan a website for free",
+        hasIcon: true,
+        iconClasses: "submenu-icon",
+        label: OBSERVATORY_TITLE,
+        url: `/en-US/observatory`,
+        dot: "New",
+      },
+      {
+        description: "Get real-time assistance and support",
+        hasIcon: true,
+        iconClasses: "submenu-icon",
+        label: "AI Help",
+        url: `/en-US/plus/ai-help`,
+      },
+    ],
+  };
+  const isOpen = visibleSubMenuId === menu.id;
+
+  return <Menu menu={menu} isOpen={isOpen} toggle={toggleMenu} />;
+};
diff --git a/client/src/ui/organisms/top-navigation-main/index.scss b/client/src/ui/organisms/top-navigation-main/index.scss
index 437c286f1417..dd19294bbd8e 100644
--- a/client/src/ui/organisms/top-navigation-main/index.scss
+++ b/client/src/ui/organisms/top-navigation-main/index.scss
@@ -81,7 +81,6 @@
     }
 
     &.menu-toggle {
-      min-height: 53px;
       padding: 0.5rem;
     }
 
diff --git a/copy/observatory/faq.md b/copy/observatory/faq.md
new file mode 100644
index 000000000000..4aaf53149b97
--- /dev/null
+++ b/copy/observatory/faq.md
@@ -0,0 +1,138 @@
+---
+title: FAQ
+---
+
+# Frequently asked questions
+
+## Should I implement all recommendations?
+
+Yes, you should do it if possible. There is no way to programmatically determine
+the risk level of any given site. However, while your site may not be high-risk,
+it is still worth learning about the defensive security standards highlighted by
+Observatory, and implementing them wherever you can.
+
+## If I get an A+ grade, does that mean my site is secure?
+
+We'd love to say that any site that gets an A+ Observatory grade is perfectly
+secure, but there are a lot of security considerations that we can't test.
+Observatory tests for preventative measures against
+[Cross-site scripting (XSS)](/en-US/docs/Glossary/Cross-site_scripting) attacks,
+[manipulator-in-the-middle (MiTM)](/en-US/docs/Glossary/MitM) attacks,
+cross-domain information leakage, insecure
+[cookies](/en-US/docs/Web/HTTP/Cookies),
+[Content Delivery Network](/en-US/docs/Glossary/CDN) (CDN) compromises, and
+improperly issued certificates.
+
+However, it does not test for outdated software versions,
+[SQL injection](/en-US/docs/Glossary/SQL_Injection) vulnerabilities, vulnerable
+content management system plugins, improper creation or storage of passwords,
+and more. These are just as important as the issues Observatory _does_ test for,
+and site operators should not be neglectful of them simply because they score
+well on Observatory.
+
+## Can I scan non-websites, such as API endpoints?
+
+The HTTP Observatory is designed for scanning websites, not API endpoints. It
+can be used for API endpoints, and the security headers expected by Observatory
+shouldn't cause any negative impact for APIs that return exclusively data, such
+as JSON or XML. However, the results may not accurately reflect the security
+posture of the API. API endpoints generally should only be accessible over
+HTTPS. The recommended configuration for API endpoints is:
+
+```http
+Content-Security-Policy: default-src 'none'; frame-ancestors 'none'
+Strict-Transport-Security: max-age=63072000
+X-Content-Type-Options: nosniff
+```
+
+## Can other people see my test results?
+
+Anyone can choose to scan any domain, and the scan history for each domain is
+public. However, HTTP Observatory does not store user data related to each scan.
+In the old version of HTTP Observatory, users could choose to set their scan to
+"public" or keep it private (the default), and there was a "recent scans" list
+where domain names were listed. "Recent scans" was the main feature that users
+would potentially wish to opt-out from, but it is no longer supported, hence
+there is now no reason to provide the "public" flag.
+
+## When did the move occur?
+
+HTTP Observatory was launched on MDN on July 2, 2024, with the existing Mozilla
+Observatory site redirecting to it. Other tools like TLS Observatory, SSH
+Observatory, and Third-party tests have been deprecated, and will be sunset in
+September 2024.
+
+> **Note:** Historic scan data has been preserved, and is included in the
+> provided scan history for each domain.
+
+## What has changed after the migration?
+
+The MDN team has:
+
+- Updated the user experience to improve the site's look and make it easier to
+  use. For example, the recommendations highlighted by the test results are all
+  shown together, instead of one at a time.
+- Updated the
+  [accompanying documentation](/en-US/docs/Web/Security/Practical_implementation_guides#content_security_fundamentals)
+  to bring it up to date and improve legibility.
+- Changed the "rescan" checkbox and its underlying mechanics:
+  - There is no longer a rescan parameter.
+  - A site can only be scanned and a new result returned every 60 seconds.
+  - Deep-linking into a report initiates a rescan if the previous scan data is
+    older than 24 hours.
+- Updated the
+  [tests](/en-US/observatory/docs/tests_and_scoring#tests-and-score-modifiers)
+  to bring them up-to-date with latest security best practices:
+  - Removed the out-of-date `X-XSS-Protection` test.
+  - Removed the out-of-date Flash and Silverlight (`clientaccesspolicy.xml` and
+    `crossdomain.xml`) embedding tests.
+  - Added a
+    [`Cross-Origin-Resource-Policy`](/en-US/docs/Web/HTTP/Headers/Cross-Origin-Resource-Policy)
+    (CORP) test.
+  - Updated the
+    [`Referrer-Policy`](/en-US/docs/Web/HTTP/Headers/Referrer-Policy) test to
+    update the score modifier for `referrer-policy-unsafe` and remove the
+    `referrer-policy-no-referrer-when-downgrade` result.
+
+## Has the HTTP Observatory API been updated to use the new tests?
+
+Not yet. The API will continue using the old test infrastructure for a while,
+therefore you will see some small differences between test scores returned by
+the API and the website. The API will be updated to use the new tests in a
+near-future iteration.
+
+## Does the new HTTP Observatory provide specific TLS and certificate data?
+
+The previous Observatory site included specific results tabs containing TLS and
+certificate analysis data. The new one does not, and there are currently no
+plans to include these features: it provides a clear focus on HTTP data.
+
+## (Redirection) What is the HTTP redirection test assessing?
+
+This test is checking whether your web server is making its
+[initial redirection from HTTP to HTTPS](/en-US/docs/Web/Security/Practical_implementation_guides/TLS#http_redirection),
+on the same hostname, before doing any further redirections. This allows the
+HTTP
+[`Strict-Transport-Security`](/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security)
+(HSTS) header to be applied properly.
+
+For example, this redirection order is correct:
+
+`http://example.com` → `https://example.com` → `https://www.example.com`
+
+An incorrect (and penalized) redirection looks like this:
+
+`http://example.com` → `https://www.example.com`
+
+## (X-Frame-Options) What if I want to allow my site to be framed?
+
+As long as you are explicit about your preference by using the
+[`Content-Security-Policy`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy)
+[`frame-ancestors`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors)
+directive, you will pass the
+[`X-Frame-Options`](/en-US/docs/Web/HTTP/Headers/X-Frame-Options) test. For
+example, to allow your site to be framed by any HTTPS site:
+
+```http
+Content-Security-Policy: frame-ancestors https:
+```
diff --git a/copy/observatory/tests_and_scoring.md b/copy/observatory/tests_and_scoring.md
new file mode 100644
index 000000000000..ef75cc919b40
--- /dev/null
+++ b/copy/observatory/tests_and_scoring.md
@@ -0,0 +1,60 @@
+---
+title: Tests & Scoring
+---
+
+# HTTP Observatory Scoring Methodology
+
+It is difficult to assign an objective value to a subjective question such as
+"How bad is not implementing HTTP Strict Transport Security?" In addition, what
+may be unnecessary for one site — such as implementing Content Security Policy —
+might mitigate important risks for another. The scores and grades offered by the
+Mozilla Observatory are designed to alert developers when they're not taking
+advantage of the latest web security features. Individual developers will need
+to determine which ones are appropriate for their sites.
+
+This page outlines the scoring methodology and grading system Observatory uses,
+before listing all of the specific tests along with their score modifiers.
+
+## Scoring Methodology
+
+All websites start with a baseline score of 100, which is then modified with
+penalties and/or bonuses resulting from the tests. The scoring is done across
+two rounds:
+
+1. The baseline score has the penalty points deducted from it.
+2. If the resulting score is 90 (A) or greater, the bonuses are then added to
+   it. You can think of the bonuses as extra credit for going above and beyond
+   the call of duty in defending your website.
+
+Each site tested by Observatory is awarded a grade based on its final score
+after the two rounds. The minimum score is 0, and the highest possible score in
+the HTTP Observatory is currently 135.
+
+## Grading Chart
+
+| Scoring Range |     Grade     |
+| :-----------: | :-----------: |
+|     100+      |   &nbsp;A+    |
+|     90-99     | &nbsp;A&nbsp; |
+|     85-89     |   &nbsp;A-    |
+|     80-84     |   &nbsp;B+    |
+|     70-79     | &nbsp;B&nbsp; |
+|     65-69     |   &nbsp;B-    |
+|     60-64     |   &nbsp;C+    |
+|     50-59     | &nbsp;C&nbsp; |
+|     45-49     |   &nbsp;C-    |
+|     40-44     |   &nbsp;D+    |
+|     30-39     | &nbsp;D&nbsp; |
+|     25-29     |   &nbsp;D-    |
+|     0-24      | &nbsp;F&nbsp; |
+
+The letter grade ranges and modifiers are essentially arbitrary, however, they
+are based on feedback from industry professionals on how important passing or
+failing a given test is likely to be.
+
+## Tests and Score Modifiers
+
+> **Note:** Over time, the modifiers may change as baselines shift or new
+> cutting-edge defensive security technologies are created. The bonuses
+> (positive modifiers) are specifically designed to encourage people to adopt
+> new security technologies or tackle difficult implementation challenges.
diff --git a/docs/envvars.md b/docs/envvars.md
index e7b81843a84c..0d70412bb960 100644
--- a/docs/envvars.md
+++ b/docs/envvars.md
@@ -352,3 +352,9 @@ included this value for `geo.country_iso`.
 
 - Sets the host name for the playground iframe. Set this to `localhost:5042`
   when working on playground functionality.
+
+### REACT_APP_OBSERVATORY_API_URL
+
+**Default: `https://observatory-api.mdn.allizom.net`**
+
+- Base url for the Observatory API server.
diff --git a/kumascript/macros/HTTPSidebar.ejs b/kumascript/macros/HTTPSidebar.ejs
index 1c2c268c0807..eaa828b301f9 100644
--- a/kumascript/macros/HTTPSidebar.ejs
+++ b/kumascript/macros/HTTPSidebar.ejs
@@ -325,8 +325,8 @@ var text = mdn.localStringMap({
                 <li><%-web.smartLink(`/${locale}/docs/Web/HTTP/Headers/X-Content-Type-Options`, null, "X-Content-Type-Options")%></li>
                 <li><%-web.smartLink(`/${locale}/docs/Web/HTTP/Headers/X-Frame-Options`, null, "X-Frame-Options")%></li>
                 <li><%-web.smartLink(`/${locale}/docs/Web/HTTP/Headers/X-XSS-Protection`, null, "X-XSS-Protection")%></li>
-                <li><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">Mozilla web security guidelines</a></li>
-                <li><a href="https://observatory.mozilla.org/">Mozilla Observatory</a></li>
+                <li><%-web.smartLink(`/${locale}/docs/Web/Security/Practical_implementation_guides`)%></li>
+                <li><a href="https://developer.mozilla.org/en-US/observatory">HTTP Observatory</a></li>
             </ol>
         </details>
     </li>
diff --git a/libs/constants/index.d.ts b/libs/constants/index.d.ts
index ce019a3de91d..2df1cccf889c 100644
--- a/libs/constants/index.d.ts
+++ b/libs/constants/index.d.ts
@@ -27,3 +27,5 @@ export const HTML_FILENAME: string;
 export const MARKDOWN_FILENAME: string;
 export const VALID_MIME_TYPES: Set<string>;
 export const MAX_COMPRESSION_DIFFERENCE_PERCENTAGE: number;
+export const OBSERVATORY_TITLE: string;
+export const OBSERVATORY_TITLE_FULL: string;
diff --git a/libs/constants/index.js b/libs/constants/index.js
index 8f52bdf0531e..2bd1b51a603a 100644
--- a/libs/constants/index.js
+++ b/libs/constants/index.js
@@ -111,6 +111,10 @@ export const CSP_DIRECTIVES = {
     "https://*.analytics.google.com",
     "https://*.googletagmanager.com",
 
+    // Observatory
+    "https://observatory-api.mdn.allizom.net",
+    "https://observatory-api.mdn.mozilla.net",
+
     "stats.g.doubleclick.net",
     "https://api.stripe.com",
   ],
@@ -275,6 +279,8 @@ export const VALID_FLAW_CHECKS = new Set([
 
 export const MDN_PLUS_TITLE = "MDN Plus";
 export const CURRICULUM_TITLE = "MDN Curriculum";
+export const OBSERVATORY_TITLE = "HTTP Observatory";
+export const OBSERVATORY_TITLE_FULL = "HTTP Observatory | MDN";
 
 // -------
 // content
diff --git a/libs/types/hydration.ts b/libs/types/hydration.ts
index 27396f4e52d0..6d50f30f306f 100644
--- a/libs/types/hydration.ts
+++ b/libs/types/hydration.ts
@@ -6,6 +6,7 @@ interface HydrationData<T = any, S = any> {
   blogMeta?: BlogPostMetadata | null;
   pageNotFound?: boolean;
   pageTitle?: any;
+  pageDescription?: string;
   possibleLocales?: any;
   locale?: any;
   noIndexing?: boolean;
diff --git a/ssr/render.ts b/ssr/render.ts
index a9c8254312d7..7cbdba439454 100644
--- a/ssr/render.ts
+++ b/ssr/render.ts
@@ -105,6 +105,7 @@ export default function render(
     pageNotFound = false,
     hyData = null,
     pageTitle = null,
+    pageDescription = "",
     possibleLocales = null,
     locale = null,
     noIndexing = false,
@@ -118,7 +119,6 @@ export default function render(
 
   const canonicalURL = `${BASE_URL}${url}`;
 
-  let pageDescription = "";
   let escapedPageTitle = htmlEscape(pageTitle);
 
   const hydrationData: HydrationData = { url };