diff --git a/apps/frontend/src/routes/login/index.lazy.tsx b/apps/frontend/src/routes/login/index.lazy.tsx
index 58c16ef..cd18d0d 100644
--- a/apps/frontend/src/routes/login/index.lazy.tsx
+++ b/apps/frontend/src/routes/login/index.lazy.tsx
@@ -19,6 +19,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useState } from "react";
 import useAuth from "@/hooks/useAuth";
 import { TbArrowNarrowRight } from "react-icons/tb";
+import logo from "@/assets/logos/amati-logo.png";
 
 export const Route = createLazyFileRoute("/login/")({
 	component: LoginPage,
@@ -30,8 +31,8 @@ type FormSchema = {
 };
 
 const formSchema = z.object({
-	username: z.string().min(1, "This field is required"),
-	password: z.string().min(1, "This field is required"),
+	username: z.string().min(1, "Kolom ini wajib diisi"),
+	password: z.string().min(1, "Kolom ini wajib diisi"),
 });
 
 export default function LoginPage() {
@@ -97,94 +98,100 @@ export default function LoginPage() {
 	};
 
 	return (
-		<div
-            className="flex items-center justify-center bg-contain bg-top lg:bg-right 
-				bg-no-repeat bg-[url('../src/assets/backgrounds/backgroundLoginMobile.png')] 
-                lg:bg-[url('../src/assets/backgrounds/backgroundLogin.png')]"
-        >
-			<div className="absolute top-[1.688rem] left-[1.875rem] text-base font-bold leading-[1.21rem]">
-				Amati
+		<div className="flex flex-col w-screen h-screen 3xl:max-w-screen-2xl 3xl:mx-auto 3xl:px-4 overflow-hidden">
+			{/* Navbar */}
+			<nav className="flex w-full bg-transparent px-8 py-7 justify-between">
+				<div className="flex">
+					<img src="../src/assets/logos/amati-logo.png" alt="Amati Logo" className="h-4 object-contain" />
+				</div>
+			</nav>
+
+			{/* Background shapes */}
+			<div className="absolute inset-0 flex -z-20 overflow-hidden">
+				<div className="relative h-[50vw] lg:h-screen z-0">
+					<div className="-translate-y-[calc(40vw+2rem)] lg:translate-y-0 w-full lg:-translate-x-[calc(10vh-60vw)]">
+						<span className="absolute scale-50 lg:scale-50 -rotate-12 w-[100vw] h-[100vw] lg:w-[100vh] lg:h-[100vh] border border-gray-800 flex rounded-3xl"></span>
+						<span className="absolute scale-[85%] lg:scale-[70%] -rotate-12 w-[100vw] h-[100vw] lg:w-[100vh] lg:h-[100vh] border border-gray-400 flex rounded-3xl"></span>
+						<span className="absolute scale-[120%] lg:scale-90 -rotate-12 w-[100vw] h-[100vw] lg:w-[100vh] lg:h-[100vh] border border-gray-300 flex rounded-3xl"></span>
+						<span className="absolute scale-150 lg:scale-110 -rotate-12 w-[100vw] h-[100vw] lg:w-[100vh] lg:h-[100vh] border border-gray-200 hidden lg:flex rounded-3xl"></span>
+					</div>
+				</div>
 			</div>
-			<div className="w-screen h-screen flex ml-0 lg:ml-[7.063rem] justify-center lg:justify-start items-center"> 
-				<Card className="w-[19.125rem] sm:w-[26.063rem] lg:w-[29.5rem] h-auto bg-transparent border-none">
-					<h1 className="mb-2 text-[2.625rem] font-bold leading-[3.177rem] tracking-tightest">Sign In</h1>
-					<p className="text-sm mb-10 leading-[1.059rem]">
-						New to this app?{' '}
-						<a
-							href="/register"
-							className="text-blue-500 font-bold hover:text-blue-800"
-						>
-							Register now
+
+			{/* Sign In form */}
+			<div className="flex w-full min-h-screen ml-0 lg:ml-28 3xl:ml-40 -mt-16 justify-center lg:justify-start items-center"> 
+				<Card className="w-full sm:w-3/5 lg:w-2/6 px-8 sm:p-0 h-auto bg-transparent border-none shadow-none">
+				<h1 className="mb-2 text-4xl font-bold leading-10 tracking-tighter">Sign In</h1>
+				<p className="text-sm mb-10 leading-4 text-muted-foreground">
+					Baru mengenal aplikasi ini?{' '}
+					<a href="/register" className="text-blue-600 font-bold hover:text-blue-800">
+					Daftar sekarang
+					</a>
+				</p>
+				<Form {...form}>
+					<form onSubmit={form.handleSubmit(handleSubmit)}>
+					<div className="space-y-5">
+						{errorMessage && (
+						<Alert variant="destructive">
+							<p>{errorMessage}</p>
+						</Alert>
+						)}
+						<FormField
+						name="username"
+						render={({ field }) => (
+							<FormItem className="text-sm">
+							<FormLabel className="font-semibold leading-4">Email/Username</FormLabel>
+							<FormControl>
+								<Input
+								placeholder="eg; user@mail.com"
+								disabled={loginMutation.isPending}
+								className={form.formState.errors.username ? "border-red-500" : ""}
+								{...field}
+								/>
+							</FormControl>
+							<FormMessage />
+							</FormItem>
+						)}
+						/>
+						<FormField
+						name="password"
+						render={({ field }) => (
+							<FormItem className="text-sm">
+							<FormLabel className="font-semibold leading-4">Kata sandi</FormLabel>
+							<FormControl>
+								<Input
+								type="password"
+								placeholder="*****"
+								disabled={loginMutation.isPending}
+								className={form.formState.errors.password ? "border-red-500" : ""}
+								{...field}
+								/>
+							</FormControl>
+							<FormMessage />
+							</FormItem>
+						)}
+						/>
+						<p className="text-sm">
+						<a href="/forgot-password" className="text-blue-600 font-bold hover:text-blue-800 leading-4">
+							Lupa kata sandi?
 						</a>
-					</p>
-					<Form {...form}>
-						<form onSubmit={form.handleSubmit(handleSubmit)}>
-							<div className="space-y-5">
-								{errorMessage && (
-									<Alert variant="destructive">
-										<p>{errorMessage}</p>
-									</Alert>
-								)}
-								<FormField
-									name="username"
-									render={({ field }) => (
-										<FormItem className="text-sm">
-											<FormLabel className="font-semibold leading-[1.059rem]">Email/Username</FormLabel>
-											<FormControl>
-												<Input
-													placeholder="eg; user@mail.com"
-													disabled={loginMutation.isPending}
-													className={form.formState.errors.username ? "border-red-500" : ""}
-													{...field}
-												/>
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-								<FormField
-									name="password"
-									render={({ field }) => (
-										<FormItem className="text-sm">
-											<FormLabel className="font-semibold leading-[1.059rem]">Password</FormLabel>
-											<FormControl>
-												<Input
-													type="password"
-													placeholder="*****"
-													disabled={loginMutation.isPending}
-													className={form.formState.errors.password ? "border-red-500" : ""}
-													{...field}
-												/>
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-								<p className="text-sm">
-									<a
-										href="/forgot-password"
-										className="text-blue-500 font-bold hover:text-blue-800 leading-[1.059rem]"
-									>
-										Forgot Password?
-									</a>
-								</p>
-							</div>
-							<div className="flex justify-between mt-10">
-								<Button
-									type="submit"
-									disabled={loginMutation.isPending}
-									variant="default"
-									className="w-full flex items-center justify-center space-x-[13.125rem] sm:space-x-[20rem] 
-										lg:space-x-[23.125rem] bg-[#2555FF] text-white hover:bg-[#1e4ae0]"
-								>
-									<span className="leading-[1.25rem]">Sign In</span>
-									<TbArrowNarrowRight className="h-5 w-5" />
-								</Button>
-							</div>
-						</form>
-					</Form>
+						</p>
+					</div>
+					<div className="flex mt-10">
+						<Button
+						type="submit"
+						disabled={loginMutation.isPending}
+						variant="default"
+						className="flex w-full justify-between bg-blue-600 text-white hover:bg-blue-700"
+						>
+						<span className="leading-5">Sign In</span>
+						<TbArrowNarrowRight className="h-5 w-5" />
+						</Button>
+					</div>
+					</form>
+				</Form>
 				</Card>
 			</div>
 		</div>
 	);
-}
+}
\ No newline at end of file
diff --git a/apps/frontend/tailwind.config.js b/apps/frontend/tailwind.config.js
index 51535f1..720b7cd 100644
--- a/apps/frontend/tailwind.config.js
+++ b/apps/frontend/tailwind.config.js
@@ -72,15 +72,13 @@ module.exports = {
         "accordion-up": "accordion-up 0.2s ease-out",
       },
     },
-    letterSpacing: {
-      tightest: '-.075em',
-      tighter: '-.05em',
-      tight: '-.025em',
-      normal: '0',
-      wide: '.025em',
-      wider: '.05em',
-      widest: '.1em',
-      widest: '.25em',
+    screens: {
+      'sm': '640px',
+      'md': '768px',
+      'lg': '1024px',
+      'xl': '1280px',
+      '2xl': '1536px',
+      '3xl': '1980px',
     },
   },
   plugins: [require("tailwindcss-animate")],