diff --git a/docs/src/index.html b/docs/src/index.html
index d5bbcd0b..0aff2f7b 100644
--- a/docs/src/index.html
+++ b/docs/src/index.html
@@ -2,11 +2,11 @@
 <html ${htmlAttrs}>
   <head>
     ${head}
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha" />
   </head>
   <body ${bodyAttrs}>
     ${app}
     ${scripts}
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/docs/src/layouts/App/base.scss b/docs/src/layouts/App/base.scss
index a891b92a..ebdfec30 100644
--- a/docs/src/layouts/App/base.scss
+++ b/docs/src/layouts/App/base.scss
@@ -1,3 +1,48 @@
+:root {
+  --docsearch-primary-color: #{$colorBlack};
+  --docsearch-text-color: rgb(28, 30, 33);
+  --docsearch-spacing: 12px;
+  --docsearch-icon-stroke-width: 1.4;
+  --docsearch-highlight-color: var(--docsearch-primary-color);
+  --docsearch-muted-color: rgb(150, 159, 175);
+  --docsearch-container-background: #{rgba($colorBlack, 0.7)};
+  --docsearch-logo-color: #{$colorBlack};
+
+  /* modal */
+  --docsearch-modal-width: 560px;
+  --docsearch-modal-height: 600px;
+  --docsearch-modal-background: rgb(245, 246, 247);
+  --docsearch-modal-shadow: none;
+
+  /* searchbox */
+  --docsearch-searchbox-height: 56px;
+  --docsearch-searchbox-background: rgb(235, 237, 240);
+  --docsearch-searchbox-focus-background: #fff;
+  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
+
+  /* hit */
+  --docsearch-hit-height: 56px;
+  --docsearch-hit-color: rgb(68, 73, 80);
+  --docsearch-hit-active-color: #fff;
+  --docsearch-hit-background: #fff;
+  --docsearch-hit-shadow: 0 1px 3px 0 rgb(212, 217, 225);
+
+  /* key */
+  --docsearch-key-gradient: linear-gradient(
+    -225deg,
+    rgb(213, 219, 228) 0%,
+    rgb(248, 248, 248) 100%
+  );
+  --docsearch-key-shadow: inset 0 -2px 0 0 rgb(205, 205, 230),
+    inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
+
+  /* footer */
+  --docsearch-footer-height: 44px;
+  --docsearch-footer-background: #fff;
+  --docsearch-footer-shadow: 0 -1px 0 0 rgb(224, 227, 232),
+    0 -3px 6px 0 rgba(69, 98, 155, 0.12);
+}
+
 *,
 *::before,
 *::after {
diff --git a/docs/src/layouts/App/index.vue b/docs/src/layouts/App/index.vue
index 142212ca..e1d437e2 100644
--- a/docs/src/layouts/App/index.vue
+++ b/docs/src/layouts/App/index.vue
@@ -102,7 +102,10 @@
     <div class="app__content">
       <div class="app__top-bar">
         <div class="app__inner app__top-bar-inner">
-          <input class="app__search" type="search" placeholder="Search">
+          <div class="app__search">
+            <div class="app__search-button" />
+            <div class="app__search-docsearch" />
+          </div>
           <button
             class="app__menu-icon"
             @click="menuIsVisible = true"
@@ -238,7 +241,7 @@ export default {
       docsearch({
         apiKey: '1abe7fb0f0dac150d0e963d2eda930fe',
         indexName: 'ueberdosis_tiptap',
-        inputSelector: '.app__search',
+        container: '.app__search-docsearch',
         debug: false,
       })
     },
diff --git a/docs/src/layouts/App/style.scss b/docs/src/layouts/App/style.scss
index 5567abe3..7fc79651 100644
--- a/docs/src/layouts/App/style.scss
+++ b/docs/src/layouts/App/style.scss
@@ -29,15 +29,34 @@ $menuBreakPoint: 800px;
   }
 
   &__search {
-    display: block;
+    position: relative;
+    display: flex;
+    align-items: center;
     width: 100%;
+    height: 3rem;
+    overflow: hidden;
     background-color: transparent;
     border: 1px solid rgba($colorWhite, 0.1);
     border-radius: 0.5rem;
-    font: inherit;
-    color: $colorWhite;
     padding: 0.5rem 0.75rem;
-    -webkit-appearance: none;
+
+    &::after {
+      content: 'Search';
+      color: rgba($colorWhite, 0.5);
+    }
+  }
+
+  &__search-docsearch {
+    ::v-deep > button {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      opacity: 0;
+    }
   }
 
   &__sidebar {
