diff --git a/baseTemplate/templates/baseTemplate/homePage.html b/baseTemplate/templates/baseTemplate/homePage.html
index d9bccef1f..bcb9ea2f0 100755
--- a/baseTemplate/templates/baseTemplate/homePage.html
+++ b/baseTemplate/templates/baseTemplate/homePage.html
@@ -13,84 +13,89 @@
         </div>
 
         <!-- Dashboard Stats Section -->
-        <div ng-controller="dashboardStatsController" style="margin-bottom: 30px;">
+        <div ng-controller="dashboardStatsController" style="margin-bottom: 40px;">
             <!-- Info Cards Row -->
-            <div style="display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 30px;">
+            <div style="display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 35px;">
                 <!-- Total Sites Card -->
-                <a href="{% url 'listWebsites' %}" style="flex: 1; min-width: 200px; max-width: 300px; text-decoration: none;">
-                    <div style="background: linear-gradient(135deg, #007bff 0%, #00c6ff 100%); color: #fff; padding: 20px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,123,255,0.3); height: 100%; cursor: pointer;">
-                        <div style="display: flex; align-items: center;">
-                            <div style="font-size: 2.5rem; margin-right: 15px; opacity: 0.9;"><i class="fa fa-globe"></i></div>
+                <a href="{% url 'listWebsites' %}" class="dashboard-card" style="flex: 1; min-width: 220px; max-width: 320px; text-decoration: none; transition: all 0.3s ease;">
+                    <div style="background: linear-gradient(135deg, #007bff 0%, #00c6ff 100%); color: #fff; padding: 25px; border-radius: 20px; box-shadow: 0 8px 25px rgba(0,123,255,0.15); height: 100%; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease;">
+                        <div style="position: absolute; top: -50px; right: -50px; width: 100px; height: 100px; background: rgba(255,255,255,0.1); border-radius: 50%; transition: all 0.3s ease;"></div>
+                        <div style="display: flex; align-items: center; position: relative; z-index: 2;">
+                            <div style="font-size: 2.8rem; margin-right: 18px; opacity: 0.9; transition: transform 0.3s ease;"><i class="fa fa-globe"></i></div>
                             <div>
-                                <div style="font-size: 2.5rem; font-weight: bold; line-height: 1;">{$ totalSites $}</div>
-                                <div style="font-size: 0.95rem; opacity: 0.85; margin-top: 5px;">Total Sites</div>
+                                <div style="font-size: 2.8rem; font-weight: 700; line-height: 1; margin-bottom: 5px;">{$ totalSites $}</div>
+                                <div style="font-size: 1rem; opacity: 0.9; font-weight: 500;">Total Sites</div>
                             </div>
                         </div>
                     </div>
                 </a>
                 <!-- WordPress Sites Card -->
-                <a href="{% url 'ListWPSites' %}?wp=1" style="flex: 1; min-width: 200px; max-width: 300px; text-decoration: none;">
-                    <div style="background: linear-gradient(135deg, #6f42c1 0%, #b993ff 100%); color: #fff; padding: 20px; border-radius: 15px; box-shadow: 0 4px 15px rgba(111,66,193,0.3); height: 100%; cursor: pointer;">
-                        <div style="display: flex; align-items: center;">
-                            <div style="font-size: 2.5rem; margin-right: 15px; opacity: 0.9;"><i class="fa fa-wordpress"></i></div>
+                <a href="{% url 'ListWPSites' %}?wp=1" class="dashboard-card" style="flex: 1; min-width: 220px; max-width: 320px; text-decoration: none; transition: all 0.3s ease;">
+                    <div style="background: linear-gradient(135deg, #6f42c1 0%, #b993ff 100%); color: #fff; padding: 25px; border-radius: 20px; box-shadow: 0 8px 25px rgba(111,66,193,0.15); height: 100%; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease;">
+                        <div style="position: absolute; top: -50px; right: -50px; width: 100px; height: 100px; background: rgba(255,255,255,0.1); border-radius: 50%; transition: all 0.3s ease;"></div>
+                        <div style="display: flex; align-items: center; position: relative; z-index: 2;">
+                            <div style="font-size: 2.8rem; margin-right: 18px; opacity: 0.9; transition: transform 0.3s ease;"><i class="fa fa-wordpress"></i></div>
                             <div>
-                                <div style="font-size: 2.5rem; font-weight: bold; line-height: 1;">{$ totalWPSites $}</div>
-                                <div style="font-size: 0.95rem; opacity: 0.85; margin-top: 5px;">WordPress Sites</div>
+                                <div style="font-size: 2.8rem; font-weight: 700; line-height: 1; margin-bottom: 5px;">{$ totalWPSites $}</div>
+                                <div style="font-size: 1rem; opacity: 0.9; font-weight: 500;">WordPress Sites</div>
                             </div>
                         </div>
                     </div>
                 </a>
                 <!-- Total Databases Card -->
-                <a href="{% url 'listDBs' %}" style="flex: 1; min-width: 200px; max-width: 300px; text-decoration: none;">
-                    <div style="background: linear-gradient(135deg, #17a2b8 0%, #6fe7dd 100%); color: #fff; padding: 20px; border-radius: 15px; box-shadow: 0 4px 15px rgba(23,162,184,0.3); height: 100%; cursor: pointer;">
-                        <div style="display: flex; align-items: center;">
-                            <div style="font-size: 2.5rem; margin-right: 15px; opacity: 0.9;"><i class="fa fa-database"></i></div>
+                <a href="{% url 'listDBs' %}" class="dashboard-card" style="flex: 1; min-width: 220px; max-width: 320px; text-decoration: none; transition: all 0.3s ease;">
+                    <div style="background: linear-gradient(135deg, #17a2b8 0%, #6fe7dd 100%); color: #fff; padding: 25px; border-radius: 20px; box-shadow: 0 8px 25px rgba(23,162,184,0.15); height: 100%; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease;">
+                        <div style="position: absolute; top: -50px; right: -50px; width: 100px; height: 100px; background: rgba(255,255,255,0.1); border-radius: 50%; transition: all 0.3s ease;"></div>
+                        <div style="display: flex; align-items: center; position: relative; z-index: 2;">
+                            <div style="font-size: 2.8rem; margin-right: 18px; opacity: 0.9; transition: transform 0.3s ease;"><i class="fa fa-database"></i></div>
                             <div>
-                                <div style="font-size: 2.5rem; font-weight: bold; line-height: 1;">{$ totalDBs $}</div>
-                                <div style="font-size: 0.95rem; opacity: 0.85; margin-top: 5px;">Total Databases</div>
+                                <div style="font-size: 2.8rem; font-weight: 700; line-height: 1; margin-bottom: 5px;">{$ totalDBs $}</div>
+                                <div style="font-size: 1rem; opacity: 0.9; font-weight: 500;">Total Databases</div>
                             </div>
                         </div>
                     </div>
                 </a>
                 <!-- Total Emails Card -->
-                <a href="{% url 'listEmails' %}" style="flex: 1; min-width: 200px; max-width: 300px; text-decoration: none;">
-                    <div style="background: linear-gradient(135deg, #ff9800 0%, #ffc107 100%); color: #fff; padding: 20px; border-radius: 15px; box-shadow: 0 4px 15px rgba(255,152,0,0.3); height: 100%; cursor: pointer;">
-                        <div style="display: flex; align-items: center;">
-                            <div style="font-size: 2.5rem; margin-right: 15px; opacity: 0.9;"><i class="fa fa-envelope"></i></div>
+                <a href="{% url 'listEmails' %}" class="dashboard-card" style="flex: 1; min-width: 220px; max-width: 320px; text-decoration: none; transition: all 0.3s ease;">
+                    <div style="background: linear-gradient(135deg, #ff9800 0%, #ffc107 100%); color: #fff; padding: 25px; border-radius: 20px; box-shadow: 0 8px 25px rgba(255,152,0,0.15); height: 100%; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease;">
+                        <div style="position: absolute; top: -50px; right: -50px; width: 100px; height: 100px; background: rgba(255,255,255,0.1); border-radius: 50%; transition: all 0.3s ease;"></div>
+                        <div style="display: flex; align-items: center; position: relative; z-index: 2;">
+                            <div style="font-size: 2.8rem; margin-right: 18px; opacity: 0.9; transition: transform 0.3s ease;"><i class="fa fa-envelope"></i></div>
                             <div>
-                                <div style="font-size: 2.5rem; font-weight: bold; line-height: 1;">{$ totalEmails $}</div>
-                                <div style="font-size: 0.95rem; opacity: 0.85; margin-top: 5px;">Total Emails</div>
+                                <div style="font-size: 2.8rem; font-weight: 700; line-height: 1; margin-bottom: 5px;">{$ totalEmails $}</div>
+                                <div style="font-size: 1rem; opacity: 0.9; font-weight: 500;">Total Emails</div>
                             </div>
                         </div>
                     </div>
                 </a>
             </div>
             
-            <!-- Graphs Section -->
-            <div style="background: #fff; border-radius: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); padding: 25px;">
-                <!-- Tab Navigation -->
-                <div style="text-align: center; margin-bottom: 20px;">
-                    <ul style="list-style: none; padding: 0; margin: 0; display: inline-flex; background: #f5f7fa; border-radius: 10px; padding: 5px; gap: 5px;">
+            <!-- Enhanced Graphs Section -->
+            <div style="background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%); border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); padding: 30px; border: 1px solid rgba(0,0,0,0.06);">
+                <!-- Enhanced Tab Navigation -->
+                <div style="text-align: center; margin-bottom: 25px;">
+                    <h3 style="margin: 0 0 20px 0; color: #2c3e50; font-weight: 600; font-size: 1.4rem;">System Monitoring</h3>
+                    <ul style="list-style: none; padding: 0; margin: 0; display: inline-flex; background: linear-gradient(145deg, #f1f3f4 0%, #e8eaed 100%); border-radius: 15px; padding: 8px; gap: 8px; box-shadow: inset 0 2px 6px rgba(0,0,0,0.1);">
                         <li style="display: inline-block;">
-                            <a href="#traffic" id="traffic-tab" data-toggle="tab" style="display: block; padding: 12px 24px; background: #007bff; color: white; border-radius: 8px; text-decoration: none; font-weight: 500; transition: all 0.3s;">
-                                <i class="fa fa-exchange"></i> Traffic
+                            <a href="#traffic" id="traffic-tab" data-toggle="tab" style="display: block; padding: 14px 28px; background: linear-gradient(145deg, #007bff 0%, #0056b3 100%); color: white; border-radius: 12px; text-decoration: none; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(0,123,255,0.3);">
+                                <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: 12px 24px; background: transparent; color: #6c757d; border-radius: 8px; text-decoration: none; font-weight: 500; transition: all 0.3s;">
-                                <i class="fa fa-hdd-o"></i> Disk IO
+                            <a href="#diskio" id="diskio-tab" data-toggle="tab" style="display: block; padding: 14px 28px; background: transparent; color: #6c757d; border-radius: 12px; text-decoration: none; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);">
+                                <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: 12px 24px; background: transparent; color: #6c757d; border-radius: 8px; text-decoration: none; font-weight: 500; transition: all 0.3s;">
-                                <i class="fa fa-microchip"></i> CPU Usage
+                            <a href="#cpu" id="cpu-tab" data-toggle="tab" style="display: block; padding: 14px 28px; background: transparent; color: #6c757d; border-radius: 12px; text-decoration: none; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);">
+                                <i class="fa fa-microchip" style="margin-right: 8px;"></i>CPU Usage
                             </a>
                         </li>
                     </ul>
                 </div>
                 
-                <!-- Tab Content -->
-                <div class="tab-content" style="background: #f8f9fa; border-radius: 12px; padding: 20px; min-height: 300px; border: 1px solid #e9ecef;">
+                <!-- Enhanced Tab Content -->
+                <div class="tab-content" style="background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%); border-radius: 15px; padding: 25px; min-height: 320px; border: 1px solid rgba(0,0,0,0.08); box-shadow: inset 0 2px 8px rgba(0,0,0,0.03);">
                     <div class="tab-pane fade show active" id="traffic" role="tabpanel">
                         <canvas id="trafficChart" height="80"></canvas>
                     </div>
@@ -105,19 +110,52 @@
         </div>
         <!-- End Dashboard Stats Section -->
 
-        <!-- Add custom styles for tab switching -->
+        <!-- Enhanced Styles -->
         <style>
+            .dashboard-card:hover div:first-child {
+                transform: translateY(-8px) scale(1.02);
+                box-shadow: 0 15px 40px rgba(0,0,0,0.15);
+            }
+            .dashboard-card:hover div:first-child > div:first-child {
+                transform: scale(1.1) rotate(5deg);
+            }
+            .dashboard-card:hover div:first-child > div:last-child {
+                transform: scale(1.1);
+            }
+            
             #dashboardGraphTabs a[data-toggle="tab"] {
                 cursor: pointer;
             }
             #dashboardGraphTabs a[data-toggle="tab"]:hover {
-                background: #e9ecef !important;
-                color: #495057 !important;
+                background: linear-gradient(145deg, #e3f2fd 0%, #bbdefb 100%) !important;
+                color: #1976d2 !important;
+                transform: translateY(-2px);
+                box-shadow: 0 6px 20px rgba(0,0,0,0.1);
             }
             #dashboardGraphTabs a[data-toggle="tab"].active {
-                background: #007bff !important;
+                background: linear-gradient(145deg, #007bff 0%, #0056b3 100%) !important;
                 color: white !important;
+                box-shadow: 0 4px 12px rgba(0,123,255,0.3);
             }
+            
+            @keyframes fadeInUp {
+                from {
+                    opacity: 0;
+                    transform: translateY(30px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+            
+            .dashboard-card {
+                animation: fadeInUp 0.6s ease-out;
+            }
+            .dashboard-card:nth-child(1) { animation-delay: 0.1s; }
+            .dashboard-card:nth-child(2) { animation-delay: 0.2s; }
+            .dashboard-card:nth-child(3) { animation-delay: 0.3s; }
+            .dashboard-card:nth-child(4) { animation-delay: 0.4s; }
         </style>
 
         <!-- Chart.js CDN -->