diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 615e2482c..34257d8e1 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,7 +6,9 @@
   <component name="ChangeListManager">
     <list default="true" id="5251c5c9-f2a1-41f2-bc76-10b517091df1" name="Changes" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/tuning/templates/tuning/liteSpeedTuning.html" beforeDir="false" afterPath="$PROJECT_DIR$/tuning/templates/tuning/liteSpeedTuning.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/firewall/templates/firewall/firewall.html" beforeDir="false" afterPath="$PROJECT_DIR$/firewall/templates/firewall/firewall.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/serverLogs/templates/serverLogs/serverMail.html" beforeDir="false" afterPath="$PROJECT_DIR$/serverLogs/templates/serverLogs/serverMail.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/serverStatus/templates/serverStatus/cybercpmainlogfile.html" beforeDir="false" afterPath="$PROJECT_DIR$/serverStatus/templates/serverStatus/cybercpmainlogfile.html" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -39,27 +41,27 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "ModuleVcsDetector.initialDetectionPerformed": "true",
-    "Notification.DisplayName-DoNotAsk-DatabaseConfigFileWatcher.found": "Database connection parameters found",
-    "Notification.DoNotAsk-DatabaseConfigFileWatcher.found": "true",
-    "RunOnceActivity.OpenDjangoStructureViewOnStart": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager": "true",
-    "RunOnceActivity.git.unshallow": "true",
-    "SHELLCHECK.PATH": "/Users/cyberpersons/Library/Application Support/JetBrains/PyCharm2025.1/plugins/Shell Script/shellcheck",
-    "git-widget-placeholder": "v2.4.4-dev",
-    "last_opened_file_path": "/Users/cyberpersons/cyberpanel",
-    "node.js.detected.package.eslint": "true",
-    "node.js.detected.package.tslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "node.js.selected.package.tslint": "(autodetect)",
-    "nodejs_package_manager_path": "npm",
-    "settings.editor.selected.configurable": "preferences.pluginManager",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;ModuleVcsDetector.initialDetectionPerformed&quot;: &quot;true&quot;,
+    &quot;Notification.DisplayName-DoNotAsk-DatabaseConfigFileWatcher.found&quot;: &quot;Database connection parameters found&quot;,
+    &quot;Notification.DoNotAsk-DatabaseConfigFileWatcher.found&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.OpenDjangoStructureViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
+    &quot;SHELLCHECK.PATH&quot;: &quot;/Users/cyberpersons/Library/Application Support/JetBrains/PyCharm2025.1/plugins/Shell Script/shellcheck&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;v2.4.4-dev&quot;,
+    &quot;last_opened_file_path&quot;: &quot;/Users/cyberpersons/cyberpanel&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.pluginManager&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="RunManager">
     <configuration name="cyberpanel" type="Python.DjangoServer" factoryName="Django server">
       <module name="cyberpanel" />
diff --git a/firewall/templates/firewall/firewall.html b/firewall/templates/firewall/firewall.html
index a0dd566a0..dace7774b 100644
--- a/firewall/templates/firewall/firewall.html
+++ b/firewall/templates/firewall/firewall.html
@@ -14,14 +14,14 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+        background: linear-gradient(135deg, var(--firewall-gradient-start, #ef4444) 0%, var(--firewall-gradient-end, #dc2626) 100%);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
         overflow: hidden;
-        color: white;
+        color: var(--text-light, white);
     }
-    
+
     .page-header::before {
         content: '';
         position: absolute;
@@ -32,12 +32,12 @@
         background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
         animation: rotate 30s linear infinite;
     }
-    
+
     @keyframes rotate {
         from { transform: rotate(0deg); }
         to { transform: rotate(360deg); }
     }
-    
+
     @keyframes fadeInDown {
         from {
             opacity: 0;
@@ -48,7 +48,7 @@
             transform: translateY(0);
         }
     }
-    
+
     @keyframes fadeInUp {
         from {
             opacity: 0;
@@ -59,12 +59,12 @@
             transform: translateY(0);
         }
     }
-    
+
     .header-content {
         position: relative;
         z-index: 1;
     }
-    
+
     .page-title {
         font-size: 2.5rem;
         font-weight: 700;
@@ -74,7 +74,7 @@
         justify-content: center;
         gap: 1rem;
     }
-    
+
     .firewall-icon {
         width: 60px;
         height: 60px;
@@ -86,44 +86,44 @@
         justify-content: center;
         box-shadow: 0 4px 12px rgba(0,0,0,0.1);
     }
-    
+
     .page-subtitle {
         font-size: 1.125rem;
-        color: rgba(255, 255, 255, 0.9);
+        color: var(--text-light-secondary, rgba(255, 255, 255, 0.9));
         max-width: 700px;
         margin: 0 auto;
         line-height: 1.6;
     }
-    
+
     /* Status Panel */
     .status-panel {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 16px;
         box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         overflow: hidden;
         margin-bottom: 2rem;
         animation: fadeInUp 0.5s ease-out;
     }
-    
+
     .status-header {
-        background: #f8f9ff;
+        background: var(--bg-tertiary, #f8f9ff);
         padding: 1.5rem 2rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
         display: flex;
         align-items: center;
         justify-content: space-between;
     }
-    
+
     .status-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         display: flex;
         align-items: center;
         gap: 0.75rem;
     }
-    
+
     .status-badge {
         padding: 0.5rem 1rem;
         border-radius: 8px;
@@ -133,17 +133,17 @@
         align-items: center;
         gap: 0.5rem;
     }
-    
+
     .status-active {
-        background: #d1fae5;
-        color: #065f46;
+        background: var(--badge-success-bg, #d1fae5);
+        color: var(--badge-success-text, #065f46);
     }
-    
+
     .status-inactive {
-        background: #fee2e2;
-        color: #991b1b;
+        background: var(--badge-error-bg, #fee2e2);
+        color: var(--badge-error-text, #991b1b);
     }
-    
+
     .status-content {
         padding: 2rem;
         display: flex;
@@ -152,7 +152,7 @@
         gap: 1rem;
         flex-wrap: wrap;
     }
-    
+
     .control-btn {
         padding: 0.75rem 1.5rem;
         border-radius: 10px;
@@ -167,60 +167,60 @@
         min-width: 120px;
         justify-content: center;
     }
-    
+
     .btn-start {
-        background: #10b981;
-        color: white;
+        background: var(--btn-success, #10b981);
+        color: var(--text-light, white);
     }
-    
+
     .btn-start:hover {
-        background: #059669;
+        background: var(--btn-success-hover, #059669);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+        box-shadow: 0 4px 12px var(--btn-success-shadow, rgba(16, 185, 129, 0.3));
     }
-    
+
     .btn-stop {
-        background: #f59e0b;
-        color: white;
+        background: var(--btn-warning, #f59e0b);
+        color: var(--text-light, white);
     }
-    
+
     .btn-stop:hover {
-        background: #d97706;
+        background: var(--btn-warning-hover, #d97706);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
+        box-shadow: 0 4px 12px var(--btn-warning-shadow, rgba(245, 158, 11, 0.3));
     }
-    
+
     .btn-reload {
-        background: #3b82f6;
-        color: white;
+        background: var(--btn-primary, #3b82f6);
+        color: var(--text-light, white);
     }
-    
+
     .btn-reload:hover {
-        background: #2563eb;
+        background: var(--btn-primary-hover, #2563eb);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+        box-shadow: 0 4px 12px var(--btn-primary-shadow, rgba(59, 130, 246, 0.3));
     }
-    
+
     /* Rules Panel */
     .rules-panel {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 16px;
         box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out 0.2s;
         animation-fill-mode: both;
     }
-    
+
     .panel-header {
-        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-        color: white;
+        background: linear-gradient(135deg, var(--firewall-gradient-start, #ef4444) 0%, var(--firewall-gradient-end, #dc2626) 100%);
+        color: var(--text-light, white);
         padding: 1.5rem 2rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
     }
-    
+
     .panel-title {
         font-size: 1.25rem;
         font-weight: 600;
@@ -228,7 +228,7 @@
         align-items: center;
         gap: 0.75rem;
     }
-    
+
     .panel-icon {
         width: 32px;
         height: 32px;
@@ -238,49 +238,50 @@
         align-items: center;
         justify-content: center;
     }
-    
+
     .add-rule-section {
-        background: #f8f9ff;
+        background: var(--bg-tertiary, #f8f9ff);
         padding: 2rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
     }
-    
+
     .rule-form {
         display: grid;
         grid-template-columns: 2fr 1fr 2fr 1fr auto;
         gap: 1rem;
         align-items: end;
     }
-    
+
     .form-group {
         display: flex;
         flex-direction: column;
         gap: 0.5rem;
     }
-    
+
     .form-label {
         font-weight: 500;
-        color: #475569;
+        color: var(--text-secondary, #475569);
         font-size: 0.75rem;
         text-transform: uppercase;
         letter-spacing: 0.05em;
     }
-    
+
     .form-control {
         padding: 0.75rem 1rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
-        background: #fff;
+        background: var(--bg-primary, #fff);
+        color: var(--text-primary, #1e293b);
     }
-    
+
     .form-control:focus {
         outline: none;
-        border-color: #ef4444;
-        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+        border-color: var(--firewall-accent, #ef4444);
+        box-shadow: 0 0 0 3px var(--firewall-focus-shadow, rgba(239, 68, 68, 0.1));
     }
-    
+
     .select-control {
         appearance: none;
         background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
@@ -289,10 +290,10 @@
         background-size: 1.5em 1.5em;
         padding-right: 2.5rem;
     }
-    
+
     .btn-add {
-        background: #ef4444;
-        color: white;
+        background: var(--firewall-accent, #ef4444);
+        color: var(--text-light, white);
         padding: 0.75rem 1.5rem;
         border-radius: 8px;
         font-weight: 500;
@@ -305,66 +306,66 @@
         gap: 0.5rem;
         align-self: flex-end;
     }
-    
+
     .btn-add:hover {
-        background: #dc2626;
+        background: var(--firewall-accent-dark, #dc2626);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+        box-shadow: 0 4px 12px var(--firewall-shadow, rgba(239, 68, 68, 0.3));
     }
-    
+
     /* Rules Table */
     .rules-table-section {
         padding: 2rem;
     }
-    
+
     .rules-table {
         width: 100%;
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 8px;
         overflow: hidden;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
     }
-    
+
     .rules-table thead {
-        background: #f8f9ff;
+        background: var(--bg-tertiary, #f8f9ff);
     }
-    
+
     .rules-table th {
         padding: 1rem;
         text-align: left;
         font-weight: 600;
-        color: #475569;
+        color: var(--text-secondary, #475569);
         font-size: 0.75rem;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
     }
-    
+
     .rules-table td {
         padding: 1rem;
-        border-bottom: 1px solid #f1f5f9;
-        color: #334155;
+        border-bottom: 1px solid var(--border-light, #f1f5f9);
+        color: var(--text-primary, #334155);
         font-size: 0.875rem;
     }
-    
+
     .rules-table tbody tr {
         transition: all 0.2s ease;
     }
-    
+
     .rules-table tbody tr:hover {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
     }
-    
+
     .rule-id {
         font-weight: 600;
-        color: #64748b;
+        color: var(--text-muted, #64748b);
     }
-    
+
     .rule-name {
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
     }
-    
+
     .protocol-badge {
         display: inline-block;
         padding: 0.25rem 0.5rem;
@@ -373,34 +374,35 @@
         font-weight: 500;
         text-transform: uppercase;
     }
-    
+
     .protocol-tcp {
-        background: #dbeafe;
-        color: #1e40af;
+        background: var(--badge-blue-bg, #dbeafe);
+        color: var(--badge-blue-text, #1e40af);
     }
-    
+
     .protocol-udp {
-        background: #fef3c7;
-        color: #92400e;
+        background: var(--badge-yellow-bg, #fef3c7);
+        color: var(--badge-yellow-text, #92400e);
     }
-    
+
     .ip-address {
         font-family: 'Monaco', 'Consolas', monospace;
         font-size: 0.875rem;
-        background: #f3f4f6;
+        background: var(--bg-code, #f3f4f6);
         padding: 0.25rem 0.5rem;
         border-radius: 4px;
+        color: var(--text-primary, #334155);
     }
-    
+
     .port-number {
         font-family: 'Monaco', 'Consolas', monospace;
         font-weight: 600;
-        color: #ef4444;
+        color: var(--firewall-accent, #ef4444);
     }
-    
+
     .btn-delete {
-        background: #fee2e2;
-        color: #ef4444;
+        background: var(--bg-error-light, #fee2e2);
+        color: var(--firewall-accent, #ef4444);
         width: 32px;
         height: 32px;
         border-radius: 6px;
@@ -412,37 +414,37 @@
         font-weight: 700;
         border: none;
     }
-    
+
     .btn-delete:hover {
-        background: #ef4444;
-        color: white;
+        background: var(--firewall-accent, #ef4444);
+        color: var(--text-light, white);
         transform: scale(1.1);
     }
-    
+
     .empty-state {
         text-align: center;
         padding: 4rem 2rem;
-        color: #64748b;
+        color: var(--text-muted, #64748b);
     }
-    
+
     .empty-icon {
         font-size: 4rem;
-        color: #94a3b8;
+        color: var(--text-disabled, #94a3b8);
         margin-bottom: 1rem;
     }
-    
+
     .empty-title {
         font-size: 1.25rem;
         font-weight: 600;
         margin-bottom: 0.5rem;
-        color: #475569;
+        color: var(--text-secondary, #475569);
     }
-    
+
     .empty-text {
         font-size: 0.875rem;
-        color: #64748b;
+        color: var(--text-muted, #64748b);
     }
-    
+
     .alert {
         padding: 1rem 1.5rem;
         border-radius: 8px;
@@ -452,74 +454,74 @@
         gap: 0.75rem;
         animation: fadeInUp 0.3s ease-out;
     }
-    
+
     .alert-success {
-        background: #d1fae5;
-        color: #065f46;
-        border: 1px solid #a7f3d0;
+        background: var(--alert-success-bg, #d1fae5);
+        color: var(--alert-success-text, #065f46);
+        border: 1px solid var(--alert-success-border, #a7f3d0);
     }
-    
+
     .alert-danger {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 1px solid #fecaca;
+        background: var(--alert-error-bg, #fee2e2);
+        color: var(--alert-error-text, #991b1b);
+        border: 1px solid var(--alert-error-border, #fecaca);
     }
-    
+
     .alert-icon {
         font-size: 1.25rem;
     }
-    
+
     .loading-spinner {
         width: 20px;
         height: 20px;
-        border: 2px solid #f3f3f3;
-        border-top: 2px solid #ef4444;
+        border: 2px solid var(--border-light, #f3f3f3);
+        border-top: 2px solid var(--firewall-accent, #ef4444);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         display: inline-block;
     }
-    
+
     @keyframes spin {
         0% { transform: rotate(0deg); }
         100% { transform: rotate(360deg); }
     }
-    
+
     /* Responsive */
     @media (max-width: 1024px) {
         .rule-form {
             grid-template-columns: 1fr;
             gap: 1rem;
         }
-        
+
         .btn-add {
             width: 100%;
             justify-content: center;
         }
     }
-    
+
     @media (max-width: 768px) {
         .modern-container {
             padding: 1rem;
         }
-        
+
         .page-title {
             font-size: 2rem;
         }
-        
+
         .status-content {
             flex-direction: column;
             align-items: stretch;
         }
-        
+
         .control-btn {
             width: 100%;
         }
-        
+
         .rules-table-section {
             padding: 1rem;
             overflow-x: auto;
         }
-        
+
         .rules-table {
             min-width: 600px;
         }
@@ -547,7 +549,7 @@
             </p>
         </div>
     </div>
-    
+
     <!-- Status Panel -->
     <div class="status-panel">
         <div class="status-header">
@@ -574,21 +576,21 @@
                 {% trans "Reload" %}
             </button>
         </div>
-        
+
         <!-- Status Messages -->
         <div style="padding: 0 2rem 1rem;">
             <div ng-hide="actionFailed" class="alert alert-danger">
                 <i class="fas fa-exclamation-circle alert-icon"></i>
                 <span>{% trans "Action failed. Error message:" %} {$ errorMessage $}</span>
             </div>
-            
+
             <div ng-hide="actionSuccess" class="alert alert-success">
                 <i class="fas fa-check-circle alert-icon"></i>
                 <span>{% trans "Action completed successfully." %}</span>
             </div>
         </div>
     </div>
-    
+
     <!-- Rules Panel -->
     <div class="rules-panel">
         <div class="panel-header">
@@ -598,7 +600,7 @@
                 </div>
                 {% trans "Firewall Rules" %}
             </div>
-            <div ng-show="!rulesLoading" class="loading-spinner"></div>
+            <div ng-show="rulesLoading" class="loading-spinner"></div>
         </div>
         
         <!-- Add Rule Section -->
diff --git a/serverLogs/templates/serverLogs/serverMail.html b/serverLogs/templates/serverLogs/serverMail.html
index ee4980cde..d70b8d5ac 100644
--- a/serverLogs/templates/serverLogs/serverMail.html
+++ b/serverLogs/templates/serverLogs/serverMail.html
@@ -19,9 +19,9 @@
         animation: fadeInDown 0.5s ease-out;
         position: relative;
         overflow: hidden;
-        color: var(--text-primary, white);
+        color: white;
     }
-    
+
     .page-header::before {
         content: '';
         position: absolute;
@@ -32,12 +32,12 @@
         background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
         animation: rotate 30s linear infinite;
     }
-    
+
     @keyframes rotate {
         from { transform: rotate(0deg); }
         to { transform: rotate(360deg); }
     }
-    
+
     @keyframes fadeInDown {
         from {
             opacity: 0;
@@ -48,7 +48,7 @@
             transform: translateY(0);
         }
     }
-    
+
     @keyframes fadeInUp {
         from {
             opacity: 0;
@@ -59,12 +59,12 @@
             transform: translateY(0);
         }
     }
-    
+
     .header-content {
         position: relative;
         z-index: 1;
     }
-    
+
     .page-title {
         font-size: 2.5rem;
         font-weight: 700;
@@ -74,7 +74,7 @@
         justify-content: center;
         gap: 1rem;
     }
-    
+
     .mail-icon {
         width: 60px;
         height: 60px;
@@ -86,14 +86,14 @@
         justify-content: center;
         box-shadow: var(--shadow-light, 0 4px 12px rgba(0,0,0,0.1));
     }
-    
+
     .page-subtitle {
         font-size: 1.125rem;
-        color: var(--text-secondary, rgba(255, 255, 255, 0.9));
+        color: rgba(255, 255, 255, 0.9);
         max-width: 600px;
         margin: 0 auto;
     }
-    
+
     .docs-link {
         margin-top: 1rem;
         display: inline-flex;
@@ -103,19 +103,19 @@
         backdrop-filter: blur(10px);
         padding: 0.5rem 1.5rem;
         border-radius: 20px;
-        color: var(--text-primary, white);
+        color: white;
         text-decoration: none;
         font-size: 0.875rem;
         transition: all 0.3s ease;
     }
-    
+
     .docs-link:hover {
         background: var(--accent-hover, rgba(255, 255, 255, 0.3));
         transform: translateY(-2px);
-        color: var(--text-primary, white);
+        color: white;
         text-decoration: none;
     }
-    
+
     .mail-config-panel {
         background: var(--bg-secondary, white);
         border-radius: 16px;
@@ -124,16 +124,16 @@
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
     }
-    
+
     .panel-header {
         background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
-        color: var(--text-primary, white);
+        color: white;
         padding: 1.5rem 2rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
     }
-    
+
     .panel-title {
         font-size: 1.25rem;
         font-weight: 600;
@@ -141,7 +141,7 @@
         align-items: center;
         gap: 0.75rem;
     }
-    
+
     .panel-icon {
         width: 32px;
         height: 32px;
@@ -151,11 +151,11 @@
         align-items: center;
         justify-content: center;
     }
-    
+
     .form-section {
         padding: 2rem;
     }
-    
+
     .form-row {
         display: grid;
         grid-template-columns: 200px 1fr;
@@ -163,14 +163,14 @@
         gap: 1rem;
         margin-bottom: 1.5rem;
     }
-    
+
     .form-label {
         font-weight: 500;
-        color: var(--text-secondary, #475569);
+        color: var(--text-secondary, #64748b);
         font-size: 0.875rem;
         text-align: right;
     }
-    
+
     .form-control {
         padding: 0.75rem 1rem;
         border: 1px solid var(--border-light, #e8e9ff);
@@ -182,22 +182,53 @@
         width: 100%;
         max-width: 400px;
     }
-    
+
     .form-control:focus {
         outline: none;
         border-color: var(--accent-color, #667eea);
         box-shadow: var(--accent-focus, 0 0 0 3px rgba(102, 126, 234, 0.1));
     }
-    
+
     .select-control {
+        -webkit-appearance: none;
+        -moz-appearance: none;
         appearance: none;
-        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+        background-color: var(--bg-secondary, white);
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%235b5fcf' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
         background-position: right 0.5rem center;
         background-repeat: no-repeat;
         background-size: 1.5em 1.5em;
         padding-right: 2.5rem;
+        color: var(--text-primary, #1e293b) !important;
+        font-size: 0.875rem !important;
+        line-height: 1.5;
     }
-    
+
+    /* Ensure option text is visible */
+    .select-control option {
+        color: var(--text-primary, #1e293b);
+        background-color: var(--bg-secondary, white);
+        padding: 8px;
+        font-size: 0.875rem;
+    }
+
+    /* Fix for Windows high contrast mode */
+    @media screen and (-ms-high-contrast: active) {
+        .select-control {
+            border: 2px solid;
+        }
+        .select-control option {
+            background: var(--bg-secondary, white);
+            color: var(--text-primary, black);
+        }
+    }
+
+    /* Specific focus styles for select */
+    .select-control:focus {
+        background-color: var(--bg-secondary, white);
+        color: var(--text-primary, #1e293b);
+    }
+
     .mailer-type-selector {
         background: var(--bg-light, #f8f9ff);
         border-radius: 12px;
@@ -205,7 +236,7 @@
         margin-bottom: 2rem;
         border: 1px solid var(--border-light, #e8e9ff);
     }
-    
+
     .smtp-fields {
         background: var(--bg-light, #fafbff);
         border-radius: 12px;
@@ -214,7 +245,7 @@
         border: 1px solid var(--border-light, #e8e9ff);
         animation: fadeInUp 0.3s ease-out;
     }
-    
+
     .section-header {
         display: flex;
         align-items: center;
@@ -223,7 +254,7 @@
         padding-bottom: 1rem;
         border-bottom: 1px solid var(--border-light, #e8e9ff);
     }
-    
+
     .section-icon {
         width: 32px;
         height: 32px;
@@ -234,13 +265,13 @@
         justify-content: center;
         color: var(--accent-color, #667eea);
     }
-    
+
     .section-title {
         font-size: 1rem;
         font-weight: 600;
         color: var(--text-primary, #1e293b);
     }
-    
+
     .action-buttons {
         display: flex;
         gap: 1rem;
@@ -249,7 +280,7 @@
         border-top: 1px solid var(--border-light, #e8e9ff);
         justify-content: center;
     }
-    
+
     .btn {
         padding: 0.75rem 2rem;
         border-radius: 8px;
@@ -262,17 +293,17 @@
         align-items: center;
         gap: 0.5rem;
     }
-    
+
     .btn-primary {
         background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
-        color: var(--text-primary, white);
+        color: white;
     }
-    
+
     .btn-primary:hover {
         transform: translateY(-2px);
         box-shadow: var(--accent-shadow, 0 4px 12px rgba(102, 126, 234, 0.3));
     }
-    
+
     .loading-spinner {
         width: 20px;
         height: 20px;
@@ -282,12 +313,12 @@
         animation: spin 1s linear infinite;
         display: inline-block;
     }
-    
+
     @keyframes spin {
         0% { transform: rotate(0deg); }
         100% { transform: rotate(360deg); }
     }
-    
+
     .info-box {
         background: var(--info-bg, #eff6ff);
         border: 1px solid var(--info-border, #bfdbfe);
@@ -298,19 +329,19 @@
         align-items: center;
         gap: 0.75rem;
     }
-    
+
     .info-icon {
         color: var(--info-color, #3b82f6);
         font-size: 1.25rem;
         flex-shrink: 0;
     }
-    
+
     .info-text {
         font-size: 0.875rem;
         color: var(--info-text, #1e40af);
         line-height: 1.6;
     }
-    
+
     /* Status Indicator */
     .status-indicator {
         display: flex;
@@ -323,7 +354,7 @@
         border: 1px solid var(--border-light, #e8e9ff);
         color: var(--text-primary, #1e293b);
     }
-    
+
     .status-dot {
         width: 8px;
         height: 8px;
@@ -331,7 +362,7 @@
         background: var(--success-color, #10b981);
         animation: pulse 2s infinite;
     }
-    
+
     @keyframes pulse {
         0% {
             box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
@@ -343,26 +374,26 @@
             box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
         }
     }
-    
+
     /* Responsive */
     @media (max-width: 768px) {
         .modern-container {
             padding: 1rem;
         }
-        
+
         .page-title {
             font-size: 2rem;
         }
-        
+
         .form-row {
             grid-template-columns: 1fr;
             gap: 0.5rem;
         }
-        
+
         .form-label {
             text-align: left;
         }
-        
+
         .form-control {
             max-width: 100%;
         }
@@ -394,7 +425,7 @@
             </a>
         </div>
     </div>
-    
+
     <!-- Mail Configuration Panel -->
     <div class="mail-config-panel">
         <div class="panel-header">
@@ -408,7 +439,7 @@
                 <span class="status-dot"></span>
                 <span>{% trans "Ready" %}</span>
             </div>
-            <div ng-show="!cyberPanelLoading" class="loading-spinner"></div>
+            <div ng-show="cyberPanelLoading" class="loading-spinner"></div>
         </div>
         
         <div class="form-section">
diff --git a/serverStatus/templates/serverStatus/cybercpmainlogfile.html b/serverStatus/templates/serverStatus/cybercpmainlogfile.html
index 308850e0c..9d04dbdb0 100644
--- a/serverStatus/templates/serverStatus/cybercpmainlogfile.html
+++ b/serverStatus/templates/serverStatus/cybercpmainlogfile.html
@@ -15,56 +15,56 @@
         --text-console: #10b981;
         
         /* Background colors */
-        --bg-primary: #ffffff;
-        --bg-secondary: #f8f9ff;
+        --bg-primary: white;
+        --bg-secondary: white;
         --bg-light: #f3f4f6;
         --bg-hover: #f8f9ff;
         --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        
+
         /* Border colors */
         --border-color: #e8e9ff;
         --border-light: #f1f5f9;
         --border-terminal: #334155;
-        
+
         /* Accent colors */
         --accent-color: #667eea;
         --accent-hover: #5a67d8;
         --accent-bg: #f3e8ff;
         --accent-focus: rgba(102, 126, 234, 0.1);
         --accent-shadow: rgba(102, 126, 234, 0.3);
-        
+
         /* Status colors */
         --success-bg: #d1fae5;
         --success-color: #065f46;
         --success-border: #a7f3d0;
         --success-accent: #10b981;
-        
+
         --danger-bg: #fee2e2;
         --danger-color: #991b1b;
         --danger-border: #fecaca;
         --danger-accent: #ef4444;
         --danger-hover: #dc2626;
-        
+
         --warning-bg: #fef3c7;
         --warning-color: #92400e;
         --warning-border: #fde68a;
-        
+
         --info-bg: #dbeafe;
         --info-color: #1e40af;
         --info-border: #bfdbfe;
-        
+
         /* Shadow colors */
         --shadow-light: rgba(0,0,0,0.05);
         --shadow-medium: rgba(0,0,0,0.08);
         --shadow-color: rgba(0,0,0,0.1);
-        
+
         /* Console/Terminal colors */
         --console-bg: #1e293b;
         --console-text: #10b981;
         --console-border: #334155;
         --console-scrollbar: #64748b;
         --console-scrollbar-hover: #94a3b8;
-        
+
         /* Neutral colors */
         --neutral-bg: #64748b;
         --neutral-hover: #475569;
@@ -75,7 +75,7 @@
         margin: 0 auto;
         padding: 2rem;
     }
-    
+
     .page-header {
         text-align: center;
         margin-bottom: 3rem;
@@ -85,9 +85,9 @@
         animation: fadeInDown 0.5s ease-out;
         position: relative;
         overflow: hidden;
-        color: var(--bg-primary);
+        color: white;
     }
-    
+
     .page-header::before {
         content: '';
         position: absolute;
@@ -98,12 +98,12 @@
         background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
         animation: rotate 30s linear infinite;
     }
-    
+
     @keyframes rotate {
         from { transform: rotate(0deg); }
         to { transform: rotate(360deg); }
     }
-    
+
     @keyframes fadeInDown {
         from {
             opacity: 0;
@@ -114,7 +114,7 @@
             transform: translateY(0);
         }
     }
-    
+
     @keyframes fadeInUp {
         from {
             opacity: 0;
@@ -125,12 +125,12 @@
             transform: translateY(0);
         }
     }
-    
+
     .header-content {
         position: relative;
         z-index: 1;
     }
-    
+
     .page-title {
         font-size: 2.5rem;
         font-weight: 700;
@@ -140,7 +140,7 @@
         justify-content: center;
         gap: 1rem;
     }
-    
+
     .log-icon {
         width: 60px;
         height: 60px;
@@ -152,7 +152,7 @@
         justify-content: center;
         box-shadow: 0 4px 12px rgba(0,0,0,0.1);
     }
-    
+
     .page-subtitle {
         font-size: 1.125rem;
         color: var(--text-on-gradient);
@@ -160,26 +160,26 @@
         margin: 0 auto;
         line-height: 1.6;
     }
-    
+
     .log-viewer-panel {
-        background: var(--bg-primary);
+        background: var(--bg-secondary, white);
         border-radius: 16px;
         box-shadow: 0 1px 3px var(--shadow-light), 0 10px 40px var(--shadow-medium);
         border: 1px solid var(--border-color);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
     }
-    
+
     .panel-header {
         background: var(--console-bg, #1e293b);
-        color: var(--bg-primary);
+        color: white;
         padding: 1rem 1.5rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
         border-bottom: 1px solid var(--console-border);
     }
-    
+
     .panel-title {
         font-size: 1rem;
         font-weight: 600;
@@ -188,7 +188,7 @@
         gap: 0.75rem;
         color: var(--text-terminal);
     }
-    
+
     .panel-icon {
         width: 32px;
         height: 32px;
@@ -199,13 +199,13 @@
         justify-content: center;
         color: var(--text-muted);
     }
-    
+
     .log-stats {
         display: flex;
         align-items: center;
         gap: 1.5rem;
     }
-    
+
     .stat-item {
         display: flex;
         align-items: center;
@@ -213,12 +213,12 @@
         font-size: 0.875rem;
         color: var(--text-muted, #94a3b8);
     }
-    
+
     .stat-value {
         color: var(--text-terminal);
         font-weight: 600;
     }
-    
+
     .log-controls {
         background: var(--bg-secondary);
         padding: 1rem 1.5rem;
@@ -229,18 +229,18 @@
         flex-wrap: wrap;
         gap: 1rem;
     }
-    
+
     .control-group {
         display: flex;
         align-items: center;
         gap: 1rem;
     }
-    
+
     .search-box {
         position: relative;
         min-width: 300px;
     }
-    
+
     .search-input {
         width: 100%;
         padding: 0.5rem 1rem 0.5rem 2.5rem;
@@ -248,14 +248,16 @@
         border-radius: 8px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
+        background: var(--bg-secondary, white);
+        color: var(--text-primary, #1e293b);
     }
-    
+
     .search-input:focus {
         outline: none;
         border-color: var(--accent-color, #667eea);
         box-shadow: 0 0 0 3px var(--accent-focus, rgba(102, 126, 234, 0.1));
     }
-    
+
     .search-icon {
         position: absolute;
         left: 0.75rem;
@@ -264,7 +266,7 @@
         color: var(--text-muted, #94a3b8);
         font-size: 0.875rem;
     }
-    
+
     .log-content {
         background: var(--console-bg, #1e293b);
         padding: 1.5rem;
@@ -273,7 +275,7 @@
         overflow-y: auto;
         position: relative;
     }
-    
+
     .log-textarea {
         width: 100%;
         background: transparent;
@@ -286,11 +288,11 @@
         resize: none;
         min-height: 550px;
     }
-    
+
     .log-textarea::placeholder {
         color: var(--text-secondary);
     }
-    
+
     .log-line-numbers {
         position: absolute;
         left: 0;
@@ -305,11 +307,11 @@
         padding-right: 1rem;
         border-right: 1px solid var(--console-border);
     }
-    
+
     .log-content-wrapper {
         padding-left: 60px;
     }
-    
+
     .action-bar {
         background: var(--bg-secondary);
         padding: 1.5rem;
@@ -319,7 +321,7 @@
         justify-content: center;
         gap: 1rem;
     }
-    
+
     .btn {
         padding: 0.625rem 1.5rem;
         border-radius: 8px;
@@ -332,40 +334,40 @@
         align-items: center;
         gap: 0.5rem;
     }
-    
+
     .btn-primary {
         background: var(--accent-color);
-        color: var(--bg-primary);
+        color: white;
     }
-    
+
     .btn-primary:hover {
         background: var(--accent-hover);
         transform: translateY(-2px);
         box-shadow: 0 4px 12px var(--accent-shadow);
     }
-    
+
     .btn-danger {
         background: var(--danger-accent);
-        color: var(--bg-primary);
+        color: white;
     }
-    
+
     .btn-danger:hover {
         background: var(--danger-hover);
         transform: translateY(-2px);
         box-shadow: 0 4px 12px var(--danger-shadow, rgba(239, 68, 68, 0.3));
     }
-    
+
     .btn-secondary {
         background: var(--neutral-bg);
-        color: var(--bg-primary);
+        color: white;
     }
-    
+
     .btn-secondary:hover {
         background: var(--neutral-hover);
         transform: translateY(-2px);
         box-shadow: 0 4px 12px var(--neutral-shadow);
     }
-    
+
     .loading-spinner {
         width: 20px;
         height: 20px;
@@ -375,12 +377,12 @@
         animation: spin 1s linear infinite;
         display: inline-block;
     }
-    
+
     @keyframes spin {
         0% { transform: rotate(0deg); }
         100% { transform: rotate(360deg); }
     }
-    
+
     .alert {
         padding: 1rem 1.5rem;
         border-radius: 8px;
@@ -390,103 +392,103 @@
         gap: 0.75rem;
         animation: fadeInUp 0.3s ease-out;
     }
-    
+
     .alert-success {
         background: var(--success-bg);
         color: var(--success-color);
         border: 1px solid var(--success-border);
     }
-    
+
     .alert-danger {
         background: var(--danger-bg);
         color: var(--danger-color);
         border: 1px solid var(--danger-border);
     }
-    
+
     .alert-icon {
         font-size: 1.25rem;
     }
-    
+
     .empty-state {
         text-align: center;
         padding: 4rem 2rem;
         color: var(--text-muted);
     }
-    
+
     .empty-icon {
         font-size: 4rem;
         color: var(--text-muted, #94a3b8);
         margin-bottom: 1rem;
     }
-    
+
     .empty-title {
         font-size: 1.25rem;
         font-weight: 600;
         margin-bottom: 0.5rem;
         color: var(--text-secondary);
     }
-    
+
     .empty-text {
         font-size: 0.875rem;
         color: var(--text-muted);
     }
-    
+
     /* Custom Scrollbar */
     .log-content::-webkit-scrollbar {
         width: 8px;
     }
-    
+
     .log-content::-webkit-scrollbar-track {
         background: var(--console-border);
         border-radius: 4px;
     }
-    
+
     .log-content::-webkit-scrollbar-thumb {
         background: var(--neutral-bg);
         border-radius: 4px;
     }
-    
+
     .log-content::-webkit-scrollbar-thumb:hover {
         background: var(--console-scrollbar-hover);
     }
-    
+
     /* Log Level Colors */
     .log-error { color: var(--danger-accent); }
     .log-warning { color: var(--warning-color); }
     .log-info { color: var(--info-color); }
     .log-debug { color: var(--debug-color, #8b5cf6); }
     .log-success { color: var(--success-accent); }
-    
+
     /* Responsive */
     @media (max-width: 768px) {
         .modern-container {
             padding: 1rem;
         }
-        
+
         .page-title {
             font-size: 2rem;
         }
-        
+
         .log-controls {
             flex-direction: column;
             align-items: stretch;
         }
-        
+
         .search-box {
             min-width: 100%;
         }
-        
+
         .control-group {
             flex-direction: column;
             align-items: stretch;
             width: 100%;
         }
-        
+
         .action-bar {
             flex-direction: column;
             gap: 0.5rem;
         }
-        
+
         .btn {
             width: 100%;
             justify-content: center;
@@ -515,7 +517,7 @@
             </p>
         </div>
     </div>
-    
+
     <!-- Log Viewer Panel -->
     <div class="log-viewer-panel">
         <!-- Panel Header -->
@@ -535,7 +537,7 @@
                     <i class="fas fa-check-circle" style="color: var(--success-accent, #10b981);"></i>
                     <span>{% trans "Live" %}</span>
                 </div>
-                <div ng-show="!logFileLoading" class="loading-spinner"></div>
+                <div ng-show="logFileLoading" class="loading-spinner"></div>
             </div>
         </div>