diff --git a/src/css/home.scss b/src/css/home.scss
index 3b52bf4d026..64d806b709f 100644
--- a/src/css/home.scss
+++ b/src/css/home.scss
@@ -57,6 +57,7 @@
 .home-page-hero-left {
   align-self: center;
   padding: 2rem 0rem;
+  flex: 1;
 
   @media (min-width: 768px) {
     padding-right: 2rem;
@@ -67,11 +68,14 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  gap: 20px;
 
   @media (min-width: 768px) {
     flex-direction: row;
     flex: 1;
-    justify-content: center;
+    justify-content: space-between;
   }
 }
 
@@ -88,7 +92,6 @@
   width: 100%;
 
   @media (min-width: 768px) {
-    margin-right: 24px;
     margin-bottom: 0;
     width: 200px;
   }
@@ -196,6 +199,38 @@
   }
 }
 
+.home-page-section-search {
+  display: flex;
+  flex-direction: row;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--click-color-stroke);
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    padding-right: 2rem;
+    justify-content: space-between;
+  }
+}
+
+.home-page-hero-right-search {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: right;
+  flex: 1;
+  max-width: 465px;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    flex: 1;
+    justify-content: right;
+  }
+}
+
 .home-page-section:last-of-type {
   border-bottom: none;
 }
@@ -234,5 +269,7 @@ img.home-svg svg path {
 .home-container {
   display: flex;
   flex-direction: column;
+  max-width: 1000px;
+  justify-self: center;
 }
 
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
index 4b535326bb6..be9a77f8ec0 100644
--- a/src/pages/index.mdx
+++ b/src/pages/index.mdx
@@ -23,6 +23,7 @@ import IconSQLConsole from '@site/src/icons/IconSQLConsole';
 import IconLightning from '@site/src/icons/IconLightning';
 import IconDownload from '@site/src/icons/IconDownload';
 import Image from '@theme/IdealImage';
+import SearchBar from "@theme/SearchBar";
 
 export const Hero = ({children, color}) => {
     return (
@@ -88,6 +89,17 @@ export const HomePageOptionButton = ({children, icon, iconWidth, svgIcon, link})
     )
 }
 
+export const SearchClickHouse = ({children, color}) => {
+    return (
+        <div className='home-page-section-search'>
+            <p style={{fontWeight: '600', fontSize: '18px', margin: 'auto', flex: '1'}}>Search documentation</p>
+            <div className='home-page-hero-right-search'>
+                <SearchBar style="width: 75%"/>
+            </div>
+        </div>
+    )
+}
+
 export const ConnectToClickHouse = ({children, color}) => {
     return (
         <div className='home-page-section'>
@@ -197,6 +209,7 @@ export const HomeContainer = () => {
     return (
         <div className='home-container'>
             <Hero/>
+            <SearchClickHouse/>
             <ConnectToClickHouse/>
             <MigrateToClickHouse/>
             <DeployClickHouse/>
diff --git a/src/theme/SearchBar/styles.css b/src/theme/SearchBar/styles.css
index fd89bb6623f..2b4d3dffe83 100644
--- a/src/theme/SearchBar/styles.css
+++ b/src/theme/SearchBar/styles.css
@@ -17,7 +17,10 @@
 }
 .DocSearch-Button-Placeholder {
   font-size: inherit;
+}
 
+[data-theme='dark'] .DocSearch-Button-Placeholder {
+  color: white;
 }
 
 .DocSearch-Container {