diff --git a/microsite/src/pages/plugins/index.tsx b/microsite/src/pages/plugins/index.tsx
index 6b2ebe22a1..6b1116712a 100644
--- a/microsite/src/pages/plugins/index.tsx
+++ b/microsite/src/pages/plugins/index.tsx
@@ -111,11 +111,12 @@ const Plugins = () => {
         </div>
 
         <div className="bulletLine margin-bottom--lg"></div>
-
-        <PluginsFilter
-          categories={categories}
-          handleChipClick={handleChipClick}
-        />
+        <div className="pluginsFilterBox">
+          <PluginsFilter
+            categories={categories}
+            handleChipClick={handleChipClick}
+          />
+        </div>
 
         {showCoreFeaturesHeader && <h2>Core Features</h2>}
 
diff --git a/microsite/src/pages/plugins/plugins.module.scss b/microsite/src/pages/plugins/plugins.module.scss
index 2f928fcbf0..3babf0959c 100644
--- a/microsite/src/pages/plugins/plugins.module.scss
+++ b/microsite/src/pages/plugins/plugins.module.scss
@@ -31,12 +31,25 @@
     grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
   }
 
+  @media (max-width: 768px) {
+    :global(.pluginsContainer) {
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    }
+  }
+
   :global(.fit-content) {
     width: fit-content;
   }
 
+  :global(.pluginsFilterBox) {
+    width: 100%;
+    margin-bottom: 1rem;
+    height: 1rem;
+  }
+
   :global(.dropdown) {
     float: right;
+    margin-bottom: 1rem;
   }
 
   :global(.button--info) {