From e73f4cd81a11fc3682993914c9995cccc2e80831 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Mon, 22 Dec 2025 23:47:12 -0500
Subject: [PATCH] feat: enhance control panel layout and improve card
 presentation for better user experience

---
 themes/lucentui/views/home.blade.php | 382 +++++++++++++--------------
 1 file changed, 183 insertions(+), 199 deletions(-)

diff --git a/themes/lucentui/views/home.blade.php b/themes/lucentui/views/home.blade.php
index 05ec2360e..67ff83826 100644
--- a/themes/lucentui/views/home.blade.php
+++ b/themes/lucentui/views/home.blade.php
@@ -218,7 +218,7 @@
         <div class="container mx-auto px-4">
             <div class="bg-gradient-to-b from-background-secondary/50 to-background-secondary/20 rounded-3xl p-8 md:p-12">
                 <!-- Section Header -->
-                <div class="max-w-2xl mb-12">
+                <div class="text-center max-w-2xl mx-auto mb-12">
                     <p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">Control Panel</p>
                     <h2 class="text-3xl md:text-4xl font-bold text-color-base mb-4">
                         {{ theme('panel_title', 'Complete Server Management') }}
@@ -228,26 +228,26 @@
                     </p>
                 </div>
 
-            <!-- Bento Grid -->
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-4 md:gap-6">
-                <!-- Live Telemetry - Large Card -->
-                <div class="lg:col-span-7 group relative overflow-hidden bg-gradient-to-br from-primary/5 via-background-secondary to-background-secondary border border-primary/20 hover:border-primary/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:shadow-primary/10">
+            <!-- Bento Grid - Row 1: Live Telemetry + Firewall -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+                <!-- Live Telemetry -->
+                <div class="group relative overflow-hidden bg-gradient-to-br from-primary/5 via-background-secondary to-background-secondary border border-primary/20 hover:border-primary/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:shadow-primary/10">
                     <div class="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
                     <div class="relative z-10">
-                        <div class="flex items-start justify-between mb-6">
-                            <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center shadow-lg shadow-primary/30">
-                                <x-ri-line-chart-line class="size-8 text-white" />
+                        <div class="flex items-start justify-between mb-5">
+                            <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center shadow-lg shadow-primary/30">
+                                <x-ri-line-chart-line class="size-7 text-white" />
                             </div>
-                            <div class="flex gap-1">
-                                <span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">CPU</span>
-                                <span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">Memory</span>
-                                <span class="px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">Network</span>
+                            <div class="flex gap-1.5">
+                                <span class="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">CPU</span>
+                                <span class="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">RAM</span>
+                                <span class="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">Network</span>
                             </div>
                         </div>
-                        <h3 class="text-2xl font-bold text-color-base mb-2">Live Telemetry</h3>
-                        <p class="text-color-muted leading-relaxed mb-6">Monitor CPU, memory, network, and disk I/O with interactive charts. Track performance over hours, days, weeks, or months.</p>
+                        <h3 class="text-xl font-bold text-color-base mb-2">Live Telemetry</h3>
+                        <p class="text-color-muted text-sm leading-relaxed mb-5">Monitor CPU, memory, network, and disk I/O with interactive charts. Track performance over time.</p>
                         <!-- Mock Chart - Animated -->
-                        <div style="display: flex; align-items: flex-end; gap: 4px; padding: 16px; background: rgba(0,0,0,0.1); border-radius: 12px; height: 96px;">
+                        <div style="display: flex; align-items: flex-end; gap: 3px; padding: 12px; background: rgba(0,0,0,0.1); border-radius: 12px; height: 80px;">
                             <span class="chart-bar" style="--delay: 0s; --h1: 65%; --h2: 40%; --h3: 85%; --h4: 30%;"></span>
                             <span class="chart-bar" style="--delay: 0.1s; --h1: 45%; --h2: 70%; --h3: 35%; --h4: 80%;"></span>
                             <span class="chart-bar" style="--delay: 0.2s; --h1: 80%; --h2: 50%; --h3: 70%; --h4: 45%;"></span>
@@ -266,228 +266,212 @@
                             <span class="chart-bar" style="--delay: 0.45s; --h1: 70%; --h2: 50%; --h3: 90%; --h4: 35%;"></span>
                             <span class="chart-bar" style="--delay: 0.55s; --h1: 40%; --h2: 75%; --h3: 55%; --h4: 85%;"></span>
                             <span class="chart-bar" style="--delay: 0.65s; --h1: 90%; --h2: 60%; --h3: 70%; --h4: 45%;"></span>
-                            <span class="chart-bar" style="--delay: 0.75s; --h1: 50%; --h2: 40%; --h3: 80%; --h4: 65%;"></span>
-                            <span class="chart-bar" style="--delay: 0.85s; --h1: 75%; --h2: 85%; --h3: 35%; --h4: 55%;"></span>
-                            <span class="chart-bar" style="--delay: 0.95s; --h1: 35%; --h2: 55%; --h3: 65%; --h4: 90%;"></span>
-                            <span class="chart-bar" style="--delay: 1.05s; --h1: 85%; --h2: 45%; --h3: 50%; --h4: 40%;"></span>
-                            <span class="chart-bar" style="--delay: 0.05s; --h1: 60%; --h2: 70%; --h3: 85%; --h4: 75%;"></span>
-                            <span class="chart-bar" style="--delay: 0.12s; --h1: 45%; --h2: 90%; --h3: 40%; --h4: 60%;"></span>
                         </div>
                     </div>
                 </div>
 
-                <!-- Firewall - Medium Card -->
-                <div class="lg:col-span-5 group relative overflow-hidden bg-gradient-to-br from-warning/5 via-background-secondary to-background-secondary border border-warning/20 hover:border-warning/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:shadow-warning/10">
-                    <div class="absolute bottom-0 left-0 w-48 h-48 bg-warning/10 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
-                    <div class="relative z-10 h-full flex flex-col">
-                        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-warning to-warning/70 flex items-center justify-center shadow-lg shadow-warning/30 mb-6">
-                            <x-ri-shield-keyhole-line class="size-8 text-white" />
-                        </div>
-                        <h3 class="text-2xl font-bold text-color-base mb-2">Firewall Manager</h3>
-                        <p class="text-color-muted leading-relaxed mb-6 flex-1">Configure inbound and outbound rules, set default policies, create IP aliases and view real-time firewall logs.</p>
-                        <div class="flex flex-wrap gap-2">
-                            <span class="px-3 py-1.5 bg-warning/10 text-warning text-xs font-semibold rounded-lg">Custom Rules</span>
-                            <span class="px-3 py-1.5 bg-warning/10 text-warning text-xs font-semibold rounded-lg">IP Aliases</span>
-                            <span class="px-3 py-1.5 bg-warning/10 text-warning text-xs font-semibold rounded-lg">Live Logs</span>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Backups - Medium Card -->
-                <div class="lg:col-span-4 group relative overflow-hidden bg-gradient-to-br from-success/5 via-background-secondary to-background-secondary border border-success/20 hover:border-success/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:shadow-success/10">
-                    <div class="relative z-10 h-full flex flex-col">
-                        <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-success to-success/70 flex items-center justify-center shadow-lg shadow-success/30 mb-5">
-                            <x-ri-database-2-line class="size-7 text-white" />
-                        </div>
-                        <h3 class="text-xl font-bold text-color-base mb-2">Backup & Snapshots</h3>
-                        <p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Create manual backups or rely on automated hourly snapshots. One-click restore.</p>
-                        <div class="p-3 bg-success/10 rounded-xl border border-success/20">
-                            <div class="flex items-center justify-between text-sm">
-                                <span class="text-color-muted">Last backup</span>
-                                <span class="text-success font-medium">2 hours ago</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Console - Medium Card -->
-                <div class="lg:col-span-4 group relative overflow-hidden bg-gradient-to-br from-info/5 via-background-secondary to-background-secondary border border-info/20 hover:border-info/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:shadow-info/10">
+                <!-- VNC Console -->
+                <div class="group relative overflow-hidden bg-gradient-to-br from-info/5 via-background-secondary to-background-secondary border border-info/20 hover:border-info/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:shadow-info/10">
+                    <div class="absolute bottom-0 right-0 w-48 h-48 bg-info/10 rounded-full blur-3xl translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
                     <div class="relative z-10 h-full flex flex-col">
                         <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-info to-info/70 flex items-center justify-center shadow-lg shadow-info/30 mb-5">
                             <x-ri-terminal-box-line class="size-7 text-white" />
                         </div>
                         <h3 class="text-xl font-bold text-color-base mb-2">VNC Console</h3>
-                        <p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Direct web-based access to your VPS. Perfect for OS installation and recovery mode.</p>
-                        <div style="padding: 12px; background: #0d1117; border-radius: 12px; font-family: 'Courier New', monospace; font-size: 13px; border: 1px solid #30363d;">
+                        <p class="text-color-muted text-sm leading-relaxed mb-5 flex-1">Direct web-based access to your VPS. Perfect for OS installation and recovery mode.</p>
+                        <div style="padding: 14px; background: #0d1117; border-radius: 12px; font-family: 'Courier New', monospace; font-size: 13px; border: 1px solid #30363d;">
                             <span style="color: #58a6ff; font-weight: 600;">root@vps</span><span style="color: #8b949e;">:</span><span style="color: #7ee787; font-weight: 600;">~</span><span style="color: #8b949e;">$</span> <span id="terminal-text" style="color: #f0f6fc;"></span><span id="terminal-cursor" style="color: #58a6ff;">█</span>
                         </div>
                     </div>
                 </div>
+            </div>
 
-                <script>
-                (function() {
-                    const commands = [
-                        'systemctl status nginx',
-                        'htop',
-                        'df -h',
-                        'free -m',
-                        'uname -a',
-                        'ls -la /var/www',
-                        'tail -f /var/log/syslog',
-                        'netstat -tulpn',
-                        'docker ps',
-                        'cat /etc/os-release',
-                        'uptime',
-                        'whoami',
-                        'pwd',
-                        'ip addr show'
-                    ];
+            <script>
+            (function() {
+                const commands = [
+                    'systemctl status nginx',
+                    'htop',
+                    'df -h',
+                    'free -m',
+                    'uname -a',
+                    'ls -la /var/www',
+                    'tail -f /var/log/syslog',
+                    'netstat -tulpn',
+                    'docker ps',
+                    'cat /etc/os-release',
+                    'uptime',
+                    'whoami',
+                    'pwd',
+                    'ip addr show'
+                ];
+                
+                const textEl = document.getElementById('terminal-text');
+                const cursorEl = document.getElementById('terminal-cursor');
+                let currentText = '';
+                let isTyping = true;
+                let commandIndex = Math.floor(Math.random() * commands.length);
+                let charIndex = 0;
+                
+                // Cursor blink
+                setInterval(() => {
+                    cursorEl.style.opacity = cursorEl.style.opacity === '0' ? '1' : '0';
+                }, 530);
+                
+                function type() {
+                    const command = commands[commandIndex];
                     
-                    const textEl = document.getElementById('terminal-text');
-                    const cursorEl = document.getElementById('terminal-cursor');
-                    let currentText = '';
-                    let isTyping = true;
-                    let commandIndex = Math.floor(Math.random() * commands.length);
-                    let charIndex = 0;
-                    
-                    // Cursor blink
-                    setInterval(() => {
-                        cursorEl.style.opacity = cursorEl.style.opacity === '0' ? '1' : '0';
-                    }, 530);
-                    
-                    function type() {
-                        const command = commands[commandIndex];
-                        
-                        if (isTyping) {
-                            if (charIndex < command.length) {
-                                currentText += command[charIndex];
-                                textEl.textContent = currentText;
-                                charIndex++;
-                                setTimeout(type, 50 + Math.random() * 100);
-                            } else {
-                                // Finished typing, wait then delete
-                                setTimeout(() => {
-                                    isTyping = false;
-                                    type();
-                                }, 2000 + Math.random() * 1500);
-                            }
+                    if (isTyping) {
+                        if (charIndex < command.length) {
+                            currentText += command[charIndex];
+                            textEl.textContent = currentText;
+                            charIndex++;
+                            setTimeout(type, 50 + Math.random() * 100);
                         } else {
-                            if (currentText.length > 0) {
-                                currentText = currentText.slice(0, -1);
-                                textEl.textContent = currentText;
-                                setTimeout(type, 30 + Math.random() * 40);
-                            } else {
-                                // Finished deleting, pick new command
-                                isTyping = true;
-                                charIndex = 0;
-                                let newIndex;
-                                do {
-                                    newIndex = Math.floor(Math.random() * commands.length);
-                                } while (newIndex === commandIndex && commands.length > 1);
-                                commandIndex = newIndex;
-                                setTimeout(type, 500 + Math.random() * 500);
-                            }
+                            // Finished typing, wait then delete
+                            setTimeout(() => {
+                                isTyping = false;
+                                type();
+                            }, 2000 + Math.random() * 1500);
+                        }
+                    } else {
+                        if (currentText.length > 0) {
+                            currentText = currentText.slice(0, -1);
+                            textEl.textContent = currentText;
+                            setTimeout(type, 30 + Math.random() * 40);
+                        } else {
+                            // Finished deleting, pick new command
+                            isTyping = true;
+                            charIndex = 0;
+                            let newIndex;
+                            do {
+                                newIndex = Math.floor(Math.random() * commands.length);
+                            } while (newIndex === commandIndex && commands.length > 1);
+                            commandIndex = newIndex;
+                            setTimeout(type, 500 + Math.random() * 500);
                         }
                     }
-                    
-                    // Start after a short delay
-                    setTimeout(type, 1000);
-                })();
-                </script>
+                }
+                
+                // Start after a short delay
+                setTimeout(type, 1000);
+            })();
+            </script>
 
-                <!-- Storage - Card -->
-                <div class="lg:col-span-4 group relative overflow-hidden bg-gradient-to-br from-purple-500/5 via-background-secondary to-background-secondary border border-purple-500/20 hover:border-purple-500/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-purple-500/10">
+            <!-- Bento Grid - Row 2: 4 Medium Cards -->
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+                <!-- Firewall Manager -->
+                <div class="group relative overflow-hidden bg-gradient-to-br from-warning/5 via-background-secondary to-background-secondary border border-warning/20 hover:border-warning/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-warning/10">
+                    <div class="relative z-10 h-full flex flex-col">
+                        <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-warning to-warning/70 flex items-center justify-center shadow-lg shadow-warning/30 mb-4">
+                            <x-ri-shield-keyhole-line class="size-6 text-white" />
+                        </div>
+                        <h3 class="text-lg font-bold text-color-base mb-2">Firewall</h3>
+                        <p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Custom rules, IP aliases and real-time logs.</p>
+                        <div class="flex flex-wrap gap-1.5">
+                            <span class="px-2 py-1 bg-warning/10 text-warning text-xs font-medium rounded-lg">Inbound</span>
+                            <span class="px-2 py-1 bg-warning/10 text-warning text-xs font-medium rounded-lg">Outbound</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Backup & Snapshots -->
+                <div class="group relative overflow-hidden bg-gradient-to-br from-success/5 via-background-secondary to-background-secondary border border-success/20 hover:border-success/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-success/10">
+                    <div class="relative z-10 h-full flex flex-col">
+                        <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-success to-success/70 flex items-center justify-center shadow-lg shadow-success/30 mb-4">
+                            <x-ri-database-2-line class="size-6 text-white" />
+                        </div>
+                        <h3 class="text-lg font-bold text-color-base mb-2">Backups</h3>
+                        <p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Automated snapshots with one-click restore.</p>
+                        <div class="p-2.5 bg-success/10 rounded-xl border border-success/20">
+                            <div class="flex items-center justify-between text-xs">
+                                <span class="text-color-muted">Last backup</span>
+                                <span class="text-success font-medium">2h ago</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Storage Manager -->
+                <div class="group relative overflow-hidden bg-gradient-to-br from-purple-500/5 via-background-secondary to-background-secondary border border-purple-500/20 hover:border-purple-500/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-purple-500/10">
                     <div class="relative z-10 h-full flex flex-col">
                         <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-purple-500 to-purple-500/70 flex items-center justify-center shadow-lg shadow-purple-500/30 mb-4">
                             <x-ri-hard-drive-2-line class="size-6 text-white" />
                         </div>
-                        <h3 class="text-lg font-bold text-color-base mb-2">Storage Manager</h3>
-                        <p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Add, resize, or remove virtual disks. Multiple bus types and cache modes.</p>
-                        <div class="space-y-2">
-                            <div class="flex items-center gap-2">
-                                <div class="flex-1 h-2 bg-background rounded-full overflow-hidden">
-                                    <div class="h-full w-[65%] bg-gradient-to-r from-purple-500 to-purple-400 rounded-full"></div>
-                                </div>
-                                <span class="text-xs text-color-muted">65GB / 100GB</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- OS Reinstall -->
-                <div class="lg:col-span-2 group relative overflow-hidden bg-gradient-to-br from-primary/5 via-background-secondary to-background-secondary border border-primary/20 hover:border-primary/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-primary/10">
-                    <div class="relative z-10 h-full flex flex-col">
-                        <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center shadow-lg shadow-primary/30 mb-4">
-                            <x-ri-refresh-line class="size-6 text-white" />
-                        </div>
-                        <h3 class="text-lg font-bold text-color-base mb-2">OS Reinstall</h3>
-                        <p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">50+ OS templates with one-click reinstallation.</p>
-                        <div class="flex flex-wrap gap-1.5">
-                            <span class="px-2 py-1 bg-primary/10 text-primary text-xs font-medium rounded-lg">Ubuntu</span>
-                            <span class="px-2 py-1 bg-primary/10 text-primary text-xs font-medium rounded-lg">Debian</span>
-                            <span class="px-2 py-1 bg-primary/10 text-primary text-xs font-medium rounded-lg">+48</span>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Task History -->
-                <div class="lg:col-span-2 group relative overflow-hidden bg-gradient-to-br from-secondary/5 via-background-secondary to-background-secondary border border-secondary/20 hover:border-secondary/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-secondary/10">
-                    <div class="relative z-10 h-full flex flex-col">
-                        <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-secondary to-secondary/70 flex items-center justify-center shadow-lg shadow-secondary/30 mb-4">
-                            <x-ri-history-line class="size-6 text-white" />
-                        </div>
-                        <h3 class="text-lg font-bold text-color-base mb-2">Task History</h3>
-                        <p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Full audit logs of all server operations.</p>
-                        <div class="space-y-1.5 text-xs">
-                            <div class="flex items-center justify-between text-color-muted">
-                                <span>OS Reinstall</span>
-                                <span class="text-success">✓</span>
-                            </div>
-                            <div class="flex items-center justify-between text-color-muted">
-                                <span>Snapshot</span>
-                                <span class="text-success">✓</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Network Tools -->
-                <div class="lg:col-span-2 group relative overflow-hidden bg-gradient-to-br from-success/5 via-background-secondary to-background-secondary border border-success/20 hover:border-success/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-success/10">
-                    <div class="relative z-10 h-full flex flex-col">
-                        <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-success to-success/70 flex items-center justify-center shadow-lg shadow-success/30 mb-4">
-                            <x-ri-global-line class="size-6 text-white" />
-                        </div>
-                        <h3 class="text-lg font-bold text-color-base mb-2">Network Tools</h3>
-                        <p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">IPv4 & IPv6 with rDNS and bandwidth stats.</p>
+                        <h3 class="text-lg font-bold text-color-base mb-2">Storage</h3>
+                        <p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Add, resize, or remove virtual disks.</p>
                         <div class="flex items-center gap-2">
-                            <div class="flex-1 text-center p-1.5 bg-success/10 rounded-lg">
-                                <div class="text-xs text-color-muted">↓</div>
-                                <div class="text-sm font-semibold text-success">1.2 GB</div>
-                            </div>
-                            <div class="flex-1 text-center p-1.5 bg-success/10 rounded-lg">
-                                <div class="text-xs text-color-muted">↑</div>
-                                <div class="text-sm font-semibold text-success">856 MB</div>
+                            <div class="flex-1 h-2 bg-background rounded-full overflow-hidden">
+                                <div class="h-full w-[65%] bg-gradient-to-r from-purple-500 to-purple-400 rounded-full"></div>
                             </div>
+                            <span class="text-xs text-color-muted whitespace-nowrap">65/100GB</span>
                         </div>
                     </div>
                 </div>
 
                 <!-- Power Controls -->
-                <div class="lg:col-span-2 group relative overflow-hidden bg-gradient-to-br from-warning/5 via-background-secondary to-background-secondary border border-warning/20 hover:border-warning/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-warning/10">
+                <div class="group relative overflow-hidden bg-gradient-to-br from-error/5 via-background-secondary to-background-secondary border border-error/20 hover:border-error/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-error/10">
                     <div class="relative z-10 h-full flex flex-col">
-                        <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-warning to-warning/70 flex items-center justify-center shadow-lg shadow-warning/30 mb-4">
+                        <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-error to-error/70 flex items-center justify-center shadow-lg shadow-error/30 mb-4">
                             <x-ri-shut-down-line class="size-6 text-white" />
                         </div>
-                        <h3 class="text-lg font-bold text-color-base mb-2">Power Controls</h3>
-                        <p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Graceful shutdown, hard reset, and power cycle.</p>
+                        <h3 class="text-lg font-bold text-color-base mb-2">Power</h3>
+                        <p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Start, stop, reboot, and power cycle.</p>
                         <div class="flex gap-1.5">
-                            <span class="flex-1 px-1.5 py-1 bg-success/15 text-success text-xs font-medium rounded-lg text-center">Start</span>
-                            <span class="flex-1 px-1.5 py-1 bg-warning/15 text-warning text-xs font-medium rounded-lg text-center">Reboot</span>
-                            <span class="flex-1 px-1.5 py-1 bg-error/15 text-error text-xs font-medium rounded-lg text-center">Stop</span>
+                            <span class="flex-1 py-1.5 bg-success/15 text-success text-xs font-medium rounded-lg text-center">Start</span>
+                            <span class="flex-1 py-1.5 bg-warning/15 text-warning text-xs font-medium rounded-lg text-center">Reboot</span>
+                            <span class="flex-1 py-1.5 bg-error/15 text-error text-xs font-medium rounded-lg text-center">Stop</span>
                         </div>
                     </div>
                 </div>
             </div>
+
+            <!-- Bento Grid - Row 3: Quick Features Strip -->
+            <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
+                <!-- OS Reinstall -->
+                <div class="group flex items-center gap-4 p-4 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-primary/30 rounded-2xl transition-all duration-300">
+                    <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
+                        <x-ri-refresh-line class="size-5 text-primary" />
+                    </div>
+                    <div>
+                        <h4 class="font-semibold text-color-base text-sm">OS Reinstall</h4>
+                        <p class="text-xs text-color-muted">50+ templates</p>
+                    </div>
+                </div>
+
+                <!-- Task History -->
+                <div class="group flex items-center gap-4 p-4 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-secondary/30 rounded-2xl transition-all duration-300">
+                    <div class="w-10 h-10 rounded-xl bg-secondary/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
+                        <x-ri-history-line class="size-5 text-secondary" />
+                    </div>
+                    <div>
+                        <h4 class="font-semibold text-color-base text-sm">Task History</h4>
+                        <p class="text-xs text-color-muted">Full audit logs</p>
+                    </div>
+                </div>
+
+                <!-- Network Tools -->
+                <div class="group flex items-center gap-4 p-4 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-success/30 rounded-2xl transition-all duration-300">
+                    <div class="w-10 h-10 rounded-xl bg-success/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
+                        <x-ri-global-line class="size-5 text-success" />
+                    </div>
+                    <div>
+                        <h4 class="font-semibold text-color-base text-sm">Network</h4>
+                        <p class="text-xs text-color-muted">IPv4/IPv6 & rDNS</p>
+                    </div>
+                </div>
+
+                <!-- ISO Mount -->
+                <div class="group flex items-center gap-4 p-4 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-info/30 rounded-2xl transition-all duration-300">
+                    <div class="w-10 h-10 rounded-xl bg-info/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
+                        <x-ri-disc-line class="size-5 text-info" />
+                    </div>
+                    <div>
+                        <h4 class="font-semibold text-color-base text-sm">ISO Mount</h4>
+                        <p class="text-xs text-color-muted">Custom images</p>
+                    </div>
+                </div>
+            </div>
+            </div>
         </div>
     </section>