From a39e57fcfd1f9e748c4985113e5ea1aecdb93651 Mon Sep 17 00:00:00 2001
From: Anas Qureshi <ada-anasqureshi@example.com>
Date: Mon, 27 Jul 2026 10:57:52 +0530
Subject: [PATCH] new changes in dark mode

---
 public/assets/css/style.css                   |   2 +-
 public/assets/css/tailwind.css                |   2 +-
 public/assets/scss/tailwind.css               |   2 +-
 .../pages/currency-list/currency-list.html    |   8 +-
 src/app/shared/components/modal/modal.scss    | 120 ++++++++++++++++
 .../stepper-four/stepper-four.component.html  |  22 +--
 .../stepper-four/stepper-four.component.scss  |  91 ++++++++++++
 .../stepper-three.component.html              |  12 +-
 .../stepper-three.component.scss              | 136 ++++++++++++++++++
 .../stepper-two/stepper-two.component.html    |  20 +--
 .../stepper-two/stepper-two.component.scss    |  99 +++++++++++++
 .../components/stepper/stepper.component.html |  10 +-
 .../components/stepper/stepper.component.scss |  99 +++++++++++++
 13 files changed, 582 insertions(+), 41 deletions(-)

diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 9796a4a0..013d7914 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -16188,7 +16188,7 @@ html.dark,
   --color-darkbg: rgb(37 39 41);
   --color-light: rgb(43 46 49);
   --color-dark: rgb(240 245 248);
-  --color-inputborder: rgb(49 51 53);
+  --color-inputborder: rgb(115 122 130);
   --color-formcontrolbg: rgb(35 38 40);
   --color-defaulttextcolor: rgb(255 255 255);
   --color-gray-100: rgb(249, 250, 251);
diff --git a/public/assets/css/tailwind.css b/public/assets/css/tailwind.css
index 07e60328..536af00f 100644
--- a/public/assets/css/tailwind.css
+++ b/public/assets/css/tailwind.css
@@ -13048,7 +13048,7 @@ html.dark,
   --color-darkbg: rgb(37 39 41);
   --color-light: rgb(43 46 49);
   --color-dark: rgb(240 245 248);
-  --color-inputborder: rgb(49 51 53);
+  --color-inputborder: rgb(115 122 130);
   --color-formcontrolbg: rgb(35 38 40);
   --color-defaulttextcolor: rgb(255 255 255);
   --color-gray-100: rgb(249,250,251);
diff --git a/public/assets/scss/tailwind.css b/public/assets/scss/tailwind.css
index a2aa1521..fbca5487 100644
--- a/public/assets/scss/tailwind.css
+++ b/public/assets/scss/tailwind.css
@@ -121,7 +121,7 @@ html.dark,
   --color-darkbg: rgb(37 39 41);
   --color-light: rgb(43 46 49);
   --color-dark: rgb(240 245 248);
-  --color-inputborder: rgb(49 51 53);
+  --color-inputborder: rgb(115 122 130);
   --color-formcontrolbg: rgb(35 38 40);
   --color-defaulttextcolor: rgb(255 255 255);
   --color-gray-100: rgb(249,250,251);
diff --git a/src/app/features/global-masters/currencies/pages/currency-list/currency-list.html b/src/app/features/global-masters/currencies/pages/currency-list/currency-list.html
index a57d43aa..7db10599 100644
--- a/src/app/features/global-masters/currencies/pages/currency-list/currency-list.html
+++ b/src/app/features/global-masters/currencies/pages/currency-list/currency-list.html
@@ -144,8 +144,7 @@
         </div>
 
 
-
-        <!-- Currency Code -->
+<!-- 
         <div class="col-span-12 md:col-span-4">
 
             <div class="custom-floating-field"
@@ -198,7 +197,6 @@
 
 
 
-        <!-- Currency Symbol -->
         <div class="col-span-12 md:col-span-4">
 
             <div class="custom-floating-field"
@@ -258,7 +256,6 @@
 
 
 
-        <!-- Numeric Code -->
         <div class="col-span-12 md:col-span-4">
 
             <div class="custom-floating-field"
@@ -315,7 +312,6 @@
 
 
 
-        <!-- Decimal Digits -->
         <div class="col-span-12 md:col-span-4">
 
 
@@ -377,7 +373,7 @@
 
 
         </div>
-
+ -->
 
 
 </form>
diff --git a/src/app/shared/components/modal/modal.scss b/src/app/shared/components/modal/modal.scss
index e09705dc..89daa5f9 100644
--- a/src/app/shared/components/modal/modal.scss
+++ b/src/app/shared/components/modal/modal.scss
@@ -664,6 +664,126 @@
 
 }
 
+/* ==========================================================
+   Dark Mode
+   ========================================================== */
+
+:host-context(.dark) .modern-modal {
+  background: var(--color-bodybg) !important;
+  box-shadow:
+    0 15px 40px rgba(0, 0, 0, .25),
+    0 30px 80px rgba(0, 0, 0, .35);
+}
+
+:host-context(.dark) .modern-modal-body {
+  color: var(--color-defaulttextcolor) !important;
+}
+
+:host-context(.dark) .modern-modal-body::-webkit-scrollbar-thumb {
+  background: var(--color-inputborder) !important;
+}
+
+:host-context(.dark) .modern-modal-body::-webkit-scrollbar-thumb:hover {
+  background: var(--color-textmuted) !important;
+}
+
+:host-context(.dark) .modern-modal-footer {
+  background: var(--color-bodybg) !important;
+  border-top: 1px solid var(--color-inputborder) !important;
+}
+
+:host-context(.dark) ::ng-deep .modern-modal-footer app-button:first-child button {
+  background: var(--color-light) !important;
+  border-color: var(--color-inputborder) !important;
+  color: var(--color-defaulttextcolor) !important;
+}
+
+:host-context(.dark) ::ng-deep .modern-modal-footer app-button:first-child button:hover {
+  background: var(--color-bodybg) !important;
+  border-color: var(--color-textmuted) !important;
+}
+
+:host-context(.dark) ::ng-deep .modern-modal-footer app-button:last-child button {
+  box-shadow:
+    0 8px 20px rgba(125, 61, 235, 0.55) !important;
+}
+
+:host-context(.dark) ::ng-deep .modern-modal-footer app-button:last-child button:hover {
+  box-shadow:
+    0 12px 28px rgba(125, 61, 235, .65) !important;
+}
+
+/* ==========================================================
+   Modal form-control borders in dark mode
+   ========================================================== */
+
+:host-context(.dark) ::ng-deep .modern-modal {
+
+  .shared-form-input,
+  .custom-floating-input,
+  .form-control,
+  .form-select,
+  .ti-form-input,
+  .ti-form-select,
+  .ti-form-control,
+  .ng-select-container,
+  textarea,
+  input[type="text"],
+  input:not([type]),
+  input[type="email"],
+  input[type="password"],
+  input[type="number"],
+  input[type="tel"],
+  input[type="url"],
+  input[type="search"],
+  input[type="date"],
+  input[type="datetime-local"],
+  input[type="month"],
+  input[type="time"],
+  input[type="week"] {
+    border-color: rgb(115 122 130) !important;
+  }
+
+  .form-check-input:not(:checked) {
+    border-color: rgb(115 122 130) !important;
+  }
+
+  /* keep focus / validation colors */
+  .shared-form-control.is-focused .shared-form-input,
+  .shared-form-input:focus,
+  .custom-floating-input:focus,
+  .form-control:focus,
+  .form-select:focus,
+  .ti-form-input:focus,
+  .ti-form-select:focus,
+  .ti-form-control:focus,
+  .ng-select.ng-select-focused .ng-select-container,
+  textarea:focus {
+    border-color: var(--color-primary) !important;
+  }
+
+  .form-control.is-invalid,
+  .form-select.is-invalid,
+  .ti-form-input.is-invalid,
+  .ti-form-select.is-invalid,
+  .ti-form-control.is-invalid,
+  textarea.is-invalid,
+  .has-error .shared-form-input,
+  .ng-invalid.ng-touched,
+  .custom-floating-input.ng-invalid.ng-touched {
+    border-color: var(--color-danger) !important;
+  }
+
+  .form-check-input:checked,
+  .form-check-input.is-invalid {
+    border-color: var(--color-primary) !important;
+  }
+
+  .form-check-input.is-invalid:not(:checked) {
+    border-color: var(--color-danger) !important;
+  }
+}
+
 /* ==========================================================
    Mobile
 ========================================================== */
diff --git a/src/app/shared/components/stepper-four/stepper-four.component.html b/src/app/shared/components/stepper-four/stepper-four.component.html
index c8e25993..8c12b7cb 100644
--- a/src/app/shared/components/stepper-four/stepper-four.component.html
+++ b/src/app/shared/components/stepper-four/stepper-four.component.html
@@ -147,19 +147,19 @@
                                 </div>
                                 <div class="col-span-12 md:col-span-3">
                                     <div class="custom-floating-field">
-                                        <input id="f1-arrival" type="text" value="London" placeholder=" " class="custom-floating-input" />
+                                        <input id="f1-arrival" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="f1-arrival" class="custom-floating-label">Arrival City</label>
                                     </div>
                                 </div>
                                 <div class="col-span-12 md:col-span-3">
                                     <div class="custom-floating-field">
-                                        <input id="f1-depart-date" type="text" value="2026-08-15" placeholder=" " class="custom-floating-input" />
+                                        <input id="f1-depart-date" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="f1-depart-date" class="custom-floating-label">Departure Date</label>
                                     </div>
                                 </div>
                                 <div class="col-span-12 md:col-span-3">
                                     <div class="custom-floating-field">
-                                        <input id="f1-return-date" type="text" value="2026-08-22" placeholder=" " class="custom-floating-input" />
+                                        <input id="f1-return-date" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="f1-return-date" class="custom-floating-label">Return Date</label>
                                     </div>
                                 </div>
@@ -185,7 +185,7 @@
                             <div class="grid grid-cols-12 gap-x-5 gap-y-5">
                                 <div class="col-span-12 md:col-span-4">
                                     <div class="custom-floating-field">
-                                        <input id="f2-passenger" type="text" value="John Doe" placeholder=" " class="custom-floating-input" />
+                                        <input id="f2-passenger" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="f2-passenger" class="custom-floating-label">Primary Passenger</label>
                                     </div>
                                 </div>
@@ -197,7 +197,7 @@
                                 </div>
                                 <div class="col-span-12 md:col-span-4">
                                     <div class="custom-floating-field">
-                                        <input id="f2-phone" type="text" value="+1 555 123 4567" placeholder=" " class="custom-floating-input" />
+                                        <input id="f2-phone" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="f2-phone" class="custom-floating-label">Phone Number</label>
                                     </div>
                                 </div>
@@ -236,7 +236,7 @@
                                 </div>
                                 <div class="col-span-12 md:col-span-6">
                                     <div class="custom-floating-field">
-                                        <input id="f3-seat" type="text" value="Window" placeholder=" " class="custom-floating-input" />
+                                        <input id="f3-seat" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="f3-seat" class="custom-floating-label">Seat Preference</label>
                                     </div>
                                 </div>
@@ -275,13 +275,13 @@
                                 </div>
                                 <div class="col-span-12 md:col-span-4">
                                     <div class="custom-floating-field">
-                                        <input id="f4-checked" type="number" value="2" placeholder=" " class="custom-floating-input" />
+                                        <input id="f4-checked" type="number" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="f4-checked" class="custom-floating-label">Checked Bags</label>
                                     </div>
                                 </div>
                                 <div class="col-span-12 md:col-span-4">
                                     <div class="custom-floating-field">
-                                        <input id="f4-weight" type="number" value="23" placeholder=" " class="custom-floating-input" />
+                                        <input id="f4-weight" type="number" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="f4-weight" class="custom-floating-label">Extra Weight (kg)</label>
                                     </div>
                                 </div>
@@ -320,7 +320,7 @@
                                 </div>
                                 <div class="col-span-12 md:col-span-6">
                                     <div class="custom-floating-field">
-                                        <input id="f5-wifi" type="text" value="Yes" placeholder=" " class="custom-floating-input" />
+                                        <input id="f5-wifi" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="f5-wifi" class="custom-floating-label">Wi-Fi Access</label>
                                     </div>
                                 </div>
@@ -353,7 +353,7 @@
                             <div class="grid grid-cols-12 gap-x-5 gap-y-5">
                                 <div class="col-span-12 md:col-span-3">
                                     <div class="custom-floating-field">
-                                        <input id="f6-holder" type="text" value="John Doe" placeholder=" " class="custom-floating-input" />
+                                        <input id="f6-holder" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="f6-holder" class="custom-floating-label">Card Holder</label>
                                     </div>
                                 </div>
@@ -365,7 +365,7 @@
                                 </div>
                                 <div class="col-span-12 md:col-span-3">
                                     <div class="custom-floating-field">
-                                        <input id="f6-expiry" type="text" value="12/28" placeholder=" " class="custom-floating-input" />
+                                        <input id="f6-expiry" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="f6-expiry" class="custom-floating-label">Expiry Date</label>
                                     </div>
                                 </div>
diff --git a/src/app/shared/components/stepper-four/stepper-four.component.scss b/src/app/shared/components/stepper-four/stepper-four.component.scss
index 430bdcee..5e8da19a 100644
--- a/src/app/shared/components/stepper-four/stepper-four.component.scss
+++ b/src/app/shared/components/stepper-four/stepper-four.component.scss
@@ -339,6 +339,97 @@ $white: #ffffff;
     }
 }
 
+/* ==========================================================
+   Dark Mode
+   ========================================================== */
+
+:host-context(.dark) .custom-stepper-wrapper {
+    background: var(--color-bodybg) !important;
+}
+
+:host-context(.dark) .step-button {
+    color: var(--color-defaulttextcolor) !important;
+}
+
+:host-context(.dark) .step-icon {
+    background: var(--color-light) !important;
+    border-color: var(--color-inputborder) !important;
+    color: var(--color-textmuted) !important;
+}
+
+:host-context(.dark) .step-icon.active {
+    background: rgba(124, 92, 250, 0.15) !important;
+    border-color: $purple !important;
+    color: $purple !important;
+    box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15) !important;
+}
+
+:host-context(.dark) .step-icon.completed {
+    background: $purple !important;
+    border-color: $purple !important;
+    color: #ffffff !important;
+}
+
+:host-context(.dark) .step-label {
+    color: var(--color-textmuted) !important;
+}
+
+:host-context(.dark) .step-label.active,
+:host-context(.dark) .step-label.completed {
+    color: $purple !important;
+}
+
+:host-context(.dark) .step-separator {
+    border-color: var(--color-inputborder) !important;
+}
+
+:host-context(.dark) .step-separator.completed {
+    border-color: $purple !important;
+}
+
+:host-context(.dark) .panel-form {
+    background: var(--color-light) !important;
+}
+
+:host-context(.dark) .custom-floating-input {
+    background: var(--color-light) !important;
+    border: 1px solid rgb(115, 122, 130) !important;
+    color: var(--color-defaulttextcolor) !important;
+}
+
+:host-context(.dark) .custom-floating-input::placeholder {
+    color: transparent !important;
+}
+
+:host-context(.dark) .custom-floating-label {
+    background: var(--color-light) !important;
+    color: var(--color-textmuted) !important;
+}
+
+:host-context(.dark) .custom-floating-input:focus,
+:host-context(.dark) .custom-floating-input:not(:placeholder-shown),
+:host-context(.dark) .custom-floating-input:active {
+    border-color: $purple !important;
+    box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15) !important;
+}
+
+:host-context(.dark) .custom-floating-input:focus~.custom-floating-label,
+:host-context(.dark) .custom-floating-input:not(:placeholder-shown)~.custom-floating-label {
+    color: $purple !important;
+}
+
+:host-context(.dark) ::ng-deep .step-btn-back {
+    background: var(--color-light) !important;
+    color: var(--color-defaulttextcolor) !important;
+    border-color: rgb(115 122 130) !important;
+}
+
+:host-context(.dark) ::ng-deep .step-btn-back:hover {
+    background: var(--color-bodybg) !important;
+    border-color: $purple !important;
+    color: $purple !important;
+}
+
 @media (max-width: 768px) {
 
     .custom-stepper-wrapper {
diff --git a/src/app/shared/components/stepper-three/stepper-three.component.html b/src/app/shared/components/stepper-three/stepper-three.component.html
index 3ccddfb5..ca1d3a9b 100644
--- a/src/app/shared/components/stepper-three/stepper-three.component.html
+++ b/src/app/shared/components/stepper-three/stepper-three.component.html
@@ -20,13 +20,13 @@
                                 </div>
                                 <div class="col-span-12 md:col-span-4">
                                     <div class="custom-floating-field">
-                                        <input id="s1-last-name" type="text" value="Doe" placeholder=" " class="custom-floating-input" />
+                                        <input id="s1-last-name" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="s1-last-name" class="custom-floating-label">Last Name</label>
                                     </div>
                                 </div>
                                 <div class="col-span-12 md:col-span-4">
                                     <div class="custom-floating-field">
-                                        <input id="s1-email" type="email" value="john.doe@mail.com" placeholder=" " class="custom-floating-input" />
+                                        <input id="s1-email" type="email" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="s1-email" class="custom-floating-label">Email Address</label>
                                     </div>
                                 </div>
@@ -59,7 +59,7 @@
                             <div class="grid grid-cols-12 gap-x-5 gap-y-5">
                                 <div class="col-span-12 md:col-span-4">
                                     <div class="custom-floating-field">
-                                        <input id="s2-street" type="text" value="742 Maple Avenue" placeholder=" " class="custom-floating-input" />
+                                        <input id="s2-street" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="s2-street" class="custom-floating-label">Street</label>
                                     </div>
                                 </div>
@@ -71,7 +71,7 @@
                                 </div>
                                 <div class="col-span-12 md:col-span-4">
                                     <div class="custom-floating-field">
-                                        <input id="s2-postal" type="text" value="73301" placeholder=" " class="custom-floating-input" />
+                                        <input id="s2-postal" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="s2-postal" class="custom-floating-label">Postal Code</label>
                                     </div>
                                 </div>
@@ -110,7 +110,7 @@
                             <div class="grid grid-cols-12 gap-x-5 gap-y-5">
                                 <div class="col-span-12 md:col-span-4">
                                     <div class="custom-floating-field">
-                                        <input id="s3-username" type="text" value="johndoe" placeholder=" " class="custom-floating-input" />
+                                        <input id="s3-username" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="s3-username" class="custom-floating-label">Username</label>
                                     </div>
                                 </div>
@@ -122,7 +122,7 @@
                                 </div>
                                 <div class="col-span-12 md:col-span-4">
                                     <div class="custom-floating-field">
-                                        <input id="s3-country" type="text" value="United States" placeholder=" " class="custom-floating-input" />
+                                        <input id="s3-country" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="s3-country" class="custom-floating-label">Country</label>
                                     </div>
                                 </div>
diff --git a/src/app/shared/components/stepper-three/stepper-three.component.scss b/src/app/shared/components/stepper-three/stepper-three.component.scss
index e5da9bb4..c4df948f 100644
--- a/src/app/shared/components/stepper-three/stepper-three.component.scss
+++ b/src/app/shared/components/stepper-three/stepper-three.component.scss
@@ -296,6 +296,142 @@ $step-gap-mobile: 10px;
     }
 }
 
+::ng-deep {
+
+    .step-btn-next {
+
+        background: linear-gradient(135deg, #7c5cfa, #a78bfa) !important;
+        color: $white !important;
+        border: none !important;
+        border-radius: 9999px !important;
+        padding: 0.55rem 1.4rem !important;
+        font-weight: 600 !important;
+        box-shadow: 0 4px 12px rgba(124, 92, 250, 0.35) !important;
+        transition: transform .2s, box-shadow .2s, filter .2s !important;
+    }
+
+    .step-btn-next:hover {
+
+        transform: translateY(-2px);
+        box-shadow: 0 6px 16px rgba(124, 92, 250, 0.45) !important;
+        filter: brightness(1.05);
+    }
+
+    .step-btn-back {
+
+        background: $white !important;
+        color: $pending-text !important;
+        border: 1px solid $line-grey !important;
+        border-radius: 9999px !important;
+        padding: 0.55rem 1.4rem !important;
+        font-weight: 600 !important;
+        transition: transform .2s, border-color .2s, color .2s, background .2s !important;
+    }
+
+    .step-btn-back:hover {
+
+        transform: translateY(-2px);
+        border-color: $purple !important;
+        color: $purple !important;
+        background: #f9fafb !important;
+    }
+}
+
+/* ==========================================================
+   Dark Mode
+   ========================================================== */
+
+:host-context(.dark) .card {
+    background: var(--color-bodybg) !important;
+}
+
+:host-context(.dark) ::ng-deep {
+
+    .p-stepper .p-stepitem:not(:last-child)::after {
+        background: var(--color-textmuted) !important;
+    }
+
+    .p-stepper .p-stepitem.done:not(:last-child)::after {
+        background: linear-gradient(180deg, #a78bfa 0%, #7c5cfa 100%) !important;
+    }
+
+    .p-stepper .p-step-number {
+        background: var(--color-light) !important;
+        border-color: var(--color-inputborder) !important;
+        color: var(--color-textmuted) !important;
+    }
+
+    .p-stepper .p-step-active .p-step-number {
+        background: rgba(124, 92, 250, 0.15) !important;
+        border-color: $purple !important;
+        color: $purple !important;
+        box-shadow: 0 0 0 5px rgba(124, 92, 250, 0.25) !important;
+    }
+
+    .p-stepper .p-stepitem.done .p-step-number {
+        background: $purple !important;
+        border-color: $purple !important;
+        color: transparent !important;
+    }
+
+    .p-stepper .p-step-title {
+        color: var(--color-defaulttextcolor) !important;
+    }
+
+    .p-stepper .p-step-active .p-step-title,
+    .p-stepper .p-stepitem.done .p-step-title {
+        color: $purple !important;
+    }
+
+    .p-stepper .p-steppanel-content {
+        color: var(--color-defaulttextcolor) !important;
+    }
+}
+
+:host-context(.dark) .panel-form form {
+    background: var(--color-light) !important;
+    border-color: var(--color-inputborder) !important;
+}
+
+:host-context(.dark) .custom-floating-input {
+    background: var(--color-light) !important;
+    border-color: var(--color-inputborder) !important;
+    color: var(--color-defaulttextcolor) !important;
+}
+
+:host-context(.dark) .custom-floating-input::placeholder {
+    color: transparent !important;
+}
+
+:host-context(.dark) .custom-floating-label {
+    background: var(--color-light) !important;
+    color: var(--color-textmuted) !important;
+}
+
+:host-context(.dark) .custom-floating-input:focus,
+:host-context(.dark) .custom-floating-input:not(:placeholder-shown),
+:host-context(.dark) .custom-floating-input:active {
+    border-color: $purple !important;
+    box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15) !important;
+}
+
+:host-context(.dark) .custom-floating-input:focus~.custom-floating-label,
+:host-context(.dark) .custom-floating-input:not(:placeholder-shown)~.custom-floating-label {
+    color: $purple !important;
+}
+
+:host-context(.dark) ::ng-deep .step-btn-back {
+    background: var(--color-light) !important;
+    color: var(--color-defaulttextcolor) !important;
+    border-color: var(--color-inputborder) !important;
+}
+
+:host-context(.dark) ::ng-deep .step-btn-back:hover {
+    background: var(--color-bodybg) !important;
+    border-color: $purple !important;
+    color: $purple !important;
+}
+
 @media (max-width: 768px) {
 
     .card {
diff --git a/src/app/shared/components/stepper-two/stepper-two.component.html b/src/app/shared/components/stepper-two/stepper-two.component.html
index 4e1aac16..46eea989 100644
--- a/src/app/shared/components/stepper-two/stepper-two.component.html
+++ b/src/app/shared/components/stepper-two/stepper-two.component.html
@@ -293,7 +293,7 @@
                                 </div>
                                 <div class="col-span-12 md:col-span-6">
                                     <div class="custom-floating-field">
-                                        <input id="t1-owner" type="text" value="Sarah Chen" placeholder=" " class="custom-floating-input" />
+                                        <input id="t1-owner" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="t1-owner" class="custom-floating-label">Owner</label>
                                     </div>
                                 </div>
@@ -326,7 +326,7 @@
                             <div class="grid grid-cols-12 gap-x-5 gap-y-5">
                                 <div class="col-span-12 md:col-span-4">
                                     <div class="custom-floating-field">
-                                        <input id="t2-tool" type="text" value="Figma" placeholder=" " class="custom-floating-input" />
+                                        <input id="t2-tool" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="t2-tool" class="custom-floating-label">Design Tool</label>
                                     </div>
                                 </div>
@@ -338,7 +338,7 @@
                                 </div>
                                 <div class="col-span-12 md:col-span-4">
                                     <div class="custom-floating-field">
-                                        <input id="t2-deadline" type="text" value="2026-08-30" placeholder=" " class="custom-floating-input" />
+                                        <input id="t2-deadline" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="t2-deadline" class="custom-floating-label">Deadline</label>
                                     </div>
                                 </div>
@@ -385,7 +385,7 @@
                                 </div>
                                 <div class="col-span-12 md:col-span-3">
                                     <div class="custom-floating-field">
-                                        <input id="t3-branch" type="text" value="main" placeholder=" " class="custom-floating-input" />
+                                        <input id="t3-branch" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="t3-branch" class="custom-floating-label">Branch</label>
                                     </div>
                                 </div>
@@ -397,7 +397,7 @@
                                 </div>
                                 <div class="col-span-12 md:col-span-3">
                                     <div class="custom-floating-field">
-                                        <input id="t3-build" type="text" value="stable" placeholder=" " class="custom-floating-input" />
+                                        <input id="t3-build" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="t3-build" class="custom-floating-label">Build Type</label>
                                     </div>
                                 </div>
@@ -438,13 +438,13 @@
                             <div class="grid grid-cols-12 gap-x-5 gap-y-5">
                                 <div class="col-span-12 md:col-span-6">
                                     <div class="custom-floating-field">
-                                        <input id="t4-env" type="text" value="Staging" placeholder=" " class="custom-floating-input" />
+                                        <input id="t4-env" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="t4-env" class="custom-floating-label">Environment</label>
                                     </div>
                                 </div>
                                 <div class="col-span-12 md:col-span-6">
                                     <div class="custom-floating-field">
-                                        <input id="t4-cases" type="number" value="156" placeholder=" " class="custom-floating-input" />
+                                        <input id="t4-cases" type="number" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="t4-cases" class="custom-floating-label">Test Cases</label>
                                     </div>
                                 </div>
@@ -485,13 +485,13 @@
                             <div class="grid grid-cols-12 gap-x-5 gap-y-5">
                                 <div class="col-span-12 md:col-span-4">
                                     <div class="custom-floating-field">
-                                        <input id="t5-server" type="text" value="AWS" placeholder=" " class="custom-floating-input" />
+                                        <input id="t5-server" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="t5-server" class="custom-floating-label">Server</label>
                                     </div>
                                 </div>
                                 <div class="col-span-12 md:col-span-4">
                                     <div class="custom-floating-field">
-                                        <input id="t5-region" type="text" value="us-east-1" placeholder=" " class="custom-floating-input" />
+                                        <input id="t5-region" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="t5-region" class="custom-floating-label">Region</label>
                                     </div>
                                 </div>
@@ -538,7 +538,7 @@
                             <div class="grid grid-cols-12 gap-x-5 gap-y-5">
                                 <div class="col-span-12 md:col-span-6">
                                     <div class="custom-floating-field">
-                                        <input id="t6-release" type="text" value="2026-09-01" placeholder=" " class="custom-floating-input" />
+                                        <input id="t6-release" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="t6-release" class="custom-floating-label">Release Date</label>
                                     </div>
                                 </div>
diff --git a/src/app/shared/components/stepper-two/stepper-two.component.scss b/src/app/shared/components/stepper-two/stepper-two.component.scss
index 9a01faae..0ce55c09 100644
--- a/src/app/shared/components/stepper-two/stepper-two.component.scss
+++ b/src/app/shared/components/stepper-two/stepper-two.component.scss
@@ -327,6 +327,105 @@ $subtitle-color: #6b7280;
     }
 }
 
+/* ==========================================================
+   Dark Mode
+   ========================================================== */
+
+:host-context(.dark) .custom-stepper-wrapper {
+    background: var(--color-bodybg) !important;
+}
+
+:host-context(.dark) ::ng-deep .p-step:not(:last-child)::after {
+    background: var(--color-textmuted) !important;
+}
+
+:host-context(.dark) ::ng-deep .p-step.done:not(:last-child)::after {
+    background: linear-gradient(90deg, $purple 0%, #a78bfa 100%) !important;
+}
+
+:host-context(.dark) .step-circle {
+    background: var(--color-light) !important;
+    border-color: var(--color-inputborder) !important;
+}
+
+:host-context(.dark) .step-number {
+    color: var(--color-textmuted) !important;
+}
+
+:host-context(.dark) .step-circle.active {
+    background: rgba(124, 92, 250, 0.15) !important;
+    border-color: $purple !important;
+    box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15) !important;
+}
+
+:host-context(.dark) .step-circle.active .step-number {
+    color: $purple !important;
+}
+
+:host-context(.dark) .step-circle.completed {
+    background: $purple !important;
+    border-color: $purple !important;
+}
+
+:host-context(.dark) .step-text.active .step-title,
+:host-context(.dark) .step-text.active .step-subtitle,
+:host-context(.dark) .step-text.completed .step-title,
+:host-context(.dark) .step-text.completed .step-subtitle {
+    color: $purple !important;
+}
+
+:host-context(.dark) .step-text .step-title {
+    color: var(--color-defaulttextcolor) !important;
+}
+
+:host-context(.dark) .step-text .step-subtitle {
+    color: var(--color-textmuted) !important;
+}
+
+:host-context(.dark) .panel-box {
+    background: var(--color-light) !important;
+    border-color: var(--color-inputborder) !important;
+}
+
+:host-context(.dark) .custom-floating-input {
+    background: var(--color-light) !important;
+    border: 1px solid rgb(115, 122, 130) !important;
+    color: var(--color-defaulttextcolor) !important;
+}
+
+:host-context(.dark) .custom-floating-input::placeholder {
+    color: transparent !important;
+}
+
+:host-context(.dark) .custom-floating-label {
+    background: var(--color-light) !important;
+    color: var(--color-textmuted) !important;
+}
+
+:host-context(.dark) .custom-floating-input:focus,
+:host-context(.dark) .custom-floating-input:not(:placeholder-shown),
+:host-context(.dark) .custom-floating-input:active {
+    border-color: $purple !important;
+    box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15) !important;
+}
+
+:host-context(.dark) .custom-floating-input:focus~.custom-floating-label,
+:host-context(.dark) .custom-floating-input:not(:placeholder-shown)~.custom-floating-label {
+    color: $purple !important;
+}
+
+:host-context(.dark) ::ng-deep .step-btn-back {
+    background: var(--color-light) !important;
+    color: var(--color-defaulttextcolor) !important;
+    border-color: var(--color-inputborder) !important;
+}
+
+:host-context(.dark) ::ng-deep .step-btn-back:hover {
+    background: var(--color-bodybg) !important;
+    border-color: $purple !important;
+    color: $purple !important;
+}
+
 @media (max-width: 768px) {
 
     .step-text .step-title {
diff --git a/src/app/shared/components/stepper/stepper.component.html b/src/app/shared/components/stepper/stepper.component.html
index 8e39a118..e4394813 100644
--- a/src/app/shared/components/stepper/stepper.component.html
+++ b/src/app/shared/components/stepper/stepper.component.html
@@ -164,7 +164,7 @@
                                 </div>
                                 <div class="col-span-12 md:col-span-6">
                                     <div class="custom-floating-field">
-                                        <input id="s1-owner" type="text" value="Alice Smith" placeholder=" " class="custom-floating-input" />
+                                        <input id="s1-owner" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="s1-owner" class="custom-floating-label">Project Owner</label>
                                     </div>
                                 </div>
@@ -197,7 +197,7 @@
                             <div class="grid grid-cols-12 gap-x-5 gap-y-5">
                                 <div class="col-span-12 md:col-span-4">
                                     <div class="custom-floating-field">
-                                        <input id="s2-card" type="text" value="4242 4242 4242 4242" placeholder=" " class="custom-floating-input" />
+                                        <input id="s2-card" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="s2-card" class="custom-floating-label">Card Number</label>
                                     </div>
                                 </div>
@@ -209,7 +209,7 @@
                                 </div>
                                 <div class="col-span-12 md:col-span-4">
                                     <div class="custom-floating-field">
-                                        <input id="s2-cvv" type="number" value="123" placeholder=" " class="custom-floating-input" />
+                                        <input id="s2-cvv" type="number" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="s2-cvv" class="custom-floating-label">CVV</label>
                                     </div>
                                 </div>
@@ -250,13 +250,13 @@
                             <div class="grid grid-cols-12 gap-x-5 gap-y-5">
                                 <div class="col-span-12 md:col-span-4">
                                     <div class="custom-floating-field">
-                                        <input id="s3-code" type="text" value="CONF-8829-X" placeholder=" " class="custom-floating-input" />
+                                        <input id="s3-code" type="text" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="s3-code" class="custom-floating-label">Confirmation Code</label>
                                     </div>
                                 </div>
                                 <div class="col-span-12 md:col-span-4">
                                     <div class="custom-floating-field">
-                                        <input id="s3-email" type="email" value="client@mail.com" placeholder=" " class="custom-floating-input" />
+                                        <input id="s3-email" type="email" value="" placeholder=" " class="custom-floating-input" />
                                         <label for="s3-email" class="custom-floating-label">Notification Email</label>
                                     </div>
                                 </div>
diff --git a/src/app/shared/components/stepper/stepper.component.scss b/src/app/shared/components/stepper/stepper.component.scss
index 6499241c..54f07038 100644
--- a/src/app/shared/components/stepper/stepper.component.scss
+++ b/src/app/shared/components/stepper/stepper.component.scss
@@ -326,6 +326,105 @@ $subtitle-color: #6b7280;
     }
 }
 
+/* ==========================================================
+   Dark Mode
+   ========================================================== */
+
+:host-context(.dark) .custom-stepper-wrapper {
+    background: var(--color-bodybg) !important;
+}
+
+:host-context(.dark) ::ng-deep .p-step-list::before {
+    background: var(--color-inputborder) !important;
+}
+
+:host-context(.dark) .step-circle {
+    background: var(--color-light) !important;
+    border-color: var(--color-inputborder) !important;
+}
+
+:host-context(.dark) .step-number {
+    color: var(--color-textmuted) !important;
+}
+
+:host-context(.dark) .step-circle.active {
+    background: rgba(124, 92, 250, 0.15) !important;
+    border-color: $purple !important;
+    box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15) !important;
+}
+
+:host-context(.dark) .step-circle.active .dot {
+    background: $purple !important;
+}
+
+:host-context(.dark) .step-circle.completed {
+    background: $purple !important;
+    border-color: $purple !important;
+}
+
+:host-context(.dark) .step-text.active .step-title,
+:host-context(.dark) .step-text.active .step-subtitle,
+:host-context(.dark) .step-text.completed .step-title,
+:host-context(.dark) .step-text.completed .step-subtitle {
+    color: $purple !important;
+}
+
+:host-context(.dark) .grey-dot {
+    background: var(--color-textmuted) !important;
+}
+
+:host-context(.dark) .step-text .step-title {
+    color: var(--color-defaulttextcolor) !important;
+}
+
+:host-context(.dark) .step-text .step-subtitle {
+    color: var(--color-textmuted) !important;
+}
+
+:host-context(.dark) .panel-box {
+    background: var(--color-light) !important;
+    border-color: var(--color-inputborder) !important;
+}
+
+:host-context(.dark) .custom-floating-input {
+    background: var(--color-light) !important;
+    border-color: var(--color-inputborder) !important;
+    color: var(--color-defaulttextcolor) !important;
+}
+
+:host-context(.dark) .custom-floating-input::placeholder {
+    color: transparent !important;
+}
+
+:host-context(.dark) .custom-floating-label {
+    background: var(--color-light) !important;
+    color: var(--color-textmuted) !important;
+}
+
+:host-context(.dark) .custom-floating-input:focus,
+:host-context(.dark) .custom-floating-input:not(:placeholder-shown),
+:host-context(.dark) .custom-floating-input:active {
+    border-color: $purple !important;
+    box-shadow: 0 0 0 4px rgba(124, 92, 250, 0.15) !important;
+}
+
+:host-context(.dark) .custom-floating-input:focus~.custom-floating-label,
+:host-context(.dark) .custom-floating-input:not(:placeholder-shown)~.custom-floating-label {
+    color: $purple !important;
+}
+
+:host-context(.dark) ::ng-deep .step-btn-back {
+    background: var(--color-light) !important;
+    color: var(--color-defaulttextcolor) !important;
+    border-color: var(--color-inputborder) !important;
+}
+
+:host-context(.dark) ::ng-deep .step-btn-back:hover {
+    background: var(--color-bodybg) !important;
+    border-color: $purple !important;
+    color: $purple !important;
+}
+
 @media (max-width: 768px) {
 
     .step-text .step-title {