diff --git a/jsconfig.json b/jsconfig.json
index 4aafc5f..bbd2ddb 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -2,7 +2,6 @@
   "compilerOptions": {
     "target": "es5",
     "module": "esnext",
-    "baseUrl": "./",
     "moduleResolution": "node",
     "paths": {
       "@/*": [
@@ -16,4 +15,4 @@
       "scripthost"
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index adf40ec..ecffe41 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "@lucide/vue": "^1.52.0",
     "@popperjs/core": "^2.11.5",
     "@vuelidate/core": "^2.0.0-alpha.41",
     "@vuelidate/validators": "^2.0.0-alpha.29",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8f6558f..37811b8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@lucide/vue':
+        specifier: ^1.52.0
+        version: 1.52.0(vue@3.5.43(typescript@5.6.2))
       '@popperjs/core':
         specifier: ^2.11.5
         version: 2.11.8
@@ -678,6 +681,11 @@ packages:
   '@leichtgewicht/ip-codec@2.0.5':
     resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==}
 
+  '@lucide/vue@1.52.0':
+    resolution: {integrity: sha512-Gwr6c14jhY6BscoFU+B9OKsr7lg8RTAKOLgW0e61kkFwkt9Q7CZmB9AyJcvhoqapEJgRg2bFoeAcO+cqpgKzEQ==}
+    peerDependencies:
+      vue: '>=3.0.1'
+
   '@mazui/cli@3.50.1':
     resolution: {integrity: sha512-M8N/LdAJUfGt6eAGAJ8/VgA+yFSs+9IrLpDrt2oJfSVKseHRHT4C2t1A2KLlmt5EzeLQibX/eKj00TVNVavllA==}
     hasBin: true
@@ -4883,6 +4891,10 @@ snapshots:
 
   '@leichtgewicht/ip-codec@2.0.5': {}
 
+  '@lucide/vue@1.52.0(vue@3.5.43(typescript@5.6.2))':
+    dependencies:
+      vue: 3.5.43(typescript@5.6.2)
+
   '@mazui/cli@3.50.1':
     dependencies:
       '@clack/prompts': 0.8.2
diff --git a/src/components/authentication/TermsAndConditions.vue b/src/components/authentication/TermsAndConditions.vue
index dfadf21..7eb5389 100644
--- a/src/components/authentication/TermsAndConditions.vue
+++ b/src/components/authentication/TermsAndConditions.vue
@@ -1,40 +1,42 @@
 <template>
-  <a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal" class="text-white">
+  <a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal" class="terms-link">
     Terma & Syarat
   </a>
-  <div
-    class="modal fade"
-    id="exampleModal"
-    tabindex="-1"
-    aria-labelledby="exampleModalLabel"
-    aria-hidden="true"
-  >
-    <div class="modal-dialog modal-xl modal-dialog-centered">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" id="exampleModalLabel">
-            Terma & Syarat
-          </h5>
-          <button
-            type="button"
-            class="btn-close"
-            data-bs-dismiss="modal"
-            aria-label="Close"
-          ></button>
-        </div>
-        <div class="modal-body">
-          <terms-and-conditions-details></terms-and-conditions-details>
-        </div>
-        <div class="modal-footer">
-          <Button
-            data-bs-dismiss="modal"
-            class="p-button-sm"
-            label="Kembali"
-          ></Button>
+  <Teleport to="body">
+    <div
+      class="modal fade terms-modal"
+      id="exampleModal"
+      tabindex="-1"
+      aria-labelledby="exampleModalLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-xl modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="exampleModalLabel">
+              Terma & Syarat
+            </h5>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+          <div class="modal-body">
+            <terms-and-conditions-details></terms-and-conditions-details>
+          </div>
+          <div class="modal-footer">
+            <Button
+              data-bs-dismiss="modal"
+              class="p-button-sm"
+              label="Kembali"
+            ></Button>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </Teleport>
 </template>
 
 <script>
@@ -50,4 +52,17 @@ export default {
 .paragraph-align {
   text-align: justify;
 }
+
+.terms-link {
+  color: inherit;
+  font-weight: 600;
+  text-decoration: underline;
+}
+</style>
+
+<style>
+/* Keep modal above login shell (backdrop-filter/transform create a stacking context). */
+.terms-modal {
+  z-index: 2000;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/authentication/TheLogin.vue b/src/components/authentication/TheLogin.vue
index cf923e2..ab75060 100644
--- a/src/components/authentication/TheLogin.vue
+++ b/src/components/authentication/TheLogin.vue
@@ -1,73 +1,91 @@
 <template>
   <Toast :breakpoints="{ '767px': { width: '100%', right: '0', left: '0' } }" />
-  <div class="flex main-container min-h-screen align-items-center justify-content-center">
-    <div class="surface-card fadein p-4 shadow-8 border-round w-11 md:w-10 lg:w-8 xl:w-7">
-      <div>
-        <div class="row">
-          <div class="col-md-2 d-flex flex-column justify-content-center align-items-left" style="margin-right: -65px">
-            <img class="logo-img1" src="img/e-Rahn_Logo_FA-01.png" alt="erahn-logo" />
-          </div>
-          <!-- <div class="col-md-2 d-flex flex-column justify-content-center align-items-left">
-            <img class="logo-img2" src="img/Logo KoPKB_Final.png" alt="erahn-logo" />
-          </div> -->
-          <div class="col-md-2 d-flex flex-column justify-content-center align-items-left" style="margin-left: -65px">
+  <div class="login-page">
+    <div class="login-backdrop" aria-hidden="true"></div>
 
-          </div>
+    <div class="login-shell">
+      <section class="login-brand">
+        <div class="brand-mark">
+          <img src="img/e-Rahn_Logo_FA-01.png" alt="" class="brand-seal" />
+          <img src="img/e-rahn-lelong.png" alt="E-Rahn Lelong" class="brand-wordmark" />
         </div>
-      </div>
-      <div class="text-center mb-5">
-        <!-- <img class="logo-img" src="img/bidder.png" alt="erahn-logo" /> -->
-        <img class="logo-img3 mb-3" src="img/e-rahn-lelong.png" alt="erahn-logo">
-        <div class="text-200 text-3xl font-semibold mb-3">Log Masuk</div>
-        <span class="text-200 font-medium line-height-3">Belum punyai akaun?</span>
-        <router-link v-bind:to="{ name: 'register' }" class="font-medium ml-2 text-blue cursor-pointer">Daftar sekarang!
-        </router-link>
-      </div>
-      <form @submit.prevent="submit">
-        <div class="px-0 text-center md:px-8">
-          <div class="field grid">
-            <!-- <label for="firstname3" class="justify-content-end"
-              style="width: 170px">Username</label> -->
-            <div class="col">
-              <span class="p-input-icon-right">
-                <i class="pi pi-user" />
-                <InputText class="mb-2" v-model="form.username" type="text" placeholder="ID Pengguna" required>
-                </InputText>
-              </span>
+        <h1 class="brand-title">ArrahnBid</h1>
+        <p class="brand-copy">
+          Platform bidaan Ar-Rahn yang lebih pantas, jelas, dan selamat untuk anda.
+        </p>
+      </section>
+
+      <section class="login-panel">
+        <header class="panel-header">
+          <h2>Log Masuk</h2>
+          <p>
+            Belum punya akaun?
+            <router-link :to="{ name: 'register' }">Daftar sekarang</router-link>
+          </p>
+        </header>
+
+        <form class="login-form" @submit.prevent="doLogin">
+          <label class="field">
+            <span class="field-label">ID Pengguna</span>
+            <div class="field-control" :class="{ 'is-invalid': v$.form.username.$error }">
+              <User class="field-icon" :size="18" :stroke-width="1.75" />
+              <InputText
+                v-model="form.username"
+                type="text"
+                placeholder="Masukkan ID pengguna"
+                autocomplete="username"
+                required
+              />
             </div>
-            <InlineMessage class="flex-auto" v-if="v$.form.username.$error">Username diperlukan</InlineMessage>
-          </div>
-          <div class="field grid">
-            <!-- <label for="firstname3"
-              class="justify-content-end"
-              style="width: 170px">Kata Laluan</label> -->
-            <div class="col">
-              <span class="p-input-icon-left">
-                <i class="pi pi-user" />
-                <Password class="mb-2" v-model="form.password" placeholder="Katalaluan" toggleMask :feedback="false" />
-              </span>
+            <InlineMessage v-if="v$.form.username.$error" class="field-error">
+              Username diperlukan
+            </InlineMessage>
+          </label>
+
+          <label class="field">
+            <span class="field-label">Kata Laluan</span>
+            <div class="field-control" :class="{ 'is-invalid': v$.form.password.$error }">
+              <Lock class="field-icon" :size="18" :stroke-width="1.75" />
+              <InputText
+                v-model="form.password"
+                :type="showPassword ? 'text' : 'password'"
+                placeholder="Masukkan kata laluan"
+                autocomplete="current-password"
+                required
+              />
+              <button
+                class="reveal-btn"
+                type="button"
+                :aria-label="showPassword ? 'Sembunyikan kata laluan' : 'Tunjuk kata laluan'"
+                @click="showPassword = !showPassword"
+              >
+                <EyeOff v-if="showPassword" :size="18" :stroke-width="1.75" />
+                <Eye v-else :size="18" :stroke-width="1.75" />
+              </button>
             </div>
-            <InlineMessage class="flex-auto" v-if="v$.form.password.$error">Kata laluan diperlukan</InlineMessage>
-          </div>
-          <div class="">
-            <Button @click="doLogin()" type="submit" class="p-button-sm" label="Log Masuk" icon="pi pi-sign-in"
-              :loading="isLoading" iconPos="right"></Button>
-          </div>
-          <div class="mt-3">
-            <router-link v-bind:to="{ name: 'forgot-password' }">Lupa Katalaluan
+            <InlineMessage v-if="v$.form.password.$error" class="field-error">
+              Kata laluan diperlukan
+            </InlineMessage>
+          </label>
+
+          <div class="form-row">
+            <router-link class="forgot-link" :to="{ name: 'forgot-password' }">
+              Lupa kata laluan?
             </router-link>
           </div>
 
-          <div class="flex alin justify-content-center mt-4 text-hover">
-            <div class="btn btn-warning btn-sm">
-              <terms-and-conditions></terms-and-conditions>
-            </div>
-            <!-- <a class="btn btn-info btn-sm" href="https://lelong.arrahn.com.my"
-              >Pautan Sistem Lelong</a
-            > -->
-          </div>
-        </div>
-      </form>
+          <button class="submit-btn" type="submit" :disabled="isLoading">
+            <span>{{ isLoading ? "Sedang log masuk..." : "Log Masuk" }}</span>
+            <LoaderCircle v-if="isLoading" class="spin" :size="18" :stroke-width="2" />
+            <ArrowRight v-else :size="18" :stroke-width="2" />
+          </button>
+        </form>
+
+        <footer class="panel-footer">
+          <FileText :size="16" :stroke-width="1.75" />
+          <terms-and-conditions />
+        </footer>
+      </section>
     </div>
   </div>
 </template>
@@ -76,10 +94,20 @@
 import axios from "axios";
 import useVuelidate from "@vuelidate/core";
 import { required } from "@vuelidate/validators";
-import { useAuthenticationUserStore } from "@/store/modules/authentication"
+import { ArrowRight, Eye, EyeOff, FileText, LoaderCircle, Lock, User } from "@lucide/vue";
+import { useAuthenticationUserStore } from "@/store/modules/authentication";
 
 export default {
   name: "Login",
+  components: {
+    ArrowRight,
+    Eye,
+    EyeOff,
+    FileText,
+    LoaderCircle,
+    Lock,
+    User,
+  },
   data() {
     return {
       v$: useVuelidate(),
@@ -88,11 +116,12 @@ export default {
         password: "",
       },
       isLoading: false,
+      showPassword: false,
     };
   },
   setup() {
-    const authenticationStore = useAuthenticationUserStore()
-    return { authenticationStore }
+    const authenticationStore = useAuthenticationUserStore();
+    return { authenticationStore };
   },
   methods: {
     doLogin() {
@@ -102,7 +131,6 @@ export default {
         axios
           .post("/user/login", this.form)
           .then((response) => {
-            // console.log("doLogin", response);
             if (response.data.statusAkaun == 1) {
               localStorage.setItem("token", response.data.token);
               localStorage.setItem("id", response.data.user.id);
@@ -122,7 +150,7 @@ export default {
                 email: response.data.user.email,
                 notelbimbit: response.data.user.notelbimbit,
                 username: response.data.user.username,
-              })
+              });
               this.$router.push({ name: "home" });
             } else if (response.data.statusAkaun == 0) {
               this.$toast.add({
@@ -174,7 +202,6 @@ export default {
             this.isLoading = false;
           })
           .catch((response) => {
-            // alert(response.message);
             console.log(response);
             this.isLoading = false;
           });
@@ -193,45 +220,326 @@ export default {
 </script>
 
 <style scoped>
-.main-container {
-  /* background: linear-gradient(
-    135deg,
-    rgba(139, 198, 236, 0.3) 0%,
-    #9599e2 100%
-  ),
-  url("/src/assets/background_arrahn.jpg"); */
-  background-image: url("/src/assets/background-lelong.png");
-  background-color: #fec234;
-  background-position: center;
-  background-size: cover;
+@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Sora:wght@500;600;700&display=swap");
+
+.login-page {
+  --ink: #132a4f;
+  --navy: #1e417b;
+  --blue: #2f68c5;
+  --gold: #fec234;
+  --panel: rgba(255, 252, 247, 0.94);
+  --line: rgba(19, 42, 79, 0.12);
+  --muted: rgba(19, 42, 79, 0.68);
+
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  overflow: hidden;
+  font-family: "Manrope", sans-serif;
+  color: var(--ink);
 }
 
-.content-bg {
-  background: #fff9f9eb !important;
+.login-backdrop {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(115deg, rgba(19, 42, 79, 0.78) 0%, rgba(30, 65, 123, 0.55) 42%, rgba(254, 194, 52, 0.35) 100%),
+    url("/src/assets/background-lelong.png") center / cover no-repeat;
+  transform: scale(1.04);
+  animation: backdrop-drift 18s ease-in-out infinite alternate;
 }
 
-.logo-img {
-  color: white;
-  width: 180px;
-  height: 150px;
+.login-shell {
+  position: relative;
+  z-index: 1;
+  width: min(980px, 100%);
+  display: grid;
+  grid-template-columns: 1.05fr 0.95fr;
+  gap: 0;
+  border-radius: 28px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(10px);
+  animation: shell-enter 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 
-.logo-img1 {
-  width: 50px;
-  height: 50px;
+.login-brand {
+  padding: 3rem 2.75rem;
+  color: #fffdf8;
+  background:
+    linear-gradient(160deg, rgba(19, 42, 79, 0.28), rgba(47, 104, 197, 0.1)),
+    radial-gradient(circle at top left, rgba(254, 194, 52, 0.35), transparent 55%);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  min-height: 560px;
 }
 
-.logo-img2 {
-  width: 50px;
-  height: 60px;
+.brand-mark {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  margin-bottom: auto;
+  animation: rise 0.8s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 
-.logo-img3 {
-  width: 150px;
-  height: 30px;
+.brand-seal {
+  width: 52px;
+  height: 52px;
+  object-fit: contain;
+  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));
 }
 
-/* .border-round{
-  border-radius:50px;
-} */
+.brand-wordmark {
+  width: min(180px, 50vw);
+  height: auto;
+  object-fit: contain;
+}
+
+.brand-title {
+  margin: 0 0 0.75rem;
+  font-family: "Sora", sans-serif;
+  font-size: clamp(2.4rem, 4vw, 3.4rem);
+  font-weight: 700;
+  letter-spacing: -0.04em;
+  line-height: 1.05;
+  animation: rise 0.8s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.brand-copy {
+  margin: 0;
+  max-width: 28ch;
+  font-size: 1.05rem;
+  line-height: 1.55;
+  color: rgba(255, 253, 248, 0.88);
+  animation: rise 0.8s 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.login-panel {
+  background: var(--panel);
+  padding: 2.75rem 2.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  animation: rise 0.8s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.panel-header h2 {
+  margin: 0 0 0.4rem;
+  font-family: "Sora", sans-serif;
+  font-size: 1.85rem;
+  letter-spacing: -0.03em;
+}
+
+.panel-header p {
+  margin: 0 0 1.75rem;
+  color: var(--muted);
+}
+
+.panel-header a,
+.forgot-link,
+.panel-footer :deep(.terms-link) {
+  color: var(--blue);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.panel-header a:hover,
+.forgot-link:hover,
+.panel-footer :deep(.terms-link):hover {
+  color: var(--navy);
+  text-decoration: underline;
+}
+
+.login-form {
+  display: grid;
+  gap: 1rem;
+}
+
+.field {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.field-label {
+  font-size: 0.92rem;
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.field-control {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  min-height: 3.15rem;
+  padding: 0 0.95rem;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: #fff;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.field-control:focus-within {
+  border-color: var(--blue);
+  box-shadow: 0 0 0 3px rgba(47, 104, 197, 0.14);
+}
+
+.field-control.is-invalid {
+  border-color: #d14343;
+}
+
+.field-icon {
+  flex: 0 0 auto;
+  color: var(--navy);
+  opacity: 0.72;
+}
+
+.field-control :deep(.p-inputtext) {
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  border: 0 !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  padding: 0.85rem 0 !important;
+  font-family: inherit;
+  font-size: 0.98rem;
+  color: var(--ink);
+}
+
+.reveal-btn {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0.2rem;
+  border: 0;
+  background: transparent;
+  color: var(--navy);
+  opacity: 0.7;
+  cursor: pointer;
+  border-radius: 8px;
+}
+
+.reveal-btn:hover {
+  opacity: 1;
+  background: rgba(30, 65, 123, 0.06);
+}
+
+.field-error {
+  width: fit-content;
+}
+
+.form-row {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: -0.15rem;
+}
+
+.submit-btn {
+  margin-top: 0.35rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.55rem;
+  width: 100%;
+  min-height: 3.2rem;
+  border: 0;
+  border-radius: 14px;
+  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
+  color: #fff;
+  font-family: "Sora", sans-serif;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.2s ease, filter 0.2s ease;
+}
+
+.submit-btn:hover:not(:disabled) {
+  filter: brightness(1.05);
+  transform: translateY(-1px);
+}
+
+.submit-btn:disabled {
+  opacity: 0.8;
+  cursor: wait;
+}
+
+.panel-footer {
+  margin-top: 1.75rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  color: var(--muted);
+  font-size: 0.92rem;
+}
+
+.spin {
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes shell-enter {
+  from {
+    opacity: 0;
+    transform: translateY(18px) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(14px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes backdrop-drift {
+  from {
+    transform: scale(1.04) translate3d(0, 0, 0);
+  }
+  to {
+    transform: scale(1.08) translate3d(-1.2%, -0.8%, 0);
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 900px) {
+  .login-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .login-brand {
+    min-height: auto;
+    padding: 2rem 1.6rem 1.4rem;
+  }
+
+  .brand-title {
+    font-size: 2.2rem;
+  }
+
+  .brand-copy {
+    max-width: none;
+  }
+
+  .login-panel {
+    padding: 1.75rem 1.4rem 2rem;
+  }
+}
 </style>
diff --git a/src/components/authentication/TheRegister.vue b/src/components/authentication/TheRegister.vue
index b21b07e..c76c481 100644
--- a/src/components/authentication/TheRegister.vue
+++ b/src/components/authentication/TheRegister.vue
@@ -1,311 +1,199 @@
 <template>
   <Toast :breakpoints="{ '767px': { width: '100%', right: '0', left: '0' } }" />
-  <div class="main-container">
-    <div
-      class="flex min-h-screen align-items-center justify-content-center p-5"
-    >
-      <div
-        class="
-          surface-card
-          fadein
-          p-4
-          shadow-2
-          border-round
-          w-11
-          md:w-10
-          lg:w-10
-          xl:w-8
-        "
-      >
-        <div class="text-center mb-3">
-          <div class="text-900 text-3xl font-semibold mb-3">            
-            <img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" />
-            <div class="text-200 text-3xl font-semibold mb-3 mt-3">Daftar Akaun</div>
-          </div>
-          <!-- <span class="text-600 font-medium line-height-3"
-            >Sudah punyai akaun?</span
-          >
-          <router-link
-            v-bind:to="{ name: 'login' }"
-            class="font-medium no-underline ml-2 text-blue-500 cursor-pointer"
-            >Log masuk sekarang!</router-link
-          > -->
+  <div class="register-page">
+    <div class="register-backdrop" aria-hidden="true"></div>
+
+    <div class="register-shell">
+      <section class="register-brand">
+        <div class="brand-mark">
+          <img src="img/e-Rahn_Logo_FA-01.png" alt="" class="brand-seal" />
+          <img src="img/e-rahn-lelong.png" alt="E-Rahn Lelong" class="brand-wordmark" />
         </div>
-        <!-- <h5>Daftar Akaun</h5> -->
-        <div class="grid">
-          <div class="col-12 lg:col-6">
-            <div class="field text-200">
-              <label for="name">Nama</label>
-              <InputText
-                id="name"
-                type="text"
-                v-model="form.name"
-                class="
-                  text-base text-color
-                  surface-overlay
-                  p-2
-                  border-1 border-solid
-                  surface-border
-                  border-round
-                  appearance-none
-                  outline-none
-                  focus:border-primary
-                  w-full
-                "
-              ></InputText>
-              <InlineMessage class="mt-1" v-if="v$.form.name.$error"
-                >Nama diperlukan</InlineMessage
-              >
-            </div>
-          </div>
-          <div class="col-12 lg:col-6">
-            <div class="field text-200">
-              <label for="nokp">No Kad Pengenalan</label>
-              <!-- <select
-                class="p-0 mb-2 form-select"
-                style="width: 190px; border: none"
-              >
-                <option selected value="nokp">No Kad Pengenalan</option>
-                <option value="passpor">No Passport</option>
-              </select> -->
-              <InputText
-                id="nokp"
-                type="text"
-                v-model="form.nokp"
-                class="
-                  text-base text-color
-                  surface-overlay
-                  p-2
-                  border-1 border-solid
-                  surface-border
-                  border-round
-                  appearance-none
-                  outline-none
-                  focus:border-primary
-                  w-full
-                "
-              ></InputText>
-              <InlineMessage class="mt-1" v-if="v$.form.nokp.$error"
-                >Semak No KP</InlineMessage
-              >
-            </div>
-          </div>
-          <div class="col-12">
-            <div class="field text-200">
-              <label for="alamat">Alamat</label>
-              <Textarea
-                id="alamat"
-                v-model="form.alamat"
-                class="
-                  text-base text-color
-                  surface-overlay
-                  p-2
-                  border-1 border-solid
-                  surface-border
-                  border-round
-                  appearance-none
-                  outline-none
-                  focus:border-primary
-                  w-full
-                "
-              ></Textarea>
-              <InlineMessage class="mt-1" v-if="v$.form.alamat.$error"
-                >Alamat diperlukan</InlineMessage
-              >
-            </div>
-          </div>
-          <div class="col-12 lg:col-6">
-            <div class="field text-200">
-              <label for="notelbimbit">No Telefon</label>
-              <MazPhoneNumberInput
-                v-model="form.notelbimbit"
-                show-code-on-list
-                :fetch-country="true"
-                :preferred-countries="['MY']"
-                :translations="{
-                  countrySelector: {
-                    placeholder: 'Pilih Negara',
-                    error: 'Choose country',
-                  },
-                  phoneInput: {
-                    placeholder: 'Nombor Telefon',
-                  },
-                }"
-                :no-example="true"
-                @update="results = $event"
-              />
-              <InlineMessage class="mt-1" v-if="v$.form.notelbimbit.$error"
-                >No telefon diperlukan</InlineMessage
-              >
-            </div>
-          </div>
-          <div class="col-12 lg:col-6">
-            <div class="field text-200">
-              <label for="email">Emel</label>
-              <InputText
-                id="email"
-                type="text"
-                v-model="form.email"
-                class="
-                  text-base text-color
-                  surface-overlay
-                  p-2
-                  border-1 border-solid
-                  surface-border
-                  border-round
-                  appearance-none
-                  outline-none
-                  focus:border-primary
-                  w-full
-                  h-match-phone-number
-                "
-              ></InputText>
-              <InlineMessage class="mt-1" v-if="v$.form.email.$error"
-                >Sila isi emel yang sah</InlineMessage
-              >
-            </div>
-          </div>
-          <div class="col-12 lg:col-6">
-            <div class="field text-200">
-              <p class="mb-0" for="username">Username</p>
-              <InputText
-                id="username"
-                type="text"
-                v-model="form.username"
-                class="
-                  text-base text-color
-                  surface-overlay
-                  p-2
-                  border-1 border-solid
-                  surface-border
-                  border-round
-                  appearance-none
-                  outline-none
-                  focus:border-primary
-                  w-full
-                  h-match-password
-                "
-              ></InputText>
-              <InlineMessage class="mt-1" v-if="v$.form.username.$error"
-                >Username diperlukan</InlineMessage
-              >
-            </div>
-          </div>
-          <div class="col-12 lg:col-6">
-            <div class="field text-200">
-              <p class="mb-0">Kata Laluan</p>
-              <div class="p-input-icon-right">
-                <i class="pi pi-user" />
-                <Password
-                  v-model="form.password"
-                  toggleMask
-                  :feedback="false"
-                  class="
-                    text-base text-color
-                    surface-overlay surface-border
-                    border-round
-                    appearance-none
-                    outline-none
-                    focus:border-primary
-                    w-full
-                  "
-                />
-              </div>
-              <InlineMessage class="mt-1" v-if="v$.form.password.$error"
-                >Kata laluan diperlukan & mestilah 8 huruf</InlineMessage
-              >
-            </div>
-          </div>
-          <!-- <div class="col-12">
-            <div class="field">
-              <label for="frontic">Kad Pengenalan Hadapan</label>
-              <input
-                class="form-control"
-                type="file"
-                id="formFile"
-                ref="formFileRef"
-                @change="readImage()"
-              />
-              <InlineMessage class="mt-1" v-if="v$.form.images.file1.$error"
-              >Kad pengenalan hadapan diperlukan</InlineMessage
-            >
-            </div>
-          </div>
-          <div class="col-12">
-            <div class="field">
-              <label for="backic">Kad Pengenalan Belakang</label>
-              <input class="form-control" type="file" />
-              <InlineMessage class="mt-1" v-if="v$.form.images.file2.$error"
-              >Kad pengenalan belakang diperlukan</InlineMessage
-            >
-            </div>
-          </div> -->
-          <div class="col-12">
-            <div class="mt-3 mb-1">
-              <label>
-                <input type="checkbox" v-model="form.register_agree" />
-                Setuju Dengan <terms-and-conditions></terms-and-conditions>
+        <h1 class="brand-title">ArrahnBid</h1>
+        <p class="brand-copy">
+          Daftar sekali untuk mula membida dengan akaun yang disahkan dan selamat.
+        </p>
+      </section>
+
+      <section class="register-panel">
+        <header class="panel-header">
+          <h2>Daftar Akaun</h2>
+          <p>
+            Sudah punya akaun?
+            <router-link :to="{ name: 'login' }">Log masuk sekarang</router-link>
+          </p>
+        </header>
+
+        <nav class="stepper" aria-label="Langkah pendaftaran">
+          <template v-for="(step, index) in steps" :key="step.key">
+            <button class="stepper-item" type="button" :class="{
+              'is-active': activeStep === index,
+              'is-done': activeStep > index,
+            }" :aria-current="activeStep === index ? 'step' : undefined" @click="goToStep(index)">
+              <span class="stepper-index">
+                <Check v-if="activeStep > index" :size="14" :stroke-width="2.5" />
+                <span v-else>{{ index + 1 }}</span>
+              </span>
+              <span class="stepper-meta">
+                <span class="stepper-label">{{ step.label }}</span>
+                <span class="stepper-hint">{{ step.hint }}</span>
+              </span>
+            </button>
+            <div v-if="index < steps.length - 1" class="stepper-line" :class="{ 'is-done': activeStep > index }" />
+          </template>
+        </nav>
+
+        <form class="register-form" @submit.prevent="onPrimaryAction">
+          <div v-show="activeStep === 0" class="step-panel">
+            <div class="form-grid">
+              <label class="field">
+                <span class="field-label">Nama</span>
+                <div class="field-control" :class="{ 'is-invalid': v$.form.name.$error }">
+                  <User class="field-icon" :size="18" :stroke-width="1.75" />
+                  <InputText id="name" v-model="form.name" type="text" placeholder="Nama penuh" autocomplete="name" />
+                </div>
+                <InlineMessage v-if="v$.form.name.$error" class="field-error">
+                  Nama diperlukan
+                </InlineMessage>
+              </label>
+
+              <label class="field">
+                <span class="field-label">No Kad Pengenalan</span>
+                <div class="field-control" :class="{ 'is-invalid': v$.form.nokp.$error }">
+                  <IdCard class="field-icon" :size="18" :stroke-width="1.75" />
+                  <InputText id="nokp" v-model="form.nokp" type="text" placeholder="12 digit tanpa dash"
+                    inputmode="numeric" />
+                </div>
+                <InlineMessage v-if="v$.form.nokp.$error" class="field-error">
+                  Semak No KP
+                </InlineMessage>
+              </label>
+
+              <label class="field field-span">
+                <span class="field-label">Alamat</span>
+                <div class="field-control field-control-area" :class="{ 'is-invalid': v$.form.alamat.$error }">
+                  <MapPin class="field-icon field-icon-top" :size="18" :stroke-width="1.75" />
+                  <Textarea id="alamat" v-model="form.alamat" rows="3" placeholder="Alamat penuh" autoResize />
+                </div>
+                <InlineMessage v-if="v$.form.alamat.$error" class="field-error">
+                  Alamat diperlukan
+                </InlineMessage>
               </label>
             </div>
-            <InlineMessage v-if="v$.form.register_agree.$error"
-              >Anda mestilah bersetuju dengan terma & syarat.</InlineMessage
-            >
           </div>
-          <div class="col-12 text-center">
-            <Button
-              class="p-button-sm p-button-outlined m-1"
-              icon="pi pi-times"
-              iconPos="right"
-              label="Batal Pendaftaran"
-              @click="toLogin()"
-            />
-            <Button
-              class="p-button-sm m-1"
-              label="Teruskan"
-              icon="pi pi-sign-in"
-              iconPos="right"
-              @click="openModalTNC()"
-            />
+
+          <div v-show="activeStep === 1" class="step-panel">
+            <div class="form-grid">
+              <label class="field field-span">
+                <span class="field-label">No Telefon</span>
+                <div class="field-control field-control-phone" :class="{ 'is-invalid': v$.form.notelbimbit.$error }">
+                  <MazPhoneNumberInput v-model="form.notelbimbit" show-code-on-list :fetch-country="true"
+                    :preferred-countries="['MY']" :translations="{
+                      countrySelector: {
+                        placeholder: 'Pilih Negara',
+                        error: 'Choose country',
+                      },
+                      phoneInput: {
+                        placeholder: 'Nombor Telefon',
+                      },
+                    }" :no-example="true" @update="results = $event" />
+                </div>
+                <InlineMessage v-if="v$.form.notelbimbit.$error" class="field-error">
+                  No telefon diperlukan
+                </InlineMessage>
+              </label>
+
+              <label class="field field-span">
+                <span class="field-label">Emel</span>
+                <div class="field-control" :class="{ 'is-invalid': v$.form.email.$error }">
+                  <Mail class="field-icon" :size="18" :stroke-width="1.75" />
+                  <InputText id="email" v-model="form.email" type="email" placeholder="nama@emel.com"
+                    autocomplete="email" />
+                </div>
+                <InlineMessage v-if="v$.form.email.$error" class="field-error">
+                  Sila isi emel yang sah
+                </InlineMessage>
+              </label>
+            </div>
           </div>
-          <div class="col-12 text-center">
-            <span class="text-200 font-medium line-height-3"
-            >Sudah punyai akaun?
-            </span>
-            <router-link
-            v-bind:to="{ name: 'login' }"
-            class="font-medium no-underline ml-2 text-teal-600 cursor-pointer"
-            >Log masuk sekarang!</router-link>
-          </div>      
-        </div>
-      </div>
-      <Dialog
-        header="Terma & Syarat"
-        v-model:visible="isDisplayTNC"
-        :style="{ width: '80vw' }"
-        :modal="true"
-      >
-        <div>
-          <terms-and-conditions-details></terms-and-conditions-details>
-        </div>
-        <template #footer>
-          <Button
-            label="Batal Pendaftaran"
-            icon="pi pi-times"
-            iconPos="right"
-            @click="closeModalTNC()"
-            class="p-button-text"
-          />
-          <Button
-            class="p-button-sm"
-            label="Daftar Sekarang"
-            :loading="isLoading"
-            icon="pi pi-sign-in"
-            iconPos="right"
-            @click="doRegister()"
-          ></Button>
-        </template>
-      </Dialog>
+
+          <div v-show="activeStep === 2" class="step-panel">
+            <div class="form-grid">
+              <label class="field field-span">
+                <span class="field-label">Username</span>
+                <div class="field-control" :class="{ 'is-invalid': v$.form.username.$error }">
+                  <UserRound class="field-icon" :size="18" :stroke-width="1.75" />
+                  <InputText id="username" v-model="form.username" type="text" placeholder="ID pengguna"
+                    autocomplete="username" />
+                </div>
+                <InlineMessage v-if="v$.form.username.$error" class="field-error">
+                  Username diperlukan
+                </InlineMessage>
+              </label>
+
+              <label class="field field-span">
+                <span class="field-label">Kata Laluan</span>
+                <div class="field-control" :class="{ 'is-invalid': v$.form.password.$error }">
+                  <Lock class="field-icon" :size="18" :stroke-width="1.75" />
+                  <InputText v-model="form.password" :type="showPassword ? 'text' : 'password'"
+                    placeholder="Minimum 8 aksara" autocomplete="new-password" />
+                  <button class="reveal-btn" type="button"
+                    :aria-label="showPassword ? 'Sembunyikan kata laluan' : 'Tunjuk kata laluan'"
+                    @click="showPassword = !showPassword">
+                    <EyeOff v-if="showPassword" :size="18" :stroke-width="1.75" />
+                    <Eye v-else :size="18" :stroke-width="1.75" />
+                  </button>
+                </div>
+                <InlineMessage v-if="v$.form.password.$error" class="field-error">
+                  Kata laluan diperlukan & mestilah 8 huruf
+                </InlineMessage>
+              </label>
+            </div>
+
+            <label class="agree-row">
+              <input v-model="form.register_agree" type="checkbox" class="agree-check" />
+              <span class="agree-text">
+                Setuju dengan
+                <terms-and-conditions />
+              </span>
+            </label>
+            <InlineMessage v-if="v$.form.register_agree.$error" class="field-error">
+              Anda mestilah bersetuju dengan terma & syarat.
+            </InlineMessage>
+          </div>
+
+          <div class="actions">
+            <button v-if="activeStep === 0" class="ghost-btn" type="button" @click="toLogin">
+              <X :size="18" :stroke-width="2" />
+              <span>Batal</span>
+            </button>
+            <button v-else class="ghost-btn" type="button" @click="prevStep">
+              <ChevronLeft :size="18" :stroke-width="2" />
+              <span>Kembali</span>
+            </button>
+
+            <button class="submit-btn" type="submit">
+              <span>{{ activeStep === steps.length - 1 ? "Teruskan" : "Seterusnya" }}</span>
+              <ArrowRight :size="18" :stroke-width="2" />
+            </button>
+          </div>
+        </form>
+      </section>
     </div>
+
+    <Dialog header="Terma & Syarat" v-model:visible="isDisplayTNC" :style="{ width: 'min(900px, 92vw)' }" :modal="true"
+      :dismissableMask="true" class="register-tnc-dialog">
+      <div class="tnc-dialog-body">
+        <terms-and-conditions-details />
+      </div>
+      <template #footer>
+        <div class="tnc-dialog-footer">
+          <Button label="Batal Pendaftaran" class="p-button-text p-button-secondary" @click="closeModalTNC" />
+          <Button label="Daftar Sekarang" class="p-button-sm" icon="pi pi-check" :loading="isLoading"
+            @click="doRegister" />
+        </div>
+      </template>
+    </Dialog>
   </div>
 </template>
 
@@ -313,12 +201,46 @@
 import axios from "axios";
 import useVuelidate from "@vuelidate/core";
 import { required, email, minLength, maxLength } from "@vuelidate/validators";
+import {
+  ArrowRight,
+  Check,
+  ChevronLeft,
+  Eye,
+  EyeOff,
+  IdCard,
+  LoaderCircle,
+  Lock,
+  Mail,
+  MapPin,
+  User,
+  UserRound,
+  X,
+} from "@lucide/vue";
 import TermsAndConditionsDetails from "./TermsAndConditionsDetails.vue";
-import { useAuthenticationUserStore } from "@/store/modules/authentication"
+import { useAuthenticationUserStore } from "@/store/modules/authentication";
+
+const STEP_FIELDS = [
+  ["name", "nokp", "alamat"],
+  ["notelbimbit", "email"],
+  ["username", "password", "register_agree"],
+];
 
 export default {
   name: "Register",
   components: {
+    ArrowRight,
+    Check,
+    ChevronLeft,
+    Eye,
+    EyeOff,
+    IdCard,
+    LoaderCircle,
+    Lock,
+    Mail,
+    MapPin,
+    User,
+    UserRound,
+    X,
     "terms-and-conditions-details": TermsAndConditionsDetails,
   },
   data() {
@@ -327,6 +249,13 @@ export default {
       alertMessages: Array,
       isLoading: false,
       isDisplayTNC: false,
+      showPassword: false,
+      activeStep: 0,
+      steps: [
+        { key: "personal", label: "Peribadi", hint: "Nama & alamat" },
+        { key: "contact", label: "Hubungi", hint: "Telefon & emel" },
+        { key: "account", label: "Akaun", hint: "Login & syarat" },
+      ],
       form: {
         name: "",
         username: "",
@@ -336,29 +265,67 @@ export default {
         notelbimbit: "",
         register_agree: null,
         alamat: "",
-        // password_confirmation: "",
         images: {
           file1: {
             file_type: "png",
             filename: "imagein64string",
-            // file_type: null,
-            // filename: null,
           },
           file2: {
             file_type: "jpg",
             filename: "imagein64string",
-            // file_type: null,
-            // filename: null,
           },
         },
       },
     };
   },
   setup() {
-    const authenticationStore = useAuthenticationUserStore()
-    return { authenticationStore }
+    const authenticationStore = useAuthenticationUserStore();
+    return { authenticationStore };
   },
   methods: {
+    validateStep(stepIndex) {
+      const fields = STEP_FIELDS[stepIndex] || [];
+      let valid = true;
+      fields.forEach((field) => {
+        this.v$.form[field].$touch();
+        if (this.v$.form[field].$invalid) {
+          valid = false;
+        }
+      });
+      return valid;
+    },
+    goToStep(index) {
+      if (index === this.activeStep) return;
+      if (index < this.activeStep) {
+        this.activeStep = index;
+        return;
+      }
+      for (let i = this.activeStep; i < index; i += 1) {
+        if (!this.validateStep(i)) {
+          this.activeStep = i;
+          return;
+        }
+      }
+      this.activeStep = index;
+    },
+    prevStep() {
+      if (this.activeStep > 0) {
+        this.activeStep -= 1;
+      }
+    },
+    nextStep() {
+      if (!this.validateStep(this.activeStep)) return;
+      if (this.activeStep < this.steps.length - 1) {
+        this.activeStep += 1;
+      }
+    },
+    onPrimaryAction() {
+      if (this.activeStep < this.steps.length - 1) {
+        this.nextStep();
+        return;
+      }
+      this.openModalTNC();
+    },
     doRegister() {
       this.v$.$validate();
       if (!this.v$.$error) {
@@ -366,7 +333,6 @@ export default {
         axios
           .post("/register", this.form)
           .then((response) => {
-            // console.log("doRegister", response);
             if (response.data.success == true) {
               localStorage.setItem("token", response.data.token);
               localStorage.setItem("id", response.data.user.id);
@@ -386,7 +352,7 @@ export default {
                 email: response.data.user.email,
                 notelbimbit: response.data.user.notelbimbit,
                 username: response.data.user.username,
-              })
+              });
               this.$router.push({ name: "home" });
               this.isLoading = false;
             } else if (response.data.success == false) {
@@ -425,6 +391,13 @@ export default {
       this.v$.$validate();
       if (!this.v$.$error) {
         this.isDisplayTNC = true;
+      } else {
+        for (let i = 0; i < STEP_FIELDS.length; i += 1) {
+          if (!this.validateStep(i)) {
+            this.activeStep = i;
+            break;
+          }
+        }
       }
     },
     closeModalTNC() {
@@ -449,14 +422,6 @@ export default {
         notelbimbit: { required, minLengthValue: minLength(8) },
         register_agree: { required },
         alamat: { required },
-        // images: {
-        //   file1: {
-        //     filename: { required },
-        //   },
-        //   file2: {
-        //     filename: { required },
-        //   },
-        // },
       },
     };
   },
@@ -464,22 +429,524 @@ export default {
 </script>
 
 <style scoped>
-.main-container {
-  background: url("/src/assets/background-lelong.png");
-  background-position: center;
-  background-size: cover;
+@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Sora:wght@500;600;700&display=swap");
+
+.register-page {
+  --ink: #132a4f;
+  --navy: #1e417b;
+  --blue: #2f68c5;
+  --gold: #fec234;
+  --panel: rgba(255, 252, 247, 0.96);
+  --line: rgba(19, 42, 79, 0.12);
+  --muted: rgba(19, 42, 79, 0.68);
+
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  overflow: hidden;
+  font-family: "Manrope", sans-serif;
+  color: var(--ink);
 }
 
-.logo-img {
-  width: 300px;
-  height: 55px;
+.register-backdrop {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(115deg, rgba(19, 42, 79, 0.78) 0%, rgba(30, 65, 123, 0.55) 42%, rgba(254, 194, 52, 0.35) 100%),
+    url("/src/assets/background-lelong.png") center / cover no-repeat;
+  transform: scale(1.04);
+  animation: backdrop-drift 18s ease-in-out infinite alternate;
 }
 
-.h-match-phone-number {
-  height: 48px;
+.register-shell {
+  position: relative;
+  z-index: 1;
+  width: min(1120px, 100%);
+  display: grid;
+  grid-template-columns: 0.9fr 1.2fr;
+  border-radius: 28px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(10px);
+  animation: shell-enter 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 
-.h-match-password {
-  height: 42px;
+.register-brand {
+  padding: 2.75rem;
+  color: #fffdf8;
+  background:
+    linear-gradient(160deg, rgba(19, 42, 79, 0.28), rgba(47, 104, 197, 0.1)),
+    radial-gradient(circle at top left, rgba(254, 194, 52, 0.35), transparent 55%);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  min-height: 640px;
+}
+
+.brand-mark {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  margin-bottom: auto;
+  animation: rise 0.8s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.brand-seal {
+  width: 52px;
+  height: 52px;
+  object-fit: contain;
+  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));
+}
+
+.brand-wordmark {
+  width: min(180px, 50vw);
+  height: auto;
+  object-fit: contain;
+}
+
+.brand-title {
+  margin: 0 0 0.75rem;
+  font-family: "Sora", sans-serif;
+  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
+  font-weight: 700;
+  letter-spacing: -0.04em;
+  line-height: 1.05;
+  animation: rise 0.8s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.brand-copy {
+  margin: 0;
+  max-width: 28ch;
+  font-size: 1.05rem;
+  line-height: 1.55;
+  color: rgba(255, 253, 248, 0.88);
+  animation: rise 0.8s 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.register-panel {
+  background: var(--panel);
+  padding: 2.25rem 2.25rem 2rem;
+  max-height: min(92vh, 900px);
+  overflow-y: auto;
+  animation: rise 0.8s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.panel-header h2 {
+  margin: 0 0 0.35rem;
+  font-family: "Sora", sans-serif;
+  font-size: 1.75rem;
+  letter-spacing: -0.03em;
+}
+
+.panel-header p {
+  margin: 0 0 1.2rem;
+  color: var(--muted);
+}
+
+.panel-header a {
+  color: var(--blue);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.panel-header a:hover {
+  color: var(--navy);
+  text-decoration: underline;
+}
+
+.agree-text {
+  color: var(--muted);
+}
+
+.agree-row :deep(.terms-link) {
+  color: var(--blue) !important;
+  font-weight: 700;
+  text-decoration: underline;
+}
+
+.agree-row :deep(.terms-link):hover {
+  color: var(--navy) !important;
+}
+
+.stepper {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr auto 1fr;
+  align-items: center;
+  gap: 0.45rem;
+  margin-bottom: 1.35rem;
+}
+
+.stepper-item {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  min-width: 0;
+  padding: 0.35rem;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  color: var(--muted);
+}
+
+.stepper-index {
+  flex: 0 0 auto;
+  width: 1.85rem;
+  height: 1.85rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  background: #fff;
+  font-family: "Sora", sans-serif;
+  font-size: 0.82rem;
+  font-weight: 700;
+  color: var(--navy);
+}
+
+.stepper-meta {
+  display: grid;
+  gap: 0.05rem;
+  min-width: 0;
+}
+
+.stepper-label {
+  font-family: "Sora", sans-serif;
+  font-size: 0.86rem;
+  font-weight: 600;
+  color: var(--ink);
+  white-space: nowrap;
+}
+
+.stepper-hint {
+  font-size: 0.74rem;
+  color: var(--muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.stepper-item.is-active .stepper-index {
+  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
+  border-color: transparent;
+  color: #fff;
+}
+
+.stepper-item.is-done .stepper-index {
+  background: rgba(47, 104, 197, 0.12);
+  border-color: rgba(47, 104, 197, 0.28);
+  color: var(--blue);
+}
+
+.stepper-line {
+  height: 2px;
+  background: var(--line);
+  border-radius: 999px;
+}
+
+.stepper-line.is-done {
+  background: linear-gradient(90deg, var(--navy), var(--blue));
+}
+
+.register-form {
+  display: grid;
+  gap: 1rem;
+}
+
+.step-panel {
+  animation: rise 0.35s ease both;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.95rem 1rem;
+}
+
+.field {
+  display: grid;
+  gap: 0.4rem;
+}
+
+.field-span {
+  grid-column: 1 / -1;
+}
+
+.field-label {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.field-control {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  min-height: 3.05rem;
+  padding: 0 0.9rem;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: #fff;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.field-control-area {
+  align-items: flex-start;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  min-height: 0;
+}
+
+.field-control-phone {
+  padding: 0.2rem 0.45rem;
+}
+
+.field-control:focus-within {
+  border-color: var(--blue);
+  box-shadow: 0 0 0 3px rgba(47, 104, 197, 0.14);
+}
+
+.field-control.is-invalid {
+  border-color: #d14343;
+}
+
+.field-icon {
+  flex: 0 0 auto;
+  color: var(--navy);
+  opacity: 0.72;
+}
+
+.field-icon-top {
+  margin-top: 0.2rem;
+}
+
+.field-control :deep(.p-inputtext),
+.field-control :deep(.p-inputtextarea) {
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  border: 0 !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  padding: 0.8rem 0 !important;
+  font-family: inherit;
+  font-size: 0.96rem;
+  color: var(--ink);
+}
+
+.field-control :deep(.p-inputtextarea) {
+  resize: vertical;
+  min-height: 4.5rem;
+}
+
+.field-control-phone :deep(.m-phone-number-input),
+.field-control-phone :deep(.m-input-wrapper),
+.field-control-phone :deep(.maz-border),
+.field-control-phone :deep(.m-input) {
+  width: 100%;
+  border: 0 !important;
+  box-shadow: none !important;
+  background: transparent !important;
+}
+
+.field-control-phone :deep(.m-phone-number-input) {
+  gap: 0.35rem;
+}
+
+.reveal-btn {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0.2rem;
+  border: 0;
+  background: transparent;
+  color: var(--navy);
+  opacity: 0.7;
+  cursor: pointer;
+  border-radius: 8px;
+}
+
+.reveal-btn:hover {
+  opacity: 1;
+  background: rgba(30, 65, 123, 0.06);
+}
+
+.field-error {
+  width: fit-content;
+}
+
+.agree-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.65rem;
+  margin-top: 0.25rem;
+  color: var(--muted);
+  font-size: 0.94rem;
+  cursor: pointer;
+}
+
+.agree-check {
+  margin-top: 0.2rem;
+  width: 1rem;
+  height: 1rem;
+  accent-color: var(--blue);
+}
+
+.actions {
+  display: grid;
+  grid-template-columns: 1fr 1.3fr;
+  gap: 0.75rem;
+  margin-top: 0.35rem;
+}
+
+.ghost-btn,
+.submit-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 3.05rem;
+  border-radius: 14px;
+  font-family: "Sora", sans-serif;
+  font-size: 0.98rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease;
+}
+
+.ghost-btn {
+  border: 1px solid var(--line);
+  background: #fff;
+  color: var(--navy);
+}
+
+.ghost-btn:hover {
+  background: rgba(30, 65, 123, 0.05);
+}
+
+.submit-btn {
+  border: 0;
+  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
+  color: #fff;
+}
+
+.submit-btn:hover:not(:disabled) {
+  filter: brightness(1.05);
+  transform: translateY(-1px);
+}
+
+.submit-btn:disabled {
+  opacity: 0.8;
+  cursor: wait;
+}
+
+.submit-btn-inline {
+  min-height: 2.6rem;
+  padding: 0 1rem;
+}
+
+.spin {
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes shell-enter {
+  from {
+    opacity: 0;
+    transform: translateY(18px) scale(0.985);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(14px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes backdrop-drift {
+  from {
+    transform: scale(1.04) translate3d(0, 0, 0);
+  }
+
+  to {
+    transform: scale(1.08) translate3d(-1.2%, -0.8%, 0);
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.tnc-dialog-body {
+  max-height: min(60vh, 520px);
+  overflow: auto;
+  padding-right: 0.25rem;
+}
+</style>
+
+<style>
+/* Dialog is appended to body, so footer layout must stay unscoped. */
+.register-tnc-dialog.p-dialog .tnc-dialog-footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.register-tnc-dialog.p-dialog .p-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
+
+<style scoped>
+@media (max-width: 960px) {
+  .register-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .register-brand {
+    min-height: auto;
+    padding: 1.75rem 1.5rem 1.25rem;
+  }
+
+  .register-panel {
+    max-height: none;
+    padding: 1.5rem 1.25rem 1.75rem;
+  }
+
+  .form-grid,
+  .actions {
+    grid-template-columns: 1fr;
+  }
+
+  .stepper {
+    grid-template-columns: 1fr;
+    gap: 0.55rem;
+  }
+
+  .stepper-line {
+    display: none;
+  }
 }
 </style>
diff --git a/src/components/policy/ThePolicy.vue b/src/components/policy/ThePolicy.vue
index e56a518..3579862 100644
--- a/src/components/policy/ThePolicy.vue
+++ b/src/components/policy/ThePolicy.vue
@@ -11,12 +11,7 @@
               <p>
                 Berikut merupakan video panduan untuk penggunaan ArrahnBid. Sila
                 tonton
-                <a
-                  class="font-bold"
-                  target="_blank"
-                  href="https://youtu.be/lucYE9bM_PY"
-                  >video</a
-                >
+                <a class="font-bold" target="_blank" href="https://youtu.be/lucYE9bM_PY">video</a>
                 ini untuk memahami cara penggunaan.
               </p>
               <div class="youtube-wrap flex justify-content-center overflow-x-auto">
@@ -28,14 +23,12 @@
             </TabPanel>
             <TabPanel :header="'Hubungi Kami'">
               <div class="mt-5">
-                <div
-                  class="
+                <div class="
                     grid
                     col-11 col-offset-1
                     lg:col-8 lg:col-offset-2
                     justify-content-center
-                  "
-                >
+                  ">
                   <div class="col-12 lg:col-5 text-start text-400"><i class="pi pi-phone"></i> Hotline</div>
                   <div class="col-12 lg:col-6 text-start value-form">1300-22-4343</div>
                   <div class="col-12 lg:col-5 text-start text-400"><i class="pi pi-pencil"></i> Emel</div>
diff --git a/src/main.js b/src/main.js
index 0332ca7..fd36491 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,13 +4,15 @@ import Master from './Master.vue'
 import router from './router'
 // import useVuelidate from '@vuelidate/core'
 import './interceptors/axios'
-import './styles/primevue-bootstrap.css'
+import "bootstrap/dist/css/bootstrap.css"
 import "bootstrap/dist/js/bootstrap.js"
 import 'bootstrap-icons/font/bootstrap-icons.css'
 import VueSweetalert2 from 'vue-sweetalert2';
 import 'sweetalert2/dist/sweetalert2.min.css';
 import PrimeVue from 'primevue/config';
 
+import '../public/themes/lara-light-blue/theme.css'
+import './styles/primevue-bootstrap.css'
 import 'primeicons/primeicons.css'
 import 'primeflex/primeflex.css'
 import ToastService from 'primevue/toastservice';
diff --git a/src/styles/primevue-bootstrap.css b/src/styles/primevue-bootstrap.css
index 0fcb4dc..5b68065 100644
--- a/src/styles/primevue-bootstrap.css
+++ b/src/styles/primevue-bootstrap.css
@@ -1,13 +1,49 @@
 /*
-  PrimeVue 3.4x+ ships component structure CSS inside the theme under @layer primevue.
-  Unlayered Bootstrap would otherwise override those rules (e.g. TabView becomes a bullet list).
+  Keep the project's existing Bootstrap + public theme colors.
+  Newer PrimeVue emptied primevue.min.css, so TabView layout rules are
+  patched here instead of switching to the layered node_modules theme
+  (which overrides login and brand colors).
 */
-@layer bootstrap, primevue;
 
-@import "bootstrap/dist/css/bootstrap.css" layer(bootstrap);
-@import "primevue/resources/themes/lara-light-blue/theme.css";
-
-:root {
-  --primary-color: #2f68c5;
-  --primary-color-text: #ffffff;
+.p-tabview-nav-container {
+  position: relative;
+}
+
+.p-tabview-nav-content {
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+}
+
+.p-tabview-nav-content::-webkit-scrollbar {
+  display: none;
+}
+
+.p-tabview .p-tabview-nav {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  flex: 1 1 auto;
+}
+
+.p-tabview .p-tabview-nav li {
+  margin-right: 0;
+}
+
+.p-tabview .p-tabview-nav li .p-tabview-nav-link,
+.p-tabview .p-tabview-header-action {
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  position: relative;
+  text-decoration: none;
+  overflow: hidden;
+}
+
+.p-tabview .p-tabview-title {
+  line-height: 1;
+  white-space: nowrap;
 }