diff --git a/.github/workflows/gh-pages-build-deploy.yml b/.github/workflows/gh-pages-build-deploy.yml
index 727f2828113..a232b215a0b 100644
--- a/.github/workflows/gh-pages-build-deploy.yml
+++ b/.github/workflows/gh-pages-build-deploy.yml
@@ -7,8 +7,9 @@ on:
     branches:
       - "main"
     paths:
-      - "gh-pages/**"
-      - ".github/workflows/gh-pages-build-deploy.yml"
+      - "gh-pages/**" # Rebuild when any of the pages are updated.
+      - ".github/workflows/gh-pages-build-deploy.yml" # Rebuild when this file is updated.
+      - "packages/web-features/package.json"  # Rebuild when a new package is released.
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -41,6 +42,7 @@ jobs:
         with:
           cache: npm
           node-version-file: .node-version
+          cache-dependency-path: gh-pages/package-lock.json
       - name: NPM Install
         run: npm ci
         working-directory: gh-pages/
diff --git a/gh-pages/eleventy.config.js b/gh-pages/eleventy.config.js
index 1a72caec02c..11b5f1fb3a8 100644
--- a/gh-pages/eleventy.config.js
+++ b/gh-pages/eleventy.config.js
@@ -1,12 +1,30 @@
 const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");
 const markdownIt = require("markdown-it");
 const markdownItAnchor = require("markdown-it-anchor");
+const webFeatures = require("web-features/data.json");
 
 module.exports = function (eleventyConfig) {
+  eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
   eleventyConfig.addPassthroughCopy("./src/assets/img");
   eleventyConfig.addPassthroughCopy("./src/assets/fonts");
   eleventyConfig.addPassthroughCopy("./src/assets/css");
-  eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
+
+  // Get keys from features, loop through them to create an array of
+  // objects with the feature names & keys.
+  eleventyConfig.addGlobalData("featuresList", () => {
+    const result = [];
+
+    const features = webFeatures.features;
+    const keys = Object.keys(features);
+    for (const key of keys) {
+      const featureName = features[key].name;
+      const name = featureName.replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+      result.push({ key, name });
+    }
+
+    return result;
+  });
+
   const mdOpts = {
     html: true,
     breaks: true,
diff --git a/gh-pages/package-lock.json b/gh-pages/package-lock.json
index 142e25b8ec9..a966d8c392e 100644
--- a/gh-pages/package-lock.json
+++ b/gh-pages/package-lock.json
@@ -7,6 +7,9 @@
     "": {
       "name": "@web-platform-dx/web-features/site",
       "version": "0.1.0",
+      "dependencies": {
+        "web-features": "^1.3.0-dev-20240918141109-a1c1086"
+      },
       "devDependencies": {
         "@11ty/eleventy": "^2.0.1",
         "markdown-it": "^14.1.0",
@@ -2695,6 +2698,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/web-features": {
+      "version": "1.3.0-dev-20240918141109-a1c1086",
+      "resolved": "https://registry.npmjs.org/web-features/-/web-features-1.3.0-dev-20240918141109-a1c1086.tgz",
+      "integrity": "sha512-eUvE2Wx4WaGTuM0D4dbD0mHKosguJfd7wCsPyecKG+p2yLS0IrkOVHJEn/atjbjBvHK4tI6i2GSGrjqYFLJ4pA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/gh-pages/package.json b/gh-pages/package.json
index 21bd31e93ed..09f570eabc8 100644
--- a/gh-pages/package.json
+++ b/gh-pages/package.json
@@ -13,11 +13,13 @@
   "scripts": {
     "build:dev": "eleventy",
     "build:prod": "eleventy --pathprefix=web-features",
-    "dev": "eleventy --serve"
+    "dev": "eleventy --serve",
+    "clean": "rm -rf ../_site"
   },
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
     "markdown-it": "^14.1.0",
-    "markdown-it-anchor": "^9.1.0"
+    "markdown-it-anchor": "^9.1.0",
+    "web-features": "next"
   }
 }
diff --git a/gh-pages/src/_includes/default.html b/gh-pages/src/_includes/default.html
index 3dc416fc1cc..b5123d066f2 100644
--- a/gh-pages/src/_includes/default.html
+++ b/gh-pages/src/_includes/default.html
@@ -45,6 +45,7 @@
           <li><a href="/">Baseline</a></li>
           <li><a href="/web-features/">web-features</a></li>
           <li><a href="/webdx-cg/">WebDX Community Group</a></li>
+          <li><a href="/lookup/">Lookup Baseline status</a></li>
           <li><a href="/use-baseline/">Baseline in your project</a></li>
           <li><a href="/name-and-logo-usage-guidelines/">Name and logo usage guidelines</a></li>
           <li><a href="/baseline-in-the-wild/">Baseline in the wild</a></li>
diff --git a/gh-pages/src/assets/css/style.css b/gh-pages/src/assets/css/style.css
index aa748189381..f2c9f513beb 100644
--- a/gh-pages/src/assets/css/style.css
+++ b/gh-pages/src/assets/css/style.css
@@ -342,3 +342,15 @@ table.logos img {
 table.logos img.dark-bg {
   background-color: black;
 }
+
+label {
+  display: block;
+}
+
+select {
+  width: 100%;
+}
+
+baseline-status {
+  margin-top: 2em;
+}
diff --git a/gh-pages/src/index.md b/gh-pages/src/index.md
index 439505b32db..b4e42bdf95a 100644
--- a/gh-pages/src/index.md
+++ b/gh-pages/src/index.md
@@ -21,7 +21,7 @@ Baseline is calculated using the following core browser set:
 
 ## How do I find the Baseline status of a feature?
 
-You can find at-a-glance Baseline statuses on [Can I Use](https://caniuse.com/) feature entries, and [MDN Web Docs](https://developer.mozilla.org/) reference pages. See [Baseline in the wild](/baseline-in-the-wild/) for more examples.
+You can find at-a-glance Baseline statuses on [Can I Use](https://caniuse.com/) feature entries, and [MDN Web Docs](https://developer.mozilla.org/) reference pages, or on our [lookup](/lookup/) page. See [Baseline in the wild](/baseline-in-the-wild/) for more examples.
 
 You can [use Baseline on your site](/use-baseline/) too.
 
diff --git a/gh-pages/src/lookup.md b/gh-pages/src/lookup.md
new file mode 100644
index 00000000000..8ec08185786
--- /dev/null
+++ b/gh-pages/src/lookup.md
@@ -0,0 +1,73 @@
+---
+layout: "default.html"
+title: "Lookup Baseline status"
+description: Lookup Baseline status for a web feature.
+---
+
+Look up the Baseline status of a web feature using the [`<baseline-status>` web component](https://github.com/web-platform-dx/baseline-status).
+
+<div>
+  <label for="feature-select">Web feature</label>
+  <select name="feature" id="feature-select">
+    <option value=""></option>
+{% for feature in featuresList %}<option value="{{ feature.key }}">{{ feature.name }} ({{ feature.key }})</option>
+{% endfor %}
+  </select>
+</div>
+
+<div id="status-container">
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/baseline-status@1.0.4/baseline-status.min.js" type="module"></script>
+
+<script>
+  const select = document.getElementById("feature-select");
+  const container = document.getElementById("status-container");
+
+  // On page load, if a query string is provided, update the widget.
+  updateFromQueryString();
+
+  // When the back/forward buttons are used, update the widget.
+  window.addEventListener("popstate", (e) => {
+    updateFromQueryString();
+  });
+
+  // When an item is selected, update the widget.
+  select.addEventListener("change", (e) => {
+    const newKey = e.target.value;
+    if (newKey) {
+      addStatusElement(newKey, true);
+    }
+  });
+
+  // Read the query string and update the widget.
+  function updateFromQueryString() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const qsKey = urlParams.get("key");
+    if (qsKey) {
+      addStatusElement(qsKey);
+      select.value = qsKey;
+    }
+  }
+
+  // Add the status element to the page, and optionally update the query string.
+  function addStatusElement(featureId, updateQueryString) {
+    removeStatusElement();
+    const elem = document.createElement("baseline-status");
+    elem.setAttribute("featureId", featureId);
+    container.appendChild(elem);
+    if (updateQueryString) {
+      const url = new URL(location);
+      url.searchParams.set("key", featureId);
+      history.pushState({}, "", url);
+    }
+  }
+
+  // Remove all status elements from the page.
+  function removeStatusElement() {
+    const elems = container.getElementsByTagName("baseline-status");
+    for (const elem of elems) {
+      elem.remove();
+    }
+  }
+</script>