diff --git a/docs/plugins/woodpecker-plugins/src/theme/Icons.tsx b/docs/plugins/woodpecker-plugins/src/theme/Icons.tsx
index 436f9ba79..4bd734cf2 100644
--- a/docs/plugins/woodpecker-plugins/src/theme/Icons.tsx
+++ b/docs/plugins/woodpecker-plugins/src/theme/Icons.tsx
@@ -43,3 +43,15 @@ export const IconWebsite = (size = 32) => (
     </g>
   </svg>
 );
+
+export const IconPlugin = () => (
+  <svg style={{ width: '100%', maxWidth: '50px' }} viewBox="0 0 24 24">
+    <g fill="none">
+      <path d="M0 0h24v24H0z" />
+      <path
+        fill="currentColor"
+        d="M2 9a3 3 0 0 1 3-3h2.853c.297 0 .48-.309.366-.583A2.474 2.474 0 0 1 8.083 5c-.331-1.487.792-3 2.417-3c1.626 0 2.748 1.513 2.417 3a2.48 2.48 0 0 1-.136.417c-.115.274.069.583.366.583H15a3 3 0 0 1 3 3v1.853c0 .297.308.48.583.366c.135-.056.273-.104.417-.136c1.487-.331 3 .791 3 2.417s-1.513 2.748-3 2.417a2.475 2.475 0 0 1-.417-.136c-.274-.115-.583.069-.583.366V19a3 3 0 0 1-3 3h-1.893c-.288 0-.473-.291-.39-.566c.041-.14.072-.284.085-.434a2.31 2.31 0 1 0-4.604 0c.013.15.044.294.086.434c.082.275-.103.566-.39.566H5a3 3 0 0 1-3-3v-2.893c0-.288.291-.473.566-.39c.14.041.284.072.434.085a2.31 2.31 0 1 0 0-4.604c-.15.013-.294.044-.434.086c-.275.082-.566-.103-.566-.39V9Z"
+      />
+    </g>
+  </svg>
+);
diff --git a/docs/plugins/woodpecker-plugins/src/theme/WoodpeckerPluginList.tsx b/docs/plugins/woodpecker-plugins/src/theme/WoodpeckerPluginList.tsx
index bc20071d4..c1b5cb335 100644
--- a/docs/plugins/woodpecker-plugins/src/theme/WoodpeckerPluginList.tsx
+++ b/docs/plugins/woodpecker-plugins/src/theme/WoodpeckerPluginList.tsx
@@ -3,7 +3,7 @@ import Fuse from 'fuse.js';
 import Layout from '@theme/Layout';
 import './style.css';
 import { WoodpeckerPlugin } from '../types';
-import { IconVerified } from './Icons';
+import { IconPlugin, IconVerified } from './Icons';
 
 function PluginPanel({ plugin }: { plugin: WoodpeckerPlugin }) {
   const pluginUrl = `/plugins/${plugin.name}`;
@@ -11,9 +11,7 @@ function PluginPanel({ plugin }: { plugin: WoodpeckerPlugin }) {
   return (
     <a href={pluginUrl} className="card shadow--md wp-plugin-card">
       <div className="card__header row">
-        <div className="col col--2 text--left">
-          <img src={plugin.icon} width="50" height="50" />
-        </div>
+        <div className="col col--2 text--left">{plugin.icon ? <img src={plugin.icon} width="50" /> : IconPlugin()}</div>
         <div className="col col--10">
           <h3>{plugin.name}</h3>
           <p>{plugin.description}</p>
diff --git a/docs/plugins/woodpecker-plugins/src/theme/style.css b/docs/plugins/woodpecker-plugins/src/theme/style.css
index 0540b8147..dd00e3873 100644
--- a/docs/plugins/woodpecker-plugins/src/theme/style.css
+++ b/docs/plugins/woodpecker-plugins/src/theme/style.css
@@ -1,10 +1,16 @@
 .wp-plugins-list {
   display: grid;
-  grid-template-columns: auto auto;
+  grid-template-columns: repeat(auto-fill,minmax(350px,1fr));
   grid-gap: 2rem;
   margin-top: 2rem;
 }
 
+@media screen and (max-width: 450px) {
+  .wp-plugins-list {
+    grid-template-columns: auto;
+  }
+}
+
 .wp-plugin-card {
   display: flex;
   position: relative;
@@ -13,6 +19,8 @@
   text-decoration: none;
   padding: .5rem 0 1rem;
   flex-grow: 1;
+  margin: 0 auto;
+  width: 100%;
 }
 
 .wp-plugin-card:hover {
@@ -40,6 +48,7 @@
 .wp-plugin-tags {
   display: flex;
   gap: .5rem;
+  flex-wrap: wrap;
 }
 
 .wp-plugin-search {