diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
index 24883cd98..736744466 100644
--- a/src/components/HomepageFeatures/index.js
+++ b/src/components/HomepageFeatures/index.js
@@ -41,12 +41,14 @@ const FeatureList = [
 
 function Feature({ Svg, title, description }) {
   return (
-    <div className={clsx("col col--4")}>
-      <div className="text--center">
+    <div className={clsx("col col--4", styles.featureColumn)}>
+      <div className={styles.featureIllustrationWrapper}>
         <Svg className={styles.featureSvg} role="img" />
       </div>
-      <div className="text--center padding-horiz--md">
-        <Heading as="h3">{title}</Heading>
+      <div className={clsx("text--center padding-horiz--md", styles.featureCopy)}>
+        <Heading as="h3" className={styles.featureHeading}>
+          {title}
+        </Heading>
         <p>{description}</p>
       </div>
     </div>
diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
index b248eb2e5..1954ee0de 100644
--- a/src/components/HomepageFeatures/styles.module.css
+++ b/src/components/HomepageFeatures/styles.module.css
@@ -5,7 +5,58 @@
   width: 100%;
 }
 
+.featureColumn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.25rem;
+}
+
+.featureIllustrationWrapper {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
 .featureSvg {
   height: 200px;
   width: 200px;
 }
+
+.featureCopy {
+  max-width: 56ch;
+  margin: 0 auto;
+  line-height: 1.65;
+}
+
+.featureHeading {
+  margin-bottom: 0.75rem;
+}
+
+.featureCopy p {
+  margin: 0 auto;
+}
+
+@media (max-width: 996px) {
+  .featureCopy {
+    max-width: 48ch;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .featureSvg {
+    max-height: 40vh;
+    height: auto;
+    width: clamp(120px, 48vw, 180px);
+  }
+
+  .featureCopy {
+    max-width: 44ch;
+  }
+
+  .featureHeading {
+    font-size: 1.6rem;
+  }
+}
diff --git a/src/theme/SearchBar/styles.module.css b/src/theme/SearchBar/styles.module.css
index 0088fdbaf..94aa2b978 100644
--- a/src/theme/SearchBar/styles.module.css
+++ b/src/theme/SearchBar/styles.module.css
@@ -200,6 +200,105 @@
   z-index: 100;
 }
 
+@media (max-width: 768px) {
+  .searchWrapper {
+    width: auto;
+  }
+
+  .algoliaButtonWrapper {
+    width: auto;
+  }
+
+  .algoliaButtonWithBadge {
+    gap: 0;
+  }
+
+  .askAiBadge {
+    display: none;
+  }
+
+  .algoliaButton {
+    width: auto;
+  }
+
+  .algoliaButtonWrapper :global(.DocSearch-Button) {
+    width: auto;
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+    padding: 0.55rem;
+    border-radius: 999px;
+    justify-content: center;
+  }
+
+  .algoliaButtonWrapper :global(.DocSearch-Button-Container) {
+    gap: 0;
+    justify-content: center;
+  }
+
+  .algoliaButtonWrapper :global(.DocSearch-Button-Placeholder),
+  .algoliaButtonWrapper :global(.DocSearch-Button-Keys) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .algoliaButtonWrapper :global(.DocSearch-Search-Icon) {
+    margin: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .localForm {
+    padding: 0.55rem;
+    justify-content: center;
+    width: clamp(2.75rem, 14vw, 3rem);
+    transition: width 0.25s ease, padding 0.25s ease;
+    position: relative;
+  }
+
+  .localInput {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+    transition: clip 0.2s ease, width 0.2s ease, margin 0.2s ease, padding 0.2s ease;
+  }
+
+  .shortcut {
+    display: none;
+  }
+
+  .localForm:focus-within {
+    width: min(88vw, 320px);
+    padding: 0.55rem 0.9rem;
+  }
+
+  .localForm:focus-within .localInput {
+    position: relative;
+    width: 100%;
+    height: auto;
+    margin: 0;
+    padding-left: 0.5rem;
+    clip: auto;
+    white-space: normal;
+  }
+
+  .localForm:focus-within .shortcut {
+    display: inline-flex;
+  }
+}
+
 .resultLink {
   display: block;
   padding: 0.55rem 1rem;