diff --git a/baseTemplate/static/baseTemplate/custom-js/system-status.js b/baseTemplate/static/baseTemplate/custom-js/system-status.js
index 474691a32..3c5c14120 100644
--- a/baseTemplate/static/baseTemplate/custom-js/system-status.js
+++ b/baseTemplate/static/baseTemplate/custom-js/system-status.js
@@ -750,7 +750,7 @@ app.controller('OnboardingCP', function ($scope, $http, $timeout, $window) {
                 } else {
                     $scope.functionProgress = {"width": response.data.installationProgress + "%"};
                     $scope.functionStatus = response.data.currentStatus;
-                    $timeout(statusFunc, 3000);
+                    timeout(statusFunc, 3000);
                 }
 
             } else {
@@ -984,11 +984,25 @@ app.controller('dashboardStatsController', function ($scope, $http, $timeout) {
             data: {
                 labels: [],
                 datasets: [
-                    { label: 'RX (Bytes/sec)', data: [], borderColor: '#007bff', fill: false },
-                    { label: 'TX (Bytes/sec)', data: [], borderColor: '#28a745', fill: false }
+                    { label: 'RX (Bytes/sec)', data: [], borderColor: '#007bff', backgroundColor: 'rgba(0,123,255,0.08)', pointBackgroundColor: '#007bff', tension: 0.4, fill: true },
+                    { label: 'TX (Bytes/sec)', data: [], borderColor: '#28a745', backgroundColor: 'rgba(40,167,69,0.08)', pointBackgroundColor: '#28a745', tension: 0.4, fill: true }
                 ]
             },
-            options: { responsive: true, animation: false, scales: { y: { beginAtZero: true } } }
+            options: {
+                responsive: true,
+                animation: false,
+                plugins: {
+                    legend: { display: true, labels: { font: { size: 14 } } },
+                    title: { display: true, text: 'Network Traffic', font: { size: 18 } },
+                    tooltip: { enabled: true, mode: 'index', intersect: false }
+                },
+                interaction: { mode: 'nearest', axis: 'x', intersect: false },
+                scales: {
+                    x: { grid: { color: '#e9ecef' }, ticks: { font: { size: 12 } } },
+                    y: { beginAtZero: true, grid: { color: '#e9ecef' }, ticks: { font: { size: 12 } } }
+                },
+                layout: { padding: 10 }
+            }
         });
         var diskCtx = document.getElementById('diskIOChart').getContext('2d');
         diskIOChart = new Chart(diskCtx, {
@@ -996,11 +1010,25 @@ app.controller('dashboardStatsController', function ($scope, $http, $timeout) {
             data: {
                 labels: [],
                 datasets: [
-                    { label: 'Read (Bytes/sec)', data: [], borderColor: '#17a2b8', fill: false },
-                    { label: 'Write (Bytes/sec)', data: [], borderColor: '#ffc107', fill: false }
+                    { label: 'Read (Bytes/sec)', data: [], borderColor: '#17a2b8', backgroundColor: 'rgba(23,162,184,0.08)', pointBackgroundColor: '#17a2b8', tension: 0.4, fill: true },
+                    { label: 'Write (Bytes/sec)', data: [], borderColor: '#ffc107', backgroundColor: 'rgba(255,193,7,0.08)', pointBackgroundColor: '#ffc107', tension: 0.4, fill: true }
                 ]
             },
-            options: { responsive: true, animation: false, scales: { y: { beginAtZero: true } } }
+            options: {
+                responsive: true,
+                animation: false,
+                plugins: {
+                    legend: { display: true, labels: { font: { size: 14 } } },
+                    title: { display: true, text: 'Disk IO', font: { size: 18 } },
+                    tooltip: { enabled: true, mode: 'index', intersect: false }
+                },
+                interaction: { mode: 'nearest', axis: 'x', intersect: false },
+                scales: {
+                    x: { grid: { color: '#e9ecef' }, ticks: { font: { size: 12 } } },
+                    y: { beginAtZero: true, grid: { color: '#e9ecef' }, ticks: { font: { size: 12 } } }
+                },
+                layout: { padding: 10 }
+            }
         });
         var cpuCtx = document.getElementById('cpuChart').getContext('2d');
         cpuChart = new Chart(cpuCtx, {
@@ -1008,10 +1036,33 @@ app.controller('dashboardStatsController', function ($scope, $http, $timeout) {
             data: {
                 labels: [],
                 datasets: [
-                    { label: 'CPU Usage (%)', data: [], borderColor: '#dc3545', fill: false }
+                    { label: 'CPU Usage (%)', data: [], borderColor: '#dc3545', backgroundColor: 'rgba(220,53,69,0.08)', pointBackgroundColor: '#dc3545', tension: 0.4, fill: true }
                 ]
             },
-            options: { responsive: true, animation: false, scales: { y: { beginAtZero: true, max: 100 } } }
+            options: {
+                responsive: true,
+                animation: false,
+                plugins: {
+                    legend: { display: true, labels: { font: { size: 14 } } },
+                    title: { display: true, text: 'CPU Usage', font: { size: 18 } },
+                    tooltip: { enabled: true, mode: 'index', intersect: false }
+                },
+                interaction: { mode: 'nearest', axis: 'x', intersect: false },
+                scales: {
+                    x: { grid: { color: '#e9ecef' }, ticks: { font: { size: 12 } } },
+                    y: { beginAtZero: true, max: 100, grid: { color: '#e9ecef' }, ticks: { font: { size: 12 } } }
+                },
+                layout: { padding: 10 }
+            }
+        });
+
+        // Redraw charts on tab shown
+        $("a[data-toggle='tab']").on('shown.bs.tab', function (e) {
+            setTimeout(function() {
+                if (trafficChart) trafficChart.resize();
+                if (diskIOChart) diskIOChart.resize();
+                if (cpuChart) cpuChart.resize();
+            }, 100);
         });
     }
 
diff --git a/baseTemplate/templates/baseTemplate/homePage.html b/baseTemplate/templates/baseTemplate/homePage.html
index 4357a8c9d..f5a101127 100755
--- a/baseTemplate/templates/baseTemplate/homePage.html
+++ b/baseTemplate/templates/baseTemplate/homePage.html
@@ -14,47 +14,55 @@
 
         <!-- Dashboard Stats Section -->
         <div ng-controller="dashboardStatsController" class="row" style="margin-bottom: 30px;">
-            <!-- Info Cards -->
+            <!-- Improved Info Cards -->
             <div class="col-md-3">
-                <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
-                    <div class="card-header">Total Sites</div>
-                    <div class="card-body">
-                        <h5 class="card-title" style="font-size:2.5rem;">{$ totalSites $}</h5>
+                <div class="card shadow-sm border-0 mb-4" style="border-radius: 1rem; background: linear-gradient(135deg, #007bff 60%, #00c6ff 100%); color: #fff;">
+                    <div class="card-body d-flex align-items-center">
+                        <div style="font-size: 2.5rem; margin-right: 15px;"><i class="fa fa-globe"></i></div>
+                        <div>
+                            <div style="font-size: 2.7rem; font-weight: bold;">{$ totalSites $}</div>
+                            <div style="font-size: 1.1rem; opacity: 0.85;">Total Sites</div>
+                        </div>
                     </div>
                 </div>
             </div>
             <div class="col-md-3">
-                <div class="card text-white bg-info mb-3" style="max-width: 18rem;">
-                    <div class="card-header">WordPress Sites</div>
-                    <div class="card-body">
-                        <h5 class="card-title" style="font-size:2.5rem;">{$ totalWPSites $}</h5>
+                <div class="card shadow-sm border-0 mb-4" style="border-radius: 1rem; background: linear-gradient(135deg, #6f42c1 60%, #b993ff 100%); color: #fff;">
+                    <div class="card-body d-flex align-items-center">
+                        <div style="font-size: 2.5rem; margin-right: 15px;"><i class="fa fa-wordpress"></i></div>
+                        <div>
+                            <div style="font-size: 2.7rem; font-weight: bold;">{$ totalWPSites $}</div>
+                            <div style="font-size: 1.1rem; opacity: 0.85;">WordPress Sites</div>
+                        </div>
                     </div>
                 </div>
             </div>
-            <!-- Traffic Graph -->
+            <!-- Graphs in Tabs -->
             <div class="col-md-6">
-                <div class="card mb-3">
-                    <div class="card-header">Traffic (Bytes)</div>
+                <div class="card shadow-sm border-0 mb-4" style="border-radius: 1rem;">
                     <div class="card-body">
-                        <canvas id="trafficChart" height="80"></canvas>
-                    </div>
-                </div>
-            </div>
-            <!-- Disk IO Graph -->
-            <div class="col-md-6">
-                <div class="card mb-3">
-                    <div class="card-header">Disk IO (Bytes)</div>
-                    <div class="card-body">
-                        <canvas id="diskIOChart" height="80"></canvas>
-                    </div>
-                </div>
-            </div>
-            <!-- CPU Usage Graph -->
-            <div class="col-md-6">
-                <div class="card mb-3">
-                    <div class="card-header">CPU Usage (%)</div>
-                    <div class="card-body">
-                        <canvas id="cpuChart" height="80"></canvas>
+                        <ul class="nav nav-tabs" id="dashboardGraphTabs" role="tablist">
+                            <li class="nav-item" role="presentation">
+                                <a class="nav-link active" id="traffic-tab" data-toggle="tab" href="#traffic" role="tab" aria-controls="traffic" aria-selected="true"><i class="fa fa-exchange"></i> Traffic</a>
+                            </li>
+                            <li class="nav-item" role="presentation">
+                                <a class="nav-link" id="diskio-tab" data-toggle="tab" href="#diskio" role="tab" aria-controls="diskio" aria-selected="false"><i class="fa fa-hdd-o"></i> Disk IO</a>
+                            </li>
+                            <li class="nav-item" role="presentation">
+                                <a class="nav-link" id="cpu-tab" data-toggle="tab" href="#cpu" role="tab" aria-controls="cpu" aria-selected="false"><i class="fa fa-microchip"></i> CPU Usage</a>
+                            </li>
+                        </ul>
+                        <div class="tab-content pt-3" id="dashboardGraphTabsContent">
+                            <div class="tab-pane fade show active" id="traffic" role="tabpanel" aria-labelledby="traffic-tab">
+                                <canvas id="trafficChart" height="80"></canvas>
+                            </div>
+                            <div class="tab-pane fade" id="diskio" role="tabpanel" aria-labelledby="diskio-tab">
+                                <canvas id="diskIOChart" height="80"></canvas>
+                            </div>
+                            <div class="tab-pane fade" id="cpu" role="tabpanel" aria-labelledby="cpu-tab">
+                                <canvas id="cpuChart" height="80"></canvas>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -63,6 +71,8 @@
 
         <!-- 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" />
 
         <!--- Hide statistics for non-admins--->
         <div class="mx-10 col-lg-9 panel col-md-push-50">