diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index 5b777afc64d6..a5ef2890aea8 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="theme">
     <header>
-      <NavBar />
+      <NavBar>
+        <template #search>
+          <slot name="navbar-search" />
+        </template>
+      </NavBar>
       <ToggleSideBarButton @toggle="toggleSidebar" />
     </header>
     <aside :class="{ open }">
diff --git a/src/client/theme-default/components/NavBar.vue b/src/client/theme-default/components/NavBar.vue
index 564b07ecbca7..64bf8b673b12 100644
--- a/src/client/theme-default/components/NavBar.vue
+++ b/src/client/theme-default/components/NavBar.vue
@@ -12,7 +12,9 @@
     />
     <span>{{ $site.title }}</span>
   </a>
+  <div class="flex-grow"></div>
   <NavBarLinks class="hide-mobile" />
+  <slot name="search" />
 </template>
 
 <script src="./NavBar"></script>
@@ -24,6 +26,10 @@
   color: var(--text-color);
 }
 
+.flex-grow {
+  flex-grow: 1;
+}
+
 .logo {
   margin-right: 0.75rem;
   height: 1.3rem;
diff --git a/src/client/theme-default/styles/layout.css b/src/client/theme-default/styles/layout.css
index bc0bfead37d1..843f5f97d7f6 100644
--- a/src/client/theme-default/styles/layout.css
+++ b/src/client/theme-default/styles/layout.css
@@ -2,6 +2,10 @@ body {
   padding: 0;
   margin: 0;
   background-color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 * {
@@ -9,10 +13,6 @@ body {
 }
 
 .theme {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   font-size: 16px;
   color: var(--text-color);
 }