diff --git a/apps/frontend/src/index.css b/apps/frontend/src/index.css
index 99a7b0c..6f4ed59 100644
--- a/apps/frontend/src/index.css
+++ b/apps/frontend/src/index.css
@@ -66,4 +66,8 @@
   body {
     @apply bg-background text-foreground;
   }
+}
+
+:root {
+  --primary-color: #2555FF
 }
\ No newline at end of file
diff --git a/apps/frontend/src/routes/forgot-password/index.lazy.tsx b/apps/frontend/src/routes/forgot-password/index.lazy.tsx
index 8f0a73e..e03c549 100644
--- a/apps/frontend/src/routes/forgot-password/index.lazy.tsx
+++ b/apps/frontend/src/routes/forgot-password/index.lazy.tsx
@@ -1,7 +1,7 @@
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { TbArrowNarrowRight } from "react-icons/tb";
 import { IoIosArrowUp } from "react-icons/io";
-import { HiOutlineGlobeAlt  } from "react-icons/hi";
+import { HiOutlineGlobeAlt } from "react-icons/hi";
 import { useForm, Control, FieldError } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
@@ -87,11 +87,11 @@ const CustomDropdownMenu: React.FC<DropdownProps> = ({
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button className="bg-transparent text-gray-800 w-full justify-between text-xs hover:bg-blue-100">
-        <div className="flex items-center gap-1">
-          <HiOutlineGlobeAlt className="h-3 w-3" />
-          {selectedOption || "Select an option"}
-        </div>
-        <IoIosArrowUp className="h-3 w-3 ml-auto" />
+          <div className="flex items-center gap-1">
+            <HiOutlineGlobeAlt className="h-3 w-3" />
+            {selectedOption || "Select an option"}
+          </div>
+          <IoIosArrowUp className="h-3 w-3 ml-auto" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent>
@@ -159,33 +159,30 @@ export function ForgotPasswordForm() {
 
   return (
     <div className="flex flex-col lg:flex-row min-h-screen w-screen overflow-hidden">
-      <div
-        className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-end absolute -top-56 lg:top-0 lg:overflow-hidden"
-      >
-        <div className="flex absolute border border-slate-300 rounded-2xl w-[455px] h-[455px] lg:w-[650px] lg:h-[650px] items-center justify-center -rotate-[15deg]">
-          <div className="flex absolute border border-slate-400  rounded-2xl w-2/3 h-2/3 lg:w-4/5 lg:h-4/5 items-center justify-center">
-            <div className="flex absolute border border-slate-500 rounded-2xl w-3/5 h-3/5 lg:w-3/4 lg:h-3/4 items-center justify-center">
-              <div className="hidden lg:flex absolute border border-slate-600 rounded-2xl w-2/3 h-2/3">
-              </div>
-            </div>
+      <div className="absolute inset-0 flex z-0 overflow-hidden">
+        <div className="relative h-[50vw] md:h-screen z-0">
+          <div className="-translate-y-[calc(50vw+2rem)] md:translate-y-0 w-full md:-translate-x-[calc(10vh-60vw)]">
+            <span className="absolute scale-[25%] -rotate-12 w-[100vw] h-[100vw] md:w-[100vh] md:h-[100vh] border border-gray-800 flex rounded-xl"></span>
+            <span className="absolute scale-50 -rotate-12 w-[100vw] h-[100vw] md:w-[100vh] md:h-[100vh] border border-gray-400 flex rounded-xl"></span>
+            <span className="absolute scale-75 -rotate-12 w-[100vw] h-[100vw] md:w-[100vh] md:h-[100vh] border border-gray-300 flex rounded-xl"></span>
+            <span className="absolute scale-100 -rotate-12 w-[100vw] h-[100vw] md:w-[100vh] md:h-[100vh] border border-gray-200 flex rounded-xl"></span>
           </div>
         </div>
       </div>
 
-      <div className="flex flex-col min-h-screen p-7 bg-transparent justify-between z-20">
+      <div className="relative flex flex-col min-h-screen p-7 bg-transparent justify-between z-10">
         {/* Top */}
         <div className="flex items-center font-bold">Amati</div>
 
         {/* Center */}
-        <div className="flex flex-col h-full w-full bg-transparent justify-center lg:px-28">
+        <div className="flex flex-col h-full w-full xl:ml-32 2xl:ml-72 bg-transparent justify-center lg:px-28">
           <div className="flex flex-col w-full gap-y-1 pb-12 justify-between lg:justify-end">
             <h1
-              className="text-4xl font-bold"
-              style={{ color: "#000000" }}
+              className="text-4xl font-bold text-black"
             >
               Forgot Password
             </h1>
-            <p className="text-sm">
+            <p className="text-sm text-muted-foreground">
               No worries, we'll send you reset instructions
             </p>
           </div>
@@ -207,19 +204,14 @@ export function ForgotPasswordForm() {
               <div className="flex flex-col justify-between gap-9">
                 <Button
                   type="submit"
-                  style={{
-                    backgroundColor: "#2555FF",
-                    color: "white",
-                    width: "100%",
-                  }}
-                  className="flex items-center justify-between shadow-xl"
+                  className="flex items-center justify-between shadow-xl w-full text-white bg-[--primary-color]"
                 >
                   <span className="flex">Request Reset</span>
                   <TbArrowNarrowRight className="h-5 w-5" />
                 </Button>
                 <a
                   href="/login"
-                  className="text-xs text-blue-500 hover:underline font-bold"
+                  className="text-xs text-blue-500 hover:underline font-bold w-fit"
                 >
                   Back to login
                 </a>
@@ -231,8 +223,8 @@ export function ForgotPasswordForm() {
         {/* Bottom */}
         <div className="flex items-center justify-center lg:justify-start w-56 h-8 mx-auto lg:mx-0 bg-muted rounded-md">
           <CustomDropdownMenu
-            onSelect={handleSelect} 
-            defaultOption="English (United States)" 
+            onSelect={handleSelect}
+            defaultOption="English (United States)"
             listOption={["English (United States)", "Indonesia"]}
           />
         </div>
diff --git a/apps/frontend/src/routes/forgot-password/verify.lazy.tsx b/apps/frontend/src/routes/forgot-password/verify.lazy.tsx
index 23d5b94..1d8294a 100644
--- a/apps/frontend/src/routes/forgot-password/verify.lazy.tsx
+++ b/apps/frontend/src/routes/forgot-password/verify.lazy.tsx
@@ -91,11 +91,11 @@ const CustomDropdownMenu: React.FC<DropdownProps> = ({
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button className="bg-transparent text-gray-800 w-full justify-between text-xs hover:bg-blue-100">
-        <div className="flex items-center gap-1">
-          <HiOutlineGlobeAlt className="h-3 w-3" />
-          {selectedOption || "Select an option"}
-        </div>
-        <IoIosArrowUp className="h-3 w-3 ml-auto" />
+          <div className="flex items-center gap-1">
+            <HiOutlineGlobeAlt className="h-3 w-3" />
+            {selectedOption || "Select an option"}
+          </div>
+          <IoIosArrowUp className="h-3 w-3 ml-auto" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent>
@@ -142,7 +142,7 @@ export function ResetPasswordForm() {
     const urlParams = new URLSearchParams(window.location.search);
     const tokenFromURL = urlParams.get("token");
     setToken(tokenFromURL);
-  }, []);  
+  }, []);
 
   // Function to handle form submission
   const onSubmit = async (values: FormSchema) => {
@@ -195,33 +195,30 @@ export function ResetPasswordForm() {
 
   return (
     <div className="flex flex-col lg:flex-row min-h-screen w-screen overflow-hidden">
-      <div
-        className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-end absolute -top-56 lg:top-0 lg:overflow-hidden"
-      >
-        <div className="flex absolute border border-slate-200 rounded-2xl w-[455px] h-[455px] lg:w-[650px] lg:h-[650px] items-center justify-center -rotate-[15deg]">
-          <div className="flex absolute border border-slate-300  rounded-2xl w-2/3 h-2/3 lg:w-4/5 lg:h-4/5 items-center justify-center">
-            <div className="flex absolute border border-slate-400 rounded-2xl w-3/5 h-3/5 lg:w-3/4 lg:h-3/4 items-center justify-center">
-              <div className="hidden lg:flex absolute border border-slate-500 rounded-2xl w-2/3 h-2/3">
-              </div>
-            </div>
+      <div className="absolute inset-0 flex z-0 overflow-hidden">
+        <div className="relative h-[50vw] md:h-screen z-0">
+          <div className="-translate-y-[calc(50vw+2rem)] md:translate-y-0 w-full md:-translate-x-[calc(10vh-60vw)]">
+            <span className="absolute scale-[25%] -rotate-12 w-[100vw] h-[100vw] md:w-[100vh] md:h-[100vh] border border-gray-800 flex rounded-xl"></span>
+            <span className="absolute scale-50 -rotate-12 w-[100vw] h-[100vw] md:w-[100vh] md:h-[100vh] border border-gray-400 flex rounded-xl"></span>
+            <span className="absolute scale-75 -rotate-12 w-[100vw] h-[100vw] md:w-[100vh] md:h-[100vh] border border-gray-300 flex rounded-xl"></span>
+            <span className="absolute scale-100 -rotate-12 w-[100vw] h-[100vw] md:w-[100vh] md:h-[100vh] border border-gray-200 flex rounded-xl"></span>
           </div>
         </div>
       </div>
 
-      <div className="flex flex-col min-h-screen p-7 bg-transparent justify-between z-20">
+      <div className="relative flex flex-col min-h-screen p-7 bg-transparent justify-between z-10">
         {/* Top */}
         <div className="flex items-center font-bold">Amati</div>
 
         {/* Center */}
-        <div className="flex flex-col h-full w-full bg-transparent justify-center lg:px-28">
+        <div className="flex flex-col h-full w-full xl:ml-32 2xl:ml-72 bg-transparent justify-center lg:px-28">
           <div className="flex flex-col w-full gap-y-1 pb-12 justify-between lg:justify-end">
             <h1
-              className="text-4xl font-bold"
-              style={{ color: "#000000" }}
+              className="text-4xl font-bold text-black"
             >
               Change Password
             </h1>
-            <p className="text-sm">Enter your new password</p>
+            <p className="text-sm text-muted-foreground">Enter your new password</p>
           </div>
           <Form {...form}>
             <form
@@ -249,19 +246,14 @@ export function ResetPasswordForm() {
               <div className="flex flex-col justify-between gap-9">
                 <Button
                   type="submit"
-                  style={{
-                    backgroundColor: "#2555FF",
-                    color: "white",
-                    width: "100%",
-                  }}
-                  className="flex items-center justify-between shadow-xl"
+                  className="flex items-center justify-between shadow-xl w-full text-white bg-[--primary-color]"
                 >
                   <span className="flex">Submit</span>
                   <TbArrowNarrowRight className="h-5 w-5" />
                 </Button>
                 <a
                   href="/login"
-                  className="text-xs text-blue-500 hover:underline font-bold"
+                  className="text-xs text-blue-500 hover:underline font-bold w-fit"
                 >
                   Back to login
                 </a>
@@ -272,8 +264,8 @@ export function ResetPasswordForm() {
 
         <div className="flex items-center justify-center lg:justify-start w-56 h-8 mx-auto lg:mx-0 bg-muted rounded-md">
           <CustomDropdownMenu
-            onSelect={handleSelect} 
-            defaultOption="English (United States)" 
+            onSelect={handleSelect}
+            defaultOption="English (United States)"
             listOption={["English (United States)", "Indonesia"]}
           />
         </div>