diff --git a/frontend/src/styles/CampaignModal.module.css b/frontend/src/styles/CampaignModal.module.css
index 0b12149..3cb8389 100644
--- a/frontend/src/styles/CampaignModal.module.css
+++ b/frontend/src/styles/CampaignModal.module.css
@@ -12,7 +12,7 @@
 }
 .label {
   font-weight: 500;
-  color: #374151;
+  color: var(--text-color);
   font-size: 15px;
   display: flex;
   flex-direction: column;
@@ -22,12 +22,51 @@
   margin-top: 4px;
   padding: 10px 12px;
   border-radius: 8px;
-  border: 1.5px solid #c7d2fe;
+  border: 1.5px solid var(--border-color);
   font-size: 16px;
   outline: none;
-  background: #f8fafc;
+  background: var(--card-background);
+  color: var(--text-color);
   transition: border 0.2s;
 }
+.input:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+.select {
+  margin-top: 4px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1.5px solid var(--border-color);
+  font-size: 16px;
+  outline: none;
+  background: var(--card-background);
+  color: var(--text-color);
+  transition: border 0.2s;
+  cursor: pointer;
+}
+.select:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+.textarea {
+  margin-top: 4px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1.5px solid var(--border-color);
+  font-size: 16px;
+  outline: none;
+  background: var(--card-background);
+  color: var(--text-color);
+  transition: border 0.2s;
+  resize: vertical;
+  min-height: 120px;
+  font-family: inherit;
+}
+.textarea:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
 .actions {
   display: flex;
   gap: 12px;
@@ -46,14 +85,20 @@
   box-shadow: 0 2px 8px 0 rgba(99,102,241,0.10);
   transition: background 0.2s;
 }
+.saveBtn:hover {
+  background: linear-gradient(90deg, #4f46e5 0%, #0891b2 100%);
+}
 .cancelBtn {
-  background: #f3f4f6;
+  background: var(--hover-background);
   color: #6366f1;
-  border: none;
+  border: 1px solid var(--border-color);
   border-radius: 8px;
   padding: 10px 18px;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.2s;
+}
+.cancelBtn:hover {
+  background: var(--border-color);
 } 
\ No newline at end of file
diff --git a/frontend/src/styles/GroupModal.module.css b/frontend/src/styles/GroupModal.module.css
index 0b12149..482d08d 100644
--- a/frontend/src/styles/GroupModal.module.css
+++ b/frontend/src/styles/GroupModal.module.css
@@ -12,7 +12,7 @@
 }
 .label {
   font-weight: 500;
-  color: #374151;
+  color: var(--text-color);
   font-size: 15px;
   display: flex;
   flex-direction: column;
@@ -22,12 +22,17 @@
   margin-top: 4px;
   padding: 10px 12px;
   border-radius: 8px;
-  border: 1.5px solid #c7d2fe;
+  border: 1.5px solid var(--border-color);
   font-size: 16px;
   outline: none;
-  background: #f8fafc;
+  background: var(--card-background);
+  color: var(--text-color);
   transition: border 0.2s;
 }
+.input:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
 .actions {
   display: flex;
   gap: 12px;
@@ -46,14 +51,20 @@
   box-shadow: 0 2px 8px 0 rgba(99,102,241,0.10);
   transition: background 0.2s;
 }
+.saveBtn:hover {
+  background: linear-gradient(90deg, #4f46e5 0%, #0891b2 100%);
+}
 .cancelBtn {
-  background: #f3f4f6;
+  background: var(--hover-background);
   color: #6366f1;
-  border: none;
+  border: 1px solid var(--border-color);
   border-radius: 8px;
   padding: 10px 18px;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.2s;
+}
+.cancelBtn:hover {
+  background: var(--border-color);
 } 
\ No newline at end of file
diff --git a/frontend/src/styles/Modal.module.css b/frontend/src/styles/Modal.module.css
index dfa8f7e..1f38a57 100644
--- a/frontend/src/styles/Modal.module.css
+++ b/frontend/src/styles/Modal.module.css
@@ -12,17 +12,22 @@
   padding: 16px;
 }
 
+[data-theme="dark"] .overlay {
+  background: rgba(0,0,0,0.5);
+}
+
 .modal {
-  background: #fff;
+  background: var(--card-background);
   border-radius: 14px;
   padding: 32px 28px 24px 28px;
   min-width: 340px;
   max-width: 90vw;
   max-height: 90vh;
-  box-shadow: 0 12px 48px 0 rgba(31,38,135,0.22);
+  box-shadow: 0 12px 48px 0 var(--shadow-color);
   position: relative;
   animation: modalIn 0.18s cubic-bezier(.4,1.3,.6,1);
   overflow-y: auto;
+  border: 1px solid var(--border-color);
 }
 
 .closeBtn {
diff --git a/frontend/src/styles/MultiSelect.module.css b/frontend/src/styles/MultiSelect.module.css
index 432c562..37bf6f9 100644
--- a/frontend/src/styles/MultiSelect.module.css
+++ b/frontend/src/styles/MultiSelect.module.css
@@ -7,23 +7,25 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: #f8fafc;
-  border: 1.5px solid #c7d2fe;
+  background: var(--card-background);
+  border: 1.5px solid var(--border-color);
   border-radius: 8px;
   padding: 10px 12px;
   font-size: 16px;
   cursor: pointer;
   transition: border 0.2s;
   min-height: 40px;
+  color: var(--text-color);
 }
 
 .control:focus, .control:active {
   border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
 }
 
 .disabled {
-  background: #f3f4f6;
-  color: #b3b3b3;
+  background: var(--hover-background);
+  color: var(--secondary-text);
   cursor: not-allowed;
 }
 
@@ -35,7 +37,7 @@
 }
 
 .placeholder {
-  color: #9ca3af;
+  color: var(--secondary-text);
 }
 
 .arrow {
@@ -49,10 +51,10 @@
   left: 0;
   right: 0;
   top: calc(100% + 4px);
-  background: #fff;
-  border: 1.5px solid #c7d2fe;
+  background: var(--card-background);
+  border: 1.5px solid var(--border-color);
   border-radius: 8px;
-  box-shadow: 0 4px 24px 0 rgba(99,102,241,0.10);
+  box-shadow: 0 4px 24px 0 var(--shadow-color);
   z-index: 10;
   max-height: 220px;
   overflow-y: auto;
@@ -66,16 +68,16 @@
   align-items: center;
   gap: 8px;
   font-size: 15px;
-  color: #374151;
+  color: var(--text-color);
   transition: background 0.15s;
 }
 
 .option:hover {
-  background: #f3f4f6;
+  background: var(--hover-background);
 }
 
 .selected {
-  background: #e0e7ff;
+  background: var(--hover-background);
   color: #6366f1;
 }
 
diff --git a/frontend/src/styles/SmtpModal.module.css b/frontend/src/styles/SmtpModal.module.css
index 0b12149..482d08d 100644
--- a/frontend/src/styles/SmtpModal.module.css
+++ b/frontend/src/styles/SmtpModal.module.css
@@ -12,7 +12,7 @@
 }
 .label {
   font-weight: 500;
-  color: #374151;
+  color: var(--text-color);
   font-size: 15px;
   display: flex;
   flex-direction: column;
@@ -22,12 +22,17 @@
   margin-top: 4px;
   padding: 10px 12px;
   border-radius: 8px;
-  border: 1.5px solid #c7d2fe;
+  border: 1.5px solid var(--border-color);
   font-size: 16px;
   outline: none;
-  background: #f8fafc;
+  background: var(--card-background);
+  color: var(--text-color);
   transition: border 0.2s;
 }
+.input:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
 .actions {
   display: flex;
   gap: 12px;
@@ -46,14 +51,20 @@
   box-shadow: 0 2px 8px 0 rgba(99,102,241,0.10);
   transition: background 0.2s;
 }
+.saveBtn:hover {
+  background: linear-gradient(90deg, #4f46e5 0%, #0891b2 100%);
+}
 .cancelBtn {
-  background: #f3f4f6;
+  background: var(--hover-background);
   color: #6366f1;
-  border: none;
+  border: 1px solid var(--border-color);
   border-radius: 8px;
   padding: 10px 18px;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.2s;
+}
+.cancelBtn:hover {
+  background: var(--border-color);
 } 
\ No newline at end of file
diff --git a/frontend/src/styles/SubscriberModal.module.css b/frontend/src/styles/SubscriberModal.module.css
index 0b12149..482d08d 100644
--- a/frontend/src/styles/SubscriberModal.module.css
+++ b/frontend/src/styles/SubscriberModal.module.css
@@ -12,7 +12,7 @@
 }
 .label {
   font-weight: 500;
-  color: #374151;
+  color: var(--text-color);
   font-size: 15px;
   display: flex;
   flex-direction: column;
@@ -22,12 +22,17 @@
   margin-top: 4px;
   padding: 10px 12px;
   border-radius: 8px;
-  border: 1.5px solid #c7d2fe;
+  border: 1.5px solid var(--border-color);
   font-size: 16px;
   outline: none;
-  background: #f8fafc;
+  background: var(--card-background);
+  color: var(--text-color);
   transition: border 0.2s;
 }
+.input:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
 .actions {
   display: flex;
   gap: 12px;
@@ -46,14 +51,20 @@
   box-shadow: 0 2px 8px 0 rgba(99,102,241,0.10);
   transition: background 0.2s;
 }
+.saveBtn:hover {
+  background: linear-gradient(90deg, #4f46e5 0%, #0891b2 100%);
+}
 .cancelBtn {
-  background: #f3f4f6;
+  background: var(--hover-background);
   color: #6366f1;
-  border: none;
+  border: 1px solid var(--border-color);
   border-radius: 8px;
   padding: 10px 18px;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.2s;
+}
+.cancelBtn:hover {
+  background: var(--border-color);
 } 
\ No newline at end of file
diff --git a/frontend/src/styles/TemplateModal.module.css b/frontend/src/styles/TemplateModal.module.css
index 0b12149..44a1c93 100644
--- a/frontend/src/styles/TemplateModal.module.css
+++ b/frontend/src/styles/TemplateModal.module.css
@@ -12,7 +12,7 @@
 }
 .label {
   font-weight: 500;
-  color: #374151;
+  color: var(--text-color);
   font-size: 15px;
   display: flex;
   flex-direction: column;
@@ -22,12 +22,35 @@
   margin-top: 4px;
   padding: 10px 12px;
   border-radius: 8px;
-  border: 1.5px solid #c7d2fe;
+  border: 1.5px solid var(--border-color);
   font-size: 16px;
   outline: none;
-  background: #f8fafc;
+  background: var(--card-background);
+  color: var(--text-color);
   transition: border 0.2s;
 }
+.input:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+.textarea {
+  margin-top: 4px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1.5px solid var(--border-color);
+  font-size: 16px;
+  outline: none;
+  background: var(--card-background);
+  color: var(--text-color);
+  transition: border 0.2s;
+  resize: vertical;
+  min-height: 120px;
+  font-family: inherit;
+}
+.textarea:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
 .actions {
   display: flex;
   gap: 12px;
@@ -46,14 +69,20 @@
   box-shadow: 0 2px 8px 0 rgba(99,102,241,0.10);
   transition: background 0.2s;
 }
+.saveBtn:hover {
+  background: linear-gradient(90deg, #4f46e5 0%, #0891b2 100%);
+}
 .cancelBtn {
-  background: #f3f4f6;
+  background: var(--hover-background);
   color: #6366f1;
-  border: none;
+  border: 1px solid var(--border-color);
   border-radius: 8px;
   padding: 10px 18px;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.2s;
+}
+.cancelBtn:hover {
+  background: var(--border-color);
 } 
\ No newline at end of file
diff --git a/frontend/src/styles/UnsubModal.module.css b/frontend/src/styles/UnsubModal.module.css
index 0b12149..482d08d 100644
--- a/frontend/src/styles/UnsubModal.module.css
+++ b/frontend/src/styles/UnsubModal.module.css
@@ -12,7 +12,7 @@
 }
 .label {
   font-weight: 500;
-  color: #374151;
+  color: var(--text-color);
   font-size: 15px;
   display: flex;
   flex-direction: column;
@@ -22,12 +22,17 @@
   margin-top: 4px;
   padding: 10px 12px;
   border-radius: 8px;
-  border: 1.5px solid #c7d2fe;
+  border: 1.5px solid var(--border-color);
   font-size: 16px;
   outline: none;
-  background: #f8fafc;
+  background: var(--card-background);
+  color: var(--text-color);
   transition: border 0.2s;
 }
+.input:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
 .actions {
   display: flex;
   gap: 12px;
@@ -46,14 +51,20 @@
   box-shadow: 0 2px 8px 0 rgba(99,102,241,0.10);
   transition: background 0.2s;
 }
+.saveBtn:hover {
+  background: linear-gradient(90deg, #4f46e5 0%, #0891b2 100%);
+}
 .cancelBtn {
-  background: #f3f4f6;
+  background: var(--hover-background);
   color: #6366f1;
-  border: none;
+  border: 1px solid var(--border-color);
   border-radius: 8px;
   padding: 10px 18px;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.2s;
+}
+.cancelBtn:hover {
+  background: var(--border-color);
 } 
\ No newline at end of file
diff --git a/frontend/src/styles/UserModal.module.css b/frontend/src/styles/UserModal.module.css
index 0b12149..482d08d 100644
--- a/frontend/src/styles/UserModal.module.css
+++ b/frontend/src/styles/UserModal.module.css
@@ -12,7 +12,7 @@
 }
 .label {
   font-weight: 500;
-  color: #374151;
+  color: var(--text-color);
   font-size: 15px;
   display: flex;
   flex-direction: column;
@@ -22,12 +22,17 @@
   margin-top: 4px;
   padding: 10px 12px;
   border-radius: 8px;
-  border: 1.5px solid #c7d2fe;
+  border: 1.5px solid var(--border-color);
   font-size: 16px;
   outline: none;
-  background: #f8fafc;
+  background: var(--card-background);
+  color: var(--text-color);
   transition: border 0.2s;
 }
+.input:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
 .actions {
   display: flex;
   gap: 12px;
@@ -46,14 +51,20 @@
   box-shadow: 0 2px 8px 0 rgba(99,102,241,0.10);
   transition: background 0.2s;
 }
+.saveBtn:hover {
+  background: linear-gradient(90deg, #4f46e5 0%, #0891b2 100%);
+}
 .cancelBtn {
-  background: #f3f4f6;
+  background: var(--hover-background);
   color: #6366f1;
-  border: none;
+  border: 1px solid var(--border-color);
   border-radius: 8px;
   padding: 10px 18px;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.2s;
+}
+.cancelBtn:hover {
+  background: var(--border-color);
 } 
\ No newline at end of file