diff --git a/apps/landing/public/assets/login-banner.webp b/apps/landing/public/assets/login-banner.webp
new file mode 100644
index 0000000..67ed796
Binary files /dev/null and b/apps/landing/public/assets/login-banner.webp differ
diff --git a/apps/web/e2e/login.spec.ts b/apps/web/e2e/login.spec.ts
index 1a697e9..a70f507 100644
--- a/apps/web/e2e/login.spec.ts
+++ b/apps/web/e2e/login.spec.ts
@@ -7,7 +7,7 @@ test.describe('login', () => {
     await mockBackend(page);
     await page.goto('/auth/login');
 
-    await expect(page.getByRole('heading', { name: 'Login to your account!' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Sign in to TrackGo' })).toBeVisible();
     await expect(page.getByLabel('Username')).toBeVisible();
     await expect(page.getByLabel('Password')).toBeVisible();
     await expect(page.getByRole('button', { name: 'Login' })).toBeVisible();
@@ -35,6 +35,6 @@ test.describe('login', () => {
 
     await expect(page.getByText('Invalid username or password')).toBeVisible();
     await expect(page).toHaveURL(/\/auth\/login/);
-    await expect(page.getByRole('heading', { name: 'Login to your account!' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Sign in to TrackGo' })).toBeVisible();
   });
 });
diff --git a/apps/web/src/apps/auth/login/assets/login-banner.webp b/apps/web/src/apps/auth/login/assets/login-banner.webp
new file mode 100644
index 0000000..67ed796
Binary files /dev/null and b/apps/web/src/apps/auth/login/assets/login-banner.webp differ
diff --git a/apps/web/src/apps/auth/login/components/android-icon.tsx b/apps/web/src/apps/auth/login/components/android-icon.tsx
deleted file mode 100644
index 17110c7..0000000
--- a/apps/web/src/apps/auth/login/components/android-icon.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-export const AndroidIcon = (props: any) => (
-  <svg viewBox="0 0 24 24" fill="#3DDC84" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="M17.5 12C18.33 12 19 11.33 19 10.5C19 9.67 18.33 9 17.5 9C16.67 9 16 9.67 16 10.5C16 11.33 16.67 12 17.5 12ZM6.5 12C7.33 12 8 11.33 8 10.5C8 9.67 7.33 9 6.5 9C5.67 9 5 9.67 5 10.5C5 11.33 5.67 12 6.5 12Z" />
-    <path d="M19.46 8.52C19.31 8.52 19.17 8.56 19.04 8.65L17.12 9.99C15.56 9.29 13.83 8.9 12 8.9C10.17 8.9 8.44 9.29 6.88 9.99L4.96 8.65C4.83 8.56 4.69 8.52 4.54 8.52C4.1 8.52 3.74 8.88 3.74 9.32C3.74 9.58 3.87 9.82 4.08 9.97L5.7 11.11C3.47 12.8 2 15.39 2 18.29H22C22 15.39 20.53 12.8 18.3 11.11L19.92 9.97C20.13 9.82 20.26 9.58 20.26 9.32C20.26 8.88 19.9 8.52 19.46 8.52Z" />
-  </svg>
-);
diff --git a/apps/web/src/apps/auth/login/components/chrome-icon.tsx b/apps/web/src/apps/auth/login/components/chrome-icon.tsx
deleted file mode 100644
index 1143373..0000000
--- a/apps/web/src/apps/auth/login/components/chrome-icon.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-export const ChromeIcon = (props: any) => (
-  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7Z"
-      fill="#FACC15"
-    />
-    <path d="M12 2C16.8 2 20.8 5.4 21.8 10H12L7 18.6C5.1 16.9 4 14.6 4 12C4 7.6 7.6 4 12 4V2Z" fill="#F87171" />
-    <path
-      d="M22 12C22 17.5 17.5 22 12 22C10 22 8.1 21.4 6.5 20.3L11.5 11.6L21.8 10C21.9 10.6 22 11.3 22 12Z"
-      fill="#4ADE80"
-    />
-    <circle cx="12" cy="12" r="4" fill="#3B82F6" />
-  </svg>
-);
diff --git a/apps/web/src/apps/auth/login/components/google-icon.tsx b/apps/web/src/apps/auth/login/components/google-icon.tsx
deleted file mode 100644
index ddb1a8f..0000000
--- a/apps/web/src/apps/auth/login/components/google-icon.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-export const GoogleIcon = (props: any) => (
-  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path
-      d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-      fill="#4285F4"
-    />
-    <path
-      d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-      fill="#34A853"
-    />
-    <path
-      d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-      fill="#FBBC05"
-    />
-    <path
-      d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-      fill="#EA4335"
-    />
-  </svg>
-);
diff --git a/apps/web/src/apps/auth/login/components/icon-circle.tsx b/apps/web/src/apps/auth/login/components/icon-circle.tsx
deleted file mode 100644
index c39efa7..0000000
--- a/apps/web/src/apps/auth/login/components/icon-circle.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-export const IconCircle = ({ x, y, children }: { x: number; y: number; children: React.ReactNode }) => (
-  <div
-    className="absolute flex items-center justify-center w-10 h-10 bg-white rounded-full shadow-lg"
-    style={{
-      left: `calc(50% + ${x}px)`,
-      top: `calc(50% + ${y}px)`,
-      transform: 'translate(-50%, -50%)',
-    }}
-  >
-    {children}
-  </div>
-);
diff --git a/apps/web/src/apps/auth/login/components/microsoft-icon.tsx b/apps/web/src/apps/auth/login/components/microsoft-icon.tsx
deleted file mode 100644
index 34f6413..0000000
--- a/apps/web/src/apps/auth/login/components/microsoft-icon.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export const MicrosoftIcon = (props: any) => (
-  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="M1 1h10.5v10.5H1z" fill="#f35325" />
-    <path d="M12.5 1H23v10.5H12.5z" fill="#81bc06" />
-    <path d="M1 12.5h10.5V23H1z" fill="#05a6f0" />
-    <path d="M12.5 12.5H23V23H12.5z" fill="#ffba08" />
-  </svg>
-);
diff --git a/apps/web/src/apps/auth/login/components/right-section.tsx b/apps/web/src/apps/auth/login/components/right-section.tsx
index ec9e355..44b4907 100644
--- a/apps/web/src/apps/auth/login/components/right-section.tsx
+++ b/apps/web/src/apps/auth/login/components/right-section.tsx
@@ -1,114 +1,14 @@
-import { Apple, Globe, Mail, MessageCircle } from 'lucide-react';
-import { IconCircle } from './icon-circle';
-import { Ring } from './ring';
-import { AndroidIcon } from './android-icon';
-import { ChromeIcon } from './chrome-icon';
+import { Image } from '@repo/ui/components';
+import loginBanner from '../assets/login-banner.webp';
 
 export function RightSection() {
   return (
-    // <div className="relative flex flex-col items-center justify-center w-full mt-6 mr-6 mb-6 p-12 overflow-hidden shadow-inner bg-linear-to-b from-brand-50 via-brand-300 to-brand-50 border-l border-brand-100 rounded-2xl">
-    <div className="relative flex flex-col items-center justify-center w-full p-12 overflow-hidden shadow-inner bg-linear-to-b from-brand-50 via-brand-300 to-brand-50  border-brand-100 ">
-      {/* 1. Glossy & Glassmorphic Orbs */}
-      <div className="absolute -top-10 -right-10 w-72 h-72 bg-white/40 rounded-full blur-3xl pointer-events-none mix-blend-overlay" />
-      <div className="absolute top-1/3 left-1/4 w-96 h-96 bg-brand-400/20 rounded-full blur-3xl pointer-events-none" />
-      <div className="absolute -bottom-10 -left-10 w-80 h-80 bg-white/60 rounded-full blur-3xl pointer-events-none" />
-
-      <h2 className="relative z-10 mt-6 mb-3 text-3xl xl:text-4xl font-bold tracking-tight text-center text-brand-950 leading-tight">
-        Write Better {/* Wrapper luar KHUSUS untuk Drop Shadow */}
-        <span className="block sm:inline filter drop-shadow-[0_2px_8px_rgba(var(--color-brand-500),0.15)]">
-          {/* Elemen dalam KHUSUS untuk Gradien Teks */}
-          <span className="text-transparent bg-clip-text bg-linear-to-r from-brand-700 via-brand-600 to-brand-700">
-            Everywhere
-          </span>
-        </span>
-      </h2>
-
-      {/* Graphics Area */}
-      <div className="flex-1 w-full relative flex items-center justify-center min-h-100">
-        {/* Concentric Rings */}
-        <Ring size={200} />
-        <Ring size={300} />
-        <Ring size={420} />
-        <Ring size={540} />
-
-        {/* Center Logo */}
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20">
-          <div className="w-18 h-18 bg-brand-600 rounded-full flex items-center justify-center shadow-xl shadow-brand-600/40 relative">
-            {/* Glowing backdrop */}
-            <div className="absolute inset-0 bg-brand-600 rounded-full blur-md opacity-40"></div>
-            {/* Custom P/Pen Logo from reference */}
-            <svg
-              viewBox="0 0 32 32"
-              className="w-10.5 h-10.5 text-white relative z-10"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M12 7C12 6.44772 12.4477 6 13 6H18C21.3137 6 24 8.68629 24 12C24 15.3137 21.3137 18 18 18H15V25C15 25.5523 14.5523 26 14 26H13C12.4477 26 12 25.5523 12 25V7ZM15 9V15H18C19.6569 15 21 13.6569 21 12C21 10.3431 19.6569 9 18 9H15Z"
-                fill="white"
-              />
-              <path d="M16.5 10L16.5 14L15 14L15 10L16.5 10Z" className="fill-brand-600" />
-              <path d="M15.75 16L14 20L17.5 20L15.75 16Z" className="fill-brand-600" />
-            </svg>
-          </div>
-        </div>
-
-        {/* Orbiting Icons */}
-
-        {/* Ring 1 (r=100) */}
-        <div className="animate-floating" style={{ animationDelay: '0s' }}>
-          <IconCircle x={-70} y={-70}>
-            <Mail className="w-5 h-5 text-[#0078D4]" fill="#0078D4" stroke="#fff" />
-          </IconCircle>
-        </div>
-
-        <div className="animate-floating" style={{ animationDelay: '0.5s' }}>
-          <IconCircle x={85} y={35}>
-            <MessageCircle className="w-5.5 h-5.5 text-[#0084FF]" fill="#0084FF" stroke="none" />
-          </IconCircle>
-        </div>
-
-        {/* Ring 2 (r=150) */}
-        <div className="animate-floating" style={{ animationDelay: '1s' }}>
-          <IconCircle x={0} y={-150}>
-            <Globe className="w-6 h-6 text-[#0078D7]" />
-          </IconCircle>
-        </div>
-
-        <div className="animate-floating" style={{ animationDelay: '0.2s' }}>
-          <IconCircle x={-60} y={138}>
-            <span className="text-[#6001D2] font-bold italic text-xl -ml-1">y!</span>
-          </IconCircle>
-        </div>
-
-        {/* Ring 3 (r=210) */}
-        <div className="animate-floating" style={{ animationDelay: '0.8s' }}>
-          <IconCircle x={-185} y={-70}>
-            <AndroidIcon className="w-6 h-6" />
-          </IconCircle>
-        </div>
-
-        <div className="animate-floating" style={{ animationDelay: '1.5s' }}>
-          <IconCircle x={200} y={50}>
-            <Apple className="w-5.5 h-5.5 text-black" fill="black" />
-          </IconCircle>
-        </div>
-
-        {/* Ring 4 (r=270) */}
-        <div className="animate-floating" style={{ animationDelay: '0.4s' }}>
-          <IconCircle x={-190} y={180}>
-            <ChromeIcon className="w-6.5 h-6.5" />
-          </IconCircle>
-        </div>
-      </div>
-
-      {/* Pagination Indicators */}
-      <div className="flex gap-1.5 mt-8 z-10 mb-2">
-        <div className="w-6 h-1 rounded-full bg-brand-500"></div>
-        <div className="w-6 h-1 rounded-full bg-brand-200"></div>
-        <div className="w-6 h-1 rounded-full bg-brand-200"></div>
+    <div className="flex h-full w-full items-stretch p-8">
+      <div
+        className="flex flex-1 items-center justify-center overflow-hidden rounded-[5rem]"
+        style={{ backgroundColor: 'rgba(101, 46, 217, 0.2)' }}
+      >
+        <Image src={loginBanner} alt="" fit="contain" w="82%" maw={560} loading="lazy" decoding="async" />
       </div>
     </div>
   );
diff --git a/apps/web/src/apps/auth/login/components/ring.tsx b/apps/web/src/apps/auth/login/components/ring.tsx
deleted file mode 100644
index fb9e283..0000000
--- a/apps/web/src/apps/auth/login/components/ring.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-export const Ring = ({ size }: { size: number }) => (
-  <div
-    className="absolute rounded-full border border-white/60"
-    style={{ width: size, height: size, top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}
-  />
-);
diff --git a/apps/web/src/apps/auth/login/languages/en/login.json b/apps/web/src/apps/auth/login/languages/en/login.json
index ec1c4be..0002f55 100644
--- a/apps/web/src/apps/auth/login/languages/en/login.json
+++ b/apps/web/src/apps/auth/login/languages/en/login.json
@@ -1,6 +1,6 @@
 {
-  "title": "Login to your account!",
-  "description": "Enter your registered username and password to login!",
+  "title": "Sign in to TrackGo",
+  "description": "Manage sales, deliveries, and field activity from one place.",
   "username_label": "Username",
   "username_placeholder": "eg. administrator",
   "password_label": "Password",
diff --git a/apps/web/src/apps/auth/login/languages/id/login.json b/apps/web/src/apps/auth/login/languages/id/login.json
index 85a6e09..755166a 100644
--- a/apps/web/src/apps/auth/login/languages/id/login.json
+++ b/apps/web/src/apps/auth/login/languages/id/login.json
@@ -1,6 +1,6 @@
 {
-  "title": "Login ke akun Anda!",
-  "description": "Masukkan username dan password yang terdaftar untuk login!",
+  "title": "Masuk ke TrackGo",
+  "description": "Kelola penjualan, pengiriman, dan aktivitas lapangan dalam satu tempat.",
   "username_label": "Username",
   "username_placeholder": "cth. administrator",
   "password_label": "Password",
diff --git a/apps/web/src/main.css b/apps/web/src/main.css
index 1e9abaa..1a6a0b5 100644
--- a/apps/web/src/main.css
+++ b/apps/web/src/main.css
@@ -1,32 +1,3 @@
 @import 'tailwindcss';
 @import '@repo/ui/theme.css';
 @source "../../../packages/ui/src";
-
-/* =========================================
-   ANIMATION: FLOATING
-   ========================================= */
-
-/* --- Keyframes Definition --- */
-@keyframes floating {
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-10px); /* Peak float distance (adjust as needed) */
-  }
-}
-
-/* --- Main Utility Class --- */
-.animate-floating {
-  animation: floating 4s ease-in-out infinite;
-}
-
-/* --- Speed Variations (Optional) --- */
-.animate-floating-fast {
-  animation: floating 3s ease-in-out infinite;
-}
-
-.animate-floating-slow {
-  animation: floating 5s ease-in-out infinite;
-}