diff --git a/datahub-web-react/src/app/home/HomePageHeader.tsx b/datahub-web-react/src/app/home/HomePageHeader.tsx
index 102453f0cc01d0..526c7b15001a5c 100644
--- a/datahub-web-react/src/app/home/HomePageHeader.tsx
+++ b/datahub-web-react/src/app/home/HomePageHeader.tsx
@@ -65,6 +65,7 @@ const HeaderContainer = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
 `;
 
 const NavGroup = styled.div`
diff --git a/datahub-web-react/src/app/search/SearchBar.tsx b/datahub-web-react/src/app/search/SearchBar.tsx
index ac8f1858845a5b..3c429f060dd716 100644
--- a/datahub-web-react/src/app/search/SearchBar.tsx
+++ b/datahub-web-react/src/app/search/SearchBar.tsx
@@ -24,7 +24,14 @@ const ExploreForEntity = styled.span`
 `;
 
 const StyledAutoComplete = styled(AutoComplete)`
-    width: 650px;
+    width: 100%;
+    max-width: 800px;
+`;
+
+const AutoCompleteContainer = styled.div`
+    width: 100%;
+    text-align: center;
+    padding: 0 30px;
 `;
 
 const renderItem = (suggestion: string, icon: JSX.Element, type: string) => ({
@@ -90,7 +97,7 @@ export const SearchBar = ({
     }));
 
     return (
-        <div style={style}>
+        <AutoCompleteContainer style={style}>
             <StyledAutoComplete
                 style={autoCompleteStyle}
                 options={options}
@@ -109,7 +116,7 @@ export const SearchBar = ({
                     data-testid="search-input"
                 />
             </StyledAutoComplete>
-        </div>
+        </AutoCompleteContainer>
     );
 };
 
diff --git a/datahub-web-react/src/app/search/SearchHeader.tsx b/datahub-web-react/src/app/search/SearchHeader.tsx
index c82fe9228d4143..0d94631b291aad 100644
--- a/datahub-web-react/src/app/search/SearchHeader.tsx
+++ b/datahub-web-react/src/app/search/SearchHeader.tsx
@@ -53,6 +53,7 @@ const NavGroup = styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
+    min-width: 200px;
 `;
 
 /**