diff --git a/apps/frontend/src/index.css b/apps/frontend/src/index.css
index 99a7b0c..c6f68d5 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/register/index.lazy.tsx b/apps/frontend/src/routes/register/index.lazy.tsx
index 42eb42c..ddcd454 100644
--- a/apps/frontend/src/routes/register/index.lazy.tsx
+++ b/apps/frontend/src/routes/register/index.lazy.tsx
@@ -88,33 +88,31 @@ export default function RegisterPage() {
 
   return (
     <div className="flex flex-col lg:flex-row min-h-screen overflow-hidden">
-      {/* Bagian Gambar */}
-      <div className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-start absolute -top-56 lg:top-0 left-0 lg:-translate-x-[400px] overflow-hidden lg:overflow-visible">
-        <div className="flex absolute border border-slate-300 rounded-2xl w-[480px] h-[455px] lg:w-[800px] lg:h-[900px] lg:top-11 items-center justify-center -rotate-[19deg] lg:-rotate-[12deg]">
-          <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-3/5 h-3/5">
-              </div>
-            </div>
-          </div>
+      {/* Image */}
+      <div className="relative h-[40vw] lg:h-screen -z-20 lg:mt-24">
+        <div className="-translate-y-[calc(35vw+1rem)] lg:translate-y-0 w-full lg:translate-x-[calc(10vh-45vw)] ">
+          <span className="absolute scale-50 lg:scale-50 -rotate-12 w-[100vw] h-[100vw] lg:w-[140vh] lg:h-[140vh] border border-gray-300 flex rounded-3xl"></span>
+          <span className="absolute scale-[85%] lg:scale-[70%] -rotate-12 w-[100vw] h-[100vw] lg:w-[140vh] lg:h-[140vh] border border-gray-300 flex rounded-3xl"></span>
+          <span className="absolute scale-[120%] lg:scale-90 -rotate-12 w-[100vw] h-[100vw] lg:w-[140vh] lg:h-[140vh] border border-gray-300 flex rounded-3xl"></span>
+          <span className="absolute scale-150 lg:scale-110 -rotate-12 w-[100vw] h-[100vw] lg:w-[140vh] lg:h-[140vh] border border-gray-300 hidden lg:flex rounded-3xl"></span>
         </div>
       </div>
 
       {/* Title */}
-      <div className="absolute top-6 left-6 text-base font-bold z-20">
+      <div className="absolute top-6 left-6 text-base font-bold">
         Amati
       </div>
 
       {/* Main content */}
-      <div className="flex-1 flex flex-col md:flex-row items-center justify-center pt-[151.2px] lg:pt-[82.4px] lg:pl-[224px] md:justify-center lg:justify-end space-x-12 px-6 md:px-0 z-20">
+      <div className="flex-1 flex flex-col md:flex-row items-center justify-center pt-10 lg:pt-20 lg:pl-56 md:justify-center lg:justify-end space-x-12 px-6 md:px-0">
 
         {/* Form column */}
-        <div className="w-[306px] max-w-lg md:w-1/2 mx-auto md:mx-20">
+        <div className="w-full md:w-1/2 mx-auto md:mx-20">
 
           {/* Title and Already have an account */}
-          <div className="mb-12 h-[75px]">
-            <h1 className="h-[51px] text-[33px] lg:text-[42px] font-extrabold leading-[56px] tracking-[-0.8px] text-left">Register an Account</h1>
-            <p className="w-[229.5px] text-sm md:text-sm leading-[15.944px] tracking-[-0.8px] text-[#00000099]">
+          <div className="flex flex-col gap-1 mb-7">
+            <h1 className="text-3xl lg:text-4xl font-extrabold text-left">Register an Account</h1>
+            <p className="text-sm md:text-sm text-gray-400">
               Already have an account?{' '}
               <a href="/login" className="text-blue-500 font-semibold hover:text-blue-800">
                 Sign In now
@@ -307,8 +305,7 @@ export default function RegisterPage() {
                 <div className="flex justify-end">
                   <Button
                     type="submit"
-                    style={{ backgroundColor: "#2555FF", color: "white" }}
-                    className="w-full flex items-center justify-between text-base font-medium md:w-auto"
+                    className="w-full flex items-center justify-between text-base font-medium md:w-auto bg-[--primary-color] text-white"
                   >
                     <span className="flex-grow text-left">Create Account</span>
                     <TbArrowNarrowRight className="ml-12 h-5 w-5" />