diff --git a/packages/docusaurus-playground/package.json b/packages/docusaurus-playground/package.json
index 2d0ddea..5880225 100644
--- a/packages/docusaurus-playground/package.json
+++ b/packages/docusaurus-playground/package.json
@@ -15,7 +15,7 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@acid-info/logos-docusaurus-preset": "^1.0.0-alpha.0",
+    "@acid-info/logos-docusaurus-preset": "^1.0.0-alpha.4",
     "@docusaurus/core": "2.4.1",
     "@docusaurus/preset-classic": "2.4.1",
     "@docusaurus/theme-mermaid": "^2.4.1",
diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx
index 071f7c3..ae303e6 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx
+++ b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx
@@ -11,6 +11,7 @@ import NavbarItem from '@theme/NavbarItem'
 import SearchBar from '@theme/SearchBar'
 import clsx from 'clsx'
 import React from 'react'
+import { useHydrated } from '../../../lib/useHydrated'
 import styles from './styles.module.scss'
 
 function useNavbarItems() {
@@ -42,6 +43,7 @@ ${JSON.stringify(item, null, 2)}`,
 }
 
 export default function NavbarContent() {
+  const hydrated = useHydrated()
   const mobileSidebar = useNavbarMobileSidebar()
   const allItems = useNavbarItems()
   const [leftItems, rightItems] = splitNavbarItems(
@@ -62,13 +64,20 @@ export default function NavbarContent() {
 
         <IconButtonGroup className={styles.iconButtonGroup} size="medium">
           <NavbarColorModeToggle
+            key="color-toggle"
             className={clsx(
               styles.colorModeToggle,
               'navbar__color-mode-toggle',
             )}
           />
-          {searchBarItem && <SearchBar />}
-          {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
+          {hydrated && (
+            <React.Fragment key="search">
+              {searchBarItem && <SearchBar />}
+            </React.Fragment>
+          )}
+          <React.Fragment key="mobile-sidebar-toggle">
+            {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
+          </React.Fragment>
         </IconButtonGroup>
       </div>
     </div>
diff --git a/yarn.lock b/yarn.lock
index 022201d..b9ccea1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,64 @@
 # yarn lockfile v1
 
 
+"@acid-info/logos-docusaurus-preset@^1.0.0-alpha.4":
+  version "1.0.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/@acid-info/logos-docusaurus-preset/-/logos-docusaurus-preset-1.0.0-alpha.4.tgz#ec958cc49d0420bc361541002138dc0bd8595889"
+  integrity sha512-kVOaa0bCPy5tBJxEZS51N3+UgtO6M4TciRA7x/4JQ+uwy1s5cSldkecmjmb1Ch5/tGB6QCllU2tjuZrsY1aiRg==
+  dependencies:
+    "@acid-info/logos-docusaurus-search-local" "^1.0.0-alpha.0"
+    "@acid-info/logos-docusaurus-theme" "^1.0.0-alpha.4"
+    "@docusaurus/core" "^2.4.1"
+    "@docusaurus/module-type-aliases" "^2.4.1"
+    "@docusaurus/preset-classic" "^2.4.1"
+    "@docusaurus/types" "^2.4.1"
+    "@docusaurus/utils" "^2.4.1"
+    "@docusaurus/utils-common" "^2.4.1"
+    "@docusaurus/utils-validation" "^2.4.1"
+    docusaurus-plugin-sass "^0.2.3"
+    fs-extra "^10.1.0"
+    lodash "^4.17.21"
+
+"@acid-info/logos-docusaurus-theme@^1.0.0-alpha.4":
+  version "1.0.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/@acid-info/logos-docusaurus-theme/-/logos-docusaurus-theme-1.0.0-alpha.4.tgz#63ef02dc4f9acc816bc9bdb7fb5a4664c0a5a3ee"
+  integrity sha512-mQBaIUVVe2LWnKHFfeCnMtLkbCbJxe306DrO+Q2v4f4VXkDiTygXDCd8Rs/DFCPhlyIDRkZRfgH4Fzmb1S+lwA==
+  dependencies:
+    "@acid-info/logos-docusaurus-preset" "^1.0.0-alpha.4"
+    "@acid-info/lsd-react" "^0.1.0-alpha.8"
+    "@docusaurus/core" "^2.4.1"
+    "@docusaurus/mdx-loader" "^2.4.1"
+    "@docusaurus/module-type-aliases" "^2.4.1"
+    "@docusaurus/plugin-content-blog" "^2.4.1"
+    "@docusaurus/plugin-content-docs" "^2.4.1"
+    "@docusaurus/plugin-content-pages" "^2.4.1"
+    "@docusaurus/theme-classic" "^2.4.1"
+    "@docusaurus/theme-common" "^2.4.1"
+    "@docusaurus/theme-translations" "^2.4.1"
+    "@docusaurus/types" "^2.4.1"
+    "@docusaurus/utils" "^2.4.1"
+    "@docusaurus/utils-common" "^2.4.1"
+    "@docusaurus/utils-validation" "^2.4.1"
+    "@emotion/react" "^11.11.0"
+    "@emotion/styled" "^11.11.0"
+    "@mdx-js/react" "^1.6.22"
+    "@react-three/drei" "8.20.2"
+    "@react-three/fiber" "6.2.3"
+    "@tryghost/content-api" "^1.11.4"
+    clsx "^1.2.1"
+    copy-text-to-clipboard "^3.0.1"
+    copy-to-clipboard "^3.3.2"
+    docusaurus-plugin-sass "^0.2.3"
+    dotenv "^16.0.3"
+    lodash "^4.17.21"
+    prism-react-renderer "^1.3.5"
+    react "^17.0.2"
+    react-dom "^17.0.2"
+    react-use "^17.4.0"
+    three "^0.152.2"
+    three-stdlib "^2.23.4"
+    utility-types "^3.10.0"
+
 "@acid-info/lsd-react@^0.1.0-alpha.8":
   version "0.1.0-alpha.8"
   resolved "https://registry.yarnpkg.com/@acid-info/lsd-react/-/lsd-react-0.1.0-alpha.8.tgz#f34392cd928c5bf08f325f923e88853bc809c4be"