diff --git a/docs/apps/index.html b/docs/apps/index.html
index fdd5bb4f..55bee650 100644
--- a/docs/apps/index.html
+++ b/docs/apps/index.html
@@ -61,93 +61,95 @@
             
             <h2>Supported Applications</h2>
             
-            <div class="app-card sonarr-card">
-                <div class="app-card-header">
-                    <div class="app-card-icon sonarr">
-                        <img src="../images/arrs/48-sonarr.png" alt="Sonarr Logo" width="48" height="48">
+            <div class="app-cards-grid">
+                <div class="app-card sonarr-card">
+                    <div class="app-card-header">
+                        <div class="app-card-icon sonarr">
+                            <img src="../images/arrs/48-sonarr.png" alt="Sonarr Logo" width="48" height="48">
+                        </div>
+                        <h3 class="app-card-title">Sonarr</h3>
                     </div>
-                    <h3 class="app-card-title">Sonarr</h3>
-                </div>
-                <div class="app-card-content">
-                    <p>Manage and automate TV show downloads.</p>
-                </div>
-                <div class="app-card-footer">
-                    <a href="sonarr.html">View Sonarr Documentation →</a>
-                </div>
-            </div>
-            
-            <div class="app-card radarr-card">
-                <div class="app-card-header">
-                    <div class="app-card-icon radarr">
-                        <img src="../images/arrs/48-radarr.png" alt="Radarr Logo" width="48" height="48">
+                    <div class="app-card-content">
+                        <p>Manage and automate TV show downloads.</p>
                     </div>
-                    <h3 class="app-card-title">Radarr</h3>
-                </div>
-                <div class="app-card-content">
-                    <p>Manage and automate movie downloads.</p>
-                </div>
-                <div class="app-card-footer">
-                    <a href="radarr.html">View Radarr Documentation →</a>
-                </div>
-            </div>
-            
-            <div class="app-card lidarr-card">
-                <div class="app-card-header">
-                    <div class="app-card-icon lidarr">
-                        <img src="../images/arrs/48-lidarr.png" alt="Lidarr Logo" width="48" height="48">
+                    <div class="app-card-footer">
+                        <a href="sonarr.html">View Documentation →</a>
                     </div>
-                    <h3 class="app-card-title">Lidarr</h3>
                 </div>
-                <div class="app-card-content">
-                    <p>Manage and automate music downloads.</p>
-                </div>
-                <div class="app-card-footer">
-                    <a href="lidarr.html">View Lidarr Documentation →</a>
-                </div>
-            </div>
-            
-            <div class="app-card readarr-card">
-                <div class="app-card-header">
-                    <div class="app-card-icon readarr">
-                        <img src="../images/arrs/48-readarr.png" alt="Readarr Logo" width="48" height="48">
+                
+                <div class="app-card radarr-card">
+                    <div class="app-card-header">
+                        <div class="app-card-icon radarr">
+                            <img src="../images/arrs/48-radarr.png" alt="Radarr Logo" width="48" height="48">
+                        </div>
+                        <h3 class="app-card-title">Radarr</h3>
                     </div>
-                    <h3 class="app-card-title">Readarr</h3>
-                </div>
-                <div class="app-card-content">
-                    <p>Manage and automate book downloads.</p>
-                </div>
-                <div class="app-card-footer">
-                    <a href="readarr.html">View Readarr Documentation →</a>
-                </div>
-            </div>
-            
-            <div class="app-card whisparr-card">
-                <div class="app-card-header">
-                    <div class="app-card-icon whisparr">
-                        <img src="../images/arrs/48-whisparr.png" alt="Whisparr Logo" width="48" height="48">
+                    <div class="app-card-content">
+                        <p>Manage and automate movie downloads.</p>
                     </div>
-                    <h3 class="app-card-title">Whisparr V2</h3>
-                </div>
-                <div class="app-card-content">
-                    <p>Manage and automate adult content downloads.</p>
-                </div>
-                <div class="app-card-footer">
-                    <a href="whisparr.html">View Whisparr Documentation →</a>
-                </div>
-            </div>
-            
-            <div class="app-card whisparr-card">
-                <div class="app-card-header">
-                    <div class="app-card-icon whisparr">
-                        <img src="../images/arrs/48-whisparr.png" alt="Whisparr V3 Logo" width="48" height="48">
+                    <div class="app-card-footer">
+                        <a href="radarr.html">View Documentation →</a>
                     </div>
-                    <h3 class="app-card-title">Whisparr V3 (Eros)</h3>
                 </div>
-                <div class="app-card-content">
-                    <p>Newer version of Whisparr for managing adult content downloads.</p>
+                
+                <div class="app-card lidarr-card">
+                    <div class="app-card-header">
+                        <div class="app-card-icon lidarr">
+                            <img src="../images/arrs/48-lidarr.png" alt="Lidarr Logo" width="48" height="48">
+                        </div>
+                        <h3 class="app-card-title">Lidarr</h3>
+                    </div>
+                    <div class="app-card-content">
+                        <p>Manage and automate music downloads.</p>
+                    </div>
+                    <div class="app-card-footer">
+                        <a href="lidarr.html">View Documentation →</a>
+                    </div>
                 </div>
-                <div class="app-card-footer">
-                    <a href="eros.html">View Whisparr V3 Documentation →</a>
+                
+                <div class="app-card readarr-card">
+                    <div class="app-card-header">
+                        <div class="app-card-icon readarr">
+                            <img src="../images/arrs/48-readarr.png" alt="Readarr Logo" width="48" height="48">
+                        </div>
+                        <h3 class="app-card-title">Readarr</h3>
+                    </div>
+                    <div class="app-card-content">
+                        <p>Manage and automate book downloads.</p>
+                    </div>
+                    <div class="app-card-footer">
+                        <a href="readarr.html">View Documentation →</a>
+                    </div>
+                </div>
+                
+                <div class="app-card whisparr-card">
+                    <div class="app-card-header">
+                        <div class="app-card-icon whisparr">
+                            <img src="../images/arrs/48-whisparr.png" alt="Whisparr Logo" width="48" height="48">
+                        </div>
+                        <h3 class="app-card-title">Whisparr V2</h3>
+                    </div>
+                    <div class="app-card-content">
+                        <p>Manage and automate adult content downloads.</p>
+                    </div>
+                    <div class="app-card-footer">
+                        <a href="whisparr.html">View Documentation →</a>
+                    </div>
+                </div>
+                
+                <div class="app-card whisparr-card">
+                    <div class="app-card-header">
+                        <div class="app-card-icon whisparr">
+                            <img src="../images/arrs/48-whisparr.png" alt="Whisparr V3 Logo" width="48" height="48">
+                        </div>
+                        <h3 class="app-card-title">Whisparr V3 (Eros)</h3>
+                    </div>
+                    <div class="app-card-content">
+                        <p>Newer version of Whisparr for managing adult content downloads.</p>
+                    </div>
+                    <div class="app-card-footer">
+                        <a href="eros.html">View Documentation →</a>
+                    </div>
                 </div>
             </div>
             
diff --git a/docs/css/main.css b/docs/css/main.css
index de29ae8f..4bfa9a22 100644
--- a/docs/css/main.css
+++ b/docs/css/main.css
@@ -708,15 +708,23 @@ footer {
 }
 
 /* Card style for app blocks */
+/* App cards grid container */
+.app-cards-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 20px;
+    margin: 20px 0;
+}
+
 .app-card {
     display: flex;
     flex-direction: column;
     border-radius: 8px;
     background-color: rgba(20, 25, 35, 0.6);
-    margin: 20px 0;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s, box-shadow 0.3s;
     overflow: hidden;
+    height: 100%;
 }
 
 .app-card:hover {
@@ -725,9 +733,11 @@ footer {
 }
 
 .app-card-header {
-    padding: 15px;
+    padding: 12px 15px;
     display: flex;
     align-items: center;
+    background-color: #252a34;
+    border-bottom: none;
 }
 
 .app-card-icon {
@@ -778,14 +788,15 @@ footer {
 }
 
 .app-card-content {
-    padding: 15px;
+    padding: 12px 15px;
     flex: 1;
 }
 
 .app-card-footer {
-    padding: 10px 15px;
+    padding: 8px 15px;
     background-color: rgba(10, 15, 25, 0.3);
     text-align: right;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 /* Card styled for sonarr */