diff --git a/baseTemplate/templates/baseTemplate/homePage.html b/baseTemplate/templates/baseTemplate/homePage.html
index b3e6dbfdb..69e9cb687 100755
--- a/baseTemplate/templates/baseTemplate/homePage.html
+++ b/baseTemplate/templates/baseTemplate/homePage.html
@@ -6,275 +6,592 @@
     {% get_current_language as LANGUAGE_CODE %}
     <!-- Current language: {{ LANGUAGE_CODE }} -->
 
-    <div class="container" style="background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; padding: 20px;">
+    <div class="container-fluid" style="background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; padding: 20px;">
         <div id="page-title" style="text-align: center; margin-bottom: 40px; padding: 30px; background: rgba(255,255,255,0.9); border-radius: 20px; backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0,0,0,0.1);">
-            <h2 style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 2.5rem; font-weight: 700; margin-bottom: 10px; text-shadow: none;">{% trans "Home" %}</h2>
+            <h2 style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 2.5rem; font-weight: 700; margin-bottom: 10px;">{% trans "Home" %}</h2>
             <p style="color: #6c757d; font-size: 1.1rem; margin: 0; font-weight: 400;">{% trans "Use the tabs to navigate through the control panel." %}</p>
         </div>
 
         <!-- Dashboard Stats Section -->
         <div ng-controller="dashboardStatsController" style="margin-bottom: 40px;">
             <!-- Info Cards Row -->
-            <div style="display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; justify-content: center;">
+            <div class="row" style="margin-bottom: 40px;">
                 <!-- Total Sites Card -->
-                <a href="{% url 'listWebsites' %}" style="flex: 1; min-width: 240px; max-width: 280px; text-decoration: none; transform: translateY(0); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);" onmouseover="this.style.transform='translateY(-10px) scale(1.02)'; this.style.boxShadow='0 20px 40px rgba(0,123,255,0.4)'" onmouseout="this.style.transform='translateY(0) scale(1)'; this.style.boxShadow='0 8px 25px rgba(0,123,255,0.25)'">
-                    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 25px; border-radius: 20px; box-shadow: 0 8px 25px rgba(0,123,255,0.25); height: 100%; cursor: pointer; position: relative; overflow: hidden;">
-                        <div style="position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); pointer-events: none;"></div>
-                        <div style="display: flex; align-items: center; position: relative; z-index: 1;">
-                            <div style="font-size: 3rem; margin-right: 20px; opacity: 0.9; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"><i class="fa fa-globe"></i></div>
-                            <div>
-                                <div style="font-size: 2.8rem; font-weight: 700; line-height: 1; text-shadow: 0 2px 4px rgba(0,0,0,0.2);">{$ totalSites $}</div>
-                                <div style="font-size: 1rem; opacity: 0.9; margin-top: 8px; font-weight: 500;">Total Sites</div>
+                <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-4">
+                    <a href="{% url 'listWebsites' %}" class="stat-card-link">
+                        <div class="stat-card gradient-purple">
+                            <div class="stat-card-overlay"></div>
+                            <div class="stat-card-content">
+                                <div class="stat-icon"><i class="fa fa-globe"></i></div>
+                                <div class="stat-details">
+                                    <div class="stat-number">{$ totalSites $}</div>
+                                    <div class="stat-label">Total Sites</div>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                </a>
+                    </a>
+                </div>
+                
                 <!-- WordPress Sites Card -->
-                <a href="{% url 'ListWPSites' %}?wp=1" style="flex: 1; min-width: 240px; max-width: 280px; text-decoration: none; transform: translateY(0); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);" onmouseover="this.style.transform='translateY(-10px) scale(1.02)'; this.style.boxShadow='0 20px 40px rgba(111,66,193,0.4)'" onmouseout="this.style.transform='translateY(0) scale(1)'; this.style.boxShadow='0 8px 25px rgba(111,66,193,0.25)'">
-                    <div style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); color: #fff; padding: 25px; border-radius: 20px; box-shadow: 0 8px 25px rgba(111,66,193,0.25); height: 100%; cursor: pointer; position: relative; overflow: hidden;">
-                        <div style="position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); pointer-events: none;"></div>
-                        <div style="display: flex; align-items: center; position: relative; z-index: 1;">
-                            <div style="font-size: 3rem; margin-right: 20px; opacity: 0.9; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); color: #6f42c1;"><i class="fa fa-wordpress"></i></div>
-                            <div>
-                                <div style="font-size: 2.8rem; font-weight: 700; line-height: 1; text-shadow: 0 2px 4px rgba(0,0,0,0.2); color: #6f42c1;">{$ totalWPSites $}</div>
-                                <div style="font-size: 1rem; opacity: 0.8; margin-top: 8px; font-weight: 500; color: #6f42c1;">WordPress Sites</div>
+                <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-4">
+                    <a href="{% url 'ListWPSites' %}?wp=1" class="stat-card-link">
+                        <div class="stat-card gradient-pink">
+                            <div class="stat-card-overlay"></div>
+                            <div class="stat-card-content">
+                                <div class="stat-icon" style="color: #6f42c1;"><i class="fa fa-wordpress"></i></div>
+                                <div class="stat-details">
+                                    <div class="stat-number" style="color: #6f42c1;">{$ totalWPSites $}</div>
+                                    <div class="stat-label" style="color: #6f42c1;">WordPress Sites</div>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                </a>
+                    </a>
+                </div>
+                
                 <!-- Total Databases Card -->
-                <a href="{% url 'listDBs' %}" style="flex: 1; min-width: 240px; max-width: 280px; text-decoration: none; transform: translateY(0); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);" onmouseover="this.style.transform='translateY(-10px) scale(1.02)'; this.style.boxShadow='0 20px 40px rgba(23,162,184,0.4)'" onmouseout="this.style.transform='translateY(0) scale(1)'; this.style.boxShadow='0 8px 25px rgba(23,162,184,0.25)'">
-                    <div style="background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); color: #fff; padding: 25px; border-radius: 20px; box-shadow: 0 8px 25px rgba(23,162,184,0.25); height: 100%; cursor: pointer; position: relative; overflow: hidden;">
-                        <div style="position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); pointer-events: none;"></div>
-                        <div style="display: flex; align-items: center; position: relative; z-index: 1;">
-                            <div style="font-size: 3rem; margin-right: 20px; opacity: 0.9; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); color: #17a2b8;"><i class="fa fa-database"></i></div>
-                            <div>
-                                <div style="font-size: 2.8rem; font-weight: 700; line-height: 1; text-shadow: 0 2px 4px rgba(0,0,0,0.2); color: #17a2b8;">{$ totalDBs $}</div>
-                                <div style="font-size: 1rem; opacity: 0.8; margin-top: 8px; font-weight: 500; color: #17a2b8;">Total Databases</div>
+                <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-4">
+                    <a href="{% url 'listDBs' %}" class="stat-card-link">
+                        <div class="stat-card gradient-red">
+                            <div class="stat-card-overlay"></div>
+                            <div class="stat-card-content">
+                                <div class="stat-icon" style="color: #17a2b8;"><i class="fa fa-database"></i></div>
+                                <div class="stat-details">
+                                    <div class="stat-number" style="color: #17a2b8;">{$ totalDBs $}</div>
+                                    <div class="stat-label" style="color: #17a2b8;">Total Databases</div>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                </a>
+                    </a>
+                </div>
+                
                 <!-- Total Emails Card -->
-                <a href="{% url 'listEmails' %}" style="flex: 1; min-width: 240px; max-width: 280px; text-decoration: none; transform: translateY(0); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);" onmouseover="this.style.transform='translateY(-10px) scale(1.02)'; this.style.boxShadow='0 20px 40px rgba(255,152,0,0.4)'" onmouseout="this.style.transform='translateY(0) scale(1)'; this.style.boxShadow='0 8px 25px rgba(255,152,0,0.25)'">
-                    <div style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); color: #fff; padding: 25px; border-radius: 20px; box-shadow: 0 8px 25px rgba(255,152,0,0.25); height: 100%; cursor: pointer; position: relative; overflow: hidden;">
-                        <div style="position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); pointer-events: none;"></div>
-                        <div style="display: flex; align-items: center; position: relative; z-index: 1;">
-                            <div style="font-size: 3rem; margin-right: 20px; opacity: 0.9; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); color: #ff9800;"><i class="fa fa-envelope"></i></div>
-                            <div>
-                                <div style="font-size: 2.8rem; font-weight: 700; line-height: 1; text-shadow: 0 2px 4px rgba(0,0,0,0.2); color: #ff9800;">{$ totalEmails $}</div>
-                                <div style="font-size: 1rem; opacity: 0.8; margin-top: 8px; font-weight: 500; color: #ff9800;">Total Emails</div>
+                <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 mb-4">
+                    <a href="{% url 'listEmails' %}" class="stat-card-link">
+                        <div class="stat-card gradient-orange">
+                            <div class="stat-card-overlay"></div>
+                            <div class="stat-card-content">
+                                <div class="stat-icon" style="color: #ff9800;"><i class="fa fa-envelope"></i></div>
+                                <div class="stat-details">
+                                    <div class="stat-number" style="color: #ff9800;">{$ totalEmails $}</div>
+                                    <div class="stat-label" style="color: #ff9800;">Total Emails</div>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                </a>
+                    </a>
+                </div>
             </div>
 
             {% if admin %}
+                <!-- System Stats Row -->
                 <div ng-controller="homePageStatus" style="margin-bottom: 40px;">
-                    <div style="display: flex; justify-content: center; gap: 40px; align-items: stretch; flex-wrap: wrap;">
+                    <div class="row justify-content-center">
                         <!-- CPU Usage -->
-                        <div style="background: rgba(255,255,255,0.95); border-radius: 20px; box-shadow: 0 8px 32px rgba(229,57,53,0.15); padding: 30px 40px; min-width: 200px; text-align: center; backdrop-filter: blur(10px); border: 1px solid rgba(229,57,53,0.1); transform: translateY(0); transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 15px 40px rgba(229,57,53,0.25)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 8px 32px rgba(229,57,53,0.15)'">
-                            <div style="font-size: 1.2rem; color: #e53935; font-weight: 700; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px;">{% trans "CPU Usage" %}</div>
-                            <div id="redcircle" class="c100 red cpu" style="margin: 0 auto; filter: drop-shadow(0 4px 8px rgba(229,57,53,0.2));">
-                                <span style="font-weight: 700; font-size: 1.2rem;">{$ cpuUsage $}%</span>
-                                <div class="slice">
-                                    <div class="bar"></div>
-                                    <div class="fill"></div>
+                        <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
+                            <div class="system-stat-card">
+                                <div class="system-stat-title">{% trans "CPU Usage" %}</div>
+                                <div id="redcircle" class="c100 red cpu">
+                                    <span class="system-stat-value">{$ cpuUsage $}%</span>
+                                    <div class="slice">
+                                        <div class="bar"></div>
+                                        <div class="fill"></div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
+                        
                         <!-- RAM Usage -->
-                        <div style="background: rgba(255,255,255,0.95); border-radius: 20px; box-shadow: 0 8px 32px rgba(67,160,71,0.15); padding: 30px 40px; min-width: 200px; text-align: center; backdrop-filter: blur(10px); border: 1px solid rgba(67,160,71,0.1); transform: translateY(0); transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 15px 40px rgba(67,160,71,0.25)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 8px 32px rgba(67,160,71,0.15)'">
-                            <div style="font-size: 1.2rem; color: #43a047; font-weight: 700; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px;">{% trans "Ram Usage" %}</div>
-                            <div id="greencircle" class="c100 p0 green ram" style="margin: 0 auto; filter: drop-shadow(0 4px 8px rgba(67,160,71,0.2));">
-                                <span style="font-weight: 700; font-size: 1.2rem;">{$ ramUsage $}%</span>
-                                <div class="slice">
-                                    <div class="bar"></div>
-                                    <div class="fill"></div>
+                        <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
+                            <div class="system-stat-card">
+                                <div class="system-stat-title">{% trans "Ram Usage" %}</div>
+                                <div id="greencircle" class="c100 p0 green ram">
+                                    <span class="system-stat-value">{$ ramUsage $}%</span>
+                                    <div class="slice">
+                                        <div class="bar"></div>
+                                        <div class="fill"></div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
+                        
                         <!-- Disk Usage -->
-                        <div style="background: rgba(255,255,255,0.95); border-radius: 20px; box-shadow: 0 8px 32px rgba(216,27,96,0.15); padding: 30px 40px; min-width: 200px; text-align: center; backdrop-filter: blur(10px); border: 1px solid rgba(216,27,96,0.1); transform: translateY(0); transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 15px 40px rgba(216,27,96,0.25)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 8px 32px rgba(216,27,96,0.15)'">
-                            <div style="font-size: 1.2rem; color: #d81b60; font-weight: 700; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px;">{% trans "Disk Usage '/'" %}</div>
-                            <div id="pinkcircle" class="c100 pink disk" style="margin: 0 auto; filter: drop-shadow(0 4px 8px rgba(216,27,96,0.2));">
-                                <span style="font-weight: 700; font-size: 1.2rem;">{$ diskUsage $}%</span>
-                                <div class="slice">
-                                    <div class="bar"></div>
-                                    <div class="fill"></div>
+                        <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
+                            <div class="system-stat-card">
+                                <div class="system-stat-title">{% trans "Disk Usage '/'" %}</div>
+                                <div id="pinkcircle" class="c100 pink disk">
+                                    <span class="system-stat-value">{$ diskUsage $}%</span>
+                                    <div class="slice">
+                                        <div class="bar"></div>
+                                        <div class="fill"></div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
+                
                 <!-- Recent SSH Logins Widget -->
-                <div style="margin-bottom: 40px;">
-                    <div style="background: rgba(255,255,255,0.97); border-radius: 18px; box-shadow: 0 8px 32px rgba(102,126,234,0.10); padding: 25px 30px; max-width: 900px; margin: 0 auto 0 auto;">
-                        <div style="display: flex; align-items: center; margin-bottom: 18px;">
-                            <i class="fa fa-terminal" style="font-size: 1.6rem; color: #667eea; margin-right: 12px;"></i>
-                            <span style="font-size: 1.25rem; font-weight: 700; color: #333; letter-spacing: 0.5px;">Recent SSH Logins</span>
-                        </div>
-                        <div ng-if="loadingSSHLogins" style="text-align: center; padding: 20px; color: #888;">
-                            <i class="fa fa-spinner fa-spin"></i> Loading recent SSH logins...
-                        </div>
-                        <div ng-if="!loadingSSHLogins && sshLogins.length === 0" style="text-align: center; color: #888;">
-                            No recent SSH logins found.
-                        </div>
-                        <div ng-if="!loadingSSHLogins && sshLogins.length > 0" style="overflow-x: auto;">
-                            <table style="width: 100%; border-collapse: collapse;">
-                                <thead>
-                                    <tr style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff;">
-                                        <th style="padding: 10px 8px; border-radius: 8px 0 0 8px; text-align: left;">User</th>
-                                        <th style="padding: 10px 8px; text-align: left;">IP</th>
-                                        <th style="padding: 10px 8px; text-align: left;">Country</th>
-                                        <th style="padding: 10px 8px; text-align: left;">Date/Time</th>
-                                        <th style="padding: 10px 8px; border-radius: 0 8px 8px 0; text-align: left;">Session</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr ng-repeat="login in sshLogins" style="background: #f8f9fa; border-bottom: 1px solid #e9ecef;">
-                                        <td style="padding: 8px 8px; font-weight: 600; color: #333;">{{login.user}}</td>
-                                        <td style="padding: 8px 8px; color: #555;">{{login.ip}}</td>
-                                        <td style="padding: 8px 8px;">
-                                            <span ng-if="login.flag"><img ng-src="{{login.flag}}" alt="{{login.country}}" style="height: 18px; margin-right: 6px; vertical-align: middle;" /></span>
-                                            <span ng-if="!login.flag && login.country">{{login.country}}</span>
-                                            <span ng-if="!login.flag && !login.country">-</span>
-                                        </td>
-                                        <td style="padding: 8px 8px; color: #555;">{{login.date}}</td>
-                                        <td style="padding: 8px 8px; color: #888;">{{login.session}}</td>
-                                    </tr>
-                                </tbody>
-                            </table>
+                <div class="row" style="margin-bottom: 40px;">
+                    <div class="col-12">
+                        <div class="ssh-logins-card">
+                            <div class="ssh-logins-header">
+                                <i class="fa fa-terminal"></i>
+                                <span>Recent SSH Logins</span>
+                            </div>
+                            <div ng-if="loadingSSHLogins" class="ssh-logins-loading">
+                                <i class="fa fa-spinner fa-spin"></i> Loading recent SSH logins...
+                            </div>
+                            <div ng-if="!loadingSSHLogins && sshLogins.length === 0" class="ssh-logins-empty">
+                                No recent SSH logins found.
+                            </div>
+                            <div ng-if="!loadingSSHLogins && sshLogins.length > 0" class="table-responsive">
+                                <table class="ssh-logins-table">
+                                    <thead>
+                                        <tr>
+                                            <th>User</th>
+                                            <th>IP</th>
+                                            <th>Country</th>
+                                            <th>Date/Time</th>
+                                            <th>Session</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr ng-repeat="login in sshLogins">
+                                            <td>{{login.user}}</td>
+                                            <td>{{login.ip}}</td>
+                                            <td>
+                                                <span ng-if="login.flag"><img ng-src="{{login.flag}}" alt="{{login.country}}" class="country-flag" /></span>
+                                                <span ng-if="!login.flag && login.country">{{login.country}}</span>
+                                                <span ng-if="!login.flag && !login.country">-</span>
+                                            </td>
+                                            <td>{{login.date}}</td>
+                                            <td>{{login.session}}</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
                         </div>
                     </div>
                 </div>
             {% endif %}
 
             <!-- Graphs Section -->
-            <div style="background: rgba(255,255,255,0.95); border-radius: 25px; box-shadow: 0 12px 40px rgba(0,0,0,0.1); padding: 35px; backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.2);">
-                <!-- Tab Navigation -->
-                <div style="text-align: center; margin-bottom: 30px;">
-                    <ul style="list-style: none; padding: 0; margin: 0; display: inline-flex; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; padding: 8px; gap: 8px; box-shadow: 0 8px 25px rgba(102,126,234,0.3);">
-                        <li style="display: inline-block;">
-                            <a href="#traffic" id="traffic-tab" data-toggle="tab" style="display: block; padding: 15px 30px; background: rgba(255,255,255,0.9); color: #667eea; border-radius: 12px; text-decoration: none; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.9rem;">
-                                <i class="fa fa-exchange" style="margin-right: 8px;"></i> Traffic
-                            </a>
-                        </li>
-                        <li style="display: inline-block;">
-                            <a href="#diskio" id="diskio-tab" data-toggle="tab" style="display: block; padding: 15px 30px; background: transparent; color: rgba(255,255,255,0.8); border-radius: 12px; text-decoration: none; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.9rem;">
-                                <i class="fa fa-hdd-o" style="margin-right: 8px;"></i> Disk IO
-                            </a>
-                        </li>
-                        <li style="display: inline-block;">
-                            <a href="#cpu" id="cpu-tab" data-toggle="tab" style="display: block; padding: 15px 30px; background: transparent; color: rgba(255,255,255,0.8); border-radius: 12px; text-decoration: none; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.9rem;">
-                                <i class="fa fa-microchip" style="margin-right: 8px;"></i> CPU Usage
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-                
-                <!-- Tab Content -->
-                <div class="tab-content" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 18px; padding: 30px; min-height: 350px; border: 2px solid rgba(255,255,255,0.5); box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);">
-                    <div class="tab-pane fade show active" id="traffic" role="tabpanel">
-                        <canvas id="trafficChart" height="80"></canvas>
-                    </div>
-                    <div class="tab-pane fade" id="diskio" role="tabpanel">
-                        <canvas id="diskIOChart" height="80"></canvas>
-                    </div>
-                    <div class="tab-pane fade" id="cpu" role="tabpanel">
-                        <canvas id="cpuChart" height="80"></canvas>
+            <div class="row">
+                <div class="col-12">
+                    <div class="graphs-card">
+                        <!-- Tab Navigation -->
+                        <div class="graphs-tabs">
+                            <ul class="nav nav-tabs" id="dashboardGraphTabs">
+                                <li class="nav-item">
+                                    <a class="nav-link active" href="#traffic" data-toggle="tab">
+                                        <i class="fa fa-exchange"></i> Traffic
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link" href="#diskio" data-toggle="tab">
+                                        <i class="fa fa-hdd-o"></i> Disk IO
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link" href="#cpu" data-toggle="tab">
+                                        <i class="fa fa-microchip"></i> CPU Usage
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                        
+                        <!-- Tab Content -->
+                        <div class="tab-content">
+                            <div class="tab-pane fade show active" id="traffic" role="tabpanel">
+                                <canvas id="trafficChart" height="80"></canvas>
+                            </div>
+                            <div class="tab-pane fade" id="diskio" role="tabpanel">
+                                <canvas id="diskIOChart" height="80"></canvas>
+                            </div>
+                            <div class="tab-pane fade" id="cpu" role="tabpanel">
+                                <canvas id="cpuChart" height="80"></canvas>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
         <!-- End Dashboard Stats Section -->
-
-        <!-- Add custom styles for tab switching -->
-        <style>
-            #dashboardGraphTabs a[data-toggle="tab"] {
-                cursor: pointer;
-            }
-            #dashboardGraphTabs a[data-toggle="tab"]:hover {
-                background: rgba(255,255,255,0.9) !important;
-                color: #667eea !important;
-                transform: translateY(-2px);
-                box-shadow: 0 4px 15px rgba(102,126,234,0.3);
-            }
-            #dashboardGraphTabs a[data-toggle="tab"].active {
-                background: rgba(255,255,255,0.9) !important;
-                color: #667eea !important;
-                transform: translateY(-2px);
-                box-shadow: 0 4px 15px rgba(102,126,234,0.3);
-            }
-            
-            /* Enhanced hover effects for tabs */
-            a[data-toggle="tab"]:hover {
-                background: rgba(255,255,255,0.9) !important;
-                color: #667eea !important;
-                transform: translateY(-2px);
-                box-shadow: 0 4px 15px rgba(102,126,234,0.3);
-            }
-            
-            /* Smooth animations for all interactive elements */
-            * {
-                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            }
-        </style>
-
-        <!-- Chart.js CDN -->
-        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-        <!-- FontAwesome for icons -->
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
-
-        <script>
-            // Handle tab switching
-            document.addEventListener('DOMContentLoaded', function() {
-                var tabs = document.querySelectorAll('a[data-toggle="tab"]');
-                tabs.forEach(function(tab) {
-                    tab.addEventListener('click', function(e) {
-                        e.preventDefault();
-                        
-                        // Remove active from all tabs and panes
-                        tabs.forEach(function(t) {
-                            t.classList.remove('active');
-                            t.style.background = 'transparent';
-                            t.style.color = 'rgba(255,255,255,0.8)';
-                            t.style.transform = 'translateY(0)';
-                            t.style.boxShadow = 'none';
-                        });
-                        document.querySelectorAll('.tab-pane').forEach(function(pane) {
-                            pane.classList.remove('show', 'active');
-                        });
-                        
-                        // Add active to clicked tab
-                        this.classList.add('active');
-                        this.style.background = 'rgba(255,255,255,0.9)';
-                        this.style.color = '#667eea';
-                        this.style.transform = 'translateY(-2px)';
-                        this.style.boxShadow = '0 4px 15px rgba(102,126,234,0.3)';
-                        
-                        // Show corresponding pane
-                        var target = this.getAttribute('href');
-                        var targetPane = document.querySelector(target);
-                        if (targetPane) {
-                            targetPane.classList.add('show', 'active');
-                        }
-                    });
-                });
-                
-                // Force traffic tab to be active on page load
-                setTimeout(function() {
-                    var trafficTab = document.getElementById('traffic-tab');
-                    if (trafficTab) {
-                        trafficTab.click();
-                        console.log('Traffic tab manually activated on page load');
-                    }
-                }, 100);
-            });
-        </script>
-
     </div>
 
+    <!-- Custom Styles -->
+    <style>
+        /* Stat Cards */
+        .stat-card-link {
+            text-decoration: none;
+            display: block;
+            height: 100%;
+        }
+        
+        .stat-card {
+            padding: 25px;
+            border-radius: 20px;
+            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+            height: 100%;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        .stat-card:hover {
+            transform: translateY(-10px) scale(1.02);
+            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
+        }
+        
+        .gradient-purple {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: #fff;
+        }
+        
+        .gradient-pink {
+            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
+        }
+        
+        .gradient-red {
+            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
+        }
+        
+        .gradient-orange {
+            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+        }
+        
+        .stat-card-overlay {
+            position: absolute;
+            top: -50%;
+            right: -50%;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+            pointer-events: none;
+        }
+        
+        .stat-card-content {
+            display: flex;
+            align-items: center;
+            position: relative;
+            z-index: 1;
+        }
+        
+        .stat-icon {
+            font-size: 3rem;
+            margin-right: 20px;
+            opacity: 0.9;
+        }
+        
+        .stat-number {
+            font-size: 2.8rem;
+            font-weight: 700;
+            line-height: 1;
+        }
+        
+        .stat-label {
+            font-size: 1rem;
+            opacity: 0.9;
+            margin-top: 8px;
+            font-weight: 500;
+        }
+        
+        /* System Stats */
+        .system-stat-card {
+            background: rgba(255,255,255,0.95);
+            border-radius: 20px;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+            padding: 30px;
+            text-align: center;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(0,0,0,0.05);
+            transition: all 0.3s ease;
+            height: 100%;
+        }
+        
+        .system-stat-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
+        }
+        
+        .system-stat-title {
+            font-size: 1.2rem;
+            font-weight: 700;
+            margin-bottom: 15px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        
+        .system-stat-value {
+            font-weight: 700;
+            font-size: 1.2rem;
+        }
+        
+        /* SSH Logins */
+        .ssh-logins-card {
+            background: rgba(255,255,255,0.97);
+            border-radius: 18px;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+            padding: 25px 30px;
+        }
+        
+        .ssh-logins-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 18px;
+            font-size: 1.25rem;
+            font-weight: 700;
+            color: #333;
+        }
+        
+        .ssh-logins-header i {
+            font-size: 1.6rem;
+            color: #667eea;
+            margin-right: 12px;
+        }
+        
+        .ssh-logins-loading,
+        .ssh-logins-empty {
+            text-align: center;
+            padding: 20px;
+            color: #888;
+        }
+        
+        .ssh-logins-table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        
+        .ssh-logins-table thead tr {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: #fff;
+        }
+        
+        .ssh-logins-table th {
+            padding: 10px 15px;
+            text-align: left;
+        }
+        
+        .ssh-logins-table th:first-child {
+            border-radius: 8px 0 0 8px;
+        }
+        
+        .ssh-logins-table th:last-child {
+            border-radius: 0 8px 8px 0;
+        }
+        
+        .ssh-logins-table tbody tr {
+            background: #f8f9fa;
+            border-bottom: 1px solid #e9ecef;
+        }
+        
+        .ssh-logins-table tbody tr:hover {
+            background: #e9ecef;
+        }
+        
+        .ssh-logins-table td {
+            padding: 8px 15px;
+            color: #555;
+        }
+        
+        .ssh-logins-table td:first-child {
+            font-weight: 600;
+            color: #333;
+        }
+        
+        .country-flag {
+            height: 18px;
+            margin-right: 6px;
+            vertical-align: middle;
+        }
+        
+        /* Graphs */
+        .graphs-card {
+            background: rgba(255,255,255,0.95);
+            border-radius: 25px;
+            box-shadow: 0 12px 40px rgba(0,0,0,0.1);
+            padding: 35px;
+            backdrop-filter: blur(15px);
+            border: 1px solid rgba(255,255,255,0.2);
+        }
+        
+        .graphs-tabs {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        
+        .graphs-tabs .nav-tabs {
+            border: none;
+            display: inline-flex;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 15px;
+            padding: 8px;
+            gap: 8px;
+            box-shadow: 0 8px 25px rgba(102,126,234,0.3);
+        }
+        
+        .graphs-tabs .nav-link {
+            padding: 15px 30px;
+            background: transparent;
+            color: rgba(255,255,255,0.8);
+            border: none;
+            border-radius: 12px;
+            text-decoration: none;
+            font-weight: 600;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            font-size: 0.9rem;
+        }
+        
+        .graphs-tabs .nav-link:hover {
+            background: rgba(255,255,255,0.2);
+            color: #fff;
+        }
+        
+        .graphs-tabs .nav-link.active {
+            background: rgba(255,255,255,0.9);
+            color: #667eea;
+            box-shadow: 0 4px 15px rgba(102,126,234,0.3);
+        }
+        
+        .graphs-tabs .nav-link i {
+            margin-right: 8px;
+        }
+        
+        .tab-content {
+            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+            border-radius: 18px;
+            padding: 30px;
+            min-height: 350px;
+            border: 2px solid rgba(255,255,255,0.5);
+            box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
+        }
+        
+        /* Progress Circles */
+        .c100 {
+            position: relative;
+            font-size: 120px;
+            width: 1em;
+            height: 1em;
+            border-radius: 50%;
+            margin: 0 auto;
+            background-color: #f3f3f3;
+            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
+        }
+        
+        .c100 > span {
+            position: absolute;
+            width: 100%;
+            z-index: 1;
+            left: 0;
+            top: 0;
+            width: 5em;
+            line-height: 5em;
+            font-size: 0.25em;
+            color: #000;
+            display: block;
+            text-align: center;
+            white-space: nowrap;
+            z-index: 2;
+        }
+        
+        .c100:after {
+            position: absolute;
+            top: 0.08em;
+            left: 0.08em;
+            display: block;
+            content: "";
+            border-radius: 50%;
+            background-color: #fff;
+            width: 0.84em;
+            height: 0.84em;
+            z-index: 0;
+        }
+        
+        .c100 .slice {
+            position: absolute;
+            width: 1em;
+            height: 1em;
+            clip: rect(0em, 1em, 1em, 0.5em);
+        }
+        
+        .c100.red .bar {
+            border-color: #e53935;
+        }
+        
+        .c100.red .system-stat-title {
+            color: #e53935;
+        }
+        
+        .c100.green .bar {
+            border-color: #43a047;
+        }
+        
+        .c100.green .system-stat-title {
+            color: #43a047;
+        }
+        
+        .c100.pink .bar {
+            border-color: #d81b60;
+        }
+        
+        .c100.pink .system-stat-title {
+            color: #d81b60;
+        }
+        
+        /* Responsive */
+        @media (max-width: 768px) {
+            .stat-card {
+                margin-bottom: 20px;
+            }
+            
+            .graphs-tabs .nav-tabs {
+                flex-direction: column;
+                width: 100%;
+            }
+            
+            .graphs-tabs .nav-link {
+                width: 100%;
+            }
+        }
+    </style>
+
+    <!-- Chart.js CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <!-- FontAwesome for icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+
+    <script>
+        // Handle tab switching
+        document.addEventListener('DOMContentLoaded', function() {
+            var tabs = document.querySelectorAll('a[data-toggle="tab"]');
+            tabs.forEach(function(tab) {
+                tab.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    
+                    // Remove active from all tabs
+                    tabs.forEach(function(t) {
+                        t.classList.remove('active');
+                    });
+                    
+                    // Remove active from all panes
+                    document.querySelectorAll('.tab-pane').forEach(function(pane) {
+                        pane.classList.remove('show', 'active');
+                    });
+                    
+                    // Add active to clicked tab
+                    this.classList.add('active');
+                    
+                    // Show corresponding pane
+                    var target = this.getAttribute('href');
+                    var targetPane = document.querySelector(target);
+                    if (targetPane) {
+                        targetPane.classList.add('show', 'active');
+                    }
+                });
+            });
+        });
+    </script>
 
 {% endblock %}
\ No newline at end of file