diff --git a/src/components/molecules/SearchBar.module.css b/src/components/molecules/SearchBar.module.css
index 8ba370db4..3dabd9077 100644
--- a/src/components/molecules/SearchBar.module.css
+++ b/src/components/molecules/SearchBar.module.css
@@ -1,5 +1,7 @@
 .form {
   margin-bottom: var(--spacer);
+  width: 100%;
+  max-width: 30rem;
 }
 
 .form > div > div {
diff --git a/src/components/molecules/SearchBar.tsx b/src/components/molecules/SearchBar.tsx
index 05c1831d1..1dadccdb7 100644
--- a/src/components/molecules/SearchBar.tsx
+++ b/src/components/molecules/SearchBar.tsx
@@ -8,11 +8,13 @@ import InputGroup from '../atoms/Input/InputGroup'
 export default function SearchBar({
   placeholder,
   initialValue,
-  filters
+  filters,
+  size
 }: {
   placeholder?: string
   initialValue?: string
   filters?: boolean
+  size?: 'small' | 'large'
 }): ReactElement {
   const navigate = useNavigate()
   const [value, setValue] = useState(initialValue || '')
@@ -37,6 +39,7 @@ export default function SearchBar({
           value={value}
           onChange={handleChange}
           required
+          size={size}
         />
         <Button onClick={(e: FormEvent<HTMLButtonElement>) => startSearch(e)}>
           Search
diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx
index 0840c6a00..88452a64c 100644
--- a/src/components/pages/Home.tsx
+++ b/src/components/pages/Home.tsx
@@ -82,7 +82,7 @@ export default function HomePage(): ReactElement {
   return (
     <>
       <Container narrow className={styles.searchWrap}>
-        <SearchBar />
+        <SearchBar size="large" />
       </Container>
 
       <section className={styles.latest}>