diff --git a/frontend/public/bg.jpg b/frontend/public/bg.jpg
new file mode 100644
index 0000000..ef547a4
Binary files /dev/null and b/frontend/public/bg.jpg differ
diff --git a/frontend/src/components/PasswordStrengthBar/PasswordStrengthBar.tsx b/frontend/src/components/PasswordStrengthBar/PasswordStrengthBar.tsx
new file mode 100644
index 0000000..457c254
--- /dev/null
+++ b/frontend/src/components/PasswordStrengthBar/PasswordStrengthBar.tsx
@@ -0,0 +1,45 @@
+import { useTranslation } from 'react-i18next'
+
+type Props = {
+  password: string
+}
+
+const getPasswordStrength = (password: string) => {
+  let score = 0
+  if (password.length >= 5) score++
+  if (/[A-Z]/.test(password)) score++
+  if (/[0-9]/.test(password)) score++
+  return score
+}
+
+export default function PasswordStrengthBar({ password }: Props) {
+  const { t } = useTranslation('auth')
+
+  const strength = getPasswordStrength(password || '')
+
+  const getLabel = () => {
+    if (!password) return t('password.empty')
+    if (strength < 2) return t('password.weak')
+    if (strength < 3) return t('password.medium')
+    return t('password.strong')
+  }
+
+  const getColor = () => {
+    if (!password) return 'bg-background-tertiary'
+    if (strength < 2) return 'bg-error-primary'
+    if (strength < 3) return 'bg-warning-primary'
+    return 'bg-success-primary'
+  }
+
+  return (
+    <div className='mt-2'>
+      <div className='flex gap-1'>
+        {[0, 1, 2].map((i) => (
+          <div key={i} className={`h-0.5 flex-1 rounded ${i < strength ? getColor() : 'bg-background-tertiary'}`} />
+        ))}
+      </div>
+
+      <div className='text-[10px] font-semibold text-red-700 text-right mt-1'>{getLabel()}</div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/header-nav/header-nav.tsx b/frontend/src/components/header-nav/header-nav.tsx
index dc3d15a..9a0b478 100644
--- a/frontend/src/components/header-nav/header-nav.tsx
+++ b/frontend/src/components/header-nav/header-nav.tsx
@@ -146,10 +146,10 @@ const Header = () => {
                 variant='outline'
                 className='px-4 py-2 font-medium text-gray-900 rounded-md border border-gray-200 transition-all duration-200 dark:border-gray-700 bg-white/80 dark:bg-gray-800/80 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-blue-500'
               >
-                <Link to={ROUTE.AUTH.LOGIN}>{tAuth('auth.login')}</Link>
+                <Link to={ROUTE.AUTH.LOGIN}>{tAuth('login')}</Link>
               </Button>
               <Button className='px-4 py-2 font-medium text-white bg-primary rounded-md transition-all duration-200 dark:bg-primary/80 hover:bg-primary/80 dark:hover:bg-primary/80 focus-visible:ring-2 focus-visible:ring-primary/80'>
-                <Link to={ROUTE.AUTH.REGISTER}>{tAuth('auth.register')}</Link>
+                <Link to={ROUTE.AUTH.REGISTER}>{tAuth('register')}</Link>
               </Button>
             </div>
           )}
diff --git a/frontend/src/core/configs/consts.ts b/frontend/src/core/configs/consts.ts
index 33dc46e..0bde1ec 100644
--- a/frontend/src/core/configs/consts.ts
+++ b/frontend/src/core/configs/consts.ts
@@ -112,6 +112,7 @@ export const numberConstants = {
   EIGHT: 8,
   NINE: 9,
   TEN: 10,
+  fifty: 50,
   ONE_HUNDRED: 100
 }
 
diff --git a/frontend/src/core/constants/path.ts b/frontend/src/core/constants/path.ts
index 31db4f3..b525804 100644
--- a/frontend/src/core/constants/path.ts
+++ b/frontend/src/core/constants/path.ts
@@ -4,7 +4,8 @@ export const ROUTE = {
     LOGIN: '/login',
     REGISTER: '/register',
     VERIFY_ACCOUNT_EMAIL: '/verify-account-email',
-    FORGOT_PASSWORD: '/forgot-password'
+    FORGOT_PASSWORD: '/forgot-password',
+    RESET_PASSWORD: '/reset-password'
   },
   BLOG: '/blog',
   PROFILE: {
diff --git a/frontend/src/core/helpers/key-tanstack.ts b/frontend/src/core/helpers/key-tanstack.ts
index 821254f..f6ae8fd 100644
--- a/frontend/src/core/helpers/key-tanstack.ts
+++ b/frontend/src/core/helpers/key-tanstack.ts
@@ -3,5 +3,6 @@ export const MUTATION_KEYS = {
   login: 'login',
   updateProfile: 'updateProfile',
   verifyEmail: 'verifyEmail',
-  resendCode: 'resendCode'
+  resendCode: 'resendCode',
+  resetPassword: 'resetPassword'
 }
diff --git a/frontend/src/core/helpers/validator.ts b/frontend/src/core/helpers/validator.ts
index ab0d221..b946c94 100644
--- a/frontend/src/core/helpers/validator.ts
+++ b/frontend/src/core/helpers/validator.ts
@@ -1,5 +1,6 @@
 export const validator = {
   email: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/,
   password: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{1,}$/,
-  passwordRegex: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*?&]{5,}$/
+  passwordRegex: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*?&]{5,}$/,
+  phone: /^[0-9]{10,}$/
 }
diff --git a/frontend/src/core/services/auth.service.ts b/frontend/src/core/services/auth.service.ts
index cbf567e..6e15cc5 100644
--- a/frontend/src/core/services/auth.service.ts
+++ b/frontend/src/core/services/auth.service.ts
@@ -3,6 +3,7 @@ import { type AxiosInstance } from 'axios'
 import axiosClient from '@/core/services/axios-client'
 import {
   type VerifyEmailReq,
+  type ResetPasswordReq,
   type Account,
   type LoginResponse,
   type LoginApiResponse,
@@ -15,6 +16,7 @@ const API_REGISTER_URL = '/auth/register'
 const API_REFRESH_TOKEN_URL = '/auth/refresh-token'
 const API_VERIFY_EMAIL_URL = '/auth/verify-email'
 const API_RESEND_CODE_URL = '/auth/resend-verification-email'
+const API_RESET_PASSWORD_URL = '/auth/reset-password'
 const API_LOGOUT_URL = '/auth/logout'
 
 export type AuthApi = {
@@ -23,6 +25,7 @@ export type AuthApi = {
   refreshToken: (refreshToken: string) => Promise<LoginResponse>
   verifyEmail: (params: VerifyEmailReq) => Promise<VerifyEmailRes>
   resendVerificationCode: (email: string) => Promise<{ message: string }>
+  resetPassword: (params: ResetPasswordReq) => Promise<{ message: string }>
   logout: (refresh_token: string) => Promise<void>
 }
 
@@ -42,6 +45,9 @@ export const createAuthApi = (client: AxiosInstance): AuthApi => ({
   resendVerificationCode(email) {
     return client.post(API_RESEND_CODE_URL, { email })
   },
+  resetPassword(params) {
+    return client.post(API_RESET_PASSWORD_URL, params)
+  },
   logout(refresh_token) {
     return client.post(API_LOGOUT_URL, { refresh_token })
   }
diff --git a/frontend/src/core/zod/register.zod.ts b/frontend/src/core/zod/register.zod.ts
index 3cdbb6b..c990903 100644
--- a/frontend/src/core/zod/register.zod.ts
+++ b/frontend/src/core/zod/register.zod.ts
@@ -4,30 +4,86 @@ import { numberConstants } from '@/core/configs/consts'
 
 import { validator } from '../helpers/validator'
 
-export const RegisterSchema = z.object({
-  name: z.string().min(numberConstants.TWO, {
-    message: 'Name is valid.'
-  }),
-  email: z.string().min(numberConstants.TWO, {
-    message: 'Email is valid.'
-  }),
-  password: z
-    .string()
-    .min(numberConstants.ONE, {
-      message: 'Password is required'
-    })
-    .regex(validator.passwordRegex, {
-      message: 'Password must be at least 5 characters long, contain at least one uppercase letter and one number'
+export const RegisterSchema = z
+  .object({
+    name: z
+      .string()
+      .trim()
+      .min(numberConstants.TWO, { message: 'Tên phải có ít nhất 2 ký tự.' })
+      .max(numberConstants.fifty, { message: 'Tên không được vượt quá 50 ký tự.' }),
+
+    email: z.string().min(numberConstants.TWO, { message: 'Email không hợp lệ.' }).regex(validator.email, {
+      message: 'Email không đúng định dạng.'
+    }),
+
+    password: z
+      .string()
+      .min(numberConstants.FIVE, {
+        message: 'Mật khẩu phải có ít nhất 5 ký tự.'
+      })
+      .regex(validator.passwordRegex, {
+        message: 'Mật khẩu phải có ít nhất 1 chữ hoa và 1 số.'
+      }),
+
+    confirmPassword: z.string().min(numberConstants.FIVE, {
+      message: 'Mật khẩu xác nhận phải có ít nhất 5 ký tự.'
     }),
-  confirmPassword: z
-    .string()
-    .min(numberConstants.ONE, {
-      message: 'Password is required'
-    })
-    .regex(validator.passwordRegex, {
-      message: 'Password must be at least 5 characters long, contain at least one uppercase letter and one number'
+
+    phone: z.string().regex(validator.phone, {
+      message: 'Số điện thoại không hợp lệ.'
+    }),
+
+    role: z.enum(['client', 'lawyer'], {
+      message: 'Vui lòng chọn vai trò.'
     }),
-  phone: z.string().min(numberConstants.TEN, {
-    message: 'Phone number must be at least 10 characters.'
+
+    licenseNumber: z.string().optional(),
+    issuedDate: z.string().optional(),
+    issuedPlace: z.string().optional(),
+    certificate: z.any().optional(),
+    referralCode: z.string().optional()
+  })
+
+  .superRefine((data, ctx) => {
+    if (data.password !== data.confirmPassword) {
+      ctx.addIssue({
+        path: ['confirmPassword'],
+        code: 'custom',
+        message: 'Mật khẩu xác nhận không khớp.'
+      })
+    }
+
+    if (data.role === 'lawyer') {
+      if (!data.licenseNumber) {
+        ctx.addIssue({
+          path: ['licenseNumber'],
+          code: 'custom',
+          message: 'Số chứng chỉ hành nghề là bắt buộc.'
+        })
+      }
+
+      if (!data.issuedDate) {
+        ctx.addIssue({
+          path: ['issuedDate'],
+          code: 'custom',
+          message: 'Ngày cấp là bắt buộc.'
+        })
+      }
+
+      if (!data.issuedPlace) {
+        ctx.addIssue({
+          path: ['issuedPlace'],
+          code: 'custom',
+          message: 'Nơi cấp là bắt buộc.'
+        })
+      }
+
+      if (!data.certificate) {
+        ctx.addIssue({
+          path: ['certificate'],
+          code: 'custom',
+          message: 'Chứng chỉ là bắt buộc.'
+        })
+      }
+    }
   })
-})
diff --git a/frontend/src/core/zod/reset-password.zod.ts b/frontend/src/core/zod/reset-password.zod.ts
new file mode 100644
index 0000000..b4ef66c
--- /dev/null
+++ b/frontend/src/core/zod/reset-password.zod.ts
@@ -0,0 +1,20 @@
+import { z } from 'zod'
+
+import { numberConstants } from '@/core/configs/consts'
+
+import { validator } from '../helpers/validator'
+export const ResetPasswordSchema = z
+  .object({
+    email: z.string().email('Vui lòng nhập email hợp lệ').regex(validator.email, {
+      message: 'Email không đúng định dạng.'
+    }),
+
+    password: z.string().min(numberConstants.FIVE, 'Mật khẩu phải có ít nhất 5 ký tự').regex(validator.passwordRegex, {
+      message: 'Mật khẩu phải có ít nhất 1 chữ hoa và 1 số.'
+    }),
+    confirmPassword: z.string().min(numberConstants.FIVE, 'Vui lòng xác nhận mật khẩu')
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    path: ['confirmPassword'],
+    message: 'Mật khẩu xác nhận không khớp'
+  })
diff --git a/frontend/src/hooks/routes/use-router-element.tsx b/frontend/src/hooks/routes/use-router-element.tsx
index d091b0f..06aee6d 100644
--- a/frontend/src/hooks/routes/use-router-element.tsx
+++ b/frontend/src/hooks/routes/use-router-element.tsx
@@ -15,6 +15,8 @@ const HomePage = lazy(() => import('@/pages/home/HomePage'))
 const Login = lazy(() => import('@/pages/login/Login'))
 const Register = lazy(() => import('@/pages/register/Register'))
 const VerifyAcountEmail = lazy(() => import('@/pages/verify-account-email/VerifyAcountEmail'))
+const ForgotPassword = lazy(() => import('@/pages/forgot-password/ForgotPassword'))
+const ResetPassword = lazy(() => import('@/pages/reset-password/ResetPassword'))
 const Dashboard = lazy(() => import('@/pages/admin/dashboard'))
 const Users = lazy(() => import('@/pages/admin/users'))
 const PageNotFound = lazy(() => import('@/pages/404/PageNotFound'))
@@ -22,7 +24,13 @@ const Profile = lazy(() => import('@/pages/profile/Profile'))
 
 export default function useRoutesElements() {
   const location = useLocation()
-  const isAuthPath = [ROUTE.AUTH.LOGIN, ROUTE.AUTH.REGISTER].includes(location.pathname)
+  const isAuthPath = [
+    ROUTE.AUTH.LOGIN,
+    ROUTE.AUTH.REGISTER,
+    ROUTE.AUTH.FORGOT_PASSWORD,
+    ROUTE.AUTH.VERIFY_ACCOUNT_EMAIL,
+    ROUTE.AUTH.RESET_PASSWORD
+  ].includes(location.pathname)
   const isAdminPath = location.pathname.startsWith('/admin')
 
   const routeElements = (
@@ -31,7 +39,9 @@ export default function useRoutesElements() {
         <Route path={ROUTE.HOME} element={<HomePage />} />
         <Route path={ROUTE.AUTH.LOGIN} element={<Login />} />
         <Route path={ROUTE.AUTH.REGISTER} element={<Register />} />
+        <Route path={ROUTE.AUTH.FORGOT_PASSWORD} element={<ForgotPassword />} />
         <Route path={ROUTE.AUTH.VERIFY_ACCOUNT_EMAIL} element={<VerifyAcountEmail />} />
+        <Route path={ROUTE.AUTH.RESET_PASSWORD} element={<ResetPassword />} />
 
         {/* Client protected routes */}
         <Route element={<ProtectedRoute redirectPath={ROUTE.AUTH.LOGIN} />}>
diff --git a/frontend/src/hooks/tanstack-query/auth/use-query-auth.ts b/frontend/src/hooks/tanstack-query/auth/use-query-auth.ts
index 27337f3..1b74bd1 100644
--- a/frontend/src/hooks/tanstack-query/auth/use-query-auth.ts
+++ b/frontend/src/hooks/tanstack-query/auth/use-query-auth.ts
@@ -14,7 +14,8 @@ import { setToken, setUserToLS } from '@/core/shared/storage'
 import { type LoginSchema } from '@/core/zod/login.zod'
 import { type RegisterSchema } from '@/core/zod/register.zod'
 import { type VerifyAccountEmailSchema } from '@/core/zod/verify-account-email.zod'
-import { type LoginApiResponse } from '@/models/interface/auth.interface'
+import { type ResetPasswordSchema } from '@/core/zod/reset-password.zod'
+import { type LoginApiResponse, type ResetPasswordReq } from '@/models/interface/auth.interface'
 const RESEND_COUNTDOWN = 60
 
 export const useLoginAuth = () => {
@@ -55,11 +56,24 @@ export const useVerifyAccountEmail = () => {
   return useMutation({
     mutationKey: [MUTATION_KEYS.verifyEmail],
     mutationFn: (data: z.infer<typeof VerifyAccountEmailSchema>) => authApi.verifyEmail(data),
+    onSuccess: (response, variables) => {
+      toastifyCommon.success('OTP xác thực thành công!')
+      navigate(ROUTE.AUTH.RESET_PASSWORD, { state: { email: variables.email } })
+    },
+    onError: (error: AxiosError) => handleError(error, 'Failed to verify email')
+  })
+}
+
+export const useResetPasswordAuth = () => {
+  const navigate = useNavigate()
+  return useMutation({
+    mutationKey: [MUTATION_KEYS.resetPassword],
+    mutationFn: (data: z.infer<typeof ResetPasswordSchema>) => authApi.resetPassword(data as ResetPasswordReq),
     onSuccess: () => {
-      toastifyCommon.success('Email verified successfully! 🎉')
+      toastifyCommon.success('Mật khẩu đã được cập nhật. Vui lòng đăng nhập lại.')
       navigate(ROUTE.AUTH.LOGIN)
     },
-    onError: (error: AxiosError) => handleError(error, 'Failed to verify email')
+    onError: (error: AxiosError) => handleError(error, 'Failed to reset password')
   })
 }
 
diff --git a/frontend/src/locales/en/auth.json b/frontend/src/locales/en/auth.json
index b97f27f..dcd9d38 100644
--- a/frontend/src/locales/en/auth.json
+++ b/frontend/src/locales/en/auth.json
@@ -1,12 +1,15 @@
 {
-  "auth": {
-    "login": "Login",
-    "register": "Register",
-    "logout": "Logout",
-    "email": "Email",
-    "password": "Password",
-    "forgotPassword": "Forgot Password?",
-    "rememberMe": "Remember Me",
-    "profile": "Profile"
-  }
+  "login": "Login",
+  "register": "Register",
+  "logout": "Logout",
+  "email": "Email",
+  "password": {
+    "weak": "weak",
+    "medium": "MEDIUM",
+    "strong": "STRONG",
+    "empty": "EMPTY"
+  },
+  "forgotPassword": "Forgot Password?",
+  "rememberMe": "Remember Me",
+  "profile": "Profile"
 }
diff --git a/frontend/src/locales/vi/auth.json b/frontend/src/locales/vi/auth.json
index a0ad742..4e5ad57 100644
--- a/frontend/src/locales/vi/auth.json
+++ b/frontend/src/locales/vi/auth.json
@@ -1,12 +1,15 @@
 {
-  "auth": {
-    "login": "Đăng nhập",
-    "register": "Đăng ký",
-    "logout": "Đăng xuất",
-    "email": "Email",
-    "password": "Mật khẩu",
-    "forgotPassword": "Quên mật khẩu?",
-    "rememberMe": "Ghi nhớ đăng nhập",
-    "profile": "Hồ sơ"
-  }
+  "login": "Đăng nhập",
+  "register": "Đăng ký",
+  "logout": "Đăng xuất",
+  "email": "Email",
+  "password": {
+    "weak": "YẾU",
+    "medium": "TRUNG BÌNH",
+    "strong": "MẠNH",
+    "empty": "CHƯA NHẬP"
+  },
+  "forgotPassword": "Quên mật khẩu?",
+  "rememberMe": "Ghi nhớ đăng nhập",
+  "profile": "Hồ sơ"
 }
diff --git a/frontend/src/models/auth/interfaces.ts b/frontend/src/models/auth/interfaces.ts
index 9669f10..9e27d55 100644
--- a/frontend/src/models/auth/interfaces.ts
+++ b/frontend/src/models/auth/interfaces.ts
@@ -14,6 +14,7 @@ export interface RegisterRequest {
   email: string
   password: string
   confirm_password: string
+  role: 'client' | 'lawyer'
 }
 
 export interface AuthState {
diff --git a/frontend/src/models/interface/auth.interface.ts b/frontend/src/models/interface/auth.interface.ts
index 378f930..8a3e2f2 100644
--- a/frontend/src/models/interface/auth.interface.ts
+++ b/frontend/src/models/interface/auth.interface.ts
@@ -43,6 +43,11 @@ export interface VerifyEmailRes {
   message: string
 }
 
+export interface ResetPasswordReq {
+  email: string
+  password: string
+}
+
 export interface RememberMeData {
   email: string
   password: string
diff --git a/frontend/src/pages/404/PageNotFound.tsx b/frontend/src/pages/404/PageNotFound.tsx
index 60cc08f..6ba4e75 100644
--- a/frontend/src/pages/404/PageNotFound.tsx
+++ b/frontend/src/pages/404/PageNotFound.tsx
@@ -5,133 +5,55 @@ import { ROUTE } from '@/core/constants/path'
 
 const PageNotFound = () => {
   return (
-    <div className='flex relative flex-col justify-center items-center min-h-screen bg-gradient-to-br from-indigo-100 via-purple-50 to-pink-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900'>
-      {/* Animated background elements */}
-      <motion.div
-        className='overflow-hidden absolute inset-0'
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 1 }}
-      >
-        {[...Array(5)].map((_, i) => (
-          <motion.div
-            key={i}
-            className='absolute rounded-full'
-            style={{
-              width: `${(i + 1) * 150}px`,
-              height: `${(i + 1) * 150}px`,
-              top: '50%',
-              left: '50%',
-              x: '-50%',
-              y: '-50%',
-              background: `radial-gradient(circle, ${
-                i % 2 === 0 ? 'rgba(99, 102, 241, 0.15)' : 'rgba(168, 85, 247, 0.15)'
-              } 0%, transparent 70%)`
-            }}
-            animate={{
-              scale: [1, 1.2, 1],
-              opacity: [0.3, 0.2, 0.3],
-              rotate: [0, 180, 360]
-            }}
-            transition={{
-              duration: 8,
-              repeat: Infinity,
-              delay: i * 0.5,
-              ease: 'easeInOut'
-            }}
-          />
-        ))}
-      </motion.div>
-
-      {/* Floating particles */}
-      {[...Array(20)].map((_, i) => (
-        <motion.div
-          key={`particle-${i}`}
-          className='absolute w-2 h-2 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full'
-          style={{
-            top: `${Math.random() * 100}%`,
-            left: `${Math.random() * 100}%`
-          }}
-          animate={{
-            y: [0, -20, 0],
-            opacity: [0.5, 1, 0.5],
-            scale: [1, 1.5, 1]
-          }}
-          transition={{
-            duration: 3,
-            repeat: Infinity,
-            delay: i * 0.1,
-            ease: 'easeInOut'
-          }}
-        />
-      ))}
+    <div className='min-h-screen bg-background-primary text-text-primary'>
+      {/* Header */}
+      <div className='container py-4'>
+        <div className='text-p-medium text-text-secondary uppercase tracking-wide'>Your Logo</div>
+      </div>
 
       {/* Content */}
-      <div className='relative z-10 text-center'>
-        <motion.div
-          initial={{ scale: 0.5, opacity: 0, y: -50 }}
-          animate={{ scale: 1, opacity: 1, y: 0 }}
-          transition={{
-            type: 'spring',
-            stiffness: 260,
-            damping: 20,
-            duration: 1
-          }}
-        >
-          <h1 className='text-9xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 dark:from-indigo-400 dark:via-purple-400 dark:to-pink-400'>
-            404
-          </h1>
-        </motion.div>
-
-        <motion.div
-          initial={{ y: 20, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ delay: 0.2, duration: 0.5 }}
-        >
-          <h2 className='mt-4 text-3xl font-semibold text-gray-800 dark:text-gray-200'>Oops! Page not found</h2>
-          <p className='mt-2 text-lg text-gray-600 dark:text-gray-400'>
-            The page you're looking for doesn't exist or has been moved.
-          </p>
-        </motion.div>
-
+      <div className='container flex items-center justify-center'>
         <motion.div
-          initial={{ y: 20, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ delay: 0.4, duration: 0.5 }}
+          initial={{ opacity: 0, y: 16 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className='w-full max-w-md rounded-lg border border-border-primary bg-background-secondary p-8 shadow-400'
         >
-          <Link
-            to={ROUTE.HOME}
-            className='inline-flex gap-2 items-center px-8 py-4 mt-8 text-lg font-semibold text-white bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 rounded-lg shadow-lg transition-all group hover:scale-105 hover:shadow-xl dark:from-indigo-500 dark:via-purple-500 dark:to-pink-500'
-          >
-            <motion.svg
-              xmlns='http://www.w3.org/2000/svg'
-              fill='none'
-              viewBox='0 0 24 24'
-              strokeWidth={2.5}
-              stroke='currentColor'
-              className='w-6 h-6'
-              initial={{ x: 0 }}
-              animate={{ x: [-4, 4, -4] }}
-              transition={{
-                duration: 1.5,
-                repeat: Infinity,
-                ease: 'easeInOut'
-              }}
+          <div className='space-y-2 text-center'>
+            <h1 className='text-h3'>Quên mật khẩu</h1>
+            <p className='text-p text-text-secondary'>
+              Nhập email của bạn. Chúng tôi sẽ gửi mã OTP để đặt lại mật khẩu.
+            </p>
+          </div>
+
+          <form className='mt-8 space-y-4'>
+            <div className='space-y-1'>
+              <label className='text-small text-text-secondary'>Địa chỉ email</label>
+
+              <div className='rounded-md border border-border-secondary bg-background-tertiary px-4 py-2 focus-within:ring-1 ring-ring'>
+                <input
+                  type='email'
+                  placeholder='Nhập email'
+                  className='w-full bg-transparent text-text-primary outline-none placeholder:text-text-tertiary'
+                />
+              </div>
+            </div>
+
+            <button
+              type='submit'
+              className='w-full rounded-md bg-primary py-4 text-btn-medium text-primary-foreground transition hover:opacity-90'
             >
-              <path strokeLinecap='round' strokeLinejoin='round' d='M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18' />
-            </motion.svg>
-            <span>Back to Home</span>
-          </Link>
+              Gửi mã OTP →
+            </button>
+
+            <div className='text-center'>
+              <Link to={ROUTE.AUTH.LOGIN} className='text-small text-text-secondary hover:text-text-primary'>
+                ← Quay lại đăng nhập
+              </Link>
+            </div>
+          </form>
         </motion.div>
       </div>
-
-      {/* Decorative elements */}
-      <motion.div
-        className='absolute right-0 bottom-0 left-0 h-32 bg-gradient-to-t from-white dark:from-gray-900'
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ delay: 0.6, duration: 0.5 }}
-      />
     </div>
   )
 }
diff --git a/frontend/src/pages/forgot-password/ForgotPassword.tsx b/frontend/src/pages/forgot-password/ForgotPassword.tsx
new file mode 100644
index 0000000..daddf31
--- /dev/null
+++ b/frontend/src/pages/forgot-password/ForgotPassword.tsx
@@ -0,0 +1,112 @@
+import { useCallback } from 'react'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { motion } from 'framer-motion'
+import { useForm } from 'react-hook-form'
+import { Link, useNavigate } from 'react-router-dom'
+import { z } from 'zod'
+
+import Logo from '@/components/logo/logo'
+import { Button } from '@/components/ui/button'
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { ROUTE } from '@/core/constants/path'
+import { containerVariants, itemVariants } from '@/styles/variant/style-variant'
+
+const ForgotPasswordSchema = z.object({
+  email: z.string().email({ message: 'Vui lòng nhập email hợp lệ' })
+})
+
+type ForgotPasswordForm = z.infer<typeof ForgotPasswordSchema>
+
+export default function ForgotPassword() {
+  const navigate = useNavigate()
+
+  const form = useForm<ForgotPasswordForm>({
+    resolver: zodResolver(ForgotPasswordSchema),
+    defaultValues: {
+      email: ''
+    }
+  })
+
+  const onSubmit = useCallback(
+    (data: ForgotPasswordForm) => {
+      navigate(ROUTE.AUTH.VERIFY_ACCOUNT_EMAIL, { state: { email: data.email } })
+    },
+    [navigate]
+  )
+
+  return (
+    <div
+      className='relative flex justify-center w-full min-h-screen bg-cover bg-center'
+      style={{ backgroundImage: "url('/bg.jpg')" }}
+    >
+      <div className='absolute inset-0 bg-slate-950/70' />
+      <div className='relative z-10 flex min-h-screen items-center justify-center px-4 pb-24'>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, ease: 'easeOut' }}
+          className='w-full max-w-md rounded-[32px] border border-white/10 bg-white/95 p-10 shadow-2xl shadow-black/20 backdrop-blur-xl'
+        >
+          <div className='space-y-4 text-center'>
+            {/* <span className='inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-red-50 text-red-700'>
+              <svg viewBox='0 0 24 24' fill='none' stroke='currentColor' strokeWidth='2' className='h-6 w-6'>
+                <path d='M12 8v4l3 3' />
+                <circle cx='12' cy='12' r='9' />
+              </svg>
+            </span> */}
+            <h1 className='text-3xl font-bold text-red-900'>Quên mật khẩu</h1>
+            <p className='mx-auto max-w-[26rem] text-sm leading-6 text-slate-500'>
+              Nhập địa chỉ email liên kết với tài khoản của bạn. Chúng tôi sẽ gửi một mã xác thực (OTP) để thiết lập mật
+              khẩu mới.
+            </p>
+          </div>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className='mt-8 space-y-6'>
+              <motion.div variants={containerVariants} initial='hidden' animate='visible'>
+                <motion.div variants={itemVariants}>
+                  <FormField
+                    control={form.control}
+                    name='email'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>EMAIL</FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder='Nhập địa chỉ email'
+                            type='email'
+                            {...field}
+                            className='bg-slate-100 text-slate-900'
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </motion.div>
+
+                <motion.div variants={itemVariants}>
+                  <Button
+                    type='submit'
+                    variant='default'
+                    size='lg'
+                    className='mt-5 w-full bg-red-950 text-white hover:bg-red-900'
+                  >
+                    Gửi mã OTP
+                  </Button>
+                </motion.div>
+
+                <motion.div variants={itemVariants} className='mt-8 text-center text-sm text-slate-500'>
+                  <Link to={ROUTE.AUTH.LOGIN} className='font-semibold text-red-950 hover:text-red-700'>
+                    ← Quay lại đăng nhập
+                  </Link>
+                </motion.div>
+              </motion.div>
+            </form>
+          </Form>
+        </motion.div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/pages/login/Login.tsx b/frontend/src/pages/login/Login.tsx
index 909fbc9..07b8238 100644
--- a/frontend/src/pages/login/Login.tsx
+++ b/frontend/src/pages/login/Login.tsx
@@ -7,7 +7,6 @@ import { Link } from 'react-router-dom'
 import { type z } from 'zod'
 
 import { IconEye, IconNonEye } from '@/assets/icons'
-import Logo from '@/components/logo/logo'
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
@@ -22,25 +21,13 @@ import { useAuthRedirect } from '@/hooks/auth/use-auth-redirect'
 import { useLoginAuth } from '@/hooks/tanstack-query/auth/use-query-auth'
 import { type RememberMeData } from '@/models/interface/auth.interface'
 
-const techStack = [
-  { name: 'React', icon: '⚛️' },
-  { name: 'TypeScript', icon: '📘' },
-  { name: 'TailwindCSS', icon: '🎨' },
-  { name: 'Vite', icon: '⚡' },
-  { name: 'React Query', icon: '🔄' },
-  { name: 'Zod', icon: '✨' }
-]
-
 export default function Login() {
   const { loginStart, loginSuccess, loginFailure, isLoading } = useAuthStore()
-  const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false)
+
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false)
   const [rememberMe, setRememberMe] = useState<boolean>(() => {
-    const savedData = localStorage.getItem(REMEMBER_ME)
-    if (savedData) {
-      const parsedData = JSON.parse(savedData) as RememberMeData
-      return parsedData.isRemembered
-    }
-    return false
+    const saved = localStorage.getItem(REMEMBER_ME)
+    return saved ? JSON.parse(saved).isRemembered : false
   })
 
   useAuthRedirect()
@@ -53,74 +40,69 @@ export default function Login() {
     }
   })
 
-  const { mutate: mutationLogin } = useLoginAuth()
+  const { mutate: login } = useLoginAuth()
 
   const onSubmit = useCallback(
     (data: z.infer<typeof LoginSchema>) => {
       loginStart()
-      mutationLogin(data, {
-        onSuccess: (response) => {
-          loginSuccess(response.data)
-        },
-        onError: (error) => {
-          loginFailure(error.message)
-        }
+      login(data, {
+        onSuccess: (res) => loginSuccess(res.data),
+        onError: (err) => loginFailure(err.message)
       })
     },
-    [mutationLogin, loginStart, loginSuccess, loginFailure]
+    [login, loginStart, loginSuccess, loginFailure]
   )
 
-  const togglePasswordVisibility = () => setIsPasswordVisible((prev) => !prev)
-
-  const handleChangeRememberMe = (event: boolean) => {
-    setRememberMe(event)
-    const loginData = form.getValues()
-
-    if (event) {
-      const rememberMeData: RememberMeData = {
-        email: loginData.email,
-        password: loginData.password,
-        isRemembered: true
-      }
-      localStorage.setItem(REMEMBER_ME, JSON.stringify(rememberMeData))
+  const togglePassword = () => setIsPasswordVisible((prev) => !prev)
+
+  const handleRememberMe = (checked: boolean) => {
+    setRememberMe(checked)
+    const data = form.getValues()
+
+    if (checked) {
+      localStorage.setItem(
+        REMEMBER_ME,
+        JSON.stringify({
+          email: data.email,
+          password: data.password,
+          isRemembered: true
+        })
+      )
     } else {
       localStorage.removeItem(REMEMBER_ME)
     }
   }
 
   useEffect(() => {
-    const savedData = localStorage.getItem(REMEMBER_ME)
-    if (savedData) {
-      const parsedData = JSON.parse(savedData) as RememberMeData
-      if (parsedData.isRemembered) {
-        form.setValue('email', parsedData.email)
-        form.setValue('password', parsedData.password)
+    const saved = localStorage.getItem(REMEMBER_ME)
+    if (saved) {
+      const parsed: RememberMeData = JSON.parse(saved)
+      if (parsed.isRemembered) {
+        form.setValue('email', parsed.email)
+        form.setValue('password', parsed.password)
       }
     }
   }, [form])
 
   return (
-    <div className='flex justify-center w-full min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50'>
-      <div className='flex justify-between items-center px-4 mx-auto my-8 w-full max-w-7xl'>
+    <div
+      className='relative flex min-h-screen items-center justify-center bg-cover bg-center'
+      style={{ backgroundImage: "url('/bg.jpg')" }}
+    >
+      <div className='absolute inset-0 bg-background-primary/80' />
+
+      <div className='container relative z-10 flex justify-center px-4'>
         <motion.div
-          initial={{ opacity: 0, x: -50 }}
+          initial={{ opacity: 0, x: -40 }}
           animate={{ opacity: 1, x: 0 }}
-          transition={{ duration: 0.5 }}
-          className='flex flex-col p-8 space-y-6 w-full max-w-md bg-white rounded-2xl shadow-lg'
+          transition={{ duration: 0.4 }}
+          className='w-full max-w-md rounded-lg bg-background-secondary p-6 shadow-400'
         >
-          <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
-            <Logo />
-          </motion.div>
-
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5, delay: 0.2 }}
-            className='space-y-2'
-          >
-            <h1 className='text-4xl font-bold text-gray-900'>Chào mừng trở lại!</h1>
-            <p className='text-gray-600'>Đăng nhập để tiếp tục trải nghiệm</p>
-          </motion.div>
+          {/* title */}
+          <div className='space-y-2 text-center '>
+            <h1 className='text-h3 text-primary font-bold'>Đăng nhập</h1>
+            <p className='text-small text-secondary'>Chào mừng trở lại</p>
+          </div>
 
           <Form {...form}>
             <motion.form
@@ -128,15 +110,16 @@ export default function Login() {
               initial='hidden'
               animate='visible'
               onSubmit={form.handleSubmit(onSubmit)}
-              className='space-y-6'
+              className='mt-6 space-y-4'
             >
+              {/* EMAIL */}
               <motion.div variants={itemVariants}>
                 <FormField
                   control={form.control}
                   name='email'
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Email</FormLabel>
+                      <FormLabel className='text-p-medium text-primary-900'>Email</FormLabel>
                       <FormControl>
                         <Input placeholder='Nhập email của bạn' type='email' {...field} />
                       </FormControl>
@@ -146,21 +129,21 @@ export default function Login() {
                 />
               </motion.div>
 
+              {/* PASSWORD */}
               <motion.div variants={itemVariants}>
                 <FormField
                   control={form.control}
                   name='password'
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Mật khẩu</FormLabel>
+                      <FormLabel className='text-p-medium text-primary-900 '>Mật khẩu</FormLabel>
                       <FormControl>
                         <Input
-                          placeholder='Nhập mật khẩu của bạn'
-                          className='w-full'
+                          placeholder='Nhập mật khẩu'
                           type={isPasswordVisible ? TEXT_TYPE : PASSWORD_TYPE}
                           {...field}
                           icon={isPasswordVisible ? <IconNonEye /> : <IconEye />}
-                          iconOnClick={togglePasswordVisibility}
+                          iconOnClick={togglePassword}
                         />
                       </FormControl>
                       <FormMessage />
@@ -169,85 +152,52 @@ export default function Login() {
                 />
               </motion.div>
 
-              <motion.div variants={itemVariants} className='flex justify-between items-center'>
-                <div className='flex items-center space-x-2'>
-                  <Checkbox
-                    id='terms'
-                    className='w-4 h-4'
-                    checked={rememberMe}
-                    onCheckedChange={handleChangeRememberMe}
-                  />
-                  <Label htmlFor='terms' className='text-sm text-gray-600 cursor-pointer'>
-                    Ghi nhớ đăng nhập
-                  </Label>
+              {/* REMEMBER */}
+              <motion.div variants={itemVariants} className='flex items-center justify-between'>
+                <div className='flex items-center gap-2'>
+                  <Checkbox checked={rememberMe} onCheckedChange={handleRememberMe} />
+                  <Label className='text-small text-secondary'>Ghi nhớ đăng nhập</Label>
                 </div>
-                <Link
-                  to={ROUTE.AUTH.FORGOT_PASSWORD}
-                  className='text-sm text-indigo-600 hover:text-indigo-800 hover:underline'
-                >
+
+                <Link to={ROUTE.AUTH.FORGOT_PASSWORD} className='text-small text-primary'>
                   Quên mật khẩu?
                 </Link>
               </motion.div>
 
+              {/* LOGIN BUTTON */}
+              <motion.div variants={itemVariants}>
+                <Button loading={isLoading} type='submit' className='w-full' size={'lg'}>
+                  Đăng nhập
+                </Button>
+              </motion.div>
+
+              {/* GOOGLE */}
               <motion.div variants={itemVariants}>
                 <Button
-                  loading={isLoading}
-                  variant='default'
+                  type='button'
+                  variant='secondary'
                   size='lg'
-                  className='w-full'
-                  type='submit'
+                  className='w-full bg-slate-900 text-white hover:bg-slate-800'
+                  iconStart={
+                    <span className='inline-flex h-5 w-5 items-center justify-center rounded-full bg-white text-slate-900 font-bold'>
+                      G
+                    </span>
+                  }
                 >
-                  Đăng nhập
+                  Đăng nhập với Google
                 </Button>
               </motion.div>
 
-              <motion.p variants={itemVariants} className='text-sm text-center text-gray-600'>
+              {/* REGISTER */}
+              <motion.p variants={itemVariants} className='text-center text-small text-secondary'>
                 Chưa có tài khoản?{' '}
-                <Link to='/register' className='font-medium text-indigo-600 hover:text-indigo-800 hover:underline'>
-                  Đăng ký ngay
+                <Link to={ROUTE.AUTH.REGISTER} className='text-primary'>
+                  Đăng ký
                 </Link>
               </motion.p>
             </motion.form>
           </Form>
         </motion.div>
-
-        {/* Right side - Tech Stack */}
-        <motion.div
-          initial={{ opacity: 0, x: 50 }}
-          animate={{ opacity: 1, x: 0 }}
-          transition={{ duration: 0.5, delay: 0.2 }}
-          className='hidden flex-col justify-center items-center space-y-8 w-full max-w-md lg:flex'
-        >
-          <div className='space-y-4 text-center'>
-            <h2 className='text-3xl font-bold text-gray-900'>Công nghệ hiện đại</h2>
-            <p className='text-gray-600'>Được xây dựng với những công nghệ mới nhất</p>
-          </div>
-
-          <div className='grid grid-cols-2 gap-6 w-full'>
-            {techStack.map((tech, index) => (
-              <motion.div
-                key={tech.name}
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.3, delay: index * 0.1 }}
-                className='flex items-center p-4 space-x-3 bg-white rounded-xl shadow-md transition-shadow duration-300 hover:shadow-lg'
-              >
-                <span className='text-2xl'>{tech.icon}</span>
-                <span className='font-medium text-gray-800'>{tech.name}</span>
-              </motion.div>
-            ))}
-          </div>
-
-          <div className='mt-8 space-y-4 text-center'>
-            <h3 className='text-xl font-semibold text-gray-900'>Tính năng nổi bật</h3>
-            <ul className='space-y-2 text-gray-600'>
-              <li>✨ Giao diện hiện đại, thân thiện</li>
-              <li>🚀 Hiệu suất tối ưu</li>
-              <li>🔒 Bảo mật cao cấp</li>
-              <li>📱 Responsive trên mọi thiết bị</li>
-            </ul>
-          </div>
-        </motion.div>
       </div>
     </div>
   )
diff --git a/frontend/src/pages/register/Register.tsx b/frontend/src/pages/register/Register.tsx
index 9b8bdfd..916a309 100644
--- a/frontend/src/pages/register/Register.tsx
+++ b/frontend/src/pages/register/Register.tsx
@@ -7,12 +7,10 @@ import { Link } from 'react-router-dom'
 import { type z } from 'zod'
 
 import { IconEye, IconNonEye } from '@/assets/icons'
-import Logo from '@/components/logo/logo'
+import PasswordStrengthBar from '@/components/PasswordStrengthBar/PasswordStrengthBar'
 import { Button } from '@/components/ui/button'
-import { Checkbox } from '@/components/ui/checkbox'
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
 import { PASSWORD_TYPE, TEXT_TYPE } from '@/core/configs/consts'
 import { ROUTE } from '@/core/constants/path'
 import { containerVariants, itemVariants } from '@/core/lib/variant/style-variant'
@@ -20,16 +18,9 @@ import { RegisterSchema } from '@/core/zod'
 import { useAuthRedirect } from '@/hooks/auth/use-auth-redirect'
 import { useRegisterAuth } from '@/hooks/tanstack-query/auth/use-query-auth'
 
-const features = [
-  { title: 'Tài khoản cá nhân', description: 'Quản lý thông tin và cài đặt của bạn' },
-  { title: 'Bảo mật cao cấp', description: 'Bảo vệ dữ liệu của bạn với mã hóa tiên tiến' },
-  { title: 'Hỗ trợ 24/7', description: 'Đội ngũ hỗ trợ luôn sẵn sàng giúp đỡ bạn' },
-  { title: 'Cập nhật thường xuyên', description: 'Luôn được cập nhật những tính năng mới nhất' }
-]
-
 export default function Register() {
-  const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false)
-  const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] = useState<boolean>(false)
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false)
+  const [isConfirmPasswordVisible, setIsConfirmPasswordVisible] = useState(false)
 
   useAuthRedirect()
 
@@ -40,11 +31,18 @@ export default function Register() {
       password: '',
       confirmPassword: '',
       name: '',
-      phone: ''
+      phone: '',
+      role: 'client',
+      licenseNumber: '',
+      issuedDate: '',
+      issuedPlace: '',
+      certificate: null,
+      referralCode: ''
     }
   })
 
   const { mutate: mutationRegister, isPending } = useRegisterAuth()
+  const role = form.watch('role')
 
   const handleRegister = () => {
     mutationRegister(form.getValues())
@@ -54,78 +52,23 @@ export default function Register() {
   const toggleConfirmPasswordVisibility = () => setIsConfirmPasswordVisible((prev) => !prev)
 
   return (
-    <div className='flex justify-center w-full min-h-screen bg-gradient-to-br from-indigo-50 to-purple-50'>
-      <div className='flex justify-between items-center px-4 mx-auto my-8 w-full max-w-7xl'>
-        {/* Left side - Features */}
-        <motion.div
-          initial={{ opacity: 0, x: -50 }}
-          animate={{ opacity: 1, x: 0 }}
-          transition={{ duration: 0.5 }}
-          className='hidden flex-col justify-center items-center space-y-8 w-full max-w-md lg:flex'
-        >
-          <motion.div
-            initial={{ opacity: 0, y: -20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5 }}
-            className='space-y-4 text-center'
-          >
-            <h2 className='text-3xl font-bold text-gray-900'>Tại sao chọn chúng tôi?</h2>
-            <p className='text-gray-600'>Khám phá những lợi ích khi tham gia cùng chúng tôi</p>
-          </motion.div>
-
-          <motion.div
-            variants={containerVariants}
-            initial='hidden'
-            animate='visible'
-            className='grid grid-cols-1 gap-6 w-full'
-          >
-            {features.map((feature) => (
-              <motion.div
-                key={feature.title}
-                variants={itemVariants}
-                className='flex flex-col p-6 bg-white rounded-xl shadow-md transition-shadow duration-300 hover:shadow-lg'
-              >
-                <h3 className='mb-2 text-lg font-semibold text-gray-900'>{feature.title}</h3>
-                <p className='text-gray-600'>{feature.description}</p>
-              </motion.div>
-            ))}
-          </motion.div>
+    <div
+      className='relative flex justify-center w-full min-h-screen bg-cover bg-center'
+      style={{ backgroundImage: "url('/bg.jpg')" }}
+    >
+      <div className='absolute inset-0 bg-slate-950/70' />
 
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5, delay: 0.4 }}
-            className='mt-8 space-y-4 text-center'
-          >
-            <h3 className='text-xl font-semibold text-gray-900'>Cam kết của chúng tôi</h3>
-            <ul className='space-y-2 text-gray-600'>
-              <li>✨ Trải nghiệm người dùng tốt nhất</li>
-              <li>🚀 Hiệu suất vượt trội</li>
-              <li>🔒 Bảo mật tuyệt đối</li>
-              <li>💡 Đổi mới liên tục</li>
-            </ul>
-          </motion.div>
-        </motion.div>
-
-        {/* Right side - Register Form */}
+      <div className='relative flex justify-center items-center px-4 mx-auto my-8 w-full max-w-7xl'>
         <motion.div
           initial={{ opacity: 0, x: 50 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ duration: 0.5, delay: 0.2 }}
-          className='flex flex-col p-8 space-y-6 w-full max-w-md bg-white rounded-2xl shadow-lg'
+          className='relative z-10 flex flex-col p-8 space-y-6 w-full max-w-md bg-white rounded-2xl shadow-lg'
         >
-          <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
-            <Logo />
-          </motion.div>
-
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5, delay: 0.2 }}
-            className='space-y-2'
-          >
-            <h1 className='text-4xl font-bold text-gray-900'>Tạo tài khoản</h1>
-            <p className='text-gray-600'>Tham gia cùng chúng tôi ngay hôm nay</p>
+          {/* HEADER */}
+          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className='space-y-2 text-center'>
+            <h1 className='text-3xl font-bold text-red-900'>Tạo tài khoản</h1>
+            <p className='text-gray-600'>Tham gia mạng lưới AI pháp lí thông minh nhất</p>
           </motion.div>
 
           <Form {...form}>
@@ -136,15 +79,39 @@ export default function Register() {
               onSubmit={form.handleSubmit(handleRegister)}
               className='space-y-6'
             >
+              {/* ROLE */}
               <motion.div variants={itemVariants}>
                 <FormField
                   control={form.control}
-                  name='email'
+                  name='role'
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Email</FormLabel>
                       <FormControl>
-                        <Input placeholder='Nhập email của bạn' type='email' {...field} />
+                        <div className='flex justify-center'>
+                          <div className='inline-flex w-full gap-1 rounded-full bg-slate-100 p-1 shadow-sm'>
+                            {[
+                              { value: 'client', label: 'Khách hàng' },
+                              { value: 'lawyer', label: 'Luật sư' }
+                            ].map((option) => {
+                              const isActive = field.value === option.value
+
+                              return (
+                                <button
+                                  key={option.value}
+                                  type='button'
+                                  onClick={() => {
+                                    form.setValue('role', option.value)
+                                  }}
+                                  className={`flex-1 rounded-full px-4 py-2.5 text-sm font-semibold ${
+                                    isActive ? 'bg-white text-red-900 shadow-sm' : 'text-slate-500'
+                                  }`}
+                                >
+                                  {option.label}
+                                </button>
+                              )
+                            })}
+                          </div>
+                        </div>
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -152,28 +119,33 @@ export default function Register() {
                 />
               </motion.div>
 
-              <motion.div variants={itemVariants} className='flex gap-6 w-full'>
+              {/* NAME */}
+              <motion.div variants={itemVariants}>
                 <FormField
                   control={form.control}
                   name='name'
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Họ và tên</FormLabel>
+                      <FormLabel>HỌ VÀ TÊN</FormLabel>
                       <FormControl>
-                        <Input placeholder='Nhập họ và tên' {...field} className='w-full' />
+                        <Input placeholder='Nhập họ và tên' {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
+              </motion.div>
+
+              {/* EMAIL */}
+              <motion.div variants={itemVariants}>
                 <FormField
                   control={form.control}
-                  name='phone'
+                  name='email'
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Số điện thoại</FormLabel>
+                      <FormLabel>EMAIL</FormLabel>
                       <FormControl>
-                        <Input placeholder='Nhập số điện thoại' {...field} className='w-full' maxLength={10} />
+                        <Input placeholder='Nhập email của bạn' type='email' {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -181,40 +153,43 @@ export default function Register() {
                 />
               </motion.div>
 
+              {/* PASSWORD */}
               <motion.div variants={itemVariants}>
                 <FormField
                   control={form.control}
-                  name={PASSWORD_TYPE}
+                  name='password'
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Mật khẩu</FormLabel>
+                      <FormLabel>MẬT KHẨU</FormLabel>
                       <FormControl>
                         <Input
-                          placeholder='Nhập mật khẩu của bạn'
-                          className='w-full'
+                          placeholder='Nhập mật khẩu'
                           type={isPasswordVisible ? TEXT_TYPE : PASSWORD_TYPE}
                           {...field}
                           icon={isPasswordVisible ? <IconNonEye /> : <IconEye />}
                           iconOnClick={togglePasswordVisibility}
                         />
                       </FormControl>
+
+                      <PasswordStrengthBar password={field.value || ''} />
+
                       <FormMessage />
                     </FormItem>
                   )}
                 />
               </motion.div>
 
+              {/* CONFIRM PASSWORD */}
               <motion.div variants={itemVariants}>
                 <FormField
                   control={form.control}
                   name='confirmPassword'
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Xác nhận mật khẩu</FormLabel>
+                      <FormLabel>XÁC NHẬN MẬT KHẨU</FormLabel>
                       <FormControl>
                         <Input
-                          placeholder='Nhập lại mật khẩu của bạn'
-                          className='w-full'
+                          placeholder='Nhập lại mật khẩu'
                           type={isConfirmPasswordVisible ? TEXT_TYPE : PASSWORD_TYPE}
                           {...field}
                           icon={isConfirmPasswordVisible ? <IconNonEye /> : <IconEye />}
@@ -227,33 +202,50 @@ export default function Register() {
                 />
               </motion.div>
 
-              <motion.div variants={itemVariants} className='flex items-center space-x-2'>
-                <Checkbox id='terms' className='w-4 h-4' />
-                <Label htmlFor='terms' className='text-sm text-gray-600 cursor-pointer'>
-                  Tôi đồng ý với các <span className='text-indigo-600'>Điều khoản</span> và{' '}
-                  <span className='text-indigo-600'>Chính sách bảo mật</span>
-                </Label>
+              {role === 'lawyer' && (
+                <motion.div variants={itemVariants}>
+                  <FormField
+                    control={form.control}
+                    name='referralCode'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>MÃ GIỚI THIỆU</FormLabel>
+                        <FormControl>
+                          <Input placeholder='Nhập mã giới thiệu (nếu có)' {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </motion.div>
+              )}
+
+              {/* SUBMIT */}
+              <motion.div variants={itemVariants}>
+                <Button loading={isPending} type='submit' className='w-full' size={'lg'}>
+                  Đăng ký
+                </Button>
               </motion.div>
 
               <motion.div variants={itemVariants}>
                 <Button
-                  loading={isPending}
-                  variant='default'
+                  type='button'
+                  variant='secondary'
                   size='lg'
-                  className='w-full'
-                  type='submit'
+                  className='w-full bg-slate-900 text-white hover:bg-slate-800'
+                  iconStart={
+                    <span className='inline-flex h-5 w-5 items-center justify-center rounded-full bg-white text-slate-900 font-bold'>
+                      G
+                    </span>
+                  }
                 >
-                  Tạo tài khoản
+                  Đăng nhập với Google
                 </Button>
               </motion.div>
-
-              <motion.p variants={itemVariants} className='text-sm text-center text-gray-600'>
+              <motion.p className='text-sm text-center text-gray-600'>
                 Đã có tài khoản?{' '}
-                <Link
-                  to={ROUTE.AUTH.LOGIN}
-                  className='font-medium text-indigo-600 hover:text-indigo-800 hover:underline'
-                >
-                  Đăng nhập ngay
+                <Link to={ROUTE.AUTH.LOGIN} className='text-indigo-600 hover:underline'>
+                  Đăng nhập
                 </Link>
               </motion.p>
             </motion.form>
diff --git a/frontend/src/pages/reset-password/ResetPassword.tsx b/frontend/src/pages/reset-password/ResetPassword.tsx
new file mode 100644
index 0000000..5438aec
--- /dev/null
+++ b/frontend/src/pages/reset-password/ResetPassword.tsx
@@ -0,0 +1,154 @@
+import { useCallback, useEffect } from 'react'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { motion } from 'framer-motion'
+import { useForm } from 'react-hook-form'
+import { Link, useLocation } from 'react-router-dom'
+import { type z } from 'zod'
+
+import PasswordStrengthBar from '@/components/PasswordStrengthBar/PasswordStrengthBar'
+import { Button } from '@/components/ui/button'
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { ROUTE } from '@/core/constants/path'
+import { ResetPasswordSchema } from '@/core/zod/reset-password.zod'
+import { useResetPasswordAuth } from '@/hooks/tanstack-query/auth/use-query-auth'
+
+type ResetPasswordForm = z.infer<typeof ResetPasswordSchema>
+
+export default function ResetPassword() {
+  const location = useLocation()
+  const emailFromState = location.state?.email as string | undefined
+
+  const form = useForm<ResetPasswordForm>({
+    resolver: zodResolver(ResetPasswordSchema),
+    defaultValues: {
+      email: emailFromState ?? '',
+      password: '',
+      confirmPassword: ''
+    }
+  })
+
+  useEffect(() => {
+    if (emailFromState) {
+      form.setValue('email', emailFromState)
+    }
+  }, [emailFromState, form])
+
+  const { mutate: resetPassword, isPending: isResetting } = useResetPasswordAuth()
+
+  const handleResetPassword = useCallback(
+    (data: ResetPasswordForm) => {
+      resetPassword(data)
+    },
+    [resetPassword]
+  )
+
+  return (
+    <div
+      className='relative flex justify-center w-full min-h-screen bg-cover bg-center'
+      style={{ backgroundImage: "url('/bg.jpg')" }}
+    >
+      <div className='absolute inset-0 bg-slate-950/70' />
+
+      <div className='relative z-10 flex min-h-screen items-center justify-center px-4'>
+        <motion.div
+          initial={{ opacity: 0, y: 24 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className='w-full max-w-md rounded-2xl bg-white p-8 shadow-xl'
+        >
+          <div className='space-y-3 text-left'>
+            <h1 className='text-3xl font-bold text-red-900'>Tạo mật khẩu mới</h1>
+            <p className='text-sm text-slate-500'>
+              Vui lòng nhập mật khẩu mới của bạn bên dưới. Hãy đảm bảo mật khẩu này khác với các mật khẩu cũ để tăng
+              cường bảo mật.
+            </p>
+          </div>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleResetPassword)} className='mt-6 space-y-5'>
+              {/* EMAIL */}
+              <FormField
+                control={form.control}
+                name='email'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className='font-bold'>EMAIL</FormLabel>
+                    <FormControl>
+                      <Input type='email' {...field} disabled className='bg-slate-100' />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+
+              {/* PASSWORD */}
+              <FormField
+                control={form.control}
+                name='password'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className='text-sm font-semibold font-bold'>MẬT KHẨU MỚI</FormLabel>
+
+                    <FormControl>
+                      <Input
+                        type='password'
+                        placeholder='Nhập mật khẩu mới'
+                        {...field}
+                        className='bg-slate-100 h-[45px]'
+                      />
+                    </FormControl>
+
+                    <PasswordStrengthBar password={form.watch('password') || ''} />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* CONFIRM PASSWORD */}
+              <FormField
+                control={form.control}
+                name='confirmPassword'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className='font-bold'>XÁC NHẬN MẬT KHẨU</FormLabel>
+                    <FormControl>
+                      <Input
+                        type='password'
+                        placeholder='Nhập lại mật khẩu'
+                        {...field}
+                        className='bg-slate-100 h-[45px]'
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* BUTTON */}
+              <Button
+                loading={isResetting}
+                type='submit'
+                className='w-full rounded-md bg-red-800 py-3 text-white font-semibold hover:bg-red-900'
+              >
+                Đổi mật khẩu
+              </Button>
+
+              {/* FOOTER */}
+              <p className='text-center text-sm text-slate-500'>
+                Gặp vấn đề? <span className='text-red-700 font-medium cursor-pointer'>Liên hệ tư vấn viên</span>
+              </p>
+
+              <div className='text-center'>
+                <Link to={ROUTE.AUTH.LOGIN} className='text-sm text-slate-500 hover:text-red-700'>
+                  ← Quay lại đăng nhập
+                </Link>
+              </div>
+            </form>
+          </Form>
+        </motion.div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/pages/verify-account-email/VerifyAcountEmail.tsx b/frontend/src/pages/verify-account-email/VerifyAcountEmail.tsx
index 95c3c27..45751e9 100644
--- a/frontend/src/pages/verify-account-email/VerifyAcountEmail.tsx
+++ b/frontend/src/pages/verify-account-email/VerifyAcountEmail.tsx
@@ -3,24 +3,24 @@ import { useCallback, useEffect, useState } from 'react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { motion } from 'framer-motion'
 import { useForm } from 'react-hook-form'
-import { Link, useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { type z } from 'zod'
 
-import Logo from '@/components/logo/logo'
 import { Button } from '@/components/ui/button'
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
+import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form'
 import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp'
 import { ROUTE } from '@/core/constants/path'
 import { VerifyAccountEmailSchema } from '@/core/zod/verify-account-email.zod'
-import { useResendVerificationCode, useVerifyAccountEmail } from '@/hooks/tanstack-query/auth/use-query-auth'
-import { containerVariants, itemVariants } from '@/styles/variant/style-variant'
+import { useResendVerificationCode } from '@/hooks/tanstack-query/auth/use-query-auth'
+
 const RESEND_COUNTDOWN = 60
 
 export default function VerifyEmail() {
   const location = useLocation()
-  const [countdown, setCountdown] = useState<number>(RESEND_COUNTDOWN)
-  const [canResend, setCanResend] = useState<boolean>(false)
+  const navigate = useNavigate()
+
+  const [countdown, setCountdown] = useState(RESEND_COUNTDOWN)
+  const [canResend, setCanResend] = useState(false)
 
   const form = useForm<z.infer<typeof VerifyAccountEmailSchema>>({
     resolver: zodResolver(VerifyAccountEmailSchema),
@@ -30,166 +30,122 @@ export default function VerifyEmail() {
     }
   })
 
+  // set email từ state
   useEffect(() => {
     const email = location.state?.email
-    if (email) {
-      form.setValue('email', email)
-    }
-  }, [form, location.state])
+    if (email) form.setValue('email', email)
+  }, [location.state, form])
 
+  // countdown resend
   useEffect(() => {
-    let timer: NodeJS.Timeout
-    if (countdown > 0 && !canResend) {
-      timer = setInterval(() => {
+    if (countdown === 0) {
+      setCanResend(true)
+      return
+    }
+
+    if (!canResend) {
+      const timer = setInterval(() => {
         setCountdown((prev) => prev - 1)
       }, 1000)
-    } else if (countdown === 0) {
-      setCanResend(true)
+
+      return () => clearInterval(timer)
     }
-    return () => clearInterval(timer)
   }, [countdown, canResend])
 
-  const { mutate: verifyEmail, isPending: isVerifying } = useVerifyAccountEmail()
-
   const { mutate: resendCode, isPending: isResending } = useResendVerificationCode({
     setCountdown,
     setCanResend
   })
 
+  // fake verify
   const handleVerify = useCallback(
     (data: z.infer<typeof VerifyAccountEmailSchema>) => {
-      verifyEmail(data)
+      setTimeout(() => {
+        navigate(ROUTE.AUTH.RESET_PASSWORD, {
+          state: { email: data.email }
+        })
+      }, 800)
     },
-    [verifyEmail]
+    [navigate]
   )
 
   const handleResendCode = useCallback(() => {
     const email = form.getValues('email')
-    if (email) {
-      resendCode(email)
-    }
+    if (email) resendCode(email)
   }, [form, resendCode])
 
   return (
-    <div className='flex justify-center w-full min-h-screen bg-gradient-to-br from-indigo-50 via-white to-purple-50'>
-      <motion.div
-        initial={{ opacity: 0, x: -100 }}
-        animate={{ opacity: 1, x: 0 }}
-        transition={{ duration: 1 }}
-        className='hidden justify-center items-center w-full md:flex'
-      >
-        <img
-          src='https://img.freepik.com/free-vector/secure-login-concept-illustration_114360-4585.jpg'
-          alt='Email Verification'
-          className='my-10 ml-44 rounded-lg shadow-2xl transition-transform duration-300 transform hover:scale-105'
-        />
-      </motion.div>
-      <div className='flex items-center justify-center w-full mx-auto my-auto md:justify-between md:max-w-[90rem] md:ml-80 md:mr-[8rem]'>
+    <div
+      className='relative flex min-h-screen w-full justify-center bg-cover bg-center'
+      style={{ backgroundImage: "url('/bg.jpg')" }}
+    >
+      <div className='absolute inset-0 bg-slate-950/70' />
+
+      <div className='relative z-10 flex items-center justify-center px-4'>
         <motion.div
-          initial='hidden'
-          animate='visible'
-          variants={containerVariants}
-          className='flex flex-col items-center space-y-2 w-full md:items-start'
+          initial={{ opacity: 0, y: 24 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className='w-full max-w-md rounded-2xl bg-white/95 p-8 shadow-xl backdrop-blur'
         >
-          <motion.div variants={itemVariants} className='mb-10 w-40'>
-            <Logo />
-          </motion.div>
-          <motion.h1
-            variants={itemVariants}
-            className='text-5xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600'
-          >
-            Verify Your Account
-          </motion.h1>
-          <motion.p variants={itemVariants} className='px-10 text-sm text-center text-gray-600 md:text-left md:px-0'>
-            We've sent a verification code to your email address. Please enter it below to verify your account.
-          </motion.p>
+          {/* HEADER */}
+          <div className='space-y-3 text-center'>
+            <h1 className='text-2xl font-bold text-red-900'>Xác nhận OTP</h1>
+            <p className='text-sm text-slate-500'>Mã OTP 6 chữ số đã được gửi tới email của bạn.</p>
+          </div>
+
           <Form {...form}>
-            <form onSubmit={form.handleSubmit(handleVerify)} className='space-y-6 w-10/12'>
-              <motion.div variants={itemVariants}>
-                <FormField
-                  control={form.control}
-                  name='email'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel className='text-gray-700'>Email</FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder='Enter your email'
-                          type='email'
-                          {...field}
-                          className='transition-all duration-300 focus:ring-2 focus:ring-indigo-500'
-                          disabled
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </motion.div>
-              <motion.div variants={itemVariants}>
-                <FormField
-                  control={form.control}
-                  name='verificationCode'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel className='text-gray-700'>Verification Code</FormLabel>
-                      <FormControl>
-                        <InputOTP
-                          maxLength={6}
-                          value={field.value}
-                          onChange={field.onChange}
-                          containerClassName='gap-2 w-full'
-                        >
-                          <InputOTPGroup className='justify-between w-full'>
-                            <InputOTPSlot index={0} className='flex-1' />
-                            <InputOTPSlot index={1} className='flex-1' />
-                            <InputOTPSlot index={2} className='flex-1' />
-                            <InputOTPSlot index={3} className='flex-1' />
-                            <InputOTPSlot index={4} className='flex-1' />
-                            <InputOTPSlot index={5} className='flex-1' />
-                          </InputOTPGroup>
-                        </InputOTP>
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </motion.div>
-
-              <motion.div variants={itemVariants} className='flex flex-col space-y-4'>
-                <Button
-                  loading={isVerifying}
-                  className='w-full text-white bg-gradient-to-r from-indigo-600 to-purple-600 shadow-lg transition-all duration-300 hover:from-indigo-700 hover:to-purple-700 hover:shadow-xl'
-                  type='submit'
-                >
-                  Verify Email
-                </Button>
-                <div className='flex justify-center items-center space-x-2 text-sm text-gray-600'>
-                  <span>Didn't receive the code?</span>
-                  <button
-                    type='button'
-                    onClick={handleResendCode}
-                    disabled={!canResend || isResending}
-                    className={`${
-                      canResend && !isResending
-                        ? 'text-indigo-600 hover:text-indigo-700 hover:underline'
-                        : 'text-gray-400 cursor-not-allowed'
-                    } transition-colors duration-300`}
-                  >
-                    {isResending ? 'Sending...' : canResend ? 'Resend Code' : `Resend in ${countdown}s`}
-                  </button>
-                </div>
-              </motion.div>
-
-              <motion.p variants={itemVariants} className='flex justify-center items-center text-gray-600'>
-                Already verified?&nbsp;
-                <Link
-                  to={ROUTE.AUTH.LOGIN}
-                  className='text-indigo-600 transition-colors duration-300 hover:text-indigo-700 hover:underline'
+            <form onSubmit={form.handleSubmit(handleVerify)} className='mt-6 space-y-6'>
+              {/* OTP INPUT */}
+              <FormField
+                control={form.control}
+                name='verificationCode'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <InputOTP
+                        maxLength={6}
+                        value={field.value}
+                        onChange={field.onChange}
+                        containerClassName='w-full gap-2'
+                      >
+                        <InputOTPGroup className='w-full justify-between'>
+                          {Array.from({ length: 6 }).map((_, i) => (
+                            <InputOTPSlot
+                              key={i}
+                              index={i}
+                              className='flex-1 rounded-xl border bg-slate-100 text-center text-lg font-semibold'
+                            />
+                          ))}
+                        </InputOTPGroup>
+                      </InputOTP>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* BUTTON */}
+              <Button
+                type='submit'
+                className='w-full rounded-md bg-red-900 py-3 font-semibold text-white hover:bg-red-800'
+              >
+                Xác nhận OTP
+              </Button>
+
+              {/* RESEND */}
+              <div className='text-center text-sm'>
+                <button
+                  type='button'
+                  onClick={handleResendCode}
+                  disabled={!canResend || isResending}
+                  className={`font-semibold ${
+                    canResend && !isResending ? 'text-red-900 hover:text-red-700' : 'cursor-not-allowed text-slate-400'
+                  }`}
                 >
-                  Sign in
-                </Link>
-              </motion.p>
+                  {isResending ? 'Đang gửi...' : canResend ? 'Gửi lại mã' : `Gửi lại mã (${countdown}s)`}
+                </button>
+              </div>
             </form>
           </Form>
         </motion.div>
diff --git a/frontend/src/utils/password-strength.ts b/frontend/src/utils/password-strength.ts
new file mode 100644
index 0000000..3f383cc
--- /dev/null
+++ b/frontend/src/utils/password-strength.ts
@@ -0,0 +1,26 @@
+export const getPasswordStrength = (password: string) => {
+  let score = 0
+
+  if (!password) return 0
+
+  if (password.length >= 6) score += 2
+  if (password.length >= 10) score += 2
+
+  if (/[A-Z]/.test(password)) score += 2
+  if (/[0-9]/.test(password)) score += 2
+  if (/[^A-Za-z0-9]/.test(password)) score += 2
+
+  return score
+}
+
+export const getPasswordStrengthLabel = (score: number, password: string) => {
+  if (!password) return 'Chưa nhập'
+  if (score < 5) return 'Yếu'
+  if (score < 8) return 'Trung bình'
+  return 'Mạnh'
+}
+
+export const getPasswordStrengthColor = (score: number, password: string) => {
+  if (!password) return ''
+  return 'bg-red-500'
+}