diff --git a/baseTemplate/templates/baseTemplate/design.html b/baseTemplate/templates/baseTemplate/design.html
index 236b95261..af1512dcf 100644
--- a/baseTemplate/templates/baseTemplate/design.html
+++ b/baseTemplate/templates/baseTemplate/design.html
@@ -9,7 +9,7 @@
 
     <style>
         body {
-            background-color: #f0f0ff;
+            background-color: var(--bg-primary, #f0f0ff);
         }
         
         .page-wrapper {
@@ -29,28 +29,28 @@
         .page-title {
             font-size: 28px;
             font-weight: 700;
-            color: #2f3640;
+            color: var(--text-heading, #2f3640);
             margin-bottom: 8px;
         }
         
         .page-subtitle {
             font-size: 14px;
-            color: #8893a7;
+            color: var(--text-secondary, #8893a7);
         }
         
         .content-card {
-            background: white;
+            background: var(--bg-secondary, white);
             border-radius: 12px;
             padding: 30px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-            border: 1px solid #e8e9ff;
+            box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+            border: 1px solid var(--border-color, #e8e9ff);
             margin-bottom: 25px;
         }
         
         .card-title {
             font-size: 18px;
             font-weight: 700;
-            color: #2f3640;
+            color: var(--text-primary, #2f3640);
             margin-bottom: 25px;
             display: flex;
             align-items: center;
@@ -61,7 +61,7 @@
             content: '';
             width: 4px;
             height: 24px;
-            background: #5b5fcf;
+            background: var(--accent-color, #5b5fcf);
             border-radius: 2px;
         }
         
@@ -73,7 +73,7 @@
             display: block;
             font-size: 13px;
             font-weight: 600;
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             margin-bottom: 8px;
             text-transform: uppercase;
             letter-spacing: 0.5px;
@@ -83,23 +83,23 @@
         .form-control {
             width: 100%;
             padding: 10px 14px;
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-color, #e8e9ff);
             border-radius: 8px;
             font-size: 14px;
-            color: #2f3640;
-            background: white;
+            color: var(--text-primary, #2f3640);
+            background: var(--bg-secondary, white);
             transition: all 0.2s ease;
         }
         
         .form-select:hover,
         .form-control:hover {
-            border-color: #5b5fcf;
+            border-color: var(--accent-color, #5b5fcf);
         }
         
         .form-select:focus,
         .form-control:focus {
             outline: none;
-            border-color: #5b5fcf;
+            border-color: var(--accent-color, #5b5fcf);
             box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
         }
         
@@ -124,12 +124,12 @@
         }
         
         .btn-primary {
-            background: #5b5fcf;
+            background: var(--accent-color, #5b5fcf);
             color: white;
         }
         
         .btn-primary:hover {
-            background: #4a4fc4;
+            background: var(--accent-hover, #4a4fc4);
             box-shadow: 0 4px 12px rgba(91,95,207,0.3);
             transform: translateY(-1px);
         }
@@ -144,9 +144,22 @@
         }
         
         .alert-success {
-            background: #f0fdf4;
-            border: 1px solid #bbf7d0;
-            color: #166534;
+            background: var(--success-bg, #f0fdf4);
+            border: 1px solid var(--success-border, #bbf7d0);
+            color: var(--success-text, #166534);
+        }
+        
+        .info-box {
+            background: var(--bg-hover, #f8f9ff);
+            border: 1px solid var(--border-color, #e8e9ff);
+            border-radius: 8px;
+            padding: 15px;
+            color: var(--text-secondary, #64748b);
+            font-size: 14px;
+        }
+        
+        .info-box p {
+            margin: 0;
         }
         
         .loading-icon {
diff --git a/baseTemplate/templates/baseTemplate/homePage.html b/baseTemplate/templates/baseTemplate/homePage.html
index a361fa18c..96bc5bf2c 100644
--- a/baseTemplate/templates/baseTemplate/homePage.html
+++ b/baseTemplate/templates/baseTemplate/homePage.html
@@ -22,18 +22,18 @@
     
     /* Overview Section */
     .overview-section {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .section-title {
         font-size: 16px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -46,7 +46,7 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
@@ -57,8 +57,8 @@
     }
     
     .stat-card {
-        background: white;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary, white);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 12px;
         padding: 20px;
         position: relative;
@@ -74,7 +74,7 @@
     
     .stat-card-title {
         font-size: 13px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -82,13 +82,13 @@
     
     .stat-card-value {
         font-size: 13px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
     }
     
     .progress-bar-container {
         width: 100%;
         height: 8px;
-        background: #e8e9ff;
+        background: var(--border-color, #e8e9ff);
         border-radius: 4px;
         overflow: hidden;
     }
@@ -97,23 +97,23 @@
         height: 100%;
         border-radius: 4px;
         transition: width 0.3s ease;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
     }
     
     .stat-card-info {
         margin-top: 10px;
         font-size: 13px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
     }
     
     /* Insights Section */
     .insights-section {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .insights-grid {
@@ -123,8 +123,8 @@
     }
     
     .insight-card {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 10px;
         padding: 20px 15px;
         text-align: center;
@@ -135,13 +135,13 @@
     .insight-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 5px 20px rgba(91,95,207,0.1);
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
     }
     
     .insight-icon {
         width: 48px;
         height: 48px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 12px;
         display: flex;
         align-items: center;
@@ -154,23 +154,23 @@
     .insight-value {
         font-size: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 5px;
     }
     
     .insight-label {
         font-size: 13px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
         font-weight: 500;
     }
     
     /* Activity Board */
     .activity-section {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 25px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .activity-header {
@@ -185,10 +185,10 @@
     .activity-tabs {
         display: flex;
         gap: 3px;
-        background: #f0f0ff;
+        background: var(--bg-primary, #f0f0ff);
         padding: 3px;
         border-radius: 8px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .activity-tab {
@@ -198,7 +198,7 @@
         border-radius: 6px;
         font-size: 12px;
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         cursor: pointer;
         transition: all 0.2s ease;
         display: flex;
@@ -208,12 +208,12 @@
     }
     
     .activity-tab:hover {
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
         background: rgba(91,95,207,0.1);
     }
     
     .activity-tab.active {
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         color: white;
         box-shadow: 0 2px 4px rgba(91,95,207,0.3);
     }
@@ -241,28 +241,28 @@
         padding: 12px 15px;
         font-size: 11px;
         font-weight: 700;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         text-transform: uppercase;
         letter-spacing: 0.8px;
-        border-bottom: 2px solid #e8e9ff;
-        background: #f8f9ff;
+        border-bottom: 2px solid var(--border-color, #e8e9ff);
+        background: var(--bg-hover, #f8f9ff);
     }
     
     .activity-table td {
         padding: 12px 15px;
         font-size: 13px;
-        color: #2f3640;
-        border-bottom: 1px solid #f0f0ff;
+        color: var(--text-primary, #2f3640);
+        border-bottom: 1px solid var(--border-color, #f0f0ff);
     }
     
     .activity-table tr:hover {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
     }
     
     .view-activity-btn {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
-        color: #5b5fcf;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
+        color: var(--accent-color, #5b5fcf);
         padding: 6px 14px;
         border-radius: 6px;
         font-size: 12px;
@@ -272,9 +272,9 @@
     }
     
     .view-activity-btn:hover {
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         color: white;
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
         box-shadow: 0 2px 4px rgba(91,95,207,0.3);
     }
     
@@ -282,9 +282,9 @@
         height: 280px;
         position: relative;
         padding: 15px;
-        background: #fafbff;
+        background: var(--bg-hover, #fafbff);
         border-radius: 8px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         margin-top: 10px;
     }
     
@@ -314,7 +314,7 @@
         max-width: 90vw;
         max-height: 90vh;
         width: 600px;
-        background: #fff;
+        background: var(--bg-secondary, #fff);
         border-radius: 16px;
         box-shadow: 0 8px 40px rgba(0,0,0,0.18);
         padding: 32px 28px 24px;
@@ -336,8 +336,8 @@
     
     /* Brand Bird Badge */
     .brand-badge {
-        background: #2f3640;
-        color: white;
+        background: var(--text-primary, #2f3640);
+        color: var(--bg-secondary, white);
         padding: 6px 12px;
         border-radius: 8px;
         font-size: 12px;
@@ -440,7 +440,7 @@
         <h2 class="section-title">INSIGHTS</h2>
         <div class="insights-grid">
             <div class="insight-card">
-                <div class="insight-icon" style="background: #5b5fcf;">
+                <div class="insight-icon">
                     <i class="fas fa-users"></i>
                 </div>
                 <div class="insight-value">{$ totalUsers || 0 $}</div>
@@ -448,7 +448,7 @@
             </div>
             
             <div class="insight-card">
-                <div class="insight-icon" style="background: #5b5fcf;">
+                <div class="insight-icon">
                     <i class="fas fa-globe"></i>
                 </div>
                 <div class="insight-value">{$ totalSites || 0 $}</div>
@@ -464,7 +464,7 @@
             </div>
             
             <div class="insight-card">
-                <div class="insight-icon" style="background: #5b5fcf;">
+                <div class="insight-icon">
                     <i class="fas fa-database"></i>
                 </div>
                 <div class="insight-value">{$ totalDBs || 0 $}</div>
@@ -472,7 +472,7 @@
             </div>
             
             <div class="insight-card">
-                <div class="insight-icon" style="background: #5b5fcf;">
+                <div class="insight-icon">
                     <i class="fas fa-envelope"></i>
                 </div>
                 <div class="insight-value">{$ totalEmails || 0 $}</div>
@@ -480,7 +480,7 @@
             </div>
             
             <div class="insight-card">
-                <div class="insight-icon" style="background: #5b5fcf;">
+                <div class="insight-icon">
                     <i class="fas fa-folder"></i>
                 </div>
                 <div class="insight-value">{$ totalFTPUsers || 0 $}</div>
diff --git a/baseTemplate/templates/baseTemplate/versionManagment.html b/baseTemplate/templates/baseTemplate/versionManagment.html
index d9791b6d6..b4b8a566a 100644
--- a/baseTemplate/templates/baseTemplate/versionManagment.html
+++ b/baseTemplate/templates/baseTemplate/versionManagment.html
@@ -25,29 +25,29 @@
         .page-title {
             font-size: 28px;
             font-weight: 700;
-            color: #2f3640;
+            color: var(--text-heading, #2f3640);
             margin-bottom: 8px;
         }
         
         .page-subtitle {
             font-size: 14px;
-            color: #8893a7;
+            color: var(--text-secondary, #8893a7);
         }
         
         /* Card styles */
         .content-card {
-            background: white;
+            background: var(--bg-secondary, white);
             border-radius: 12px;
             padding: 30px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-            border: 1px solid #e8e9ff;
+            box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+            border: 1px solid var(--border-color, #e8e9ff);
             margin-bottom: 25px;
         }
         
         .card-title {
             font-size: 18px;
             font-weight: 700;
-            color: #2f3640;
+            color: var(--text-primary, #2f3640);
             margin-bottom: 25px;
             display: flex;
             align-items: center;
@@ -58,7 +58,7 @@
             content: '';
             width: 4px;
             height: 24px;
-            background: #5b5fcf;
+            background: var(--accent-color, #5b5fcf);
             border-radius: 2px;
         }
         
@@ -71,7 +71,7 @@
             display: block;
             font-size: 13px;
             font-weight: 600;
-            color: #64748b;
+            color: var(--text-secondary, #64748b);
             margin-bottom: 8px;
             text-transform: uppercase;
             letter-spacing: 0.5px;
@@ -81,23 +81,23 @@
         .form-control {
             width: 100%;
             padding: 10px 14px;
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-color, #e8e9ff);
             border-radius: 8px;
             font-size: 14px;
-            color: #2f3640;
-            background: white;
+            color: var(--text-primary, #2f3640);
+            background: var(--bg-secondary, white);
             transition: all 0.2s ease;
         }
         
         .form-select:hover,
         .form-control:hover {
-            border-color: #5b5fcf;
+            border-color: var(--accent-color, #5b5fcf);
         }
         
         .form-select:focus,
         .form-control:focus {
             outline: none;
-            border-color: #5b5fcf;
+            border-color: var(--accent-color, #5b5fcf);
             box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
         }
         
@@ -117,25 +117,25 @@
         }
         
         .btn-primary {
-            background: #5b5fcf;
+            background: var(--accent-color, #5b5fcf);
             color: white;
         }
         
         .btn-primary:hover {
-            background: #4a4fc4;
+            background: var(--accent-hover, #4a4fc4);
             box-shadow: 0 4px 12px rgba(91,95,207,0.3);
             transform: translateY(-1px);
         }
         
         .btn-secondary {
-            background: #f8f9ff;
-            color: #5b5fcf;
-            border: 1px solid #e8e9ff;
+            background: var(--bg-hover, #f8f9ff);
+            color: var(--accent-color, #5b5fcf);
+            border: 1px solid var(--border-color, #e8e9ff);
         }
         
         .btn-secondary:hover {
-            background: #eef0ff;
-            border-color: #5b5fcf;
+            background: var(--bg-hover, #eef0ff);
+            border-color: var(--accent-color, #5b5fcf);
         }
         
         .btn-group {
@@ -155,7 +155,7 @@
         }
         
         .alert-warning {
-            background: #fef3e9;
+            background: var(--warning-bg, #fef3e9);
             border: 1px solid #fddfb9;
             color: #b95e00;
         }
@@ -182,31 +182,32 @@
         .info-label {
             font-size: 12px;
             font-weight: 600;
-            color: #8893a7;
+            color: var(--text-secondary, #8893a7);
             text-transform: uppercase;
             letter-spacing: 0.5px;
         }
         
         .info-value {
             font-size: 14px;
-            color: #2f3640;
+            color: var(--text-primary, #2f3640);
             font-weight: 500;
             font-family: 'SF Mono', Monaco, monospace;
-            background: #f8f9ff;
+            background: var(--bg-hover, #f8f9ff);
             padding: 8px 12px;
             border-radius: 6px;
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-color, #e8e9ff);
             word-break: break-all;
         }
         
         /* Progress log */
         .log-container {
-            background: #1e1e1e;
+            background: var(--text-primary, #1e1e1e);
             border-radius: 8px;
             padding: 20px;
             margin-top: 20px;
             max-height: 400px;
             overflow-y: auto;
+            border: 1px solid var(--border-color, #e8e9ff);
         }
         
         .log-textarea {
@@ -214,7 +215,7 @@
             min-height: 300px;
             background: transparent;
             border: none;
-            color: #f0f0f0;
+            color: var(--bg-secondary, #f0f0f0);
             font-family: 'SF Mono', Monaco, monospace;
             font-size: 13px;
             line-height: 1.6;
@@ -230,8 +231,8 @@
             display: inline-block;
             width: 16px;
             height: 16px;
-            border: 2px solid #f3f3f3;
-            border-top: 2px solid #5b5fcf;
+            border: 2px solid var(--border-color, #f3f3f3);
+            border-top: 2px solid var(--accent-color, #5b5fcf);
             border-radius: 50%;
             animation: spin 1s linear infinite;
         }