diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 147be4467..0876763c2 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,8 +6,8 @@
   <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$/dockerManager/templates/dockerManager/install.html" beforeDir="false" afterPath="$PROJECT_DIR$/dockerManager/templates/dockerManager/install.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/dockerManager/templates/dockerManager/manageImages.html" beforeDir="false" afterPath="$PROJECT_DIR$/dockerManager/templates/dockerManager/manageImages.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/managePHP/templates/managePHP/editPHPConfig.html" beforeDir="false" afterPath="$PROJECT_DIR$/managePHP/templates/managePHP/editPHPConfig.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/serverLogs/templates/serverLogs/serverMail.html" beforeDir="false" afterPath="$PROJECT_DIR$/serverLogs/templates/serverLogs/serverMail.html" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
diff --git a/managePHP/templates/managePHP/editPHPConfig.html b/managePHP/templates/managePHP/editPHPConfig.html
index 860d0fd9e..860b72db8 100644
--- a/managePHP/templates/managePHP/editPHPConfig.html
+++ b/managePHP/templates/managePHP/editPHPConfig.html
@@ -14,7 +14,7 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: linear-gradient(135deg, var(--accent-color, #667eea) 0%, var(--accent-dark, #764ba2) 100%);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
@@ -117,18 +117,18 @@
     }
     
     .config-panel {
-        background: white;
+        background: var(--bg-primary, 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;
+        box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05)), var(--shadow-lg, 0 10px 40px rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
         overflow: hidden;
         animation: fadeInUp 0.5s ease-out;
     }
     
     .modern-tabs {
         display: flex;
-        background: #f8f9ff;
-        border-bottom: 1px solid #e8e9ff;
+        background: var(--bg-secondary, #f8f9ff);
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
         overflow-x: auto;
     }
     
@@ -139,7 +139,7 @@
         border: none;
         background: none;
         font-weight: 500;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         position: relative;
         transition: all 0.3s ease;
         display: flex;
@@ -150,14 +150,14 @@
     }
     
     .tab-item:hover {
-        color: #667eea;
-        background: rgba(102, 126, 234, 0.05);
+        color: var(--accent-color, #667eea);
+        background: var(--accent-shadow-light, rgba(102, 126, 234, 0.05));
         text-decoration: none;
     }
     
     .tab-item.active {
-        color: #667eea;
-        background: white;
+        color: var(--accent-color, #667eea);
+        background: var(--bg-primary, white);
     }
     
     .tab-item.active::after {
@@ -167,7 +167,7 @@
         left: 0;
         right: 0;
         height: 3px;
-        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+        background: linear-gradient(90deg, var(--accent-color, #667eea) 0%, var(--accent-dark, #764ba2) 100%);
     }
     
     .tab-icon {
@@ -179,7 +179,7 @@
     }
     
     .php-selector {
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         border-radius: 12px;
         padding: 1.5rem;
         margin-bottom: 2rem;
@@ -191,7 +191,7 @@
     .selector-icon {
         width: 40px;
         height: 40px;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: linear-gradient(135deg, var(--accent-color, #667eea) 0%, var(--accent-dark, #764ba2) 100%);
         border-radius: 10px;
         display: flex;
         align-items: center;
@@ -209,24 +209,24 @@
     
     .form-label {
         font-weight: 500;
-        color: #475569;
+        color: var(--text-primary, #475569);
         font-size: 0.875rem;
         margin: 0;
     }
     
     .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, white);
     }
     
     .form-control:focus {
         outline: none;
-        border-color: #667eea;
-        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        border-color: var(--accent-color, #667eea);
+        box-shadow: 0 0 0 3px var(--accent-shadow-light, rgba(102, 126, 234, 0.1));
     }
     
     .select-control {
@@ -249,30 +249,30 @@
         grid-template-columns: 1fr 1fr;
         align-items: center;
         padding: 1.5rem;
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         border-radius: 12px;
         transition: all 0.3s ease;
     }
     
     .setting-item:hover {
-        background: #f3f4ff;
+        background: var(--bg-secondary, #f3f4ff);
         transform: translateX(5px);
     }
     
     .setting-label {
         font-weight: 500;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         display: flex;
         align-items: center;
         gap: 0.5rem;
     }
     
     .setting-label code {
-        background: #e8e9ff;
+        background: var(--border-color, #e8e9ff);
         padding: 0.25rem 0.5rem;
         border-radius: 4px;
         font-size: 0.875rem;
-        color: #667eea;
+        color: var(--accent-color, #667eea);
     }
     
     .setting-control {
@@ -307,7 +307,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        background: #e2e8f0;
+        background: var(--border-light, #e2e8f0);
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         border-radius: 24px;
     }
@@ -319,14 +319,14 @@
         width: 18px;
         left: 3px;
         bottom: 3px;
-        background: white;
+        background: var(--bg-primary, white);
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         border-radius: 50%;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.15);
+        box-shadow: var(--shadow-sm, 0 2px 4px rgba(0,0,0,0.15));
     }
     
     input:checked + .slider {
-        background: #667eea;
+        background: var(--accent-color, #667eea);
     }
     
     input:checked + .slider:before {
@@ -336,18 +336,18 @@
     .switch-label {
         font-size: 0.75rem;
         font-weight: 500;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         text-transform: uppercase;
         letter-spacing: 0.025em;
         user-select: none;
     }
     
     .switch-label.on {
-        color: #667eea;
+        color: var(--accent-color, #667eea);
     }
     
     .switch-label.off {
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
     }
     
     .action-buttons {
@@ -355,7 +355,7 @@
         gap: 1rem;
         margin-top: 2rem;
         padding-top: 2rem;
-        border-top: 1px solid #e8e9ff;
+        border-top: 1px solid var(--border-color, #e8e9ff);
     }
     
     .btn {
@@ -374,22 +374,22 @@
     }
     
     .btn-primary {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: linear-gradient(135deg, var(--accent-color, #667eea) 0%, var(--accent-dark, #764ba2) 100%);
         color: white;
     }
     
     .btn-primary:hover {
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+        box-shadow: 0 4px 12px var(--accent-shadow-light, rgba(102, 126, 234, 0.3));
     }
     
     .btn-restart {
-        background: #10b981;
+        background: var(--success-color, #10b981);
         color: white;
     }
     
     .btn-restart:hover {
-        background: #059669;
+        background: var(--success-hover, #059669);
         transform: translateY(-2px);
         box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
     }
@@ -405,15 +405,15 @@
     }
     
     .alert-danger {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 1px solid #fecaca;
+        background: var(--danger-light, #fee2e2);
+        color: var(--danger-text, #991b1b);
+        border: 1px solid var(--danger-border, #fecaca);
     }
     
     .alert-success {
-        background: #d1fae5;
-        color: #065f46;
-        border: 1px solid #a7f3d0;
+        background: var(--success-light, #d1fae5);
+        color: var(--success-text, #065f46);
+        border: 1px solid var(--success-border, #a7f3d0);
     }
     
     .alert-icon {
@@ -421,7 +421,7 @@
     }
     
     .config-editor {
-        background: #1e293b;
+        background: var(--text-primary, #1e293b);
         border-radius: 12px;
         padding: 1.5rem;
         position: relative;
@@ -433,11 +433,11 @@
         justify-content: space-between;
         margin-bottom: 1rem;
         padding-bottom: 1rem;
-        border-bottom: 1px solid #334155;
+        border-bottom: 1px solid var(--text-secondary, #334155);
     }
     
     .editor-title {
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
         font-size: 0.875rem;
         font-weight: 500;
         display: flex;
@@ -451,8 +451,8 @@
     }
     
     .editor-btn {
-        background: #334155;
-        color: #94a3b8;
+        background: var(--text-secondary, #334155);
+        color: var(--text-muted, #94a3b8);
         border: none;
         padding: 0.375rem 0.75rem;
         border-radius: 6px;
@@ -462,14 +462,14 @@
     }
     
     .editor-btn:hover {
-        background: #475569;
+        background: var(--text-primary, #475569);
         color: white;
     }
     
     .config-textarea {
         width: 100%;
         background: transparent;
-        color: #10b981;
+        color: var(--success-color, #10b981);
         font-family: 'Monaco', 'Consolas', monospace;
         font-size: 0.875rem;
         border: none;
@@ -482,8 +482,8 @@
     .loading-spinner {
         width: 20px;
         height: 20px;
-        border: 2px solid #f3f3f3;
-        border-top: 2px solid #667eea;
+        border: 2px solid var(--border-light, #f3f3f3);
+        border-top: 2px solid var(--accent-color, #667eea);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         display: inline-block;
diff --git a/serverLogs/templates/serverLogs/serverMail.html b/serverLogs/templates/serverLogs/serverMail.html
index 0757bd67b..c16119ab1 100644
--- a/serverLogs/templates/serverLogs/serverMail.html
+++ b/serverLogs/templates/serverLogs/serverMail.html
@@ -14,7 +14,7 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
+        background: linear-gradient(135deg, var(--accent-color, #667eea) 0%, var(--accent-dark, #764ba2) 100%);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
         position: relative;
@@ -78,13 +78,13 @@
     .mail-icon {
         width: 60px;
         height: 60px;
-        background: var(--accent-bg, rgba(255, 255, 255, 0.2));
+        background: rgba(255, 255, 255, 0.2);
         backdrop-filter: blur(10px);
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: var(--shadow-light, 0 4px 12px rgba(0,0,0,0.1));
+        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
     }
 
     .page-subtitle {
@@ -99,7 +99,7 @@
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
-        background: var(--accent-bg, rgba(255, 255, 255, 0.2));
+        background: rgba(255, 255, 255, 0.2);
         backdrop-filter: blur(10px);
         padding: 0.5rem 1.5rem;
         border-radius: 20px;
@@ -110,23 +110,23 @@
     }
 
     .docs-link:hover {
-        background: var(--accent-hover, rgba(255, 255, 255, 0.3));
+        background: rgba(255, 255, 255, 0.3);
         transform: translateY(-2px);
         color: white;
         text-decoration: none;
     }
 
     .mail-config-panel {
-        background: var(--bg-secondary, white);
+        background: var(--bg-primary, white);
         border-radius: 16px;
-        box-shadow: var(--shadow-medium, 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08));
-        border: 1px solid var(--border-light, #e8e9ff);
+        box-shadow: 0 1px 3px var(--shadow-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
         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%);
+        background: linear-gradient(135deg, var(--accent-color, #667eea) 0%, var(--accent-dark, #764ba2) 100%);
         color: white;
         padding: 1.5rem 2rem;
         display: flex;
@@ -166,14 +166,14 @@
 
     .form-label {
         font-weight: 500;
-        color: var(--text-secondary, #64748b);
+        color: var(--text-muted, #64748b);
         font-size: 0.875rem;
         text-align: right;
     }
 
     .form-control {
         padding: 0.75rem 1rem;
-        border: 1px solid var(--border-light, #e8e9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
@@ -186,7 +186,7 @@
     .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));
+        box-shadow: 0 0 0 3px var(--accent-shadow-light, rgba(102, 126, 234, 0.1));
     }
 
     .select-control {
@@ -230,19 +230,19 @@
     }
 
     .mailer-type-selector {
-        background: var(--bg-light, #f8f9ff);
+        background: var(--bg-secondary, #f8f9ff);
         border-radius: 12px;
         padding: 1.5rem;
         margin-bottom: 2rem;
-        border: 1px solid var(--border-light, #e8e9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
     }
 
     .smtp-fields {
-        background: var(--bg-light, #fafbff);
+        background: var(--bg-secondary, #fafbff);
         border-radius: 12px;
         padding: 1.5rem;
         margin-bottom: 2rem;
-        border: 1px solid var(--border-light, #e8e9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         animation: fadeInUp 0.3s ease-out;
     }
 
@@ -258,7 +258,7 @@
     .section-icon {
         width: 32px;
         height: 32px;
-        background: var(--accent-bg, #f3e8ff);
+        background: var(--accent-light, #f3e8ff);
         border-radius: 8px;
         display: flex;
         align-items: center;
@@ -295,19 +295,19 @@
     }
 
     .btn-primary {
-        background: linear-gradient(135deg, var(--log-gradient-start, #667eea) 0%, var(--log-gradient-end, #764ba2) 100%);
+        background: linear-gradient(135deg, var(--accent-color, #667eea) 0%, var(--accent-dark, #764ba2) 100%);
         color: white;
     }
 
     .btn-primary:hover {
         transform: translateY(-2px);
-        box-shadow: var(--accent-shadow, 0 4px 12px rgba(102, 126, 234, 0.3));
+        box-shadow: 0 4px 12px var(--accent-shadow, rgba(102, 126, 234, 0.3));
     }
 
     .loading-spinner {
         width: 20px;
         height: 20px;
-        border: 2px solid var(--border-light, #f3f3f3);
+        border: 2px solid var(--border-color, #f3f3f3);
         border-top: 2px solid var(--accent-color, #667eea);
         border-radius: 50%;
         animation: spin 1s linear infinite;
@@ -320,8 +320,8 @@
     }
 
     .info-box {
-        background: var(--info-bg, #eff6ff);
-        border: 1px solid var(--info-border, #bfdbfe);
+        background: var(--info-light, #eff6ff);
+        border: 1px solid var(--info-border-color, #bfdbfe);
         border-radius: 8px;
         padding: 1rem 1.5rem;
         margin-bottom: 1.5rem;
@@ -338,7 +338,7 @@
 
     .info-text {
         font-size: 0.875rem;
-        color: var(--info-text, #1e40af);
+        color: var(--info-text-color, #1e40af);
         line-height: 1.6;
     }
 
@@ -350,8 +350,8 @@
         font-size: 0.875rem;
         padding: 0.375rem 0.75rem;
         border-radius: 20px;
-        background: var(--bg-light, #f8f9ff);
-        border: 1px solid var(--border-light, #e8e9ff);
+        background: var(--bg-secondary, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         color: var(--text-primary, #1e293b);
     }