diff --git a/.env b/.env
index 28f19231..37d7f6b5 100644
--- a/.env
+++ b/.env
@@ -2,4 +2,14 @@ NEXT_PUBLIC_CLOUDSMITH_API_URL="https://api.cloudsmith.io"
 NEXT_PUBLIC_CLOUDSMITH_DOCS_URL="https://github.com/cloudsmith-io/cloudsmith-docs"
 NEXT_PUBLIC_CLOUDSMITH_DOCS_BRANCH="main"
 CLOUDSMITH_API_V1_URL="https://api.cloudsmith.io/swagger/?format=openapi"
-CLOUDSMITH_API_V2_URL="https://api.cloudsmith.io/v2/openapi/?format=json"
\ No newline at end of file
+CLOUDSMITH_API_V2_URL="https://api.cloudsmith.io/v2/openapi/?format=json"
+
+NEXT_PUBLIC_ALGOLIA_APP_ID=
+NEXT_PUBLIC_ALGOLIA_API_KEY=
+NEXT_PUBLIC_ALGOLIA_DOCS_INDEX=Docs
+NEXT_PUBLIC_ALGOLIA_INDEX=prod_WEBSITE
+# NEXT_PUBLIC_ALGOLIA_INDEX=dev_WEBSITE
+
+ALGOLIA_WRITE_KEY=
+NEXT_PUBLIC_DOCS_SITE_ORIGIN=https://docs.cloudsmith.com
+NEXT_PUBLIC_MARKETING_SITE_ORIGIN=https://cloudsmith.com
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index f6506a7f..bd5c0e1c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,4 +28,6 @@ npm-debug.log*
 *.tsbuildinfo
 next-env.d.ts
 
-docs/graph.html
\ No newline at end of file
+docs/graph.html
+
+.history
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index e238bd8b..eb626e94 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@mdx-js/react": "^3.1.0",
         "@next/mdx": "15.1.6",
         "@vercel/analytics": "^1.6.1",
+        "algoliasearch": "^5.50.0",
         "class-variance-authority": "^0.7.1",
         "date-fns": "^4.1.0",
         "fast-fuzzy": "^1.12.0",
@@ -23,6 +24,8 @@
         "react-dom": "19.2.1",
         "react-error-boundary": "^6.1.0",
         "react-hotkeys-hook": "^4.6.1",
+        "react-instantsearch": "^7.28.1",
+        "react-instantsearch-nextjs": "^1.1.3",
         "react-player": "^2.16.0",
         "remark-frontmatter": "^5.0.0",
         "remark-mdx-frontmatter": "^5.0.0"
@@ -82,6 +85,207 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@algolia/abtesting": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/@algolia/abtesting/-/abtesting-1.16.0.tgz",
+      "integrity": "sha512-alHFZ68/i9qLC/muEB07VQ9r7cB8AvCcGX6dVQi2PNHhc/ZQRmmFAv8KK1ay4UiseGSFr7f0nXBKsZ/jRg7e4g==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.50.0",
+        "@algolia/requester-browser-xhr": "5.50.0",
+        "@algolia/requester-fetch": "5.50.0",
+        "@algolia/requester-node-http": "5.50.0"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/client-abtesting": {
+      "version": "5.50.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-abtesting/-/client-abtesting-5.50.0.tgz",
+      "integrity": "sha512-mfgUdLQNxOAvCZUGzPQxjahEWEPuQkKlV0ZtGmePOa9ZxIQZlk31vRBNbM6ScU8jTH41SCYE77G/lCifDr1SVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.50.0",
+        "@algolia/requester-browser-xhr": "5.50.0",
+        "@algolia/requester-fetch": "5.50.0",
+        "@algolia/requester-node-http": "5.50.0"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/client-analytics": {
+      "version": "5.50.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-5.50.0.tgz",
+      "integrity": "sha512-5mjokeKYyPaP3Q8IYJEnutI+O4dW/Ixxx5IgsSxT04pCfGqPXxTOH311hTQxyNpcGGEOGrMv8n8Z+UMTPamioQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.50.0",
+        "@algolia/requester-browser-xhr": "5.50.0",
+        "@algolia/requester-fetch": "5.50.0",
+        "@algolia/requester-node-http": "5.50.0"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/client-common": {
+      "version": "5.50.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-5.50.0.tgz",
+      "integrity": "sha512-emtOvR6dl3rX3sBJXXbofMNHU1qMQqQSWu319RMrNL5BWoBqyiq7y0Zn6cjJm7aGHV/Qbf+KCCYeWNKEMPI3BQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/client-insights": {
+      "version": "5.50.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-insights/-/client-insights-5.50.0.tgz",
+      "integrity": "sha512-IerGH2/hcj/6bwkpQg/HHRqmlGN1XwygQWythAk0gZFBrghs9danJaYuSS3ShzLSVoIVth4jY5GDPX9Lbw5cgg==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.50.0",
+        "@algolia/requester-browser-xhr": "5.50.0",
+        "@algolia/requester-fetch": "5.50.0",
+        "@algolia/requester-node-http": "5.50.0"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/client-personalization": {
+      "version": "5.50.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-5.50.0.tgz",
+      "integrity": "sha512-3idPJeXn5L0MmgP9jk9JJqblrQ/SguN93dNK9z9gfgyupBhHnJMOEjrRYcVgTIfvG13Y04wO+Q0FxE2Ut8PVbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.50.0",
+        "@algolia/requester-browser-xhr": "5.50.0",
+        "@algolia/requester-fetch": "5.50.0",
+        "@algolia/requester-node-http": "5.50.0"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/client-query-suggestions": {
+      "version": "5.50.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-query-suggestions/-/client-query-suggestions-5.50.0.tgz",
+      "integrity": "sha512-q7qRoWrQK1a8m5EFQEmPlo7+pg9mVQ8X5jsChtChERre0uS2pdYEDixBBl0ydBSGkdGbLUDufcACIhH/077E4g==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.50.0",
+        "@algolia/requester-browser-xhr": "5.50.0",
+        "@algolia/requester-fetch": "5.50.0",
+        "@algolia/requester-node-http": "5.50.0"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/client-search": {
+      "version": "5.50.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.50.0.tgz",
+      "integrity": "sha512-Jc360x4yqb3eEg4OY4KEIdGePBxZogivKI+OGIU8aLXgAYPTECvzeOBc90312yHA1hr3AeRlAFl0rIc8lQaIrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.50.0",
+        "@algolia/requester-browser-xhr": "5.50.0",
+        "@algolia/requester-fetch": "5.50.0",
+        "@algolia/requester-node-http": "5.50.0"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/events": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@algolia/events/-/events-4.0.1.tgz",
+      "integrity": "sha512-FQzvOCgoFXAbf5Y6mYozw2aj5KCJoA3m4heImceldzPSMbdyS4atVjJzXKMsfX3wnZTFYwkkt8/z8UesLHlSBQ==",
+      "license": "MIT"
+    },
+    "node_modules/@algolia/ingestion": {
+      "version": "1.50.0",
+      "resolved": "https://registry.npmjs.org/@algolia/ingestion/-/ingestion-1.50.0.tgz",
+      "integrity": "sha512-OS3/Viao+NPpyBbEY3tf6hLewppG+UclD+9i0ju56mq2DrdMJFCkEky6Sk9S5VPcbLzxzg3BqBX6u9Q35w19aQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.50.0",
+        "@algolia/requester-browser-xhr": "5.50.0",
+        "@algolia/requester-fetch": "5.50.0",
+        "@algolia/requester-node-http": "5.50.0"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/monitoring": {
+      "version": "1.50.0",
+      "resolved": "https://registry.npmjs.org/@algolia/monitoring/-/monitoring-1.50.0.tgz",
+      "integrity": "sha512-/znwgSiGufpbJVIoDmeQaHtTq+OMdDawFRbMSJVv+12n79hW+qdQXS8/Uu3BD3yn0BzgVFJEvrsHrCsInZKdhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.50.0",
+        "@algolia/requester-browser-xhr": "5.50.0",
+        "@algolia/requester-fetch": "5.50.0",
+        "@algolia/requester-node-http": "5.50.0"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/recommend": {
+      "version": "5.50.0",
+      "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-5.50.0.tgz",
+      "integrity": "sha512-dHjUfu4jfjdQiKDpCpAnM7LP5yfG0oNShtfpF5rMCel6/4HIoqJ4DC4h5GKDzgrvJYtgAhblo0AYBmOM00T+lQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.50.0",
+        "@algolia/requester-browser-xhr": "5.50.0",
+        "@algolia/requester-fetch": "5.50.0",
+        "@algolia/requester-node-http": "5.50.0"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/requester-browser-xhr": {
+      "version": "5.50.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.50.0.tgz",
+      "integrity": "sha512-bffIbUljAWnh/Ctu5uScORajuUavqmZ0ACYd1fQQeSSYA9NNN83ynO26pSc2dZRXpSK0fkc1//qSSFXMKGu+aw==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.50.0"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/requester-fetch": {
+      "version": "5.50.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-fetch/-/requester-fetch-5.50.0.tgz",
+      "integrity": "sha512-y0EwNvPGvkM+yTAqqO6Gpt9wVGm3CLDtpLvNEiB3VGvN3WzfkjZGtLUsG/ru2kVJIIU7QcV0puuYgEpBeFxcJg==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.50.0"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/requester-node-http": {
+      "version": "5.50.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-5.50.0.tgz",
+      "integrity": "sha512-xpwefe4fCOWnZgXCbkGpqQY6jgBSCf2hmgnySbyzZIccrv3SoashHKGPE4x6vVG+gdHrGciMTAcDo9HOZwH22Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.50.0"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -7430,6 +7634,12 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/dom-speech-recognition": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@types/dom-speech-recognition/-/dom-speech-recognition-0.0.1.tgz",
+      "integrity": "sha512-udCxb8DvjcDKfk1WTBzDsxFbLgYxmQGKrE/ricoMqHRNjSlSUCcamVTA5lIQqzY10mY5qCY0QDwBfFEwhfoDPw==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
@@ -7445,6 +7655,12 @@
         "@types/estree": "*"
       }
     },
+    "node_modules/@types/google.maps": {
+      "version": "3.58.1",
+      "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.58.1.tgz",
+      "integrity": "sha512-X9QTSvGJ0nCfMzYOnaVs/k6/4L+7F5uCS+4iUmkLEls6J9S/Phv+m/i3mDeyc49ZBgwab3EFO1HEoBY7k98EGQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.9",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz",
@@ -7464,6 +7680,12 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/hogan.js": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/hogan.js/-/hogan.js-3.0.5.tgz",
+      "integrity": "sha512-/uRaY3HGPWyLqOyhgvW9Aa43BNnLZrNeQxl2p8wqId4UHMfPKolSB+U7BlZyO1ng7MkLnyEAItsBzCG0SDhqrA==",
+      "license": "MIT"
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -7593,6 +7815,12 @@
         "undici-types": "~6.20.0"
       }
     },
+    "node_modules/@types/qs": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.15.0.tgz",
+      "integrity": "sha512-JawvT8iBVWpzTrz3EGw9BTQFg3BQNmwERdKE22vlTxawwtbyUSlMppvZYKLZzB5zgACXdXxbD3m1bXaMqP/9ow==",
+      "license": "MIT"
+    },
     "node_modules/@types/react": {
       "version": "19.0.8",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.8.tgz",
@@ -8133,6 +8361,12 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "license": "ISC"
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -8221,6 +8455,43 @@
         }
       }
     },
+    "node_modules/algoliasearch": {
+      "version": "5.50.0",
+      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.50.0.tgz",
+      "integrity": "sha512-yE5I83Q2s8euVou8Y3feXK08wyZInJWLYXgWO6Xti9jBUEZAGUahyeQ7wSZWkifLWVnQVKEz5RAmBlXG5nqxog==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/abtesting": "1.16.0",
+        "@algolia/client-abtesting": "5.50.0",
+        "@algolia/client-analytics": "5.50.0",
+        "@algolia/client-common": "5.50.0",
+        "@algolia/client-insights": "5.50.0",
+        "@algolia/client-personalization": "5.50.0",
+        "@algolia/client-query-suggestions": "5.50.0",
+        "@algolia/client-search": "5.50.0",
+        "@algolia/ingestion": "1.50.0",
+        "@algolia/monitoring": "1.50.0",
+        "@algolia/recommend": "5.50.0",
+        "@algolia/requester-browser-xhr": "5.50.0",
+        "@algolia/requester-fetch": "5.50.0",
+        "@algolia/requester-node-http": "5.50.0"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/algoliasearch-helper": {
+      "version": "3.28.1",
+      "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.28.1.tgz",
+      "integrity": "sha512-6iXpbkkrAI5HFpCWXlNmIDSBuoN/U1XnEvb2yJAoWfqrZ+DrybI7MQ5P5mthFaprmocq+zbi6HxnR28xnZAYBw==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/events": "^4.0.1"
+      },
+      "peerDependencies": {
+        "algoliasearch": ">= 3.1 < 6"
+      }
+    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -8943,7 +9214,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
       "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -8957,7 +9227,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
       "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
@@ -9975,7 +10244,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
@@ -10123,7 +10391,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -10133,7 +10400,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -10171,7 +10437,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
       "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0"
@@ -11282,7 +11547,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -11343,7 +11607,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
       "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
@@ -11388,7 +11651,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
       "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "dunder-proto": "^1.0.1",
@@ -11584,7 +11846,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -11673,7 +11934,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -11702,7 +11962,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -11861,6 +12120,18 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hogan.js": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/hogan.js/-/hogan.js-3.0.2.tgz",
+      "integrity": "sha512-RqGs4wavGYJWE07t35JQccByczmNUXQT0E12ZYV1VKYu5UiAU9lsos/yBAcf840+zrUQQxgVduCR5/B8nNtibg==",
+      "dependencies": {
+        "mkdirp": "0.3.0",
+        "nopt": "1.0.10"
+      },
+      "bin": {
+        "hulk": "bin/hulk"
+      }
+    },
     "node_modules/hookified": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.8.1.tgz",
@@ -11868,6 +12139,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/htm": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/htm/-/htm-3.1.1.tgz",
+      "integrity": "sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -12091,6 +12368,63 @@
       "integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==",
       "license": "MIT"
     },
+    "node_modules/instantsearch-ui-components": {
+      "version": "0.22.1",
+      "resolved": "https://registry.npmjs.org/instantsearch-ui-components/-/instantsearch-ui-components-0.22.1.tgz",
+      "integrity": "sha512-pHao8HrIeUYicgBX27UkzNLPd1JVYvL2XKLF4aeg0X3ZQNhwJui7jUBbgfGSNcT/ILc26NTwx3NV5/q3Cd04wQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@swc/helpers": "0.5.18",
+        "markdown-to-jsx": "^7.7.15",
+        "zod": "^3.25.76 || ^4",
+        "zod-to-json-schema": "3.24.6"
+      }
+    },
+    "node_modules/instantsearch-ui-components/node_modules/@swc/helpers": {
+      "version": "0.5.18",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz",
+      "integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/instantsearch.js": {
+      "version": "4.92.1",
+      "resolved": "https://registry.npmjs.org/instantsearch.js/-/instantsearch.js-4.92.1.tgz",
+      "integrity": "sha512-cHDpkum81iZ6+D9dw133E8N/cSckrv3WCawO76yhHMZiS7Ak1hQGiclG6U+Gek1U9y5T2R/+guvNqKguyvVUqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/events": "^4.0.1",
+        "@swc/helpers": "0.5.18",
+        "@types/dom-speech-recognition": "^0.0.1",
+        "@types/google.maps": "^3.55.12",
+        "@types/hogan.js": "^3.0.0",
+        "@types/qs": "^6.5.3",
+        "algoliasearch-helper": "3.28.1",
+        "hogan.js": "^3.0.2",
+        "htm": "^3.0.0",
+        "instantsearch-ui-components": "0.22.1",
+        "preact": "^10.10.0",
+        "qs": "^6.5.1",
+        "react": ">= 0.14.0",
+        "search-insights": "^2.17.2",
+        "zod": "^3.25.76 || ^4",
+        "zod-to-json-schema": "3.24.6"
+      },
+      "peerDependencies": {
+        "algoliasearch": ">= 3.1 < 6"
+      }
+    },
+    "node_modules/instantsearch.js/node_modules/@swc/helpers": {
+      "version": "0.5.18",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz",
+      "integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/internal-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
@@ -14080,11 +14414,27 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/markdown-to-jsx": {
+      "version": "7.7.17",
+      "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.7.17.tgz",
+      "integrity": "sha512-7mG/1feQ0TX5I7YyMZVDgCC/y2I3CiEhIRQIhyov9nGBP5eoVrOXXHuL5ZP8GRfxVZKRiXWJgwXkb9It+nQZfQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -15299,6 +15649,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/mkdirp": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz",
+      "integrity": "sha512-OHsdUcVAQ6pOtg5JYWpCBo9W/GySVuwvP9hueRMW7UqshC0tbfzLv8wjySTPm3tfUZ/21CE9E1pJagOA91Pxew==",
+      "deprecated": "Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)",
+      "license": "MIT/X11",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/motion": {
       "version": "12.6.2",
       "resolved": "https://registry.npmjs.org/motion/-/motion-12.6.2.tgz",
@@ -15552,6 +15912,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/nopt": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
+      "integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==",
+      "license": "MIT",
+      "dependencies": {
+        "abbrev": "1"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -15723,7 +16098,6 @@
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
       "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -17028,6 +17402,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/preact": {
+      "version": "10.29.0",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.29.0.tgz",
+      "integrity": "sha512-wSAGyk2bYR1c7t3SZ3jHcM6xy0lcBcDel6lODcs9ME6Th++Dx2KU+6D3HD8wMMKGA8Wpw7OMd3/4RGzYRpzwRg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -17163,6 +17547,21 @@
       ],
       "license": "MIT"
     },
+    "node_modules/qs": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz",
+      "integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -17236,6 +17635,81 @@
         "react-dom": ">=16.8.1"
       }
     },
+    "node_modules/react-instantsearch": {
+      "version": "7.28.1",
+      "resolved": "https://registry.npmjs.org/react-instantsearch/-/react-instantsearch-7.28.1.tgz",
+      "integrity": "sha512-nO4p+GbEu3KCofJ6idk2B1na2pvRdwb5nk4uBRbeewa21lKrNIbNq0kFvSMdXbSXQ7/o3fRHW/fIRdQem6X8rQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@swc/helpers": "0.5.18",
+        "instantsearch-ui-components": "0.22.1",
+        "instantsearch.js": "4.92.1",
+        "react-instantsearch-core": "7.28.1"
+      },
+      "peerDependencies": {
+        "algoliasearch": ">= 3.1 < 6",
+        "react": ">= 16.8.0 < 20",
+        "react-dom": ">= 16.8.0 < 20"
+      }
+    },
+    "node_modules/react-instantsearch-core": {
+      "version": "7.28.1",
+      "resolved": "https://registry.npmjs.org/react-instantsearch-core/-/react-instantsearch-core-7.28.1.tgz",
+      "integrity": "sha512-1cAdxHYS/D4t0KqGQkNMb36O62fhHZczmECWy+99kpUA5qFZ1Mao7LQSVqYihdC8twLXAIMPr2rj8ZhvQ0CSGA==",
+      "license": "MIT",
+      "dependencies": {
+        "@swc/helpers": "0.5.18",
+        "algoliasearch-helper": "3.28.1",
+        "instantsearch.js": "4.92.1",
+        "use-sync-external-store": "^1.0.0",
+        "zod": "^3.25.76 || ^4",
+        "zod-to-json-schema": "3.24.6"
+      },
+      "peerDependencies": {
+        "algoliasearch": ">= 3.1 < 6",
+        "react": ">= 16.8.0 < 20"
+      }
+    },
+    "node_modules/react-instantsearch-core/node_modules/@swc/helpers": {
+      "version": "0.5.18",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz",
+      "integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/react-instantsearch-nextjs": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/react-instantsearch-nextjs/-/react-instantsearch-nextjs-1.1.3.tgz",
+      "integrity": "sha512-hgeHDqUan+NCM+gT30csFTrjCdu7BrvDyv0J4k6BcCkTEJ7FpcnUZ6Vj9UCKDaP0KFNKK4PamTokL5h4hwlwsQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@swc/helpers": "0.5.18"
+      },
+      "peerDependencies": {
+        "next": ">= 13.4 < 17",
+        "react-instantsearch": ">= 7.1.0 < 8"
+      }
+    },
+    "node_modules/react-instantsearch-nextjs/node_modules/@swc/helpers": {
+      "version": "0.5.18",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz",
+      "integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/react-instantsearch/node_modules/@swc/helpers": {
+      "version": "0.5.18",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz",
+      "integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -17967,6 +18441,12 @@
       "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
       "license": "MIT"
     },
+    "node_modules/search-insights": {
+      "version": "2.17.3",
+      "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.17.3.tgz",
+      "integrity": "sha512-RQPdCYTa8A68uM2jwxoY842xDhvx3E5LFL1LxvxCNMev4o5mLuokczhzjAgGwUZBAmOKZknArSxLKmXtIi2AxQ==",
+      "license": "MIT"
+    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -18188,7 +18668,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
       "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -18208,7 +18687,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
       "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -18225,7 +18703,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
       "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
@@ -18244,7 +18721,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
       "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
@@ -19810,7 +20286,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
       "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
-      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -20217,6 +20692,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-to-json-schema": {
+      "version": "3.24.6",
+      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.24.6.tgz",
+      "integrity": "sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "zod": "^3.24.1"
+      }
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
diff --git a/package.json b/package.json
index 351a23ba..bce3973e 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "15.1.6",
     "@vercel/analytics": "^1.6.1",
+    "algoliasearch": "^5.50.0",
     "class-variance-authority": "^0.7.1",
     "date-fns": "^4.1.0",
     "fast-fuzzy": "^1.12.0",
@@ -33,6 +34,8 @@
     "react-dom": "19.2.1",
     "react-error-boundary": "^6.1.0",
     "react-hotkeys-hook": "^4.6.1",
+    "react-instantsearch": "^7.28.1",
+    "react-instantsearch-nextjs": "^1.1.3",
     "react-player": "^2.16.0",
     "remark-frontmatter": "^5.0.0",
     "remark-mdx-frontmatter": "^5.0.0"
diff --git a/src/app/(documentation)/design-system/page.module.css b/src/app/(documentation)/design-system/page.module.css
index 4ead224a..dc408106 100644
--- a/src/app/(documentation)/design-system/page.module.css
+++ b/src/app/(documentation)/design-system/page.module.css
@@ -21,17 +21,6 @@
   color: var(--color-text-primary);
 }
 
-.iconWrapper:hover {
-  border-color: var(--color-accent-default);
-  background: var(--color-accent-default);
-}
-
-.iconWrapper:hover header span,
-.iconWrapper:hover .logo,
-.iconWrapper:hover .arrowIcon {
-  color: var(--brand-color-white);
-}
-
 .iconWrapper footer {
   display: flex;
   align-items: end;
@@ -58,7 +47,18 @@
   font-size: 1.3em;
 }
 
-@media (--medium) {
+.iconWrapper:hover {
+  border-color: var(--color-accent-default);
+  background: var(--color-accent-default);
+}
+
+.iconWrapper:hover header span,
+.iconWrapper:hover .logo,
+.iconWrapper:hover .arrowIcon {
+  color: var(--brand-color-white);
+}
+
+@media (--tablet-up) {
   .logo {
     --logo-max-width: 40px;
     --logo-max-height: 20px;
diff --git a/src/app/_styles/global.css b/src/app/_styles/global.css
index bf96b4a5..2593664f 100644
--- a/src/app/_styles/global.css
+++ b/src/app/_styles/global.css
@@ -13,6 +13,10 @@
     min-height: 100%;
   }
 
+  body.has-sidenav-toggle {
+    --navbar-border-height: 1px;
+  }
+
   a {
     color: var(--color-text-link);
     text-decoration: none;
diff --git a/src/app/_styles/variables.css b/src/app/_styles/variables.css
index 21687afe..b0b33022 100644
--- a/src/app/_styles/variables.css
+++ b/src/app/_styles/variables.css
@@ -160,6 +160,7 @@
     /* Border */
     --color-border: var(--brand-color-grey-3);
     --color-border-tabs: var(--base-color-blue-500);
+    --color-grid-line-default: var(--brand-color-grey-2);
 
     /* Accent */
     --color-accent-default: var(--base-color-blue-500);
@@ -291,18 +292,24 @@
 
     /* Specific measurements */
     --navbar-banner-height: 0px; /* Will be set by LegacySiteBanner. Remove when banner is removed.*/
-    --navbar-top-height: 67px;
-    --navbar-bottom-height: 50px;
+    --navbar-top-height: 60px;
+    --navbar-border-height: 0px;
+    --navbar-bottom-height: 0px;
     --navbar-height: calc(
-      var(--navbar-banner-height) + var(--navbar-top-height) + var(--navbar-bottom-height)
+      var(--navbar-banner-height) + var(--navbar-top-height) + var(--navbar-border-height) +
+        var(--navbar-bottom-height)
     );
 
     @media (--phablet-up) {
-      --navbar-top-height: 80px;
       --container-margin-home: var(--space-l);
     }
 
+    @media (--tablet-up) {
+      --navbar-top-height: 80px;
+    }
+
     @media (--laptop-up) {
+      --navbar-bottom-height: 50px;
       --container-margin-home: var(--space-2xl);
     }
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b431b676..84804677 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,7 +6,7 @@ import { Analytics } from '@vercel/analytics/next';
 import { cx } from 'class-variance-authority';
 import Script from 'next/script';
 
-import { Navbar } from '@/components';
+import { Footer, Navbar } from '@/components';
 
 import { mdSystem, replica, replicaMono } from './_assets/fonts';
 import { NavigationEvents, NavigationProvider } from './navigation';
@@ -31,6 +31,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <NavigationProvider>
           <Navbar />
           {children}
+          <Footer />
           <noscript>
             <img
               src="https://simple.cloudsmith.com/noscript.gif?collect-dnt=true&hostname=docs.cloudsmith.com"
diff --git a/src/app/navigation.tsx b/src/app/navigation.tsx
index 4632f58e..7aac9c1c 100644
--- a/src/app/navigation.tsx
+++ b/src/app/navigation.tsx
@@ -1,8 +1,9 @@
 'use client';
 
-import { usePathname } from 'next/navigation';
 import { createContext, useContext, useEffect, useState } from 'react';
 
+import { usePathname } from 'next/navigation';
+
 const NavigationContext = createContext<NavigationContextType | null>(null);
 
 export const NavigationProvider = ({ children }: { children: React.ReactNode }) => {
diff --git a/src/components/ApiRequest/ApiRequest.tsx b/src/components/ApiRequest/ApiRequest.tsx
index 4a522734..c0bc22f1 100644
--- a/src/components/ApiRequest/ApiRequest.tsx
+++ b/src/components/ApiRequest/ApiRequest.tsx
@@ -24,7 +24,7 @@ export const ApiRequest = ({
 
   return (
     <>
-      <div className={styles.request}>
+      <div className={styles.request} data-api-method={operation.method}>
         <div className={styles.sandbox}>
           <ClipboardCopy textToCopy={url} className={styles.urlCopy}>
             <Tag className={styles.method} method={operation.method} />
diff --git a/src/components/AppShell/AppShell.module.css b/src/components/AppShell/AppShell.module.css
index 9044f3a1..f05a86cd 100644
--- a/src/components/AppShell/AppShell.module.css
+++ b/src/components/AppShell/AppShell.module.css
@@ -4,9 +4,6 @@
 }
 
 .secondaryNav {
-  position: sticky;
-  top: calc(var(--navbar-banner-height) + var(--navbar-top-height));
-  z-index: var(--layer-navigation);
   background-color: var(--base-color-grey-1000);
 
   &::-webkit-scrollbar {
@@ -17,18 +14,14 @@
   -ms-overflow-style: none;
 }
 
-@media (--phablet-up) {
-  .secondaryNav {
-    top: var(--navbar-height);
-  }
-}
-
 @media (--laptop-up) {
   .root {
     display: flex;
   }
 
   .secondaryNav {
+    position: sticky;
+    top: var(--navbar-height);
     z-index: 0;
     flex: 0 0 var(--sidebar-width);
     background-color: transparent;
diff --git a/src/components/BackgroundGrid/BackgroundGrid.module.css b/src/components/BackgroundGrid/BackgroundGrid.module.css
new file mode 100644
index 00000000..ab76fa45
--- /dev/null
+++ b/src/components/BackgroundGrid/BackgroundGrid.module.css
@@ -0,0 +1,95 @@
+.root {
+  position: relative;
+  width: var(--width, 100%);
+  left: 50%;
+  transform: translate(-50%);
+  overflow: hidden;
+
+  &.inline {
+    position: relative;
+  }
+}
+
+.content {
+  position: relative;
+  z-index: 2;
+}
+
+.illustration {
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: var(--background-grid-width, 100%);
+  height: var(--background-grid-height, 100%);
+  max-width: var(--background-grid-max-width, none);
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.illustration svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.topVignette {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--background-grid-top-vignette-height, var(--background-grid-vignette-height, 80px));
+  background: linear-gradient(
+    to top,
+    transparent,
+    var(--background-grid-vignette-color, var(--color-background-default))
+  );
+  pointer-events: none;
+}
+
+.leftVignette {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: var(--background-grid-left-vignette-width, var(--background-grid-vignette-width, 80px));
+  height: 100%;
+  background: linear-gradient(
+    to left,
+    transparent,
+    var(--background-grid-vignette-color, var(--color-background-default))
+  );
+  pointer-events: none;
+}
+
+.bottomVignette {
+  position: absolute;
+  z-index: 1;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: var(--background-grid-bottom-vignette-height, var(--background-grid-vignette-height, 80px));
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    var(--background-grid-vignette-color, var(--color-background-default))
+  );
+  pointer-events: none;
+}
+
+.rightVignette {
+  position: absolute;
+  z-index: 1;
+  top: var(--background-grid-right-vignette-top, 0);
+  right: 0;
+  bottom: 0;
+  width: var(--background-grid-right-vignette-width, var(--background-grid-vignette-width, 80px));
+  background: linear-gradient(
+    to right,
+    transparent,
+    var(--background-grid-vignette-color, var(--color-background-default))
+  );
+  pointer-events: none;
+}
diff --git a/src/components/BackgroundGrid/BackgroundGrid.tsx b/src/components/BackgroundGrid/BackgroundGrid.tsx
new file mode 100644
index 00000000..3355efb4
--- /dev/null
+++ b/src/components/BackgroundGrid/BackgroundGrid.tsx
@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+
+import { cx } from 'class-variance-authority';
+
+import { Grid } from '../Illustrations/Grid';
+import styles from './BackgroundGrid.module.css';
+
+interface BackgroundGridProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const BackgroundGrid = ({ className, children }: BackgroundGridProps) => {
+  return (
+    <div className={cx(styles.root, className)}>
+      <div aria-hidden="true" className={styles.illustration}>
+        <Grid />
+      </div>
+      <div className={styles.content}>{children}</div>
+      <div aria-hidden="true" className={styles.topVignette}></div>
+      <div aria-hidden="true" className={styles.leftVignette}></div>
+      <div aria-hidden="true" className={styles.bottomVignette}></div>
+      <div aria-hidden="true" className={styles.rightVignette}></div>
+    </div>
+  );
+};
+
+export { BackgroundGrid };
diff --git a/src/components/BackgroundGrid/index.ts b/src/components/BackgroundGrid/index.ts
new file mode 100644
index 00000000..b555fccc
--- /dev/null
+++ b/src/components/BackgroundGrid/index.ts
@@ -0,0 +1 @@
+export { BackgroundGrid } from './BackgroundGrid';
diff --git a/src/components/Footer/Footer.module.css b/src/components/Footer/Footer.module.css
new file mode 100644
index 00000000..9a7580b7
--- /dev/null
+++ b/src/components/Footer/Footer.module.css
@@ -0,0 +1,66 @@
+.root {
+  border-top: 1px solid var(--color-border);
+  background-color: var(--brand-color-blue-0);
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-s);
+  padding: var(--space-m);
+}
+
+.credit {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3xs);
+  margin: 0;
+  color: var(--color-text-tertiary);
+}
+
+.heart {
+  width: 14px;
+  height: 14px;
+  color: var(--brand-color-red-5);
+}
+
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-3xs) var(--space-s);
+}
+
+.link,
+.legalGroup {
+  color: var(--color-text-tertiary);
+}
+
+.link {
+  transition: color var(--transition-default);
+}
+
+.link:hover,
+.link:focus-visible {
+  color: var(--color-text-primary);
+}
+
+.legalGroup {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3xs);
+}
+
+@media (--laptop-up) {
+  .container {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .nav {
+    margin-left: var(--space-m);
+    padding-left: var(--space-m);
+    border-left: 1px solid var(--color-border);
+    justify-content: flex-end;
+  }
+}
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 00000000..5a15da21
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,51 @@
+// Copyright 2026 Cloudsmith Ltd
+
+import { Container } from '@/components/Container';
+import { Link } from '@/components/Link';
+import { Icon } from '@/icons';
+
+import styles from './Footer.module.css';
+
+const navigationLinks = [
+  { href: '/documentation', label: 'Docs' },
+  { href: '/guides', label: 'Guides' },
+  { href: '/api', label: 'API Reference' },
+] as const;
+
+export function Footer() {
+  const year = new Date().getFullYear();
+
+  return (
+    <footer className={styles.root}>
+      <Container className={styles.container}>
+        <p className={`${styles.credit} bodyS`}>
+          <span>Made with</span>
+          <Icon name="heart" className={styles.heart} aria-hidden="true" focusable="false" title="" />
+          <span>by Cloudsmith © {year}</span>
+        </p>
+
+        <nav className={styles.nav} aria-label="Footer navigation">
+          {navigationLinks.map((link) => (
+            <Link key={link.href} href={link.href} className={`${styles.link} bodyS`}>
+              {link.label}
+            </Link>
+          ))}
+
+          <span className={`${styles.legalGroup} bodyS`}>
+            <Link href="https://cloudsmith.com/terms-conditions" className={styles.link}>
+              Terms
+            </Link>
+            <span aria-hidden="true">&amp;</span>
+            <Link href="https://cloudsmith.com/privacy-policy" className={styles.link}>
+              Privacy
+            </Link>
+          </span>
+
+          <Link href="https://cloudsmith.com/company/contact-us" className={`${styles.link} bodyS`}>
+            Contact
+          </Link>
+        </nav>
+      </Container>
+    </footer>
+  );
+}
diff --git a/src/components/Footer/index.ts b/src/components/Footer/index.ts
new file mode 100644
index 00000000..ddcc5a9c
--- /dev/null
+++ b/src/components/Footer/index.ts
@@ -0,0 +1 @@
+export * from './Footer';
diff --git a/src/components/HomepageHero/HomepageHero.module.css b/src/components/HomepageHero/HomepageHero.module.css
index 0ccd010e..ee7b522e 100644
--- a/src/components/HomepageHero/HomepageHero.module.css
+++ b/src/components/HomepageHero/HomepageHero.module.css
@@ -1,10 +1,12 @@
 .root {
-  background-color: var(--brand-color-grey-0);
   overflow: hidden;
-  height: 518px;
 
   --offset-top: calc(var(--space-xl) + var(--navbar-banner-height) + var(--navbar-top-height));
-  --hero-illustration-overlap: min(20vh, 150px);
+}
+
+.wrapper {
+  background-color: var(--brand-color-grey-10);
+  overflow-x: clip;
 }
 
 .container {
@@ -12,73 +14,18 @@
   position: relative;
 }
 
-.background {
-  height: 518px;
-  width: 100%;
-  position: absolute;
-  max-width: var(--container-width-l);
-  left: 50%;
-  transform: translateX(-50%);
-  overflow: hidden;
-
-  & > svg {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    max-inline-size: none;
-    max-block-size: none;
-  }
-
-  .topVignette,
-  .bottomVignette {
-    height: 40px;
-  }
-
-  .rightVignette,
-  .leftVignette {
-    width: 40px;
-  }
-
-  .topVignette {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    background: linear-gradient(to top, transparent, var(--brand-color-grey-0));
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  .rightVignette {
-    position: absolute;
-    top: 80px;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(to right, transparent, var(--brand-color-grey-0));
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  .bottomVignette {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: linear-gradient(to bottom, transparent, var(--brand-color-grey-0));
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  .leftVignette {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    background: linear-gradient(to left, transparent, var(--brand-color-grey-0));
-    pointer-events: none;
-    z-index: 1;
-  }
+.backgroundGrid {
+  background-color: var(--brand-color-grey-10);
+  --background-grid-width: 1920px;
+  --grid-color: var(--brand-color-grey-9);
+  --background-grid-height: 518px;
+  --background-grid-max-width: none;
+  --background-grid-vignette-color: var(--brand-color-grey-10);
+  --background-grid-top-vignette-height: 40px;
+  --background-grid-bottom-vignette-height: 40px;
+  --background-grid-left-vignette-width: 40px;
+  --background-grid-right-vignette-width: 40px;
+  --background-grid-right-vignette-top: 80px;
 }
 
 .content {
@@ -86,7 +33,11 @@
   width: 100%;
   max-width: var(--container-width-s);
   padding: var(--offset-top) var(--space-m);
+  box-sizing: border-box;
+  min-width: 0;
   font-family: var(--font-family-body);
+  text-align: center;
+  margin: 0 auto;
 }
 
 .title {
@@ -94,24 +45,44 @@
   font-size: var(--text-headline-l);
   line-height: var(--line-height-compact);
   letter-spacing: -0.0075em;
+  color: var(--color-text-on-color);
 }
 
 .title strong {
   background-clip: text;
-  background: linear-gradient(to right, var(--brand-color-blue-6), var(--brand-color-blue-8));
+  /* TODO: Update tokens to match the Product DS */
+  background: var(
+    --Text-highlight-Blue-light,
+    linear-gradient(90deg, var(--Blue-4, #90b7f6) 0%, var(--Blue-6, #498af6) 100%)
+  );
+  /* background: linear-gradient(to right, var(--brand-color-blue-6), var(--brand-color-blue-8)); */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 
 .description {
   max-width: var(--container-width-xs);
-  margin-bottom: var(--space-s);
-  color: var(--brand-color-grey-8);
+  margin-left: auto;
+  margin-right: auto;
+  /* TODO: Update tokens to match the Product DS */
+  color: var(--Text-secondary, rgba(255, 255, 255, 0.75));
+}
+
+.search {
+  width: 100%;
+  padding-top: var(--space-m);
+
+  @media (--phablet-up) {
+    max-width: 480px;
+  }
 }
 
 .buttonContainer {
   display: flex;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
   width: 100%;
   gap: var(--space-s);
 }
@@ -129,13 +100,10 @@
     width: var(--button-width-m);
   }
 
-  .topVignette,
-  .bottomVignette {
-    height: 80px;
-  }
-
-  .rightVignette,
-  .leftVignette {
-    width: 80px;
+  .backgroundGrid {
+    --background-grid-top-vignette-height: 80px;
+    --background-grid-bottom-vignette-height: 80px;
+    --background-grid-left-vignette-width: 80px;
+    --background-grid-right-vignette-width: 80px;
   }
 }
diff --git a/src/components/HomepageHero/HomepageHero.tsx b/src/components/HomepageHero/HomepageHero.tsx
index 0954f375..7a09d0f7 100644
--- a/src/components/HomepageHero/HomepageHero.tsx
+++ b/src/components/HomepageHero/HomepageHero.tsx
@@ -1,70 +1,15 @@
+import type { Hero } from '@/lib/types';
+
+import { cx } from 'class-variance-authority';
+
+import { BackgroundGrid } from '../BackgroundGrid';
 import { Button } from '../Button';
-import { type IconName } from '@/icons';
 import { Container } from '../Container';
 import { Flex } from '../Flex';
+import { SearchDialog } from '../SearchDialog';
 import styles from './HomepageHero.module.css';
-import { cx } from 'class-variance-authority';
-
-interface ButtonProps {
-  label: string;
-  href: string;
-  icon?: IconName;
-}
-
-interface HeroProps {
-  title?: string;
-  description?: string;
-  buttons?: ButtonProps[];
-}
 
-const HeroBackground = () => (
-  <div className={styles.background}>
-    <div className={styles.topVignette}></div>
-    <div className={styles.rightVignette}></div>
-    <div className={styles.bottomVignette}></div>
-    <div className={styles.leftVignette}></div>
-    <svg width="1600" height="518" viewBox="0 0 1600 518" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <defs>
-        <pattern id="gridPattern" width="40" height="40" patternUnits="userSpaceOnUse">
-          <path
-            d="M40 0 L0 0 0 40"
-            stroke="var(--brand-color-blue-2)"
-            strokeWidth="1.5"
-            strokeDasharray="3 3"
-          />
-        </pattern>
-      </defs>
-      <g clipPath="url(#clip0)">
-        <g clipPath="url(#clip1)">
-          <rect width="1600" height="518" fill="var(--brand-color-grey-0)" />
-          <rect width="1600" height="518" fill="url(#gridPattern)" />
-          <rect width="1600" height="518" stroke="var(--brand-color-grey-0)" strokeWidth="1.5" />
-          <ellipse
-            opacity="0.25"
-            cx="120"
-            cy="120"
-            rx="120"
-            ry="120"
-            transform="matrix(4.37114e-08 1 1 -4.37114e-08 1080 177)"
-            fill="var(--brand-color-blue-3)"
-          />
-        </g>
-      </g>
-      <path
-        d="M760 418L759.47 418.53L759.689 418.75L760 418.75L760 418ZM520 178L519.25 178L519.25 178.311L519.47 178.53L520 178ZM520 -434L519.47 -434.53L519.25 -434.311L519.25 -434L520 -434ZM628 -542L628 -542.75L627.689 -542.75L627.47 -542.53L628 -542ZM652 -542L652.53 -542.53L652.311 -542.75L652 -542.75L652 -542ZM760 -434L760.75 -434L760.75 -434.311L760.53 -434.53L760 -434ZM760 56.5L759.25 56.5L759.25 56.808L759.466 57.0271L760 56.5ZM880 178L879.466 178.527L879.687 178.75L880 178.75L880 178ZM1012 178L1012.53 177.47L1012.31 177.25L1012 177.25L1012 178ZM1120 286L1120.75 286L1120.75 285.689L1120.53 285.47L1120 286ZM1120 310L1120.53 310.53L1120.75 310.311L1120.75 310L1120 310ZM1012 418L1012 418.75L1012.31 418.75L1012.53 418.53L1012 418ZM760 418L760 418.75L761.5 418.75L761.5 418L761.5 417.25L760 417.25L760 418ZM764.5 418L764.5 418.75L767.5 418.75L767.5 418L767.5 417.25L764.5 417.25L764.5 418ZM770.5 418L770.5 418.75L773.5 418.75L773.5 418L773.5 417.25L770.5 417.25L770.5 418ZM776.5 418L776.5 418.75L779.5 418.75L779.5 418L779.5 417.25L776.5 417.25L776.5 418ZM782.5 418L782.5 418.75L785.5 418.75L785.5 418L785.5 417.25L782.5 417.25L782.5 418ZM788.5 418L788.5 418.75L791.5 418.75L791.5 418L791.5 417.25L788.5 417.25L788.5 418ZM794.5 418L794.5 418.75L797.5 418.75L797.5 418L797.5 417.25L794.5 417.25L794.5 418ZM800.5 418L800.5 418.75L803.5 418.75L803.5 418L803.5 417.25L800.5 417.25L800.5 418ZM806.5 418L806.5 418.75L809.5 418.75L809.5 418L809.5 417.25L806.5 417.25L806.5 418ZM812.5 418L812.5 418.75L815.5 418.75L815.5 418L815.5 417.25L812.5 417.25L812.5 418ZM818.5 418L818.5 418.75L821.5 418.75L821.5 418L821.5 417.25L818.5 417.25L818.5 418ZM824.5 418L824.5 418.75L827.5 418.75L827.5 418L827.5 417.25L824.5 417.25L824.5 418ZM830.5 418L830.5 418.75L833.5 418.75L833.5 418L833.5 417.25L830.5 417.25L830.5 418ZM836.5 418L836.5 418.75L839.5 418.75L839.5 418L839.5 417.25L836.5 417.25L836.5 418ZM842.5 418L842.5 418.75L845.5 418.75L845.5 418L845.5 417.25L842.5 417.25L842.5 418ZM848.5 418L848.5 418.75L851.5 418.75L851.5 418L851.5 417.25L848.5 417.25L848.5 418ZM854.5 418L854.5 418.75L857.5 418.75L857.5 418L857.5 417.25L854.5 417.25L854.5 418ZM860.5 418L860.5 418.75L863.5 418.75L863.5 418L863.5 417.25L860.5 417.25L860.5 418ZM866.5 418L866.5 418.75L869.5 418.75L869.5 418L869.5 417.25L866.5 417.25L866.5 418ZM872.5 418L872.5 418.75L875.5 418.75L875.5 418L875.5 417.25L872.5 417.25L872.5 418ZM878.5 418L878.5 418.75L881.5 418.75L881.5 418L881.5 417.25L878.5 417.25L878.5 418ZM884.5 418L884.5 418.75L887.5 418.75L887.5 418L887.5 417.25L884.5 417.25L884.5 418ZM890.5 418L890.5 418.75L893.5 418.75L893.5 418L893.5 417.25L890.5 417.25L890.5 418ZM896.5 418L896.5 418.75L899.5 418.75L899.5 418L899.5 417.25L896.5 417.25L896.5 418ZM902.5 418L902.5 418.75L905.5 418.75L905.5 418L905.5 417.25L902.5 417.25L902.5 418ZM908.5 418L908.5 418.75L911.5 418.75L911.5 418L911.5 417.25L908.5 417.25L908.5 418ZM914.5 418L914.5 418.75L917.5 418.75L917.5 418L917.5 417.25L914.5 417.25L914.5 418ZM920.5 418L920.5 418.75L923.5 418.75L923.5 418L923.5 417.25L920.5 417.25L920.5 418ZM926.5 418L926.5 418.75L929.5 418.75L929.5 418L929.5 417.25L926.5 417.25L926.5 418ZM932.5 418L932.5 418.75L935.5 418.75L935.5 418L935.5 417.25L932.5 417.25L932.5 418ZM938.5 418L938.5 418.75L941.5 418.75L941.5 418L941.5 417.25L938.5 417.25L938.5 418ZM944.5 418L944.5 418.75L947.5 418.75L947.5 418L947.5 417.25L944.5 417.25L944.5 418ZM950.5 418L950.5 418.75L953.5 418.75L953.5 418L953.5 417.25L950.5 417.25L950.5 418ZM956.5 418L956.5 418.75L959.5 418.75L959.5 418L959.5 417.25L956.5 417.25L956.5 418ZM962.5 418L962.5 418.75L965.5 418.75L965.5 418L965.5 417.25L962.5 417.25L962.5 418ZM968.5 418L968.5 418.75L971.5 418.75L971.5 418L971.5 417.25L968.5 417.25L968.5 418ZM974.5 418L974.5 418.75L977.5 418.75L977.5 418L977.5 417.25L974.5 417.25L974.5 418ZM980.5 418L980.5 418.75L983.5 418.75L983.5 418L983.5 417.25L980.5 417.25L980.5 418ZM986.5 418L986.5 418.75L989.5 418.75L989.5 418L989.5 417.25L986.5 417.25L986.5 418ZM992.5 418L992.5 418.75L995.5 418.75L995.5 418L995.5 417.25L992.5 417.25L992.5 418ZM998.5 418L998.5 418.75L1001.5 418.75L1001.5 418L1001.5 417.25L998.5 417.25L998.5 418ZM1004.5 418L1004.5 418.75L1007.5 418.75L1007.5 418L1007.5 417.25L1004.5 417.25L1004.5 418ZM1010.5 418L1010.5 418.75L1012 418.75L1012 418L1012 417.25L1010.5 417.25L1010.5 418ZM1012 418L1012.53 418.53L1013.61 417.45L1013.08 416.92L1012.55 416.39L1011.47 417.47L1012 418ZM1015.24 414.76L1015.77 415.29L1017.93 413.13L1017.4 412.6L1016.87 412.07L1014.71 414.23L1015.24 414.76ZM1019.56 410.44L1020.09 410.97L1022.25 408.81L1021.72 408.28L1021.19 407.75L1019.03 409.91L1019.56 410.44ZM1023.88 406.12L1024.41 406.65L1026.57 404.49L1026.04 403.96L1025.51 403.43L1023.35 405.59L1023.88 406.12ZM1028.2 401.8L1028.73 402.33L1030.89 400.17L1030.36 399.64L1029.83 399.11L1027.67 401.27L1028.2 401.8ZM1032.52 397.48L1033.05 398.01L1035.21 395.85L1034.68 395.32L1034.15 394.79L1031.99 396.95L1032.52 397.48ZM1036.84 393.16L1037.37 393.69L1039.53 391.53L1039 391L1038.47 390.47L1036.31 392.63L1036.84 393.16ZM1041.16 388.84L1041.69 389.37L1043.85 387.21L1043.32 386.68L1042.79 386.15L1040.63 388.31L1041.16 388.84ZM1045.48 384.52L1046.01 385.05L1048.17 382.89L1047.64 382.36L1047.11 381.83L1044.95 383.99L1045.48 384.52ZM1049.8 380.2L1050.33 380.73L1052.49 378.57L1051.96 378.04L1051.43 377.51L1049.27 379.67L1049.8 380.2ZM1054.12 375.88L1054.65 376.41L1056.81 374.25L1056.28 373.72L1055.75 373.19L1053.59 375.35L1054.12 375.88ZM1058.44 371.56L1058.97 372.09L1061.13 369.93L1060.6 369.4L1060.07 368.87L1057.91 371.03L1058.44 371.56ZM1062.76 367.24L1063.29 367.77L1065.45 365.61L1064.92 365.08L1064.39 364.55L1062.23 366.71L1062.76 367.24ZM1067.08 362.92L1067.61 363.45L1069.77 361.29L1069.24 360.76L1068.71 360.23L1066.55 362.39L1067.08 362.92ZM1071.4 358.6L1071.93 359.13L1074.09 356.97L1073.56 356.44L1073.03 355.91L1070.87 358.07L1071.4 358.6ZM1075.72 354.28L1076.25 354.81L1078.41 352.65L1077.88 352.12L1077.35 351.59L1075.19 353.75L1075.72 354.28ZM1080.04 349.96L1080.57 350.49L1082.73 348.33L1082.2 347.8L1081.67 347.27L1079.51 349.43L1080.04 349.96ZM1084.36 345.64L1084.89 346.17L1087.05 344.01L1086.52 343.48L1085.99 342.95L1083.83 345.11L1084.36 345.64ZM1088.68 341.32L1089.21 341.85L1091.37 339.69L1090.84 339.16L1090.31 338.63L1088.15 340.79L1088.68 341.32ZM1093 337L1093.53 337.53L1095.69 335.37L1095.16 334.84L1094.63 334.31L1092.47 336.47L1093 337ZM1097.32 332.68L1097.85 333.21L1100.01 331.05L1099.48 330.52L1098.95 329.99L1096.79 332.15L1097.32 332.68ZM1101.64 328.36L1102.17 328.89L1104.33 326.73L1103.8 326.2L1103.27 325.67L1101.11 327.83L1101.64 328.36ZM1105.96 324.04L1106.49 324.57L1108.65 322.41L1108.12 321.88L1107.59 321.35L1105.43 323.51L1105.96 324.04ZM1110.28 319.72L1110.81 320.25L1112.97 318.09L1112.44 317.56L1111.91 317.03L1109.75 319.19L1110.28 319.72ZM1114.6 315.4L1115.13 315.93L1117.29 313.77L1116.76 313.24L1116.23 312.71L1114.07 314.87L1114.6 315.4ZM1118.92 311.08L1119.45 311.61L1120.53 310.53L1120 310L1119.47 309.47L1118.39 310.55L1118.92 311.08ZM1120 310L1120.75 310L1120.75 308.5L1120 308.5L1119.25 308.5L1119.25 310L1120 310ZM1120 305.5L1120.75 305.5L1120.75 302.5L1120 302.5L1119.25 302.5L1119.25 305.5L1120 305.5ZM1120 299.5L1120.75 299.5L1120.75 296.5L1120 296.5L1119.25 296.5L1119.25 299.5L1120 299.5ZM1120 293.5L1120.75 293.5L1120.75 290.5L1120 290.5L1119.25 290.5L1119.25 293.5L1120 293.5ZM1120 287.5L1120.75 287.5L1120.75 286L1120 286L1119.25 286L1119.25 287.5L1120 287.5ZM1120 286L1120.53 285.47L1119.45 284.39L1118.92 284.92L1118.39 285.45L1119.47 286.53L1120 286ZM1116.76 282.76L1117.29 282.23L1115.13 280.07L1114.6 280.6L1114.07 281.13L1116.23 283.29L1116.76 282.76ZM1112.44 278.44L1112.97 277.91L1110.81 275.75L1110.28 276.28L1109.75 276.81L1111.91 278.97L1112.44 278.44ZM1108.12 274.12L1108.65 273.59L1106.49 271.43L1105.96 271.96L1105.43 272.49L1107.59 274.65L1108.12 274.12ZM1103.8 269.8L1104.33 269.27L1102.17 267.11L1101.64 267.64L1101.11 268.17L1103.27 270.33L1103.8 269.8ZM1099.48 265.48L1100.01 264.95L1097.85 262.79L1097.32 263.32L1096.79 263.85L1098.95 266.01L1099.48 265.48ZM1095.16 261.16L1095.69 260.63L1093.53 258.47L1093 259L1092.47 259.53L1094.63 261.69L1095.16 261.16ZM1090.84 256.84L1091.37 256.31L1089.21 254.15L1088.68 254.68L1088.15 255.21L1090.31 257.37L1090.84 256.84ZM1086.52 252.52L1087.05 251.99L1084.89 249.83L1084.36 250.36L1083.83 250.89L1085.99 253.05L1086.52 252.52ZM1082.2 248.2L1082.73 247.67L1080.57 245.51L1080.04 246.04L1079.51 246.57L1081.67 248.73L1082.2 248.2ZM1077.88 243.88L1078.41 243.35L1076.25 241.19L1075.72 241.72L1075.19 242.25L1077.35 244.41L1077.88 243.88ZM1073.56 239.56L1074.09 239.03L1071.93 236.87L1071.4 237.4L1070.87 237.93L1073.03 240.09L1073.56 239.56ZM1069.24 235.24L1069.77 234.71L1067.61 232.55L1067.08 233.08L1066.55 233.61L1068.71 235.77L1069.24 235.24ZM1064.92 230.92L1065.45 230.39L1063.29 228.23L1062.76 228.76L1062.23 229.29L1064.39 231.45L1064.92 230.92ZM1060.6 226.6L1061.13 226.07L1058.97 223.91L1058.44 224.44L1057.91 224.97L1060.07 227.13L1060.6 226.6ZM1056.28 222.28L1056.81 221.75L1054.65 219.59L1054.12 220.12L1053.59 220.65L1055.75 222.81L1056.28 222.28ZM1051.96 217.96L1052.49 217.43L1050.33 215.27L1049.8 215.8L1049.27 216.33L1051.43 218.49L1051.96 217.96ZM1047.64 213.64L1048.17 213.11L1046.01 210.95L1045.48 211.48L1044.95 212.01L1047.11 214.17L1047.64 213.64ZM1043.32 209.32L1043.85 208.79L1041.69 206.63L1041.16 207.16L1040.63 207.69L1042.79 209.85L1043.32 209.32ZM1039 205L1039.53 204.47L1037.37 202.31L1036.84 202.84L1036.31 203.37L1038.47 205.53L1039 205ZM1034.68 200.68L1035.21 200.15L1033.05 197.99L1032.52 198.52L1031.99 199.05L1034.15 201.21L1034.68 200.68ZM1030.36 196.36L1030.89 195.83L1028.73 193.67L1028.2 194.2L1027.67 194.73L1029.83 196.89L1030.36 196.36ZM1026.04 192.04L1026.57 191.51L1024.41 189.35L1023.88 189.88L1023.35 190.41L1025.51 192.57L1026.04 192.04ZM1021.72 187.72L1022.25 187.19L1020.09 185.03L1019.56 185.56L1019.03 186.09L1021.19 188.25L1021.72 187.72ZM1017.4 183.4L1017.93 182.87L1015.77 180.71L1015.24 181.24L1014.71 181.77L1016.87 183.93L1017.4 183.4ZM1013.08 179.08L1013.61 178.55L1012.53 177.47L1012 178L1011.47 178.53L1012.55 179.61L1013.08 179.08ZM1012 178L1012 177.25L1010.5 177.25L1010.5 178L1010.5 178.75L1012 178.75L1012 178ZM1007.5 178L1007.5 177.25L1004.5 177.25L1004.5 178L1004.5 178.75L1007.5 178.75L1007.5 178ZM1001.5 178L1001.5 177.25L998.5 177.25L998.5 178L998.5 178.75L1001.5 178.75L1001.5 178ZM995.5 178L995.5 177.25L992.5 177.25L992.5 178L992.5 178.75L995.5 178.75L995.5 178ZM989.5 178L989.5 177.25L986.5 177.25L986.5 178L986.5 178.75L989.5 178.75L989.5 178ZM983.5 178L983.5 177.25L980.5 177.25L980.5 178L980.5 178.75L983.5 178.75L983.5 178ZM977.5 178L977.5 177.25L974.5 177.25L974.5 178L974.5 178.75L977.5 178.75L977.5 178ZM971.5 178L971.5 177.25L968.5 177.25L968.5 178L968.5 178.75L971.5 178.75L971.5 178ZM965.5 178L965.5 177.25L962.5 177.25L962.5 178L962.5 178.75L965.5 178.75L965.5 178ZM959.5 178L959.5 177.25L956.5 177.25L956.5 178L956.5 178.75L959.5 178.75L959.5 178ZM953.5 178L953.5 177.25L950.5 177.25L950.5 178L950.5 178.75L953.5 178.75L953.5 178ZM947.5 178L947.5 177.25L944.5 177.25L944.5 178L944.5 178.75L947.5 178.75L947.5 178ZM941.5 178L941.5 177.25L938.5 177.25L938.5 178L938.5 178.75L941.5 178.75L941.5 178ZM935.5 178L935.5 177.25L932.5 177.25L932.5 178L932.5 178.75L935.5 178.75L935.5 178ZM929.5 178L929.5 177.25L926.5 177.25L926.5 178L926.5 178.75L929.5 178.75L929.5 178ZM923.5 178L923.5 177.25L920.5 177.25L920.5 178L920.5 178.75L923.5 178.75L923.5 178ZM917.5 178L917.5 177.25L914.5 177.25L914.5 178L914.5 178.75L917.5 178.75L917.5 178ZM911.5 178L911.5 177.25L908.5 177.25L908.5 178L908.5 178.75L911.5 178.75L911.5 178ZM905.5 178L905.5 177.25L902.5 177.25L902.5 178L902.5 178.75L905.5 178.75L905.5 178ZM899.5 178L899.5 177.25L896.5 177.25L896.5 178L896.5 178.75L899.5 178.75L899.5 178ZM893.5 178L893.5 177.25L890.5 177.25L890.5 178L890.5 178.75L893.5 178.75L893.5 178ZM887.5 178L887.5 177.25L884.5 177.25L884.5 178L884.5 178.75L887.5 178.75L887.5 178ZM881.5 178L881.5 177.25L880 177.25L880 178L880 178.75L881.5 178.75L881.5 178ZM880 178L880.534 177.473L879.462 176.388L878.929 176.915L878.395 177.442L879.466 178.527L880 178ZM876.786 174.746L877.319 174.219L875.176 172.049L874.643 172.576L874.109 173.103L876.252 175.273L876.786 174.746ZM872.5 170.406L873.034 169.879L870.891 167.71L870.357 168.237L869.824 168.764L871.966 170.933L872.5 170.406ZM868.214 166.067L868.748 165.54L866.605 163.37L866.071 163.897L865.538 164.424L867.681 166.594L868.214 166.067ZM863.929 161.728L864.462 161.201L862.319 159.031L861.786 159.558L861.252 160.085L863.395 162.255L863.929 161.728ZM859.643 157.388L860.176 156.861L858.034 154.692L857.5 155.219L856.966 155.746L859.109 157.915L859.643 157.388ZM855.357 153.049L855.891 152.522L853.748 150.352L853.214 150.879L852.681 151.407L854.824 153.576L855.357 153.049ZM851.071 148.71L851.605 148.183L849.462 146.013L848.929 146.54L848.395 147.067L850.538 149.237L851.071 148.71ZM846.786 144.371L847.319 143.844L845.176 141.674L844.643 142.201L844.109 142.728L846.252 144.898L846.786 144.371ZM842.5 140.031L843.034 139.504L840.891 137.335L840.357 137.862L839.823 138.389L841.966 140.558L842.5 140.031ZM838.214 135.692L838.748 135.165L836.605 132.995L836.071 133.522L835.538 134.049L837.681 136.219L838.214 135.692ZM833.929 131.353L834.462 130.826L832.319 128.656L831.786 129.183L831.252 129.71L833.395 131.88L833.929 131.353ZM829.643 127.013L830.176 126.486L828.034 124.317L827.5 124.844L826.966 125.371L829.109 127.54L829.643 127.013ZM825.357 122.674L825.891 122.147L823.748 119.977L823.214 120.504L822.681 121.032L824.824 123.201L825.357 122.674ZM821.071 118.335L821.605 117.808L819.462 115.638L818.929 116.165L818.395 116.692L820.538 118.862L821.071 118.335ZM816.786 113.996L817.319 113.469L815.176 111.299L814.643 111.826L814.109 112.353L816.252 114.523L816.786 113.996ZM812.5 109.656L813.034 109.129L810.891 106.96L810.357 107.487L809.824 108.014L811.966 110.183L812.5 109.656ZM808.214 105.317L808.748 104.79L806.605 102.62L806.071 103.147L805.538 103.674L807.681 105.844L808.214 105.317ZM803.929 100.978L804.462 100.451L802.319 98.2811L801.786 98.8081L801.252 99.3351L803.395 101.505L803.929 100.978ZM799.643 96.6384L800.176 96.1114L798.034 93.9418L797.5 94.4688L796.966 94.9958L799.109 97.1655L799.643 96.6384ZM795.357 92.2992L795.891 91.7721L793.748 89.6025L793.214 90.1295L792.681 90.6565L794.824 92.8262L795.357 92.2992ZM791.071 87.9599L791.605 87.4329L789.462 85.2632L788.929 85.7902L788.395 86.3173L790.538 88.4869L791.071 87.9599ZM786.786 83.6206L787.319 83.0936L785.176 80.9239L784.643 81.451L784.109 81.978L786.252 84.1476L786.786 83.6206ZM782.5 79.2813L783.034 78.7543L780.891 76.5846L780.357 77.1117L779.824 77.6387L781.966 79.8083L782.5 79.2813ZM778.214 74.942L778.748 74.415L776.605 72.2454L776.071 72.7724L775.538 73.2994L777.681 75.4691L778.214 74.942ZM773.929 70.6028L774.462 70.0757L772.319 67.9061L771.786 68.4331L771.252 68.9601L773.395 71.1298L773.929 70.6028ZM769.643 66.2635L770.176 65.7364L768.034 63.5668L767.5 64.0938L766.966 64.6209L769.109 66.7905L769.643 66.2635ZM765.357 61.9242L765.891 61.3972L763.748 59.2275L763.214 59.7546L762.681 60.2816L764.824 62.4512L765.357 61.9242ZM761.071 57.5849L761.605 57.0579L760.534 55.973L760 56.5L759.466 57.0271L760.538 58.1119L761.071 57.5849ZM760 56.5L760.75 56.5L760.75 55.0046L760 55.0046L759.25 55.0046L759.25 56.5L760 56.5ZM760 52.0138L760.75 52.0138L760.75 49.0229L760 49.0229L759.25 49.0229L759.25 52.0138L760 52.0138ZM760 46.032L760.75 46.032L760.75 43.0412L760 43.0412L759.25 43.0412L759.25 46.032L760 46.032ZM760 40.0503L760.75 40.0503L760.75 37.0595L760 37.0595L759.25 37.0595L759.25 40.0503L760 40.0503ZM760 34.0686L760.75 34.0686L760.75 31.0778L760 31.0778L759.25 31.0778L759.25 34.0686L760 34.0686ZM760 28.0869L760.75 28.0869L760.75 25.0961L760 25.0961L759.25 25.0961L759.25 28.0869L760 28.0869ZM760 22.1052L760.75 22.1052L760.75 19.1144L760 19.1144L759.25 19.1144L759.25 22.1052L760 22.1052ZM760 16.1235L760.75 16.1235L760.75 13.1327L760 13.1327L759.25 13.1327L759.25 16.1235L760 16.1235ZM760 10.1418L760.75 10.1418L760.75 7.15095L760 7.15095L759.25 7.15095L759.25 10.1418L760 10.1418ZM760 4.1601L760.75 4.1601L760.75 1.16925L760 1.16925L759.25 1.16925L759.25 4.1601L760 4.1601ZM760 -1.8216L760.75 -1.8216L760.75 -4.81246L760 -4.81246L759.25 -4.81246L759.25 -1.8216L760 -1.8216ZM760 -7.80331L760.75 -7.80331L760.75 -10.7942L760 -10.7942L759.25 -10.7942L759.25 -7.80331L760 -7.80331ZM760 -13.785L760.75 -13.785L760.75 -16.7759L760 -16.7759L759.25 -16.7759L759.25 -13.785L760 -13.785ZM760 -19.7667L760.75 -19.7667L760.75 -22.7576L760 -22.7576L759.25 -22.7576L759.25 -19.7667L760 -19.7667ZM760 -25.7484L760.75 -25.7484L760.75 -28.7393L760 -28.7393L759.25 -28.7393L759.25 -25.7484L760 -25.7484ZM760 -31.7301L760.75 -31.7301L760.75 -34.721L760 -34.721L759.25 -34.721L759.25 -31.7301L760 -31.7301ZM760 -37.7118L760.75 -37.7118L760.75 -40.7027L760 -40.7027L759.25 -40.7027L759.25 -37.7118L760 -37.7118ZM760 -43.6935L760.75 -43.6935L760.75 -46.6844L760 -46.6844L759.25 -46.6844L759.25 -43.6935L760 -43.6935ZM760 -49.6752L760.75 -49.6752L760.75 -52.6661L760 -52.6661L759.25 -52.6661L759.25 -49.6752L760 -49.6752ZM760 -55.657L760.75 -55.657L760.75 -58.6478L760 -58.6478L759.25 -58.6478L759.25 -55.657L760 -55.657ZM760 -61.6387L760.75 -61.6387L760.75 -64.6295L760 -64.6295L759.25 -64.6295L759.25 -61.6387L760 -61.6387ZM760 -67.6204L760.75 -67.6204L760.75 -70.6112L760 -70.6112L759.25 -70.6112L759.25 -67.6204L760 -67.6204ZM760 -73.6021L760.75 -73.6021L760.75 -76.5929L760 -76.5929L759.25 -76.5929L759.25 -73.6021L760 -73.6021ZM760 -79.5838L760.75 -79.5838L760.75 -82.5746L760 -82.5746L759.25 -82.5746L759.25 -79.5838L760 -79.5838ZM760 -85.5655L760.75 -85.5655L760.75 -88.5564L760 -88.5564L759.25 -88.5564L759.25 -85.5655L760 -85.5655ZM760 -91.5472L760.75 -91.5472L760.75 -94.5381L760 -94.5381L759.25 -94.5381L759.25 -91.5472L760 -91.5472ZM760 -97.5289L760.75 -97.5289L760.75 -100.52L760 -100.52L759.25 -100.52L759.25 -97.5289L760 -97.5289ZM760 -103.511L760.75 -103.511L760.75 -106.502L760 -106.502L759.25 -106.502L759.25 -103.511L760 -103.511ZM760 -109.492L760.75 -109.492L760.75 -112.483L760 -112.483L759.25 -112.483L759.25 -109.492L760 -109.492ZM760 -115.474L760.75 -115.474L760.75 -118.465L760 -118.465L759.25 -118.465L759.25 -115.474L760 -115.474ZM760 -121.456L760.75 -121.456L760.75 -124.447L760 -124.447L759.25 -124.447L759.25 -121.456L760 -121.456ZM760 -127.438L760.75 -127.438L760.75 -130.428L760 -130.428L759.25 -130.428L759.25 -127.438L760 -127.438ZM760 -133.419L760.75 -133.419L760.75 -136.41L760 -136.41L759.25 -136.41L759.25 -133.419L760 -133.419ZM760 -139.401L760.75 -139.401L760.75 -142.392L760 -142.392L759.25 -142.392L759.25 -139.401L760 -139.401ZM760 -145.383L760.75 -145.383L760.75 -148.374L760 -148.374L759.25 -148.374L759.25 -145.383L760 -145.383ZM760 -151.364L760.75 -151.364L760.75 -154.355L760 -154.355L759.25 -154.355L759.25 -151.364L760 -151.364ZM760 -157.346L760.75 -157.346L760.75 -160.337L760 -160.337L759.25 -160.337L759.25 -157.346L760 -157.346ZM760 -163.328L760.75 -163.328L760.75 -166.319L760 -166.319L759.25 -166.319L759.25 -163.328L760 -163.328ZM760 -169.31L760.75 -169.31L760.75 -172.3L760 -172.3L759.25 -172.3L759.25 -169.31L760 -169.31ZM760 -175.291L760.75 -175.291L760.75 -178.282L760 -178.282L759.25 -178.282L759.25 -175.291L760 -175.291ZM760 -181.273L760.75 -181.273L760.75 -184.264L760 -184.264L759.25 -184.264L759.25 -181.273L760 -181.273ZM760 -187.255L760.75 -187.255L760.75 -190.246L760 -190.246L759.25 -190.246L759.25 -187.255L760 -187.255ZM760 -193.236L760.75 -193.236L760.75 -196.227L760 -196.227L759.25 -196.227L759.25 -193.236L760 -193.236ZM760 -199.218L760.75 -199.218L760.75 -202.209L760 -202.209L759.25 -202.209L759.25 -199.218L760 -199.218ZM760 -205.2L760.75 -205.2L760.75 -208.191L760 -208.191L759.25 -208.191L759.25 -205.2L760 -205.2ZM760 -211.182L760.75 -211.182L760.75 -214.172L760 -214.172L759.25 -214.172L759.25 -211.182L760 -211.182ZM760 -217.163L760.75 -217.163L760.75 -220.154L760 -220.154L759.25 -220.154L759.25 -217.163L760 -217.163ZM760 -223.145L760.75 -223.145L760.75 -226.136L760 -226.136L759.25 -226.136L759.25 -223.145L760 -223.145ZM760 -229.127L760.75 -229.127L760.75 -232.117L760 -232.117L759.25 -232.117L759.25 -229.127L760 -229.127ZM760 -235.108L760.75 -235.108L760.75 -238.099L760 -238.099L759.25 -238.099L759.25 -235.108L760 -235.108ZM760 -241.09L760.75 -241.09L760.75 -244.081L760 -244.081L759.25 -244.081L759.25 -241.09L760 -241.09ZM760 -247.072L760.75 -247.072L760.75 -250.063L760 -250.063L759.25 -250.063L759.25 -247.072L760 -247.072ZM760 -253.053L760.75 -253.053L760.75 -256.044L760 -256.044L759.25 -256.044L759.25 -253.053L760 -253.053ZM760 -259.035L760.75 -259.035L760.75 -262.026L760 -262.026L759.25 -262.026L759.25 -259.035L760 -259.035ZM760 -265.017L760.75 -265.017L760.75 -268.008L760 -268.008L759.25 -268.008L759.25 -265.017L760 -265.017ZM760 -270.998L760.75 -270.998L760.75 -273.989L760 -273.989L759.25 -273.989L759.25 -270.998L760 -270.998ZM760 -276.98L760.75 -276.98L760.75 -279.971L760 -279.971L759.25 -279.971L759.25 -276.98L760 -276.98ZM760 -282.962L760.75 -282.962L760.75 -285.953L760 -285.953L759.25 -285.953L759.25 -282.962L760 -282.962ZM760 -288.944L760.75 -288.944L760.75 -291.934L760 -291.934L759.25 -291.934L759.25 -288.944L760 -288.944ZM760 -294.925L760.75 -294.925L760.75 -297.916L760 -297.916L759.25 -297.916L759.25 -294.925L760 -294.925ZM760 -300.907L760.75 -300.907L760.75 -303.898L760 -303.898L759.25 -303.898L759.25 -300.907L760 -300.907ZM760 -306.889L760.75 -306.889L760.75 -309.879L760 -309.879L759.25 -309.879L759.25 -306.889L760 -306.889ZM760 -312.87L760.75 -312.87L760.75 -315.861L760 -315.861L759.25 -315.861L759.25 -312.87L760 -312.87ZM760 -318.852L760.75 -318.852L760.75 -321.843L760 -321.843L759.25 -321.843L759.25 -318.852L760 -318.852ZM760 -324.834L760.75 -324.834L760.75 -327.825L760 -327.825L759.25 -327.825L759.25 -324.834L760 -324.834ZM760 -330.815L760.75 -330.815L760.75 -333.806L760 -333.806L759.25 -333.806L759.25 -330.815L760 -330.815ZM760 -336.797L760.75 -336.797L760.75 -339.788L760 -339.788L759.25 -339.788L759.25 -336.797L760 -336.797ZM760 -342.779L760.75 -342.779L760.75 -345.77L760 -345.77L759.25 -345.77L759.25 -342.779L760 -342.779ZM760 -348.76L760.75 -348.76L760.75 -351.751L760 -351.751L759.25 -351.751L759.25 -348.76L760 -348.76ZM760 -354.742L760.75 -354.742L760.75 -357.733L760 -357.733L759.25 -357.733L759.25 -354.742L760 -354.742ZM760 -360.724L760.75 -360.724L760.75 -363.715L760 -363.715L759.25 -363.715L759.25 -360.724L760 -360.724ZM760 -366.706L760.75 -366.706L760.75 -369.696L760 -369.696L759.25 -369.696L759.25 -366.706L760 -366.706ZM760 -372.687L760.75 -372.687L760.75 -375.678L760 -375.678L759.25 -375.678L759.25 -372.687L760 -372.687ZM760 -378.669L760.75 -378.669L760.75 -381.66L760 -381.66L759.25 -381.66L759.25 -378.669L760 -378.669ZM760 -384.651L760.75 -384.651L760.75 -387.641L760 -387.641L759.25 -387.641L759.25 -384.651L760 -384.651ZM760 -390.632L760.75 -390.632L760.75 -393.623L760 -393.623L759.25 -393.623L759.25 -390.632L760 -390.632ZM760 -396.614L760.75 -396.614L760.75 -399.605L760 -399.605L759.25 -399.605L759.25 -396.614L760 -396.614ZM760 -402.596L760.75 -402.596L760.75 -405.586L760 -405.586L759.25 -405.586L759.25 -402.596L760 -402.596ZM760 -408.577L760.75 -408.577L760.75 -411.568L760 -411.568L759.25 -411.568L759.25 -408.577L760 -408.577ZM760 -414.559L760.75 -414.559L760.75 -417.55L760 -417.55L759.25 -417.55L759.25 -414.559L760 -414.559ZM760 -420.541L760.75 -420.541L760.75 -423.532L760 -423.532L759.25 -423.532L759.25 -420.541L760 -420.541ZM760 -426.522L760.75 -426.522L760.75 -429.513L760 -429.513L759.25 -429.513L759.25 -426.522L760 -426.522ZM760 -432.504L760.75 -432.504L760.75 -434L760 -434L759.25 -434L759.25 -432.504L760 -432.504ZM760 -434L760.53 -434.53L759.45 -435.61L758.92 -435.08L758.39 -434.55L759.47 -433.47L760 -434ZM756.76 -437.24L757.29 -437.77L755.13 -439.93L754.6 -439.4L754.07 -438.87L756.23 -436.71L756.76 -437.24ZM752.44 -441.56L752.97 -442.09L750.81 -444.25L750.28 -443.72L749.75 -443.19L751.91 -441.03L752.44 -441.56ZM748.12 -445.88L748.65 -446.41L746.49 -448.57L745.96 -448.04L745.43 -447.51L747.59 -445.35L748.12 -445.88ZM743.8 -450.2L744.33 -450.73L742.17 -452.89L741.64 -452.36L741.11 -451.83L743.27 -449.67L743.8 -450.2ZM739.48 -454.52L740.01 -455.05L737.85 -457.21L737.32 -456.68L736.79 -456.15L738.95 -453.99L739.48 -454.52ZM735.16 -458.84L735.69 -459.37L733.53 -461.53L733 -461L732.47 -460.47L734.63 -458.31L735.16 -458.84ZM730.84 -463.16L731.37 -463.69L729.21 -465.85L728.68 -465.32L728.15 -464.79L730.31 -462.63L730.84 -463.16ZM726.52 -467.48L727.05 -468.01L724.89 -470.17L724.36 -469.64L723.83 -469.11L725.99 -466.95L726.52 -467.48ZM722.2 -471.8L722.73 -472.33L720.57 -474.49L720.04 -473.96L719.51 -473.43L721.67 -471.27L722.2 -471.8ZM717.88 -476.12L718.41 -476.65L716.25 -478.81L715.72 -478.28L715.19 -477.75L717.35 -475.59L717.88 -476.12ZM713.56 -480.44L714.09 -480.97L711.93 -483.13L711.4 -482.6L710.87 -482.07L713.03 -479.91L713.56 -480.44ZM709.24 -484.76L709.77 -485.29L707.61 -487.45L707.08 -486.92L706.55 -486.39L708.71 -484.23L709.24 -484.76ZM704.92 -489.08L705.45 -489.61L703.29 -491.77L702.76 -491.24L702.23 -490.71L704.39 -488.55L704.92 -489.08ZM700.6 -493.4L701.13 -493.93L698.97 -496.09L698.44 -495.56L697.91 -495.03L700.07 -492.87L700.6 -493.4ZM696.28 -497.72L696.81 -498.25L694.65 -500.41L694.12 -499.88L693.59 -499.35L695.75 -497.19L696.28 -497.72ZM691.96 -502.04L692.49 -502.57L690.33 -504.73L689.8 -504.2L689.27 -503.67L691.43 -501.51L691.96 -502.04ZM687.64 -506.36L688.17 -506.89L686.01 -509.05L685.48 -508.52L684.95 -507.99L687.11 -505.83L687.64 -506.36ZM683.32 -510.68L683.85 -511.21L681.69 -513.37L681.16 -512.84L680.63 -512.31L682.79 -510.15L683.32 -510.68ZM679 -515L679.53 -515.53L677.37 -517.69L676.84 -517.16L676.31 -516.63L678.47 -514.47L679 -515ZM674.68 -519.32L675.21 -519.85L673.05 -522.01L672.52 -521.48L671.99 -520.95L674.15 -518.79L674.68 -519.32ZM670.36 -523.64L670.89 -524.17L668.73 -526.33L668.2 -525.8L667.67 -525.27L669.83 -523.11L670.36 -523.64ZM666.04 -527.96L666.57 -528.49L664.41 -530.65L663.88 -530.12L663.35 -529.59L665.51 -527.43L666.04 -527.96ZM661.72 -532.28L662.25 -532.81L660.09 -534.97L659.56 -534.44L659.03 -533.91L661.19 -531.75L661.72 -532.28ZM657.4 -536.6L657.93 -537.13L655.77 -539.29L655.24 -538.76L654.71 -538.23L656.87 -536.07L657.4 -536.6ZM653.08 -540.92L653.61 -541.45L652.53 -542.53L652 -542L651.47 -541.47L652.55 -540.39L653.08 -540.92ZM652 -542L652 -542.75L650.5 -542.75L650.5 -542L650.5 -541.25L652 -541.25L652 -542ZM647.5 -542L647.5 -542.75L644.5 -542.75L644.5 -542L644.5 -541.25L647.5 -541.25L647.5 -542ZM641.5 -542L641.5 -542.75L638.5 -542.75L638.5 -542L638.5 -541.25L641.5 -541.25L641.5 -542ZM635.5 -542L635.5 -542.75L632.5 -542.75L632.5 -542L632.5 -541.25L635.5 -541.25L635.5 -542ZM629.5 -542L629.5 -542.75L628 -542.75L628 -542L628 -541.25L629.5 -541.25L629.5 -542ZM628 -542L627.47 -542.53L626.39 -541.45L626.92 -540.92L627.45 -540.39L628.53 -541.47L628 -542ZM624.76 -538.76L624.23 -539.29L622.07 -537.13L622.6 -536.6L623.13 -536.07L625.29 -538.23L624.76 -538.76ZM620.44 -534.44L619.91 -534.97L617.75 -532.81L618.28 -532.28L618.81 -531.75L620.97 -533.91L620.44 -534.44ZM616.12 -530.12L615.59 -530.65L613.43 -528.49L613.96 -527.96L614.49 -527.43L616.65 -529.59L616.12 -530.12ZM611.8 -525.8L611.27 -526.33L609.11 -524.17L609.64 -523.64L610.17 -523.11L612.33 -525.27L611.8 -525.8ZM607.48 -521.48L606.95 -522.01L604.79 -519.85L605.32 -519.32L605.85 -518.79L608.01 -520.95L607.48 -521.48ZM603.16 -517.16L602.63 -517.69L600.47 -515.53L601 -515L601.53 -514.47L603.69 -516.63L603.16 -517.16ZM598.84 -512.84L598.31 -513.37L596.15 -511.21L596.68 -510.68L597.21 -510.15L599.37 -512.31L598.84 -512.84ZM594.52 -508.52L593.99 -509.05L591.83 -506.89L592.36 -506.36L592.89 -505.83L595.05 -507.99L594.52 -508.52ZM590.2 -504.2L589.67 -504.73L587.51 -502.57L588.04 -502.04L588.57 -501.51L590.73 -503.67L590.2 -504.2ZM585.88 -499.88L585.35 -500.41L583.19 -498.25L583.72 -497.72L584.25 -497.19L586.41 -499.35L585.88 -499.88ZM581.56 -495.56L581.03 -496.09L578.87 -493.93L579.4 -493.4L579.93 -492.87L582.09 -495.03L581.56 -495.56ZM577.24 -491.24L576.71 -491.77L574.55 -489.61L575.08 -489.08L575.61 -488.55L577.77 -490.71L577.24 -491.24ZM572.92 -486.92L572.39 -487.45L570.23 -485.29L570.76 -484.76L571.29 -484.23L573.45 -486.39L572.92 -486.92ZM568.6 -482.6L568.07 -483.13L565.91 -480.97L566.44 -480.44L566.97 -479.91L569.13 -482.07L568.6 -482.6ZM564.28 -478.28L563.75 -478.81L561.59 -476.65L562.12 -476.12L562.65 -475.59L564.81 -477.75L564.28 -478.28ZM559.96 -473.96L559.43 -474.49L557.27 -472.33L557.8 -471.8L558.33 -471.27L560.49 -473.43L559.96 -473.96ZM555.64 -469.64L555.11 -470.17L552.95 -468.01L553.48 -467.48L554.01 -466.95L556.17 -469.11L555.64 -469.64ZM551.32 -465.32L550.79 -465.85L548.63 -463.69L549.16 -463.16L549.69 -462.63L551.85 -464.79L551.32 -465.32ZM547 -461L546.47 -461.53L544.31 -459.37L544.84 -458.84L545.37 -458.31L547.53 -460.47L547 -461ZM542.68 -456.68L542.15 -457.21L539.99 -455.05L540.52 -454.52L541.05 -453.99L543.21 -456.15L542.68 -456.68ZM538.36 -452.36L537.83 -452.89L535.67 -450.73L536.2 -450.2L536.73 -449.67L538.89 -451.83L538.36 -452.36ZM534.04 -448.04L533.51 -448.57L531.35 -446.41L531.88 -445.88L532.41 -445.35L534.57 -447.51L534.04 -448.04ZM529.72 -443.72L529.19 -444.25L527.03 -442.09L527.56 -441.56L528.09 -441.03L530.25 -443.19L529.72 -443.72ZM525.4 -439.4L524.87 -439.93L522.71 -437.77L523.24 -437.24L523.77 -436.71L525.93 -438.87L525.4 -439.4ZM521.08 -435.08L520.55 -435.61L519.47 -434.53L520 -434L520.53 -433.47L521.61 -434.55L521.08 -435.08ZM520 -434L519.25 -434L519.25 -432.5L520 -432.5L520.75 -432.5L520.75 -434L520 -434ZM520 -429.5L519.25 -429.5L519.25 -426.5L520 -426.5L520.75 -426.5L520.75 -429.5L520 -429.5ZM520 -423.5L519.25 -423.5L519.25 -420.5L520 -420.5L520.75 -420.5L520.75 -423.5L520 -423.5ZM520 -417.5L519.25 -417.5L519.25 -414.5L520 -414.5L520.75 -414.5L520.75 -417.5L520 -417.5ZM520 -411.5L519.25 -411.5L519.25 -408.5L520 -408.5L520.75 -408.5L520.75 -411.5L520 -411.5ZM520 -405.5L519.25 -405.5L519.25 -402.5L520 -402.5L520.75 -402.5L520.75 -405.5L520 -405.5ZM520 -399.5L519.25 -399.5L519.25 -396.5L520 -396.5L520.75 -396.5L520.75 -399.5L520 -399.5ZM520 -393.5L519.25 -393.5L519.25 -390.5L520 -390.5L520.75 -390.5L520.75 -393.5L520 -393.5ZM520 -387.5L519.25 -387.5L519.25 -384.5L520 -384.5L520.75 -384.5L520.75 -387.5L520 -387.5ZM520 -381.5L519.25 -381.5L519.25 -378.5L520 -378.5L520.75 -378.5L520.75 -381.5L520 -381.5ZM520 -375.5L519.25 -375.5L519.25 -372.5L520 -372.5L520.75 -372.5L520.75 -375.5L520 -375.5ZM520 -369.5L519.25 -369.5L519.25 -366.5L520 -366.5L520.75 -366.5L520.75 -369.5L520 -369.5ZM520 -363.5L519.25 -363.5L519.25 -360.5L520 -360.5L520.75 -360.5L520.75 -363.5L520 -363.5ZM520 -357.5L519.25 -357.5L519.25 -354.5L520 -354.5L520.75 -354.5L520.75 -357.5L520 -357.5ZM520 -351.5L519.25 -351.5L519.25 -348.5L520 -348.5L520.75 -348.5L520.75 -351.5L520 -351.5ZM520 -345.5L519.25 -345.5L519.25 -342.5L520 -342.5L520.75 -342.5L520.75 -345.5L520 -345.5ZM520 -339.5L519.25 -339.5L519.25 -336.5L520 -336.5L520.75 -336.5L520.75 -339.5L520 -339.5ZM520 -333.5L519.25 -333.5L519.25 -330.5L520 -330.5L520.75 -330.5L520.75 -333.5L520 -333.5ZM520 -327.5L519.25 -327.5L519.25 -324.5L520 -324.5L520.75 -324.5L520.75 -327.5L520 -327.5ZM520 -321.5L519.25 -321.5L519.25 -318.5L520 -318.5L520.75 -318.5L520.75 -321.5L520 -321.5ZM520 -315.5L519.25 -315.5L519.25 -312.5L520 -312.5L520.75 -312.5L520.75 -315.5L520 -315.5ZM520 -309.5L519.25 -309.5L519.25 -306.5L520 -306.5L520.75 -306.5L520.75 -309.5L520 -309.5ZM520 -303.5L519.25 -303.5L519.25 -300.5L520 -300.5L520.75 -300.5L520.75 -303.5L520 -303.5ZM520 -297.5L519.25 -297.5L519.25 -294.5L520 -294.5L520.75 -294.5L520.75 -297.5L520 -297.5ZM520 -291.5L519.25 -291.5L519.25 -288.5L520 -288.5L520.75 -288.5L520.75 -291.5L520 -291.5ZM520 -285.5L519.25 -285.5L519.25 -282.5L520 -282.5L520.75 -282.5L520.75 -285.5L520 -285.5ZM520 -279.5L519.25 -279.5L519.25 -276.5L520 -276.5L520.75 -276.5L520.75 -279.5L520 -279.5ZM520 -273.5L519.25 -273.5L519.25 -270.5L520 -270.5L520.75 -270.5L520.75 -273.5L520 -273.5ZM520 -267.5L519.25 -267.5L519.25 -264.5L520 -264.5L520.75 -264.5L520.75 -267.5L520 -267.5ZM520 -261.5L519.25 -261.5L519.25 -258.5L520 -258.5L520.75 -258.5L520.75 -261.5L520 -261.5ZM520 -255.5L519.25 -255.5L519.25 -252.5L520 -252.5L520.75 -252.5L520.75 -255.5L520 -255.5ZM520 -249.5L519.25 -249.5L519.25 -246.5L520 -246.5L520.75 -246.5L520.75 -249.5L520 -249.5ZM520 -243.5L519.25 -243.5L519.25 -240.5L520 -240.5L520.75 -240.5L520.75 -243.5L520 -243.5ZM520 -237.5L519.25 -237.5L519.25 -234.5L520 -234.5L520.75 -234.5L520.75 -237.5L520 -237.5ZM520 -231.5L519.25 -231.5L519.25 -228.5L520 -228.5L520.75 -228.5L520.75 -231.5L520 -231.5ZM520 -225.5L519.25 -225.5L519.25 -222.5L520 -222.5L520.75 -222.5L520.75 -225.5L520 -225.5ZM520 -219.5L519.25 -219.5L519.25 -216.5L520 -216.5L520.75 -216.5L520.75 -219.5L520 -219.5ZM520 -213.5L519.25 -213.5L519.25 -210.5L520 -210.5L520.75 -210.5L520.75 -213.5L520 -213.5ZM520 -207.5L519.25 -207.5L519.25 -204.5L520 -204.5L520.75 -204.5L520.75 -207.5L520 -207.5ZM520 -201.5L519.25 -201.5L519.25 -198.5L520 -198.5L520.75 -198.5L520.75 -201.5L520 -201.5ZM520 -195.5L519.25 -195.5L519.25 -192.5L520 -192.5L520.75 -192.5L520.75 -195.5L520 -195.5ZM520 -189.5L519.25 -189.5L519.25 -186.5L520 -186.5L520.75 -186.5L520.75 -189.5L520 -189.5ZM520 -183.5L519.25 -183.5L519.25 -180.5L520 -180.5L520.75 -180.5L520.75 -183.5L520 -183.5ZM520 -177.5L519.25 -177.5L519.25 -174.5L520 -174.5L520.75 -174.5L520.75 -177.5L520 -177.5ZM520 -171.5L519.25 -171.5L519.25 -168.5L520 -168.5L520.75 -168.5L520.75 -171.5L520 -171.5ZM520 -165.5L519.25 -165.5L519.25 -162.5L520 -162.5L520.75 -162.5L520.75 -165.5L520 -165.5ZM520 -159.5L519.25 -159.5L519.25 -156.5L520 -156.5L520.75 -156.5L520.75 -159.5L520 -159.5ZM520 -153.5L519.25 -153.5L519.25 -150.5L520 -150.5L520.75 -150.5L520.75 -153.5L520 -153.5ZM520 -147.5L519.25 -147.5L519.25 -144.5L520 -144.5L520.75 -144.5L520.75 -147.5L520 -147.5ZM520 -141.5L519.25 -141.5L519.25 -138.5L520 -138.5L520.75 -138.5L520.75 -141.5L520 -141.5ZM520 -135.5L519.25 -135.5L519.25 -132.5L520 -132.5L520.75 -132.5L520.75 -135.5L520 -135.5ZM520 -129.5L519.25 -129.5L519.25 -126.5L520 -126.5L520.75 -126.5L520.75 -129.5L520 -129.5ZM520 -123.5L519.25 -123.5L519.25 -120.5L520 -120.5L520.75 -120.5L520.75 -123.5L520 -123.5ZM520 -117.5L519.25 -117.5L519.25 -114.5L520 -114.5L520.75 -114.5L520.75 -117.5L520 -117.5ZM520 -111.5L519.25 -111.5L519.25 -108.5L520 -108.5L520.75 -108.5L520.75 -111.5L520 -111.5ZM520 -105.5L519.25 -105.5L519.25 -102.5L520 -102.5L520.75 -102.5L520.75 -105.5L520 -105.5ZM520 -99.4999L519.25 -99.4999L519.25 -96.5L520 -96.5L520.75 -96.5L520.75 -99.4999L520 -99.4999ZM520 -93.5L519.25 -93.5L519.25 -90.4999L520 -90.4999L520.75 -90.4999L520.75 -93.5L520 -93.5ZM520 -87.4999L519.25 -87.4999L519.25 -84.5L520 -84.5L520.75 -84.5L520.75 -87.4999L520 -87.4999ZM520 -81.5L519.25 -81.5L519.25 -78.4999L520 -78.4999L520.75 -78.4999L520.75 -81.5L520 -81.5ZM520 -75.4999L519.25 -75.4999L519.25 -72.5L520 -72.5L520.75 -72.5L520.75 -75.4999L520 -75.4999ZM520 -69.5L519.25 -69.5L519.25 -66.4999L520 -66.4999L520.75 -66.4999L520.75 -69.5L520 -69.5ZM520 -63.4999L519.25 -63.4999L519.25 -60.5L520 -60.5L520.75 -60.5L520.75 -63.4999L520 -63.4999ZM520 -57.5L519.25 -57.5L519.25 -54.4999L520 -54.4999L520.75 -54.4999L520.75 -57.5L520 -57.5ZM520 -51.4999L519.25 -51.4999L519.25 -48.5L520 -48.5L520.75 -48.5L520.75 -51.4999L520 -51.4999ZM520 -45.4999L519.25 -45.4999L519.25 -42.4999L520 -42.4999L520.75 -42.4999L520.75 -45.4999L520 -45.4999ZM520 -39.4999L519.25 -39.4999L519.25 -36.5L520 -36.5L520.75 -36.5L520.75 -39.4999L520 -39.4999ZM520 -33.4999L519.25 -33.4999L519.25 -30.4999L520 -30.4999L520.75 -30.4999L520.75 -33.4999L520 -33.4999ZM520 -27.4999L519.25 -27.4999L519.25 -24.5L520 -24.5L520.75 -24.5L520.75 -27.4999L520 -27.4999ZM520 -21.4999L519.25 -21.4999L519.25 -18.4999L520 -18.4999L520.75 -18.4999L520.75 -21.4999L520 -21.4999ZM520 -15.4999L519.25 -15.4999L519.25 -12.5L520 -12.5L520.75 -12.5L520.75 -15.4999L520 -15.4999ZM520 -9.49993L519.25 -9.49993L519.25 -6.49994L520 -6.49994L520.75 -6.49994L520.75 -9.49993L520 -9.49993ZM520 -3.49995L519.25 -3.49995L519.25 -0.49996L520 -0.49996L520.75 -0.49996L520.75 -3.49995L520 -3.49995ZM520 2.50007L519.25 2.50007L519.25 5.50006L520 5.50006L520.75 5.50006L520.75 2.50007L520 2.50007ZM520 8.50005L519.25 8.50005L519.25 11.5L520 11.5L520.75 11.5L520.75 8.50005L520 8.50005ZM520 14.5001L519.25 14.5001L519.25 17.5001L520 17.5001L520.75 17.5001L520.75 14.5001L520 14.5001ZM520 20.5L519.25 20.5L519.25 23.5L520 23.5L520.75 23.5L520.75 20.5L520 20.5ZM520 26.5001L519.25 26.5001L519.25 29.5001L520 29.5001L520.75 29.5001L520.75 26.5001L520 26.5001ZM520 32.5L519.25 32.5L519.25 35.5L520 35.5L520.75 35.5L520.75 32.5L520 32.5ZM520 38.5001L519.25 38.5001L519.25 41.5001L520 41.5001L520.75 41.5001L520.75 38.5001L520 38.5001ZM520 44.5L519.25 44.5L519.25 47.5L520 47.5L520.75 47.5L520.75 44.5L520 44.5ZM520 50.5001L519.25 50.5001L519.25 53.5001L520 53.5001L520.75 53.5001L520.75 50.5001L520 50.5001ZM520 56.5L519.25 56.5L519.25 59.5L520 59.5L520.75 59.5L520.75 56.5L520 56.5ZM520 62.5001L519.25 62.5001L519.25 65.5001L520 65.5001L520.75 65.5001L520.75 62.5001L520 62.5001ZM520 68.5L519.25 68.5L519.25 71.5L520 71.5L520.75 71.5L520.75 68.5L520 68.5ZM520 74.5001L519.25 74.5001L519.25 77.5001L520 77.5001L520.75 77.5001L520.75 74.5001L520 74.5001ZM520 80.5L519.25 80.5L519.25 83.5L520 83.5L520.75 83.5L520.75 80.5L520 80.5ZM520 86.5001L519.25 86.5001L519.25 89.5001L520 89.5001L520.75 89.5001L520.75 86.5001L520 86.5001ZM520 92.5L519.25 92.5L519.25 95.5L520 95.5L520.75 95.5L520.75 92.5L520 92.5ZM520 98.5001L519.25 98.5001L519.25 101.5L520 101.5L520.75 101.5L520.75 98.5001L520 98.5001ZM520 104.5L519.25 104.5L519.25 107.5L520 107.5L520.75 107.5L520.75 104.5L520 104.5ZM520 110.5L519.25 110.5L519.25 113.5L520 113.5L520.75 113.5L520.75 110.5L520 110.5ZM520 116.5L519.25 116.5L519.25 119.5L520 119.5L520.75 119.5L520.75 116.5L520 116.5ZM520 122.5L519.25 122.5L519.25 125.5L520 125.5L520.75 125.5L520.75 122.5L520 122.5ZM520 128.5L519.25 128.5L519.25 131.5L520 131.5L520.75 131.5L520.75 128.5L520 128.5ZM520 134.5L519.25 134.5L519.25 137.5L520 137.5L520.75 137.5L520.75 134.5L520 134.5ZM520 140.5L519.25 140.5L519.25 143.5L520 143.5L520.75 143.5L520.75 140.5L520 140.5ZM520 146.5L519.25 146.5L519.25 149.5L520 149.5L520.75 149.5L520.75 146.5L520 146.5ZM520 152.5L519.25 152.5L519.25 155.5L520 155.5L520.75 155.5L520.75 152.5L520 152.5ZM520 158.5L519.25 158.5L519.25 161.5L520 161.5L520.75 161.5L520.75 158.5L520 158.5ZM520 164.5L519.25 164.5L519.25 167.5L520 167.5L520.75 167.5L520.75 164.5L520 164.5ZM520 170.5L519.25 170.5L519.25 173.5L520 173.5L520.75 173.5L520.75 170.5L520 170.5ZM520 176.5L519.25 176.5L519.25 178L520 178L520.75 178L520.75 176.5L520 176.5ZM520 178L519.47 178.53L520.522 179.583L521.053 179.053L521.583 178.522L520.53 177.47L520 178ZM523.158 181.158L522.628 181.688L524.733 183.794L525.263 183.263L525.793 182.733L523.688 180.628L523.158 181.158ZM527.368 185.368L526.838 185.899L528.943 188.004L529.474 187.474L530.004 186.943L527.899 184.838L527.368 185.368ZM531.579 189.579L531.049 190.109L533.154 192.215L533.684 191.684L534.215 191.154L532.109 189.049L531.579 189.579ZM535.789 193.79L535.259 194.32L537.364 196.425L537.895 195.895L538.425 195.364L536.32 193.259L535.789 193.79ZM540 198L539.47 198.53L541.575 200.636L542.105 200.105L542.636 199.575L540.53 197.47L540 198ZM544.211 202.211L543.68 202.741L545.785 204.846L546.316 204.316L546.846 203.786L544.741 201.68L544.211 202.211ZM548.421 206.421L547.891 206.951L549.996 209.057L550.526 208.526L551.057 207.996L548.951 205.891L548.421 206.421ZM552.632 210.632L552.101 211.162L554.206 213.267L554.737 212.737L555.267 212.207L553.162 210.101L552.632 210.632ZM556.842 214.842L556.312 215.372L558.417 217.478L558.947 216.947L559.478 216.417L557.372 214.312L556.842 214.842ZM561.053 219.053L560.522 219.583L562.628 221.688L563.158 221.158L563.688 220.628L561.583 218.522L561.053 219.053ZM565.263 223.263L564.733 223.794L566.838 225.899L567.368 225.368L567.899 224.838L565.793 222.733L565.263 223.263ZM569.474 227.474L568.943 228.004L571.049 230.109L571.579 229.579L572.109 229.049L570.004 226.943L569.474 227.474ZM573.684 231.684L573.154 232.215L575.259 234.32L575.789 233.79L576.32 233.259L574.215 231.154L573.684 231.684ZM577.895 235.895L577.364 236.425L579.47 238.53L580 238L580.53 237.47L578.425 235.364L577.895 235.895ZM582.105 240.105L581.575 240.636L583.68 242.741L584.211 242.211L584.741 241.68L582.636 239.575L582.105 240.105ZM586.316 244.316L585.785 244.846L587.891 246.951L588.421 246.421L588.951 245.891L586.846 243.786L586.316 244.316ZM590.526 248.526L589.996 249.057L592.101 251.162L592.632 250.632L593.162 250.101L591.057 247.996L590.526 248.526ZM594.737 252.737L594.207 253.267L596.312 255.373L596.842 254.842L597.372 254.312L595.267 252.207L594.737 252.737ZM598.947 256.947L598.417 257.478L600.522 259.583L601.053 259.053L601.583 258.522L599.478 256.417L598.947 256.947ZM603.158 261.158L602.628 261.688L604.733 263.794L605.263 263.263L605.794 262.733L603.688 260.628L603.158 261.158ZM607.368 265.369L606.838 265.899L608.943 268.004L609.474 267.474L610.004 266.943L607.899 264.838L607.368 265.369ZM611.579 269.579L611.049 270.109L613.154 272.215L613.684 271.684L614.215 271.154L612.109 269.049L611.579 269.579ZM615.79 273.79L615.259 274.32L617.364 276.425L617.895 275.895L618.425 275.364L616.32 273.259L615.79 273.79ZM620 278L619.47 278.53L621.575 280.636L622.105 280.105L622.636 279.575L620.53 277.47L620 278ZM624.211 282.211L623.68 282.741L625.786 284.846L626.316 284.316L626.846 283.786L624.741 281.68L624.211 282.211ZM628.421 286.421L627.891 286.951L629.996 289.057L630.526 288.526L631.057 287.996L628.951 285.891L628.421 286.421ZM632.632 290.632L632.101 291.162L634.207 293.267L634.737 292.737L635.267 292.207L633.162 290.101L632.632 290.632ZM636.842 294.842L636.312 295.373L638.417 297.478L638.947 296.947L639.478 296.417L637.372 294.312L636.842 294.842ZM641.053 299.053L640.522 299.583L642.628 301.688L643.158 301.158L643.688 300.628L641.583 298.522L641.053 299.053ZM645.263 303.263L644.733 303.794L646.838 305.899L647.368 305.369L647.899 304.838L645.794 302.733L645.263 303.263ZM649.474 307.474L648.943 308.004L651.049 310.109L651.579 309.579L652.109 309.049L650.004 306.943L649.474 307.474ZM653.684 311.684L653.154 312.215L655.259 314.32L655.79 313.79L656.32 313.259L654.215 311.154L653.684 311.684ZM657.895 315.895L657.364 316.425L659.47 318.53L660 318L660.53 317.47L658.425 315.365L657.895 315.895ZM662.105 320.105L661.575 320.636L663.68 322.741L664.211 322.211L664.741 321.68L662.636 319.575L662.105 320.105ZM666.316 324.316L665.786 324.846L667.891 326.952L668.421 326.421L668.951 325.891L666.846 323.786L666.316 324.316ZM670.526 328.526L669.996 329.057L672.101 331.162L672.632 330.632L673.162 330.101L671.057 327.996L670.526 328.526ZM674.737 332.737L674.207 333.267L676.312 335.373L676.842 334.842L677.373 334.312L675.267 332.207L674.737 332.737ZM678.947 336.948L678.417 337.478L680.522 339.583L681.053 339.053L681.583 338.522L679.478 336.417L678.947 336.948ZM683.158 341.158L682.628 341.688L684.733 343.794L685.263 343.263L685.794 342.733L683.688 340.628L683.158 341.158ZM687.369 345.369L686.838 345.899L688.943 348.004L689.474 347.474L690.004 346.944L687.899 344.838L687.369 345.369ZM691.579 349.579L691.049 350.109L693.154 352.215L693.684 351.684L694.215 351.154L692.109 349.049L691.579 349.579ZM695.79 353.79L695.259 354.32L697.365 356.425L697.895 355.895L698.425 355.365L696.32 353.259L695.79 353.79ZM700 358L699.47 358.531L701.575 360.636L702.105 360.105L702.636 359.575L700.53 357.47L700 358ZM704.211 362.211L703.68 362.741L705.786 364.846L706.316 364.316L706.846 363.786L704.741 361.68L704.211 362.211ZM708.421 366.421L707.891 366.952L709.996 369.057L710.526 368.526L711.057 367.996L708.952 365.891L708.421 366.421ZM712.632 370.632L712.101 371.162L714.207 373.267L714.737 372.737L715.267 372.207L713.162 370.101L712.632 370.632ZM716.842 374.842L716.312 375.373L718.417 377.478L718.948 376.948L719.478 376.417L717.373 374.312L716.842 374.842ZM721.053 379.053L720.522 379.583L722.628 381.688L723.158 381.158L723.688 380.628L721.583 378.522L721.053 379.053ZM725.263 383.263L724.733 383.794L726.838 385.899L727.369 385.369L727.899 384.838L725.794 382.733L725.263 383.263ZM729.474 387.474L728.944 388.004L731.049 390.109L731.579 389.579L732.109 389.049L730.004 386.944L729.474 387.474ZM733.684 391.684L733.154 392.215L735.259 394.32L735.79 393.79L736.32 393.259L734.215 391.154L733.684 391.684ZM737.895 395.895L737.365 396.425L739.47 398.531L740 398L740.531 397.47L738.425 395.365L737.895 395.895ZM742.105 400.105L741.575 400.636L743.68 402.741L744.211 402.211L744.741 401.68L742.636 399.575L742.105 400.105ZM746.316 404.316L745.786 404.846L747.891 406.952L748.421 406.421L748.952 405.891L746.846 403.786L746.316 404.316ZM750.526 408.527L749.996 409.057L752.101 411.162L752.632 410.632L753.162 410.101L751.057 407.996L750.526 408.527ZM754.737 412.737L754.207 413.267L756.312 415.373L756.842 414.842L757.373 414.312L755.267 412.207L754.737 412.737ZM758.948 416.948L758.417 417.478L759.47 418.53L760 418L760.53 417.47L759.478 416.417L758.948 416.948Z"
-        fill="#B7D2FF"
-      />
-      <defs>
-        <clipPath id="clip0">
-          <rect width="1600" height="518" fill="white" />
-        </clipPath>
-        <clipPath id="clip1">
-          <rect width="1600" height="518" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  </div>
-);
+type HeroProps = Partial<Hero>;
 
 export function HomepageHero({
   title = 'This is the Hero Title',
@@ -74,33 +19,39 @@ export function HomepageHero({
   const hasHTML = /<[^>]+>/.test(title);
 
   return (
-    <Flex direction="column" align="start" className={styles.root}>
-      <HeroBackground />
-      <Container className={styles.container}>
-        <Flex direction="column" align="start" justify="center" className={styles.content}>
-          {hasHTML ? (
-            <h2 className={styles.title} dangerouslySetInnerHTML={{ __html: title }} />
-          ) : (
-            <h2 className={styles.title}>{title}</h2>
-          )}
-          <p className={cx(styles.description, 'headlineS')}>{description}</p>
-          {buttons.length > 0 && (
-            <div className={styles.buttonContainer}>
-              {buttons.map((button) => (
-                <Button
-                  key={button.label}
-                  href={button.href}
-                  icon={button.icon}
-                  size="medium"
-                  width="full"
-                  className={styles.button}>
-                  {button.label}
-                </Button>
-              ))}
-            </div>
-          )}
+    <div className={styles.wrapper}>
+      <BackgroundGrid className={styles.backgroundGrid}>
+        <Flex direction="column" align="center" className={styles.root}>
+          <Container className={styles.container}>
+            <Flex direction="column" align="center" justify="center" className={styles.content}>
+              {hasHTML ? (
+                <h2 className={styles.title} dangerouslySetInnerHTML={{ __html: title }} />
+              ) : (
+                <h2 className={styles.title}>{title}</h2>
+              )}
+              <p className={cx(styles.description, 'headlineS')}>{description}</p>
+              {buttons.length > 0 && (
+                <div className={styles.buttonContainer}>
+                  {buttons.map((button) => (
+                    <Button
+                      key={button.href}
+                      href={button.href}
+                      icon={button.icon}
+                      variant="secondary"
+                      colorScheme="light"
+                      className={styles.button}>
+                      {button.label}
+                    </Button>
+                  ))}
+                </div>
+              )}
+              <div className={styles.search}>
+                <SearchDialog triggerTheme="dark" dialogTheme="light" enableKeyboardShortcut={false} />
+              </div>
+            </Flex>
+          </Container>
         </Flex>
-      </Container>
-    </Flex>
+      </BackgroundGrid>
+    </div>
   );
 }
diff --git a/src/components/Illustrations/Grid.tsx b/src/components/Illustrations/Grid.tsx
new file mode 100644
index 00000000..f61a785f
--- /dev/null
+++ b/src/components/Illustrations/Grid.tsx
@@ -0,0 +1,24 @@
+import { useId } from 'react';
+
+const Grid = () => {
+  const id = useId();
+
+  return (
+    <svg width="100%" height="518" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <pattern id={id} width={40} height={40} patternUnits="userSpaceOnUse">
+          <g
+            stroke={'var(--grid-color, var(--color-grid-line-default))'}
+            strokeWidth={1.5}
+            strokeDasharray="3 3">
+            <line x1={0} y1={0} x2={0} y2={40} />
+            <line x1={0} y1={0} x2={40} y2={0} />
+          </g>
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${id})`} />
+    </svg>
+  );
+};
+
+export { Grid };
diff --git a/src/components/Navbar/Navbar.module.css b/src/components/Navbar/Navbar.module.css
index d428a9df..e0c72eee 100644
--- a/src/components/Navbar/Navbar.module.css
+++ b/src/components/Navbar/Navbar.module.css
@@ -3,44 +3,105 @@
   color: var(--base-color-white);
   width: 100%;
   position: sticky;
-  top: var(--banner-height, 0);
+  top: var(--navbar-banner-height, 0);
   z-index: var(--layer-navigation);
 }
 
-.container {
-  padding-inline: var(--space-m);
+:global(body.has-sidenav-toggle) .root {
+  border-bottom: 1px solid var(--brand-color-grey-8);
 }
 
-.isHome .container {
+.container {
   padding-inline: var(--space-m);
 }
 
 .top {
-  height: var(--navbar-top-height);
   display: flex;
+  min-height: var(--navbar-top-height);
   justify-content: space-between;
   align-items: center;
+  gap: var(--space-s);
+}
+
+.topSecondary {
+  display: grid;
+  min-height: var(--navbar-top-height);
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas: 'left right';
+  align-items: center;
+  gap: var(--space-xs) var(--space-s);
+  padding-block: var(--space-xs);
 }
 
-.left,
-.right {
+.topStart,
+.topEnd {
   display: flex;
   align-items: center;
   gap: var(--space-xs);
+  min-width: 0;
+}
+
+.topStart {
+  flex: 1;
+  justify-content: flex-start;
+}
+
+.topEnd {
+  flex: 1;
+  justify-content: flex-end;
+}
+
+.topSecondaryStart {
+  grid-area: left;
+}
+
+.topSecondarySearch {
+  display: none;
+  @media (--phablet-up) {
+    grid-area: search;
+    min-width: 0;
+  }
+}
+
+.topSecondaryEnd {
+  grid-area: right;
+}
+
+.search {
+  flex: 0 1 320px;
+  width: 100%;
+  max-width: 320px;
+  min-width: 0;
 }
 
-.nav {
+.secondaryNavRow {
   display: none;
+}
+
+.nav,
+.secondaryNav {
+  display: none;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
   gap: var(--space-m);
-  height: var(--navbar-bottom-height);
+  min-width: 0;
+}
+
+.secondaryNav {
+  justify-content: flex-start;
 }
 
 .logo {
+  display: inline-flex;
+  align-items: center;
   color: var(--base-color-white);
 }
 
 .logoSymbol {
-  min-width: 20px;
+  width: 25px;
+  height: 25px;
+  min-width: 25px;
 }
 
 .logoWordmark {
@@ -53,12 +114,33 @@
   display: flex;
   align-items: center;
   gap: var(--space-2xs);
+  margin-left: var(--space-3xs);
+  padding-left: var(--space-s);
+  position: relative;
+  min-height: 20px;
 }
 
-.navContainer {
-  margin-left: auto;
+.currentSection > span {
+  display: inline-flex;
   align-items: center;
-  gap: var(--space-xs);
+  line-height: 1.2;
+  position: relative;
+  top: 1px;
+}
+
+.currentSection::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1px;
+  height: 1.25em;
+  background-color: var(--base-color-grey-700);
+}
+
+.currentSectionIcon {
+  display: none;
 }
 
 .navLink {
@@ -68,61 +150,43 @@
   align-items: center;
   gap: var(--space-3xs);
   padding: var(--space-s) 0;
+  font-family: var(--font-family-headline);
+}
+
+.navLinkIcon {
+  display: none;
 }
 
 .navLink:hover,
 .navLinkActive {
-  color: var(--base-color-white);
   box-shadow: inset 0 -4px 0 var(--brand-color-yellow-4);
 }
 
 .menuButton {
   display: flex;
   cursor: pointer;
-  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--brand-color-grey-8);
+  border: none;
+  color: var(--base-color-white);
   height: 38px;
   width: 38px;
   border-radius: var(--border-radius-s);
-}
 
-.menuIcon {
-  opacity: 0.6;
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
 }
 
-.openCloudsmith {
+.bookDemo,
+.login {
   display: none;
-  color: var(--brand-color-white);
-  background-color: var(--base-color-grey-1000);
-  border-radius: var(--border-radius-s);
-  border: 1px solid var(--brand-color-grey-8);
-  padding: var(--space-2xs) var(--space-s);
 }
 
-.openCloudsmith:hover {
-  background-color: var(--base-color-grey-900);
-}
-
-.openCloudsmith.light {
-  background-color: var(--base-color-white);
-  color: var(--brand-color-grey-8);
-  border: 1px solid var(--brand-color-grey-3);
-}
-
-.openCloudsmith.light:hover {
-  background-color: var(--base-color-grey-100);
-}
-
-.menuButton.light {
-  background-color: var(--base-color-white);
-  color: var(--base-color-grey-900);
-  border: 1px solid var(--brand-color-grey-3);
-}
-
-.menuButton.light:hover {
-  background-color: var(--base-color-grey-100);
+.mobileSearch {
+  display: inline-flex;
 }
 
 .isHome {
@@ -133,13 +197,8 @@
     position: absolute;
   }
 
-  .container {
-    flex-direction: row;
-    justify-content: space-between;
-  }
-
   .logo {
-    color: var(--color-text-primary);
+    color: var(--base-color-white);
   }
 
   .logoWordmark {
@@ -155,74 +214,117 @@
 .mobileBackground {
   position: fixed;
   z-index: var(--layer-navigation-mobile-bg);
-  inset: 0;
+  top: calc(var(--navbar-banner-height) + var(--navbar-top-height) + var(--navbar-border-height));
+  right: 0;
+  bottom: 0;
+  left: 0;
   background-color: var(--base-color-grey-1000);
 }
 
 .mobileNavbar {
   position: fixed;
   z-index: var(--layer-navigation-mobile);
-  inset: 0 0 0 var(--space-2xl);
+  top: calc(var(--navbar-banner-height) + var(--navbar-top-height) + var(--navbar-border-height));
+  right: 0;
+  bottom: 0;
+  left: 0;
   background-color: var(--base-color-grey-1000);
   display: flex;
   flex-direction: column;
-}
-
-.closeButton {
-  margin-block: var(--space-m);
-  margin-inline: auto var(--space-xs);
-  padding: var(--space-xs);
-  cursor: pointer;
-}
-
-.closeIcon {
-  color: var(--base-color-white);
+  overflow-y: auto;
 }
 
 .mobileNav {
+  --mobile-nav-icon-size: 16px;
+  --mobile-nav-toggle-size: 38px;
+
   display: flex;
   flex-direction: column;
   color: var(--base-color-white);
   list-style: none;
-  margin-inline: var(--space-l);
-  margin-block-end: var(--space-l);
+  margin: var(--space-m);
   padding: 0;
 }
 
+.mobileNavItem {
+  padding-inline-end: calc((var(--mobile-nav-toggle-size) - var(--mobile-nav-icon-size)) / 2);
+}
+
 .mobileNavLink {
   display: flex;
   align-items: center;
   gap: var(--space-3xs);
+  width: 100%;
   padding-block: var(--space-xs);
   text-decoration: none;
   color: var(--base-color-white);
 }
 
-.mobileNavIcon {
+.mobileNavLinkIcon {
+  margin-left: auto;
   flex-shrink: 0;
+  display: block;
 }
 
-@media (--phablet-up) {
+@media (--laptop-up) {
   .root {
     padding-bottom: 0;
   }
 
+  :global(body.has-sidenav-toggle) .root {
+    border-bottom: none;
+  }
+
   .container {
-    flex-direction: column;
-    align-items: flex-start;
     padding-block: 0;
   }
 
   .nav {
     display: flex;
+    flex: 2;
+  }
+
+  .topSecondary {
+    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px) minmax(0, 1fr);
+    grid-template-areas: 'left search right';
+    min-height: var(--navbar-top-height);
+    gap: var(--space-l);
+    padding-block: 0;
+  }
+
+  .topSecondarySearch {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .secondaryNavRow {
+    display: flex;
+    min-height: 44px;
+    align-items: center;
   }
 
-  .isHome .nav {
+  .currentSection {
+    margin-left: 0;
+    padding-left: 0;
+    position: static;
+  }
+
+  .currentSection::before {
     display: none;
   }
 
+  .currentSectionIcon {
+    display: inline-flex;
+  }
+
+  .secondaryNav {
+    display: flex;
+  }
+
   .currentSection,
   .menuButton,
+  .mobileSearch,
   .logoSymbol,
   .mobileBackground,
   .mobileNavbar {
@@ -233,11 +335,18 @@
     display: block;
   }
 
-  .openCloudsmith {
-    display: block;
+  .login,
+  .bookDemo {
+    display: inline-flex;
   }
 
   .menuIcon {
     opacity: 1;
   }
 }
+
+@media (--tablet-up) {
+  .navLinkIcon {
+    display: block;
+  }
+}
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 006e3c50..21a9467d 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import { useEffect } from 'react';
+
 import { cx } from 'class-variance-authority';
 import { AnimatePresence } from 'motion/react';
 import * as motion from 'motion/react-client';
@@ -7,18 +9,26 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
 import { useNavigation } from '@/app/navigation';
-import { Container } from '@/components';
+import { Button, Container } from '@/components';
 import { LogoSymbol, LogoWordMark } from '@/components/Logo';
-import { getActiveMenuItem, getMenuItems } from '@/lib/menu/util';
 import { SearchDialog } from '@/components/SearchDialog';
 import { Icon } from '@/icons';
-
+import { getActiveMenuItem, getMenuItems } from '@/lib/menu/util';
+import { isExternalHref } from '@/util/url';
 
 import styles from './Navbar.module.css';
 
 export const Navbar = () => {
   const pathname = usePathname();
   const { navigationState, toggleNavigation } = useNavigation();
+  const isGlobalNavOpen = navigationState === 'globalNav';
+
+  useEffect(() => {
+    document.body.style.overflow = isGlobalNavOpen ? 'hidden' : '';
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isGlobalNavOpen]);
 
   const [documentationItem, guidesItem, apiItem, mobileNavbarItem] = getMenuItems([
     'documentation',
@@ -28,64 +38,176 @@ export const Navbar = () => {
   ]);
 
   const primary = [documentationItem, guidesItem, apiItem];
-  const secondary = mobileNavbarItem.children;
-
+  const secondary = mobileNavbarItem.children ?? [];
+  const homeIndex = secondary.findIndex((item) => item.title === 'Home');
+  const blogIndex = secondary.findIndex((item) => item.title === 'Blog');
+  const orderedMobileItems =
+    homeIndex !== -1 && blogIndex !== -1 && blogIndex > homeIndex
+      ? [
+          ...secondary.slice(0, homeIndex + 1),
+          ...primary,
+          ...secondary.slice(homeIndex + 1, blogIndex),
+          ...secondary.slice(blogIndex),
+        ]
+      : [...primary, ...secondary];
   const activeMenuItem = getActiveMenuItem(pathname);
-
+  const isHome = pathname === '/';
   const toggle = () => toggleNavigation('globalNav');
+  const primaryNav = (
+    <>
+      {primary?.map((item, i) => (
+        <Link
+          key={`${item.path}-${i}`}
+          href={item.path!}
+          className={cx(
+            styles.navLink,
+            { [styles.navLinkActive]: !isHome && activeMenuItem === item },
+            'bodyM',
+          )}>
+          <Icon
+            name={item.icon!}
+            className={styles.navLinkIcon}
+            aria-hidden="true"
+            focusable="false"
+            title=""
+          />
+          {item.title}
+        </Link>
+      ))}
+    </>
+  );
 
   return (
     <>
-      <div className={cx(styles.root, { [styles.isHome]: pathname === '/' })}>
+      <div className={cx(styles.root, { [styles.isHome]: isHome })}>
+        <Container className={styles.container}>
+          {isHome ? (
+            <div className={styles.top}>
+              <div className={styles.topStart}>
+                <Link href="/" className={styles.logo}>
+                  <LogoWordMark className={styles.logoWordmark} />
+                  <LogoSymbol className={styles.logoSymbol} />
+                </Link>
 
-        
+                {activeMenuItem ? (
+                  <span className={styles.currentSection}>
+                    {activeMenuItem.icon && (
+                      <Icon name={activeMenuItem.icon} title="" className={styles.currentSectionIcon} />
+                    )}
+                    <span>{activeMenuItem.title}</span>
+                  </span>
+                ) : null}
+              </div>
 
-        <Container className={styles.container}>
-          <div className={styles.top}>
-            <div className={styles.left}>
-              <Link href="/" className={styles.logo}>
-                <LogoWordMark className={styles.logoWordmark} />
-                <LogoSymbol className={styles.logoSymbol} />
-              </Link>
-
-              {activeMenuItem ? (
-                <span className={styles.currentSection}>
-                  {activeMenuItem.icon && <Icon name={activeMenuItem.icon} title="" />}
-                  <span>{activeMenuItem.title}</span>
-                </span>
-              ) : null}
-            </div>
+              <nav className={styles.nav}>{primaryNav}</nav>
+
+              <div className={styles.topEnd}>
+                <SearchDialog
+                  className={styles.mobileSearch}
+                  triggerTheme="dark"
+                  dialogTheme="light"
+                  triggerVariant="compact"
+                  enableKeyboardShortcut
+                />
 
-            <div className={styles.right}>
-              <SearchDialog />
-              <Link
-                href="https://app.cloudsmith.com/login"
-                target={'_blank'}
-                className={cx(styles.openCloudsmith, 'bodyS', pathname === '/' && styles.light)}
-                aria-label="Open Cloudsmith">
-                Open Cloudsmith
-              </Link>
-
-              <button
-                type="button"
-                className={cx(styles.menuButton, pathname === '/' && styles.light)}
-                aria-label="Menu"
-                onClick={toggle}>
-                <Icon name="menu" title="" className={styles.menuIcon} />
-              </button>
+                <Button href="https://cloudsmith.com/contact/" isExternalLink className={styles.bookDemo}>
+                  Book a demo
+                </Button>
+                <Button
+                  href="https://app.cloudsmith.com/login"
+                  isExternalLink
+                  variant="secondary"
+                  className={styles.login}
+                  aria-label="Login">
+                  Login
+                </Button>
+
+                <button
+                  type="button"
+                  className={cx(styles.menuButton, styles.light)}
+                  aria-label={isGlobalNavOpen ? 'Close menu' : 'Open menu'}
+                  onClick={toggle}>
+                  <Icon
+                    name={isGlobalNavOpen ? 'action/close' : 'menu'}
+                    title=""
+                    className={styles.menuIcon}
+                  />
+                </button>
+              </div>
             </div>
-          </div>
-          <nav className={styles.nav}>
-            {primary?.map((item, i) => (
-              <Link
-                key={`${item.path}-${i}`}
-                href={item.path!}
-                className={cx(styles.navLink, { [styles.navLinkActive]: activeMenuItem === item }, 'bodyM')}>
-                <Icon name={item.icon!} aria-hidden="true" focusable="false" title="" />
-                {item.title}
-              </Link>
-            ))}
-          </nav>
+          ) : (
+            <>
+              <div className={styles.topSecondary}>
+                <div className={cx(styles.topStart, styles.topSecondaryStart)}>
+                  <Link href="/" className={styles.logo}>
+                    <LogoWordMark className={styles.logoWordmark} />
+                    <LogoSymbol className={styles.logoSymbol} />
+                  </Link>
+
+                  {activeMenuItem ? (
+                    <span className={styles.currentSection}>
+                      {activeMenuItem.icon && (
+                        <Icon name={activeMenuItem.icon} title="" className={styles.currentSectionIcon} />
+                      )}
+                      <span>{activeMenuItem.title}</span>
+                    </span>
+                  ) : null}
+                </div>
+
+                <div className={styles.topSecondarySearch}>
+                  <SearchDialog
+                    className={styles.search}
+                    triggerTheme="dark"
+                    dialogTheme="light"
+                    enableKeyboardShortcut={false}
+                  />
+                </div>
+
+                <div className={cx(styles.topEnd, styles.topSecondaryEnd)}>
+                  <SearchDialog
+                    className={styles.mobileSearch}
+                    triggerTheme="dark"
+                    dialogTheme="light"
+                    triggerVariant="compact"
+                    enableKeyboardShortcut
+                  />
+
+                  <Button
+                    href="https://cloudsmith.com/contact/"
+                    isExternalLink
+                    size="small"
+                    className={styles.bookDemo}>
+                    Book a demo
+                  </Button>
+                  <Button
+                    href="https://app.cloudsmith.com/login"
+                    isExternalLink
+                    variant="secondary"
+                    size="small"
+                    className={styles.login}
+                    aria-label="Login">
+                    Login
+                  </Button>
+
+                  <button
+                    type="button"
+                    className={styles.menuButton}
+                    aria-label={isGlobalNavOpen ? 'Close menu' : 'Open menu'}
+                    onClick={toggle}>
+                    <Icon
+                      name={isGlobalNavOpen ? 'action/close' : 'menu'}
+                      title=""
+                      className={styles.menuIcon}
+                    />
+                  </button>
+                </div>
+              </div>
+
+              <div className={styles.secondaryNavRow}>
+                <nav className={styles.secondaryNav}>{primaryNav}</nav>
+              </div>
+            </>
+          )}
         </Container>
       </div>
 
@@ -107,34 +229,26 @@ export const Navbar = () => {
             <motion.nav
               key="mobileNavbar"
               className={styles.mobileNavbar}
-              initial={{ translateX: '50%', opacity: 0 }}
+              initial={{ translateX: '8%', opacity: 0 }}
               animate={{ translateX: '0%', opacity: 1 }}
-              exit={{ translateX: '50%', opacity: 0 }}
+              exit={{ translateX: '8%', opacity: 0 }}
               transition={{ duration: 0.2, ease: 'easeInOut' }}>
-              <button className={styles.closeButton} onClick={toggle}>
-                <Icon name="action/close" title="" className={styles.closeIcon} />
-              </button>
-
-              {[primary, secondary].map((items, index) => (
-                <ul key={index} className={styles.mobileNav}>
-                  {items?.map((item, i) => (
-                    <li key={`${item.path}-${i}`}>
-                      <Link href={item.path!} className={styles.mobileNavLink}>
-                        {item.icon && (
-                          <Icon
-                            name={item.icon}
-                            className={styles.mobileNavIcon}
-                            aria-hidden="true"
-                            focusable="false"
-                            title=""
-                          />
-                        )}
-                        {item.title}
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
-              ))}
+              <ul className={styles.mobileNav}>
+                {orderedMobileItems.map((item, i) => (
+                  <li key={`${item.path}-${i}`} className={styles.mobileNavItem}>
+                    <Link href={item.path!} className={styles.mobileNavLink}>
+                      {item.title}
+                      <Icon
+                        name={isExternalHref(item.path) ? 'external' : 'arrowRight'}
+                        className={styles.mobileNavLinkIcon}
+                        aria-hidden="true"
+                        focusable="false"
+                        title=""
+                      />
+                    </Link>
+                  </li>
+                ))}
+              </ul>
             </motion.nav>
           </>
         ) : null}
diff --git a/src/components/QuickNav/QuickNav.tsx b/src/components/QuickNav/QuickNav.tsx
index b8c71154..cc0c0c07 100644
--- a/src/components/QuickNav/QuickNav.tsx
+++ b/src/components/QuickNav/QuickNav.tsx
@@ -1,20 +1,55 @@
 'use client';
 
-import { quickNavContentId } from '@/lib/constants/quickNav';
 import { useEffect, useState } from 'react';
+
+import { cx } from 'class-variance-authority';
+import { usePathname } from 'next/navigation';
+
+import { quickNavContentSelector } from '@/lib/constants/quickNav';
+
 import styles from './QuickNav.module.css';
 import { useHeadingsObserver } from './useHeadingsObserver';
-import { cx } from 'class-variance-authority';
 
 const headingsToObserve = ':scope > :is(h2, h3, h4, h5, h6):not([data-quick-nav-ignore])';
 
+export const scrollToHashTarget = (hash = window.location.hash) => {
+  const normalizedHash = hash.replace(/^#/, '');
+  if (!normalizedHash) return false;
+
+  const targetId = decodeURIComponent(normalizedHash);
+  const target = document.getElementById(targetId);
+  if (!target) return false;
+
+  target.scrollIntoView({ block: 'start' });
+  return true;
+};
+
 export const QuickNav = () => {
+  const pathname = usePathname();
   const [headings, setHeadings] = useState<Array<HeadingList>>([]);
-  const activeHeadline = useHeadingsObserver(quickNavContentId, headingsToObserve, '-5% 0px -50% 0px', 1);
+  const activeHeadline = useHeadingsObserver(
+    quickNavContentSelector,
+    headingsToObserve,
+    '-5% 0px -50% 0px',
+    1,
+  );
+
+  useEffect(() => {
+    if (!headings.length) return;
+
+    const queueHashScroll = () => window.requestAnimationFrame(() => scrollToHashTarget());
+
+    queueHashScroll();
+    window.addEventListener('hashchange', queueHashScroll);
+
+    return () => {
+      window.removeEventListener('hashchange', queueHashScroll);
+    };
+  }, [headings.length, pathname]);
 
   useEffect(() => {
-    const contentArea = document.getElementById(quickNavContentId);
-    if (!contentArea) return;
+    const contentArea = document.querySelector(quickNavContentSelector);
+    if (!(contentArea instanceof HTMLElement)) return;
 
     // Get all headings
     const headingElements = contentArea.querySelectorAll(headingsToObserve);
diff --git a/src/components/QuickNav/useHeadingsObserver.ts b/src/components/QuickNav/useHeadingsObserver.ts
index bf19f663..d6aa40c8 100644
--- a/src/components/QuickNav/useHeadingsObserver.ts
+++ b/src/components/QuickNav/useHeadingsObserver.ts
@@ -1,7 +1,7 @@
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 export const useHeadingsObserver = (
-  scopeId: string,
+  scopeSelector: string,
   querySelector: string,
   rootMargin: string,
   threshold: number,
@@ -24,8 +24,8 @@ export const useHeadingsObserver = (
         threshold: threshold,
       });
 
-      const observerArea = document.getElementById(scopeId);
-      if (!observerArea) return;
+      const observerArea = document.querySelector(scopeSelector);
+      if (!(observerArea instanceof HTMLElement)) return;
       const elements = observerArea.querySelectorAll(querySelector);
 
       elements.forEach((elem) => {
@@ -38,7 +38,7 @@ export const useHeadingsObserver = (
     return () => {
       observerRef.current?.disconnect();
     };
-  }, [querySelector, rootMargin, threshold, scopeId]);
+  }, [querySelector, rootMargin, threshold, scopeSelector]);
 
   return activeHeadline;
 };
diff --git a/src/components/SearchDialog/FilterButtons.module.css b/src/components/SearchDialog/FilterButtons.module.css
deleted file mode 100644
index cd9d96ca..00000000
--- a/src/components/SearchDialog/FilterButtons.module.css
+++ /dev/null
@@ -1,61 +0,0 @@
-.filters {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3xs);
-  margin-block-end: var(--space-s);
-}
-
-.filtersHeadline {
-  font-size: var(--text-body-2xs);
-  font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
-  color: var(--base-color-grey-900);
-  line-height: var(--line-height-s);
-}
-
-.filtersList {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-2xs);
-}
-
-.filter {
-  appearance: none;
-  display: inline-flex;
-  gap: var(--space-2xs);
-  justify-content: center;
-  align-items: center;
-  padding-block: var(--space-3xs);
-  padding-inline: var(--space-xs);
-  border-radius: var(--border-radius-m);
-  border: 1px solid var(--brand-color-grey-3);
-  background-color: transparent;
-  color: var(--base-color-grey-900);
-  font-size: var(--text-body-s);
-  white-space: nowrap;
-
-  &:not(.filterDisabled) {
-    cursor: pointer;
-
-    &:is(:hover, :focus) {
-      background-color: var(--brand-color-grey-2);
-      outline: none;
-    }
-  }
-}
-
-.filterActive {
-  background-color: var(--base-color-grey-1000);
-  color: var(--base-color-white);
-  border: none;
-
-  &:not(.filterDisabled):is(:hover, :focus) {
-    background-color: var(--base-color-grey-700);
-  }
-}
-
-.filterIcon {
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-}
diff --git a/src/components/SearchDialog/FilterButtons.tsx b/src/components/SearchDialog/FilterButtons.tsx
deleted file mode 100644
index 039551e6..00000000
--- a/src/components/SearchDialog/FilterButtons.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Icon } from '@/icons';
-import { cx } from 'class-variance-authority';
-import { Filters } from './SearchDialog';
-
-import styles from './FilterButtons.module.css';
-
-export interface FilterButtonsProps {
-  filters: Filters;
-  activeSections: Array<string>;
-  onFilterChange: (filterId: string) => void;
-}
-
-export const FilterButtons = ({ filters, activeSections, onFilterChange }: FilterButtonsProps) => {
-  return (
-    <div className={styles.filters}>
-      <div className={styles.filtersList}>
-        {filters.map((filter) => (
-          <button
-            key={filter.id}
-            onClick={() => onFilterChange(filter.id)}
-            className={cx(styles.filter, {
-              [styles.filterActive]: activeSections.includes(filter.id),
-              [styles.filterDisabled]: activeSections.includes(filter.id) && activeSections.length === 1,
-            })}>
-            <Icon name={filter.icon} className={styles.filterIcon} title="" />
-            {filter.label}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/SearchDialog/SearchDialog.module.css b/src/components/SearchDialog/SearchDialog.module.css
index 0d31fb87..9d194904 100644
--- a/src/components/SearchDialog/SearchDialog.module.css
+++ b/src/components/SearchDialog/SearchDialog.module.css
@@ -1,183 +1,76 @@
+/* Dialog shell */
 .overlay {
-  display: grid;
   position: fixed;
   z-index: var(--layer-overlay);
   inset: 0;
-  overflow-y: auto;
-  animation: overlayShow 150ms ease-in-out;
+  padding: 42px 16px 57px;
+  display: grid;
+  place-items: center;
+  overflow-y: hidden;
   background-color: var(--color-overlay-dark);
-  place-items: start center;
+
+  @media (--laptop-up) {
+    padding: 0;
+    place-items: start center;
+  }
 }
 
 .content {
+  --search-icon-size: 20px;
   --padding-block: var(--space-m);
   --padding-inline: var(--space-l);
+  --dialog-content-height: 625px;
+  --dialog-header-height: 48px;
 
-  background-color: var(--base-color-white);
   position: relative;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   max-width: 1040px;
+  height: var(--dialog-content-height);
   overflow: hidden;
-  animation: contentShow 250ms ease-in-out;
+  background-color: var(--base-color-white);
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-l);
   box-shadow: 0 0 2px 1px var(--color-dialog-box-shadow);
 }
 
-.header {
-  display: flex;
-  position: relative;
-  flex-wrap: wrap;
-  padding: 0 var(--space-xs);
-  border-bottom: 1px solid var(--color-border);
-  background-color: var(--color-background-header);
-}
-
-.iconWrapper {
-  flex: 0 0 var(--padding-inline);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: var(--color-text-secondary);
-}
-
-.icon {
-  transform: translateY(-1px);
-}
-
-.main {
-  padding-block: var(--space-s);
-  padding-inline: var(--space-s);
-  overflow-y: auto;
-  max-height: calc(100vh - 50px);
-}
-
-.results {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  row-gap: var(--space-xs);
-}
-
-.resultLink {
-  display: grid;
-  grid-template-areas:
-    'title enter arrow'
-    'description enter arrow';
-  grid-template-columns: 1fr auto auto;
-  column-gap: var(--space-xs);
-  padding-block: var(--space-xs);
-  padding-inline: 20px;
-  border-radius: var(--border-radius-s);
-  text-decoration: none;
-  color: var(--color-text-secondary);
-
-  &:is(:hover, :focus, .resultLinkFocus) {
-    outline: none;
-    background-color: var(--brand-color-blue-1);
-
-    .resultTag {
-      outline: 1px solid var(--base-color-blue-75);
-    }
-  }
-}
-
-.resultTitle {
-  grid-area: title;
-  color: var(--brand-color-grey-10);
-  display: flex;
-  align-items: center;
-  gap: var(--space-xs);
-}
-
-.resultDescription {
-  grid-area: description;
-  color: var(--brand-color-grey-8);
-  opacity: 0.65;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.resultArrow {
-  grid-area: arrow;
-  align-self: center;
-  color: var(--brand-color-grey-8);
-  width: 16px;
-  flex-shrink: 0;
-}
+/* Light theme */
+.content.themeLight {
+  --color-text-default: var(--brand-color-grey-10);
+  --color-text-secondary: var(--brand-color-grey-8);
+  --color-text-tertiary: var(--brand-color-grey-6);
+  --color-background-header: var(--base-color-white);
+  --color-background-default: var(--brand-color-grey-1);
+  --color-background-hover: var(--brand-color-grey-2);
+  --color-border-light: var(--brand-color-grey-1);
+  --color-border: var(--brand-color-grey-2);
+  --color-reset-button-hover: var(--brand-color-grey-10);
 
-.noResults {
-  color: var(--brand-color-grey-7);
-  text-align: center;
-  padding: var(--space-m);
-  margin: 0;
+  background-color: var(--base-color-white);
+  color: var(--color-text-default);
+  border-color: var(--color-border);
 }
 
-.footer {
-  background-color: var(--base-color-grey-50);
-  padding-block: var(--space-3xs);
-  padding-inline: var(--padding-inline);
-  border-top: 1px solid var(--color-border);
-}
+/* Dark theme */
+.content.themeDark {
+  --color-text-default: var(--base-color-white);
+  --color-text-secondary: var(--brand-color-grey-4);
+  --color-text-tertiary: var(--brand-color-grey-5);
+  --color-background-header: var(--brand-color-grey-10);
+  --color-background-default: var(--brand-color-grey-9);
+  --color-background-hover: var(--brand-color-grey-8);
+  --color-border: var(--brand-color-grey-8);
+  --color-reset-button-hover: var(--brand-color-grey-3);
 
-.data {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-xs);
-  background-color: var(--base-color-blue-100);
-  border-radius: var(--border-radius-s);
-  padding-inline: var(--space-3xs);
-  padding-block: var(--space-4xs);
-  color: var(--base-color-grey-600);
-  min-inline-size: 30px;
-  align-self: center;
-  height: fit-content;
-}
-
-@media (--phablet-down) {
-  .footer {
-    display: none;
-  }
+  background-color: var(--brand-color-grey-10);
+  color: var(--color-text-default);
+  border-color: var(--color-border);
 }
 
-@media (--phablet-up) {
+/* Media queries */
+@media (--tablet-up) {
   .content {
-    margin-block: var(--space-l);
-  }
-
-  .header {
-    padding-bottom: 0;
-  }
-
-  .main {
-    max-height: calc(100vh - 150px);
-  }
-}
-
-@keyframes overlayShow {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes contentShow {
-  from {
-    transform: translate(0, -3%);
-    opacity: 0;
-  }
-
-  to {
-    transform: translate(0, 0);
-    opacity: 1;
+    margin-block: var(--space-4xl);
   }
 }
diff --git a/src/components/SearchDialog/SearchDialog.tsx b/src/components/SearchDialog/SearchDialog.tsx
index 6010eb7a..ccce7ba4 100644
--- a/src/components/SearchDialog/SearchDialog.tsx
+++ b/src/components/SearchDialog/SearchDialog.tsx
@@ -1,227 +1,373 @@
 'use client';
 
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+
+import type { SearchHit, SearchSource, SearchTriggerVariant } from './types';
 
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { algoliasearch } from 'algoliasearch';
 import { cx } from 'class-variance-authority';
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-import { useHotkeys } from 'react-hotkeys-hook';
-
-import { Icon, IconName } from '@/icons';
-import { useShowKeyboardHints } from '@/lib/hooks';
-import { performSearch } from '@/lib/search/server';
-import { SearchResult } from '@/lib/search/types';
-import { debounce } from '@/lib/util';
-
-import { Tag } from '../Tag';
-import { FilterButtons } from './FilterButtons';
+import { InstantSearchNext } from 'react-instantsearch-nextjs';
+
 import styles from './SearchDialog.module.css';
-import { SearchForm } from './SearchForm';
-import { SearchTrigger } from './SearchTrigger';
-
-export const filters: Filters = [
-  { id: 'documentation', label: 'Documentation', icon: 'action/documentation' },
-  { id: 'guides', label: 'Guides', icon: 'utility/guide' },
-  { id: 'api', label: 'API Reference', icon: 'action/api' },
-];
-
-/**
- * If the requirements for this become even more sophisticated,
- * or we need to implement client-side fetched anywhere else,
- * we should replace this with useSWR. For now, it's simple and works.
- */
-const debouncedSearch = debounce(
-  async (
-    term: string,
-    sections: string[],
-    setIsWaiting: Dispatch<SetStateAction<boolean>>,
-    setResults: Dispatch<SetStateAction<SearchResult[]>>,
-    setFocusedIndex: Dispatch<SetStateAction<number>>,
-  ) => {
-    const results = await performSearch(term, sections);
-    setIsWaiting(false);
-    setResults(results);
-    setFocusedIndex(0);
-  },
-  300,
-);
-
-export const SearchDialog = () => {
-  const [open, setOpen] = useState(false);
-  const [term, setTerm] = useState('');
-  const [isWaiting, setIsWaiting] = useState(false);
-  const [sections, setSections] = useState<Array<Section>>([filters[0].id]);
-  const [results, setResults] = useState<SearchResult[]>([]);
-  const [focusedIndex, setFocusedIndex] = useState<number>(0);
-  const [isKeyboardNav, setIsKeyboardNav] = useState(false);
-  const router = useRouter();
-  const showKeyboardHints = useShowKeyboardHints();
-
-  useHotkeys(['mod+k'], () => setOpen(true));
-
-  // Reset keyboard nav when results change
-  useEffect(() => {
-    setIsKeyboardNav(false);
-  }, [results]);
+import { SearchDialogContent } from './SearchDialogContent/SearchDialogContent';
+import { SearchTrigger } from './SearchTrigger/SearchTrigger';
+import {
+  dedupeMergedSearchHits,
+  normalizeMergedSearchHref,
+  normalizeSearchValue,
+  SEARCH_SOURCE_FIELD,
+} from './utils/searchHitUtils';
 
-  useEffect(() => {
-    if (term === '') {
-      setResults([]);
-    } else {
-      setIsWaiting(true);
-      debouncedSearch(term, sections, setIsWaiting, setResults, setFocusedIndex);
-    }
-  }, [term, sections, setResults]);
+const algoliaAppId = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID;
+const algoliaApiKey = process.env.NEXT_PUBLIC_ALGOLIA_API_KEY;
+const algoliaIndexName = process.env.NEXT_PUBLIC_ALGOLIA_INDEX;
 
-  const setSection = (section: Section) => {
-    setSections((prev) => {
-      if (prev.includes(section)) {
-        // Don't remove if it would leave no sections
-        if (prev.length === 1) {
-          return prev;
-        }
+const algoliaDocsIndexName = process.env.NEXT_PUBLIC_ALGOLIA_DOCS_INDEX || 'Docs';
+const DEFAULT_HITS_PER_PAGE = 20;
+const DOCS_MAX_HITS_PER_PAGE = 40;
+const DOCS_TITLE_SUFFIX_PATTERN = /\s*\|\s*cloudsmith docs\s*$/i;
 
-        return prev.filter((s) => s !== section);
-      }
+// Guard against missing Algolia credentials to prevent breaking the navbar
+const hasAlgoliaCredentials = Boolean(algoliaAppId && algoliaApiKey);
 
-      return [...prev, section];
-    });
+interface SearchRequestParams {
+  query?: string;
+  hitsPerPage?: number;
+  page?: number;
+  getRankingInfo?: boolean;
+  [key: string]: unknown;
+}
+
+interface SearchRequest {
+  indexName?: string;
+  params?: SearchRequestParams;
+}
+
+interface SearchResult {
+  hits: SearchHit[];
+  nbHits?: number;
+  page?: number;
+  nbPages?: number;
+  hitsPerPage?: number;
+  processingTimeMS?: number;
+  query?: string;
+  params?: string;
+}
+
+type SearchTheme = 'light' | 'dark';
+
+interface SearchDialogProps {
+  className?: string;
+  theme?: SearchTheme;
+  triggerTheme?: SearchTheme;
+  dialogTheme?: SearchTheme;
+  triggerVariant?: SearchTriggerVariant;
+  enableKeyboardShortcut?: boolean;
+}
+
+const stripDocsTitleSuffix = (value: unknown): unknown => {
+  if (typeof value === 'string') return value.replace(DOCS_TITLE_SUFFIX_PATTERN, '').trim();
+  if (!value || typeof value !== 'object') return value;
+
+  if (Array.isArray(value)) {
+    return value.map((item) => stripDocsTitleSuffix(item));
+  }
+
+  return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, stripDocsTitleSuffix(item)]));
+};
+
+const normalizeDocsHit = (hit: SearchHit): SearchHit =>
+  ({
+    ...hit,
+    title: stripDocsTitleSuffix(hit?.title),
+    name: stripDocsTitleSuffix(hit?.name),
+    hierarchy: stripDocsTitleSuffix(hit?.hierarchy),
+  }) as SearchHit;
+
+const getRawSearchHitHref = (hit: SearchHit, source: SearchSource): string => {
+  if (source === 'docs') {
+    return normalizeSearchValue(hit?.url ?? hit?.url_without_anchor);
+  }
+
+  return normalizeSearchValue(hit?.slug);
+};
+
+const attachSearchSource = (hit: SearchHit, source: SearchSource): SearchHit => {
+  const normalizedHit = source === 'docs' ? normalizeDocsHit(hit) : hit;
+  const href = getRawSearchHitHref(normalizedHit, source);
+
+  return {
+    ...normalizedHit,
+    ...(href ? { slug: normalizeMergedSearchHref(href, source) } : null),
+    [SEARCH_SOURCE_FIELD]: source,
   };
+};
+
+const getRankingScore = (hit: SearchHit): number | null => {
+  const score = hit?._rankingInfo?.userScore ?? hit?._rankingInfo?.score;
+  return Number.isFinite(score) ? Number(score) : null;
+};
+
+const annotateHitsForMerge = (hits: SearchHit[] = [], source: SearchSource) => {
+  return hits.map((hit, rank) => ({
+    hit: attachSearchSource(hit, source),
+    source,
+    rank,
+  }));
+};
 
-  const scrollIntoViewIfNeeded = (element: HTMLElement | null) => {
-    if (isKeyboardNav && element) {
-      element.scrollIntoView({ block: 'nearest' });
+const blendHitsByScore = (websiteHits: SearchHit[] = [], docsHits: SearchHit[] = []) => {
+  const annotatedWebsiteHits = annotateHitsForMerge(websiteHits, 'website');
+  const annotatedDocsHits = annotateHitsForMerge(docsHits, 'docs');
+
+  // Start with docs hits in their original order and only let website hits
+  // move ahead when they clearly outrank the current docs result.
+  const result = [...annotatedDocsHits];
+
+  for (const websiteHit of annotatedWebsiteHits) {
+    const websiteScore = getRankingScore(websiteHit.hit);
+
+    let insertIndex = result.length;
+    for (let i = 0; i < result.length; i++) {
+      const currentScore = getRankingScore(result[i].hit);
+
+      if (websiteScore != null && currentScore != null && websiteScore > currentScore) {
+        insertIndex = i;
+        break;
+      }
     }
+
+    result.splice(insertIndex, 0, websiteHit);
+  }
+
+  return result.map(({ hit }) => hit);
+};
+
+const mergeMultiIndexResults = (
+  websiteResult: SearchResult | undefined,
+  docsResult: SearchResult | undefined,
+  request: SearchRequest,
+): SearchResult => {
+  const requestedHitsPerPage = Number(
+    request?.params?.hitsPerPage ?? websiteResult?.hitsPerPage ?? DEFAULT_HITS_PER_PAGE,
+  );
+  const effectiveHitsPerPage = Number.isFinite(requestedHitsPerPage)
+    ? Math.max(1, requestedHitsPerPage)
+    : DEFAULT_HITS_PER_PAGE;
+  const websiteHits = websiteResult?.hits || [];
+  const docsHits = docsResult?.hits || [];
+  const mergedHits = dedupeMergedSearchHits(blendHitsByScore(websiteHits, docsHits)).slice(
+    0,
+    effectiveHitsPerPage,
+  );
+
+  return {
+    ...(websiteResult || {}),
+    hits: mergedHits,
+    hitsPerPage: effectiveHitsPerPage,
+    nbHits: (websiteResult?.nbHits || 0) + (docsResult?.nbHits || 0),
+    nbPages: Math.max(websiteResult?.nbPages || 0, docsResult?.nbPages || 0),
+    processingTimeMS: (websiteResult?.processingTimeMS || 0) + (docsResult?.processingTimeMS || 0),
+    query: websiteResult?.query || docsResult?.query || request?.params?.query || '',
+    params: websiteResult?.params || docsResult?.params || '',
   };
+};
 
-  const goUp = () => {
-    setIsKeyboardNav(true);
-    setFocusedIndex((prev) => {
-      if (prev === 0) {
-        return results.length - 1;
-      }
-      return prev - 1;
-    });
+const getHitsPerPageFromRequest = (request: SearchRequest, fallback = DEFAULT_HITS_PER_PAGE) => {
+  const requestedHitsPerPage = Number(request?.params?.hitsPerPage ?? fallback);
+  if (!Number.isFinite(requestedHitsPerPage)) return fallback;
+
+  return Math.max(1, requestedHitsPerPage);
+};
+
+const shouldRequestRankingInfo = (request: SearchRequest) => {
+  const query = normalizeSearchValue(request?.params?.query);
+  if (!query) return false;
+
+  // Ranking metadata is only used for blending on the first page
+  const page = Number(request?.params?.page ?? 0);
+  if (Number.isFinite(page) && page > 0) return false;
+
+  return getHitsPerPageFromRequest(request) > 0;
+};
+
+// Create a resilient search client that handles connection errors
+const createSearchClient = (onError: (message: string | null) => void) => {
+  const buildEmptyResult = (request: SearchRequest): SearchResult => ({
+    hits: [],
+    nbHits: 0,
+    page: 0,
+    nbPages: 0,
+    hitsPerPage: request?.params?.hitsPerPage || DEFAULT_HITS_PER_PAGE,
+    processingTimeMS: 0,
+    query: request?.params?.query || '',
+    params: '',
+  });
+
+  const isEmptySearchRequest = (request: SearchRequest) => {
+    return normalizeSearchValue(request?.params?.query).length === 0;
   };
 
-  const goDown = () => {
-    setIsKeyboardNav(true);
-    setFocusedIndex((prev) => {
-      if (prev === results.length - 1) {
-        return 0;
+  const client = algoliasearch(algoliaAppId!, algoliaApiKey!);
+  const websiteIndexName = algoliaIndexName || '';
+
+  // Wrap the search method to handle connection errors gracefully
+  return {
+    ...client,
+    search: async (requests: SearchRequest[]) => {
+      const normalizedRequests = Array.isArray(requests) ? requests : [];
+      if (normalizedRequests.length === 0) return { results: [] };
+
+      // Never send empty/whitespace-only queries to Algolia.
+      if (normalizedRequests.every(isEmptySearchRequest)) {
+        onError(null);
+
+        return {
+          results: normalizedRequests.map((request) => buildEmptyResult(request)),
+        };
       }
-      return prev + 1;
-    });
-  };
 
-  const goToResult = () => {
-    if (focusedIndex !== -1) {
-      router.push(results[focusedIndex].path);
-      setOpen(false);
+      const websiteRequests = normalizedRequests.map((request) => ({
+        ...request,
+        indexName: request?.indexName || websiteIndexName,
+        params: {
+          ...(request?.params || {}),
+          ...(shouldRequestRankingInfo(request) ? { getRankingInfo: true } : {}),
+        },
+      }));
+
+      const docsRequests = normalizedRequests.map((request) => {
+        const includeRankingInfo = shouldRequestRankingInfo(request);
+
+        return {
+          ...request,
+          indexName: algoliaDocsIndexName,
+          params: {
+            ...(request?.params || {}),
+            hitsPerPage: Math.min(
+              getHitsPerPageFromRequest(request, DOCS_MAX_HITS_PER_PAGE),
+              DOCS_MAX_HITS_PER_PAGE,
+            ),
+            ...(includeRankingInfo ? { getRankingInfo: true } : {}),
+          },
+        };
+      });
+
+      try {
+        const result = (await client.search([...websiteRequests, ...docsRequests] as never)) as {
+          results: SearchResult[];
+        };
+
+        const mergedResults = normalizedRequests.map((request, index) => {
+          const websiteResult = result?.results?.[index];
+          const docsResult = result?.results?.[index + normalizedRequests.length];
+
+          return mergeMultiIndexResults(websiteResult, docsResult, request);
+        });
+
+        // Clear any previous errors on successful search
+        onError(null);
+        return { results: mergedResults };
+      } catch (error) {
+        // Log the error for debugging
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        console.warn('Algolia search failed:', errorMessage);
+
+        // Set error state for UI display
+        onError('Search is currently unavailable. Please try again later.');
+
+        // Return empty results that match the expected structure
+        return {
+          results: normalizedRequests.map((request) => buildEmptyResult(request)),
+        };
+      }
+    },
+  } as typeof client;
+};
+
+export const SearchDialog = ({
+  className,
+  theme: themeOverride,
+  triggerTheme,
+  dialogTheme,
+  triggerVariant = 'inline',
+  enableKeyboardShortcut = true,
+}: SearchDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [searchError, setSearchError] = useState<string | null>(null);
+  const [theme, setTheme] = useState(() => {
+    if (typeof document === 'undefined') {
+      return 'undefined';
     }
-  };
 
-  const goToStart = () => {
-    setIsKeyboardNav(true);
-    setFocusedIndex(0);
-  };
+    return document.body.dataset.theme || 'undefined';
+  });
+  // Open dialog with Cmd+K
+  useEffect(() => {
+    if (!enableKeyboardShortcut) return;
 
-  const goToEnd = () => {
-    setIsKeyboardNav(true);
-    setFocusedIndex(results.length - 1);
-  };
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        setOpen(true);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [enableKeyboardShortcut]);
+
+  // Watch for theme changes on body element
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      const newTheme = document.body.dataset.theme || 'undefined';
+      setTheme(newTheme);
+    });
+
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['data-theme'],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  const fallbackTheme: SearchTheme = themeOverride || (theme === 'dark' ? 'dark' : 'light');
+  const effectiveTriggerTheme: SearchTheme = triggerTheme || fallbackTheme;
+  const effectiveDialogTheme: SearchTheme = dialogTheme || fallbackTheme;
+
+  const overlayClasses = cx(styles.overlay, {
+    [styles.themeLight]: effectiveDialogTheme === 'light',
+    [styles.themeDark]: effectiveDialogTheme === 'dark',
+  });
+
+  const contentClasses = cx(styles.content, {
+    [styles.themeLight]: effectiveDialogTheme === 'light',
+    [styles.themeDark]: effectiveDialogTheme === 'dark',
+  });
+
+  // Create search client with error handler
+  const searchClient = useMemo(() => (hasAlgoliaCredentials ? createSearchClient(setSearchError) : null), []);
+  if (!hasAlgoliaCredentials || !searchClient) return null;
 
   return (
     <RadixDialog.Root open={open} onOpenChange={setOpen}>
-      <SearchTrigger />
+      <SearchTrigger className={className} theme={effectiveTriggerTheme} variant={triggerVariant} />
 
       <RadixDialog.Portal>
-        <RadixDialog.Overlay className={styles.overlay}>
-          <RadixDialog.Content className={styles.content}>
-            <header className={styles.header}>
-              <div className={styles.iconWrapper}>
-                <Icon name="search" className={styles.icon} title="" />
-              </div>
-              <SearchForm
-                value={term}
-                events={{ onChange: setTerm, goUp, goDown, goToResult, goToStart, goToEnd }}
-              />
-              {showKeyboardHints && (
-                <div className={cx(styles.data, 'monoXSUppercase')}>
-                  <kbd>ESC</kbd>
-                </div>
-              )}
-            </header>
-
-            <VisuallyHidden>
-              <RadixDialog.Close asChild>
-                <button>Close</button>
-              </RadixDialog.Close>
-              <RadixDialog.Title className={styles.title}>Search</RadixDialog.Title>
-              <RadixDialog.Description>
-                Search for documentation, guides, and API reference.
-              </RadixDialog.Description>
-            </VisuallyHidden>
-
-            <div className={styles.main}>
-              <FilterButtons activeSections={sections} onFilterChange={setSection} filters={filters} />
-
-              <ul
-                className={styles.results}
-                onMouseMove={() => {
-                  if (isKeyboardNav) {
-                    setIsKeyboardNav(false);
-                  }
-                }}>
-                {results.map((res, index) => (
-                  <li key={`${res.path}${res.title}${index}`}>
-                    <Link
-                      href={res.path}
-                      ref={index === focusedIndex ? scrollIntoViewIfNeeded : undefined}
-                      onMouseEnter={() => !isKeyboardNav && setFocusedIndex(index)}
-                      onClick={() => setOpen(false)}
-                      className={cx(styles.resultLink, { [styles.resultLinkFocus]: index === focusedIndex })}>
-                      <span className={cx(styles.resultTitle, 'bodyM')}>
-                        {res.title}
-                        {res.method && <Tag method={res.method} className={styles.resultTag} />}
-                      </span>
-                      <span className={cx(styles.resultDescription, 'bodyXS')}>
-                        {highlightSearchTerm(res.snippet, term)}
-                      </span>
-                      <Icon name="arrowRight" className={styles.resultArrow} title="" />
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-
-              {isWaiting && <p className={cx(styles.noResults, 'bodyS')}>Loading...</p>}
-
-              {!isWaiting && term === '' && (
-                <p className={cx(styles.noResults, 'bodyS')}>Please enter a search term</p>
-              )}
-
-              {!isWaiting && results.length === 0 && term !== '' && (
-                <p className={cx(styles.noResults, 'bodyS')}>No results</p>
-              )}
-            </div>
+        <RadixDialog.Overlay className={overlayClasses}>
+          <VisuallyHidden>
+            <RadixDialog.Title>Search</RadixDialog.Title>
+          </VisuallyHidden>
+          <RadixDialog.Content className={contentClasses}>
+            <InstantSearchNext indexName={algoliaIndexName} searchClient={searchClient} insights>
+              <SearchDialogContent onClose={() => setOpen(false)} searchError={searchError} />
+            </InstantSearchNext>
           </RadixDialog.Content>
         </RadixDialog.Overlay>
       </RadixDialog.Portal>
     </RadixDialog.Root>
   );
 };
-
-const highlightSearchTerm = (text: string, term: string) => {
-  if (!term.trim()) {
-    return text;
-  }
-
-  return text
-    .split(new RegExp(`(${term})`, 'gi'))
-    .map((part, i) => (part.toLowerCase() === term.toLowerCase() ? <u key={i}>{part}</u> : part));
-};
-
-export type Filters = Array<{ id: string; label: string; icon: IconName }>;
-type Section = (typeof filters)[number]['id'];
diff --git a/src/components/SearchDialog/SearchDialogContent/SearchDialogContent.module.css b/src/components/SearchDialog/SearchDialogContent/SearchDialogContent.module.css
new file mode 100644
index 00000000..9a323a77
--- /dev/null
+++ b/src/components/SearchDialog/SearchDialogContent/SearchDialogContent.module.css
@@ -0,0 +1,137 @@
+/* Header */
+.header {
+  display: flex;
+  align-items: stretch; /* add this to ensure full height */
+  padding: 0 var(--space-xs);
+  gap: var(--space-2xs);
+  border-bottom: 1px solid var(--color-border);
+  background-color: var(--color-background-header);
+}
+
+.iconWrapper {
+  display: flex;
+  flex: 0;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-secondary);
+}
+
+.icon {
+  transform: translateY(-1px);
+  color: inherit;
+
+  & path {
+    fill: currentcolor;
+  }
+}
+
+.searchBox {
+  display: flex;
+  flex: 1;
+}
+
+.searchBoxForm {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.searchBoxInput {
+  flex: 1;
+  width: 100%;
+  padding: var(--space-xs) 0;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 0;
+  outline: none;
+  font-family: var(--font-family-body);
+  font-size: var(--text-body-m);
+  text-overflow: ellipsis;
+  color: var(--color-text-secondary);
+
+  @media (--laptop-up) {
+    font-size: var(--text-body-s);
+  }
+
+  &::placeholder {
+    color: var(--color-text-tertiary);
+  }
+
+  &[type='search'],
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-decoration {
+    appearance: none;
+  }
+}
+
+.searchBoxSubmit {
+  display: none;
+}
+
+.searchBoxReset {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: var(--space-3xs);
+  padding: var(--space-2xs);
+  background: none;
+  border: 0;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: var(--transition-fast);
+
+  &:hover {
+    color: var(--color-reset-button-hover);
+  }
+}
+
+.resetIcon {
+  width: 14px;
+  height: 14px;
+}
+
+.searchBoxResetHidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.searchBoxResetVisible {
+  opacity: 1;
+  pointer-events: auto;
+  outline: none;
+}
+
+.kbdBadge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-xs);
+  margin-left: auto;
+  height: fit-content;
+  padding-block: var(--space-4xs);
+  padding-inline: var(--space-3xs);
+  background-color: var(--color-background-default);
+  border-radius: var(--border-radius-s);
+  align-self: center;
+  color: var(--color-text-secondary);
+  font-size: var(--text-body-2xs);
+  text-transform: uppercase;
+}
+
+/* Results layout */
+.resultsWrapper {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  overflow-y: auto;
+  height: 100%;
+  scrollbar-color: var(--color-background-default) transparent;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--color-background-default);
+  }
+
+  @media (--tablet-up) {
+    grid-template-columns: 225px minmax(0, 1fr);
+  }
+}
diff --git a/src/components/SearchDialog/SearchDialogContent/SearchDialogContent.tsx b/src/components/SearchDialog/SearchDialogContent/SearchDialogContent.tsx
new file mode 100644
index 00000000..0b09cd9d
--- /dev/null
+++ b/src/components/SearchDialog/SearchDialogContent/SearchDialogContent.tsx
@@ -0,0 +1,96 @@
+'use client';
+
+import { useCallback, useEffect, useRef } from 'react';
+
+import type { SearchHit } from '../types';
+
+import { Configure, SearchBox, useInstantSearch, useSearchBox } from 'react-instantsearch';
+
+import { Icon } from '@/icons';
+
+import styles from './SearchDialogContent.module.css';
+import { SearchFilters } from './SearchFilters/SearchFilters';
+import { SearchResults } from './SearchResults/SearchResults';
+
+interface SearchDialogContentProps {
+  onClose: () => void;
+  searchError: string | null;
+}
+
+export const SearchDialogContent = ({ onClose, searchError }: SearchDialogContentProps) => {
+  const { results, status } = useInstantSearch();
+  const { query } = useSearchBox();
+  const debounceRef = useRef<number | null>(null);
+  const trimmedQuery = query?.trim() || '';
+  const displayedHits = (results?.hits as SearchHit[] | undefined) || [];
+  const settledQuery = results?.query?.trim?.() || '';
+  const showReset = trimmedQuery.length > 0;
+  const isSearching = status === 'loading' || status === 'stalled';
+  const showResultsLayout = trimmedQuery.length > 0;
+
+  const queryHook = useCallback((nextQuery: string, search: (value: string) => void) => {
+    const trimmed = nextQuery.trim();
+
+    if (trimmed.length === 0) {
+      if (debounceRef.current) window.clearTimeout(debounceRef.current);
+      search('');
+      return;
+    }
+
+    if (trimmed.length < 2) return;
+    if (debounceRef.current) window.clearTimeout(debounceRef.current);
+
+    debounceRef.current = window.setTimeout(() => {
+      search(nextQuery);
+    }, 150);
+  }, []);
+
+  useEffect(
+    () => () => {
+      if (debounceRef.current) window.clearTimeout(debounceRef.current);
+    },
+    [],
+  );
+
+  return (
+    <>
+      <header className={styles.header}>
+        <div className={styles.iconWrapper}>
+          <Icon name="search" className={styles.icon} title="" />
+        </div>
+        <SearchBox
+          placeholder="Search for items..."
+          queryHook={queryHook}
+          resetIconComponent={() => <Icon name="action/close" className={styles.resetIcon} title="" />}
+          loadingIconComponent={() => null}
+          autoFocus
+          classNames={{
+            root: styles.searchBox,
+            input: styles.searchBoxInput,
+            form: styles.searchBoxForm,
+            submit: styles.searchBoxSubmit,
+            reset: `${styles.searchBoxReset} ${
+              showReset ? styles.searchBoxResetVisible : styles.searchBoxResetHidden
+            }`,
+          }}
+        />
+        <span className={styles.kbdBadge}>
+          <kbd>esc</kbd>
+        </span>
+      </header>
+
+      <Configure hitsPerPage={200} />
+      <div className={showResultsLayout ? styles.resultsWrapper : ''}>
+        <SearchFilters hits={displayedHits} query={trimmedQuery} />
+        <SearchResults
+          hits={displayedHits}
+          isSearching={isSearching}
+          onClose={onClose}
+          query={trimmedQuery}
+          searchError={searchError}
+          settledQuery={settledQuery}
+        />
+      </div>
+    </>
+  );
+};
diff --git a/src/components/SearchDialog/SearchDialogContent/SearchFilters/SearchFilters.module.css b/src/components/SearchDialog/SearchDialogContent/SearchFilters/SearchFilters.module.css
new file mode 100644
index 00000000..96899d97
--- /dev/null
+++ b/src/components/SearchDialog/SearchDialogContent/SearchFilters/SearchFilters.module.css
@@ -0,0 +1,68 @@
+.groups {
+  display: none;
+  position: sticky;
+  top: 0;
+  align-self: start;
+  width: 100%;
+  min-width: 0;
+  overflow-y: auto;
+  height: 100%;
+  padding: var(--space-s) var(--space-s) 0 0;
+  border-right: 1px solid var(--color-border);
+
+  @media (--tablet-up) {
+    display: block;
+  }
+}
+
+.groupList {
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+.groupItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2xs);
+  width: 100%;
+  padding: var(--space-2xs) var(--space-xs);
+  background: transparent;
+  border: 0;
+  border-radius: var(--border-radius-s);
+  font-family: var(--font-family-body);
+  font-size: var(--text-body-xs);
+  text-align: left;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+
+  &:hover,
+  &:focus-visible {
+    color: var(--color-text-default);
+    outline: none;
+  }
+}
+
+.groupItemLabel {
+  display: flex;
+  gap: var(--space-2xs);
+  align-items: center;
+  font-size: var(--text-body-s);
+}
+
+.groupItemIcon {
+  width: var(--search-icon-size);
+  height: var(--search-icon-size);
+  color: inherit;
+
+  & path {
+    fill: currentcolor;
+  }
+}
+
+.groupItemCount {
+  color: inherit;
+}
diff --git a/src/components/SearchDialog/SearchDialogContent/SearchFilters/SearchFilters.tsx b/src/components/SearchDialog/SearchDialogContent/SearchFilters/SearchFilters.tsx
new file mode 100644
index 00000000..6cf641de
--- /dev/null
+++ b/src/components/SearchDialog/SearchDialogContent/SearchFilters/SearchFilters.tsx
@@ -0,0 +1,74 @@
+import { useMemo } from 'react';
+
+import type { SearchFilterDefinition, SearchGroup, SearchHit } from '../../types';
+
+import { Icon } from '@/icons';
+
+import { filtersData } from '../../utils/data';
+import { buildSearchGroups, RECOMMENDED_GROUP_TYPE } from '../../utils/searchGroupUtils';
+import styles from './SearchFilters.module.css';
+
+interface SearchFiltersProps {
+  hits: SearchHit[];
+  query: string;
+}
+
+const searchFilters = filtersData as SearchFilterDefinition[];
+
+export const SearchFilters = ({ hits, query }: SearchFiltersProps) => {
+  const groupedHits = useMemo(() => {
+    return buildSearchGroups(hits || []) as SearchGroup[];
+  }, [hits]);
+
+  if (!query || groupedHits.length === 0) return null;
+
+  const scrollToGroup = (groupId: string) => {
+    const target = document.getElementById(groupId);
+    if (!target) return;
+
+    // Find the scrollable container (SearchResults root)
+    const scrollContainer = target.closest('[class*="root"]');
+    if (!(scrollContainer instanceof HTMLElement)) return;
+
+    // Calculate position relative to the scroll container
+    const containerRect = scrollContainer.getBoundingClientRect();
+    const targetRect = target.getBoundingClientRect();
+    const targetRelativeTop = targetRect.top - containerRect.top;
+
+    scrollContainer.scrollTo({
+      top: scrollContainer.scrollTop + targetRelativeTop - 16,
+      behavior: 'smooth',
+    });
+  };
+
+  return (
+    <nav className={styles.groups} aria-label="Search result groups">
+      <ul className={styles.groupList}>
+        {groupedHits.map((group) => {
+          const currentFilter = searchFilters.find(
+            (filter) => filter.documentType === (group._type === RECOMMENDED_GROUP_TYPE ? '' : group._type),
+          );
+
+          return (
+            <li key={group.id}>
+              <button
+                type="button"
+                className={styles.groupItem}
+                onClick={() => scrollToGroup(group.id)}
+                aria-controls={group.id}
+                tabIndex={-1}>
+                <div className={styles.groupItemLabel}>
+                  {currentFilter?.icon && (
+                    <Icon name={currentFilter.icon} className={styles.groupItemIcon} title="" />
+                  )}
+                  <span>{currentFilter?.label || group.label}</span>
+                </div>
+                <span className={styles.groupItemCount}>{group.count}</span>
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+};
diff --git a/src/components/SearchDialog/SearchDialogContent/SearchFilters/index.ts b/src/components/SearchDialog/SearchDialogContent/SearchFilters/index.ts
new file mode 100644
index 00000000..4f778a58
--- /dev/null
+++ b/src/components/SearchDialog/SearchDialogContent/SearchFilters/index.ts
@@ -0,0 +1,3 @@
+import { SearchFilters } from './SearchFilters';
+
+export { SearchFilters };
diff --git a/src/components/SearchDialog/SearchDialogContent/SearchResults/SearchResults.module.css b/src/components/SearchDialog/SearchDialogContent/SearchResults/SearchResults.module.css
new file mode 100644
index 00000000..b12ad1a5
--- /dev/null
+++ b/src/components/SearchDialog/SearchDialogContent/SearchResults/SearchResults.module.css
@@ -0,0 +1,165 @@
+.root {
+  position: relative;
+  padding-block: var(--space-s);
+  padding-inline: var(--space-s);
+  overflow-y: auto;
+  height: 100%;
+  max-height: 100%;
+  overscroll-behavior: contain;
+}
+
+.resultsContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-s);
+}
+
+.resultsContainer .groupSection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3xs);
+
+  .groupTitle {
+    display: block;
+    padding: 0 var(--space-xs);
+    color: var(--color-text-secondary);
+    font-size: var(--text-body-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    scroll-margin-top: var(--space-s);
+  }
+}
+
+.groupSection .resultsList {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--space-3xs);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.hitItem .searchIconWrapper {
+  grid-area: icon;
+  display: flex;
+  width: 46px;
+  height: 46px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 100px;
+  background: var(--color-background-default);
+  color: var(--color-text-secondary);
+}
+
+.hitItem .searchIcon {
+  width: var(--search-icon-size);
+  height: var(--search-icon-size);
+  margin: 10px;
+  color: inherit;
+
+  & path {
+    fill: currentcolor;
+  }
+}
+
+.resultsList .hitItem {
+  display: block;
+  border-radius: var(--border-radius-s);
+  color: var(--color-text-secondary);
+
+  &:is(:hover, :focus, .resultLinkFocus) {
+    outline: none;
+    background-color: var(--color-background-default);
+
+    .searchIconWrapper {
+      background-color: var(--color-background-hover);
+    }
+  }
+}
+
+.hitItem .resultLink {
+  display: grid;
+  grid-template:
+    'icon content arrow' auto
+    '. description .' auto
+    / auto 1fr auto;
+  column-gap: var(--space-xs);
+  padding: var(--space-xs);
+  align-items: start;
+  color: inherit;
+  text-decoration: none;
+  border-radius: var(--border-radius-m);
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.hitItem .resultContent {
+  grid-area: content;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  color: var(--color-text-default);
+}
+
+.hitItem .resultTitleRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-3xs);
+  min-width: 0;
+}
+
+.hitItem .resultMethodTag {
+  align-items: center;
+  align-self: center;
+}
+
+.hitItem .resultDescription {
+  display: flex;
+  gap: var(--space-3xs);
+  align-items: center;
+  color: var(--color-text-secondary);
+  font-size: var(--text-body-xs);
+  opacity: 0.75;
+}
+
+.resultDescription .resultCategorySeparator {
+  height: 12px;
+  width: 12px;
+  color: inherit;
+
+  & path {
+    fill: currentcolor;
+  }
+}
+
+.hitItem .resultIcon {
+  grid-area: arrow;
+  width: 16px;
+  height: 16px;
+  color: var(--color-text-tertiary);
+  pointer-events: none;
+  align-self: center;
+
+  & path {
+    fill: currentcolor;
+  }
+}
+
+.noResultsContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(var(--dialog-content-height) - var(--dialog-header-height));
+}
+
+.noResults {
+  margin: 0;
+  padding: var(--space-m);
+  color: var(--color-text-tertiary);
+  text-align: center;
+}
diff --git a/src/components/SearchDialog/SearchDialogContent/SearchResults/SearchResults.tsx b/src/components/SearchDialog/SearchDialogContent/SearchResults/SearchResults.tsx
new file mode 100644
index 00000000..f51d218c
--- /dev/null
+++ b/src/components/SearchDialog/SearchDialogContent/SearchResults/SearchResults.tsx
@@ -0,0 +1,368 @@
+import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+
+import type { Route } from 'next';
+import type { IndexedSearchGroup, SearchFilterDefinition, SearchGroup, SearchHit } from '../../types';
+
+import { cx } from 'class-variance-authority';
+import { useRouter } from 'next/navigation';
+
+import { Tag } from '@/components';
+import { Link } from '@/components/Link';
+import { Icon } from '@/icons';
+import { isExternalHref } from '@/util/url';
+
+import { filtersData } from '../../utils/data';
+import {
+  buildSearchGroups,
+  formatGroupLabel,
+  getSearchGroupType,
+  RECOMMENDED_GROUP_TYPE,
+} from '../../utils/searchGroupUtils';
+import {
+  buildSearchResultDescriptionSegments,
+  getHitHref,
+  getHitMethod,
+  getHitTitle,
+  normalizeSearchValue,
+  shouldOpenSearchHitInNewTab,
+} from '../../utils/searchHitUtils';
+import styles from './SearchResults.module.css';
+
+const HTTP_METHODS = new Set<Tag.HttpRequestMethods>([
+  'delete',
+  'get',
+  'head',
+  'options',
+  'patch',
+  'post',
+  'put',
+  'trace',
+]);
+
+const searchFilters = filtersData as SearchFilterDefinition[];
+
+interface HitProps {
+  hit: SearchHit;
+  group?: SearchFilterDefinition;
+  groupType: string;
+  onClose: () => void;
+}
+
+interface RenderResultsSectionProps {
+  group: IndexedSearchGroup;
+  activeIndex: number;
+  itemRefs: React.MutableRefObject<Array<HTMLLIElement | null>>;
+  currentFilter?: SearchFilterDefinition;
+  onClose: () => void;
+}
+
+interface SearchResultsProps {
+  hits: SearchHit[];
+  isSearching: boolean;
+  onClose: () => void;
+  query: string;
+  searchError: string | null;
+  settledQuery: string;
+}
+
+const getHitCategory = (hit: SearchHit): string => {
+  return (
+    normalizeSearchValue(hit?.category) ||
+    normalizeSearchValue(hit?.section) ||
+    normalizeSearchValue(hit?.hierarchy?.lvl0)
+  );
+};
+
+const getHitObjectId = (hit: SearchHit, fallbackIndex: number): string => {
+  return (
+    normalizeSearchValue(hit?.objectID) ||
+    `${normalizeSearchValue(hit?._type || hit?.type || 'result')}-${getHitHref(hit) || getHitTitle(hit) || fallbackIndex}`
+  );
+};
+
+const isHttpMethod = (value: string): value is Tag.HttpRequestMethods => {
+  return HTTP_METHODS.has(value as Tag.HttpRequestMethods);
+};
+
+const navigateToHit = (slug: string, router: ReturnType<typeof useRouter>, opensInNewTab: boolean) => {
+  if (!slug) return;
+
+  if (opensInNewTab) {
+    window.open(slug, '_blank', 'noopener,noreferrer');
+    return;
+  }
+
+  if (isExternalHref(slug)) {
+    window.location.assign(slug);
+    return;
+  }
+
+  router.push(slug);
+};
+
+const Hit = ({ hit, group, groupType, onClose }: HitProps) => {
+  const href = getHitHref(hit);
+  const methodValue = getHitMethod(hit);
+  const method = isHttpMethod(methodValue) ? methodValue : undefined;
+  const title = getHitTitle(hit);
+  const opensInNewTab = shouldOpenSearchHitInNewTab(hit);
+  const isExternal = isExternalHref(href);
+  const hitType = getSearchGroupType(hit);
+  const hitFilter = searchFilters.find((filter) => filter.documentType === hitType);
+  const resultIcon = groupType === RECOMMENDED_GROUP_TYPE ? hitFilter?.icon : group?.icon;
+  const resultGroupLabel = formatGroupLabel(groupType === RECOMMENDED_GROUP_TYPE ? hitType : groupType);
+  const resultCategory = getHitCategory(hit);
+  const shouldShowCategory =
+    resultCategory.length > 0 && resultCategory.toLowerCase() !== resultGroupLabel.toLowerCase();
+  const descriptionSegments = buildSearchResultDescriptionSegments({
+    category: shouldShowCategory ? resultCategory : '',
+    groupLabel: resultGroupLabel,
+    hit,
+  });
+
+  const hitContent = (
+    <>
+      {resultIcon && (
+        <div className={styles.searchIconWrapper}>
+          <Icon name={resultIcon} className={styles.searchIcon} title="" />
+        </div>
+      )}
+      <div className={styles.resultContent}>
+        <span className={styles.resultTitleRow}>
+          <span className={styles.resultTitle}>{title}</span>
+          {method && <Tag method={method} size="small" className={styles.resultMethodTag} />}
+        </span>
+        <span className={styles.resultDescription}>
+          {descriptionSegments.map((segment, index) => (
+            <Fragment key={`${segment}-${index}`}>
+              {index > 0 && <Icon name="chevronRight" className={styles.resultCategorySeparator} title="" />}
+              {segment}
+            </Fragment>
+          ))}
+        </span>
+      </div>
+      <Icon
+        name={opensInNewTab ? 'external' : 'arrowRight'}
+        className={styles.resultIcon}
+        aria-hidden="true"
+        focusable="false"
+        title=""
+      />
+    </>
+  );
+
+  if (opensInNewTab) {
+    return (
+      <a href={href} className={styles.resultLink} tabIndex={-1} target="_blank" rel="noopener noreferrer">
+        {hitContent}
+      </a>
+    );
+  }
+
+  if (isExternal) {
+    return (
+      <a href={href} className={styles.resultLink} tabIndex={-1} onClick={onClose}>
+        {hitContent}
+      </a>
+    );
+  }
+
+  return (
+    <Link href={href as Route<string>} className={styles.resultLink} tabIndex={-1} onClick={onClose}>
+      {hitContent}
+    </Link>
+  );
+};
+
+const renderResultsSection = ({
+  group,
+  activeIndex,
+  itemRefs,
+  currentFilter,
+  onClose,
+}: RenderResultsSectionProps) => {
+  const items = group.items.map((item) => (
+    <li
+      key={getHitObjectId(item.hit, item.index)}
+      ref={(node) => {
+        itemRefs.current[item.index] = node;
+      }}
+      tabIndex={-1}
+      aria-current={item.index === activeIndex ? 'true' : undefined}
+      className={cx(styles.hitItem, item.index === activeIndex ? styles.resultLinkFocus : null)}>
+      <Hit hit={item.hit} group={currentFilter} groupType={group._type} onClose={onClose} />
+    </li>
+  ));
+
+  return (
+    <section key={group.id} className={styles.groupSection} aria-label={`${group.label} results`}>
+      <h3 id={group.id} className={styles.groupTitle}>
+        {group.label}
+      </h3>
+      <ul className={styles.resultsList}>{items}</ul>
+    </section>
+  );
+};
+
+const SearchResults = ({
+  hits,
+  isSearching,
+  onClose,
+  query,
+  searchError,
+  settledQuery,
+}: SearchResultsProps) => {
+  const router = useRouter();
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const itemRefs = useRef<Array<HTMLLIElement | null>>([]);
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
+
+  const groupedHits = useMemo(() => {
+    return buildSearchGroups(hits || []) as SearchGroup[];
+  }, [hits]);
+
+  const groupedHitsWithIndex = useMemo<IndexedSearchGroup[]>(() => {
+    let index = 0;
+
+    return groupedHits.map((group) => ({
+      ...group,
+      items: group.hits.map((hit) => ({ hit, index: index++ })),
+    }));
+  }, [groupedHits]);
+
+  const flattenedHits = useMemo<SearchHit[]>(
+    () => groupedHitsWithIndex.flatMap((group) => group.items.map((item) => item.hit)),
+    [groupedHitsWithIndex],
+  );
+
+  // Reset the active item
+  useEffect(() => {
+    if (!query || flattenedHits.length === 0) {
+      setActiveIndex(-1);
+      return;
+    }
+    setActiveIndex(0);
+  }, [query, flattenedHits.length]);
+
+  // Keep ref list aligned with the current number of hits
+  useEffect(() => {
+    itemRefs.current = itemRefs.current.slice(0, flattenedHits.length);
+  }, [flattenedHits.length]);
+
+  // Keep the active item in view without stealing focus from the search input
+  useEffect(() => {
+    if (activeIndex < 0) return;
+
+    const target = itemRefs.current[activeIndex];
+    const container = scrollContainerRef.current;
+    if (!target || !container) return;
+
+    // Manually scroll only the results container to avoid scrolling ancestor containers (like the dialog itself).
+    // scrollIntoView would scroll all ancestors, causing the dialog to shift.
+    const targetRect = target.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    const targetTop = targetRect.top - containerRect.top + container.scrollTop;
+
+    const desiredTop = targetTop - container.clientHeight / 2 + target.offsetHeight / 2;
+    const maxTop = Math.max(0, container.scrollHeight - container.clientHeight);
+    const clampedTop = Math.max(0, Math.min(maxTop, desiredTop));
+
+    container.scrollTo({ top: clampedTop, behavior: 'auto' });
+  }, [activeIndex]);
+
+  // Handle global keyboard navigation and selection
+  useEffect(() => {
+    if (!query || flattenedHits.length === 0) return;
+
+    const updateActiveIndex = (delta: number) => {
+      setActiveIndex((current) => {
+        if (flattenedHits.length === 0) return -1;
+
+        const nextIndex = current < 0 ? 0 : current + delta;
+        return Math.max(0, Math.min(flattenedHits.length - 1, nextIndex));
+      });
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) return;
+
+      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+        event.preventDefault();
+        updateActiveIndex(event.key === 'ArrowDown' ? 1 : -1);
+
+        return;
+      }
+
+      if (event.key === 'Tab') {
+        event.preventDefault();
+        updateActiveIndex(event.shiftKey ? -1 : 1);
+        return;
+      }
+
+      if (event.key === 'Enter' && activeIndex >= 0) {
+        event.preventDefault();
+        const activeItem = itemRefs.current[activeIndex];
+        const activeLink = activeItem?.querySelector<HTMLAnchorElement>('a[href]');
+
+        if (activeLink) {
+          activeLink.click();
+          return;
+        }
+
+        const hit = flattenedHits[activeIndex];
+        const href = getHitHref(hit);
+        if (href) {
+          const opensInNewTab = shouldOpenSearchHitInNewTab(hit);
+          if (!opensInNewTab) onClose();
+          navigateToHit(href, router, opensInNewTab);
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown, { capture: true });
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, { capture: true });
+    };
+  }, [activeIndex, flattenedHits, query, router, onClose]);
+
+  const showPrompt = query === '';
+  const showNoResults = query !== '' && query === settledQuery && hits.length === 0;
+
+  if (query && isSearching && hits.length === 0) return null;
+
+  // Show error message if Algolia is unavailable
+  if (showNoResults && searchError && query) {
+    return (
+      <div className={styles.noResultsContainer}>
+        <p className={styles.noResults}>{searchError}</p>
+      </div>
+    );
+  }
+
+  return showPrompt || showNoResults ? (
+    <div className={styles.noResultsContainer}>
+      <p className={styles.noResults}>{showPrompt ? 'Please enter a search term' : 'No results found'}</p>
+    </div>
+  ) : (
+    <div className={styles.root} ref={scrollContainerRef}>
+      <div className={styles.resultsContainer}>
+        {groupedHitsWithIndex.map((group) => {
+          const currentFilter = searchFilters.find(
+            (filter) => filter.documentType === (group._type === RECOMMENDED_GROUP_TYPE ? '' : group._type),
+          );
+
+          return renderResultsSection({
+            group,
+            activeIndex,
+            itemRefs,
+            currentFilter,
+            onClose,
+          });
+        })}
+      </div>
+    </div>
+  );
+};
+
+export { SearchResults };
diff --git a/src/components/SearchDialog/SearchDialogContent/SearchResults/index.ts b/src/components/SearchDialog/SearchDialogContent/SearchResults/index.ts
new file mode 100644
index 00000000..d76e6609
--- /dev/null
+++ b/src/components/SearchDialog/SearchDialogContent/SearchResults/index.ts
@@ -0,0 +1,3 @@
+import { SearchResults } from './SearchResults';
+
+export { SearchResults };
diff --git a/src/components/SearchDialog/SearchDialogContent/index.ts b/src/components/SearchDialog/SearchDialogContent/index.ts
new file mode 100644
index 00000000..c02e7760
--- /dev/null
+++ b/src/components/SearchDialog/SearchDialogContent/index.ts
@@ -0,0 +1,3 @@
+import { SearchDialogContent } from './SearchDialogContent';
+
+export { SearchDialogContent };
diff --git a/src/components/SearchDialog/SearchForm.module.css b/src/components/SearchDialog/SearchForm.module.css
deleted file mode 100644
index b096277a..00000000
--- a/src/components/SearchDialog/SearchForm.module.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.root {
-  flex: 1;
-  padding: var(--space-xs) 0;
-  border: 1px solid transparent;
-  border-radius: 0;
-  outline: none;
-  background-color: transparent;
-  font-family: var(--font-family-body);
-  font-size: var(--text-body-s);
-  text-overflow: ellipsis;
-
-  &::placeholder {
-    color: var(--brand-color-grey-7);
-  }
-}
-
-.root:focus {
-  border-color: transparent;
-}
diff --git a/src/components/SearchDialog/SearchForm.tsx b/src/components/SearchDialog/SearchForm.tsx
deleted file mode 100644
index b429ca85..00000000
--- a/src/components/SearchDialog/SearchForm.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useHotkeys } from 'react-hotkeys-hook';
-
-import styles from './SearchForm.module.css';
-
-export const SearchForm = ({ value, events }: SearchFormProps) => {
-  const ref = useHotkeys<HTMLDivElement>(
-    ['up', 'down', 'enter', 'home', 'end'],
-    (_, handler) => {
-      switch (handler.keys?.join('')) {
-        case 'up':
-          events.goUp();
-          break;
-        case 'down':
-          events.goDown();
-          break;
-        case 'enter':
-          events.goToResult();
-          break;
-        case 'home':
-          events.goToStart();
-          break;
-        case 'end':
-          events.goToEnd();
-          break;
-      }
-    },
-    {
-      enableOnFormTags: true,
-    },
-  );
-
-  return (
-    <input
-      className={styles.root}
-      name="search"
-      type="text"
-      autoFocus
-      placeholder="Search"
-      value={value}
-      onChange={(event) => events.onChange(event.target.value)}
-      required
-      data-vertical-key="true"
-      autoComplete="off"
-      autoCorrect="off"
-      spellCheck="false"
-      ref={ref}
-    />
-  );
-};
-
-type SearchFormProps = {
-  value: string;
-  events: {
-    onChange: (value: string) => void;
-    goUp: () => void;
-    goDown: () => void;
-    goToResult: () => void;
-    goToStart: () => void;
-    goToEnd: () => void;
-  };
-};
diff --git a/src/components/SearchDialog/SearchTrigger.module.css b/src/components/SearchDialog/SearchTrigger.module.css
deleted file mode 100644
index 5e49ba21..00000000
--- a/src/components/SearchDialog/SearchTrigger.module.css
+++ /dev/null
@@ -1,74 +0,0 @@
-.root {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: row;
-  max-width: var(--container-width-2xs);
-  gap: var(--space-xs);
-  cursor: pointer;
-  background-color: var(--base-color-grey-1000);
-
-  border: 1px solid var(--brand-color-grey-8);
-  height: 38px;
-  width: 38px;
-  border-radius: var(--border-radius-s);
-}
-
-.root.light {
-  background-color: var(--base-color-white);
-  color: var(--brand-color-grey-8);
-  border: 1px solid var(--brand-color-grey-3);
-}
-
-.icon {
-  opacity: 0.6;
-  flex-shrink: 0;
-  transform: translateY(-1px);
-}
-
-.content {
-  display: none;
-  flex-direction: column;
-}
-
-.kbd {
-  margin-left: auto;
-}
-
-.kbd abbr {
-  text-decoration: none;
-}
-
-@media (--phablet-up) {
-  .root {
-    background-color: var(--base-color-grey-1000);
-    color: var(--base-color-grey-500);
-    max-width: 260px;
-    width: 400px;
-    height: auto;
-    border: 1px solid var(--brand-color-grey-8);
-    padding: var(--space-2xs) var(--space-s) var(--space-2xs) var(--space-xs);
-  }
-
-  .root:hover {
-    background-color: var(--base-color-grey-900);
-  }
-
-  .icon {
-    opacity: 1;
-  }
-
-  .content {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-  }
-}
-
-@media (--phablet-up) {
-  .root.light {
-    background-color: var(--base-color-white);
-    color: var(--brand-color-grey-8);
-    border: 1px solid var(--brand-color-grey-3);
-  }
-}
diff --git a/src/components/SearchDialog/SearchTrigger.tsx b/src/components/SearchDialog/SearchTrigger.tsx
deleted file mode 100644
index 0b0080e2..00000000
--- a/src/components/SearchDialog/SearchTrigger.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Trigger } from '@radix-ui/react-dialog';
-import { cx } from 'class-variance-authority';
-import { usePathname } from 'next/navigation';
-
-import { Icon } from '@/icons';
-import { useModifierKey, useShowKeyboardHints } from '@/lib/hooks';
-
-import styles from './SearchTrigger.module.css';
-
-export const SearchTrigger = () => {
-  const pathname = usePathname();
-  const modifierKey = useModifierKey();
-  const showKeyboardHints = useShowKeyboardHints();
-
-  const isHome = pathname === '/';
-
-  return (
-    <Trigger aria-label="Search" className={cx(styles.root, isHome && styles.light)}>
-      <Icon name="search" className={styles.icon} title="" />
-      <div className={cx(styles.content, 'bodyS')}>
-        <span>Search</span>
-        {showKeyboardHints && (
-          <kbd className={styles.kbd}>
-            {modifierKey && (
-              <abbr title={modifierKey.label} className={'bodyS'}>
-                {modifierKey.symbol}
-              </abbr>
-            )}
-            K
-          </kbd>
-        )}
-      </div>
-    </Trigger>
-  );
-};
diff --git a/src/components/SearchDialog/SearchTrigger/SearchTrigger.module.css b/src/components/SearchDialog/SearchTrigger/SearchTrigger.module.css
new file mode 100644
index 00000000..af9a22c2
--- /dev/null
+++ b/src/components/SearchDialog/SearchTrigger/SearchTrigger.module.css
@@ -0,0 +1,147 @@
+.root {
+  --search-icon-size: 20px;
+
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: var(--space-xs);
+  width: 100%;
+  height: 38px;
+  padding-block: var(--space-2xs);
+  padding-inline: var(--space-xs);
+  cursor: pointer;
+  border: 0;
+  border: 1px solid var(--search-trigger-border);
+  border-radius: var(--border-radius-s);
+  background-color: var(--search-trigger-background, var(--color-background-light));
+  color: var(--search-trigger-placeholder-color, var(--search-trigger-icon-color, var(--brand-color-grey-8)));
+  transition: all var(--transition-fast);
+
+  &:hover {
+    background-color: var(--search-trigger-background-hover, var(--color-border));
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--brand-color-teal-5);
+    outline-offset: 2px;
+  }
+
+  .icon {
+    flex-shrink: 0;
+    color: currentcolor;
+    width: var(--search-icon-size);
+    height: var(--search-icon-size);
+
+    & path {
+      fill: currentcolor;
+    }
+  }
+
+  .placeholder {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    height: 100%;
+    min-width: 0;
+    text-align: left;
+    font-family: var(--font-family-body);
+    font-size: var(--text-body-s);
+    line-height: 1;
+    color: var(--search-trigger-placeholder-color, currentcolor);
+  }
+
+  .kbdHint {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3xs);
+    margin-left: auto;
+
+    & kbd {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-family: var(--font-family-body);
+      font-size: var(--text-body-2xs);
+      line-height: 1;
+      height: 20px;
+      padding: 0 var(--space-3xs);
+      border-radius: var(--border-radius-s);
+      border: 1px solid var(--search-trigger-kbd-border);
+      background-color: var(--search-trigger-kbd-background);
+      color: var(--search-trigger-kbd-color);
+    }
+
+    .kbdText {
+      display: inline-block;
+      transform: translateY(1px);
+    }
+  }
+}
+
+.root.compact {
+  justify-content: center;
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  padding: 0;
+  background-color: var(--search-trigger-compact-background);
+  border-radius: var(--border-radius-full);
+
+  .placeholder,
+  .kbdHint {
+    display: none;
+  }
+
+  &:hover {
+    background-color: var(
+      --search-trigger-compact-background-hover,
+      var(--search-trigger-background-hover, var(--color-border))
+    );
+    transition: var(--transition-default);
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+}
+
+.root.inline {
+  justify-content: flex-start;
+  width: 100%;
+}
+
+.themeLight {
+  --color-border: var(--color-background-light);
+  --search-trigger-background: var(--color-background-light);
+  --search-trigger-background-hover: var(--color-background-light);
+  --search-trigger-compact-background: var(--brand-color-grey-8);
+  --search-trigger-compact-background-hover: var(--color-border);
+  --search-trigger-icon-color: var(--brand-color-grey-8);
+  --search-trigger-border: var(--color-border);
+  --search-trigger-placeholder-color: var(--brand-color-grey-5);
+  --search-trigger-kbd-border: var(--brand-color-grey-3);
+  --search-trigger-kbd-background: transparent;
+  --search-trigger-kbd-color: var(--brand-color-grey-6);
+}
+
+.themeDark {
+  --color-border: var(--brand-color-grey-8);
+  --search-trigger-background: var(--base-color-grey-1000);
+  --search-trigger-background-hover: var(--base-color-grey-1000);
+  --search-trigger-compact-background: var(--brand-color-grey-9);
+  --search-trigger-compact-background-hover: var(--brand-color-grey-8);
+  --search-trigger-icon-color: var(--brand-color-white);
+  --search-trigger-border: var(--color-border);
+  --search-trigger-placeholder-color: var(--brand-color-grey-5);
+  --search-trigger-kbd-border: var(--color-border);
+  --search-trigger-kbd-background: transparent;
+  --search-trigger-kbd-color: var(--brand-color-grey-5);
+}
diff --git a/src/components/SearchDialog/SearchTrigger/SearchTrigger.tsx b/src/components/SearchDialog/SearchTrigger/SearchTrigger.tsx
new file mode 100644
index 00000000..77fe38c5
--- /dev/null
+++ b/src/components/SearchDialog/SearchTrigger/SearchTrigger.tsx
@@ -0,0 +1,38 @@
+import type { SearchTriggerVariant } from '../types';
+
+import { Trigger } from '@radix-ui/react-dialog';
+import { cx } from 'class-variance-authority';
+
+import { Icon } from '@/icons';
+
+import styles from './SearchTrigger.module.css';
+
+type SearchTriggerTheme = 'light' | 'dark';
+
+interface SearchTriggerProps {
+  className?: string;
+  theme?: SearchTriggerTheme;
+  variant?: SearchTriggerVariant;
+}
+
+export const SearchTrigger = ({ className, theme = 'light', variant = 'inline' }: SearchTriggerProps) => (
+  <Trigger
+    aria-label="Search"
+    className={cx(
+      styles.root,
+      theme === 'dark' ? styles.themeDark : styles.themeLight,
+      styles[variant],
+      className,
+    )}>
+    <Icon name="search" className={styles.icon} title="" />
+    <span className={styles.placeholder}>Search</span>
+    <span className={styles.kbdHint}>
+      <kbd>
+        <span className={styles.kbdText}>Ctrl</span>
+      </kbd>
+      <kbd>
+        <span className={styles.kbdText}>K</span>
+      </kbd>
+    </span>
+  </Trigger>
+);
diff --git a/src/components/SearchDialog/SearchTrigger/index.ts b/src/components/SearchDialog/SearchTrigger/index.ts
new file mode 100644
index 00000000..866dc98e
--- /dev/null
+++ b/src/components/SearchDialog/SearchTrigger/index.ts
@@ -0,0 +1,3 @@
+import { SearchTrigger } from './SearchTrigger';
+
+export { SearchTrigger };
diff --git a/src/components/SearchDialog/index.ts b/src/components/SearchDialog/index.ts
index f8595482..f171bf74 100644
--- a/src/components/SearchDialog/index.ts
+++ b/src/components/SearchDialog/index.ts
@@ -1,3 +1,3 @@
-export * from './SearchDialog';
-export * from './SearchForm';
-export * from './SearchTrigger';
+import { SearchDialog } from './SearchDialog';
+
+export { SearchDialog };
diff --git a/src/components/SearchDialog/types.ts b/src/components/SearchDialog/types.ts
new file mode 100644
index 00000000..35659af5
--- /dev/null
+++ b/src/components/SearchDialog/types.ts
@@ -0,0 +1,68 @@
+// Copyright 2026 Cloudsmith Ltd
+
+import type { IconName } from '@/icons';
+
+export type SearchSource = 'docs' | 'website';
+export type SearchTriggerVariant = 'compact' | 'inline';
+
+export interface SearchHitHierarchy {
+  lvl0?: string;
+  lvl1?: string;
+  lvl2?: string;
+  lvl3?: string;
+  lvl4?: string;
+  lvl5?: string;
+  lvl6?: string;
+}
+
+export interface SearchRankingInfo {
+  userScore?: number;
+  score?: number;
+}
+
+export interface SearchHit {
+  objectID?: string;
+  slug?: string;
+  title?: string;
+  name?: string;
+  category?: string;
+  section?: string;
+  method?: string;
+  url?: string;
+  url_without_anchor?: string;
+  _type?: string;
+  type?: string;
+  documentType?: string;
+  docType?: string;
+  hierarchy?: SearchHitHierarchy;
+  _rankingInfo?: SearchRankingInfo;
+  searchSource?: SearchSource;
+  [key: string]: unknown;
+}
+
+export interface SearchGroup {
+  id: string;
+  label: string;
+  _type: string;
+  hits: SearchHit[];
+  count: number;
+}
+
+export interface IndexedSearchGroupItem {
+  hit: SearchHit;
+  index: number;
+}
+
+export interface IndexedSearchGroup {
+  id: string;
+  label: string;
+  _type: string;
+  count: number;
+  items: IndexedSearchGroupItem[];
+}
+
+export interface SearchFilterDefinition {
+  label: string;
+  icon: IconName;
+  documentType: string;
+}
diff --git a/src/components/SearchDialog/utils/data.js b/src/components/SearchDialog/utils/data.js
new file mode 100644
index 00000000..3f6837a8
--- /dev/null
+++ b/src/components/SearchDialog/utils/data.js
@@ -0,0 +1,49 @@
+export const filtersData = [
+  {
+    label: 'API Reference',
+    icon: 'utility/api',
+    documentType: 'apiReference',
+  },
+  {
+    label: 'Documentation',
+    icon: 'utility/documentation',
+    documentType: 'documentation',
+  },
+  { label: 'Blog', icon: 'utility/documentation', documentType: 'blog' },
+  {
+    label: 'Customer stories',
+    icon: 'info',
+    documentType: 'customerStory',
+  },
+  { label: 'Changelog', icon: 'action/check', documentType: 'changelog' },
+  { label: 'Conference', icon: 'question', documentType: 'conference' }, // in-person event
+  { label: 'Formats', icon: 'format/generic', documentType: 'format' },
+  {
+    label: 'Guides',
+    icon: 'utility/guide',
+    documentType: 'reportsAndGuidesPage',
+  },
+  {
+    label: 'Integrations',
+    icon: 'integration/githubactions',
+    documentType: 'integration',
+  },
+  { label: 'Pricing', icon: 'info', documentType: 'pricingPage' },
+  { label: 'Press', icon: 'info', documentType: 'pressRelease' },
+  { label: 'Product', icon: 'info', documentType: 'productPage' },
+  { label: 'Recommended', icon: 'action/check', documentType: '' },
+  {
+    label: 'Resources',
+    icon: 'utility/documentation',
+    documentType: 'campaignPage',
+  },
+  { label: 'Solutions', icon: 'question', documentType: 'solution' },
+  { label: 'Switch', icon: 'arrowRight', documentType: 'switchPage' },
+  { label: 'Webinars', icon: 'action/play', documentType: 'webinar' },
+  { label: 'Workshops', icon: 'question', documentType: 'workshop' },
+  {
+    label: 'Cloudsmith website',
+    icon: 'utility/documentation',
+    documentType: 'cloudsmithWebsite',
+  },
+];
diff --git a/src/components/SearchDialog/utils/searchGroupUtils.js b/src/components/SearchDialog/utils/searchGroupUtils.js
new file mode 100644
index 00000000..fb611634
--- /dev/null
+++ b/src/components/SearchDialog/utils/searchGroupUtils.js
@@ -0,0 +1,211 @@
+import { slugify, titleCase } from '../../../util/strings';
+import { isExternalHref } from '../../../util/url';
+import { filtersData } from './data';
+import {
+  getDocsPageHref,
+  getHitHref,
+  getHitType,
+  normalizeSearchValue,
+  SEARCH_SOURCE_FIELD,
+} from './searchHitUtils';
+
+// Default label for ungrouped or unrecognized document types
+const DEFAULT_GROUP_LABEL = 'Other';
+const RECOMMENDED_GROUP_TYPE = 'recommended';
+const DOCS_GROUP_TYPES = new Set(['documentation', 'apiReference']);
+const CLOUDSMITH_WEBSITE_GROUP_TYPE = 'cloudsmithWebsite';
+const GUIDES_GROUP_TYPE = 'reportsAndGuidesPage';
+const FILTER_ORDER_BY_TYPE = new Map(
+  filtersData.map(({ documentType }, index) => [documentType || RECOMMENDED_GROUP_TYPE, index]),
+);
+const RECOMMENDED_FILTER_ORDER = -1;
+const CLOUDSMITH_WEBSITE_FILTER_ORDER = Number.MAX_SAFE_INTEGER;
+
+// Map of document types that should be merged into other types
+// e.g., platformFeaturesPage results are grouped with productPage, generic "page" types with "Resources"
+const DOCUMENT_TYPE_OVERRIDES = new Map([
+  ['api', 'apiReference'],
+  ['apiReferencePage', 'apiReference'],
+  ['docs', 'documentation'],
+  ['documentationPage', 'documentation'],
+  ['platformFeaturesPage', 'productPage'],
+  ['page', 'campaignPage'],
+  ['reference', 'apiReference'],
+]);
+
+// Map of document types to their display labels from filter data
+const LABELS_BY_TYPE = new Map(filtersData.map(({ documentType, label }) => [documentType, label]));
+
+const getSearchGroupType = (hit) => {
+  const searchSource = normalizeSearchValue(hit?.[SEARCH_SOURCE_FIELD]);
+  const href = getHitHref(hit).toLowerCase();
+
+  if (searchSource === 'website') return CLOUDSMITH_WEBSITE_GROUP_TYPE;
+
+  if (searchSource === 'docs') {
+    if (href.startsWith('/api')) return 'apiReference';
+    if (href.startsWith('/guides')) return GUIDES_GROUP_TYPE;
+    return 'documentation';
+  }
+
+  return resolveGroupType(getHitType(hit));
+};
+
+// Resolves the final document type to use for grouping, applying any overrides
+const resolveGroupType = (value) => DOCUMENT_TYPE_OVERRIDES.get(value) ?? normalizeSearchValue(value);
+
+/**
+ * Formats a document type value into a human-readable group label.
+ * Checks for a predefined label first, otherwise converts to title case.
+ * Returns DEFAULT_GROUP_LABEL if the value is empty or invalid.
+ */
+const formatGroupLabel = (value) => {
+  const normalized = normalizeSearchValue(value);
+  if (value === RECOMMENDED_GROUP_TYPE)
+    return LABELS_BY_TYPE.get(RECOMMENDED_GROUP_TYPE) || DEFAULT_GROUP_LABEL;
+  if (!normalized) return DEFAULT_GROUP_LABEL;
+
+  const label = LABELS_BY_TYPE.get(value);
+  if (label) return label.trim() || DEFAULT_GROUP_LABEL;
+
+  return titleCase(normalized) || DEFAULT_GROUP_LABEL;
+};
+
+// Generates a unique, URL-safe ID for a search result group based on its label
+const getGroupId = (value) => {
+  const label = formatGroupLabel(value) || DEFAULT_GROUP_LABEL;
+  return `search-group-${slugify(label)}`;
+};
+
+/**
+ * Groups an array of search hits by their document type.
+ * Each group contains an ID, label, type, array of hits, and count.
+ * Applies type overrides and merges results as needed.
+ * Returns groups sorted alphabetically by label.
+ *
+ * @param {Array} hits - Array of search hit objects with _type property
+ * @returns {Array} Array of group objects with structure:
+ *   - id: unique identifier for the group
+ *   - label: display label for the group
+ *   - _type: normalized document type
+ *   - hits: array of search hits in this group
+ *   - count: number of hits in the group
+ */
+const groupHitsByType = (hits = []) => {
+  const grouped = new Map();
+
+  for (const hit of hits) {
+    const groupingType = getSearchGroupType(hit);
+    const id = getGroupId(groupingType);
+    const label = formatGroupLabel(groupingType);
+
+    // Create group entry if it doesn't exist
+    if (!grouped.has(id)) {
+      grouped.set(id, {
+        id,
+        label,
+        _type: groupingType,
+        hits: [],
+        count: 0,
+      });
+    }
+
+    // Add hit to group and update count
+    const entry = grouped.get(id);
+    entry.hits.push(hit);
+    entry.count += 1;
+  }
+
+  // Return groups sorted alphabetically by label before applying display order.
+  return Array.from(grouped.values()).sort((a, b) => a.label.localeCompare(b.label));
+};
+
+const isDocsGroupType = (value) => DOCS_GROUP_TYPES.has(resolveGroupType(value));
+
+const isDocsHit = (hit) => {
+  if (hit?.[SEARCH_SOURCE_FIELD] === 'docs') return true;
+
+  const slug = getHitHref(hit);
+  if (!slug) return false;
+
+  return !isExternalHref(slug) && isDocsGroupType(getHitType(hit));
+};
+
+const getRecommendedHits = (hits = [], limit = 5) => {
+  if (limit <= 0 || hits.length === 0) return [];
+
+  const recommendedHits = [];
+  const seenDocsPages = new Set();
+
+  for (const hit of hits) {
+    if (!isDocsHit(hit)) continue;
+
+    const docsPageHref = getDocsPageHref(hit);
+    const dedupeKey = docsPageHref || getHitHref(hit);
+    if (!dedupeKey || seenDocsPages.has(dedupeKey)) continue;
+
+    seenDocsPages.add(dedupeKey);
+    recommendedHits.push(hit);
+
+    if (recommendedHits.length >= limit) break;
+  }
+
+  return recommendedHits;
+};
+
+const buildSearchGroups = (hits = []) => {
+  const recommendedHits = getRecommendedHits(hits);
+  const groups = sortSearchGroupsForFilters(groupHitsByType(hits));
+
+  if (recommendedHits.length === 0) return groups;
+
+  return [
+    {
+      id: getGroupId(RECOMMENDED_GROUP_TYPE),
+      label: titleCase(RECOMMENDED_GROUP_TYPE),
+      _type: RECOMMENDED_GROUP_TYPE,
+      hits: recommendedHits,
+      count: recommendedHits.length,
+    },
+    ...groups,
+  ];
+};
+
+const sortSearchGroupsForFilters = (groups = []) => {
+  return [...groups].sort((left, right) => {
+    const leftOrder =
+      left._type === RECOMMENDED_GROUP_TYPE
+        ? RECOMMENDED_FILTER_ORDER
+        : left._type === CLOUDSMITH_WEBSITE_GROUP_TYPE
+          ? CLOUDSMITH_WEBSITE_FILTER_ORDER
+          : (FILTER_ORDER_BY_TYPE.get(left._type) ?? Number.MAX_SAFE_INTEGER);
+    const rightOrder =
+      right._type === RECOMMENDED_GROUP_TYPE
+        ? RECOMMENDED_FILTER_ORDER
+        : right._type === CLOUDSMITH_WEBSITE_GROUP_TYPE
+          ? CLOUDSMITH_WEBSITE_FILTER_ORDER
+          : (FILTER_ORDER_BY_TYPE.get(right._type) ?? Number.MAX_SAFE_INTEGER);
+
+    if (leftOrder !== rightOrder) return leftOrder - rightOrder;
+
+    if (left._type === CLOUDSMITH_WEBSITE_GROUP_TYPE) return 1;
+    if (right._type === CLOUDSMITH_WEBSITE_GROUP_TYPE) return -1;
+
+    return left.label.localeCompare(right.label);
+  });
+};
+
+export {
+  CLOUDSMITH_WEBSITE_GROUP_TYPE,
+  DEFAULT_GROUP_LABEL,
+  GUIDES_GROUP_TYPE,
+  RECOMMENDED_GROUP_TYPE,
+  buildSearchGroups,
+  formatGroupLabel,
+  getGroupId,
+  getRecommendedHits,
+  getSearchGroupType,
+  groupHitsByType,
+  resolveGroupType,
+  sortSearchGroupsForFilters,
+};
diff --git a/src/components/SearchDialog/utils/searchHitUtils.js b/src/components/SearchDialog/utils/searchHitUtils.js
new file mode 100644
index 00000000..734052b2
--- /dev/null
+++ b/src/components/SearchDialog/utils/searchHitUtils.js
@@ -0,0 +1,431 @@
+import { quickNavIgnoredAnchorFragments } from '@/lib/constants/quickNav';
+import { slugify, titleCase } from '@/util/strings';
+import { isExternalHref } from '@/util/url';
+
+const DOCS_SITE_ORIGIN = process.env.NEXT_PUBLIC_DOCS_SITE_ORIGIN || 'https://docs.cloudsmith.com';
+const MARKETING_SITE_ORIGIN = process.env.NEXT_PUBLIC_MARKETING_SITE_ORIGIN || 'https://cloudsmith.com';
+const DOCS_SITE_URL = new URL(DOCS_SITE_ORIGIN);
+const MARKETING_SITE_URL = new URL(MARKETING_SITE_ORIGIN);
+const SEARCH_SOURCE_FIELD = 'searchSource';
+const DOCS_SEARCH_SOURCE = 'docs';
+const WEBSITE_SEARCH_SOURCE = 'website';
+const DOCS_BREADCRUMB_LABEL = 'Documentation';
+const DOCS_HIERARCHY_LEVEL_KEYS = ['lvl6', 'lvl5', 'lvl4', 'lvl3', 'lvl2', 'lvl1', 'lvl0'];
+const HTTP_METHODS = new Set(['delete', 'get', 'head', 'options', 'patch', 'post', 'put', 'trace']);
+
+const normalizeSearchValue = (value) => (typeof value === 'string' ? value.trim() : '');
+
+const normalizeComparableSearchValue = (value) => {
+  const normalizedValue = normalizeSearchValue(value);
+  if (!normalizedValue) return '';
+
+  return slugify(decodeURIComponent(normalizedValue).replace(/\+/g, ' '));
+};
+
+const getHitHref = (hit) => normalizeSearchValue(hit?.slug);
+
+const decodeSearchValue = (value) => {
+  const normalizedValue = normalizeSearchValue(value);
+  if (!normalizedValue) return '';
+
+  try {
+    return decodeURIComponent(normalizedValue);
+  } catch {
+    return normalizedValue;
+  }
+};
+
+const getReadableAnchorTitle = (value) => {
+  const decodedValue = decodeSearchValue(value);
+  if (!decodedValue) return '';
+
+  return titleCase(decodedValue.replace(/[-_]+/g, ' '));
+};
+
+const getDocsPageDisplayTitle = (hit) => {
+  const pageDisplayTitle = normalizeSearchValue(hit?.title) || normalizeSearchValue(hit?.name);
+  const normalizedPageDisplayTitle = normalizeComparableSearchValue(pageDisplayTitle);
+  const sectionTitle = normalizeComparableSearchValue(getDocsSectionSlug(hit));
+  const pageSlugTitle = normalizeSearchValue(getReadableDocsPageSlug(hit));
+  const normalizedPageSlugTitle = normalizeComparableSearchValue(pageSlugTitle);
+
+  if (
+    pageDisplayTitle &&
+    normalizedPageDisplayTitle !== normalizeComparableSearchValue(DOCS_BREADCRUMB_LABEL) &&
+    (normalizedPageDisplayTitle !== sectionTitle || normalizedPageSlugTitle === sectionTitle)
+  ) {
+    return pageDisplayTitle;
+  }
+
+  const hierarchyLevels = ['lvl1', 'lvl2', 'lvl3', 'lvl4', 'lvl5', 'lvl6'];
+
+  for (const levelKey of hierarchyLevels) {
+    const candidate = normalizeSearchValue(hit?.hierarchy?.[levelKey]);
+    if (!candidate) continue;
+
+    const normalizedCandidate = normalizeComparableSearchValue(candidate);
+
+    if (normalizedCandidate === normalizeComparableSearchValue(DOCS_BREADCRUMB_LABEL)) {
+      continue;
+    }
+    if (
+      normalizedCandidate === sectionTitle &&
+      normalizedPageSlugTitle &&
+      normalizedPageSlugTitle !== sectionTitle
+    ) {
+      continue;
+    }
+
+    return candidate;
+  }
+
+  if (pageSlugTitle && normalizedPageSlugTitle !== sectionTitle) {
+    return pageSlugTitle;
+  }
+
+  const pageTitleFromSlug =
+    getDocsBreadcrumbScope(hit) === 'documentation' ? getDocsSectionSlug(hit) : pageSlugTitle;
+
+  return normalizeSearchValue(pageTitleFromSlug);
+};
+
+const getDocsAnchorTitle = (hit) => {
+  const pageDisplayTitle = getDocsPageDisplayTitle(hit);
+  const pageTitle = normalizeComparableSearchValue(pageDisplayTitle);
+  const sectionTitle = normalizeComparableSearchValue(getDocsSectionSlug(hit));
+  const anchorFragment = normalizeComparableSearchValue(getDocsAnchorFragment(hit));
+  const pageSlugSegment = normalizeComparableSearchValue(getDocsPageSlugSegment(hit));
+
+  if (isIgnoredDocsAnchorFragment(getDocsAnchorFragment(hit))) return '';
+
+  if (
+    pageDisplayTitle &&
+    anchorFragment &&
+    (anchorFragment === pageTitle || anchorFragment === pageSlugSegment)
+  ) {
+    return pageDisplayTitle;
+  }
+
+  for (const levelKey of DOCS_HIERARCHY_LEVEL_KEYS) {
+    const candidate = normalizeSearchValue(hit?.hierarchy?.[levelKey]);
+    if (!candidate) continue;
+
+    if (normalizeComparableSearchValue(candidate) === normalizeComparableSearchValue(DOCS_BREADCRUMB_LABEL)) {
+      continue;
+    }
+    if (pageTitle && normalizeComparableSearchValue(candidate) === pageTitle) continue;
+    if (sectionTitle && normalizeComparableSearchValue(candidate) === sectionTitle) continue;
+
+    return candidate;
+  }
+
+  const anchorTitle = getReadableAnchorTitle(getDocsAnchorFragment(hit));
+  if (!anchorTitle) return '';
+
+  if (pageTitle && normalizeComparableSearchValue(anchorTitle) === pageTitle) return '';
+
+  return anchorTitle;
+};
+
+const getHitTitle = (hit) => {
+  if (normalizeSearchValue(hit?.[SEARCH_SOURCE_FIELD]) === DOCS_SEARCH_SOURCE) {
+    if (getHitHref(hit).includes('#')) {
+      const anchorTitle = getDocsAnchorTitle(hit);
+      if (anchorTitle) return anchorTitle;
+    }
+
+    const pageDisplayTitle = getDocsPageDisplayTitle(hit);
+    if (pageDisplayTitle) return pageDisplayTitle;
+  }
+
+  return (
+    normalizeSearchValue(hit?.title) ||
+    normalizeSearchValue(hit?.name) ||
+    normalizeSearchValue(hit?.hierarchy?.lvl2) ||
+    normalizeSearchValue(hit?.hierarchy?.lvl1) ||
+    normalizeSearchValue(hit?.hierarchy?.lvl0)
+  );
+};
+
+const getHitType = (hit) =>
+  normalizeSearchValue(hit?._type ?? hit?.type ?? hit?.documentType ?? hit?.docType);
+
+const getHitMethod = (hit) => {
+  const method = normalizeSearchValue(hit?.method).toLowerCase();
+
+  return HTTP_METHODS.has(method) ? method : '';
+};
+
+const getRelativeDocsHref = (href) => {
+  const normalizedHref = normalizeSearchValue(href);
+  if (!isExternalHref(normalizedHref)) return normalizedHref;
+
+  try {
+    const url = new URL(normalizedHref);
+    if (url.origin !== DOCS_SITE_URL.origin) return normalizedHref;
+
+    return `${url.pathname}${url.search}${url.hash}` || '/';
+  } catch {
+    return normalizedHref;
+  }
+};
+
+const getDocsPageHref = (hit) => {
+  const urlWithoutAnchor = normalizeSearchValue(hit?.url_without_anchor);
+  const href = urlWithoutAnchor || getHitHref(hit);
+  const normalizedHref = getRelativeDocsHref(href);
+  if (!normalizedHref) return '';
+
+  try {
+    const url = new URL(normalizedHref, DOCS_SITE_URL);
+    return `${url.pathname}${url.search}` || '/';
+  } catch {
+    return normalizedHref.split('#')[0];
+  }
+};
+
+const getDocsAnchorFragment = (hit) => {
+  const href = getHitHref(hit);
+  if (!href) return '';
+
+  try {
+    return new URL(href, DOCS_SITE_URL).hash.replace(/^#/, '');
+  } catch {
+    const hashIndex = href.indexOf('#');
+    return hashIndex >= 0 ? href.slice(hashIndex + 1) : '';
+  }
+};
+
+const isIgnoredDocsAnchorFragment = (value) => {
+  const anchorFragment = normalizeSearchValue(value);
+  if (!anchorFragment) return false;
+
+  return quickNavIgnoredAnchorFragments.has(anchorFragment);
+};
+
+const isIgnoredDocsAnchorHit = (hit) => {
+  if (normalizeSearchValue(hit?.[SEARCH_SOURCE_FIELD]) !== DOCS_SEARCH_SOURCE) return false;
+
+  return isIgnoredDocsAnchorFragment(getDocsAnchorFragment(hit));
+};
+
+const getDocsPageSlugSegment = (hit) => {
+  const pageHref = getDocsPageHref(hit);
+  if (!pageHref) return '';
+
+  try {
+    const pathnameSegments = new URL(pageHref, DOCS_SITE_URL).pathname.split('/').filter(Boolean);
+    return pathnameSegments.at(-1) || '';
+  } catch {
+    return pageHref.split('#')[0].split('/').filter(Boolean).at(-1) || '';
+  }
+};
+
+const getReadableDocsPageSlug = (hit) => {
+  const pageSlugSegment = decodeSearchValue(getDocsPageSlugSegment(hit));
+  if (!pageSlugSegment) return '';
+
+  return titleCase(pageSlugSegment);
+};
+
+const isDocsAnchorHit = (hit) => {
+  if (normalizeSearchValue(hit?.[SEARCH_SOURCE_FIELD]) !== DOCS_SEARCH_SOURCE) return false;
+
+  return getHitHref(hit).includes('#');
+};
+
+const isDocsPageEquivalentAnchorHit = (anchorHit, pageHit) => {
+  if (normalizeSearchValue(anchorHit?.[SEARCH_SOURCE_FIELD]) !== DOCS_SEARCH_SOURCE) return false;
+  if (normalizeSearchValue(pageHit?.[SEARCH_SOURCE_FIELD]) !== DOCS_SEARCH_SOURCE) return false;
+
+  const anchorHref = getHitHref(anchorHit);
+  if (!anchorHref.includes('#')) return false;
+
+  const anchorTitle = normalizeComparableSearchValue(getHitTitle(anchorHit));
+  const pageTitle = normalizeComparableSearchValue(getHitTitle(pageHit));
+  if (anchorTitle && pageTitle && anchorTitle === pageTitle) return true;
+
+  const anchorFragment = normalizeComparableSearchValue(getDocsAnchorFragment(anchorHit));
+  const pageSlugSegment = normalizeComparableSearchValue(getDocsPageSlugSegment(pageHit));
+
+  return Boolean(anchorFragment && pageSlugSegment && anchorFragment === pageSlugSegment);
+};
+
+const dedupeMergedSearchHits = (hits = []) => {
+  const docsPageHitsByHref = new Map();
+  const filteredHits = hits.filter((hit) => !isIgnoredDocsAnchorHit(hit));
+
+  for (const hit of filteredHits) {
+    if (normalizeSearchValue(hit?.[SEARCH_SOURCE_FIELD]) !== DOCS_SEARCH_SOURCE) continue;
+
+    const href = getHitHref(hit);
+    if (!href || href.includes('#')) continue;
+
+    const docsPageHref = getDocsPageHref(hit);
+    if (!docsPageHref || docsPageHitsByHref.has(docsPageHref)) continue;
+
+    docsPageHitsByHref.set(docsPageHref, hit);
+  }
+
+  const dedupedDocsHits = filteredHits.filter((hit) => {
+    if (normalizeSearchValue(hit?.[SEARCH_SOURCE_FIELD]) !== DOCS_SEARCH_SOURCE) return true;
+
+    const href = getHitHref(hit);
+    if (!href || !href.includes('#')) return true;
+
+    const docsPageHref = getDocsPageHref(hit);
+    const pageHit = docsPageHitsByHref.get(docsPageHref);
+
+    if (!pageHit) return true;
+
+    return !isDocsPageEquivalentAnchorHit(hit, pageHit);
+  });
+
+  const seenHitDestinations = new Set();
+
+  return dedupedDocsHits.filter((hit) => {
+    const href = getHitHref(hit);
+    if (!href) return true;
+
+    const searchSource = normalizeSearchValue(hit?.[SEARCH_SOURCE_FIELD]) || 'unknown';
+    const dedupeKey = `${searchSource}:${href}`;
+
+    if (seenHitDestinations.has(dedupeKey)) return false;
+
+    seenHitDestinations.add(dedupeKey);
+    return true;
+  });
+};
+
+const normalizeMergedSearchHref = (href, source) => {
+  const normalizedHref = normalizeSearchValue(href);
+  if (!normalizedHref) return '';
+
+  const docsHref = getRelativeDocsHref(normalizedHref);
+  if (docsHref !== normalizedHref) return docsHref;
+  if (normalizeSearchValue(source) !== WEBSITE_SEARCH_SOURCE) return normalizedHref;
+
+  try {
+    return new URL(normalizedHref, MARKETING_SITE_URL).toString();
+  } catch {
+    return normalizedHref;
+  }
+};
+
+const shouldOpenSearchHitInNewTab = (hit) => {
+  return normalizeSearchValue(hit?.[SEARCH_SOURCE_FIELD]) === WEBSITE_SEARCH_SOURCE;
+};
+
+const getUniqueSearchSegments = (segments = []) => {
+  const uniqueSegments = [];
+  const seen = new Set();
+
+  for (const segment of segments) {
+    const normalizedSegment = normalizeSearchValue(segment);
+    if (!normalizedSegment) continue;
+
+    const key = normalizedSegment.toLowerCase();
+    if (seen.has(key)) continue;
+
+    seen.add(key);
+    uniqueSegments.push(normalizedSegment);
+  }
+
+  return uniqueSegments;
+};
+
+const getWebsiteBreadcrumbSegment = (hit) => {
+  if (normalizeSearchValue(hit?.[SEARCH_SOURCE_FIELD]) !== WEBSITE_SEARCH_SOURCE) return '';
+
+  const href = getHitHref(hit);
+  if (!href) return '';
+
+  try {
+    const url = new URL(href, MARKETING_SITE_URL);
+    const firstSegment = url.pathname.split('/').filter(Boolean).at(0);
+    return getReadableAnchorTitle(firstSegment);
+  } catch {
+    return '';
+  }
+};
+
+const getDocsSectionSlug = (hit) => {
+  try {
+    const url = new URL(getDocsPageHref(hit), DOCS_SITE_URL);
+    return titleCase(decodeURIComponent(url.pathname.split('/').filter(Boolean).at(0) || ''));
+  } catch {
+    return '';
+  }
+};
+
+const getDocsBreadcrumbScope = (hit) => {
+  const sectionSlug = normalizeComparableSearchValue(getDocsSectionSlug(hit));
+
+  if (sectionSlug === 'guides') return 'guides';
+  if (sectionSlug === 'api') return 'api';
+  return 'documentation';
+};
+
+const getScopedSearchCategory = (category, hit) => {
+  const normalizedCategory = normalizeSearchValue(category);
+  if (!normalizedCategory) return '';
+
+  if (
+    normalizeSearchValue(hit?.[SEARCH_SOURCE_FIELD]) === DOCS_SEARCH_SOURCE &&
+    getDocsBreadcrumbScope(hit) !== 'documentation' &&
+    normalizeComparableSearchValue(normalizedCategory) ===
+      normalizeComparableSearchValue(DOCS_BREADCRUMB_LABEL)
+  ) {
+    return '';
+  }
+
+  return normalizedCategory;
+};
+
+const buildSearchResultDescriptionSegments = ({ category, groupLabel, hit }) => {
+  if (normalizeSearchValue(hit?.[SEARCH_SOURCE_FIELD]) !== DOCS_SEARCH_SOURCE) {
+    return getUniqueSearchSegments([
+      groupLabel,
+      getWebsiteBreadcrumbSegment(hit),
+      getScopedSearchCategory(category, hit),
+    ]);
+  }
+
+  const includePageTitle = isDocsAnchorHit(hit);
+  const hitTitle = normalizeComparableSearchValue(getHitTitle(hit));
+  const docsSectionTitle = getDocsSectionSlug(hit);
+  const includeSectionTitle =
+    includePageTitle || normalizeComparableSearchValue(docsSectionTitle) !== hitTitle;
+
+  if (getDocsBreadcrumbScope(hit) === 'guides') {
+    return getUniqueSearchSegments([
+      groupLabel,
+      includePageTitle ? getReadableDocsPageSlug(hit) : '',
+      getScopedSearchCategory(category, hit),
+    ]);
+  }
+
+  if (getDocsBreadcrumbScope(hit) !== 'documentation') {
+    return getUniqueSearchSegments([groupLabel, getScopedSearchCategory(category, hit)]);
+  }
+
+  return getUniqueSearchSegments([
+    DOCS_BREADCRUMB_LABEL,
+    includeSectionTitle ? docsSectionTitle : '',
+    includePageTitle ? getReadableDocsPageSlug(hit) : '',
+  ]);
+};
+
+export {
+  SEARCH_SOURCE_FIELD,
+  buildSearchResultDescriptionSegments,
+  dedupeMergedSearchHits,
+  getDocsPageHref,
+  getHitHref,
+  getHitMethod,
+  getHitTitle,
+  getHitType,
+  normalizeMergedSearchHref,
+  normalizeSearchValue,
+  shouldOpenSearchHitInNewTab,
+};
diff --git a/src/components/Sidenav/Sidenav.module.css b/src/components/Sidenav/Sidenav.module.css
index 76bfd1f4..f88c72b2 100644
--- a/src/components/Sidenav/Sidenav.module.css
+++ b/src/components/Sidenav/Sidenav.module.css
@@ -15,6 +15,7 @@
 .toggleButton {
   display: flex;
   inline-size: 100%;
+  min-height: var(--navbar-top-height);
   padding-inline: var(--space-m);
   padding-block: var(--space-s);
   align-items: center;
@@ -32,7 +33,7 @@
   flex-shrink: 0;
   fill: var(--base-color-grey-100);
   margin-inline-start: auto;
-  transition: transform 0.2s ease;
+  transition: var(--transition-default);
 }
 
 .toggleIconDownOpen {
diff --git a/src/components/Sidenav/Sidenav.tsx b/src/components/Sidenav/Sidenav.tsx
index 36988139..036b56dc 100644
--- a/src/components/Sidenav/Sidenav.tsx
+++ b/src/components/Sidenav/Sidenav.tsx
@@ -1,19 +1,21 @@
 'use client';
 
-import { useNavigation } from '@/app/navigation';
-import { Icon } from '@/icons';
-import { ChevronSmallIcon } from '@/icons/ChevronSmall';
-import { MenuItem } from '@/lib/menu/types';
+import React, { useEffect, useState } from 'react';
+
 import { cx } from 'class-variance-authority';
 import { Transition, Variants } from 'motion/react';
 import * as motion from 'motion/react-client';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import React, { useState } from 'react';
-import { Tag } from '../Tag';
+
+import { useNavigation } from '@/app/navigation';
+import { Icon } from '@/icons';
+import { ChevronSmallIcon } from '@/icons/ChevronSmall';
+import { MenuItem } from '@/lib/menu/types';
 import { getActiveAncestors } from '@/lib/menu/util';
 import { last } from '@/lib/util';
 
+import { Tag } from '../Tag';
 import styles from './Sidenav.module.css';
 
 const togglerTransition: Transition = { duration: 0.2, ease: 'easeInOut' };
@@ -29,6 +31,14 @@ export const Sidenav = ({ items }: SidenavProps) => {
   const activeMenuItems = getActiveAncestors(pathname, items);
   const activeLabel = last(activeMenuItems)?.title ?? 'Select page';
 
+  useEffect(() => {
+    document.body.classList.add('has-sidenav-toggle');
+
+    return () => {
+      document.body.classList.remove('has-sidenav-toggle');
+    };
+  }, []);
+
   const isOpen = navigationState === 'sideNav';
   const toggle = () => toggleNavigation('sideNav');
 
@@ -78,7 +88,12 @@ const List = ({ items, isExpanded }: ListProps) => {
 const Item = ({ item }: ItemProps) => {
   const pathname = usePathname();
   const isCurrentPageActive = item.path === pathname && !item.children;
-  const [isExpanded, setIsExpanded] = useState(isExpandedByDefault(item, pathname));
+  const shouldBeExpanded = isExpandedByDefault(item, pathname);
+  const [isExpanded, setIsExpanded] = useState(shouldBeExpanded);
+
+  useEffect(() => {
+    setIsExpanded(shouldBeExpanded);
+  }, [shouldBeExpanded]);
 
   function toggleExpand(event: React.MouseEvent<HTMLAnchorElement>) {
     // Mobile will always link to the clicked item
@@ -132,17 +147,11 @@ const Item = ({ item }: ItemProps) => {
 };
 
 const isExpandedByDefault = (item: MenuItem, pathname: string) => {
-  // Sections are always active/open
   if (!item.path) {
     return true;
   }
 
-  // When children or self match the browser pathname
-  if (item.path === pathname || item.children?.some((child) => child.path === pathname)) {
-    return true;
-  }
-
-  return false;
+  return getActiveAncestors(pathname, [item]).length > 0;
 };
 
 interface SidenavProps {
diff --git a/src/components/Tag/Tag.module.css b/src/components/Tag/Tag.module.css
index e44feefc..bea7896e 100644
--- a/src/components/Tag/Tag.module.css
+++ b/src/components/Tag/Tag.module.css
@@ -13,6 +13,8 @@
   --color-grey-text: var(--brand-color-grey-7);
 
   display: inline-flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
   align-self: flex-start;
   border-radius: 5px;
@@ -57,6 +59,17 @@
 /* Type */
 .status {
   text-transform: uppercase;
+  line-height: 1;
+}
+
+.content {
+  display: block;
+  line-height: 1;
+}
+
+/* Visually center the text due to the uppercase transformation & typeface */
+.statusContent {
+  transform: translateY(0.5px);
 }
 
 /* Variant */
diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
index f9907b4c..a89c93b9 100644
--- a/src/components/Tag/Tag.tsx
+++ b/src/components/Tag/Tag.tsx
@@ -76,6 +76,8 @@ const statusCodes: { [key in Tag.HttpResponseStatusCodes]: Tag.VariantsProps['va
 
 export const Tag = ({ theme, size, type, active, mobileDarkMode, className, ...props }: Tag.Props) => {
   const sharedVariants = { theme, size, type, active, mobileDarkMode };
+  const isStatusType = (type ?? 'status') === 'status';
+  const contentClassName = `${styles.content}${isStatusType ? ` ${styles.statusContent}` : ''}`;
 
   if ('method' in props) {
     const { method, children, ...rest } = props;
@@ -84,7 +86,7 @@ export const Tag = ({ theme, size, type, active, mobileDarkMode, className, ...p
       <span
         className={tagVariants({ ...sharedVariants, variant: requestMethods[method], className })}
         {...rest}>
-        {children || method}
+        <span className={contentClassName}>{children || method}</span>
       </span>
     );
   }
@@ -96,7 +98,7 @@ export const Tag = ({ theme, size, type, active, mobileDarkMode, className, ...p
       <span
         className={tagVariants({ ...sharedVariants, variant: statusCodes[statusCode], className })}
         {...rest}>
-        {children || statusCode}
+        <span className={contentClassName}>{children || statusCode}</span>
       </span>
     );
   }
diff --git a/src/components/WithQuickNav/WithQuicknav.module.css b/src/components/WithQuickNav/WithQuicknav.module.css
index 4cee9db1..636330e1 100644
--- a/src/components/WithQuickNav/WithQuicknav.module.css
+++ b/src/components/WithQuickNav/WithQuicknav.module.css
@@ -9,6 +9,7 @@
   /* Make sure that pre tags don't expand the tags */
   min-width: 0;
   margin-top: var(--space-xs);
+  scroll-margin-top: calc(var(--space-xl) + var(--navbar-height));
 }
 
 .nav {
@@ -21,10 +22,9 @@
 }
 
 /*
-  Offset anchors to all headings inside main, so they are not hidden by the navbar.
-  This is done by adding the navbar height to the top of the anchor.
+  Offset anchors so hash links are not hidden by the navbar.
 */
-.content :is(h2, h3, h4, h5, h6) {
+.content :is(h1, h2, h3, h4, h5, h6) {
   scroll-margin-top: calc(var(--space-l) + var(--navbar-height));
 }
 
diff --git a/src/components/WithQuickNav/WithQuicknav.tsx b/src/components/WithQuickNav/WithQuicknav.tsx
index 27baaf24..39fbc07c 100644
--- a/src/components/WithQuickNav/WithQuicknav.tsx
+++ b/src/components/WithQuickNav/WithQuicknav.tsx
@@ -1,8 +1,7 @@
 import { Icon } from '@/icons';
-import { quickNavContentId } from '@/lib/constants/quickNav';
-import { QuickNav } from '../QuickNav';
-import { PageInfo } from '../PageInfo';
 
+import { PageInfo } from '../PageInfo';
+import { QuickNav } from '../QuickNav';
 import styles from './WithQuicknav.module.css';
 
 /*
@@ -13,7 +12,7 @@ import styles from './WithQuicknav.module.css';
 const WithQuicknav = ({ children, showPageInfo = false, path = '', lastUpdated }: WithQuicknavProps) => {
   return (
     <main className={styles.root}>
-      <article className={styles.content} id={quickNavContentId}>
+      <article className={styles.content} data-quick-nav-content>
         <Icon name="action/link" as="symbol" title="" />
         {children}
       </article>
diff --git a/src/components/index.ts b/src/components/index.ts
index 52702503..e59f64f2 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -8,6 +8,7 @@ export * from './Note';
 export * from './QuickNav';
 export * from './Sidenav';
 export * from './Flex';
+export * from './Footer';
 export * from './Card';
 export * from './HomepageHero';
 export * from './Button';
diff --git a/src/content/homepage.json b/src/content/homepage.json
index 40aeddd7..80b7cfaf 100644
--- a/src/content/homepage.json
+++ b/src/content/homepage.json
@@ -1,24 +1,7 @@
 {
   "hero": {
     "title": "Cloudsmith <br/> <strong>Documentation</strong>",
-    "description": "Cloudsmith is a fully-managed artifact management, software supply chain security, and software distribution platform. ",
-    "buttons": [
-      {
-        "label": "Documentation",
-        "href": "/about-cloudsmith",
-        "icon": "action/documentation"
-      },
-      {
-        "label": "Guides",
-        "href": "/guides/getting-started",
-        "icon": "utility/guide"
-      },
-      {
-        "label": "API Reference",
-        "href": "/api",
-        "icon": "action/api"
-      }
-    ]
+    "description": "Cloudsmith is a fully-managed artifact management, software supply chain security, and software distribution platform. "
   },
   "sections": [
     {
diff --git a/src/icons/icon-registry.tsx b/src/icons/icon-registry.tsx
index 2ac9c471..a4415bcc 100644
--- a/src/icons/icon-registry.tsx
+++ b/src/icons/icon-registry.tsx
@@ -50,6 +50,7 @@ import { FormatTerraformIcon } from './svgs/format/Terraform';
 import { FormatUnityIcon } from './svgs/format/Unity';
 import { FormatVagrantIcon } from './svgs/format/Vagrant';
 import { GithubIcon } from './svgs/Github';
+import { Heart } from './svgs/Heart';
 import { HomepageAPIIcon } from './svgs/homepage/API';
 import { HomepageDocumentationIcon } from './svgs/homepage/Documentation';
 import { HomepageGuideIcon } from './svgs/homepage/Guide';
@@ -126,6 +127,7 @@ export const iconRegistry = createIconRegistry({
   external: ExternalIcon,
   edit: EditIcon,
   github: GithubIcon,
+  heart: Heart,
   info: InfoIcon,
   question: QuestionIcon,
   'utility/documentation': UtilityDocumentationIcon,
diff --git a/src/icons/svgs/External.tsx b/src/icons/svgs/External.tsx
index 84536913..b63184a7 100644
--- a/src/icons/svgs/External.tsx
+++ b/src/icons/svgs/External.tsx
@@ -10,8 +10,8 @@ export const ExternalIcon = createIcon<SpecificIconProps>(
     fill: 'none',
     children: (
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M6.88786 10.2512L11.9222 5.21687L11.9222 8.89747L12.9222 8.89747L12.9222 4.55528L11.8767 3.50977L7.53453 3.50977L7.53453 4.50977L11.2151 4.50977L6.18076 9.54408L6.88786 10.2512ZM5.08507 5.69781H5.63363V4.69781H4.67086L4.52443 4.84424L3.0779 6.29077L3.07789 10.2638L3.07788 11.8979L4.67086 13.4909H5.09848H6.56832H10.2779L11.8708 11.8979L11.8708 10.9808L10.8708 10.9809L10.8708 11.4837L9.86365 12.4909H6.56832H5.09848H5.08507L4.07788 11.4837V10.8019L4.0779 6.70499L5.08507 5.69781Z"
         fill="currentColor"
       />
diff --git a/src/icons/svgs/Heart.tsx b/src/icons/svgs/Heart.tsx
new file mode 100644
index 00000000..d780ffc5
--- /dev/null
+++ b/src/icons/svgs/Heart.tsx
@@ -0,0 +1,15 @@
+import { createIcon, SpecificIconProps } from '../util/create-icon';
+
+export const Heart = createIcon<SpecificIconProps>('heart', ({ width = 16, height = 16, ...props }) => ({
+  ...props,
+  width,
+  height,
+  viewBox: '0 0 16 16',
+  fill: 'none',
+  children: (
+    <path
+      d="M7.20703 3.5L8 4.29297L8.79297 3.5H11.707L13.5 5.29297V8.20703L8 13.707L2.5 8.20703V5.29297L4.29297 3.5H7.20703Z"
+      fill="currentColor"
+    />
+  ),
+}));
diff --git a/src/lib/constants/quickNav.ts b/src/lib/constants/quickNav.ts
index 5395ac5f..c8576a11 100644
--- a/src/lib/constants/quickNav.ts
+++ b/src/lib/constants/quickNav.ts
@@ -1 +1,2 @@
-export const quickNavContentId = 'quickNavContent';
+export const quickNavContentSelector = '[data-quick-nav-content]';
+export const quickNavIgnoredAnchorFragments = new Set(['quickNavContent']);
diff --git a/src/lib/search/server.test.ts b/src/lib/search/server.test.ts
index e400ea6b..6c9786b2 100644
--- a/src/lib/search/server.test.ts
+++ b/src/lib/search/server.test.ts
@@ -6,7 +6,7 @@ describe('lib', () => {
       test('does not return content of file', async () => {
         const results = await performSearch('Formats');
         const res = results[0];
-        expect(res?.content).toBeUndefined();
+        expect('content' in (res || {})).toBe(false);
       });
 
       test('searches content across all sections', async () => {
diff --git a/src/lib/search/server.ts b/src/lib/search/server.ts
index c9f2274b..a818ebb1 100644
--- a/src/lib/search/server.ts
+++ b/src/lib/search/server.ts
@@ -13,8 +13,6 @@ import { SearchInput, SearchResult } from './types';
 
 let fuzzySearcher: Searcher<SearchInput, FullOptions<SearchInput>>;
 
-const SNIPPET_PADDING = 300;
-
 export const performSearch = async (
   input: string,
   sections: string[] = ['documentation', 'guides', 'api'],
@@ -62,14 +60,7 @@ export const performSearch = async (
   const filtered: SearchResult[] = results
     .filter((res) => sections.includes(res.item.section))
     .map((res) => {
-      const { match, item } = res;
-
-      const snippetStart = Math.max(0, match.index - SNIPPET_PADDING);
-      const snippetEnd = Math.min(item.content.length, match.index + match.length + SNIPPET_PADDING);
-      const snippet = item.content
-        .substring(snippetStart, snippetEnd)
-        .replace(/[^0-9a-z-A-Z \.\:]/g, '')
-        .replace(/ +/, ' ');
+      const { item } = res;
 
       // Return everything but the content attribute
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -77,7 +68,6 @@ export const performSearch = async (
 
       return {
         ...rest,
-        snippet,
         score: res.score,
       };
     });
diff --git a/src/lib/search/types.ts b/src/lib/search/types.ts
index 7bc11a88..733bacee 100644
--- a/src/lib/search/types.ts
+++ b/src/lib/search/types.ts
@@ -10,7 +10,6 @@ export type SearchInput = {
 
 export type SearchResult = {
   title: string;
-  snippet: string;
   path: string;
   section: string;
   score: number;
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 34b00c97..1af19141 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -58,15 +58,14 @@ export interface Card {
   type?: 'default' | 'simple';
 }
 
-interface Button {
-  label: string;
-  href: string;
-}
-
-interface Hero {
+export interface Hero {
   title: string;
   description: string;
-  buttons: Button[];
+  buttons: {
+    label: string;
+    href: string;
+    icon: IconName;
+  }[];
 }
 
 interface CardSection {
diff --git a/src/util/strings.js b/src/util/strings.js
new file mode 100644
index 00000000..bcb81d64
--- /dev/null
+++ b/src/util/strings.js
@@ -0,0 +1,42 @@
+export const pluralize = (singular, plural, count = 0) => {
+  if (count === 1) return singular;
+  return plural;
+};
+
+export const truncate = (text, count = 100, overflow = '…') => {
+  const words = text.split(' ');
+  if (words.length < count) return words.join(' ');
+  return `${words.slice(0, count).join(' ')}${overflow}`;
+};
+
+export const capitalize = (str) =>
+  `${str.charAt(0).toUpperCase()}${str.slice(1)}`;
+
+export const camelToWordCase = (str) =>
+  str.replace(
+    /[A-Z]+(?![a-z])|[A-Z]/g,
+    ($, ofs) => (ofs ? ' ' : '') + $.toLowerCase(),
+  );
+
+export const maybeString = (str) => {
+  if (str === undefined || str === null) return null;
+  return `${str}`;
+};
+
+export const cleanTitle = (str) => {
+  return str.replace('<strong>', '').replace('</strong>', '');
+};
+
+export const slugify = (value) =>
+  value
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/(^-|-$)+/g, '');
+
+export const titleCase = (value) =>
+  value
+    .split(/[\s_-]+/)
+    .filter(Boolean)
+    .map((word) => word.replace(/([A-Z])/g, ' $1'))
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
diff --git a/src/util/url.js b/src/util/url.js
new file mode 100644
index 00000000..fecb6589
--- /dev/null
+++ b/src/util/url.js
@@ -0,0 +1,26 @@
+/**
+ * Joins fragments of a path together, ensuring there is a single slash between each fragment.
+ * Optionally also ensures there is a trailing slash.
+ */
+export const joinPathsFactory =
+  (base) =>
+  (path = '', trailingSlash = false) => {
+    const inputPaths = [base, path].filter(Boolean);
+    const joined = `${inputPaths.join('/')}${trailingSlash ? '/' : ''}`;
+    return joined.replace(/([^:]\/)\/+/g, '$1');
+  };
+
+//  Checks if a href should be treated as an external resource.
+export const isExternalHref = (_href) => {
+  const href = (_href && _href.pathname) ?? _href ?? null;
+
+  if (!href) return false;
+  if (!/^https?:\/\//i.test(href)) return false;
+
+  try {
+    new URL(href);
+    return true;
+  } catch {
+    return false;
+  }
+};