diff --git a/assets/js/index.js b/assets/js/index.js
index de8d5bf874..bda8ebbff3 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -1,68 +1,3 @@
-var searchForms = document.getElementsByClassName("search-container")
-
-Array.from(searchForms).forEach(container => {
-  const search = container.querySelectorAll('.search')[0]
-  const suggestions = document.querySelectorAll('.suggestions')[0]
-
-  if (search) {
-    document.addEventListener('keydown', inputFocus);
-  }
-
-  function inputFocus(e) {
-    if (e.key === '/' ) {
-      e.preventDefault();
-      search.focus();
-    }
-    if (e.key === 'Escape' ) {
-      search.blur();
-      suggestions.classList.add('d-none');
-    }
-  }
-
-  document.addEventListener('click', function(event) {
-    let isClickInsideElement = suggestions.contains(event.target);
-
-    if (!isClickInsideElement) {
-      suggestions.classList.add('d-none');
-    }
-  });
-
-  document.addEventListener('keydown', suggestionFocus);
-
-  function suggestionFocus(e) {
-    const suggestionsHidden = suggestions.classList.contains('d-none');
-    if (suggestionsHidden) return;
-
-    const focusableSuggestions = [...suggestions.querySelectorAll('a')];
-    if (focusableSuggestions.length === 0) return;
-
-    const index = focusableSuggestions.indexOf(document.activeElement);
-
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      const nextIndex = index > 0 ? index - 1 : 0;
-      focusableSuggestions[nextIndex].focus();
-    } else if (e.key === "ArrowDown") {
-      e.preventDefault();
-      const nextIndex = index + 1 < focusableSuggestions.length ? index + 1 : index;
-      focusableSuggestions[nextIndex].focus();
-    }
-  }
-
-  search.addEventListener('input', show_results, true);
-
-  function show_results() {
-    const maxResult = 5;
-    let searchQuery = this.value;
-
-    if (!searchQuery) {
-      suggestions.classList.add('d-none');
-      suggestions.innerHTML = "";
-      return;
-    }
-  }
-});
-
 const menuPositioner = () => {
   const nav = document.querySelectorAll("#sidebar-default")[1]
   const itemActive = document.querySelectorAll(".sidebar-item-active")
diff --git a/assets/js/snippets.js b/assets/js/snippets.js
index 9f7ce2adff..f9f3867295 100644
--- a/assets/js/snippets.js
+++ b/assets/js/snippets.js
@@ -168,5 +168,5 @@ const customizeUI = (pre) => {
 };
 
 document.addEventListener("DOMContentLoaded", () => {
-  document.querySelectorAll("pre").forEach((pre) => customizeUI(pre));
+  document.querySelectorAll("pre:not(.scalar-app pre)").forEach((pre) => customizeUI(pre));
 });
\ No newline at end of file
diff --git a/content/chainguard/api/spec.md b/content/chainguard/api/spec.md
index 9c8d178b3e..0129d409f1 100644
--- a/content/chainguard/api/spec.md
+++ b/content/chainguard/api/spec.md
@@ -10,6 +10,7 @@ lastmod: 2020-10-06T08:48:23+00:00
 draft: false
 images: []
 type: "article"
+toc: false
 weight: 010
 ---
 
diff --git a/layouts/shortcodes/openapi.html b/layouts/shortcodes/openapi.html
index 1353fd38ce..5f2f992e76 100644
--- a/layouts/shortcodes/openapi.html
+++ b/layouts/shortcodes/openapi.html
@@ -1,35 +1,94 @@
-<script src="https://unpkg.com/@stoplight/elements/web-components.min.js"></script>
-<link rel="stylesheet" href="https://unpkg.com/@stoplight/elements/styles.min.css">
-
-<elements-api
-      apiDescriptionUrl='{{ .Get "spec-url"}}'
-      router="hash"
-      hideTryIt="true"
-    />
-
+<div id="app"></div>
+<script
+  src="https://unpkg.com/@scalar/api-reference@1.48.7/dist/browser/standalone.js"
+  integrity="sha256-nxQi3+zE0a7YpvrjEpdHacaBuLtNjqFRZl/KbWrfGzA="
+  crossorigin="anonymous"
+></script>
+<script>
+  const scalarApp = Scalar.createApiReference("#app", {
+    agent: {
+      disabled: true,
+    },
+    mcp: {
+      disabled: true,
+    },
+    hideSearch: true,
+    telemetry: false,
+    showDeveloperTools: "never",
+    hideClientButton: true,
+    hideTestRequestButton: true,
+    hiddenClients: true,
+    hideDarkModeToggle: true,
+    darkMode: localStorage.getItem("theme") === "dark",
+    theme: "none",
+    withDefaultFonts: false,
+    url: '{{ .Get "spec-url"}}',
+  });
+</script>
 <style>
-  nav .nav-item svg {
-    display: inherit !important;
+  .scalar-app ul {
+    padding-left: 0;
+    margin-bottom: 0;
+    li {
+      margin-bottom: unset !important;
+      ul {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    }
   }
-  .docs-sidebar {
-    display: none !important;
+  .scalar-app .group-hover\:opacity-100:is(:where(.group):hover *) {
+    opacity: 1 !important;
+  }
+  .scalar-app
+    .group-hocus-within\/code-block\:opacity-100:is(
+      :is(
+          :where(.group\/code-block):hover,
+          :where(.group\/code-block):focus-within
+        )
+        *
+    ) {
+    opacity: 1 !important;
+  }
+  .scalar-app .px-3 {
+    padding-left: 12px !important;
+    padding-right: 12px !important;
+  }
+  .scalar-app .section-header-label {
+    font-weight: inherit;
+    font-size: inherit;
+  }
+  .scalar-app .section-container {
+    margin-top: unset !important;
+    margin-bottom: unset !important;
+  }
+  .scalar-app .hljs {
+    padding: 0 !important;
+  }
+  .scalar-app .pre-container .code {
+    background-color: transparent !important;
+  }
+  .scalar-app .text-nowrap.whitespace-pre {
+    text-wrap: nowrap !important;
+    white-space: pre !important;
+  }
+  .scalar-app code {
+    background: unset !important;
+  }
+  .scalar-app .border {
+    border: var(--scalar-border-color) 1px solid !important;
+  }
+  .scalar-app,
+  .scalar-app .bg-sidebar-b-1,
+  .references-rendered {
+    background: transparent !important;
   }
   main.docs-content {
     width: 100% !important;
     padding: 0 !important;
   }
   main.docs-content.has-toc {
-    max-width: calc(100dvw - 384px); 
+    max-width: calc(100dvw - 384px);
     margin: 0 48px 0 48px;
   }
-  main h1 {
-    font-size: 2.5rem !important;
-    margin: 2rem 0 1rem;
-  }
-  nav.docs-toc {
-    display: none !important;
-  }
-  elements-api {
-    display: block;
-  }
 </style>