diff --git a/src/app/components/collaborator-item/collaborator-item.component.css b/src/app/components/collaborator-item/collaborator-item.component.css
index 5674f2e..565ccdb 100644
--- a/src/app/components/collaborator-item/collaborator-item.component.css
+++ b/src/app/components/collaborator-item/collaborator-item.component.css
@@ -1,45 +1,45 @@
 .collaborator-item {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 14px;
-  border-radius: 10px;
-  border: 1px solid #e5e7eb;
-  background-color: #f9fafb;
+  gap: 0.75rem;
+  padding: 0.875rem;
+  border-radius: 0.625rem;
+  background-color: var(--secondary-color);
+  box-shadow: 0 0.125rem 0.5rem var(--shadow-color);
 }
 
 .collaborator-avatar {
-  width: 36px;
-  height: 36px;
+  width: 2.25rem;
+  height: 2.25rem;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background-color: #e0f2fe;
-  color: #0369a1;
+  background-color: var(--avatar-bg-color);
+  color: var(--primary-color);
   font-weight: 700;
 }
 
 .collaborator-info h4 {
   margin: 0;
-  font-size: 16px;
-  color: #111827;
+  font-size: 1rem;
+  color: var(--text-color);
 }
 
 .collaborator-info p {
-  margin: 2px 0 0 0;
-  font-size: 13px;
-  color: #6b7280;
+  margin: 0.125rem 0 0 0;
+  font-size: 0.8125rem;
+  color: var(--text-color);
 }
 
 .btn-remove {
   margin-left: auto;
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  border: 1px solid #fecaca;
-  background: #ffffff;
-  color: #b91c1c;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.5rem;
+  border: 0.0625rem solid var(--danger-border-color);
+  background: var(--secondary-color);
+  color: var(--danger-text-color);
   font-weight: 700;
   cursor: pointer;
   transition:
@@ -48,6 +48,33 @@
 }
 
 .btn-remove:hover {
-  background-color: #fee2e2;
-  border-color: #fca5a5;
+  background-color: var(--danger-bg-color-hover);
+  border-color: var(--danger-color-hover);
+  color: var(--danger-text-color);
+}
+
+/* Mobile Responsive */
+@media (max-width: 48rem) {
+  .collaborator-item {
+    padding: 0.75rem;
+  }
+
+  .collaborator-info h4 {
+    font-size: 0.9375rem;
+  }
+
+  .collaborator-info p {
+    font-size: 0.75rem;
+  }
+}
+
+@media (max-width: 30rem) {
+  .collaborator-item {
+    gap: 0.5rem;
+  }
+
+  .collaborator-avatar {
+    width: 2rem;
+    height: 2rem;
+  }
 }
diff --git a/src/app/components/footer/footer.component.css b/src/app/components/footer/footer.component.css
index 765a288..dfb2be2 100644
--- a/src/app/components/footer/footer.component.css
+++ b/src/app/components/footer/footer.component.css
@@ -1,12 +1,34 @@
 .footer {
-  padding: 24px 16px;
+  padding: 1.5rem 1rem;
   text-align: center;
-  color: #6b7280;
-  background-color: #f5f7fa;
-  border-top: 1px solid #e5e7eb;
+  color: var(--text-color);
+  background-color: var(--secondary-color);
+  border-top: 0.0625rem solid var(--shadow-color);
 }
 
 .footer p {
   margin: 0;
-  font-size: 14px;
+  font-size: 0.875rem;
+}
+
+/* Mobile Responsive */
+@media (max-width: 48rem) {
+  .footer {
+    padding: 1.25rem 1rem;
+    font-size: 0.8125rem;
+  }
+
+  .footer p {
+    font-size: 0.8125rem;
+  }
+}
+
+@media (max-width: 30rem) {
+  .footer {
+    padding: 1rem 0.75rem;
+  }
+
+  .footer p {
+    font-size: 0.75rem;
+  }
 }
diff --git a/src/app/components/navbar/navbar.component.css b/src/app/components/navbar/navbar.component.css
index b9dd6aa..5fded99 100644
--- a/src/app/components/navbar/navbar.component.css
+++ b/src/app/components/navbar/navbar.component.css
@@ -1,7 +1,7 @@
 .header {
-  background: white;
-  padding: 20px 40px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  background: var(--secondary-color);
+  padding: 1.25rem 2.5rem;
+  box-shadow: 0 0.125rem 0.25rem var(--shadow-color);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -9,8 +9,8 @@
 
 .header h1 {
   margin: 0;
-  font-size: 24px;
-  color: #667eea;
+  font-size: 1.5rem;
+  color: var(--primary-color);
   font-weight: 700;
 }
 
@@ -26,25 +26,65 @@
 .user-info {
   display: flex;
   align-items: center;
-  gap: 15px;
+  gap: 0.9375rem;
 }
 
 .username {
   font-weight: 500;
-  color: #333;
+  color: var(--text-color);
 }
 
 .btn-logout {
-  padding: 8px 20px;
-  background-color: #667eea;
-  color: white;
+  padding: 0.5rem 1.25rem;
+  background-color: var(--primary-color);
+  color: var(--secondary-color);
   border: none;
-  border-radius: 6px;
+  border-radius: 0.375rem;
   cursor: pointer;
   font-weight: 500;
   transition: background-color 0.3s;
 }
 
 .btn-logout:hover {
-  background-color: #5568d3;
+  background-color: var(--primary-color);
+}
+
+/* Mobile Responsive */
+@media (max-width: 48rem) {
+  .header {
+    padding: 1rem 1.5rem;
+    flex-direction: column;
+    gap: 1rem;
+    text-align: center;
+  }
+
+  .header h1 {
+    font-size: 1.25rem;
+  }
+
+  .user-info {
+    flex-direction: row;
+    justify-content: center;
+    gap: 0.75rem;
+    width: 100%;
+  }
+
+  .username {
+    font-size: 0.875rem;
+  }
+
+  .btn-logout {
+    width: fit-content;
+    padding: 0.625rem 1rem;
+  }
+}
+
+@media (max-width: 30rem) {
+  .header {
+    padding: 0.75rem 1rem;
+  }
+
+  .header h1 {
+    font-size: 1.125rem;
+  }
 }
diff --git a/src/app/components/project-item/project-item.component.css b/src/app/components/project-item/project-item.component.css
index 1642e21..d4da149 100644
--- a/src/app/components/project-item/project-item.component.css
+++ b/src/app/components/project-item/project-item.component.css
@@ -1,11 +1,11 @@
 .project-item {
-  background: white;
-  border-radius: 8px;
-  padding: 16px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  background: var(--secondary-color);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  box-shadow: 0 0.125rem 0.25rem var(--shadow-color);
   cursor: pointer;
   transition: all 0.3s ease;
-  border-left: 4px solid #667eea;
+  border-left: 0.25rem solid var(--primary-color);
 }
 
 .project-item.is-disabled {
@@ -14,8 +14,8 @@
 }
 
 .project-item:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  transform: translateY(-2px);
+  box-shadow: 0 0.25rem 0.75rem var(--shadow-color);
+  transform: translateY(-0.125rem);
 }
 
 /* Header */
@@ -23,20 +23,20 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 12px;
+  margin-bottom: 0.75rem;
 }
 
 .project-title {
   margin: 0;
-  font-size: 18px;
+  font-size: 1.375rem;
   font-weight: 600;
-  color: #2c3e50;
+  color: var(--text-color);
   flex: 1;
 }
 
 .project-actions {
   display: flex;
-  gap: 8px;
+  gap: 0.5rem;
   opacity: 0;
   transition: opacity 0.3s;
 }
@@ -49,25 +49,25 @@
   background: none;
   border: none;
   cursor: pointer;
-  font-size: 16px;
-  padding: 4px;
-  border-radius: 4px;
+  font-size: 1rem;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
   transition: background-color 0.2s;
 }
 
 .btn-icon:hover {
-  background-color: #f5f7fa;
+  background-color: var(--background-color);
 }
 
 .btn-delete:hover {
-  background-color: #fee;
+  background-color: var(--danger-bg-color-hover);
 }
 
 /* Description */
 .project-description {
-  margin: 0 0 12px 0;
-  color: #7f8c8d;
-  font-size: 14px;
+  margin: 0 0 0.75rem 0;
+  color: var(--text-color);
+  font-size: 1rem;
   line-height: 1.5;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -81,9 +81,9 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: .5rem;
-  font-size: 13px;
-  color: #4b5563;
+  gap: 0.5rem;
+  font-size: 0.9375rem;
+  color: var(--text-color);
   width: fit-content;
 }
 
@@ -91,28 +91,71 @@
   text-transform: uppercase;
   letter-spacing: 0.04em;
   font-weight: 600;
-  color: #6b7280;
+  color: var(--text-color);
 }
 
 .completion-value {
   font-weight: 700;
-  color: #10b981;
+  color: var(--add-color);
 }
 
 /* Footer */
 .project-footer {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 0.5rem;
   align-items: center;
 }
 
 /* Project ID */
 .project-id {
-  padding: 4px 12px;
-  border-radius: 12px;
-  font-size: 12px;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.75rem;
+  font-size: 0.75rem;
   font-weight: 600;
-  background-color: #e8f4f8;
-  color: #2980b9;
+  background-color: var(--secondary-color);
+  color: var(--primary-color);
+}
+
+/* Mobile Responsive */
+@media (max-width: 48rem) {
+  .project-item {
+    padding: 0.875rem;
+  }
+
+  .project-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  .project-title {
+    font-size: 1.25rem;
+  }
+
+  .project-description {
+    font-size: 0.9375rem;
+  }
+
+  .project-stats {
+    flex-wrap: wrap;
+  }
+
+  .stat {
+    font-size: 0.875rem;
+  }
+}
+
+@media (max-width: 30rem) {
+  .project-item {
+    padding: 0.75rem;
+  }
+
+  .project-title {
+    font-size: 1.125rem;
+  }
+
+  .project-id {
+    font-size: 0.75rem;
+  }
 }
diff --git a/src/app/components/task-item/task-item.component.css b/src/app/components/task-item/task-item.component.css
index a44e2bd..75ae0d7 100644
--- a/src/app/components/task-item/task-item.component.css
+++ b/src/app/components/task-item/task-item.component.css
@@ -1,13 +1,13 @@
 .task-item {
-  border: 1px solid #e5e7eb;
-  border-radius: 10px;
-  padding: 16px;
+  border: 0.0625rem solid var(--secondary-color);
+  border-radius: 0.625rem;
+  padding: 1rem;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
-  background-color: #f9fafb;
+  gap: 1rem;
+  background-color: var(--secondary-color);
 }
 
 .task-meta {
@@ -15,36 +15,36 @@
   flex-direction: row;
   align-items: center;
   flex-wrap: wrap;
-  gap: 6px;
+  gap: 0.375rem;
 }
 
 .status-label {
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: 600;
-  color: #4b5563;
+  color: var(--text-color);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
 
 .status-select {
-  padding: 6px 10px;
-  border-radius: 8px;
-  border: 1px solid #e5e7eb;
-  background-color: #ffffff;
-  font-size: 12px;
-  color: #374151;
+  padding: 0.375rem 0.625rem;
+  border-radius: 0.5rem;
+  border: 0.0625rem solid var(--secondary-color);
+  background-color: var(--secondary-color);
+  font-size: 0.75rem;
+  color: var(--text-color);
   width: fit-content;
-  height: 32px;
+  height: 2rem;
   text-align: center;
 }
 
 .btn-remove {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  border: 1px solid #fecaca;
-  background: #ffffff;
-  color: #b91c1c;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.5rem;
+  border: 0.0625rem solid var(--danger-border-color);
+  background: var(--secondary-color);
+  color: var(--danger-text-color);
   font-weight: 700;
   cursor: pointer;
   transition:
@@ -53,19 +53,20 @@
 }
 
 .btn-remove:hover {
-  background-color: #fee2e2;
-  border-color: #fca5a5;
+  background-color: var(--danger-bg-color-hover);
+  border-color: var(--danger-color-hover);
+  color: var(--danger-text-color);
 }
 
 .btn-edit {
-  height: 32px;
-  padding: 0 12px;
-  border-radius: 8px;
-  border: 1px solid #cbd5f0;
-  background: #ffffff;
-  color: #334155;
+  height: 2rem;
+  padding: 0 0.75rem;
+  border-radius: 0.5rem;
+  border: 0.0625rem solid var(--secondary-color);
+  background: var(--secondary-color);
+  color: var(--text-color);
   font-weight: 600;
-  font-size: 12px;
+  font-size: 0.75rem;
   cursor: pointer;
   transition:
     background-color 0.2s ease,
@@ -73,19 +74,19 @@
 }
 
 .btn-edit:hover {
-  background-color: #f1f5f9;
-  border-color: #94a3b8;
+  background-color: var(--background-color);
+  border-color: var(--primary-color);
 }
 
 .task-info h4 {
-  margin: 0 0 6px 0;
-  color: #111827;
+  margin: 0 0 0.375rem 0;
+  color: var(--text-color);
 }
 
 .task-info p {
   margin: 0;
-  color: #6b7280;
-  font-size: 14px;
+  color: var(--text-color);
+  font-size: 0.875rem;
 }
 
 .task-info {
@@ -94,35 +95,75 @@
 
 .status {
   align-self: flex-start;
-  padding: 4px 10px;
+  padding: 0.25rem 0.625rem;
   border-radius: 999px;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.03em;
 }
 
 .status-pending {
-  background-color: #fde68a;
-  color: #92400e;
+  background-color: var(--secondary-color);
+  color: var(--text-color);
 }
 
 .status-in_progress {
-  background-color: #bfdbfe;
-  color: #1d4ed8;
+  background-color: var(--primary-color);
+  color: var(--secondary-color);
 }
 
 .status-completed {
-  background-color: #bbf7d0;
-  color: #15803d;
+  background-color: var(--add-color);
+  color: var(--secondary-color);
 }
 
 .status-stashed {
-  background-color: #e5e7eb;
-  color: #374151;
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 
 .status-failed {
-  background-color: #fecaca;
-  color: #b91c1c;
+  background-color: var(--danger-bg-color);
+  color: var(--danger-text-color);
+}
+
+/* Mobile Responsive */
+@media (max-width: 48rem) {
+  .task-item {
+    padding: 0.875rem;
+  }
+
+  .task-header h3 {
+    font-size: 0.9375rem;
+  }
+
+  .task-description {
+    font-size: 0.8125rem;
+  }
+
+  .task-footer {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  .task-actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+
+@media (max-width: 30rem) {
+  .task-item {
+    padding: 0.75rem;
+  }
+
+  .task-header h3 {
+    font-size: 0.875rem;
+  }
+
+  .status-badge {
+    font-size: 0.625rem;
+  }
 }
diff --git a/src/app/pages/collaborator-add/collaborator-add.component.css b/src/app/pages/collaborator-add/collaborator-add.component.css
index 4989cf9..d9a0e55 100644
--- a/src/app/pages/collaborator-add/collaborator-add.component.css
+++ b/src/app/pages/collaborator-add/collaborator-add.component.css
@@ -1,7 +1,7 @@
 .collaborator-add {
   min-height: 100vh;
-  background-color: #f5f7fa;
-  padding: 40px;
+  background-color: var(--background-color);
+  padding: 2.5rem;
   display: flex;
   justify-content: center;
   align-items: flex-start;
@@ -9,53 +9,53 @@
 
 .card {
   width: 100%;
-  max-width: 520px;
+  max-width: 32.5rem;
   height: fit-content;
-  background: white;
-  border-radius: 12px;
-  padding: 32px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background: var(--secondary-color);
+  border-radius: 0.75rem;
+  padding: 2rem;
+  box-shadow: 0 0.125rem 0.5rem var(--shadow-color);
 }
 
 .card h1 {
-  margin: 0 0 24px 0;
-  font-size: 28px;
-  color: #2c3e50;
+  margin: 0 0 1.5rem 0;
+  font-size: 1.75rem;
+  color: var(--text-color);
 }
 
 .form-group {
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
 }
 
 .form-group label {
   display: block;
-  margin-bottom: 8px;
+  margin-bottom: 0.5rem;
   font-weight: 600;
-  color: #374151;
+  color: var(--text-color);
 }
 
 .form-group input {
   width: 100%;
-  padding: 12px 14px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  font-size: 14px;
+  padding: 0.75rem 0.875rem;
+  border: 0.0625rem solid var(--secondary-color);
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
   box-sizing: border-box;
 }
 
 .actions {
   display: flex;
   justify-content: flex-end;
-  gap: 12px;
-  margin-top: 12px;
+  gap: 0.75rem;
+  margin-top: 0.75rem;
 }
 
 .btn-primary {
-  padding: 10px 16px;
-  background-color: #10b981;
-  color: #fff;
+  padding: 0.625rem 1rem;
+  background-color: var(--add-color);
+  color: var(--secondary-color);
   border: none;
-  border-radius: 8px;
+  border-radius: 0.5rem;
   font-weight: 600;
   cursor: pointer;
 }
@@ -66,19 +66,62 @@
 }
 
 .btn-secondary {
-  padding: 10px 16px;
+  padding: 0.625rem 1rem;
   background: none;
-  border: 1px solid #cbd5f0;
-  color: #334155;
-  border-radius: 8px;
+  border: 0.0625rem solid var(--secondary-color);
+  color: var(--text-color);
+  border-radius: 0.5rem;
   font-weight: 600;
   cursor: pointer;
 }
 
 .error {
-  margin-bottom: 16px;
-  padding: 12px;
-  border-radius: 8px;
-  background-color: #fee2e2;
-  color: #b91c1c;
+  margin-bottom: 1rem;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  background-color: var(--danger-bg-color);
+  color: var(--danger-text-color);
+}
+
+/* Mobile Responsive */
+@media (max-width: 48rem) {
+  .collaborator-add {
+    padding: 1.5rem 1rem;
+  }
+
+  .card {
+    padding: 1.5rem;
+  }
+
+  .card h1 {
+    font-size: 1.5rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .actions {
+    flex-direction: column-reverse;
+  }
+
+  .btn-primary,
+  .btn-secondary {
+    width: 100%;
+  }
+}
+
+@media (max-width: 30rem) {
+  .collaborator-add {
+    padding: 1rem 0.75rem;
+  }
+
+  .card {
+    padding: 1.25rem;
+  }
+
+  .card h1 {
+    font-size: 1.375rem;
+  }
+
+  .form-group input {
+    font-size: 0.8125rem;
+  }
 }
diff --git a/src/app/pages/home/home.component.css b/src/app/pages/home/home.component.css
index b484f5a..a253822 100644
--- a/src/app/pages/home/home.component.css
+++ b/src/app/pages/home/home.component.css
@@ -1,107 +1,150 @@
 .home-container {
   min-height: 100vh;
-  background-color: #f5f7fa;
+  background-color: var(--background-color);
 }
 
 .content {
-  padding: 40px;
-  max-width: 1400px;
+  padding: 2.5rem;
+  max-width: 87.5rem;
   margin: 0 auto;
 }
 
 .welcome-message {
-  background: white;
-  padding: 40px;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background: var(--secondary-color);
+  padding: 2.5rem;
+  border-radius: 0.75rem;
+  box-shadow: 0 0.125rem 0.5rem var(--shadow-color);
   text-align: center;
-  margin-bottom: 30px;
+  margin-bottom: 1.875rem;
 }
 
 .welcome-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
+  gap: 1rem;
   flex-wrap: wrap;
 }
 
 .welcome-message h2 {
-  margin: 0 0 10px 0;
-  color: #333;
-  font-size: 28px;
+  margin: 0 0 0.625rem 0;
+  color: var(--text-color);
+  font-size: 1.75rem;
 }
 
 .btn-create {
-  padding: 10px 18px;
-  background-color: #10b981;
-  color: #fff;
+  padding: 0.625rem 1.125rem;
+  background-color: var(--add-color);
+  color: var(--secondary-color);
   border: none;
-  border-radius: 8px;
+  border-radius: 0.5rem;
   font-weight: 600;
   cursor: pointer;
   transition: background-color 0.2s ease;
 }
 
 .btn-create:hover {
-  background-color: #059669;
+  background-color: var(--add-color-hover);
 }
 
 .welcome-message p {
   margin: 0;
-  color: #666;
-  font-size: 16px;
+  color: var(--text-color);
+  font-size: 1rem;
 }
 
 /* Projects List */
 .projects-grid {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 1rem;
   width: 100%;
 }
 
 .loading,
 .error-state,
 .loading-state {
-  background: white;
-  padding: 30px 24px;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background: var(--secondary-color);
+  padding: 1.875rem 1.5rem;
+  border-radius: 0.75rem;
+  box-shadow: 0 0.125rem 0.5rem var(--shadow-color);
   text-align: center;
 }
 
 .error-state p {
-  color: #c0392b;
+  color: var(--danger-text-color);
   margin: 0;
 }
 
 .loading p {
-  color: #666;
+  color: var(--text-color);
   margin: 0;
 }
 
 .no-projects {
-  background: white;
-  padding: 60px 40px;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background: var(--secondary-color);
+  padding: 3.75rem 2.5rem;
+  border-radius: 0.75rem;
+  box-shadow: 0 0.125rem 0.5rem var(--shadow-color);
   text-align: center;
 }
 
 .no-projects p {
   margin: 0;
-  color: #95a5a6;
-  font-size: 16px;
+  color: var(--text-color);
+  font-size: 1rem;
 }
 
 .create-link {
-  color: #10b981;
+  color: var(--add-color);
   font-weight: 600;
   text-decoration: underline;
-  text-underline-offset: 3px;
+  text-underline-offset: 0.1875rem;
+}
+
+/* Mobile Responsive */
+@media (max-width: 48rem) {
+  .content {
+    padding: 1.5rem 1rem;
+  }
+
+  .welcome-message {
+    padding: 1.5rem;
+  }
+
+  .welcome-message h2 {
+    font-size: 1.375rem;
+  }
+
+  .welcome-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .btn-create {
+    width: 100%;
+  }
+}
+
+@media (max-width: 30rem) {
+  .content {
+    padding: 1rem 0.75rem;
+  }
+
+  .welcome-message {
+    padding: 1.25rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .welcome-message h2 {
+    font-size: 1.25rem;
+  }
+
+  .welcome-message p {
+    font-size: 0.875rem;
+  }
 }
 
 .create-link:hover {
-  color: #059669;
+  color: var(--add-color-hover);
 }
diff --git a/src/app/pages/login/login.component.css b/src/app/pages/login/login.component.css
index 983fb63..f4af0e4 100644
--- a/src/app/pages/login/login.component.css
+++ b/src/app/pages/login/login.component.css
@@ -3,95 +3,95 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 20px;
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+  padding: 1.25rem;
 }
 
 .login-card {
-  background: white;
-  border-radius: 12px;
-  padding: 40px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+  background: var(--secondary-color);
+  border-radius: 0.75rem;
+  padding: 2.5rem;
+  box-shadow: 0 0.625rem 2.5rem var(--shadow-color);
   width: 100%;
-  max-width: 400px;
+  max-width: 25rem;
 }
 
 .login-card h1 {
-  font-size: 24px;
+  font-size: 1.5rem;
   font-weight: 700;
-  color: #667eea;
-  margin: 0 0 10px 0;
+  color: var(--primary-color);
+  margin: 0 0 0.625rem 0;
   text-align: center;
 }
 
 .login-card h2 {
-  font-size: 28px;
+  font-size: 1.75rem;
   font-weight: 600;
-  color: #333;
-  margin: 0 0 30px 0;
+  color: var(--text-color);
+  margin: 0 0 1.875rem 0;
   text-align: center;
 }
 
 .error-message {
-  background-color: #fee;
-  color: #c33;
-  padding: 12px;
-  border-radius: 6px;
-  margin-bottom: 20px;
-  border: 1px solid #fcc;
-  font-size: 14px;
+  background-color: var(--danger-bg-color);
+  color: var(--danger-text-color);
+  padding: 0.75rem;
+  border-radius: 0.375rem;
+  margin-bottom: 1.25rem;
+  border: 0.0625rem solid var(--danger-border-color);
+  font-size: 0.875rem;
 }
 
 .form-group {
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
 }
 
 .form-group label {
   display: block;
-  margin-bottom: 8px;
+  margin-bottom: 0.5rem;
   font-weight: 500;
-  color: #333;
-  font-size: 14px;
+  color: var(--text-color);
+  font-size: 0.875rem;
 }
 
 .form-group input {
   width: 100%;
-  padding: 12px 16px;
-  border: 2px solid #e1e8ed;
-  border-radius: 8px;
-  font-size: 15px;
+  padding: 0.75rem 1rem;
+  border: 0.125rem solid var(--secondary-color);
+  border-radius: 0.5rem;
+  font-size: 0.9375rem;
   transition: border-color 0.3s;
   box-sizing: border-box;
 }
 
 .form-group input:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--primary-color);
 }
 
 .form-group input::placeholder {
-  color: #aab8c2;
+  color: var(--text-color);
 }
 
 .btn-primary {
   width: 100%;
-  padding: 14px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
+  padding: 0.875rem;
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+  color: var(--secondary-color);
   border: none;
-  border-radius: 8px;
-  font-size: 16px;
+  border-radius: 0.5rem;
+  font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   transition:
     transform 0.2s,
     box-shadow 0.2s;
-  margin-top: 10px;
+  margin-top: 0.625rem;
 }
 
 .btn-primary:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
+  transform: translateY(-0.125rem);
+  box-shadow: 0 0.3125rem 1.25rem var(--shadow-color);
 }
 
 .btn-primary:active:not(:disabled) {
@@ -104,14 +104,57 @@
 }
 
 .register-link {
-  margin: 16px 0 0 0;
+  margin: 1rem 0 0 0;
   text-align: center;
-  font-size: 14px;
-  color: #4b5563;
+  font-size: 0.875rem;
+  color: var(--text-color);
+}
+
+/* Mobile Responsive */
+@media (max-width: 48rem) {
+  .login-container {
+    padding: 1rem;
+  }
+
+  .login-card {
+    padding: 2rem 1.5rem;
+  }
+
+  .login-card h1 {
+    font-size: 1.25rem;
+  }
+
+  .login-card h2 {
+    font-size: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+}
+
+@media (max-width: 30rem) {
+  .login-container {
+    padding: 0.75rem;
+  }
+
+  .login-card {
+    padding: 1.5rem 1rem;
+  }
+
+  .login-card h1 {
+    font-size: 1.125rem;
+  }
+
+  .login-card h2 {
+    font-size: 1.375rem;
+  }
+
+  .form-group input {
+    padding: 0.625rem 0.875rem;
+    font-size: 0.875rem;
+  }
 }
 
 .register-link a {
-  color: #667eea;
+  color: var(--primary-color);
   font-weight: 600;
   text-decoration: none;
 }
diff --git a/src/app/pages/project-create/project-create.component.css b/src/app/pages/project-create/project-create.component.css
index c875260..7791779 100644
--- a/src/app/pages/project-create/project-create.component.css
+++ b/src/app/pages/project-create/project-create.component.css
@@ -1,7 +1,7 @@
 .create-project {
   min-height: 100vh;
-  background-color: #f5f7fa;
-  padding: 40px;
+  background-color: var(--background-color);
+  padding: 2.5rem;
   display: flex;
   justify-content: center;
   align-items: flex-start;
@@ -9,38 +9,38 @@
 
 .card {
   width: 100%;
-  max-width: 640px;
+  max-width: 40rem;
   height: fit-content;
-  background: white;
-  border-radius: 12px;
-  padding: 32px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background: var(--secondary-color);
+  border-radius: 0.75rem;
+  padding: 2rem;
+  box-shadow: 0 0.125rem 0.5rem var(--shadow-color);
 }
 
 .card h1 {
-  margin: 0 0 24px 0;
-  font-size: 28px;
-  color: #2c3e50;
+  margin: 0 0 1.5rem 0;
+  font-size: 1.75rem;
+  color: var(--text-color);
 }
 
 .form-group {
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
 }
 
 .form-group label {
   display: block;
-  margin-bottom: 8px;
+  margin-bottom: 0.5rem;
   font-weight: 600;
-  color: #374151;
+  color: var(--text-color);
 }
 
 .form-group input,
 .form-group textarea {
   width: 100%;
-  padding: 12px 14px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  font-size: 14px;
+  padding: 0.75rem 0.875rem;
+  border: 0.0625rem solid var(--secondary-color);
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
   box-sizing: border-box;
 }
 
@@ -51,16 +51,16 @@
 .actions {
   display: flex;
   justify-content: flex-end;
-  gap: 12px;
-  margin-top: 12px;
+  gap: 0.75rem;
+  margin-top: 0.75rem;
 }
 
 .btn-primary {
-  padding: 10px 16px;
-  background-color: #10b981;
-  color: #fff;
+  padding: 0.625rem 1rem;
+  background-color: var(--add-color);
+  color: var(--secondary-color);
   border: none;
-  border-radius: 8px;
+  border-radius: 0.5rem;
   font-weight: 600;
   cursor: pointer;
 }
@@ -71,19 +71,63 @@
 }
 
 .btn-secondary {
-  padding: 10px 16px;
+  padding: 0.625rem 1rem;
   background: none;
-  border: 1px solid #cbd5f0;
-  color: #334155;
-  border-radius: 8px;
+  border: 0.0625rem solid var(--secondary-color);
+  color: var(--text-color);
+  border-radius: 0.5rem;
   font-weight: 600;
   cursor: pointer;
 }
 
 .error {
-  margin-bottom: 16px;
-  padding: 12px;
-  border-radius: 8px;
-  background-color: #fee2e2;
-  color: #b91c1c;
+  margin-bottom: 1rem;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  background-color: var(--danger-bg-color);
+  color: var(--danger-text-color);
+}
+
+/* Mobile Responsive */
+@media (max-width: 48rem) {
+  .create-project {
+    padding: 1.5rem 1rem;
+  }
+
+  .card {
+    padding: 1.5rem;
+  }
+
+  .card h1 {
+    font-size: 1.5rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .actions {
+    flex-direction: column-reverse;
+  }
+
+  .btn-primary,
+  .btn-secondary {
+    width: 100%;
+  }
+}
+
+@media (max-width: 30rem) {
+  .create-project {
+    padding: 1rem 0.75rem;
+  }
+
+  .card {
+    padding: 1.25rem;
+  }
+
+  .card h1 {
+    font-size: 1.375rem;
+  }
+
+  .form-group input,
+  .form-group textarea {
+    font-size: 0.8125rem;
+  }
 }
diff --git a/src/app/pages/project-details/project-details.component.css b/src/app/pages/project-details/project-details.component.css
index 1be42ac..7669c53 100644
--- a/src/app/pages/project-details/project-details.component.css
+++ b/src/app/pages/project-details/project-details.component.css
@@ -11,12 +11,12 @@
 .title h2 {
   margin: 0 0 0.375rem 0;
   font-size: 1.625rem;
-  color: #1f2933;
+  color: var(--text-color);
 }
 
 .title p {
   margin: 0;
-  color: #6b7280;
+  color: var(--text-color);
 }
 
 .project-card,
@@ -27,10 +27,10 @@
 .error-state,
 .empty-state {
   height: fit-content;
-  background: #ffffff;
+  background: var(--secondary-color);
   padding: 1rem;
   border-radius: 0.75rem;
-  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
+  box-shadow: 0 0.125rem 0.5rem var(--shadow-color);
 }
 
 .project-card h2 {
@@ -39,18 +39,18 @@
 }
 
 .danger-zone {
-  border: 0.0625rem solid #fee2e2;
-  background: #fff5f5;
+  border: 0.0625rem solid var(--danger-border-color);
+  background: var(--danger-bg-color);
 }
 
 .danger-header h3 {
   margin: 0 0 0.375rem 0;
-  color: #b91c1c;
+  color: var(--danger-text-color);
 }
 
 .danger-header p {
   margin: 0;
-  color: #7f1d1d;
+  color: var(--danger-text-color);
 }
 
 .danger-actions {
@@ -67,19 +67,19 @@
   gap: 1rem;
   padding: 1rem;
   border-radius: 0.625rem;
-  background: #ffffff;
-  border: 0.0625rem solid #fecaca;
+  background: var(--secondary-color);
+  border: 0.0625rem solid var(--danger-border-color);
 }
 
 .danger-item h4 {
   margin: 0 0 0.25rem 0;
-  color: #7f1d1d;
+  color: var(--danger-text-color);
   font-size: 1rem;
 }
 
 .danger-item p {
   margin: 0;
-  color: #991b1b;
+  color: var(--danger-text-color);
   font-size: 0.8125rem;
 }
 
@@ -98,28 +98,28 @@
 
 .btn-danger {
   border: none;
-  background-color: #dc2626;
-  color: #ffffff;
+  background-color: var(--danger-color);
+  color: var(--secondary-color);
 }
 
 .btn-danger:hover {
-  background-color: #b91c1c;
+  background-color: var(--danger-color-hover);
 }
 
 .btn-danger-outline {
-  border: 0.0625rem solid #fca5a5;
-  background-color: #ffffff;
-  color: #b91c1c;
+  border: 0.0625rem solid var(--danger-border-color);
+  background-color: var(--secondary-color);
+  color: var(--danger-text-color);
 }
 
 .btn-danger-outline:hover {
-  border-color: #f87171;
-  background-color: #fee2e2;
+  border-color: var(--danger-color-hover);
+  background-color: var(--danger-bg-color-hover);
 }
 
 .description {
   margin: 0;
-  color: #4b5563;
+  color: var(--text-color);
 }
 
 .tasks-header,
@@ -139,7 +139,7 @@
 
 .collaborators-count {
   font-size: 0.875rem;
-  color: #6b7280;
+  color: var(--text-color);
 }
 
 .collaborators-grid {
@@ -157,8 +157,8 @@
   padding: 0.5rem 0.875rem;
   border-radius: 0.5rem;
   border: none;
-  background-color: #10b981;
-  color: #ffffff;
+  background-color: var(--add-color);
+  color: var(--secondary-color);
   font-weight: 600;
   cursor: pointer;
   transition: background-color 0.2s ease;
@@ -170,8 +170,8 @@
   padding: 0.5rem 0.875rem;
   border-radius: 0.5rem;
   border: none;
-  background-color: #10b981;
-  color: #ffffff;
+  background-color: var(--add-color);
+  color: var(--secondary-color);
   font-weight: 600;
   cursor: pointer;
   transition: background-color 0.2s ease;
@@ -180,12 +180,12 @@
 
 .btn-add-task:hover,
 .btn-add-collaborator:hover {
-  background-color: #059669;
+  background-color: var(--add-color-hover);
 }
 
 .tasks-count {
   font-size: 0.875rem;
-  color: #6b7280;
+  color: var(--text-color);
 }
 
 .tasks-list {
@@ -223,25 +223,114 @@
 .error-state p,
 .empty-state p {
   margin: 0;
-  color: #4b5563;
+  color: var(--text-color);
 }
 
 .error-state p {
-  color: #b91c1c;
+  color: var(--danger-text-color);
 }
 
 @media (max-width: 60rem) {
   .content {
     width: 90vw;
+    padding: 1.5rem 1rem;
   }
 
   .cards-row {
     flex-direction: column;
   }
+
+  .title h2 {
+    font-size: 1.375rem;
+  }
+}
+
+@media (max-width: 48rem) {
+  .content {
+    width: 95%;
+    max-width: 100%;
+    padding: 1.25rem 1rem;
+    gap: 0.75rem;
+    margin: 0 auto;
+  }
+
+  .title h2 {
+    font-size: 1.25rem;
+  }
+
+  .project-card,
+  .collaborators-card,
+  .tasks-card,
+  .danger-zone {
+    padding: 0.875rem;
+  }
+
+  .tasks-header,
+  .collaborators-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding-bottom: 1rem;
+  }
+
+  .tasks-header h4,
+  .collaborators-header h4 {
+    width: 100%;
+    font-size: 3rem;
+    text-align: center;
+  }
+
+  .btn-add-task,
+  .btn-add-collaborator {
+    width: 100%;
+  }
+
+  .danger-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  .btn-danger,
+  .btn-danger-outline {
+    width: 100%;
+  }
 }
 
 @media (max-width: 37.5rem) {
   .content {
-    max-width: 95%;
+    width: 95%;
+    max-width: 100%;
+    padding: 1rem 0.75rem;
+    margin: 0 auto;
+  }
+
+  .title h2 {
+    font-size: 1.125rem;
+  }
+
+  .title p,
+  .description {
+    font-size: 0.875rem;
+  }
+
+  .project-card,
+  .collaborators-card,
+  .tasks-card,
+  .danger-zone {
+    padding: 0.75rem;
+  }
+
+  .tasks-header h4,
+  .collaborators-header h4 {
+    font-size: 1.125rem;
+  }
+
+  .danger-item h4 {
+    font-size: 1.0625rem;
+  }
+
+  .danger-item p {
+    font-size: 0.75rem;
   }
 }
diff --git a/src/app/pages/project-edit/project-edit.component.css b/src/app/pages/project-edit/project-edit.component.css
index 81fb488..8b4d7b9 100644
--- a/src/app/pages/project-edit/project-edit.component.css
+++ b/src/app/pages/project-edit/project-edit.component.css
@@ -1,7 +1,7 @@
 .edit-project {
   min-height: 100vh;
-  background-color: #f5f7fa;
-  padding: 40px;
+  background-color: var(--background-color);
+  padding: 2.5rem;
   display: flex;
   justify-content: center;
   align-items: flex-start;
@@ -9,38 +9,38 @@
 
 .card {
   width: 100%;
-  max-width: 640px;
+  max-width: 40rem;
   height: fit-content;
-  background: white;
-  border-radius: 12px;
-  padding: 32px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background: var(--secondary-color);
+  border-radius: 0.75rem;
+  padding: 2rem;
+  box-shadow: 0 0.125rem 0.5rem var(--shadow-color);
 }
 
 .card h1 {
-  margin: 0 0 24px 0;
-  font-size: 28px;
-  color: #2c3e50;
+  margin: 0 0 1.5rem 0;
+  font-size: 1.75rem;
+  color: var(--text-color);
 }
 
 .form-group {
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
 }
 
 .form-group label {
   display: block;
-  margin-bottom: 8px;
+  margin-bottom: 0.5rem;
   font-weight: 600;
-  color: #374151;
+  color: var(--text-color);
 }
 
 .form-group input,
 .form-group textarea {
   width: 100%;
-  padding: 12px 14px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  font-size: 14px;
+  padding: 0.75rem 0.875rem;
+  border: 0.0625rem solid var(--secondary-color);
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
   box-sizing: border-box;
 }
 
@@ -51,44 +51,92 @@
 .actions {
   display: flex;
   justify-content: flex-end;
-  gap: 12px;
-  margin-top: 12px;
+  gap: 0.75rem;
+  margin-top: 0.75rem;
 }
 
 .btn-primary {
-  padding: 10px 16px;
-  background-color: #10b981;
-  color: #fff;
+  padding: 0.625rem 1rem;
+  background-color: var(--add-color);
+  color: var(--secondary-color);
   border: none;
-  border-radius: 8px;
+  border-radius: 0.5rem;
   font-weight: 600;
   cursor: pointer;
 }
 
+.btn-primary:hover:not(:disabled) {
+  background-color: var(--danger-secondary-color-hover);
+}
+
 .btn-primary:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
 
 .btn-secondary {
-  padding: 10px 16px;
+  padding: 0.625rem 1rem;
   background: none;
-  border: 1px solid #cbd5f0;
-  color: #334155;
-  border-radius: 8px;
+  border: 0.0625rem solid var(--secondary-color);
+  color: var(--text-color);
+  border-radius: 0.5rem;
   font-weight: 600;
   cursor: pointer;
 }
 
 .error {
-  margin-bottom: 16px;
-  padding: 12px;
-  border-radius: 8px;
-  background-color: #fee2e2;
-  color: #b91c1c;
+  margin-bottom: 1rem;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  background-color: var(--danger-bg-color);
+  color: var(--danger-text-color);
 }
 
 .loading {
   margin: 0;
-  color: #6b7280;
+  color: var(--text-color);
+}
+
+/* Mobile Responsive */
+@media (max-width: 48rem) {
+  .edit-project {
+    padding: 1.5rem 1rem;
+  }
+
+  .card {
+    padding: 1.5rem;
+  }
+
+  .card h1 {
+    font-size: 1.5rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .actions {
+    flex-direction: column-reverse;
+  }
+
+  .btn-primary,
+  .btn-secondary {
+    width: 100%;
+  }
+}
+
+@media (max-width: 30rem) {
+  .edit-project {
+    padding: 1rem 0.75rem;
+  }
+
+  .card {
+    padding: 1.25rem;
+  }
+
+  .card h1 {
+    font-size: 1.375rem;
+  }
+
+  .form-group input,
+  .form-group textarea {
+    font-size: 0.8125rem;
+  }
 }
diff --git a/src/app/pages/register/register.component.css b/src/app/pages/register/register.component.css
index 057608f..25d51fd 100644
--- a/src/app/pages/register/register.component.css
+++ b/src/app/pages/register/register.component.css
@@ -3,95 +3,95 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 20px;
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+  padding: 1.25rem;
 }
 
 .register-card {
-  background: white;
-  border-radius: 12px;
-  padding: 40px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+  background: var(--secondary-color);
+  border-radius: 0.75rem;
+  padding: 2.5rem;
+  box-shadow: 0 0.625rem 2.5rem var(--shadow-color);
   width: 100%;
-  max-width: 400px;
+  max-width: 25rem;
 }
 
 .register-card h1 {
-  font-size: 24px;
+  font-size: 1.5rem;
   font-weight: 700;
-  color: #667eea;
-  margin: 0 0 10px 0;
+  color: var(--primary-color);
+  margin: 0 0 0.625rem 0;
   text-align: center;
 }
 
 .register-card h2 {
-  font-size: 28px;
+  font-size: 1.75rem;
   font-weight: 600;
-  color: #333;
-  margin: 0 0 30px 0;
+  color: var(--text-color);
+  margin: 0 0 1.875rem 0;
   text-align: center;
 }
 
 .error-message {
-  background-color: #fee;
-  color: #c33;
-  padding: 12px;
-  border-radius: 6px;
-  margin-bottom: 20px;
-  border: 1px solid #fcc;
-  font-size: 14px;
+  background-color: var(--danger-bg-color);
+  color: var(--danger-text-color);
+  padding: 0.75rem;
+  border-radius: 0.375rem;
+  margin-bottom: 1.25rem;
+  border: 0.0625rem solid var(--danger-border-color);
+  font-size: 0.875rem;
 }
 
 .form-group {
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
 }
 
 .form-group label {
   display: block;
-  margin-bottom: 8px;
+  margin-bottom: 0.5rem;
   font-weight: 500;
-  color: #333;
-  font-size: 14px;
+  color: var(--text-color);
+  font-size: 0.875rem;
 }
 
 .form-group input {
   width: 100%;
-  padding: 12px 16px;
-  border: 2px solid #e1e8ed;
-  border-radius: 8px;
-  font-size: 15px;
+  padding: 0.75rem 1rem;
+  border: 0.125rem solid var(--secondary-color);
+  border-radius: 0.5rem;
+  font-size: 0.9375rem;
   transition: border-color 0.3s;
   box-sizing: border-box;
 }
 
 .form-group input:focus {
   outline: none;
-  border-color: #667eea;
+  border-color: var(--primary-color);
 }
 
 .form-group input::placeholder {
-  color: #aab8c2;
+  color: var(--text-color);
 }
 
 .btn-primary {
   width: 100%;
-  padding: 14px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
+  padding: 0.875rem;
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+  color: var(--secondary-color);
   border: none;
-  border-radius: 8px;
-  font-size: 16px;
+  border-radius: 0.5rem;
+  font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   transition:
     transform 0.2s,
     box-shadow 0.2s;
-  margin-top: 10px;
+  margin-top: 0.625rem;
 }
 
 .btn-primary:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
+  transform: translateY(-0.125rem);
+  box-shadow: 0 0.3125rem 1.25rem var(--shadow-color);
 }
 
 .btn-primary:active:not(:disabled) {
@@ -104,14 +104,57 @@
 }
 
 .login-link {
-  margin: 16px 0 0 0;
+  margin: 1rem 0 0 0;
   text-align: center;
-  font-size: 14px;
-  color: #4b5563;
+  font-size: 0.875rem;
+  color: var(--text-color);
+}
+
+/* Mobile Responsive */
+@media (max-width: 48rem) {
+  .register-container {
+    padding: 1rem;
+  }
+
+  .register-card {
+    padding: 2rem 1.5rem;
+  }
+
+  .register-card h1 {
+    font-size: 1.25rem;
+  }
+
+  .register-card h2 {
+    font-size: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+}
+
+@media (max-width: 30rem) {
+  .register-container {
+    padding: 0.75rem;
+  }
+
+  .register-card {
+    padding: 1.5rem 1rem;
+  }
+
+  .register-card h1 {
+    font-size: 1.125rem;
+  }
+
+  .register-card h2 {
+    font-size: 1.375rem;
+  }
+
+  .form-group input {
+    padding: 0.625rem 0.875rem;
+    font-size: 0.875rem;
+  }
 }
 
 .login-link a {
-  color: #667eea;
+  color: var(--primary-color);
   font-weight: 600;
   text-decoration: none;
 }
diff --git a/src/app/pages/task-create/task-create.component.css b/src/app/pages/task-create/task-create.component.css
index e3d6140..c424d77 100644
--- a/src/app/pages/task-create/task-create.component.css
+++ b/src/app/pages/task-create/task-create.component.css
@@ -1,7 +1,7 @@
 .create-task {
   min-height: 100vh;
-  background-color: #f5f7fa;
-  padding: 40px;
+  background-color: var(--background-color);
+  padding: 2.5rem;
   display: flex;
   justify-content: center;
   align-items: flex-start;
@@ -9,41 +9,41 @@
 
 .card {
   width: 100%;
-  max-width: 640px;
+  max-width: 40rem;
   height: fit-content;
-  background: white;
-  border-radius: 12px;
-  padding: 32px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background: var(--secondary-color);
+  border-radius: 0.75rem;
+  padding: 2rem;
+  box-shadow: 0 0.125rem 0.5rem var(--shadow-color);
 }
 
 .card h1 {
-  margin: 0 0 24px 0;
-  font-size: 28px;
-  color: #2c3e50;
+  margin: 0 0 1.5rem 0;
+  font-size: 1.75rem;
+  color: var(--text-color);
 }
 
 .form-group {
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
 }
 
 .form-group label {
   display: block;
-  margin-bottom: 8px;
+  margin-bottom: 0.5rem;
   font-weight: 600;
-  color: #374151;
+  color: var(--text-color);
 }
 
 .form-group input,
 .form-group textarea,
 .form-group select {
   width: 100%;
-  padding: 12px 14px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  font-size: 14px;
+  padding: 0.75rem 0.875rem;
+  border: 0.0625rem solid var(--secondary-color);
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
   box-sizing: border-box;
-  background-color: #ffffff;
+  background-color: var(--secondary-color);
 }
 
 .form-group textarea {
@@ -53,16 +53,16 @@
 .actions {
   display: flex;
   justify-content: flex-end;
-  gap: 12px;
-  margin-top: 12px;
+  gap: 0.75rem;
+  margin-top: 0.75rem;
 }
 
 .btn-primary {
-  padding: 10px 16px;
-  background-color: #10b981;
-  color: #fff;
+  padding: 0.625rem 1rem;
+  background-color: var(--add-color);
+  color: var(--secondary-color);
   border: none;
-  border-radius: 8px;
+  border-radius: 0.5rem;
   font-weight: 600;
   cursor: pointer;
 }
@@ -73,19 +73,64 @@
 }
 
 .btn-secondary {
-  padding: 10px 16px;
+  padding: 0.625rem 1rem;
   background: none;
-  border: 1px solid #cbd5f0;
-  color: #334155;
-  border-radius: 8px;
+  border: 0.0625rem solid var(--secondary-color);
+  color: var(--text-color);
+  border-radius: 0.5rem;
   font-weight: 600;
   cursor: pointer;
 }
 
 .error {
-  margin-bottom: 16px;
-  padding: 12px;
-  border-radius: 8px;
-  background-color: #fee2e2;
-  color: #b91c1c;
+  margin-bottom: 1rem;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  background-color: var(--danger-bg-color);
+  color: var(--danger-text-color);
+}
+
+/* Mobile Responsive */
+@media (max-width: 48rem) {
+  .create-task {
+    padding: 1.5rem 1rem;
+  }
+
+  .card {
+    padding: 1.5rem;
+  }
+
+  .card h1 {
+    font-size: 1.5rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .actions {
+    flex-direction: column-reverse;
+  }
+
+  .btn-primary,
+  .btn-secondary {
+    width: 100%;
+  }
+}
+
+@media (max-width: 30rem) {
+  .create-task {
+    padding: 1rem 0.75rem;
+  }
+
+  .card {
+    padding: 1.25rem;
+  }
+
+  .card h1 {
+    font-size: 1.375rem;
+  }
+
+  .form-group input,
+  .form-group textarea,
+  .form-group select {
+    font-size: 0.8125rem;
+  }
 }
diff --git a/src/app/pages/task-edit/task-edit.component.css b/src/app/pages/task-edit/task-edit.component.css
index 7dcd03b..22f406c 100644
--- a/src/app/pages/task-edit/task-edit.component.css
+++ b/src/app/pages/task-edit/task-edit.component.css
@@ -1,7 +1,7 @@
 .create-task {
   min-height: 100vh;
-  background-color: #f5f7fa;
-  padding: 40px;
+  background-color: var(--background-color);
+  padding: 2.5rem;
   display: flex;
   justify-content: center;
   align-items: flex-start;
@@ -9,41 +9,41 @@
 
 .card {
   width: 100%;
-  max-width: 640px;
+  max-width: 40rem;
   height: fit-content;
-  background: white;
-  border-radius: 12px;
-  padding: 32px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background: var(--secondary-color);
+  border-radius: 0.75rem;
+  padding: 2rem;
+  box-shadow: 0 0.125rem 0.5rem var(--shadow-color);
 }
 
 .card h1 {
-  margin: 0 0 24px 0;
-  font-size: 28px;
-  color: #2c3e50;
+  margin: 0 0 1.5rem 0;
+  font-size: 1.75rem;
+  color: var(--text-color);
 }
 
 .form-group {
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
 }
 
 .form-group label {
   display: block;
-  margin-bottom: 8px;
+  margin-bottom: 0.5rem;
   font-weight: 600;
-  color: #374151;
+  color: var(--text-color);
 }
 
 .form-group input,
 .form-group textarea,
 .form-group select {
   width: 100%;
-  padding: 12px 14px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  font-size: 14px;
+  padding: 0.75rem 0.875rem;
+  border: 0.0625rem solid var(--secondary-color);
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
   box-sizing: border-box;
-  background-color: #ffffff;
+  background-color: var(--secondary-color);
 }
 
 .form-group textarea {
@@ -53,16 +53,16 @@
 .actions {
   display: flex;
   justify-content: flex-end;
-  gap: 12px;
-  margin-top: 12px;
+  gap: 0.75rem;
+  margin-top: 0.75rem;
 }
 
 .btn-primary {
-  padding: 10px 16px;
-  background-color: #10b981;
-  color: #fff;
+  padding: 0.625rem 1rem;
+  background-color: var(--add-color);
+  color: var(--secondary-color);
   border: none;
-  border-radius: 8px;
+  border-radius: 0.5rem;
   font-weight: 600;
   cursor: pointer;
 }
@@ -73,27 +73,72 @@
 }
 
 .btn-secondary {
-  padding: 10px 16px;
+  padding: 0.625rem 1rem;
   background: none;
-  border: 1px solid #cbd5f0;
-  color: #334155;
-  border-radius: 8px;
+  border: 0.0625rem solid var(--secondary-color);
+  color: var(--text-color);
+  border-radius: 0.5rem;
   font-weight: 600;
   cursor: pointer;
 }
 
 .error {
-  margin-bottom: 16px;
-  padding: 12px;
-  border-radius: 8px;
-  background-color: #fee2e2;
-  color: #b91c1c;
+  margin-bottom: 1rem;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  background-color: var(--danger-bg-color);
+  color: var(--danger-text-color);
 }
 
 .loading {
-  margin-bottom: 16px;
-  padding: 12px;
-  border-radius: 8px;
-  background-color: #e2e8f0;
-  color: #334155;
+  margin-bottom: 1rem;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  background-color: var(--secondary-color);
+  color: var(--text-color);
+}
+
+/* Mobile Responsive */
+@media (max-width: 48rem) {
+  .create-task {
+    padding: 1.5rem 1rem;
+  }
+
+  .card {
+    padding: 1.5rem;
+  }
+
+  .card h1 {
+    font-size: 1.5rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .actions {
+    flex-direction: column-reverse;
+  }
+
+  .btn-primary,
+  .btn-secondary {
+    width: 100%;
+  }
+}
+
+@media (max-width: 30rem) {
+  .create-task {
+    padding: 1rem 0.75rem;
+  }
+
+  .card {
+    padding: 1.25rem;
+  }
+
+  .card h1 {
+    font-size: 1.375rem;
+  }
+
+  .form-group input,
+  .form-group textarea,
+  .form-group select {
+    font-size: 0.8125rem;
+  }
 }
diff --git a/src/styles.css b/src/styles.css
index 648193c..e37c47a 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,18 +1,51 @@
 /* You can add global styles to this file, and also import other style files */
-:root{
-    --background-color: whitesmoke;
-    --primary-color: #4a90e2;
-    --secondary-color: #f5f5f5;
-    --text-color: black;
+:root {
+  --background-color: whitesmoke;
+  --primary-color: #4a90e2;
+  --secondary-color: #f5f5f5;
+  --text-color: black;
+
+  --shadow-color: rgba(0, 0, 0, 0.3);
+
+  --avatar-bg-color: #e0f2fe;
+
+  --danger-color: #e74c3c;
+  --danger-color-hover: #c0392b;
+  --danger-secondary-color-hover: #c0392b88;
+  --danger-outline-color: #e74c3c;
+  --danger-bg-color: #fbe9e7;
+  --danger-bg-color-hover: #f6d0cb;
+  --danger-text-color: #8e2720;
+  --danger-border-color: #f2b8b5;
+
+  --add-color: #2ecc71;
+  --add-color-hover: #27ae60;
 }
 
 body {
-    margin: 0;
+  margin: 0;
 
-    width: 100%;
-    height: fit-content;
+  width: 100%;
+  height: fit-content;
 
-    font-family: Arial, sans-serif;
-    background-color: var(--background-color);
-    color: var(--text-color);
-}
\ No newline at end of file
+  font-family: Arial, sans-serif;
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+/* Mobile Responsive Global Styles */
+@media (max-width: 48rem) {
+  body {
+    font-size: 0.9375rem;
+  }
+}
+
+@media (max-width: 30rem) {
+  body {
+    font-size: 0.875rem;
+  }
+}