diff --git a/src/components/PluginCard/index.module.css b/src/components/PluginCard/index.module.css
index a6159c0f0..595f08f98 100644
--- a/src/components/PluginCard/index.module.css
+++ b/src/components/PluginCard/index.module.css
@@ -2,7 +2,6 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    width: 25%;
     height: 100%;
     padding: 1rem;
     border-radius: 0.5rem;
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index cc4b6cef8..25cf0277f 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -26,10 +26,17 @@
 }
 
 .cntnr {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    width: 85%;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     justify-content: center;
     max-width: 1500px;
     gap: 1rem;
     margin: 2rem auto;
-}
\ No newline at end of file
+}
+
+@media only screen and (max-width: 800px) {
+  .cntnr {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
diff --git a/src/pages/plugins.js b/src/pages/plugins.js
index 3afc98e39..3f3a7bc05 100644
--- a/src/pages/plugins.js
+++ b/src/pages/plugins.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import Layout from '@theme/Layout';
-import clsx from "clsx";
 import styles from "./index.module.css";
 import PluginCard from "../components/PluginCard";
 
@@ -30,4 +29,4 @@ export default function Plugins() {
             </div>
         </Layout>
     )
-}
\ No newline at end of file
+}