diff --git a/components/Layout.tsx b/components/Layout.tsx
index 4bef0a334..5057d85a3 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -138,8 +138,8 @@ const MainNavigation = () => {
         isActive={section === 'community'}
 
       />
-      <div className='flex items-center gap-12 md:gap-4'>
-        <div className='rounded border-2 border-gray-100 ml-0 w-2/5 md:w-full'>
+      <div className='flex max-sm:ml-4 items-center gap-12 md:gap-4'>
+        <div className='flex justify-center rounded border-2 border-gray-100 ml-0 w-[120px] md:w-full'>
           <Search />
         </div>
         {showMobileNav === false ? (
@@ -178,7 +178,7 @@ const MobileNav = () => {
   const section = useContext(SectionContext)
 
   return (
-    <div className='flex flex-col justify-end fixed bg-white w-full  z-[190] mt-16 left-0 pl-8'>
+    <div className='flex flex-col justify-end fixed shadow-xl bg-white w-full  z-[190] mt-16 left-0 pl-8'>
       <MainNavLink
         uri='/specification'
         label='Specification'
diff --git a/pages/index.page.tsx b/pages/index.page.tsx
index e7e94266b..db01b4ced 100644
--- a/pages/index.page.tsx
+++ b/pages/index.page.tsx
@@ -161,8 +161,8 @@ const Home = (props: any) => {
               JSON Schema enables the confident and reliable use of the JSON data format.
             </h2>
             <div className='lg:w-[650px]  mx-auto my-10 grid grid-cols-1 lg:grid-cols-3 gap-8 justify-items-center'>
-              <Link href='/learn/getting-started-step-by-step' className='pt-1 rounded border-2 border-white text-white w-[194px] h-[40px] font-semibold'>Getting started</Link>
-              <Link href='/slack' className='pt-1 rounded border-2 border-white text-white  w-[194px] h-[40px] font-semibold'>Join Slack</Link>
+              <Link href='/learn/getting-started-step-by-step' className='flex items-center justify-center rounded border-2 border-white text-white w-[194px] h-[40px] font-semibold'>Getting started</Link>
+              <Link href='/slack' className='flex items-center justify-center rounded border-2 border-white text-white  w-[194px] h-[40px] font-semibold'>Join Slack</Link>
 
               <div className='herobtn rounded border-2 border-white text-white mx-auto'>
                 <DocSearch
diff --git a/styles/globals.css b/styles/globals.css
index f9ed4c522..29c12d6ea 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -36,8 +36,9 @@ html {
   display: none !important;
 }
 
-.DocSearch-Button-Container {
+.herobtn .DocSearch-Button-Container {
   background-color: transparent !important;
+  justify-content: center;
   width: 168px;
   height: 32px;
   padding: 8px 8px;
@@ -46,13 +47,32 @@ html {
 border-radius: 4px; */
 }
 
-@media (max-width: 730px) {
+@media (max-width:1027px) {
   .DocSearch-Button-Container {
-    width: 40px;
     height: 40px;
     padding: 0px;
     border: none;
   }
+
+  .DocSearch-Button {
+    margin: 0;
+  }
+
+  .DocSearch-Button-Placeholder {
+    display: inline;
+  }
+
+  .herobtn .DocSearch-Button-Container {
+    margin-right: 4px;
+    margin-left: 4px;
+  }
+
+}
+
+@media (max-width:450px) {
+  .DocSearch-Button {
+    margin: 0;
+  }
 }
 
 .DocSearch-Button:active,
@@ -144,10 +164,6 @@ border-radius: 4px; */
   color: black;
 }
 
-.herobtn span {
-  margin: 0 auto;
-}
-
 .herobtn span {
   color: white !important;
   font-weight: 600;