diff --git a/frontend/src/assets/images/canva-doctor-and-nurse-medical-consultation-MAHHY3lElT4.png b/frontend/src/assets/images/canva-doctor-and-nurse-medical-consultation-MAHHY3lElT4.png
new file mode 100644
index 0000000..cb5d6ff
Binary files /dev/null and b/frontend/src/assets/images/canva-doctor-and-nurse-medical-consultation-MAHHY3lElT4.png differ
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 33a8327..7994525 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,4 +1,7 @@
 @import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
 :root {
   --text: #6b6375;
   --text-h: #08060d;
@@ -16,24 +19,14 @@
   --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
   --mono: ui-monospace, Consolas, monospace;
 
-  font: 18px/145% var(--sans);
-  letter-spacing: 0.18px;
-  color-scheme: light dark;
-  color: var(--text);
-  background: var(--bg);
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
   @media (max-width: 1024px) {
     font-size: 16px;
   }
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text: #9ca3af;
+.dark {
+  /* dark theme — prepared for future, not active yet */
+  --text: #9ca3af;
     --text-h: #f3f4f6;
     --bg: #16171d;
     --border: #2e303a;
@@ -44,8 +37,7 @@
     --social-bg: rgba(47, 48, 58, 0.5);
     --shadow:
       rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
-  }
-
+    
   #social .button-icon {
     filter: invert(1) brightness(2);
   }
@@ -63,50 +55,64 @@
   box-sizing: border-box;
 }
 
-body {
-  margin: 0;
-}
+@layer base {
+  html {
+    font: 18px/145% var(--sans);
+    letter-spacing: 0.18px;
+    color-scheme: light;
+    color: var(--text);
+    background: var(--bg);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 
-h1,
-h2 {
-  font-family: var(--heading);
-  font-weight: 500;
-  color: var(--text-h);
-}
-
-h1 {
-  font-size: 56px;
-  letter-spacing: -1.68px;
-  margin: 32px 0;
-  @media (max-width: 1024px) {
-    font-size: 36px;
-    margin: 20px 0;
   }
-}
-h2 {
-  font-size: 24px;
-  line-height: 118%;
-  letter-spacing: -0.24px;
-  margin: 0 0 8px;
-  @media (max-width: 1024px) {
-    font-size: 20px;
+  body {
+    margin: 0;
   }
-}
-p {
-  margin: 0;
-}
-
-code,
-.counter {
-  font-family: var(--mono);
-  display: inline-flex;
-  border-radius: 4px;
-  color: var(--text-h);
-}
-
-code {
-  font-size: 15px;
-  line-height: 135%;
-  padding: 4px 8px;
-  background: var(--code-bg);
+  
+  h1,
+  h2 {
+    font-family: var(--heading);
+    font-weight: 500;
+    color: var(--text-h);
+  }
+  
+  h1 {
+    font-size: 56px;
+    letter-spacing: -1.68px;
+    margin: 32px 0;
+    @media (max-width: 1024px) {
+      font-size: 36px;
+      margin: 20px 0;
+    }
+  }
+  h2 {
+    font-size: 24px;
+    line-height: 118%;
+    letter-spacing: -0.24px;
+    margin: 0 0 8px;
+    @media (max-width: 1024px) {
+      font-size: 20px;
+    }
+  }
+  p {
+    margin: 0;
+  }
+  
+  code,
+  .counter {
+    font-family: var(--mono);
+    display: inline-flex;
+    border-radius: 4px;
+    color: var(--text-h);
+  }
+  
+  code {
+    font-size: 15px;
+    line-height: 135%;
+    padding: 4px 8px;
+    background: var(--code-bg);
+  }  
 }
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index bef5202..318fbf8 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -3,6 +3,9 @@ import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
 
+document.documentElement.classList.add('light');
+document.documentElement.dataset.theme = 'light';
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 2d24284..eea2750 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -1,9 +1,11 @@
+// frontend/src/pages/LoginPage.tsx
 import { useState } from 'react';
 import { useNavigate, useLocation, Link } from 'react-router-dom';
 import { AxiosError } from 'axios';
 import { authService } from '../services/authService';
 import { useAuth } from '../hooks/useAuth';
 import type { LoginPayload, ApiValidationError, UserRole } from '../types/auth';
+import doctorsIllustration from '../assets/images/canva-doctor-and-nurse-medical-consultation-MAHHY3lElT4.png';
 
 type FieldErrors = Partial<Record<keyof LoginPayload, string>>;
 
@@ -24,6 +26,7 @@ export default function LoginPage() {
 
   const [form, setForm] = useState<LoginPayload>({ email: '', password: '' });
   const [rememberMe, setRememberMe] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
   const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
   const [genericError, setGenericError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
@@ -66,235 +69,184 @@ export default function LoginPage() {
   }
 
   return (
-    <div style={styles.container}>
-      <div style={styles.card}>
-        <div style={styles.header}>
-          <h1 style={styles.title}>QueueNova Health</h1>
-          <p style={styles.subtitle}>Masuk ke akun Anda</p>
+    <div className="fixed inset-0 flex flex-col lg:flex-row">
+      {/* LEFT PANEL */}
+      <div className="flex flex-1 items-center justify-center bg-[#f0fdf4] px-8 py-12">
+        <div className="w-full max-w-sm">
+
+          {successMessage && (
+            <div className="mb-4 px-4 py-3 bg-[#f0fdf4] border border-[#bbf7d0] rounded-md text-sm text-[#15803d]" role="status">
+              {successMessage}
+            </div>
+          )}
+
+          {genericError && (
+            <div className="mb-4 px-4 py-3 bg-red-50 border border-red-200 rounded-md text-sm text-red-700" role="alert">
+              {genericError}
+            </div>
+          )}
+
+          <h1 className="text-[40px] font-bold text-[#171923] mb-1 leading-tight">Sign in</h1>
+
+          <p className="text-sm text-[#4a5568] mb-8">
+            Don't have an account?{' '}
+            <Link to="/register" className="text-[#059669] font-medium underline underline-offset-2">
+              Create now
+            </Link>
+          </p>
+
+          <form onSubmit={handleSubmit} noValidate className="flex flex-col gap-5">
+            {/* Email */}
+            <div className="flex flex-col gap-1">
+              <label htmlFor="email" className="text-sm font-medium text-[#4a5568]">
+                Email
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                value={form.email}
+                onChange={handleChange}
+                autoComplete="email"
+                placeholder="example@gmail.com"
+                aria-invalid={!!fieldErrors.email}
+                aria-describedby={fieldErrors.email ? 'email-error' : undefined}
+                className={`px-3 py-2.5 text-sm border rounded-lg outline-none bg-white text-[#171923] placeholder:text-[#a0aec0] focus:ring-2 focus:ring-[#059669] focus:border-[#059669] ${
+                  fieldErrors.email ? 'border-red-400' : 'border-[#cbd5e0]'
+                }`}
+              />
+              {fieldErrors.email && (
+                <span id="email-error" className="text-xs text-red-500" role="alert">
+                  {fieldErrors.email}
+                </span>
+              )}
+            </div>
+
+            {/* Password */}
+            <div className="flex flex-col gap-1">
+              <label htmlFor="password" className="text-sm font-medium text-[#4a5568]">
+                Password
+              </label>
+              <div className="relative">
+                <input
+                  id="password"
+                  name="password"
+                  type={showPassword ? 'text' : 'password'}
+                  value={form.password}
+                  onChange={handleChange}
+                  autoComplete="current-password"
+                  placeholder="@#*%"
+                  aria-invalid={!!fieldErrors.password}
+                  aria-describedby={fieldErrors.password ? 'password-error' : undefined}
+                  className={`w-full px-3 py-2.5 pr-10 text-sm border rounded-lg outline-none bg-white text-[#171923] placeholder:text-[#a0aec0] focus:ring-2 focus:ring-[#059669] focus:border-[#059669] ${
+                    fieldErrors.password ? 'border-red-400' : 'border-[#cbd5e0]'
+                  }`}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword((v) => !v)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-[#718096] hover:text-[#4a5568]"
+                  aria-label={showPassword ? 'Hide password' : 'Show password'}
+                >
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    {showPassword ? (
+                      <>
+                        <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" />
+                        <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" />
+                        <line x1="1" y1="1" x2="23" y2="23" />
+                      </>
+                    ) : (
+                      <>
+                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                        <circle cx="12" cy="12" r="3" />
+                      </>
+                    )}
+                  </svg>
+                </button>
+              </div>
+              {fieldErrors.password && (
+                <span id="password-error" className="text-xs text-red-500" role="alert">
+                  {fieldErrors.password}
+                </span>
+              )}
+            </div>
+
+            {/* Remember me + Forgot password */}
+            <div className="flex items-center justify-between">
+              <label className="flex items-center gap-2 text-sm text-[#4a5568] cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={rememberMe}
+                  onChange={(e) => setRememberMe(e.target.checked)}
+                  className="accent-[#059669] cursor-pointer"
+                />
+                Remember me
+              </label>
+              <Link to="/forgot-password" className="text-sm text-[#4a5568] hover:text-[#059669]">
+                Forgot Password?
+              </Link>
+            </div>
+
+            {/* Submit */}
+            <button
+              type="submit"
+              disabled={isLoading}
+              className={`mt-1 py-3 rounded-full text-sm font-semibold text-white transition-colors ${
+                isLoading
+                  ? 'bg-[#6ee7b7] cursor-not-allowed'
+                  : 'bg-[#059669] hover:bg-[#047857] cursor-pointer'
+              }`}
+            >
+              {isLoading ? 'Logging in...' : 'Login'}
+            </button>
+          </form>
         </div>
+      </div>
 
-        {successMessage && (
-          <div style={styles.successBanner} role="status">
-            {successMessage}
-          </div>
-        )}
-
-        {genericError && (
-          <div style={styles.genericError} role="alert">
-            {genericError}
-          </div>
-        )}
-
-        <form onSubmit={handleSubmit} noValidate style={styles.form}>
-          <div style={styles.fieldWrapper}>
-            <label htmlFor="email" style={styles.label}>
-              Email
-            </label>
-            <input
-              id="email"
-              name="email"
-              type="email"
-              value={form.email}
-              onChange={handleChange}
-              autoComplete="email"
-              placeholder="contoh@gmail.com"
-              aria-invalid={!!fieldErrors.email}
-              aria-describedby={fieldErrors.email ? 'email-error' : undefined}
-              style={{
-                ...styles.input,
-                ...(fieldErrors.email ? styles.inputError : {}),
-              }}
-            />
-            {fieldErrors.email && (
-              <span id="email-error" style={styles.fieldError} role="alert">
-                {fieldErrors.email}
-              </span>
-            )}
+      {/* RIGHT PANEL */}
+      <div className="hidden lg:flex flex-1 flex-col items-center justify-between bg-[#059669] px-12 py-10">
+        {/* Logo */}
+        <div className="w-full flex items-center gap-2">
+          <div className="w-10 h-10 bg-white rounded-md flex items-center justify-center">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#059669" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" />
+              <rect x="9" y="3" width="6" height="4" rx="2" />
+              <path d="M12 11v4M10 13h4" />
+            </svg>
           </div>
+          <span className="text-white font-semibold text-lg">QueueNova</span>
+        </div>
 
-          <div style={styles.fieldWrapper}>
-            <label htmlFor="password" style={styles.label}>
-              Password
-            </label>
-            <input
-              id="password"
-              name="password"
-              type="password"
-              value={form.password}
-              onChange={handleChange}
-              autoComplete="current-password"
-              placeholder="••••••••"
-              aria-invalid={!!fieldErrors.password}
-              aria-describedby={
-                fieldErrors.password ? 'password-error' : undefined
-              }
-              style={{
-                ...styles.input,
-                ...(fieldErrors.password ? styles.inputError : {}),
-              }}
+        {/* Illustration */}
+        <div className="flex flex-col items-center gap-6 flex-1 justify-center">
+          <div className="relative flex items-end justify-center">
+            {/* Grey cloud blob behind illustration */}
+            <div className="absolute top-4 left-1/2 -translate-x-1/2 w-72 h-64 rounded-full bg-[#b0b8b4] opacity-40 blur-sm" />
+            <img
+              src={doctorsIllustration}
+              alt="Doctor and nurse illustration"
+              className="relative z-10 w-72 h-auto object-contain drop-shadow-md"
             />
-            {fieldErrors.password && (
-              <span id="password-error" style={styles.fieldError} role="alert">
-                {fieldErrors.password}
-              </span>
-            )}
           </div>
 
-          <div style={styles.rememberRow}>
-            <label style={styles.checkboxLabel}>
-              <input
-                type="checkbox"
-                checked={rememberMe}
-                onChange={(e) => setRememberMe(e.target.checked)}
-                style={styles.checkbox}
-              />
-              Ingat saya
-            </label>
-          </div>
+          <p className="text-white text-2xl font-bold text-center">
+            Welcome to QueueNova Health
+          </p>
+        </div>
 
-          <button
-            type="submit"
-            disabled={isLoading}
-            style={{
-              ...styles.button,
-              ...(isLoading ? styles.buttonDisabled : {}),
-            }}
-          >
-            {isLoading ? 'Masuk...' : 'Masuk'}
+        {/* Carousel dots */}
+        <div className="flex items-center gap-3">
+          <button className="text-white opacity-60 hover:opacity-100" aria-label="Previous">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 18l-6-6 6-6"/></svg>
           </button>
-        </form>
-
-        <p style={styles.footer}>
-          Belum punya akun?{' '}
-          <Link to="/register" style={styles.link}>
-            Daftar sekarang
-          </Link>
-        </p>
+          <span className="w-2 h-2 rounded-full bg-white opacity-40 inline-block"/>
+          <span className="w-6 h-2 rounded-full bg-white inline-block"/>
+          <span className="w-2 h-2 rounded-full bg-white opacity-40 inline-block"/>
+          <button className="text-white opacity-60 hover:opacity-100" aria-label="Next">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 18l6-6-6-6"/></svg>
+          </button>
+        </div>
       </div>
     </div>
   );
-}
-
-const styles: Record<string, React.CSSProperties> = {
-  container: {
-    minHeight: '100vh',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#f5f7fa',
-    padding: '24px',
-  },
-  card: {
-    backgroundColor: '#ffffff',
-    borderRadius: '8px',
-    border: '1px solid #e2e8f0',
-    padding: '40px',
-    width: '100%',
-    maxWidth: '400px',
-  },
-  header: {
-    marginBottom: '28px',
-  },
-  title: {
-    fontSize: '20px',
-    fontWeight: 700,
-    color: '#1a202c',
-    margin: 0,
-  },
-  subtitle: {
-    fontSize: '14px',
-    color: '#64748b',
-    marginTop: '4px',
-    marginBottom: 0,
-  },
-  form: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '16px',
-  },
-  fieldWrapper: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '4px',
-  },
-  label: {
-    fontSize: '13px',
-    fontWeight: 500,
-    color: '#374151',
-  },
-  input: {
-    padding: '10px 12px',
-    fontSize: '14px',
-    border: '1px solid #d1d5db',
-    borderRadius: '6px',
-    outline: 'none',
-    color: '#1a202c',
-    backgroundColor: '#ffffff',
-  },
-  inputError: {
-    borderColor: '#ef4444',
-  },
-  fieldError: {
-    fontSize: '12px',
-    color: '#ef4444',
-  },
-  successBanner: {
-    padding: '10px 14px',
-    backgroundColor: '#f0fdf4',
-    border: '1px solid #bbf7d0',
-    borderRadius: '6px',
-    fontSize: '13px',
-    color: '#15803d',
-    marginBottom: '16px',
-  },
-  genericError: {
-    padding: '10px 14px',
-    backgroundColor: '#fef2f2',
-    border: '1px solid #fecaca',
-    borderRadius: '6px',
-    fontSize: '13px',
-    color: '#b91c1c',
-    marginBottom: '16px',
-  },
-  rememberRow: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  checkboxLabel: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '8px',
-    fontSize: '13px',
-    color: '#374151',
-    cursor: 'pointer',
-  },
-  checkbox: {
-    cursor: 'pointer',
-  },
-  button: {
-    marginTop: '4px',
-    padding: '11px',
-    backgroundColor: '#2563eb',
-    color: '#ffffff',
-    border: 'none',
-    borderRadius: '6px',
-    fontSize: '14px',
-    fontWeight: 600,
-    cursor: 'pointer',
-  },
-  buttonDisabled: {
-    backgroundColor: '#93c5fd',
-    cursor: 'not-allowed',
-  },
-  footer: {
-    marginTop: '20px',
-    fontSize: '13px',
-    color: '#64748b',
-    textAlign: 'center',
-  },
-  link: {
-    color: '#2563eb',
-    textDecoration: 'none',
-    fontWeight: 500,
-  },
-};
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/frontend/src/pages/RegisterPage.tsx b/frontend/src/pages/RegisterPage.tsx
index b88afc2..24c7944 100644
--- a/frontend/src/pages/RegisterPage.tsx
+++ b/frontend/src/pages/RegisterPage.tsx
@@ -1,8 +1,10 @@
+// frontend/src/pages/RegisterPage.tsx
 import { useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { AxiosError } from 'axios';
 import { authService } from '../services/authService';
 import type { RegisterPayload, ApiValidationError } from '../types/auth';
+import doctorsIllustration from '../assets/images/canva-doctor-and-nurse-medical-consultation-MAHHY3lElT4.png';
 
 type FieldErrors = Partial<Record<keyof RegisterPayload, string>>;
 
@@ -14,9 +16,10 @@ export default function RegisterPage() {
     email: '',
     password: '',
     password_confirmation: '',
-    phone: '',
   });
 
+  const [showPassword, setShowPassword] = useState(false);
+  const [showPasswordConfirmation, setShowPasswordConfirmation] = useState(false);
   const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
   const [genericError, setGenericError] = useState<string>('');
   const [isLoading, setIsLoading] = useState(false);
@@ -58,225 +61,237 @@ export default function RegisterPage() {
   }
 
   return (
-    <div style={styles.container}>
-      <div style={styles.card}>
-        <div style={styles.header}>
-          <h1 style={styles.title}>QueueNova Health</h1>
-          <p style={styles.subtitle}>Buat akun baru</p>
-        </div>
+    <div className="fixed inset-0 flex flex-col lg:flex-row">
+      {/* LEFT PANEL */}
+      <div className="flex flex-1 items-center justify-center bg-[#f0fdf4] px-8 py-12">
+        <div className="w-full max-w-sm">
 
-        {genericError && (
-          <div style={styles.genericError} role="alert">
-            {genericError}
-          </div>
-        )}
+          {genericError && (
+            <div className="mb-4 px-4 py-3 bg-red-50 border border-red-200 rounded-md text-sm text-red-700" role="alert">
+              {genericError}
+            </div>
+          )}
 
-        <form onSubmit={handleSubmit} noValidate style={styles.form}>
-          <Field
-            label="Nama Lengkap"
-            name="name"
-            type="text"
-            value={form.name}
-            onChange={handleChange}
-            error={fieldErrors.name}
-            autoComplete="name"
-          />
-          <Field
-            label="Email"
-            name="email"
-            type="email"
-            value={form.email}
-            onChange={handleChange}
-            error={fieldErrors.email}
-            autoComplete="email"
-          />
-          <Field
-            label="No. Telepon"
-            name="phone"
-            type="tel"
-            value={form.phone}
-            onChange={handleChange}
-            error={fieldErrors.phone}
-            autoComplete="tel"
-          />
-          <Field
-            label="Password"
-            name="password"
-            type="password"
-            value={form.password}
-            onChange={handleChange}
-            error={fieldErrors.password}
-            autoComplete="new-password"
-          />
-          <Field
-            label="Konfirmasi Password"
-            name="password_confirmation"
-            type="password"
-            value={form.password_confirmation}
-            onChange={handleChange}
-            error={fieldErrors.password_confirmation}
-            autoComplete="new-password"
-          />
+          <h1 className="text-[40px] font-bold text-[#171923] mb-1 leading-tight">Sign up</h1>
 
-          <button
-            type="submit"
-            disabled={isLoading}
-            style={{
-              ...styles.button,
-              ...(isLoading ? styles.buttonDisabled : {}),
-            }}
-          >
-            {isLoading ? 'Mendaftar...' : 'Daftar'}
-          </button>
-        </form>
+          <p className="text-sm text-[#4a5568] mb-8">
+            Already have an account?{' '}
+            <Link to="/login" className="text-[#059669] font-medium underline underline-offset-2">
+              Sign in
+            </Link>
+          </p>
+
+          <form onSubmit={handleSubmit} noValidate className="flex flex-col gap-5">
+
+            {/* Name */}
+            <div className="flex flex-col gap-1">
+              <label htmlFor="name" className="text-sm font-medium text-[#4a5568]">
+                Full Name
+              </label>
+              <input
+                id="name"
+                name="name"
+                type="text"
+                value={form.name}
+                onChange={handleChange}
+                autoComplete="name"
+                placeholder="John Doe"
+                aria-invalid={!!fieldErrors.name}
+                aria-describedby={fieldErrors.name ? 'name-error' : undefined}
+                className={`px-3 py-2.5 text-sm border rounded-lg outline-none bg-white text-[#171923] placeholder:text-[#a0aec0] focus:ring-2 focus:ring-[#059669] focus:border-[#059669] ${
+                  fieldErrors.name ? 'border-red-400' : 'border-[#cbd5e0]'
+                }`}
+              />
+              {fieldErrors.name && (
+                <span id="name-error" className="text-xs text-red-500" role="alert">
+                  {fieldErrors.name}
+                </span>
+              )}
+            </div>
+
+            {/* Email */}
+            <div className="flex flex-col gap-1">
+              <label htmlFor="email" className="text-sm font-medium text-[#4a5568]">
+                Email
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                value={form.email}
+                onChange={handleChange}
+                autoComplete="email"
+                placeholder="example@gmail.com"
+                aria-invalid={!!fieldErrors.email}
+                aria-describedby={fieldErrors.email ? 'email-error' : undefined}
+                className={`px-3 py-2.5 text-sm border rounded-lg outline-none bg-white text-[#171923] placeholder:text-[#a0aec0] focus:ring-2 focus:ring-[#059669] focus:border-[#059669] ${
+                  fieldErrors.email ? 'border-red-400' : 'border-[#cbd5e0]'
+                }`}
+              />
+              {fieldErrors.email && (
+                <span id="email-error" className="text-xs text-red-500" role="alert">
+                  {fieldErrors.email}
+                </span>
+              )}
+            </div>
 
-        <p style={styles.footer}>
-          Sudah punya akun?{' '}
-          <Link to="/login" style={styles.link}>
-            Masuk
-          </Link>
-        </p>
+            {/* Password */}
+            <div className="flex flex-col gap-1">
+              <label htmlFor="password" className="text-sm font-medium text-[#4a5568]">
+                Password
+              </label>
+              <div className="relative">
+                <input
+                  id="password"
+                  name="password"
+                  type={showPassword ? 'text' : 'password'}
+                  value={form.password}
+                  onChange={handleChange}
+                  autoComplete="new-password"
+                  placeholder="@#*%"
+                  aria-invalid={!!fieldErrors.password}
+                  aria-describedby={fieldErrors.password ? 'password-error' : undefined}
+                  className={`w-full px-3 py-2.5 pr-10 text-sm border rounded-lg outline-none bg-white text-[#171923] placeholder:text-[#a0aec0] focus:ring-2 focus:ring-[#059669] focus:border-[#059669] ${
+                    fieldErrors.password ? 'border-red-400' : 'border-[#cbd5e0]'
+                  }`}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword((v) => !v)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-[#718096] hover:text-[#4a5568]"
+                  aria-label={showPassword ? 'Hide password' : 'Show password'}
+                >
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    {showPassword ? (
+                      <>
+                        <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" />
+                        <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" />
+                        <line x1="1" y1="1" x2="23" y2="23" />
+                      </>
+                    ) : (
+                      <>
+                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                        <circle cx="12" cy="12" r="3" />
+                      </>
+                    )}
+                  </svg>
+                </button>
+              </div>
+              {fieldErrors.password && (
+                <span id="password-error" className="text-xs text-red-500" role="alert">
+                  {fieldErrors.password}
+                </span>
+              )}
+            </div>
+
+            {/* Confirm Password */}
+            <div className="flex flex-col gap-1">
+              <label htmlFor="password_confirmation" className="text-sm font-medium text-[#4a5568]">
+                Confirm Password
+              </label>
+              <div className="relative">
+                <input
+                  id="password_confirmation"
+                  name="password_confirmation"
+                  type={showPasswordConfirmation ? 'text' : 'password'}
+                  value={form.password_confirmation}
+                  onChange={handleChange}
+                  autoComplete="new-password"
+                  placeholder="@#*%"
+                  aria-invalid={!!fieldErrors.password_confirmation}
+                  aria-describedby={fieldErrors.password_confirmation ? 'password-confirmation-error' : undefined}
+                  className={`w-full px-3 py-2.5 pr-10 text-sm border rounded-lg outline-none bg-white text-[#171923] placeholder:text-[#a0aec0] focus:ring-2 focus:ring-[#059669] focus:border-[#059669] ${
+                    fieldErrors.password_confirmation ? 'border-red-400' : 'border-[#cbd5e0]'
+                  }`}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPasswordConfirmation((v) => !v)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-[#718096] hover:text-[#4a5568]"
+                  aria-label={showPasswordConfirmation ? 'Hide password' : 'Show password'}
+                >
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    {showPasswordConfirmation ? (
+                      <>
+                        <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" />
+                        <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" />
+                        <line x1="1" y1="1" x2="23" y2="23" />
+                      </>
+                    ) : (
+                      <>
+                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                        <circle cx="12" cy="12" r="3" />
+                      </>
+                    )}
+                  </svg>
+                </button>
+              </div>
+              {fieldErrors.password_confirmation && (
+                <span id="password-confirmation-error" className="text-xs text-red-500" role="alert">
+                  {fieldErrors.password_confirmation}
+                </span>
+              )}
+            </div>
+
+            {/* Submit */}
+            <button
+              type="submit"
+              disabled={isLoading}
+              className={`mt-1 py-3 rounded-full text-sm font-semibold text-white transition-colors ${
+                isLoading
+                  ? 'bg-[#6ee7b7] cursor-not-allowed'
+                  : 'bg-[#059669] hover:bg-[#047857] cursor-pointer'
+              }`}
+            >
+              {isLoading ? 'Register...' : 'Register'}
+            </button>
+          </form>
+        </div>
       </div>
-    </div>
-  );
-}
 
-interface FieldProps {
-  label: string;
-  name: string;
-  type: string;
-  value: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  error?: string;
-  autoComplete?: string;
-}
+      {/* RIGHT PANEL */}
+      <div className="hidden lg:flex flex-1 flex-col items-center justify-between bg-[#059669] px-12 py-10">
+        {/* Logo */}
+        <div className="w-full flex items-center gap-2">
+          <div className="w-10 h-10 bg-white rounded-md flex items-center justify-center">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#059669" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" />
+              <rect x="9" y="3" width="6" height="4" rx="2" />
+              <path d="M12 11v4M10 13h4" />
+            </svg>
+          </div>
+          <span className="text-white font-semibold text-lg">QueueNova</span>
+        </div>
 
-function Field({ label, name, type, value, onChange, error, autoComplete }: FieldProps) {
-  return (
-    <div style={styles.fieldWrapper}>
-      <label htmlFor={name} style={styles.label}>
-        {label}
-      </label>
-      <input
-        id={name}
-        name={name}
-        type={type}
-        value={value}
-        onChange={onChange}
-        autoComplete={autoComplete}
-        aria-invalid={!!error}
-        aria-describedby={error ? `${name}-error` : undefined}
-        style={{
-          ...styles.input,
-          ...(error ? styles.inputError : {}),
-        }}
-      />
-      {error && (
-        <span id={`${name}-error`} style={styles.fieldError} role="alert">
-          {error}
-        </span>
-      )}
+        {/* Illustration */}
+        <div className="flex flex-col items-center gap-6 flex-1 justify-center">
+          <div className="relative flex items-end justify-center">
+            <div className="absolute top-4 left-1/2 -translate-x-1/2 w-72 h-64 rounded-full bg-[#b0b8b4] opacity-40 blur-sm" />
+            <img
+              src={doctorsIllustration}
+              alt="Doctor and nurse illustration"
+              className="relative z-10 w-72 h-auto object-contain drop-shadow-md"
+            />
+          </div>
+
+          <p className="text-white text-2xl font-bold text-center">
+            Welcome to QueueNova Health
+          </p>
+        </div>
+
+        {/* Carousel dots */}
+        <div className="flex items-center gap-3">
+          <button className="text-white opacity-60 hover:opacity-100" aria-label="Previous">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 18l-6-6 6-6"/></svg>
+          </button>
+          <span className="w-2 h-2 rounded-full bg-white opacity-40 inline-block"/>
+          <span className="w-6 h-2 rounded-full bg-white inline-block"/>
+          <span className="w-2 h-2 rounded-full bg-white opacity-40 inline-block"/>
+          <button className="text-white opacity-60 hover:opacity-100" aria-label="Next">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 18l6-6-6-6"/></svg>
+          </button>
+        </div>
+      </div>
     </div>
   );
-}
-
-const styles: Record<string, React.CSSProperties> = {
-  container: {
-    minHeight: '100vh',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#f5f7fa',
-    padding: '24px',
-  },
-  card: {
-    backgroundColor: '#ffffff',
-    borderRadius: '8px',
-    border: '1px solid #e2e8f0',
-    padding: '40px',
-    width: '100%',
-    maxWidth: '420px',
-  },
-  header: {
-    marginBottom: '28px',
-  },
-  title: {
-    fontSize: '20px',
-    fontWeight: 700,
-    color: '#1a202c',
-    margin: 0,
-  },
-  subtitle: {
-    fontSize: '14px',
-    color: '#64748b',
-    marginTop: '4px',
-    marginBottom: 0,
-  },
-  form: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '16px',
-  },
-  fieldWrapper: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '4px',
-  },
-  label: {
-    fontSize: '13px',
-    fontWeight: 500,
-    color: '#374151',
-  },
-  input: {
-    padding: '10px 12px',
-    fontSize: '14px',
-    border: '1px solid #d1d5db',
-    borderRadius: '6px',
-    outline: 'none',
-    color: '#1a202c',
-    backgroundColor: '#ffffff',
-    transition: 'border-color 0.15s',
-  },
-  inputError: {
-    borderColor: '#ef4444',
-  },
-  fieldError: {
-    fontSize: '12px',
-    color: '#ef4444',
-  },
-  genericError: {
-    padding: '10px 14px',
-    backgroundColor: '#fef2f2',
-    border: '1px solid #fecaca',
-    borderRadius: '6px',
-    fontSize: '13px',
-    color: '#b91c1c',
-    marginBottom: '16px',
-  },
-  button: {
-    marginTop: '4px',
-    padding: '11px',
-    backgroundColor: '#2563eb',
-    color: '#ffffff',
-    border: 'none',
-    borderRadius: '6px',
-    fontSize: '14px',
-    fontWeight: 600,
-    cursor: 'pointer',
-  },
-  buttonDisabled: {
-    backgroundColor: '#93c5fd',
-    cursor: 'not-allowed',
-  },
-  footer: {
-    marginTop: '20px',
-    fontSize: '13px',
-    color: '#64748b',
-    textAlign: 'center',
-  },
-  link: {
-    color: '#2563eb',
-    textDecoration: 'none',
-    fontWeight: 500,
-  },
-};
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/frontend/src/tests/pages/LoginPage.test.tsx b/frontend/src/tests/pages/LoginPage.test.tsx
index 7eb606b..9eec75a 100644
--- a/frontend/src/tests/pages/LoginPage.test.tsx
+++ b/frontend/src/tests/pages/LoginPage.test.tsx
@@ -39,7 +39,7 @@ function renderLoginPage() {
 }
 
 const mockLoginResponse: { message: string; data: LoginResponseData } = {
-  message: 'Login berhasil.',
+  message: 'Login successful.',
   data: {
     token: 'test-token-123',
     token_type: 'Bearer',
@@ -70,7 +70,7 @@ describe('LoginPage', () => {
     renderLoginPage();
     expect(screen.getByLabelText('Email')).toBeInTheDocument();
     expect(screen.getByLabelText('Password')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Masuk' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Login' })).toBeInTheDocument();
   });
 
   it('calls authService.login with correct payload on submit', async () => {
@@ -84,7 +84,7 @@ describe('LoginPage', () => {
     fireEvent.change(screen.getByLabelText('Password'), {
       target: { value: 'password123' },
     });
-    fireEvent.click(screen.getByRole('button', { name: 'Masuk' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Login' }));
 
     await waitFor(() => {
       expect(authService.login).toHaveBeenCalledWith({
@@ -104,7 +104,7 @@ describe('LoginPage', () => {
     fireEvent.change(screen.getByLabelText('Password'), {
       target: { value: 'password123' },
     });
-    fireEvent.click(screen.getByRole('button', { name: 'Masuk' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Login' }));
 
     await waitFor(() => {
       expect(mockSetAuth).toHaveBeenCalledWith(mockLoginResponse.data);
@@ -123,7 +123,7 @@ describe('LoginPage', () => {
     vi.mocked(authService.login).mockRejectedValueOnce(error);
 
     renderLoginPage();
-    fireEvent.click(screen.getByRole('button', { name: 'Masuk' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Login' }));
 
     await waitFor(() => {
       expect(
@@ -146,7 +146,7 @@ describe('LoginPage', () => {
     vi.mocked(authService.login).mockRejectedValueOnce(error);
 
     renderLoginPage();
-    fireEvent.click(screen.getByRole('button', { name: 'Masuk' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Login' }));
 
     await waitFor(() => {
       expect(
@@ -161,10 +161,10 @@ describe('LoginPage', () => {
     );
 
     renderLoginPage();
-    fireEvent.click(screen.getByRole('button', { name: 'Masuk' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Login' }));
 
     await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'Masuk...' })).toBeDisabled();
+      expect(screen.getByRole('button', { name: 'Logging in...' })).toBeDisabled();
     });
   });
 
diff --git a/frontend/src/tests/pages/RegisterPage.test.tsx b/frontend/src/tests/pages/RegisterPage.test.tsx
index 4f13cb4..1cc7961 100644
--- a/frontend/src/tests/pages/RegisterPage.test.tsx
+++ b/frontend/src/tests/pages/RegisterPage.test.tsx
@@ -45,12 +45,11 @@ describe('RegisterPage', () => {
 
   it('renders all form fields and submit button', () => {
     renderRegisterPage();
-    expect(screen.getByLabelText('Nama Lengkap')).toBeInTheDocument();
+    expect(screen.getByLabelText('Full Name')).toBeInTheDocument();
     expect(screen.getByLabelText('Email')).toBeInTheDocument();
-    expect(screen.getByLabelText('No. Telepon')).toBeInTheDocument();
     expect(screen.getByLabelText('Password')).toBeInTheDocument();
-    expect(screen.getByLabelText('Konfirmasi Password')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Daftar' })).toBeInTheDocument();
+    expect(screen.getByLabelText('Confirm Password')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Register' })).toBeInTheDocument();
   });
 
   it('calls authService.register with form values on submit', async () => {
@@ -61,29 +60,25 @@ describe('RegisterPage', () => {
 
     renderRegisterPage();
 
-    fireEvent.change(screen.getByLabelText('Nama Lengkap'), {
+    fireEvent.change(screen.getByLabelText('Full Name'), {
       target: { value: 'Ucok Sitorus' },
     });
     fireEvent.change(screen.getByLabelText('Email'), {
       target: { value: 'ucok@example.com' },
     });
-    fireEvent.change(screen.getByLabelText('No. Telepon'), {
-      target: { value: '081234567890' },
-    });
     fireEvent.change(screen.getByLabelText('Password'), {
       target: { value: 'password123' },
     });
-    fireEvent.change(screen.getByLabelText('Konfirmasi Password'), {
+    fireEvent.change(screen.getByLabelText('Confirm Password'), {
       target: { value: 'password123' },
     });
 
-    fireEvent.click(screen.getByRole('button', { name: 'Daftar' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Register' }));
 
     await waitFor(() => {
       expect(authService.register).toHaveBeenCalledWith({
         name: 'Ucok Sitorus',
         email: 'ucok@example.com',
-        phone: '081234567890',
         password: 'password123',
         password_confirmation: 'password123',
       });
@@ -100,7 +95,7 @@ describe('RegisterPage', () => {
     fireEvent.change(screen.getByLabelText('Email'), {
       target: { value: 'ucok@example.com' },
     });
-    fireEvent.click(screen.getByRole('button', { name: 'Daftar' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Register' }));
 
     await waitFor(() => {
       expect(mockNavigate).toHaveBeenCalledWith('/login', {
@@ -123,7 +118,7 @@ describe('RegisterPage', () => {
     vi.mocked(authService.register).mockRejectedValueOnce(error);
 
     renderRegisterPage();
-    fireEvent.click(screen.getByRole('button', { name: 'Daftar' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Register' }));
 
     await waitFor(() => {
       expect(
@@ -136,7 +131,7 @@ describe('RegisterPage', () => {
     vi.mocked(authService.register).mockRejectedValueOnce(new Error('Network Error'));
 
     renderRegisterPage();
-    fireEvent.click(screen.getByRole('button', { name: 'Daftar' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Register' }));
 
     await waitFor(() => {
       expect(
@@ -151,10 +146,10 @@ describe('RegisterPage', () => {
     );
 
     renderRegisterPage();
-    fireEvent.click(screen.getByRole('button', { name: 'Daftar' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Register' }));
 
     await waitFor(() => {
-      expect(screen.getByRole('button', { name: 'Mendaftar...' })).toBeDisabled();
+      expect(screen.getByRole('button', { name: 'Register...' })).toBeDisabled();
     });
   });
 });
\ No newline at end of file
diff --git a/frontend/src/types/auth.ts b/frontend/src/types/auth.ts
index 8e1aaa6..8d356e8 100644
--- a/frontend/src/types/auth.ts
+++ b/frontend/src/types/auth.ts
@@ -29,7 +29,7 @@ export interface PatientProfile {
     email: string;
     password: string;
     password_confirmation: string;
-    phone: string;
+    // phone: string;
   }
   
   export interface LoginPayload {