diff --git a/src/YumeChan.NetRunner/Pages/BotPlugins.razor b/src/YumeChan.NetRunner/Pages/BotPlugins.razor
index 8fe8db7..0c36365 100644
--- a/src/YumeChan.NetRunner/Pages/BotPlugins.razor
+++ b/src/YumeChan.NetRunner/Pages/BotPlugins.razor
@@ -3,39 +3,28 @@
 
 @using YumeChan.PluginBase;
 @using YumeChan.Core.Services.Plugins
+@using YumeChan.NetRunner.Shared.Plugins
 
 @inject AuthenticationStateProvider AuthStateProvider;
 @inject PluginsLoader PluginsLoader;
 
 
 
-<h1>Plugins</h1>
-<br />
-<h3>Currently Loaded : @PluginsLoader.PluginManifests.Count Plugins</h3>
-<br />
-
-<table class="table table-hover">
-	<thead>
-		<tr>
-			<th>Assembly</th>
-			<th>Plugin Name</th>
-			<th>Version</th>
-			<th>Active</th>
-		</tr>
-	</thead>
-
-	<tbody>
-		@foreach (IPlugin pluginManifest in PluginsLoader.PluginManifests.Values.Where(p => _isAdmin || !p.StealthMode))
-		{
-			<tr>
-				<td><a href="/p/@pluginManifest.AssemblyName/">@pluginManifest.AssemblyName</a></td>
-				<td>@pluginManifest.DisplayName</td>
-				<td>@pluginManifest.Version</td>
-				<td>@(pluginManifest.Loaded ? "Yes" : "No")</td>
-			</tr>
-		}
-	</tbody>
-</table>
+<div class="d-flex justify-content-between align-items-end mb-4">
+	<h1><i class="bi bi-plugin me-3"></i>Plugins</h1>
+	<p class="lead">Currently Loaded : @PluginsLoader.PluginManifests.Count Plugins</p>
+</div>
+
+<div id="plugin-cards" class="row">
+	@foreach (IPlugin pluginManifest in PluginsLoader.PluginManifests.Values.Where(p => _isAdmin || !p.StealthMode))
+	{
+		<div class="col-12 col-md-6 col-lg-4">
+			<PluginCard PluginManifest="pluginManifest" />
+		</div>
+	}
+
+</div>
+
 
 @code {
 
diff --git a/src/YumeChan.NetRunner/Shared/Plugins/PluginCard.razor b/src/YumeChan.NetRunner/Shared/Plugins/PluginCard.razor
new file mode 100644
index 0000000..9999fb1
--- /dev/null
+++ b/src/YumeChan.NetRunner/Shared/Plugins/PluginCard.razor
@@ -0,0 +1,86 @@
+@using YumeChan.PluginBase
+
+@*
+    Structure:
+    - Plugin Icon
+    - Plugin Name
+    - Plugin Description
+    - Plugin Version / Author(s)
+    - Plugin Status
+*@
+
+
+<div id="plugin-card-@(PluginManifest.AssemblyName.ToLowerInvariant())" 
+    class="card bg-body border-@(PluginManifest.Loaded ? "success" : "secondary") p-4 d-flex flex-column align-items-center h-100"
+>
+    <img src="@(PluginManifest.IconUri?.ToString() ?? "/plugin.svg")" class="card-img p-3 img-fluid ratio-1x1" alt="@PluginManifest.DisplayName">
+
+    <div class="my-2 text-center">
+        <h3 class="card-title text-center mb-0">@PluginManifest.DisplayName</h3>
+        <small class="text-muted text-center">
+            <code>@PluginManifest.AssemblyName</code>
+        </small>
+    </div>
+
+    <p class="card-text text-center">@PluginManifest.Description</p>
+
+    <div class="w-100 mt-auto">
+        @* Dashboard: Centre button *@
+        <a class="btn btn-primary w-100 px-2" href="/p/@PluginManifest.AssemblyName/" title="Dashboard">
+            <i inert class="bi me-2 bi-speedometer2"></i>Dashboard
+        </a>
+        
+        <div class="btn-group btn-group-sm my-2 w-100" role="group">
+            @if (PluginManifest.ProjectHomepage is not null)
+            {
+                <a href="@PluginManifest.ProjectHomepage" target="_blank" rel="noopener" class="btn btn-secondary px-2">
+                    <i inert class="bi me-2 bi-globe"></i>Homepage
+                </a>
+            }
+
+            @if (PluginManifest.SourceCodeRepository is not null)
+            {
+                <a href="@PluginManifest.SourceCodeRepository" target="_blank" rel="noopener" class="btn btn-secondary px-2">
+                    <i inert class="bi me-2 bi-code-slash"></i>Repository
+                </a>
+            }
+
+            @if (PluginManifest.AuthorContact is not null)
+            {
+                bool isEmail = PluginManifest.AuthorContact.Contains('@');
+                bool isUrl = Uri.TryCreate(PluginManifest.AuthorContact, UriKind.Absolute, out _);
+                string builtUrl = isUrl ? PluginManifest.AuthorContact : isEmail ? $"mailto:{PluginManifest.AuthorContact}" : null;
+
+                <a href="@builtUrl" target="_blank" rel="noopener" class="btn btn-secondary px-2">
+                    <i inert class="bi me-2 @(isEmail ? "bi-envelope" : "bi-person")"></i>@(isEmail ? "Contact" : "Author")
+                </a>
+            }
+        </div>
+
+        <div class="d-flex justify-content-between gap-3">
+            <small class="text-muted" title="Commit hash: @(VersionInfo.Item2 ?? "N/A")">@VersionInfo.Item1</small>
+            <small class="text-muted">@(PluginManifest.Author ?? "Unknown")</small>
+        </div>
+    </div>
+</div>
+
+@code {
+    [Parameter]
+    public IPlugin PluginManifest { get; set; }
+
+    public (string, string?) VersionInfo { get; set; } = ("", "");
+    
+    protected override void OnParametersSet()
+    {
+        if (PluginManifest.Version is { Length: not 0 } version)
+        {
+            // Try splitting the version string into two parts
+            VersionInfo = version.LastIndexOf('+') is var hashIndex and not -1 
+                ? (version[..hashIndex], version[(hashIndex + 1)..]) 
+                : (version, null);
+        }
+        
+        base.OnParametersSet();
+    }
+
+}
\ No newline at end of file
diff --git a/src/YumeChan.NetRunner/wwwroot/plugin.svg b/src/YumeChan.NetRunner/wwwroot/plugin.svg
new file mode 100644
index 0000000..3a2ab42
--- /dev/null
+++ b/src/YumeChan.NetRunner/wwwroot/plugin.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#eeeeee" class="bi bi-plugin" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0"/>
+</svg>
\ No newline at end of file