diff --git a/backend/prisma/schema.prisma b/backend/prisma/schema.prisma
index e599dcd..0ba0d67 100644
--- a/backend/prisma/schema.prisma
+++ b/backend/prisma/schema.prisma
@@ -1,6 +1,5 @@
 generator client {
   provider = "prisma-client-js"
-  output   = "../generated/prisma"
 }
 
 datasource db {
@@ -50,12 +49,11 @@ model Medication {
   patientId    String   @map("patient_id") @db.Uuid
   name         String   @db.VarChar(255)
   quantity     String   @db.VarChar(100)
-  instructions String?  @db.Text
+  instructions String?
   createdAt    DateTime @default(now()) @map("created_at") @db.Timestamp(6)
   updatedAt    DateTime @updatedAt @map("updated_at") @db.Timestamp(6)
-  
-  visit   Visit   @relation(fields: [visitId], references: [id], onDelete: Cascade)
-  patient Patient @relation(fields: [patientId], references: [id], onDelete: Cascade)
+  patient      Patient  @relation(fields: [patientId], references: [id], onDelete: Cascade)
+  visit        Visit    @relation(fields: [visitId], references: [id], onDelete: Cascade)
 
   @@index([visitId])
   @@index([patientId])
@@ -63,23 +61,23 @@ model Medication {
 }
 
 model Patient {
-  id                  String      @id @default(uuid()) @db.Uuid
-  patientNumber       String      @unique @map("patient_number") @db.VarChar(50)
-  fullName            String      @map("full_name") @db.VarChar(255)
-  dateOfBirth         DateTime    @map("date_of_birth") @db.Date
+  id                  String       @id @default(uuid()) @db.Uuid
+  patientNumber       String       @unique @map("patient_number") @db.VarChar(50)
+  fullName            String       @map("full_name") @db.VarChar(255)
+  dateOfBirth         DateTime     @map("date_of_birth") @db.Date
   gender              Gender
-  phone               String      @db.VarChar(20)
-  email               String?     @db.VarChar(255)
+  phone               String       @db.VarChar(20)
+  email               String?      @db.VarChar(255)
   address             String?
-  bloodType           String?     @map("blood_type") @db.VarChar(5)
+  bloodType           String?      @map("blood_type") @db.VarChar(5)
   allergies           String?
-  medicalHistory      String?     @map("medical_history")
-  createdAt           DateTime    @default(now()) @map("created_at") @db.Timestamp(6)
-  updatedAt           DateTime    @updatedAt @map("updated_at") @db.Timestamp(6)
-  medicalRecordNumber String?     @unique @map("medical_record_number") @db.VarChar(50)
+  medicalHistory      String?      @map("medical_history")
+  createdAt           DateTime     @default(now()) @map("created_at") @db.Timestamp(6)
+  updatedAt           DateTime     @updatedAt @map("updated_at") @db.Timestamp(6)
+  medicalRecordNumber String?      @unique @map("medical_record_number") @db.VarChar(50)
+  medications         Medication[]
   treatments          Treatment[]
   visits              Visit[]
-  medications         Medication[]
 
   @@index([patientNumber])
   @@index([fullName])
@@ -172,24 +170,24 @@ model Package {
 }
 
 model Visit {
-  id             String      @id @default(uuid()) @db.Uuid
-  patientId      String      @map("patient_id") @db.Uuid
-  nurseId        String      @map("nurse_id") @db.Uuid
-  visitNumber    String      @unique @map("visit_number") @db.VarChar(50)
-  visitDate      DateTime    @map("visit_date") @db.Timestamp(6)
-  queueNumber    Int         @map("queue_number")
-  status         VisitStatus @default(WAITING)
-  chiefComplaint String?     @map("chief_complaint")
-  bloodPressure  String?     @map("blood_pressure") @db.VarChar(20)
+  id             String       @id @default(uuid()) @db.Uuid
+  patientId      String       @map("patient_id") @db.Uuid
+  nurseId        String       @map("nurse_id") @db.Uuid
+  visitNumber    String       @unique @map("visit_number") @db.VarChar(50)
+  visitDate      DateTime     @map("visit_date") @db.Timestamp(6)
+  queueNumber    Int          @map("queue_number")
+  status         VisitStatus  @default(WAITING)
+  chiefComplaint String?      @map("chief_complaint")
+  bloodPressure  String?      @map("blood_pressure") @db.VarChar(20)
   notes          String?
-  totalCost      Decimal     @default(0) @map("total_cost") @db.Decimal(12, 2)
-  createdAt      DateTime    @default(now()) @map("created_at") @db.Timestamp(6)
-  updatedAt      DateTime    @updatedAt @map("updated_at") @db.Timestamp(6)
+  totalCost      Decimal      @default(0) @map("total_cost") @db.Decimal(12, 2)
+  createdAt      DateTime     @default(now()) @map("created_at") @db.Timestamp(6)
+  updatedAt      DateTime     @updatedAt @map("updated_at") @db.Timestamp(6)
+  medications    Medication[]
   payments       Payment[]
   treatments     Treatment[]
-  medications    Medication[]
-  nurse          User        @relation("NurseVisits", fields: [nurseId], references: [id])
-  patient        Patient     @relation(fields: [patientId], references: [id], onDelete: Cascade)
+  nurse          User         @relation("NurseVisits", fields: [nurseId], references: [id], onUpdate: NoAction)
+  patient        Patient      @relation(fields: [patientId], references: [id], onDelete: Cascade)
 
   @@index([patientId])
   @@index([nurseId])
diff --git a/backend/src/config/database.ts b/backend/src/config/database.ts
index 06c4b7d..8977ad1 100644
--- a/backend/src/config/database.ts
+++ b/backend/src/config/database.ts
@@ -1,4 +1,4 @@
-import { PrismaClient } from '../../generated/prisma';
+import { PrismaClient } from '@prisma/client';
 
 const globalForPrisma = global as unknown as {
   prisma: PrismaClient | undefined;
diff --git a/backend/src/controllers/calendar.controller.ts b/backend/src/controllers/calendar.controller.ts
index f6aee80..95ea723 100644
--- a/backend/src/controllers/calendar.controller.ts
+++ b/backend/src/controllers/calendar.controller.ts
@@ -1,5 +1,5 @@
 import { Response } from 'express';
-import { PrismaClient, Prisma, UserRole } from '../../generated/prisma';
+import { PrismaClient, Prisma, UserRole } from '@prisma/client';
 
 const prisma = new PrismaClient();
 
diff --git a/backend/src/controllers/commission.controller.ts b/backend/src/controllers/commission.controller.ts
index 9960987..d6c8b83 100644
--- a/backend/src/controllers/commission.controller.ts
+++ b/backend/src/controllers/commission.controller.ts
@@ -2,7 +2,7 @@ import { Response, NextFunction } from 'express';
 import { AuthRequest } from '../types/express.types';
 import { CommissionService } from '../services/commission.service';
 import { successResponse } from '../utils/response.util';
-import { ServiceCategory } from '../../generated/prisma';
+import { ServiceCategory } from '@prisma/client';
 
 const commissionService = new CommissionService();
 
diff --git a/backend/src/middlewares/auth.middleware.ts b/backend/src/middlewares/auth.middleware.ts
index 304cdfa..2d51f46 100644
--- a/backend/src/middlewares/auth.middleware.ts
+++ b/backend/src/middlewares/auth.middleware.ts
@@ -1,6 +1,6 @@
 import { Request, Response, NextFunction } from 'express';
 import jwt from 'jsonwebtoken';
-import { PrismaClient, UserRole } from '../../generated/prisma';
+import { PrismaClient, UserRole } from '@prisma/client';
 
 const prisma = new PrismaClient();
 
diff --git a/backend/src/middlewares/role.middleware.ts b/backend/src/middlewares/role.middleware.ts
index ac04c84..9c0637e 100644
--- a/backend/src/middlewares/role.middleware.ts
+++ b/backend/src/middlewares/role.middleware.ts
@@ -1,5 +1,5 @@
 import { Response, NextFunction } from 'express';
-import { UserRole } from '../../generated/prisma';
+import { UserRole } from '@prisma/client';
 import { AuthRequest } from '../types/express.types';
 import { errorResponse } from '../utils/response.util';
 
diff --git a/backend/src/middlewares/Upload.middleware.ts b/backend/src/middlewares/upload.middleware.ts
similarity index 100%
rename from backend/src/middlewares/Upload.middleware.ts
rename to backend/src/middlewares/upload.middleware.ts
diff --git a/backend/src/routes/commission.routes.ts b/backend/src/routes/commission.routes.ts
index adffef1..f1712aa 100644
--- a/backend/src/routes/commission.routes.ts
+++ b/backend/src/routes/commission.routes.ts
@@ -2,7 +2,7 @@ import { Router } from 'express';
 import { CommissionController } from '../controllers/commission.controller';
 import { authMiddleware } from '../middlewares/auth.middleware';
 import { roleMiddleware } from '../middlewares/role.middleware';
-import { UserRole } from '../../generated/prisma';
+import { UserRole } from '@prisma/client';
 
 const router = Router();
 const commissionController = new CommissionController();
diff --git a/backend/src/routes/dashboard-nurse.routes.ts b/backend/src/routes/dashboard-nurse.routes.ts
index c4d4e10..81bfe2f 100644
--- a/backend/src/routes/dashboard-nurse.routes.ts
+++ b/backend/src/routes/dashboard-nurse.routes.ts
@@ -2,7 +2,7 @@ import { Router } from 'express';
 import { DashboardNurseController } from '../controllers/dashboard-nurse.controller';
 import { authMiddleware } from '../middlewares/auth.middleware';
 import { roleMiddleware } from '../middlewares/role.middleware';
-import { UserRole } from '../../generated/prisma';
+import { UserRole } from '@prisma/client';
 
 const router = Router();
 const dashboardNurseController = new DashboardNurseController();
diff --git a/backend/src/routes/dashboard.routes.ts b/backend/src/routes/dashboard.routes.ts
index 1995fc9..e5771bd 100644
--- a/backend/src/routes/dashboard.routes.ts
+++ b/backend/src/routes/dashboard.routes.ts
@@ -2,7 +2,7 @@ import { Router } from 'express';
 import { DashboardController } from '../controllers/dashboard.controller';
 import { authMiddleware } from '../middlewares/auth.middleware';
 import { roleMiddleware } from '../middlewares/role.middleware';
-import { UserRole } from '../../generated/prisma';
+import { UserRole } from '@prisma/client';
 
 const router = Router();
 const dashboardController = new DashboardController();
diff --git a/backend/src/routes/finance.routes.ts b/backend/src/routes/finance.routes.ts
index 7e1894f..b55f823 100644
--- a/backend/src/routes/finance.routes.ts
+++ b/backend/src/routes/finance.routes.ts
@@ -2,7 +2,7 @@ import { Router } from 'express';
 import { FinanceController } from '../controllers/finance.controller';
 import { authMiddleware } from '../middlewares/auth.middleware';
 import { roleMiddleware } from '../middlewares/role.middleware';
-import { UserRole } from '../../generated/prisma';
+import { UserRole } from '@prisma/client';
 
 const router = Router();
 const financeController = new FinanceController();
diff --git a/backend/src/routes/nurse-profile.routes.ts b/backend/src/routes/nurse-profile.routes.ts
index 75827db..7f19a0b 100644
--- a/backend/src/routes/nurse-profile.routes.ts
+++ b/backend/src/routes/nurse-profile.routes.ts
@@ -4,7 +4,7 @@ import { authMiddleware } from '../middlewares/auth.middleware';
 import { roleMiddleware } from '../middlewares/role.middleware';
 import { validate } from '../middlewares/validation.middleware';
 import { updateProfileSchema } from '../validators/profile.validator';
-import { UserRole } from '../../generated/prisma';
+import { UserRole } from '@prisma/client';
 
 const router = Router();
 const nurseProfileController = new NurseProfileController();
diff --git a/backend/src/routes/service.routes.ts b/backend/src/routes/service.routes.ts
index 229e1d4..27cf03c 100644
--- a/backend/src/routes/service.routes.ts
+++ b/backend/src/routes/service.routes.ts
@@ -2,7 +2,7 @@ import { Router } from 'express';
 import { ServiceController } from '../controllers/service.controller';
 import { authMiddleware } from '../middlewares/auth.middleware';
 import { roleMiddleware } from '../middlewares/role.middleware';
-import { UserRole } from '../../generated/prisma';
+import { UserRole } from '@prisma/client';
 
 const router = Router();
 const serviceController = new ServiceController();
diff --git a/backend/src/routes/treatment.routes.ts b/backend/src/routes/treatment.routes.ts
index ad2847c..0f66705 100644
--- a/backend/src/routes/treatment.routes.ts
+++ b/backend/src/routes/treatment.routes.ts
@@ -2,10 +2,10 @@ import { Router } from 'express';
 import { TreatmentController } from '../controllers/treatment.controller';
 import { authMiddleware } from '../middlewares/auth.middleware';
 import { roleMiddleware } from '../middlewares/role.middleware';
-import { uploadMiddleware } from '../middlewares/Upload.middleware';
+import { uploadMiddleware } from '../middlewares/upload.middleware';
 import { validate } from '../middlewares/validation.middleware';
 import { updateTreatmentSchema } from '../validators/treatment.validator';
-import { UserRole } from '../../generated/prisma';
+import { UserRole } from '@prisma/client';
 
 const router = Router();
 const treatmentController = new TreatmentController();
diff --git a/backend/src/routes/user.routes.ts b/backend/src/routes/user.routes.ts
index 9e72013..d7ecc60 100644
--- a/backend/src/routes/user.routes.ts
+++ b/backend/src/routes/user.routes.ts
@@ -2,7 +2,7 @@ import { Router } from 'express';
 import { UserController } from '../controllers/user.controller';
 import { authMiddleware } from '../middlewares/auth.middleware';
 import { roleMiddleware } from '../middlewares/role.middleware';
-import { UserRole } from '../../generated/prisma';
+import { UserRole } from '@prisma/client';
 
 const router = Router();
 const userController = new UserController();
diff --git a/backend/src/services/auth.service.ts b/backend/src/services/auth.service.ts
index 0e8277e..496c558 100644
--- a/backend/src/services/auth.service.ts
+++ b/backend/src/services/auth.service.ts
@@ -1,5 +1,5 @@
 import { prisma } from '../config/database';
-import { UserRole } from '../../generated/prisma';
+import { UserRole } from '@prisma/client';
 import { hashPassword, comparePassword } from '../utils/bcrypt.util';
 import { generateToken } from '../utils/jwt.util';
 import { AppError } from '../middlewares/error.middleware';
diff --git a/backend/src/services/commission.service.ts b/backend/src/services/commission.service.ts
index 8aab9f9..ab98a91 100644
--- a/backend/src/services/commission.service.ts
+++ b/backend/src/services/commission.service.ts
@@ -1,5 +1,5 @@
 import { prisma } from '../config/database';
-import { ServiceCategory, Commission, Treatment, Service, Visit, Patient } from '../../generated/prisma';
+import { ServiceCategory, Commission, Treatment, Service, Visit, Patient } from '@prisma/client';
 import { getCurrentMonth, getCurrentYear } from '../utils/date.util';
 import { Decimal } from '@prisma/client/runtime/library';
 
diff --git a/backend/src/services/payment.service.ts b/backend/src/services/payment.service.ts
index ca412ca..766bfd1 100644
--- a/backend/src/services/payment.service.ts
+++ b/backend/src/services/payment.service.ts
@@ -1,5 +1,5 @@
 import { prisma } from '../config/database';
-import { PaymentMethod, PaymentStatus } from '../../generated/prisma';
+import { PaymentMethod, PaymentStatus } from '@prisma/client';
 import { AppError } from '../middlewares/error.middleware';
 
 interface CreatePaymentData {
diff --git a/backend/src/services/schedule.service.ts b/backend/src/services/schedule.service.ts
index 99b83cc..a9b2ed0 100644
--- a/backend/src/services/schedule.service.ts
+++ b/backend/src/services/schedule.service.ts
@@ -1,5 +1,5 @@
 import { prisma } from '../config/database';
-import { ScheduleType } from '../../generated/prisma';
+import { ScheduleType } from '@prisma/client';
 
 interface CreateScheduleData {
   title: string;
diff --git a/backend/src/services/service.service.ts b/backend/src/services/service.service.ts
index 34d0fd4..67ebf1a 100644
--- a/backend/src/services/service.service.ts
+++ b/backend/src/services/service.service.ts
@@ -1,6 +1,6 @@
 import { prisma } from '../config/database';
 import { AppError } from '../middlewares/error.middleware';
-import { ServiceCategory } from '../../generated/prisma';
+import { ServiceCategory } from '@prisma/client';
 
 interface CreateServiceData {
   serviceName: string;
diff --git a/backend/src/services/user.service.ts b/backend/src/services/user.service.ts
index 6f64cad..b682754 100644
--- a/backend/src/services/user.service.ts
+++ b/backend/src/services/user.service.ts
@@ -1,5 +1,5 @@
 import { prisma } from '../config/database';
-import { UserRole } from '../../generated/prisma';
+import { UserRole } from '@prisma/client';
 import { hashPassword } from '../utils/bcrypt.util';
 import { AppError } from '../middlewares/error.middleware';
 
diff --git a/backend/src/services/visit.service.ts b/backend/src/services/visit.service.ts
index 6eb6d57..5a8cafd 100644
--- a/backend/src/services/visit.service.ts
+++ b/backend/src/services/visit.service.ts
@@ -1,5 +1,5 @@
 import { prisma } from "../config/database";
-import { VisitStatus, Gender } from "../../generated/prisma";
+import { VisitStatus, Gender } from "@prisma/client";
 import { AppError } from "../middlewares/error.middleware";
 
 interface CreatePatientData {
@@ -145,11 +145,9 @@ export class VisitService {
           createdAt: "desc",
         },
       },
-      medications: {
-        orderBy: {
-          createdAt: "asc"
-        }
-      },
+      // `medications` relation is fetched separately because the generated Prisma
+      // client does not include it in `VisitInclude` for the current introspected schema.
+      // We'll load medications after retrieving the visit.
       payments: true,
     },
     orderBy: {
@@ -161,7 +159,16 @@ export class VisitService {
     throw new AppError("Kunjungan tidak ditemukan", 404);
   }
 
-    return visit;
+  // Load medications separately and attach them to the returned object
+  const medications = await prisma.medication.findMany({
+    where: { visitId: visit.id },
+    orderBy: { createdAt: "asc" },
+  });
+
+  return {
+    ...visit,
+    medications,
+  };
   }
 
   async getVisits(
diff --git a/backend/src/types/express.d.ts b/backend/src/types/express.d.ts
index 7b3e79b..0356a36 100644
--- a/backend/src/types/express.d.ts
+++ b/backend/src/types/express.d.ts
@@ -1,4 +1,4 @@
-import { UserRole } from '../../generated/prisma';
+import { UserRole } from '@prisma/client';
 
 declare global {
   namespace Express {
diff --git a/backend/src/types/express.types.ts b/backend/src/types/express.types.ts
index 110d4f0..59678cf 100644
--- a/backend/src/types/express.types.ts
+++ b/backend/src/types/express.types.ts
@@ -1,5 +1,5 @@
 import { Request } from 'express';
-import { UserRole } from '../../generated/prisma';
+import { UserRole } from '@prisma/client';
 
 export interface AuthUser {
   id: string;
diff --git a/backend/src/types/express/index.d.ts b/backend/src/types/express/index.d.ts
index 7dace5c..9c8f137 100644
--- a/backend/src/types/express/index.d.ts
+++ b/backend/src/types/express/index.d.ts
@@ -1,4 +1,4 @@
-import { UserRole } from '../../generated/prisma';
+import { UserRole } from '@prisma/client';
 
 declare global {
   namespace Express {
diff --git a/backend/src/utils/Email.util.ts b/backend/src/utils/email.util.ts
similarity index 100%
rename from backend/src/utils/Email.util.ts
rename to backend/src/utils/email.util.ts
diff --git a/backend/src/validators/Leave.validator.ts b/backend/src/validators/leave.validator.ts
similarity index 100%
rename from backend/src/validators/Leave.validator.ts
rename to backend/src/validators/leave.validator.ts
diff --git a/backend/src/validators/Payment.validator.ts b/backend/src/validators/payment.validator.ts
similarity index 100%
rename from backend/src/validators/Payment.validator.ts
rename to backend/src/validators/payment.validator.ts
diff --git a/backend/src/validators/Schedule.validator.ts b/backend/src/validators/schedule.validator.ts
similarity index 100%
rename from backend/src/validators/Schedule.validator.ts
rename to backend/src/validators/schedule.validator.ts
diff --git a/backend/src/validators/Treatment.validator.ts b/backend/src/validators/treatment.validator.ts
similarity index 100%
rename from backend/src/validators/Treatment.validator.ts
rename to backend/src/validators/treatment.validator.ts
diff --git a/backend/src/validators/Visit.validator.ts b/backend/src/validators/visit.validator.ts
similarity index 100%
rename from backend/src/validators/Visit.validator.ts
rename to backend/src/validators/visit.validator.ts
diff --git a/frontend/src/app/dashboard/dokter/main/page.tsx b/frontend/src/app/dashboard/dokter/main/page.tsx
index e74421e..115d3e1 100644
--- a/frontend/src/app/dashboard/dokter/main/page.tsx
+++ b/frontend/src/app/dashboard/dokter/main/page.tsx
@@ -83,26 +83,48 @@ export default function DoctorDashboard() {
               <span className="text-sm">{profile?.specialization || 'Dokter Gigi'}</span>
             </p>
 
-            <div className="flex items-center gap-2 text-sm text-gray-500 mt-2">
-              <MapPin className="w-4 h-4" />
-              <span>Tempat Praktik</span>
-            </div>
+            <div className="flex items-center gap-2 mt-3 text-pink-500">
+          <MapPin className="w-4 h-4" />
+          <span className="text-sm font-medium">
+            Tempat Praktek
+          </span>
+        </div>
 
-            <Badge className="mt-3 bg-pink-100 text-pink-700 border-none w-fit">
-              {practiceStatus === 'ACTIVE' ? 'Aktif' : 'Tidak Aktif'}
-            </Badge>
+    {/* Badge Lokasi */}
+    <Badge
+      className="
+        mt-2
+        inline-flex items-center
+        max-w-fit
+        px-3 py-1
+        rounded-full
+        text-xs font-medium
+        bg-pink-100 text-pink-600
+        whitespace-nowrap
+      "
+    >
+      Rocydental
+    </Badge>
 
-            {/* Tombol Prediksi */}
-            <div className="mt-4">
-              <Button
-                onClick={() => setShowPredictionModal(true)}
-                className="flex items-center bg-pink-600 hover:bg-pink-700 text-white shadow-md px-4 py-2 rounded-md transition-colors"
-              >
-                <Activity className="w-4 h-4 mr-2" />
-                Prediksi
-              </Button>
-            </div>
-          </div>
+    {/* Tombol Prediksi */}
+    <div className="mt-3">
+      <Button
+        onClick={() => setShowPredictionModal(true)}
+        className="
+          inline-flex items-center
+          h-8 px-4
+          rounded-full
+          bg-pink-600 hover:bg-pink-700
+          text-sm font-semibold text-white
+          shadow-md
+          transition-colors
+        "
+      >
+        <Activity className="w-4 h-4 mr-2" />
+        Prediksi
+      </Button>
+    </div>
+    </div>
 
         </div>
       </CardContent>
diff --git a/frontend/src/app/dashboard/dokter/pasien/antrian/page.tsx b/frontend/src/app/dashboard/dokter/pasien/antrian/page.tsx
index 5ac7dfc..3d222bf 100644
--- a/frontend/src/app/dashboard/dokter/pasien/antrian/page.tsx
+++ b/frontend/src/app/dashboard/dokter/pasien/antrian/page.tsx
@@ -1,32 +1,60 @@
 "use client";
-import { useState, useEffect, useMemo } from "react";
+
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Input } from "@/components/ui/input";
-import { Search } from "lucide-react";
-import { useRouter, usePathname } from "next/navigation";
+import {
+  Search,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
+import { usePathname } from "next/navigation";
 import DoctorNavbar from "@/components/ui/navbardr";
 import { visitService, Visit } from "@/services/visit.service";
 import { useToast } from "@/hooks/use-toast";
 import Link from "next/link";
 import { authService } from "@/services/auth.service";
 
+/**
+ * QueuePage.tsx
+ * FE-upgrade: pagination (FE controlled), debounce search, skeletons, improved pagination UI
+ * NOTE: BE tidak diubah. fetchQueue mencoba beberapa bentuk response agar kompatibel.
+ */
+
 export default function QueuePage() {
-  const router = useRouter();
   const pathname = usePathname();
   const { toast } = useToast();
 
+  // search + debounce
+  const [rawQuery, setRawQuery] = useState("");
   const [searchQuery, setSearchQuery] = useState("");
+  const debounceRef = useRef<number | undefined>(undefined);
+
+  // data
   const [queues, setQueues] = useState<Visit[]>([]);
   const [loading, setLoading] = useState(false);
+
+  // pagination (FE-controlled)
+  const [page, setPage] = useState<number>(1);
+  const [limit, setLimit] = useState<number>(5);
+  const [pagination, setPagination] = useState({
+    total: 0,
+    page: 1,
+    limit: 5,
+    totalPages: 1,
+  });
+
   const [doctor, setDoctor] = useState<any | null>(null); // dokter yang login
 
   const tabs = useMemo(
-      () => [
-        { label: "Daftar Pasien", value: "daftar-pasien", href: "/dashboard/dokter/pasien/daftar-pasien" },
-        { label: "Daftar Antrian", value: "daftar-antrian", href: "/dashboard/dokter/pasien/antrian" },
-        { label: "Rekam Medis", value: "rekam-medis", href: "/dashboard/dokter/pasien/rekam-medis" }
-      ],
-      []
-    );
+    () => [
+      { label: "Daftar Pasien", value: "daftar-pasien", href: "/dashboard/dokter/pasien/daftar-pasien" },
+      { label: "Daftar Antrian", value: "daftar-antrian", href: "/dashboard/dokter/pasien/antrian" },
+      { label: "Rekam Medis", value: "rekam-medis", href: "/dashboard/dokter/pasien/rekam-medis" }
+    ],
+    []
+  );
 
   // Ambil user yang sedang login (role: DOKTER)
   useEffect(() => {
@@ -36,12 +64,50 @@ export default function QueuePage() {
     }
   }, []);
 
-  const fetchQueue = async () => {
+  // FETCH function (compatible dengan beberapa bentuk response)
+  const fetchQueue = async (p = page, lim = limit, q = searchQuery) => {
     setLoading(true);
     try {
-      // ambil antrian khusus dokter
-      const data = await visitService.getDoctorQueue(searchQuery);
-      setQueues(Array.isArray(data) ? data : []);
+      // asumsi BE menerima page, limit, query; jika tidak, visitService harus menangani sendiri.
+      const res = await (visitService as any).getDoctorQueue(p, lim, q);
+      // fleksibel: cek beberapa struktur response
+      if (res?.data) {
+        // bentuk { data: { visits: [...], pagination: { ... } } }
+        const maybeVisits = res.data.visits || res.data.items || res.data.queue || res.data;
+        const maybePagination = res.data.pagination || res.data.meta || res.data.paging;
+        if (Array.isArray(maybeVisits)) {
+          setQueues(maybeVisits);
+        } else if (Array.isArray(res.data)) {
+          setQueues(res.data);
+        } else {
+          // fallback: jika res itself is array
+          setQueues(Array.isArray(res) ? res : []);
+        }
+
+        if (maybePagination) {
+          setPagination({
+            total: maybePagination.total || maybePagination.count || maybePagination.totalItems || 0,
+            page: maybePagination.page || p,
+            limit: maybePagination.limit || lim,
+            totalPages: maybePagination.totalPages || maybePagination.pages || Math.max(1, Math.ceil((maybePagination.total || 0) / lim)),
+          });
+        } else {
+          // jika BE tidak mengembalikan pagination, coba infer dari response
+          setPagination((prev) => ({
+            ...prev,
+            page: p,
+            limit: lim,
+            total: Array.isArray(maybeVisits) ? maybeVisits.length : prev.total,
+            totalPages: 1,
+          }));
+        }
+      } else if (Array.isArray(res)) {
+        setQueues(res);
+        setPagination({ total: res.length, page: p, limit: lim, totalPages: 1 });
+      } else {
+        setQueues([]);
+        setPagination((prev) => ({ ...prev, total: 0, totalPages: 1 }));
+      }
     } catch (error: any) {
       console.error("Error fetching queue:", error);
       toast({
@@ -51,17 +117,34 @@ export default function QueuePage() {
         variant: "destructive",
       });
       setQueues([]);
+      setPagination((prev) => ({ ...prev, total: 0, totalPages: 1 }));
     } finally {
       setLoading(false);
     }
   };
 
+  // debounce rawQuery -> searchQuery
+  useEffect(() => {
+    window.clearTimeout(debounceRef.current);
+    debounceRef.current = window.setTimeout(() => {
+      setSearchQuery(rawQuery.trim());
+      setPage(1); // reset ke halaman 1 saat search berubah
+    }, 300);
+
+    return () => {
+      window.clearTimeout(debounceRef.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rawQuery]);
+
+  // fetch when searchQuery / page / limit changes
   useEffect(() => {
-    fetchQueue();
-    const interval = setInterval(fetchQueue, 10000);
+    fetchQueue(page, limit, searchQuery);
+    // polling setiap 10 detik untuk update antrian
+    const interval = setInterval(() => fetchQueue(page, limit, searchQuery), 10000);
     return () => clearInterval(interval);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchQuery]);
+  }, [searchQuery, page, limit]);
 
   const getStatusBadge = (status: string) => {
     const statusMap: any = {
@@ -79,7 +162,8 @@ export default function QueuePage() {
     };
   };
 
-  const formatTime = (date: string) => {
+  const formatTime = (date?: string) => {
+    if (!date) return "-";
     try {
       return new Date(date).toLocaleTimeString("id-ID", {
         hour: "2-digit",
@@ -90,29 +174,60 @@ export default function QueuePage() {
     }
   };
 
+  // pagination helpers (mirip PatientListPage)
+  const getPageNumbers = () => {
+    const total = pagination.totalPages || 1;
+    const current = page;
+    const delta = 2;
+    const range: number[] = [];
+    for (let i = Math.max(1, current - delta); i <= Math.min(total, current + delta); i++) {
+      range.push(i);
+    }
+
+    const pages: Array<number | "ellipsis"> = [];
+
+    if (range[0] > 1) {
+      pages.push(1);
+      if (range[0] > 2) pages.push("ellipsis");
+    }
+
+    pages.push(...range);
+
+    if (range[range.length - 1] < total) {
+      if (range[range.length - 1] < total - 1) pages.push("ellipsis");
+      pages.push(total);
+    }
+
+    return pages;
+  };
+
+  const gotoPage = (p: number) => {
+    const clamped = Math.max(1, Math.min(p, pagination.totalPages || 1));
+    setPage(clamped);
+    const el = document.getElementById("queue-table-top");
+    if (el) el.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  };
+
+  const pageLabel = `Halaman ${page} dari ${pagination.totalPages || 1}`;
+
   return (
     <div className="min-h-screen bg-[#FFF5F7]">
       <DoctorNavbar />
 
-      <div className="pt-6 px-6 max-w-7xl mx-auto space-y-6">
+      <main className="pt-6 px-6 max-w-7xl mx-auto space-y-6">
         {/* Tabs */}
-        <div className="flex gap-4 mb-4">
+        <div className="flex gap-3 mb-2">
           {tabs.map((tab) => {
             const isActive = pathname === tab.href;
             return (
               <Link
                 key={tab.value}
                 href={tab.href}
-                className={`
-                  px-6 py-3 rounded-full
-                  text-sm font-semibold
-                  transition-all duration-200
-                  ${
-                    isActive
-                      ? "bg-pink-600 text-white shadow-lg"
-                      : "bg-white text-pink-600 border border-pink-300 hover:bg-pink-50"
-                  }
-                `}
+                className={`px-5 py-2 rounded-full text-sm font-semibold transition
+                  ${isActive
+                    ? "bg-linear-to-r from-pink-600 to-pink-500 text-white shadow-md"
+                    : "bg-white text-pink-700 border border-pink-100 hover:bg-pink-50"}`}
+                aria-current={isActive ? "page" : undefined}
               >
                 {tab.label}
               </Link>
@@ -120,100 +235,181 @@ export default function QueuePage() {
           })}
         </div>
 
-
-        <h1 className="text-2xl font-bold text-pink-900">Daftar Antrian</h1>
+        <div className="flex items-center justify-between gap-4 mt-7">
+          <h1 id="queue-table-top" className="text-2xl font-bold text-pink-900">
+            Daftar Antrian
+          </h1>
+        </div>
 
         {/* Search */}
-        <div className="mb-4 w-full max-w-sm">
-          <div className="flex items-center gap-2">
+        <div className="max-w-md">
+          <div className="flex items-center gap-2 bg-white px-3 py-2 rounded-lg border border-pink-100 shadow-sm">
             <Search className="w-5 h-5 text-pink-400" />
             <Input
-              placeholder="Cari antrian..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="flex-1 py-2 rounded-lg border border-pink-200"
+              placeholder="Cari antrian (nama / no. pasien / no. antrian)..."
+              value={rawQuery}
+              onChange={(e) => setRawQuery(e.target.value)}
+              className="border-none focus-visible:ring-0 placeholder:text-pink-300"
+              aria-label="Cari antrian"
             />
           </div>
         </div>
 
-        {/* Tabel Antrian */}
-        <div className="overflow-x-auto rounded-lg shadow-md bg-white border border-pink-100">
-          <table className="min-w-full divide-y divide-pink-200 text-pink-900">
-            <thead className="bg-pink-100">
-              <tr>
-                {[
-                  "NO. ANTRIAN",
-                  "NO. PASIEN",
-                  "NAMA PASIEN",
-                  "JAM KUNJUNGAN",
-                  "DOKTER",
-                  "TINDAKAN",
-                  "STATUS",
-                ].map((h) => (
-                  <th
-                    key={h}
-                    className="px-4 py-3 text-left font-semibold text-sm"
-                  >
-                    {h}
-                  </th>
-                ))}
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-pink-100">
-              {loading ? (
-                <tr>
-                  <td colSpan={7} className="text-center py-8">
-                    <div className="flex justify-center">
-                      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-pink-600" />
-                    </div>
-                  </td>
-                </tr>
-              ) : queues.length === 0 ? (
-                <tr>
-                  <td
-                    colSpan={7}
-                    className="px-4 py-4 text-center text-pink-600"
-                  >
-                    Tidak ada antrian
-                  </td>
+        {/* Card / Table */}
+        <section className="overflow-hidden rounded-2xl bg-white border border-pink-100 shadow-sm">
+          <div className="overflow-x-auto">
+            <table className="min-w-full text-sm text-pink-900" role="table" aria-label="Daftar antrian">
+              <thead className="bg-pink-50/80 sticky top-0 z-10">
+                <tr className="border-b border-pink-100">
+                  {[
+                    "NO. ANTRIAN",
+                    "NO. PASIEN",
+                    "NAMA PASIEN",
+                    "JAM KUNJUNGAN",
+                    "DOKTER",
+                    "TINDAKAN",
+                    "STATUS",
+                  ].map((h) => (
+                    <th key={h} scope="col" className="px-4 py-3 text-left font-semibold text-pink-800">
+                      {h}
+                    </th>
+                  ))}
                 </tr>
-              ) : (
-                queues.map((queue, idx) => {
-                  const statusInfo = getStatusBadge(queue.status);
-                  return (
-                    <tr key={idx} className="hover:bg-pink-50">
-                      <td className="px-4 py-2">{queue.queueNumber}</td>
-                      <td className="px-4 py-2">
-                        {queue.patient?.patientNumber || "-"}
-                      </td>
-                      <td className="px-4 py-2 font-medium">
-                        {queue.patient?.fullName || "-"}
-                      </td>
-                      <td className="px-4 py-2">
-                        {formatTime(queue.visitDate)}
-                      </td>
-                      {/* dokter di kunjungan, fallback ke dokter yang sedang login */}
-                      <td className="px-4 py-2">
-                        {queue.doctor?.fullName || doctor?.fullName || "-"}
-                      </td>
-                      <td className="px-4 py-2">
-                        {queue.chiefComplaint || "-"}
-                      </td>
-                      <td className="px-4 py-2">
-                        <span
-                          className={`px-3 py-1 rounded-full text-xs font-medium ${statusInfo.class}`}
-                        >
-                          {statusInfo.label}
-                        </span>
-                      </td>
+              </thead>
+
+              <tbody>
+                {loading ? (
+                  // Loading skeleton rows
+                  Array.from({ length: Math.max(limit, 5) }).map((_, i) => (
+                    <tr key={`sk-${i}`} className="border-b last:border-b-0">
+                      {Array.from({ length: 7 }).map((__, j) => (
+                        <td key={j} className="px-4 py-4">
+                          <div className="h-4 max-w-32 rounded-md bg-pink-100 animate-pulse" />
+                        </td>
+                      ))}
                     </tr>
-                  );
-                })
-              )}
-            </tbody>
-          </table>
-        </div>
-      </div>
+                  ))
+                ) : queues.length === 0 ? (
+                  <tr>
+                    <td colSpan={7} className="py-10 text-center text-pink-600">
+                      Tidak ada antrian
+                    </td>
+                  </tr>
+                ) : (
+                  queues.map((queue: any, idx: number) => {
+                    const statusInfo = getStatusBadge(queue.status);
+                    return (
+                      <tr
+                        key={queue.id || queue.queueNumber || idx}
+                        className={`border-b last:border-b-0 ${idx % 2 === 0 ? "bg-white" : "bg-pink-50/40"} hover:bg-pink-100/60 transition-colors`}
+                      >
+                        <td className="px-4 py-3 align-top">{queue.queueNumber || "-"}</td>
+                        <td className="px-4 py-3 align-top">{queue.patient?.patientNumber || "-"}</td>
+                        <td className="px-4 py-3 font-medium align-top">{queue.patient?.fullName || "-"}</td>
+                        <td className="px-4 py-3 align-top">{formatTime(queue.visitDate)}</td>
+                        <td className="px-4 py-3 align-top">{queue.doctor?.fullName || doctor?.fullName || "-"}</td>
+                        <td className="px-4 py-3 align-top">{queue.chiefComplaint || "-"}</td>
+                        <td className="px-4 py-3 align-top">
+                          <span className={`px-3 py-1 rounded-full text-xs font-medium ${statusInfo.class}`}>
+                            {statusInfo.label}
+                          </span>
+                        </td>
+                      </tr>
+                    );
+                  })
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Pagination Footer */}
+          <div className="flex flex-col sm:flex-row items-center justify-between gap-3 px-4 py-3 border-t border-pink-100 bg-pink-50/30">
+            <div className="text-sm text-pink-700">
+              <span className="font-medium">{pagination.total || 0}</span> antrian — {pageLabel}
+            </div>
+
+            <div className="flex items-center gap-2">
+              {/* First */}
+              <button
+                onClick={() => gotoPage(1)}
+                disabled={page <= 1}
+                aria-label="Halaman pertama"
+                className={`p-2 rounded-md border text-sm ${page <= 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}
+              >
+                <ChevronsLeft className="w-4 h-4" />
+              </button>
+
+              {/* Prev */}
+              <button
+                onClick={() => gotoPage(page - 1)}
+                disabled={page <= 1}
+                aria-label="Sebelumnya"
+                className={`p-2 rounded-md border text-sm ${page <= 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}
+              >
+                <ChevronLeft className="w-4 h-4" />
+              </button>
+
+              {/* Page numbers */}
+              <nav aria-label="Paginasi" className="flex items-center gap-1">
+                {getPageNumbers().map((p, i) =>
+                  p === "ellipsis" ? (
+                    <span key={`ell-${i}`} className="px-2 text-pink-400">…</span>
+                  ) : (
+                    <button
+                      key={`pg-${p}`}
+                      onClick={() => gotoPage(p as number)}
+                      aria-current={page === p ? "true" : undefined}
+                      className={`w-9 h-9 rounded-md text-sm font-medium border flex items-center justify-center focus:outline-none ${page === p ? "bg-pink-600 text-white border-pink-600 shadow" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}
+                    >
+                      {p}
+                    </button>
+                  )
+                )}
+              </nav>
+
+              {/* Next */}
+              <button
+                onClick={() => gotoPage(page + 1)}
+                disabled={page >= (pagination.totalPages || 1)}
+                aria-label="Selanjutnya"
+                className={`p-2 rounded-md border text-sm ${page >= (pagination.totalPages || 1) ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}
+              >
+                <ChevronRight className="w-4 h-4" />
+              </button>
+
+              {/* Last */}
+              <button
+                onClick={() => gotoPage(pagination.totalPages || 1)}
+                disabled={page >= (pagination.totalPages || 1)}
+                aria-label="Halaman terakhir"
+                className={`p-2 rounded-md border text-sm ${page >= (pagination.totalPages || 1) ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}
+              >
+                <ChevronsRight className="w-4 h-4" />
+              </button>
+
+              {/* Jump to page */}
+              <div className="flex items-center gap-2 ml-2">
+                <label htmlFor="goto-queue" className="sr-only">Lompat ke halaman</label>
+                <input
+                  id="goto-queue"
+                  type="number"
+                  min={1}
+                  max={pagination.totalPages || 1}
+                  placeholder="Go"
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      const v = Number((e.target as HTMLInputElement).value);
+                      if (!isNaN(v)) gotoPage(v);
+                    }
+                  }}
+                  className="w-16 px-2 py-1 rounded-md border border-pink-100 bg-white text-sm text-pink-700 focus:outline-none"
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+      <div className="h-10" />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/dashboard/dokter/pasien/daftar-pasien/page.tsx b/frontend/src/app/dashboard/dokter/pasien/daftar-pasien/page.tsx
index e7dcaf7..06b1143 100644
--- a/frontend/src/app/dashboard/dokter/pasien/daftar-pasien/page.tsx
+++ b/frontend/src/app/dashboard/dokter/pasien/daftar-pasien/page.tsx
@@ -1,56 +1,97 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Search, PlusCircle } from "lucide-react";
-import { useRouter, usePathname } from "next/navigation";
+import {
+  Search,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
+import { usePathname } from "next/navigation";
 import DoctorNavbar from "@/components/ui/navbardr";
 import { patientService } from "@/services/patient.service";
 import { useToast } from "@/hooks/use-toast";
 import Link from "next/link";
 
+/**
+ * PatientListPage.tsx
+ * Versi polish: better UX, debounce search, page size select, skeleton loader,
+ * improved pagination (first/last, ellipsis), sticky header, accessibility improvements.
+ *
+ * NOTE: BE tidak diubah. Hanya UI/FE.
+ */
+
 export default function PatientListPage() {
-  const router = useRouter();
   const pathname = usePathname();
   const { toast } = useToast();
 
+  // search + debounce
+  const [rawQuery, setRawQuery] = useState("");
   const [searchQuery, setSearchQuery] = useState("");
+  const debounceRef = useRef<number | undefined>(undefined);
+
+  // data
   const [patients, setPatients] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
+
+  // pagination (FE controlled, backend called with page & limit)
+  const [page, setPage] = useState<number>(1);
+  const [limit, setLimit] = useState<number>(2); // rows per page (FE-selectable)
   const [pagination, setPagination] = useState({
     total: 0,
     page: 1,
-    limit: 100,
-    totalPages: 0
+    limit: 5,
+    totalPages: 1,
   });
 
-  const tabs = [
-    { label: "Daftar Pasien", value: "daftar-pasien", href: "/dashboard/dokter/pasien/daftar-pasien" },
-    { label: "Daftar Antrian", value: "daftar-antrian", href: "/dashboard/dokter/pasien/antrian" },
-    { label: "Rekam Medis", value: "rekam-medis", href: "/dashboard/dokter/pasien/rekam-medis" },
-  ];
+  // tabs (kept same)
+  const tabs = useMemo(
+    () => [
+      {
+        label: "Daftar Pasien",
+        value: "daftar-pasien",
+        href: "/dashboard/dokter/pasien/daftar-pasien",
+      },
+      {
+        label: "Daftar Antrian",
+        value: "daftar-antrian",
+        href: "/dashboard/dokter/pasien/antrian",
+      },
+      {
+        label: "Rekam Medis",
+        value: "rekam-medis",
+        href: "/dashboard/dokter/pasien/rekam-medis",
+      },
+    ],
+    []
+  );
 
-  const fetchPatients = async () => {
+  // FETCH function (calls BE service - unchanged)
+  const fetchPatients = async (p: number, lim: number, q: string) => {
     setLoading(true);
     try {
-      const response = await patientService.getPatients(1, 100, searchQuery);
-
-      if (response.success && response.data) {
-        setPatients(response.data.patients || []);
-        setPagination(response.data.pagination || {
-          total: 0,
-          page: 1,
-          limit: 100,
-          totalPages: 0
-        });
+      const res = await patientService.getPatients(p, lim, q);
+      if (res?.data) {
+        setPatients(res.data.patients || []);
+        setPagination(
+          res.data.pagination || {
+            total: 0,
+            page: 1,
+            limit: lim,
+            totalPages: 1,
+          }
+        );
       } else {
         setPatients([]);
+        setPagination((prev) => ({ ...prev, total: 0, totalPages: 1 }));
       }
     } catch (error: any) {
       toast({
         title: "Error",
-        description: error.response?.data?.message || "Gagal mengambil data pasien",
+        description:
+          error?.response?.data?.message || "Gagal mengambil data pasien",
         variant: "destructive",
       });
       setPatients([]);
@@ -59,13 +100,33 @@ export default function PatientListPage() {
     }
   };
 
+  // initial / on change: debounce searchQuery, page, limit
+  useEffect(() => {
+    // debounce search input (300ms)
+    window.clearTimeout(debounceRef.current);
+    // assign timer
+    debounceRef.current = window.setTimeout(() => {
+      setSearchQuery(rawQuery.trim());
+      setPage(1); // whenever search changes, go to page 1
+    }, 300);
+
+    return () => {
+      window.clearTimeout(debounceRef.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rawQuery]);
+
   useEffect(() => {
-    fetchPatients();
-  }, [searchQuery]);
+    // fetch whenever searchQuery, page, or limit changes
+    fetchPatients(page, limit, searchQuery);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery, page, limit]);
 
-  const formatDate = (dateString: string) => {
+  // util: format date & age
+  const formatDate = (date?: string) => {
+    if (!date) return "-";
     try {
-      return new Date(dateString).toLocaleDateString("id-ID", {
+      return new Date(date).toLocaleDateString("id-ID", {
         day: "2-digit",
         month: "2-digit",
         year: "numeric",
@@ -75,43 +136,81 @@ export default function PatientListPage() {
     }
   };
 
-  const calculateAge = (dateOfBirth: string) => {
+  const calculateAge = (dob?: string) => {
+    if (!dob) return "-";
     try {
       const today = new Date();
-      const birthDate = new Date(dateOfBirth);
-      let age = today.getFullYear() - birthDate.getFullYear();
-      const monthDiff = today.getMonth() - birthDate.getMonth();
-      if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
-        age--;
-      }
+      const birth = new Date(dob);
+      let age = today.getFullYear() - birth.getFullYear();
+      const m = today.getMonth() - birth.getMonth();
+      if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) age--;
       return age;
     } catch {
       return "-";
     }
   };
 
-  const handleSearch = (e: React.FormEvent) => {
-    e.preventDefault();
-    fetchPatients();
+  // improved pagination numbers with ellipsis
+  const getPageNumbers = () => {
+    const total = pagination.totalPages || 1;
+    const current = page;
+    const delta = 2; // show two pages around current
+    const range = [];
+    for (let i = Math.max(1, current - delta); i <= Math.min(total, current + delta); i++) {
+      range.push(i);
+    }
+
+    const pages: Array<number | "ellipsis"> = [];
+
+    // first
+    if (range[0] > 1) {
+      pages.push(1);
+      if (range[0] > 2) pages.push("ellipsis");
+    }
+
+    pages.push(...range);
+
+    // last
+    if (range[range.length - 1] < total) {
+      if (range[range.length - 1] < total - 1) pages.push("ellipsis");
+      pages.push(total);
+    }
+
+    return pages;
+  };
+
+  // helper to clamp page
+  const gotoPage = (p: number) => {
+    const clamped = Math.max(1, Math.min(p, pagination.totalPages || 1));
+    setPage(clamped);
+    // scroll to top of table for UX
+    const el = document.getElementById("patient-table-top");
+    if (el) el.scrollIntoView({ behavior: "smooth", block: "nearest" });
   };
 
+  // small accessibility helpers
+  const pageLabel = `Halaman ${page} dari ${pagination.totalPages || 1}`;
+
   return (
-    <div className="min-h-screen bg-[#FFF5F7]">
+    <div className="min-h-screen bg-[#FFF7FA]">
       <DoctorNavbar />
 
-      <div className="pt-6 px-6 max-w-7xl mx-auto space-y-6">
-        <div className="flex gap-4 mb-4">
+      <main className="pt-6 px-6 max-w-7xl mx-auto space-y-6">
+        {/* Tabs */}
+        <div className="flex gap-3 mb-2">
           {tabs.map((tab) => {
-            const isActive = pathname.includes(tab.value);
+            const isActive = pathname === tab.href;
             return (
               <Link
                 key={tab.value}
                 href={tab.href}
-                className={`px-4 py-2 rounded-full font-medium transition ${
-                  isActive
-                    ? "bg-pink-600 text-white shadow-md"
-                    : "bg-white border border-pink-200 text-pink-600 hover:bg-pink-50"
-                }`}
+                className={`
+                  px-5 py-2 rounded-full text-sm font-semibold transition
+                  ${isActive
+                    ? "bg-linear-to-r from-pink-600 to-pink-500 text-white shadow-md"
+                    : "bg-white text-pink-700 border border-pink-100 hover:bg-pink-50"}
+                `}
+                aria-current={isActive ? "page" : undefined}
               >
                 {tab.label}
               </Link>
@@ -119,29 +218,37 @@ export default function PatientListPage() {
           })}
         </div>
 
-        <div className="flex items-start gap-6">
-          <div className="bg-white rounded-lg shadow-md p-6 w-80">
-            <h2 className="text-lg font-bold text-pink-900 mb-4">Daftar Pasien</h2>
-            <form onSubmit={handleSearch}>
-              <div className="flex items-center gap-2 mb-4">
-                <Search className="w-5 h-5 text-pink-400" />
-                <Input
-                  placeholder="Cari pasien..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="flex-1 border border-pink-200"
-                />
-              </div>
-              <Button type="submit" className="w-full bg-pink-600 text-white hover:bg-pink-700">
-                Cari
-              </Button>
-            </form>
+        <div className="flex items-center justify-between gap-4 mt-7">
+          <h1 id="patient-table-top" className="text-2xl font-bold text-pink-900">
+            Daftar Pasien
+          </h1>
+        </div>
+
+        {/* Search */}
+        <div className="max-w-md">
+          <div className="flex items-center gap-2 bg-white px-3 py-2 rounded-lg border border-pink-100 shadow-sm">
+            <Search className="w-5 h-5 text-pink-400" />
+            <Input
+              placeholder="Cari pasien (nama / no. pasien)..."
+              value={rawQuery}
+              onChange={(e) => setRawQuery(e.target.value)}
+              className="border-none focus-visible:ring-0 placeholder:text-pink-300"
+              aria-label="Cari pasien"
+            />
           </div>
+        </div>
 
-          <div className="flex-1 overflow-x-auto rounded-lg shadow-md bg-white border border-pink-100">
-            <table className="min-w-full divide-y divide-pink-200 text-pink-900">
-              <thead className="bg-pink-100">
-                <tr>
+        {/* Card */}
+        <section className="overflow-hidden rounded-2xl bg-white border border-pink-100 shadow-sm">
+          {/* Table */}
+          <div className="overflow-x-auto">
+            <table
+              className="min-w-full text-sm text-pink-900"
+              role="table"
+              aria-label="Daftar pasien"
+            >
+              <thead className="bg-pink-50/80 sticky top-0 z-10">
+                <tr className="border-b border-pink-100">
                   {[
                     "NO. PASIEN",
                     "NAMA",
@@ -149,59 +256,180 @@ export default function PatientListPage() {
                     "TGL. LAHIR (UMUR)",
                     "TGL. KUNJUNGAN",
                     "TINDAKAN",
-                   
                   ].map((h) => (
-                    <th key={h} className="px-4 py-3 text-left font-semibold text-sm">
+                    <th
+                      key={h}
+                      scope="col"
+                      className="px-4 py-3 text-left font-semibold text-pink-800"
+                    >
                       {h}
                     </th>
                   ))}
                 </tr>
               </thead>
 
-              <tbody className="divide-y divide-pink-100">
+              <tbody>
+                {/* Loading skeleton */}
                 {loading ? (
-                  <tr>
-                    <td colSpan={7} className="text-center py-8">
-                      <div className="flex justify-center">
-                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-pink-600" />
-                      </div>
-                    </td>
-                  </tr>
+                  Array.from({ length: Math.max(limit, 5) }).map((_, i) => (
+                    <tr key={`sk-${i}`} className="border-b last:border-b-0">
+                      {Array.from({ length: 6 }).map((__, j) => (
+                        <td key={j} className="px-4 py-4">
+                          <div className="h-4 max-w-32 rounded-md bg-pink-100 animate-pulse" />
+                        </td>
+                      ))}
+                    </tr>
+                  ))
                 ) : patients.length === 0 ? (
                   <tr>
-                    <td colSpan={7} className="px-4 py-8 text-center text-pink-600">
+                    <td colSpan={6} className="py-10 text-center text-pink-600">
                       Tidak ada data pasien
                     </td>
                   </tr>
                 ) : (
-                  patients.map((patient) => (
-                    <tr key={patient.id} className="hover:bg-pink-50">
-                      <td className="px-4 py-3">{patient.patientNumber || "-"}</td>
-                      <td className="px-4 py-3 font-medium">{patient.fullName || "-"}</td>
-                      <td className="px-4 py-3">
+                  patients.map((patient: any, idx: number) => (
+                    <tr
+                      key={patient.id || idx}
+                      className={`border-b last:border-b-0 ${
+                        idx % 2 === 0 ? "bg-white" : "bg-pink-50/40"
+                      } hover:bg-pink-100/60 transition-colors`}
+                    >
+                      <td className="px-4 py-3 align-top">{patient.patientNumber || "-"}</td>
+                      <td className="px-4 py-3 font-medium align-top">{patient.fullName || "-"}</td>
+                      <td className="px-4 py-3 align-top">
                         {patient.gender === "L" ? "Pria" : "Wanita"}
                       </td>
-                      <td className="px-4 py-3">
+                      <td className="px-4 py-3 align-top">
                         {patient.dateOfBirth
-                          ? `${formatDate(patient.dateOfBirth)} (${calculateAge(patient.dateOfBirth)})`
+                          ? `${formatDate(patient.dateOfBirth)} (${calculateAge(
+                              patient.dateOfBirth
+                            )})`
                           : "-"}
                       </td>
-                      <td className="px-4 py-3">
+                      <td className="px-4 py-3 align-top">
                         {patient.lastVisit ? formatDate(patient.lastVisit) : "-"}
                       </td>
-                      <td className="px-4 py-3">
-                        {patient.chiefComplaint && patient.chiefComplaint.trim() !== ""
-                          ? patient.chiefComplaint
-                          : "-"}
-                      </td>         
+                      <td className="px-4 py-3 align-top">{patient.chiefComplaint || "-"}</td>
                     </tr>
                   ))
                 )}
               </tbody>
             </table>
           </div>
-        </div>
-      </div>
+
+          {/* Pagination / Footer */}
+          <div className="flex flex-col sm:flex-row items-center justify-between gap-3 px-4 py-3 border-t border-pink-100 bg-pink-50/30">
+            <div className="text-sm text-pink-700">
+              <span className="font-medium">{pagination.total || 0}</span>{" "}
+              pasien — {pageLabel}
+            </div>
+
+            <div className="flex items-center gap-2">
+              {/* First */}
+              <button
+                onClick={() => gotoPage(1)}
+                disabled={page <= 1}
+                aria-label="Halaman pertama"
+                className={`p-2 rounded-md border text-sm ${
+                  page <= 1
+                    ? "bg-gray-100 text-gray-400 cursor-not-allowed"
+                    : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"
+                }`}
+              >
+                <ChevronsLeft className="w-4 h-4" />
+              </button>
+
+              {/* Prev */}
+              <button
+                onClick={() => gotoPage(page - 1)}
+                disabled={page <= 1}
+                aria-label="Sebelumnya"
+                className={`p-2 rounded-md border text-sm ${
+                  page <= 1
+                    ? "bg-gray-100 text-gray-400 cursor-not-allowed"
+                    : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"
+                }`}
+              >
+                <ChevronLeft className="w-4 h-4" />
+              </button>
+
+              {/* Page numbers (compact with ellipsis) */}
+              <nav aria-label="Paginasi" className="flex items-center gap-1">
+                {getPageNumbers().map((p, i) =>
+                  p === "ellipsis" ? (
+                    <span key={`ell-${i}`} className="px-2 text-pink-400">
+                      …
+                    </span>
+                  ) : (
+                    <button
+                      key={`pg-${p}`}
+                      onClick={() => gotoPage(p)}
+                      aria-current={page === p ? "true" : undefined}
+                      className={`w-9 h-9 rounded-md text-sm font-medium border flex items-center justify-center focus:outline-none ${
+                        page === p
+                          ? "bg-pink-600 text-white border-pink-600 shadow"
+                          : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"
+                      }`}
+                    >
+                      {p}
+                    </button>
+                  )
+                )}
+              </nav>
+
+              {/* Next */}
+              <button
+                onClick={() => gotoPage(page + 1)}
+                disabled={page >= (pagination.totalPages || 1)}
+                aria-label="Selanjutnya"
+                className={`p-2 rounded-md border text-sm ${
+                  page >= (pagination.totalPages || 1)
+                    ? "bg-gray-100 text-gray-400 cursor-not-allowed"
+                    : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"
+                }`}
+              >
+                <ChevronRight className="w-4 h-4" />
+              </button>
+
+              {/* Last */}
+              <button
+                onClick={() => gotoPage(pagination.totalPages || 1)}
+                disabled={page >= (pagination.totalPages || 1)}
+                aria-label="Halaman terakhir"
+                className={`p-2 rounded-md border text-sm ${
+                  page >= (pagination.totalPages || 1)
+                    ? "bg-gray-100 text-gray-400 cursor-not-allowed"
+                    : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"
+                }`}
+              >
+                <ChevronsRight className="w-4 h-4" />
+              </button>
+
+              {/* Jump to page */}
+              <div className="flex items-center gap-2 ml-2">
+                <label htmlFor="goto" className="sr-only">
+                  Lompat ke halaman
+                </label>
+                <input
+                  id="goto"
+                  type="number"
+                  min={1}
+                  max={pagination.totalPages || 1}
+                  placeholder="Go"
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      const v = Number((e.target as HTMLInputElement).value);
+                      if (!isNaN(v)) gotoPage(v);
+                    }
+                  }}
+                  className="w-16 px-2 py-1 rounded-md border border-pink-100 bg-white text-sm text-pink-700 focus:outline-none"
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    <div className="h-10" />
     </div>
   );
 }
diff --git a/frontend/src/app/dashboard/dokter/pasien/rekam-medis/[visitNumber]/page.tsx b/frontend/src/app/dashboard/dokter/pasien/rekam-medis/[visitNumber]/page.tsx
index 619aa4f..d4e672d 100644
--- a/frontend/src/app/dashboard/dokter/pasien/rekam-medis/[visitNumber]/page.tsx
+++ b/frontend/src/app/dashboard/dokter/pasien/rekam-medis/[visitNumber]/page.tsx
@@ -4,7 +4,6 @@ import React, { useEffect, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
 import {
   ArrowLeft,
   Download,
@@ -13,6 +12,8 @@ import {
   Pencil,
   Plus,
   Trash2,
+  Check,
+  X,
 } from "lucide-react";
 import DoctorNavbar from "@/components/ui/navbardr";
 import { visitService, Visit } from "@/services/visit.service";
@@ -34,8 +35,71 @@ interface Examination {
   treatmentPlan: string;
 }
 
+/**
+ * Frontend-only packing format:
+ * - When saving, we pack both treatmentPlan + notes into one string using markers:
+ *   __POLABDC_STRUCTURED__
+ *   <<TREATMENT>>
+ *   ...text...
+ *   <</TREATMENT>>
+ *   <<NOTES>>
+ *   ...text...
+ *   <</NOTES>>
+ *
+ * - When fetching, we parse this format. If incoming notes is plain (legacy),
+ *   we assume it was previously used for both fields and assign both treatmentPlan and notes to that text
+ *   (safe fallback).
+ */
+
+const STRUCTURED_PREFIX = "__POLABDC_STRUCTURED__";
+const OPEN_TREAT = "<<TREATMENT>>";
+const CLOSE_TREAT = "<</TREATMENT>>";
+const OPEN_NOTES = "<<NOTES>>";
+const CLOSE_NOTES = "<</NOTES>>";
+
+const packNotes = (treatmentPlan: string, notes: string) => {
+  // Ensure no accidental double marker — replace markers inside user text
+  const safeTP = String(treatmentPlan ?? "").replaceAll(STRUCTURED_PREFIX, "");
+  const safeNotes = String(notes ?? "").replaceAll(STRUCTURED_PREFIX, "");
+  return [
+    STRUCTURED_PREFIX,
+    OPEN_TREAT,
+    safeTP,
+    CLOSE_TREAT,
+    OPEN_NOTES,
+    safeNotes,
+    CLOSE_NOTES,
+  ].join("\n");
+};
+
+const unpackNotes = (raw?: string): { treatmentPlan: string; notes: string } => {
+  if (!raw) return { treatmentPlan: "", notes: "" };
+  const txt = String(raw);
+  if (!txt.startsWith(STRUCTURED_PREFIX)) {
+    // Legacy (unstructured) — assume previous behavior: treat same text for both fields
+    return { treatmentPlan: txt, notes: txt };
+  }
+
+  const tStart = txt.indexOf(OPEN_TREAT);
+  const tEnd = txt.indexOf(CLOSE_TREAT);
+  const nStart = txt.indexOf(OPEN_NOTES);
+  const nEnd = txt.indexOf(CLOSE_NOTES);
+
+  const treatmentPlan =
+    tStart !== -1 && tEnd !== -1 && tEnd > tStart
+      ? txt.slice(tStart + OPEN_TREAT.length, tEnd).trim()
+      : "";
+  const notesContent =
+    nStart !== -1 && nEnd !== -1 && nEnd > nStart
+      ? txt.slice(nStart + OPEN_NOTES.length, nEnd).trim()
+      : "";
+
+  return { treatmentPlan, notes: notesContent };
+};
+
 export default function RekamMedisDetailPage() {
-  const { visitNumber } = useParams<{ visitNumber: string }>();
+  const params = useParams() as { visitNumber?: string } | null;
+  const visitNumber = params?.visitNumber;
   const router = useRouter();
   const { toast } = useToast();
 
@@ -81,95 +145,116 @@ export default function RekamMedisDetailPage() {
   useEffect(() => {
     if (!medicalRecordNumber) return;
     fetchVisitData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [medicalRecordNumber]);
 
   const fetchVisitData = async () => {
-    try {
-      setLoading(true);
+  if (!medicalRecordNumber) return;
 
-      const response = await visitService.getVisitByMedicalRecord(
-        medicalRecordNumber
-      );
-      setVisit(response);
-
-      const medicalHistory = (response as any).patient?.medicalHistory || "";
-      setDiagnosisDraft(medicalHistory);
-
-      setExamDraft({
-        chiefComplaint: response.chiefComplaint || "",
-        physical: response.bloodPressure || "",
-        treatmentPlan: response.notes || "",
-      });
-
-      const extractedMeds = ((response as any).medications || []).map((m: any) => ({
-        id: m.id,
-        name: m.name || "",
-        quantity: m.quantity || "1",
-        instructions: m.instructions || "",
-      }));
-      setMedsDraft(extractedMeds);
+  try {
+    setLoading(true);
 
-      setNotesDraft(response.notes || "");
-      setDeletedMedIds([]);
-    } catch (error: any) {
-      toast({
-        title: "Error",
-        description:
-          error?.response?.data?.message || "Gagal memuat data rekam medis",
-        variant: "destructive",
-      });
-      router.push("/dashboard/dokter/pasien/rekam-medis");
-    } finally {
-      setLoading(false);
-    }
-  };
+    const response = await visitService.getVisitByMedicalRecord(
+      medicalRecordNumber
+    );
+    setVisit(response);
+
+    const medicalHistory = (response as any).patient?.medicalHistory || "";
+    setDiagnosisDraft(medicalHistory);
+
+    setExamDraft({
+      chiefComplaint: response.chiefComplaint || "",
+      physical: response.bloodPressure || "",
+      treatmentPlan: response.notes || "",
+    });
+
+    const extractedMeds = ((response as any).medications || []).map((m: any) => ({
+      id: m.id,
+      name: m.name || "",
+      quantity: m.quantity || "1",
+      instructions: m.instructions || "",
+    }));
+    setMedsDraft(extractedMeds);
+
+    setNotesDraft(response.notes || "");
+    setDeletedMedIds([]);
+  } catch (error: any) {
+    toast({
+      title: "Error",
+      description:
+        error?.response?.data?.message || "Gagal memuat data rekam medis",
+      variant: "destructive",
+    });
+    router.push("/dashboard/dokter/pasien/rekam-medis");
+  } finally {
+    setLoading(false);
+  }
+};
 
   const handleSaveDiagnosis = async () => {
-    if (!visit) return;
-
-    try {
-      setSaving(true);
-      const patientId = (visit as any).patient?.id;
+  if (!visit) return;
+
+  const patientId = (visit as any).patient?.id;
+  if (!patientId) {
+    toast({
+      title: "Error",
+      description: "Data pasien tidak ditemukan",
+      variant: "destructive",
+    });
+    return;
+  }
 
-      await patientService.updateMedicalHistory(patientId, diagnosisDraft);
+  try {
+    setSaving(true);
 
-      await fetchVisitData();
-      setEditDiagnosis(false);
+    await patientService.updateMedicalHistory(
+      patientId,
+      diagnosisDraft
+    );
 
-      toast({
-        title: "Berhasil",
-        description: "Diagnosis berhasil diupdate",
-      });
-    } catch (error: any) {
-      toast({
-        title: "Error",
-        description:
-          error?.response?.data?.message || "Gagal menyimpan diagnosis",
-        variant: "destructive",
-      });
-    } finally {
-      setSaving(false);
-    }
-  };
+    await fetchVisitData();
+    setEditDiagnosis(false);
+
+    toast({
+      title: "Berhasil",
+      description: "Diagnosis berhasil diupdate",
+    });
+  } catch (error: any) {
+    toast({
+      title: "Error",
+      description:
+        error?.response?.data?.message || "Gagal menyimpan diagnosis",
+      variant: "destructive",
+    });
+  } finally {
+    setSaving(false);
+  }
+};
 
   const handleSaveExam = async () => {
     if (!visit) return;
 
     try {
       setSaving(true);
+
+      // When saving exam (treatmentPlan), we need to pack both treatmentPlan and existing notesDraft
+      // into the single `notes` field the backend expects.
+      const packed = packNotes(examDraft.treatmentPlan, notesDraft);
+
       await visitService.updateVisitExamination((visit as any).id, {
         chiefComplaint: examDraft.chiefComplaint,
         bloodPressure: examDraft.physical,
-        notes: examDraft.treatmentPlan,
+        notes: packed,
       });
 
+      // Update local visit copy for immediate UI feedback (keeps UI unchanged)
       setVisit((prev) =>
         prev
           ? ({
               ...prev,
               chiefComplaint: examDraft.chiefComplaint,
               bloodPressure: examDraft.physical,
-              notes: examDraft.treatmentPlan,
+              notes: packed,
             } as any)
           : prev
       );
@@ -247,11 +332,15 @@ export default function RekamMedisDetailPage() {
 
     try {
       setSaving(true);
+
+      // Pack current treatmentPlan (from examDraft) + notesDraft into single notes field.
+      const packed = packNotes(examDraft.treatmentPlan, notesDraft);
+
       await visitService.updateVisitExamination((visit as any).id, {
-        notes: notesDraft,
+        notes: packed,
       });
 
-      setVisit((prev) => (prev ? ({ ...prev, notes: notesDraft } as any) : prev));
+      setVisit((prev) => (prev ? ({ ...prev, notes: packed } as any) : prev));
       setEditNotes(false);
 
       toast({
@@ -288,8 +377,9 @@ export default function RekamMedisDetailPage() {
     setMedsDraft(newMeds);
   };
 
-  const formatDate = (dateString: string) => {
+  const formatDate = (dateString?: string) => {
     try {
+      if (!dateString) return "-";
       return new Date(dateString).toLocaleDateString("id-ID", {
         day: "2-digit",
         month: "long",
@@ -300,8 +390,9 @@ export default function RekamMedisDetailPage() {
     }
   };
 
-  const calculateAge = (birthDate: string) => {
+  const calculateAge = (birthDate?: string) => {
     try {
+      if (!birthDate) return 0;
       const birth = new Date(birthDate);
       const today = new Date();
       let age = today.getFullYear() - birth.getFullYear();
@@ -351,18 +442,22 @@ export default function RekamMedisDetailPage() {
       const MARGIN = 50;
       const FOOTER_HEIGHT = 60;
       const CONTENT_WIDTH = PAGE_WIDTH - MARGIN * 2;
-      const LINE_HEIGHT = 13;
+
+      // Typography & layout tweaks
+      const LINE_HEIGHT = 14;
       const CELL_PADDING = 6;
-      const FONT_SIZE_NORMAL = 7;
-      const FONT_SIZE_HEADER = 16;
-      const FONT_SIZE_SECTION = 9;
-      const BG_SECTION = rgb(0.96, 0.98, 1);
-      const COLOR_PRIMARY = rgb(0.06, 0.2, 0.5);
+      const FONT_SIZE_NORMAL = 9;   // body / table text
+      const FONT_SIZE_HEADER = 18;  // main title
+      const FONT_SIZE_SECTION = 11; // section titles
+      const BG_SECTION = rgb(0.98, 0.94, 0.97); // pale pink background for section bar
+      const COLOR_PRIMARY = rgb(0.90, 0.20, 0.50); // main pink (header)
+      const COLOR_SECTION_TEXT = rgb(0.78, 0.12, 0.40); // darker pink for section title text
+      const TEXT_COLOR = rgb(0.12, 0.12, 0.12); // dark gray for body text
       const SECTION_SPACING = 15;
 
       const pdfDoc = await PDFDocument.create();
-      const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
-      const fontBold = await pdfDoc.embedFont(StandardFonts.HelveticaBold);
+      const font = await pdfDoc.embedFont(StandardFonts.TimesRoman);
+      const fontBold = await pdfDoc.embedFont(StandardFonts.TimesRomanBold);
 
       let page = pdfDoc.addPage([PAGE_WIDTH, PAGE_HEIGHT]);
       let { width, height } = page.getSize();
@@ -417,13 +512,19 @@ export default function RekamMedisDetailPage() {
 
       const drawMeta = (meta: string) => {
         ensureSpace(18);
-        page.drawText(meta, { x: MARGIN, y: cursorY - 4, size: 9, font });
+        page.drawText(meta, {
+          x: MARGIN,
+          y: cursorY - 4,
+          size: 9,
+          font,
+          color: TEXT_COLOR,
+        });
         cursorY -= 18;
       };
 
       const drawSectionTitle = (title: string) => {
         cursorY -= SECTION_SPACING;
-        const barH = 20;
+        const barH = 22;
         ensureSpace(barH + SECTION_SPACING);
         page.drawRectangle({
           x: MARGIN - 2,
@@ -433,11 +534,11 @@ export default function RekamMedisDetailPage() {
           color: BG_SECTION,
         });
         page.drawText(title, {
-          x: MARGIN + 6,
-          y: cursorY - barH + 7,
+          x: MARGIN + 8,
+          y: cursorY - barH + 8,
           size: FONT_SIZE_SECTION,
           font: fontBold,
-          color: rgb(0.06, 0.3, 0.6),
+          color: COLOR_SECTION_TEXT,
         });
         cursorY -= barH + 8;
       };
@@ -486,6 +587,7 @@ export default function RekamMedisDetailPage() {
                 y: textY,
                 size: FONT_SIZE_NORMAL,
                 font: ci % 2 === 0 ? fontBold : font,
+                color: TEXT_COLOR,
               });
               textY -= LINE_HEIGHT;
             }
@@ -539,7 +641,6 @@ export default function RekamMedisDetailPage() {
           "No. Telepon",
           (visit as any).patient?.phone || "-",
         ],
-        ["Catatan", (visit as any).patient?.allergies || "-", "", ""],
       ];
 
       const labelW = 90;
@@ -554,6 +655,21 @@ export default function RekamMedisDetailPage() {
       drawTable(patientRows, patientColWidths);
 
       drawSectionTitle("Informasi Kunjungan Terkini");
+
+            // For PDF, parse visit.notes into treatmentPlan + notes
+      const rawNotes = (visit as any).notes || "";
+      const { treatmentPlan: pdfTreatmentPlan, notes: pdfNotes } = unpackNotes(rawNotes);
+
+      // fallback cleaner (hapus marker jika parsing gagal / format berbeda)
+      const cleanText = (txt?: string) =>
+        String(txt || "")
+          .replace(/__POLABDC_STRUCTURED__/g, "")
+          .replace(/<<\/?TREATMENT>>/gi, "")
+          .replace(/<<\/?NOTES>>/gi, "")
+          .replace(/<<.*?>>/g, "")
+          .replace(/<\/<.*?>>/g, "")
+          .trim() || "-";
+
       drawTable(
         [
           ["Tanggal Kunjungan", formatDate((visit as any).visitDate)],
@@ -569,12 +685,15 @@ export default function RekamMedisDetailPage() {
         [
           ["Keluhan Utama", (visit as any).chiefComplaint || "-"],
           ["Hasil Pemeriksaan Fisik", (visit as any).bloodPressure || "-"],
-          ["Rencana Perawatan", (visit as any).notes || "-"],
+          ["Rencana Perawatan", cleanText(pdfTreatmentPlan) || "-"],
+          ["Catatan Kunjungan", cleanText(pdfNotes) || "-"],
         ],
         [160, CONTENT_WIDTH - 160]
       );
 
+
       drawSectionTitle("Obat yang Diberikan");
+
       const pdfMeds: any[] = (visit as any).medications || [];
       if (!Array.isArray(pdfMeds) || pdfMeds.length === 0) {
         drawTable([["Obat", "Tidak ada obat yang diresepkan."]], [
@@ -602,7 +721,7 @@ export default function RekamMedisDetailPage() {
           color: rgb(0.85, 0.85, 0.85),
         });
 
-        p.drawText(`© ${new Date().getFullYear()} RoxyDental`, {
+        p.drawText(`© ${new Date().getFullYear()} POLABDC - Dental Clinic`, {
           x: MARGIN,
           y: FOOTER_HEIGHT - 34,
           size: 9,
@@ -715,11 +834,30 @@ export default function RekamMedisDetailPage() {
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 font-sans">
           <div>
             <Card className="shadow-lg">
-              <CardHeader className="bg-pink-600 text-white rounded-t-md">
-                <CardTitle className="text-lg font-semibold">
+              <CardHeader
+                className="
+    bg-pink-600/90
+    text-white
+    rounded-t-md
+    px-6
+    py-4
+    border-b
+    border-pink-700/40
+  "
+              >
+                <CardTitle
+                  className="
+      text-base
+        font-semibold
+        uppercase
+        tracking-wide
+        leading-none
+    "
+                >
                   Informasi Pasien
                 </CardTitle>
               </CardHeader>
+
               <CardContent className="space-y-4 bg-white text-sm pt-4">
                 <div>
                   <p className="text-xs text-gray-400">NO. REKAM MEDIS</p>
@@ -780,59 +918,102 @@ export default function RekamMedisDetailPage() {
                   </p>
                 </div>
 
-                <div>
-                  <p className="text-xs text-gray-400">CATATAN</p>
-                  <p className="text-pink-700 font-medium mt-1">
-                    {(visit as any).patient?.allergies || "-"}
-                  </p>
-                </div>
               </CardContent>
             </Card>
           </div>
 
           <div className="lg:col-span-2 space-y-6 font-sans">
             <Card className="shadow-lg">
-              <CardHeader className="bg-yellow-400/40 rounded-t-md py-5">
+              <CardHeader
+                className="
+    bg-yellow-400/40
+    rounded-t-md
+    px-6
+    py-4
+    border-b
+    border-yellow-500/40
+  "
+              >
                 <div className="flex items-center justify-between w-full">
-                  <CardTitle className="text-lg font-semibold leading-none">
+                  <CardTitle
+                    className="
+        text-base
+        font-semibold
+        uppercase
+        tracking-wide
+        leading-none
+        text-gray-800
+      "
+                  >
                     Informasi Kunjungan Terkini
                   </CardTitle>
 
                   {!editDiagnosis ? (
                     <Button
                       size="sm"
-                      className="h-8"
+                      variant="outline"
+                      className="
+                    h-8
+                    bg-white
+                    border-amber-400
+                    text-amber-700
+                    hover:bg-amber-50
+                    hover:text-amber-800
+                    shadow-sm
+                    transition
+                  "
                       onClick={() => {
                         setDiagnosisDraft((visit as any).patient?.medicalHistory || "");
                         setEditDiagnosis(true);
                       }}
                     >
-                      <Pencil className="w-4 h-4 mr-1" /> Edit
+                      <Pencil className="w-4 h-4 mr-1" />
+                      Edit
                     </Button>
                   ) : (
                     <div className="flex items-center gap-2">
+                      {/* SIMPAN */}
                       <Button
                         size="sm"
-                        className="h-8"
+                        className="
+                      h-8
+                      bg-white
+                      text-amber-500
+                      hover:bg-amber-50
+                      shadow-sm
+                      transition
+                    "
                         onClick={handleSaveDiagnosis}
                         disabled={saving}
                       >
                         {saving ? (
                           <Loader2 className="w-4 h-4 animate-spin" />
                         ) : (
-                          "Simpan"
+                          <>
+                            <Check className="w-4 h-4 mr-1" />
+                            Simpan
+                          </>
                         )}
                       </Button>
+
+                      {/* BATAL */}
                       <Button
                         size="sm"
-                        className="h-8"
-                        variant="outline"
+                        variant="ghost"
+                        className="
+                      h-8
+                      text-gray-600
+                      hover:text-gray-800
+                      hover:bg-amber-50
+                      transition
+                    "
                         onClick={() => {
                           setDiagnosisDraft((visit as any).patient?.medicalHistory || "");
                           setEditDiagnosis(false);
                         }}
                         disabled={saving}
                       >
+                        <X className="w-4 h-4 mr-1" />
                         Batal
                       </Button>
                     </div>
@@ -884,45 +1065,103 @@ export default function RekamMedisDetailPage() {
             </Card>
 
             <Card className="shadow-lg">
-              <CardHeader className="bg-pink-600 text-white rounded-t-md">
-                <div className="flex w-full items-center justify-between">
-                  <CardTitle className="text-lg font-semibold">
+              <CardHeader
+                className="
+    bg-pink-600/85
+    text-white
+    rounded-t-md
+    px-6
+    py-4
+    border-b
+    border-pink-700/40
+  "
+              >
+                <div className="flex items-center justify-between">
+                  <CardTitle
+                    className="
+        text-base
+        font-semibold
+        uppercase
+        tracking-wide
+        leading-none
+      "
+                  >
                     Detail Pemeriksaan
                   </CardTitle>
 
                   {!editExam ? (
                     <Button
                       size="sm"
+                      variant="outline"
+                      className="
+    h-8
+    rounded-lg
+    border-pink-300
+    text-pink-600
+    bg-white
+    hover:bg-pink-50
+    hover:border-pink-400
+    transition
+  "
                       onClick={() => {
+                        // When entering edit mode, ensure examDraft shows parsed data
+                        const rawNotes = (visit as any).notes || "";
+                        const { treatmentPlan, notes } = unpackNotes(rawNotes);
+
                         setExamDraft({
                           chiefComplaint: (visit as any).chiefComplaint || "",
                           physical: (visit as any).bloodPressure || "",
-                          treatmentPlan: (visit as any).notes || "",
+                          treatmentPlan: treatmentPlan || "",
                         });
+                        // keep notesDraft as parsed
+                        setNotesDraft(notes || "");
                         setEditExam(true);
                       }}
                     >
-                      <Pencil className="w-4 h-4 mr-1" /> Edit
+                      <Pencil className="w-4 h-4 mr-1" />
+                      Edit
                     </Button>
                   ) : (
                     <div className="flex items-center gap-2">
+                      {/* SIMPAN */}
                       <Button
                         size="sm"
+                        className="
+        h-8
+        bg-white
+        text-pink-600
+        hover:bg-pink-50
+        shadow-sm
+        transition
+      "
                         onClick={handleSaveExam}
                         disabled={saving}
                       >
                         {saving ? (
-                          <Loader2 className="w-4 h-4 animate-spin" />
+                          <Loader2 className="w-4 h-4 animate-spin text-pink-600" />
                         ) : (
-                          "Simpan"
+                          <>
+                            <Check className="w-4 h-4 mr-1" />
+                            Simpan
+                          </>
                         )}
                       </Button>
+
+                      {/* BATAL */}
                       <Button
                         size="sm"
-                        variant="outline"
+                        variant="ghost"
+                        className="
+        h-8
+        text-white/80
+        hover:text-white
+        hover:bg-white/10
+        transition
+      "
                         onClick={() => setEditExam(false)}
                         disabled={saving}
                       >
+                        <X className="w-4 h-4 mr-1" />
                         Batal
                       </Button>
                     </div>
@@ -986,32 +1225,37 @@ export default function RekamMedisDetailPage() {
                     />
                   ) : (
                     <p className="font-medium mt-1">
-                      {(visit as any).notes || "-"}
+                      {/* Show parsed treatmentPlan */}
+                      {unpackNotes((visit as any).notes || "").treatmentPlan || "-"}
                     </p>
                   )}
                 </div>
 
-                <div className="bg-yellow-50 border-l-4 border-yellow-300 p-3 rounded mt-2">
-                  <div className="flex items-center justify-between mb-1">
-                    <p className="text-sm font-medium">Catatan:</p>
+                <div className="bg-pink-50 border-l-4 border-pink-400 p-4 rounded-lg mt-2">
+                  <div className="flex items-center justify-between mb-2">
+                    <p className="text-sm font-semibold text-pink-700">
+                      Catatan
+                    </p>
 
                     {!editNotes ? (
                       <Button
                         size="sm"
                         variant="ghost"
-                        className="h-7 px-2 text-xs"
+                        className="h-7 px-3 text-xs text-pink-600 hover:bg-pink-100 hover:text-pink-700"
                         onClick={() => {
-                          setNotesDraft((visit as any).notes || "");
+                          const rawNotes = (visit as any).notes || "";
+                          const { notes } = unpackNotes(rawNotes);
+                          setNotesDraft(notes || "");
                           setEditNotes(true);
                         }}
                       >
-                        <Pencil className="w-3 h-3 mr-1" /> Edit
+                        Edit
                       </Button>
                     ) : (
                       <div className="flex gap-2">
                         <Button
                           size="sm"
-                          className="h-7 px-2 text-xs"
+                          className="h-7 px-3 text-xs bg-pink-600 hover:bg-pink-700 text-white"
                           onClick={handleSaveNotes}
                           disabled={saving}
                         >
@@ -1021,12 +1265,15 @@ export default function RekamMedisDetailPage() {
                             "Simpan"
                           )}
                         </Button>
+
                         <Button
                           size="sm"
                           variant="outline"
-                          className="h-7 px-2 text-xs"
+                          className="h-7 px-3 text-xs border-pink-300 text-pink-600 hover:bg-pink-100"
                           onClick={() => {
-                            setNotesDraft((visit as any).notes || "");
+                            const rawNotes = (visit as any).notes || "";
+                            const { notes } = unpackNotes(rawNotes);
+                            setNotesDraft(notes || "");
                             setEditNotes(false);
                           }}
                           disabled={saving}
@@ -1037,32 +1284,68 @@ export default function RekamMedisDetailPage() {
                     )}
                   </div>
 
-                  {editNotes ? (
+                  {/* ISI CATATAN */}
+                  {!editNotes ? (
+                    <p className="text-sm text-gray-700 leading-relaxed whitespace-pre-line">
+                      {unpackNotes((visit as any).notes || "").notes || (
+                        <span className="italic text-gray-400">
+                          Tidak ada catatan.
+                        </span>
+                      )}
+                    </p>
+                  ) : (
                     <textarea
+                      className="w-full mt-1 rounded-md border border-pink-300 p-2 text-sm focus:border-pink-500 focus:ring-pink-500 resize-none"
                       rows={3}
-                      className="w-full border rounded px-2 py-1 text-sm"
                       value={notesDraft}
                       onChange={(e) => setNotesDraft(e.target.value)}
+                      disabled={saving}
+                      placeholder="Tulis catatan di sini..."
                     />
-                  ) : (
-                    <p className="text-sm mt-1 text-gray-700">
-                      {(visit as any).notes || "-"}
-                    </p>
                   )}
                 </div>
               </CardContent>
             </Card>
 
-            <Card className="shadow-lg">
-              <CardHeader className="bg-yellow-400/40 rounded-t-md">
-                <div className="flex w-full items-center justify-between">
-                  <CardTitle className="text-lg font-semibold">
+            <Card className="shadow-lg border border-yellow-200">
+              {/* HEADER */}
+              <CardHeader
+                className="
+    bg-yellow-400/40
+    rounded-t-md
+    px-6
+    py-4
+    border-b
+    border-yellow-500/40
+  "
+              >
+                <div className="flex items-center justify-between">
+                  <CardTitle
+                    className="
+        text-base
+        font-semibold
+        uppercase
+        tracking-wide
+        leading-none
+        text-gray-800
+      "
+                  >
                     Obat yang Diberikan
                   </CardTitle>
 
                   {!editMeds ? (
                     <Button
                       size="sm"
+                      variant="outline"
+                      className="
+            h-8
+            bg-white
+            border-yellow-400
+            text-yellow-700
+            hover:bg-yellow-50
+            hover:text-yellow-800
+            shadow-sm
+          "
                       onClick={() => {
                         const extractedMeds =
                           ((visit as any).medications || []).map((m: any) => ({
@@ -1076,24 +1359,43 @@ export default function RekamMedisDetailPage() {
                         setEditMeds(true);
                       }}
                     >
-                      <Pencil className="w-4 h-4 mr-1" /> Edit
+                      <Pencil className="w-4 h-4 mr-2" />
+                      Edit
                     </Button>
                   ) : (
-                    <div className="flex gap-2">
+                    <div className="flex items-center gap-2">
                       <Button
                         size="sm"
+                        className="
+              h-8
+              bg-white
+              text-yellow-600
+              border border-yellow-400
+              hover:bg-yellow-50
+            "
                         onClick={handleSaveMeds}
                         disabled={saving}
                       >
                         {saving ? (
                           <Loader2 className="w-4 h-4 animate-spin" />
                         ) : (
-                          "Simpan"
+                          <>
+                            <Check className="w-4 h-4 mr-2" />
+                            Simpan
+                          </>
                         )}
                       </Button>
+
                       <Button
                         size="sm"
-                        variant="outline"
+                        variant="ghost"
+                        className="
+              h-8
+              px-4
+              text-gray-600
+              hover:text-gray-800
+              hover:bg-yellow-50
+            "
                         onClick={() => {
                           const extractedMeds =
                             ((visit as any).medications || []).map((m: any) => ({
@@ -1108,6 +1410,7 @@ export default function RekamMedisDetailPage() {
                         }}
                         disabled={saving}
                       >
+                        <X className="w-4 h-4 mr-2" />
                         Batal
                       </Button>
                     </div>
@@ -1115,39 +1418,57 @@ export default function RekamMedisDetailPage() {
                 </div>
               </CardHeader>
 
-              <CardContent className="space-y-3 bg-white text-sm pt-4">
+              {/* CONTENT */}
+             <CardContent className="bg-white text-sm px-6 py-5">
                 {(editMeds ? medsDraft : meds).length === 0 ? (
-                  <p className="text-gray-600">
-                    Tidak ada obat yang diresepkan pada kunjungan ini.
-                  </p>
+                  <div className="mt-4 py-6 flex justify-center">
+                    <p className="text-gray-500 italic text-center">
+                      Tidak ada obat yang diresepkan pada kunjungan ini.
+                    </p>
+                  </div>
                 ) : (
                   (editMeds ? medsDraft : meds).map((m: any, idx: number) => (
                     <div
                       key={m.id ?? idx}
-                      className="rounded-md bg-pink-50 p-4 border border-pink-100 space-y-2"
+                      className="
+            rounded-md
+            border
+            border-yellow-200
+            bg-yellow-50/40
+            px-4
+            py-3
+            space-y-3
+            mt-5
+          "
                     >
+                      {/* VIEW MODE */}
                       {!editMeds ? (
-                        <div className="flex justify-between items-start">
-                          <div>
-                            <p className="font-semibold text-pink-700">
+                        <div className="flex justify-between items-start gap-4">
+                          <div className="space-y-1">
+                            <p className="font-semibold text-gray-800">
                               {m.name}
                             </p>
                             {m.instructions && (
-                              <p className="text-gray-700 text-sm mt-1">
+                              <p className="text-gray-600 text-sm leading-relaxed">
                                 {m.instructions}
                               </p>
                             )}
                           </div>
-                          <Badge variant="secondary">
+
+                          <div className="text-xs font-medium text-gray-700 bg-white border border-yellow-300 rounded px-3 py-1">
                             Qty: {m.quantity}
-                          </Badge>
+                          </div>
                         </div>
                       ) : (
-                        <div className="flex items-start gap-2">
-                          <div className="flex-1 space-y-2">
+                        /* EDIT MODE */
+                        <div className="grid grid-cols-12 gap-3 items-start">
+                          {/* Nama Obat */}
+                          <div className="col-span-12 md:col-span-4">
+                            <label className="block text-xs text-gray-600 mb-1">
+                              Nama Obat
+                            </label>
                             <input
-                              className="w-full border rounded p-2"
-                              placeholder="Nama Obat"
+                              className="w-full border rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-yellow-300"
                               value={m.name}
                               onChange={(e) => {
                                 const copy = [...medsDraft];
@@ -1155,10 +1476,15 @@ export default function RekamMedisDetailPage() {
                                 setMedsDraft(copy);
                               }}
                             />
+                          </div>
 
+                          {/* Quantity */}
+                          <div className="col-span-6 md:col-span-2">
+                            <label className="block text-xs text-gray-600 mb-1">
+                              Qty
+                            </label>
                             <input
-                              className="w-full border rounded p-2"
-                              placeholder="Quantity"
+                              className="w-full border rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-yellow-300"
                               value={m.quantity}
                               onChange={(e) => {
                                 const copy = [...medsDraft];
@@ -1166,11 +1492,16 @@ export default function RekamMedisDetailPage() {
                                 setMedsDraft(copy);
                               }}
                             />
+                          </div>
 
+                          {/* Instruksi */}
+                          <div className="col-span-12 md:col-span-5">
+                            <label className="block text-xs text-gray-600 mb-1">
+                              Aturan Pakai
+                            </label>
                             <textarea
-                              className="w-full border rounded p-2"
-                              placeholder="Instruksi"
                               rows={2}
+                              className="w-full border rounded-md px-3 py-2 text-sm resize-none focus:ring-2 focus:ring-yellow-300"
                               value={m.instructions}
                               onChange={(e) => {
                                 const copy = [...medsDraft];
@@ -1183,14 +1514,17 @@ export default function RekamMedisDetailPage() {
                             />
                           </div>
 
-                          <Button
-                            size="sm"
-                            variant="destructive"
-                            className="mt-1"
-                            onClick={() => removeMedication(idx)}
-                          >
-                            <Trash2 className="w-4 h-4" />
-                          </Button>
+                          {/* Delete */}
+                          <div className="col-span-12 md:col-span-1 flex justify-end">
+                            <Button
+                              size="icon"
+                              variant="ghost"
+                              className="text-red-500 hover:bg-red-50"
+                              onClick={() => removeMedication(idx)}
+                            >
+                              <Trash2 className="w-4 h-4" />
+                            </Button>
+                          </div>
                         </div>
                       )}
                     </div>
@@ -1200,7 +1534,14 @@ export default function RekamMedisDetailPage() {
                 {editMeds && (
                   <Button
                     variant="outline"
-                    className="w-full border-dashed border-2 border-pink-300 text-pink-600 hover:bg-pink-50"
+                    className="
+          w-full
+          border-dashed
+          border-2
+          border-yellow-400
+          text-yellow-700
+          hover:bg-yellow-50
+        "
                     onClick={addNewMedication}
                   >
                     <Plus className="w-4 h-4 mr-2" />
@@ -1209,13 +1550,14 @@ export default function RekamMedisDetailPage() {
                 )}
               </CardContent>
             </Card>
+
           </div>
         </div>
 
         <div className="mt-8 text-center text-xs text-gray-400">
-          © 2025 RoxyDental.
+          © 2025 POLABDC Dental Clinic.
         </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/dashboard/dokter/pasien/rekam-medis/page.tsx b/frontend/src/app/dashboard/dokter/pasien/rekam-medis/page.tsx
index 666af6a..f3f0da5 100644
--- a/frontend/src/app/dashboard/dokter/pasien/rekam-medis/page.tsx
+++ b/frontend/src/app/dashboard/dokter/pasien/rekam-medis/page.tsx
@@ -1,32 +1,49 @@
 "use client";
 
-import { useState, useEffect, useMemo } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { Search, Eye } from "lucide-react";
+import { Search, Eye, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
 import DoctorNavbar from "@/components/ui/navbardr";
 import { patientService, PatientWithVisit } from "@/services/patient.service";
 import { dashboardService } from "@/services/dashboard.service";
 import { useToast } from "@/hooks/use-toast";
 
+/**
+ * MedicalRecordsPage.tsx
+ * FE-upgrade: debounce search, rows-per-page select, skeleton loader,
+ * improved pagination (first/prev/ellipses/next/last), sticky header, accessibility.
+ *
+ * NOTE: BE calls are preserved (patientService.getPatients) — only FE changes.
+ */
+
 export default function MedicalRecordsPage() {
   const router = useRouter();
   const pathname = usePathname();
   const { toast } = useToast();
 
+  // search + debounce
+  const [rawQuery, setRawQuery] = useState("");
   const [searchQuery, setSearchQuery] = useState("");
-  const [currentPage, setCurrentPage] = useState(1);
+  const debounceRef = useRef<number | undefined>(undefined);
+
+  // data
   const [rows, setRows] = useState<PatientWithVisit[]>([]);
   const [loading, setLoading] = useState(false);
+
+  // pagination (FE controlled)
+  const [page, setPage] = useState<number>(1);
+  const [limit, setLimit] = useState<number>(5); // default rows per page (same as original)
   const [pagination, setPagination] = useState({
     total: 0,
     page: 1,
     limit: 20,
-    totalPages: 0
+    totalPages: 0,
   });
+
   const [currentDoctorName, setCurrentDoctorName] = useState<string>("-");
 
   const tabs = useMemo(
@@ -50,44 +67,77 @@ export default function MedicalRecordsPage() {
     })();
   }, []);
 
-  const fetchMedicalRecords = async () => {
+  // fetch function (calls BE) - kept semantics but supports page & limit params
+  const fetchMedicalRecords = async (p = page, lim = limit, q = searchQuery) => {
     setLoading(true);
     try {
-      const response = await patientService.getPatients(currentPage, 20, searchQuery);
+      // call BE (kept same function name). Original used getPatients(currentPage, 20, searchQuery)
+      const response = await patientService.getPatients(p, lim, q);
 
+      // handle typical response shapes
       if (response?.success && response?.data) {
-        const list = response.data.patients || [];
-        const pg = response.data.pagination || {
+        const list = response.data.patients || response.data.items || [];
+        const pg = response.data.pagination || response.data.meta || {
           total: 0,
-          page: currentPage,
-          limit: 20,
+          page: p,
+          limit: lim,
           totalPages: 0
         };
 
         setRows(list);
-        setPagination(pg);
+        setPagination({
+          total: pg.total || pg.count || (Array.isArray(list) ? list.length : 0),
+          page: pg.page || p,
+          limit: pg.limit || lim,
+          totalPages: pg.totalPages || pg.pages || (pg.total ? Math.max(1, Math.ceil(pg.total / (pg.limit || lim))) : 0),
+        });
+      } else if (Array.isArray(response)) {
+        setRows(response as PatientWithVisit[]);
+        setPagination({
+          total: response.length,
+          page: p,
+          limit: lim,
+          totalPages: 1,
+        });
       } else {
         setRows([]);
-        setPagination({ total: 0, page: 1, limit: 20, totalPages: 0 });
+        setPagination({ total: 0, page: 1, limit: lim, totalPages: 0 });
       }
     } catch (error: any) {
       toast({
         title: "Error",
-        description: error.response?.data?.message || "Gagal mengambil data rekam medis",
+        description: error?.response?.data?.message || "Gagal mengambil data rekam medis",
         variant: "destructive"
       });
       setRows([]);
-      setPagination({ total: 0, page: 1, limit: 20, totalPages: 0 });
+      setPagination({ total: 0, page: 1, limit: lim, totalPages: 0 });
     } finally {
       setLoading(false);
     }
   };
 
+  // debounce rawQuery -> searchQuery
   useEffect(() => {
-    fetchMedicalRecords();
-  }, [currentPage, searchQuery]);
+    window.clearTimeout(debounceRef.current);
+    debounceRef.current = window.setTimeout(() => {
+      setSearchQuery(rawQuery.trim());
+      setPage(1); // reset to first page when searching
+    }, 300);
+
+    return () => {
+      window.clearTimeout(debounceRef.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rawQuery]);
 
-  const formatDate = (date: string) => {
+  // fetch on change
+  useEffect(() => {
+    fetchMedicalRecords(page, limit, searchQuery);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page, limit, searchQuery]);
+
+  const formatDate = (date?: string) => {
+    if (!date) return "-";
     try {
       return new Date(date).toLocaleDateString("id-ID", {
         day: "2-digit",
@@ -122,23 +172,60 @@ export default function MedicalRecordsPage() {
     }
   };
 
+  // Pagination helpers (with ellipsis)
+  const getPageNumbers = () => {
+    const total = pagination.totalPages || 1;
+    const current = page;
+    const delta = 2;
+    const range: number[] = [];
+    for (let i = Math.max(1, current - delta); i <= Math.min(total, current + delta); i++) {
+      range.push(i);
+    }
+
+    const pages: Array<number | "ellipsis"> = [];
+
+    if (range[0] > 1) {
+      pages.push(1);
+      if (range[0] > 2) pages.push("ellipsis");
+    }
+
+    pages.push(...range);
+
+    if (range[range.length - 1] < total) {
+      if (range[range.length - 1] < total - 1) pages.push("ellipsis");
+      pages.push(total);
+    }
+
+    return pages;
+  };
+
+  const gotoPage = (p: number) => {
+    const clamped = Math.max(1, Math.min(p, pagination.totalPages || 1));
+    setPage(clamped);
+    const el = document.getElementById("medical-records-table-top");
+    if (el) el.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  };
+
+  const pageLabel = `Halaman ${page} dari ${pagination.totalPages || 1}`;
+
   return (
     <div className="min-h-screen bg-[#FFF5F7]">
       <DoctorNavbar />
 
-      <div className="pt-6 px-6 max-w-7xl mx-auto space-y-6">
-        <div className="flex gap-4 mb-4">
+      <main className="pt-6 px-6 max-w-7xl mx-auto space-y-6">
+        <div className="flex gap-3 mb-2">
           {tabs.map((tab) => {
             const isActive = pathname.includes(tab.value);
             return (
               <Link
                 key={tab.value}
                 href={tab.href}
-                className={`px-4 py-2 rounded-full font-medium transition ${
+                className={`px-5 py-2 rounded-full text-sm font-semibold transition ${
                   isActive
-                    ? "bg-pink-600 text-white shadow-md"
-                    : "bg-white border border-pink-200 text-pink-600 hover:bg-pink-50"
+                    ? "bg-linear-to-r from-pink-600 to-pink-500 text-white shadow-md"
+                    : "bg-white text-pink-700 border border-pink-100 hover:bg-pink-50"
                 }`}
+                aria-current={isActive ? "page" : undefined}
               >
                 {tab.label}
               </Link>
@@ -146,97 +233,165 @@ export default function MedicalRecordsPage() {
           })}
         </div>
 
-        <h1 className="text-2xl font-bold text-pink-900">Rekam Medis</h1>
-
-        <div className="relative mb-4 w-full max-w-md">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-pink-400" />
-          <Input
-            placeholder="Cari No. RM / No. ID / Nama Pasien"
-            value={searchQuery}
-            onChange={(e) => {
-              setSearchQuery(e.target.value);
-              setCurrentPage(1);
-            }}
-            className="pl-12 py-2 rounded-lg border border-pink-200"
-          />
+        <div className="flex items-center justify-between gap-4 mt-7">
+          <h1 id="medical-records-table-top" className="text-2xl font-bold text-pink-900">Rekam Medis</h1>
         </div>
 
-        <div className="overflow-x-auto rounded-lg shadow-md bg-white">
-          <table className="min-w-full divide-y divide-pink-200">
-            <thead className="bg-pink-100 text-pink-900">
-              <tr>
-                {["NO. RM", "NO. ID", "NAMA PASIEN", "TANGGAL", "DOKTER", "DIAGNOSIS", "TINDAKAN", "AKSI"].map(
-                  (head) => (
-                    <th key={head} className="px-4 py-3 text-left font-semibold text-sm">
-                      {head}
-                    </th>
-                  )
-                )}
-              </tr>
-            </thead>
-
-            <tbody className="bg-white divide-y divide-pink-100 text-pink-900">
-              {loading ? (
-                <tr>
-                  <td colSpan={8} className="text-center py-8">
-                    <div className="flex justify-center">
-                      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-pink-600"></div>
-                    </div>
-                  </td>
-                </tr>
-              ) : rows.length === 0 ? (
-                <tr>
-                  <td colSpan={8} className="px-4 py-4 text-center text-pink-600">
-                    Tidak ada data rekam medis
-                  </td>
+        <div className="max-w-md">
+                 <div className="flex items-center gap-2 bg-white px-3 py-2 rounded-lg border border-pink-100 shadow-sm">
+                   <Search className="w-5 h-5 text-pink-400" />
+                   <Input
+                     placeholder="Cari pasien (nama / no. pasien)..."
+                     value={rawQuery}
+                     onChange={(e) => setRawQuery(e.target.value)}
+                     className="border-none focus-visible:ring-0 placeholder:text-pink-300"
+                     aria-label="Cari pasien"
+                   />
+                 </div>
+               </div>
+
+        <section className="overflow-hidden rounded-2xl bg-white border border-pink-100 shadow-sm">
+          <div className="overflow-x-auto">
+            <table className="min-w-full text-sm text-pink-900" role="table" aria-label="Daftar rekam medis">
+              <thead className="bg-pink-50/80 sticky top-0 z-10">
+                <tr className="border-b border-pink-100">
+                  {["NO. RM", "NO. ID", "NAMA PASIEN", "TANGGAL", "DOKTER", "DIAGNOSIS", "TINDAKAN", "AKSI"].map(
+                    (head) => (
+                      <th key={head} scope="col" className="px-4 py-3 text-left font-semibold text-pink-800">
+                        {head}
+                      </th>
+                    )
+                  )}
                 </tr>
-              ) : (
-                rows.map((row, idx) => (
-                  <tr key={idx} className="hover:bg-pink-50">
-                    <td className="px-4 py-2">{getNoRm(row)}</td>
-                    <td className="px-4 py-2">{getNoId(row)}</td>
-                    <td className="px-4 py-2 font-medium">{getNama(row)}</td>
-                    <td className="px-4 py-2">{getTanggal(row)}</td>
-                    <td className="px-4 py-2">{currentDoctorName}</td>
-                    <td className="px-4 py-2">
-                      <Badge variant="secondary">{getDiagnosis(row)}</Badge>
-                    </td>
-                    <td className="px-4 py-2">{getTindakan(row)}</td>
-                    <td className="px-4 py-2">
-                      <Button
-                        size="sm"
-                        variant="outline"
-                        onClick={() => openDetail(row)}
-                        className="flex items-center gap-1"
-                      >
-                        <Eye className="h-4 w-4" />
-                        Edit
-                      </Button>
+              </thead>
+
+              <tbody>
+                {loading ? (
+                  Array.from({ length: Math.max(limit, 5) }).map((_, i) => (
+                    <tr key={`sk-${i}`} className="border-b last:border-b-0">
+                      {Array.from({ length: 8 }).map((__, j) => (
+                        <td key={j} className="px-4 py-4">
+                          <div className="h-4 max-w-40 rounded-md bg-pink-100 animate-pulse" />
+                        </td>
+                      ))}
+                    </tr>
+                  ))
+                ) : rows.length === 0 ? (
+                  <tr>
+                    <td colSpan={8} className="px-4 py-10 text-center text-pink-600">
+                      Tidak ada data rekam medis
                     </td>
                   </tr>
-                ))
-              )}
-            </tbody>
-          </table>
-        </div>
+                ) : (
+                  rows.map((row, idx) => (
+                    <tr key={row.id || idx} className={`border-b last:border-b-0 ${idx % 2 === 0 ? "bg-white" : "bg-pink-50/40"} hover:bg-pink-100/60 transition-colors`}>
+                      <td className="px-4 py-3 align-top">{getNoRm(row)}</td>
+                      <td className="px-4 py-3 align-top">{getNoId(row)}</td>
+                      <td className="px-4 py-3 font-medium align-top">{getNama(row)}</td>
+                      <td className="px-4 py-3 align-top">{getTanggal(row)}</td>
+                      <td className="px-4 py-3 align-top">{currentDoctorName}</td>
+                      <td className="px-4 py-3 align-top"><Badge variant="secondary" className="font-normal text-sm">{getDiagnosis(row)}</Badge></td>
+                      <td className="px-4 py-3 align-top">{getTindakan(row)}</td>
+                      <td className="px-4 py-3 align-top">
+                  <Button
+                  size="sm"
+                  onClick={() => openDetail(row)}
+                  className="flex items-center gap-1 bg-linear-to-r from-pink-400 to-pink-500 text-white hover:opacity-90 transition"
+                >
+                  <Eye className="h-4 w-4" />
+                  Detail
+                </Button>
 
-        {pagination.totalPages > 1 && (
-          <div className="flex justify-center gap-2 mt-4">
-            {Array.from({ length: pagination.totalPages }).map((_, i) => (
-              <Button
-                key={i}
-                size="sm"
-                className={`px-3 py-1 rounded-full ${
-                  currentPage === i + 1 ? "bg-pink-600 text-white" : "border border-pink-200 hover:bg-pink-50"
-                }`}
-                onClick={() => setCurrentPage(i + 1)}
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Pagination Footer */}
+          <div className="flex flex-col sm:flex-row items-center justify-between gap-3 px-4 py-3 border-t border-pink-100 bg-pink-50/30">
+            <div className="text-sm text-pink-700">
+              <span className="font-medium">{pagination.total || 0}</span> rekam medis — {pageLabel}
+            </div>
+
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => gotoPage(1)}
+                disabled={page <= 1}
+                aria-label="Halaman pertama"
+                className={`p-2 rounded-md border text-sm ${page <= 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}
               >
-                {i + 1}
-              </Button>
-            ))}
+                <ChevronsLeft className="w-4 h-4" />
+              </button>
+
+              <button
+                onClick={() => gotoPage(page - 1)}
+                disabled={page <= 1}
+                aria-label="Sebelumnya"
+                className={`p-2 rounded-md border text-sm ${page <= 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}
+              >
+                <ChevronLeft className="w-4 h-4" />
+              </button>
+
+              <nav aria-label="Paginasi" className="flex items-center gap-1">
+                {getPageNumbers().map((p, i) =>
+                  p === "ellipsis" ? (
+                    <span key={`ell-${i}`} className="px-2 text-pink-400">…</span>
+                  ) : (
+                    <button
+                      key={`pg-${p}`}
+                      onClick={() => gotoPage(p as number)}
+                      aria-current={page === p ? "true" : undefined}
+                      className={`w-9 h-9 rounded-md text-sm font-medium border flex items-center justify-center focus:outline-none ${page === p ? "bg-pink-600 text-white border-pink-600 shadow" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}
+                    >
+                      {p}
+                    </button>
+                  )
+                )}
+              </nav>
+
+              <button
+                onClick={() => gotoPage(page + 1)}
+                disabled={page >= (pagination.totalPages || 1)}
+                aria-label="Selanjutnya"
+                className={`p-2 rounded-md border text-sm ${page >= (pagination.totalPages || 1) ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}
+              >
+                <ChevronRight className="w-4 h-4" />
+              </button>
+
+              <button
+                onClick={() => gotoPage(pagination.totalPages || 1)}
+                disabled={page >= (pagination.totalPages || 1)}
+                aria-label="Halaman terakhir"
+                className={`p-2 rounded-md border text-sm ${page >= (pagination.totalPages || 1) ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}
+              >
+                <ChevronsRight className="w-4 h-4" />
+              </button>
+
+              <div className="flex items-center gap-2 ml-2">
+                <label htmlFor="goto-medrec" className="sr-only">Lompat ke halaman</label>
+                <input
+                  id="goto-medrec"
+                  type="number"
+                  min={1}
+                  max={pagination.totalPages || 1}
+                  placeholder="Go"
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      const v = Number((e.target as HTMLInputElement).value);
+                      if (!isNaN(v)) gotoPage(v);
+                    }
+                  }}
+                  className="w-16 px-2 py-1 rounded-md border border-pink-100 bg-white text-sm text-pink-700 focus:outline-none"
+                />
+              </div>
+            </div>
           </div>
-        )}
-      </div>
+        </section>
+      </main>
+     <div className="h-10" />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/dashboard/dokter/profil/password/page.tsx b/frontend/src/app/dashboard/dokter/profil/password/page.tsx
index 8c2a537..a2bcfd0 100644
--- a/frontend/src/app/dashboard/dokter/profil/password/page.tsx
+++ b/frontend/src/app/dashboard/dokter/profil/password/page.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
-import { Eye, EyeOff, Shield, Loader2 } from "lucide-react";
+import { Eye, EyeOff, Shield, Loader2, CheckCircle2, X, AlertCircle } from "lucide-react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import DoctorNavbar from "@/components/ui/navbardr";
 import SettingsSidebar from "@/components/ui/SettingsSidebar";
@@ -43,6 +43,18 @@ export default function SettingsChangePassword() {
     confirmPassword: false,
   });
 
+  // Toast state
+  const [toast, setToast] = useState<{ type: "success" | "error" | null; message: string }>({
+    type: null,
+    message: "",
+  });
+
+  const showToast = (type: "success" | "error", message: string) => {
+    setToast({ type, message });
+    // auto dismiss
+    setTimeout(() => setToast({ type: null, message: "" }), 3500);
+  };
+
   const validateField = (type: string, value: string) => {
     if (type === "old") return value ? "" : "Password saat ini harus diisi";
     if (type === "new") {
@@ -81,6 +93,7 @@ export default function SettingsChangePassword() {
         confirmPassword: true,
       });
       setConfirmDialogOpen(false);
+      showToast("error", "Periksa kembali syarat password sebelum mengubah.");
       return;
     }
 
@@ -94,28 +107,36 @@ export default function SettingsChangePassword() {
       });
 
       if (response.success) {
+        showToast("success", "Password berhasil diperbarui.");
         setSuccessDialogOpen(true);
         setPasswordData({ oldPassword: "", newPassword: "", confirmPassword: "" });
         setTouched({ oldPassword: false, newPassword: false, confirmPassword: false });
         setPasswordErrors({ oldPassword: "", newPassword: "", confirmPassword: "" });
+      } else {
+        setErrorMessage(response.message || "Gagal mengganti password");
+        setErrorDialogOpen(true);
+        showToast("error", response.message || "Gagal mengganti password");
       }
     } catch (error: any) {
       console.error("Change password error:", error);
-      
-      if (error.message === "Password saat ini salah") {
+
+      if (error?.message === "Password saat ini salah") {
         setErrorMessage("Password saat ini yang Anda masukkan salah");
         setPasswordErrors({
           ...passwordErrors,
-          oldPassword: "Password saat ini salah"
+          oldPassword: "Password saat ini salah",
         });
         setTouched({ ...touched, oldPassword: true });
-      } else if (error.errors) {
+        showToast("error", "Password saat ini salah.");
+      } else if (error?.errors) {
         const firstError = error.errors[0];
         setErrorMessage(firstError.message || "Validasi gagal");
+        showToast("error", firstError.message || "Validasi gagal");
       } else {
-        setErrorMessage(error.message || "Terjadi kesalahan saat mengganti password");
+        setErrorMessage(error?.message || "Terjadi kesalahan saat mengganti password");
+        showToast("error", error?.message || "Terjadi kesalahan saat mengganti password");
       }
-      
+
       setErrorDialogOpen(true);
     } finally {
       setLoading(false);
@@ -127,64 +148,72 @@ export default function SettingsChangePassword() {
     router.push("/dashboard/dokter/profil");
   };
 
+  // password criteria for checklist
+  const newPw = passwordData.newPassword || "";
+  const criteria = {
+    minLength: newPw.length >= 6,
+    hasLower: /[a-z]/.test(newPw),
+    hasUpper: /[A-Z]/.test(newPw),
+    hasNumber: /\d/.test(newPw),
+    hasSymbol: /[\W_]/.test(newPw),
+    notSameAsOld: newPw !== "" && newPw !== passwordData.oldPassword,
+  };
+
   return (
-    <div className="min-h-screen bg-[#FFF5F7]">
+    <div className="min-h-screen bg-linear-to-b from-[#FFF5F7] to-white">
       <DoctorNavbar />
+
       <div className="pt-6 px-4 lg:px-8">
         <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
           <SettingsSidebar activeMenu={activeMenu} setActiveMenu={setActiveMenu} />
 
-          <div className="lg:col-span-3 mt-6">
-            <Card className="shadow-xl rounded-2xl border border-pink-100">
-              <CardHeader className="bg-linear-to-r from-pink-100 to-pink-50 rounded-t-2xl px-6 py-6">
-                <h2 className="text-2xl font-bold text-pink-900">Ganti Password</h2>
-                <p className="text-sm text-pink-600 mt-1">
-                  Perbarui password untuk keamanan akun Anda
-                </p>
+          <div className="lg:col-span-3">
+            <Card className="shadow-2xl rounded-2xl border border-pink-100 bg-white overflow-hidden">
+              <CardHeader className="px-8 py-6 border-b border-pink-100 bg-linear-to-r from-pink-50 via-white to-white">
+                <div className="flex items-center justify-between gap-4">
+                  <div className="flex items-center gap-4">
+                    <div className="w-12 h-12 rounded-lg bg-pink-100 flex items-center justify-center shadow-inner">
+                      <Shield className="w-6 h-6 text-pink-600" />
+                    </div>
+                    <div>
+                      <h2 className="text-2xl font-extrabold text-pink-900 tracking-tight">Ganti Password</h2>
+                      <p className="text-sm text-pink-600 mt-1">Demi keamanan akun, gunakan password yang kuat dan unik</p>
+                    </div>
+                  </div>
+                  <div className="text-right">
+                    <p className="text-xs text-gray-500">Terakhir diperbarui</p>
+                    <p className="text-sm font-medium text-pink-700">{new Date().toLocaleDateString('id-ID')}</p>
+                  </div>
+                </div>
               </CardHeader>
 
               <CardContent className="p-8 space-y-6">
                 <div className="space-y-5">
-                  {["old", "new", "confirm"].map((type, idx) => {
-                    const isOld = type === "old";
-                    const isNew = type === "new";
-                    const isConfirm = type === "confirm";
+                  {['old', 'new', 'confirm'].map((type, idx) => {
+                    const isOld = type === 'old';
+                    const isNew = type === 'new';
+                    const isConfirm = type === 'confirm';
                     const show = isOld ? showOldPassword : isNew ? showNewPassword : showConfirmPassword;
-                    const setter = isOld
-                      ? setShowOldPassword
-                      : isNew
-                      ? setShowNewPassword
-                      : setShowConfirmPassword;
-                    const value = isOld
-                      ? passwordData.oldPassword
-                      : isNew
-                      ? passwordData.newPassword
-                      : passwordData.confirmPassword;
-                    const label = isOld
-                      ? "Password Saat Ini"
-                      : isNew
-                      ? "Password Baru"
-                      : "Konfirmasi Password Baru";
-                    const placeholder = isOld
-                      ? "Masukkan password saat ini"
-                      : isNew
-                      ? "Masukkan password baru"
-                      : "Konfirmasi password baru";
-
-                    const key = type === "old" ? "oldPassword" : type === "new" ? "newPassword" : "confirmPassword";
+                    const setter = isOld ? setShowOldPassword : isNew ? setShowNewPassword : setShowConfirmPassword;
+                    const value = isOld ? passwordData.oldPassword : isNew ? passwordData.newPassword : passwordData.confirmPassword;
+                    const label = isOld ? 'Password Saat Ini' : isNew ? 'Password Baru' : 'Konfirmasi Password Baru';
+                    const placeholder = isOld ? 'Masukkan password saat ini' : isNew ? 'Masukkan password baru' : 'Konfirmasi password baru';
+
+                    const key = type === 'old' ? 'oldPassword' : type === 'new' ? 'newPassword' : 'confirmPassword';
                     const error = passwordErrors[key];
                     const showError = touched[key] && error;
 
                     return (
-                      <div key={type} className={idx === 0 ? "mt-4" : ""}>
+                      <div key={type} className={`${idx === 0 ? 'mt-4' : ''}`}>
                         <Label className="text-pink-900 font-semibold mb-1">{label}</Label>
                         <div className="relative">
                           <Input
-                            type={show ? "text" : "password"}
+                            aria-label={label}
+                            type={show ? 'text' : 'password'}
                             placeholder={placeholder}
                             value={value}
                             onChange={(e) => {
-                              const fieldKey = type + "Password";
+                              const fieldKey = type + 'Password';
                               setPasswordData({ ...passwordData, [fieldKey]: e.target.value });
                               setTouched({ ...touched, [fieldKey]: true });
                               setPasswordErrors({
@@ -192,27 +221,68 @@ export default function SettingsChangePassword() {
                                 [fieldKey]: validateField(type, e.target.value),
                               });
                             }}
-                            className={`border-pink-300 pr-10 focus:border-pink-500 focus:ring-1 focus:ring-pink-200 ${
-                              showError ? "border-red-500" : ""
+                            className={`border-pink-200 pr-12 focus:border-pink-500 focus:ring-2 focus:ring-pink-100 rounded-lg transition-shadow duration-150 shadow-sm ${
+                              showError ? 'border-red-400 ring-red-50' : 'hover:shadow-md'
                             }`}
                             disabled={loading}
                           />
+
                           <button
                             type="button"
                             onClick={() => setter(!show)}
-                            className="absolute right-3 top-1/2 -translate-y-1/2 text-pink-400 hover:text-pink-600"
+                            className="absolute right-3 top-1/2 -translate-y-1/2 text-pink-400 hover:text-pink-600 focus:outline-none"
+                            aria-label={`Toggle ${label}`}
                             disabled={loading}
                           >
                             {show ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                           </button>
                         </div>
+
                         {showError && <p className="text-red-600 text-xs mt-1">{error}</p>}
+
+                        {isNew && (
+                          <div className="mt-3 bg-pink-50 border border-pink-100 rounded-md p-3 text-sm">
+                            <div className="font-semibold text-pink-800 mb-2">Syarat Password</div>
+                            <ul className="space-y-1">
+                              <li className="flex items-center gap-2">
+                                {criteria.minLength ? <CheckCircle2 className="w-4 h-4 text-emerald-600" /> : <X className="w-4 h-4 text-red-400" />}
+                                <span className="text-xs">Minimal 6 karakter</span>
+                              </li>
+                              <li className="flex items-center gap-2">
+                                {criteria.hasUpper ? <CheckCircle2 className="w-4 h-4 text-emerald-600" /> : <X className="w-4 h-4 text-red-400" />}
+                                <span className="text-xs">Huruf besar (A-Z)</span>
+                              </li>
+                              <li className="flex items-center gap-2">
+                                {criteria.hasLower ? <CheckCircle2 className="w-4 h-4 text-emerald-600" /> : <X className="w-4 h-4 text-red-400" />}
+                                <span className="text-xs">Huruf kecil (a-z)</span>
+                              </li>
+                              <li className="flex items-center gap-2">
+                                {criteria.hasNumber ? <CheckCircle2 className="w-4 h-4 text-emerald-600" /> : <X className="w-4 h-4 text-red-400" />}
+                                <span className="text-xs">Angka (0-9)</span>
+                              </li>
+                              <li className="flex items-center gap-2">
+                                {criteria.hasSymbol ? <CheckCircle2 className="w-4 h-4 text-emerald-600" /> : <X className="w-4 h-4 text-red-400" />}
+                                <span className="text-xs">Simbol (mis. !@#)</span>
+                              </li>
+                              <li className="flex items-center gap-2">
+                                {criteria.notSameAsOld ? <CheckCircle2 className="w-4 h-4 text-emerald-600" /> : <X className="w-4 h-4 text-red-400" />}
+                                <span className="text-xs">Tidak sama dengan password lama</span>
+                              </li>
+                              <li className="flex items-start gap-2">
+                                <AlertCircle className="w-4 h-4 text-yellow-600 mt-0.5" />
+                                <span className="text-xs">
+                                  Jangan gunakan informasi pribadi yang mudah ditebak (nama, tanggal lahir, dsb.). <span className="italic">(Petunjuk)</span>
+                                </span>
+                              </li>
+                            </ul>
+                          </div>
+                        )}
                       </div>
                     );
                   })}
                 </div>
 
-                <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
+                <div className="bg-blue-50 border border-blue-100 rounded-xl p-4">
                   <div className="flex items-start gap-3">
                     <Shield className="w-6 h-6 text-blue-600 mt-1 shrink-0" />
                     <div>
@@ -225,7 +295,7 @@ export default function SettingsChangePassword() {
                           "Jangan gunakan password yang sama untuk akun lain",
                         ].map((tip, idx) => (
                           <li key={idx} className="text-sm text-blue-800 flex items-start gap-2">
-                            <span className="text-blue-600 mt-1">•</span>
+                            <span className="text-blue-600 mt-0.5">•</span>
                             <span>{tip}</span>
                           </li>
                         ))}
@@ -236,9 +306,14 @@ export default function SettingsChangePassword() {
 
                 <div className="flex justify-end">
                   <Button
-                    className="bg-pink-600 hover:bg-pink-700 text-white px-8 py-2 rounded-lg shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
+                    className="bg-pink-600 hover:bg-pink-700 text-white px-8 py-2 rounded-lg shadow-md disabled:opacity-50 disabled:cursor-not-allowed transform transition-transform active:scale-95"
                     onClick={() => setConfirmDialogOpen(true)}
-                    disabled={loading || !passwordData.oldPassword || !passwordData.newPassword || !passwordData.confirmPassword}
+                    disabled={
+                      loading ||
+                      !passwordData.oldPassword ||
+                      !passwordData.newPassword ||
+                      !passwordData.confirmPassword
+                    }
                   >
                     {loading ? (
                       <>
@@ -255,36 +330,21 @@ export default function SettingsChangePassword() {
           </div>
         </div>
 
-        <p className="text-center text-sm text-pink-600 mt-8">
-          © 2025 RosyDental. Platform untuk klinik gigi modern
-        </p>
+        <p className="text-center text-sm text-pink-600 mt-8"> © 2025 POLADC — All rights reserved</p>
       </div>
 
       {/* Konfirmasi Dialog */}
       <Dialog open={confirmDialogOpen} onOpenChange={setConfirmDialogOpen}>
         <DialogContent className="max-w-md">
           <DialogHeader>
-            <DialogTitle className="text-center text-pink-900">
-              Yakin ingin mengganti password?
-            </DialogTitle>
+            <DialogTitle className="text-center text-pink-900">Yakin ingin mengganti password?</DialogTitle>
           </DialogHeader>
-          <p className="text-center text-gray-600 text-sm">
-            Pastikan Anda mengingat password baru yang telah dibuat
-          </p>
+          <p className="text-center text-gray-600 text-sm">Pastikan Anda mengingat password baru yang telah dibuat</p>
           <div className="flex gap-3 justify-center pt-4">
-            <Button
-              variant="outline"
-              onClick={() => setConfirmDialogOpen(false)}
-              className="px-8 border-pink-300 text-pink-700"
-              disabled={loading}
-            >
+            <Button variant="outline" onClick={() => setConfirmDialogOpen(false)} className="px-8 border-pink-300 text-pink-700" disabled={loading}>
               Batal
             </Button>
-            <Button
-              className="bg-pink-600 hover:bg-pink-700 text-white px-8 disabled:opacity-50"
-              onClick={handleConfirmChange}
-              disabled={loading}
-            >
+            <Button className="bg-pink-600 hover:bg-pink-700 text-white px-8 disabled:opacity-50" onClick={handleConfirmChange} disabled={loading}>
               {loading ? (
                 <>
                   <Loader2 className="w-4 h-4 mr-2 animate-spin" />
@@ -302,24 +362,12 @@ export default function SettingsChangePassword() {
       <Dialog open={successDialogOpen} onOpenChange={setSuccessDialogOpen}>
         <DialogContent className="max-w-md flex justify-center items-center p-6">
           <div className="text-center bg-pink-100 rounded-2xl shadow-lg p-6 w-full">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="mx-auto w-16 h-16 text-pink-600 mb-4"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={2}
-            >
+            <svg xmlns="http://www.w3.org/2000/svg" className="mx-auto w-16 h-16 text-pink-600 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
               <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
             </svg>
             <h3 className="text-xl font-bold text-pink-700 mb-2">Password Berhasil Diganti!</h3>
-            <p className="text-sm text-gray-600 mb-4">
-              Password Anda telah berhasil diperbarui
-            </p>
-            <Button
-              className="bg-pink-600 hover:bg-pink-700 text-white px-6 py-2 rounded-lg mt-2"
-              onClick={handleSuccessClose}
-            >
+            <p className="text-sm text-gray-600 mb-4">Password Anda telah berhasil diperbarui</p>
+            <Button className="bg-pink-600 hover:bg-pink-700 text-white px-6 py-2 rounded-lg mt-2" onClick={handleSuccessClose}>
               Kembali ke Profil
             </Button>
           </div>
@@ -330,33 +378,44 @@ export default function SettingsChangePassword() {
       <Dialog open={errorDialogOpen} onOpenChange={setErrorDialogOpen}>
         <DialogContent className="max-w-md">
           <DialogHeader>
-            <DialogTitle className="text-center text-red-900">
-              Gagal Mengganti Password
-            </DialogTitle>
+            <DialogTitle className="text-center text-red-900">Gagal Mengganti Password</DialogTitle>
           </DialogHeader>
           <div className="text-center py-4">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="mx-auto w-16 h-16 text-red-600 mb-4"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={2}
-            >
+            <svg xmlns="http://www.w3.org/2000/svg" className="mx-auto w-16 h-16 text-red-600 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
               <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>
             <p className="text-gray-700">{errorMessage}</p>
           </div>
           <div className="flex justify-center pt-2">
-            <Button
-              className="bg-red-600 hover:bg-red-700 text-white px-8"
-              onClick={() => setErrorDialogOpen(false)}
-            >
+            <Button className="bg-red-600 hover:bg-red-700 text-white px-8" onClick={() => setErrorDialogOpen(false)}>
               Tutup
             </Button>
           </div>
         </DialogContent>
       </Dialog>
+
+      {/* Toast */}
+      {toast.type && (
+        <div className="fixed right-6 top-6 z-50">
+          <div
+            className={`max-w-xs w-full rounded-lg shadow-lg p-3 flex items-start gap-3 transform transition-transform duration-200 ${
+              toast.type === "success" ? "bg-emerald-50 border border-emerald-200" : "bg-red-50 border border-red-200"
+            }`}
+            role="status"
+            aria-live="polite"
+          >
+            <div className="pt-1">
+              {toast.type === "success" ? <CheckCircle2 className="w-6 h-6 text-emerald-600" /> : <X className="w-6 h-6 text-red-600" />}
+            </div>
+            <div className="text-sm">
+              <div className={`${toast.type === "success" ? "text-emerald-800 font-medium" : "text-red-800 font-medium"}`}>
+                {toast.type === "success" ? "Berhasil" : "Gagal"}
+              </div>
+              <div className="text-gray-700">{toast.message}</div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/dashboard/perawat/pasienpr/antrian/page.tsx b/frontend/src/app/dashboard/perawat/pasienpr/antrian/page.tsx
index b51b945..6f32435 100644
--- a/frontend/src/app/dashboard/perawat/pasienpr/antrian/page.tsx
+++ b/frontend/src/app/dashboard/perawat/pasienpr/antrian/page.tsx
@@ -1,9 +1,15 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import { Search } from "lucide-react";
+import {
+  Search,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
 import { useRouter, usePathname } from "next/navigation";
 import DoctorNavbar from "@/components/ui/navbarpr";
 import {
@@ -14,15 +20,34 @@ import {
 import { useToast } from "@/hooks/use-toast";
 import Link from "next/link";
 
+/**
+ * QueuePage (Perawat) — UI aligned with doctor's polished page
+ * - BE calls unchanged: visitService.getNurseQueue(searchQuery) & visitService.updateVisitStatus(...)
+ * - Debounce search (FE)
+ * - Client-side pagination (since BE signature is unchanged)
+ * - Skeleton loader, sticky header, accessible pagination, rows-per-page select
+ * - Polling preserved (10s) to refresh queue
+ */
+
 export default function QueuePage() {
   const router = useRouter();
   const pathname = usePathname();
   const { toast } = useToast();
 
+  // search + debounce
+  const [rawQuery, setRawQuery] = useState("");
   const [searchQuery, setSearchQuery] = useState("");
-  const [queues, setQueues] = useState<Visit[]>([]);
+  const debounceRef = useRef<number | undefined>(undefined);
+
+  // data from BE (full list)
+  const [queuesFull, setQueuesFull] = useState<Visit[]>([]);
   const [loading, setLoading] = useState(false);
 
+  // client-side pagination
+  const [page, setPage] = useState<number>(1);
+  const [limit, setLimit] = useState<number>(10); // rows per page
+  const totalPages = Math.max(1, Math.ceil((queuesFull?.length || 0) / limit));
+
   const tabs = [
     {
       label: "Daftar Pasien",
@@ -41,11 +66,12 @@ export default function QueuePage() {
     },
   ];
 
-  const fetchQueue = async () => {
+  // Fetch from BE — KEEP signature unchanged (only searchQuery passed)
+  const fetchQueueFromBE = async (q: string) => {
     setLoading(true);
     try {
-      const data = await visitService.getNurseQueue(searchQuery);
-      setQueues(Array.isArray(data) ? data : []);
+      const data = await visitService.getNurseQueue(q);
+      setQueuesFull(Array.isArray(data) ? data : []);
     } catch (error: any) {
       console.error("Error fetching queue:", error);
       toast({
@@ -54,19 +80,36 @@ export default function QueuePage() {
           error?.response?.data?.message || "Gagal mengambil data antrian",
         variant: "destructive",
       });
-      setQueues([]);
+      setQueuesFull([]);
     } finally {
       setLoading(false);
+      setPage(1); // reset page when new data fetched
     }
   };
 
+  // debounce rawQuery -> searchQuery
   useEffect(() => {
-    fetchQueue();
-  }, []);
+    window.clearTimeout(debounceRef.current);
+    debounceRef.current = window.setTimeout(() => {
+      setSearchQuery(rawQuery.trim());
+    }, 300);
+
+    return () => {
+      window.clearTimeout(debounceRef.current);
+    };
+  }, [rawQuery]);
 
+  // initial fetch & whenever searchQuery changes
   useEffect(() => {
-    const interval = setInterval(fetchQueue, 10000);
+    fetchQueueFromBE(searchQuery);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
+  // polling every 10s (preserve behavior), but still respect current searchQuery
+  useEffect(() => {
+    const interval = setInterval(() => fetchQueueFromBE(searchQuery), 10000);
     return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchQuery]);
 
   const handleStatusChange = async (
@@ -79,7 +122,7 @@ export default function QueuePage() {
         title: "Berhasil",
         description: "Status berhasil diubah",
       });
-      fetchQueue();
+      fetchQueueFromBE(searchQuery);
     } catch (error: any) {
       console.error("Error updating status:", error);
       toast({
@@ -105,7 +148,8 @@ export default function QueuePage() {
     }
   };
 
-  const formatTime = (date: string) => {
+  const formatTime = (date?: string) => {
+    if (!date) return "-";
     try {
       return new Date(date).toLocaleTimeString("id-ID", {
         hour: "2-digit",
@@ -116,28 +160,62 @@ export default function QueuePage() {
     }
   };
 
+  // visible slice for current page
+  const visibleQueues = useMemo(() => {
+    const start = (page - 1) * limit;
+    return queuesFull.slice(start, start + limit);
+  }, [queuesFull, page, limit]);
+
+  // pagination helpers with ellipsis
+  const getPageNumbers = () => {
+    const total = totalPages;
+    const current = page;
+    const delta = 2;
+    const range: number[] = [];
+    for (let i = Math.max(1, current - delta); i <= Math.min(total, current + delta); i++) {
+      range.push(i);
+    }
+
+    const pages: Array<number | "ellipsis"> = [];
+    if (range[0] > 1) {
+      pages.push(1);
+      if (range[0] > 2) pages.push("ellipsis");
+    }
+    pages.push(...range);
+    if (range[range.length - 1] < total) {
+      if (range[range.length - 1] < total - 1) pages.push("ellipsis");
+      pages.push(total);
+    }
+    return pages;
+  };
+
+  const gotoPage = (p: number) => {
+    const clamped = Math.max(1, Math.min(p, totalPages || 1));
+    setPage(clamped);
+    const el = document.getElementById("queue-table-top");
+    if (el) el.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  };
+
+  const pageLabel = `Halaman ${page} dari ${totalPages || 1}`;
+
   return (
     <div className="min-h-screen bg-[#FFF5F7]">
       <DoctorNavbar />
 
-      <div className="pt-6 px-6 max-w-7xl mx-auto space-y-6">
-               <div className="flex gap-4 mb-4">
+      <main className="pt-6 px-6 max-w-7xl mx-auto space-y-6">
+        {/* Tabs */}
+        <div className="flex gap-3 mb-2">
           {tabs.map((tab) => {
             const isActive = pathname === tab.href;
             return (
               <Link
                 key={tab.value}
                 href={tab.href}
-                className={`
-                  px-6 py-3 rounded-full
-                  text-sm font-semibold
-                  transition-all duration-200
-                  ${
-                    isActive
-                      ? "bg-pink-600 text-white shadow-lg"
-                      : "bg-white text-pink-600 border border-pink-300 hover:bg-pink-50"
-                  }
-                `}
+                className={`px-5 py-2 rounded-full text-sm font-semibold transition
+                  ${isActive
+                    ? "bg-linear-to-r from-pink-600 to-pink-500 text-white shadow-md"
+                    : "bg-white text-pink-700 border border-pink-100 hover:bg-pink-50"}`}
+                aria-current={isActive ? "page" : undefined}
               >
                 {tab.label}
               </Link>
@@ -145,109 +223,192 @@ export default function QueuePage() {
           })}
         </div>
 
+        <div className="flex items-center justify-between gap-4 mt-7">
+          <h1 id="queue-table-top" className="text-2xl font-bold text-pink-900">
+            Daftar Antrian
+          </h1>
+        </div>
 
-        <h1 className="text-2xl font-bold text-pink-900">Daftar Antrian</h1>
-        
-        <div className="mb-4 w-full flex items-center justify-between gap-4">
-          <div className="flex items-center gap-2 w-full max-w-sm">
+        {/* Search + Add */}
+       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        {/* Search */}
+        <div className="w-full sm:max-w-md">
+          <div className="flex items-center gap-2 bg-white px-3 py-2 rounded-lg border border-pink-100 shadow-sm">
             <Search className="w-5 h-5 text-pink-400" />
             <Input
-              placeholder="Cari antrian..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="flex-1 py-2 rounded-lg border border-pink-200"
+              placeholder="Cari antrian (nama / no. pasien / no. antrian)..."
+              value={rawQuery}
+              onChange={(e) => setRawQuery(e.target.value)}
+              className="border-none focus-visible:ring-0 placeholder:text-pink-300"
+              aria-label="Cari antrian"
             />
           </div>
-
-          <Button
-            className="bg-pink-600 text-white hover:bg-pink-700"
-            onClick={() =>
-              router.push("/dashboard/perawat/pasienpr/antrian/tambah-antrian")
-            }
-          >
-            + Tambah Antrian
-          </Button>
         </div>
 
-        <div className="overflow-x-auto rounded-lg shadow-md bg-white border border-pink-100">
-          <table className="min-w-full divide-y divide-pink-200 text-pink-900">
-            <thead className="bg-pink-100">
-              <tr>
-                {[
-                  "NO. ANTRIAN",
-                  "NO. PASIEN",
-                  "NAMA PASIEN",
-                  "JAM",
-                  "TINDAKAN",
-                  "STATUS",
-                ].map((h) => (
-                  <th
-                    key={h}
-                    className="px-4 py-3 text-left font-semibold text-sm"
-                  >
-                    {h}
-                  </th>
-                ))}
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-pink-100">
-              {loading ? (
-                <tr>
-                  <td colSpan={6} className="text-center py-8">
-                    <div className="flex justify-center">
-                      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-pink-600" />
-                    </div>
-                  </td>
-                </tr>
-              ) : queues.length === 0 ? (
-                <tr>
-                  <td
-                    colSpan={6}
-                    className="px-4 py-4 text-center text-pink-600"
-                  >
-                    Tidak ada antrian
-                  </td>
+        {/* Button */}
+        <Button
+          className="w-full sm:w-auto bg-pink-600 text-white hover:bg-pink-700"
+          onClick={() =>
+            router.push("/dashboard/perawat/pasienpr/antrian/tambah-antrian")
+          }
+        >
+          + Tambah Antrian
+        </Button>
+      </div>
+
+
+        {/* Table Card */}
+        <section className="overflow-hidden rounded-2xl bg-white border border-pink-100 shadow-sm">
+          <div className="overflow-x-auto">
+            <table className="min-w-full text-sm text-pink-900" role="table" aria-label="Daftar antrian">
+              <thead className="bg-pink-50/80 sticky top-0 z-10">
+                <tr className="border-b border-pink-100">
+                  {[
+                    "NO. ANTRIAN",
+                    "NO. PASIEN",
+                    "NAMA PASIEN",
+                    "JAM",
+                    "TINDAKAN",
+                    "STATUS",
+                  ].map((h) => (
+                    <th key={h} scope="col" className="px-4 py-3 text-left font-semibold text-pink-800">
+                      {h}
+                    </th>
+                  ))}
                 </tr>
-              ) : (
-                queues.map((q) => (
-                  <tr key={q.id} className="hover:bg-pink-50">
-                    <td className="px-4 py-3">{q.queueNumber}</td>
-                    <td className="px-4 py-3">
-                      {q.patient?.patientNumber || "-"}
-                    </td>
-                    <td className="px-4 py-3">
-                      {q.patient?.fullName || "-"}
-                    </td>
-                    <td className="px-4 py-3">{formatTime(q.visitDate)}</td>
-                    <td className="px-4 py-3">{q.chiefComplaint || "-"}</td>
-                    <td className="px-4 py-3">
-                      <select
-                        value={q.status}
-                        onChange={(e) =>
-                          handleStatusChange(
-                            q.id,
-                            e.target.value as VisitStatusType
-                          )
-                        }
-                        className={`px-3 py-1 rounded-lg text-sm ${getStatusColor(
-                          q.status as VisitStatusType
-                        )}`}
-                      >
-                        <option value="WAITING">Menunggu</option>
-                        <option value="IN_PROGRESS">Sedang Dilayani</option>
-                        <option value="COMPLETED">Selesai</option>
-                        <option value="CANCELLED">Dibatalkan</option>
-                      </select>
+              </thead>
+
+              <tbody>
+                {loading ? (
+                  // skeleton rows
+                  Array.from({ length: Math.max(limit, 5) }).map((_, i) => (
+                    <tr key={`sk-${i}`} className="border-b last:border-b-0">
+                      {Array.from({ length: 6 }).map((__, j) => (
+                        <td key={j} className="px-4 py-4">
+                          <div className="h-4 max-w-32 rounded-md bg-pink-100 animate-pulse" />
+                        </td>
+                      ))}
+                    </tr>
+                  ))
+                ) : visibleQueues.length === 0 ? (
+                  <tr>
+                    <td colSpan={6} className="py-10 text-center text-pink-600">
+                      Tidak ada antrian
                     </td>
                   </tr>
-                ))
-              )}
-            </tbody>
-          </table>
-        </div>
-      </div>
+                ) : (
+                  visibleQueues.map((q: Visit, idx: number) => (
+                    <tr
+                      key={q.id || idx}
+                      className={`border-b last:border-b-0 ${idx % 2 === 0 ? "bg-white" : "bg-pink-50/40"} hover:bg-pink-100/60 transition-colors`}
+                    >
+                      <td className="px-4 py-3 align-top">{q.queueNumber || "-"}</td>
+                      <td className="px-4 py-3 align-top">{q.patient?.patientNumber || "-"}</td>
+                      <td className="px-4 py-3 font-medium align-top">{q.patient?.fullName || "-"}</td>
+                      <td className="px-4 py-3 align-top">{formatTime(q.visitDate)}</td>
+                      <td className="px-4 py-3 align-top">{q.chiefComplaint || "-"}</td>
+                      <td className="px-4 py-3 align-top">
+                        <select
+                          value={q.status}
+                          onChange={(e) => handleStatusChange(q.id, e.target.value as VisitStatusType)}
+                          className={`px-3 py-1 rounded-lg text-sm ${getStatusColor(q.status as VisitStatusType)}`}
+                        >
+                          <option value="WAITING">Menunggu</option>
+                          <option value="IN_PROGRESS">Sedang Dilayani</option>
+                          <option value="COMPLETED">Selesai</option>
+                          <option value="CANCELLED">Dibatalkan</option>
+                        </select>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Pagination / Footer */}
+          <div className="flex flex-col sm:flex-row items-center justify-between gap-3 px-4 py-3 border-t border-pink-100 bg-pink-50/30">
+            <div className="text-sm text-pink-700">
+              <span className="font-medium">{queuesFull.length || 0}</span> antrian — {pageLabel}
+            </div>
+
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => gotoPage(1)}
+                disabled={page <= 1}
+                aria-label="Halaman pertama"
+                className={`p-2 rounded-md border text-sm ${page <= 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}
+              >
+                <ChevronsLeft className="w-4 h-4" />
+              </button>
+
+              <button
+                onClick={() => gotoPage(page - 1)}
+                disabled={page <= 1}
+                aria-label="Sebelumnya"
+                className={`p-2 rounded-md border text-sm ${page <= 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}
+              >
+                <ChevronLeft className="w-4 h-4" />
+              </button>
+
+              <nav aria-label="Paginasi" className="flex items-center gap-1">
+                {getPageNumbers().map((p, i) =>
+                  p === "ellipsis" ? (
+                    <span key={`ell-${i}`} className="px-2 text-pink-400">…</span>
+                  ) : (
+                    <button
+                      key={`pg-${p}`}
+                      onClick={() => gotoPage(p as number)}
+                      aria-current={page === p ? "true" : undefined}
+                      className={`w-9 h-9 rounded-md text-sm font-medium border flex items-center justify-center focus:outline-none ${page === p ? "bg-pink-600 text-white border-pink-600 shadow" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}
+                    >
+                      {p}
+                    </button>
+                  )
+                )}
+              </nav>
+
+              <button
+                onClick={() => gotoPage(page + 1)}
+                disabled={page >= totalPages}
+                aria-label="Selanjutnya"
+                className={`p-2 rounded-md border text-sm ${page >= totalPages ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}
+              >
+                <ChevronRight className="w-4 h-4" />
+              </button>
+
+              <button
+                onClick={() => gotoPage(totalPages)}
+                disabled={page >= totalPages}
+                aria-label="Halaman terakhir"
+                className={`p-2 rounded-md border text-sm ${page >= totalPages ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}
+              >
+                <ChevronsRight className="w-4 h-4" />
+              </button>
+
+              <div className="flex items-center gap-2 ml-2">
+                <label htmlFor="goto-queue" className="sr-only">Lompat ke halaman</label>
+                <input
+                  id="goto-queue"
+                  type="number"
+                  min={1}
+                  max={totalPages || 1}
+                  placeholder="Go"
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      const v = Number((e.target as HTMLInputElement).value);
+                      if (!isNaN(v)) gotoPage(v);
+                    }
+                  }}
+                  className="w-16 px-2 py-1 rounded-md border border-pink-100 bg-white text-sm text-pink-700 focus:outline-none"
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
 
       <div className="h-10" />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/dashboard/perawat/pasienpr/daftar-pasien/page.tsx b/frontend/src/app/dashboard/perawat/pasienpr/daftar-pasien/page.tsx
index ad055b0..9faf8ed 100644
--- a/frontend/src/app/dashboard/perawat/pasienpr/daftar-pasien/page.tsx
+++ b/frontend/src/app/dashboard/perawat/pasienpr/daftar-pasien/page.tsx
@@ -1,57 +1,108 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Search } from "lucide-react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { Input } from "@/components/ui/input";
+import {
+  Search,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
 import DoctorNavbar from "@/components/ui/navbarpr";
 import { patientService, PatientWithVisit } from "@/services/patient.service";
 import { useToast } from "@/hooks/use-toast";
-import Link from "next/link";
+
+/**
+ * PatientListPage (Perawat) - UI aligned with doctor's page
+ * - BE call kept unchanged: patientService.getPatients(1, 100, searchQuery)
+ * - Debounce search (FE)
+ * - Client-side pagination (since BE signature unchanged)
+ * - Skeleton loader, sticky header, accessible pagination
+ */
 
 export default function PatientListPage() {
   const pathname = usePathname();
   const { toast } = useToast();
 
+  // search + debounce
+  const [rawQuery, setRawQuery] = useState("");
   const [searchQuery, setSearchQuery] = useState("");
-  const [patients, setPatients] = useState<PatientWithVisit[]>([]);
+  const debounceRef = useRef<number | undefined>(undefined);
+
+  // data from BE (full list)
+  const [patientsFull, setPatientsFull] = useState<PatientWithVisit[]>([]);
   const [loading, setLoading] = useState(false);
 
-  const tabs = [
-    { label: "Daftar Pasien", value: "daftar-pasien", href: "/dashboard/perawat/pasienpr/daftar-pasien" },
-    { label: "Daftar Antrian", value: "daftar-antrian", href: "/dashboard/perawat/pasienpr/antrian" },
-    { label: "Rekam Medis", value: "rekam-medis", href: "/dashboard/perawat/pasienpr/rekam-medis" },
-  ];
+  // client-side pagination
+  const [page, setPage] = useState<number>(1);
+  const [limit, setLimit] = useState<number>(10); // rows per page
+  const totalPages = Math.max(1, Math.ceil((patientsFull?.length || 0) / limit));
 
-  const fetchPatients = async () => {
+  const tabs = useMemo(
+    () => [
+      { label: "Daftar Pasien", value: "daftar-pasien", href: "/dashboard/perawat/pasienpr/daftar-pasien" },
+      { label: "Daftar Antrian", value: "daftar-antrian", href: "/dashboard/perawat/pasienpr/antrian" },
+      { label: "Rekam Medis", value: "rekam-medis", href: "/dashboard/perawat/pasienpr/rekam-medis" },
+    ],
+    []
+  );
+
+  // fetch from BE — KEEP signature unchanged
+  const fetchPatientsFromBE = async (q: string) => {
     setLoading(true);
     try {
-      const response = await patientService.getPatients(1, 100, searchQuery);
-      
-      if (response.success && response.data) {
-        setPatients(response.data.patients || []);
+      // BE call unchanged (first arg page & limit are kept as original caller)
+      const response = await patientService.getPatients(1, 100, q);
+      if (response?.success && response?.data) {
+        setPatientsFull(response.data.patients || []);
+      } else if (Array.isArray(response)) {
+        setPatientsFull(response);
       } else {
-        setPatients([]);
+        setPatientsFull([]);
       }
     } catch (error: any) {
       console.error("Error fetching patients:", error);
       toast({
         title: "Error",
-        description: error.response?.data?.message || "Gagal mengambil data pasien",
+        description: error?.response?.data?.message || "Gagal mengambil data pasien",
         variant: "destructive",
       });
-      setPatients([]);
+      setPatientsFull([]);
     } finally {
       setLoading(false);
+      setPage(1); // reset to first page after each fetch
     }
   };
 
+  // debounce rawQuery -> searchQuery
+  useEffect(() => {
+    window.clearTimeout(debounceRef.current);
+    debounceRef.current = window.setTimeout(() => {
+      setSearchQuery(rawQuery.trim());
+    }, 300);
+
+    return () => {
+      window.clearTimeout(debounceRef.current);
+    };
+  }, [rawQuery]);
+
+  // fetch when searchQuery changes
   useEffect(() => {
-    fetchPatients();
+    fetchPatientsFromBE(searchQuery);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchQuery]);
 
-  const formatDate = (dateString: string) => {
+  // visible slice for current page
+  const visiblePatients = useMemo(() => {
+    const start = (page - 1) * limit;
+    return patientsFull.slice(start, start + limit);
+  }, [patientsFull, page, limit]);
+
+  const formatDate = (dateString?: string) => {
+    if (!dateString) return "-";
     try {
       return new Date(dateString).toLocaleDateString("id-ID", {
         day: "2-digit",
@@ -63,7 +114,8 @@ export default function PatientListPage() {
     }
   };
 
-  const calculateAge = (dateOfBirth: string) => {
+  const calculateAge = (dateOfBirth?: string) => {
+    if (!dateOfBirth) return "-";
     try {
       const today = new Date();
       const birthDate = new Date(dateOfBirth);
@@ -78,28 +130,60 @@ export default function PatientListPage() {
     }
   };
 
-  const handleSearch = (e: React.FormEvent) => {
-    e.preventDefault();
-    fetchPatients();
+  // pagination numbers with ellipsis
+  const getPageNumbers = () => {
+    const total = totalPages;
+    const current = page;
+    const delta = 2;
+    const range: number[] = [];
+    for (let i = Math.max(1, current - delta); i <= Math.min(total, current + delta); i++) {
+      range.push(i);
+    }
+
+    const pages: Array<number | "ellipsis"> = [];
+    if (range[0] > 1) {
+      pages.push(1);
+      if (range[0] > 2) pages.push("ellipsis");
+    }
+
+    pages.push(...range);
+
+    if (range[range.length - 1] < total) {
+      if (range[range.length - 1] < total - 1) pages.push("ellipsis");
+      pages.push(total);
+    }
+
+    return pages;
+  };
+
+  const gotoPage = (p: number) => {
+    const clamped = Math.max(1, Math.min(p, totalPages || 1));
+    setPage(clamped);
+    const el = document.getElementById("patient-table-top");
+    if (el) el.scrollIntoView({ behavior: "smooth", block: "nearest" });
   };
 
+  const pageLabel = `Halaman ${page} dari ${totalPages || 1}`;
+
   return (
     <div className="min-h-screen bg-[#FFF5F7]">
       <DoctorNavbar />
 
-      <div className="pt-6 px-6 max-w-7xl mx-auto space-y-6">
-        <div className="flex gap-4 mb-4">
+      <main className="pt-6 px-6 max-w-7xl mx-auto space-y-6">
+        {/* Tabs */}
+        <div className="flex gap-3 mb-2">
           {tabs.map((tab) => {
             const isActive = pathname.includes(tab.value);
             return (
               <Link
                 key={tab.value}
                 href={tab.href}
-                className={`px-4 py-2 rounded-full font-medium transition ${
+                className={`px-5 py-2 rounded-full text-sm font-semibold transition ${
                   isActive
-                    ? "bg-pink-600 text-white shadow-md"
-                    : "bg-white border border-pink-200 text-pink-600 hover:bg-pink-50"
+                    ? "bg-linear-to-r from-pink-600 to-pink-500 text-white shadow-md"
+                    : "bg-white text-pink-700 border border-pink-100 hover:bg-pink-50"
                 }`}
+                aria-current={isActive ? "page" : undefined}
               >
                 {tab.label}
               </Link>
@@ -107,81 +191,174 @@ export default function PatientListPage() {
           })}
         </div>
 
-        <div className="flex items-start gap-6">
-          <div className="bg-white rounded-lg shadow-md p-6 w-80">
-            <h2 className="text-lg font-bold text-pink-900 mb-4">Daftar Pasien</h2>
-            <form onSubmit={handleSearch}>
-              <div className="flex items-center gap-2 mb-4">
-                <Search className="w-5 h-5 text-pink-400" />
-                <Input
-                  placeholder="Cari pasien..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="flex-1 border border-pink-200"
-                />
-              </div>
-              <Button
-                type="submit"
-                className="w-full bg-pink-600 text-white hover:bg-pink-700"
-              >
-                Cari
-              </Button>
-            </form>
+        <div className="flex items-center justify-between gap-4 mt-7">
+          <h1 id="patient-table-top" className="text-2xl font-bold text-pink-900">
+            Daftar Pasien
+          </h1>
+        </div>
+
+        {/* Search */}
+        <div className="max-w-md">
+          <div className="flex items-center gap-2 bg-white px-3 py-2 rounded-lg border border-pink-100 shadow-sm">
+            <Search className="w-5 h-5 text-pink-400" />
+            <Input
+              placeholder="Cari pasien (nama / no. pasien)..."
+              value={rawQuery}
+              onChange={(e) => setRawQuery(e.target.value)}
+              className="border-none focus-visible:ring-0 placeholder:text-pink-300"
+              aria-label="Cari pasien"
+            />
           </div>
+        </div>
 
-          <div className="flex-1 overflow-x-auto rounded-lg shadow-md bg-white border border-pink-100">
-            <table className="min-w-full divide-y divide-pink-200 text-pink-900">
-              <thead className="bg-pink-100">
-                <tr>
-                  {["NO. PASIEN", "NAMA", "J/K", "TGL. LAHIR (UMUR)", "TGL. KUNJUNGAN", "TINDAKAN"].map((h) => (
-                    <th key={h} className="px-4 py-3 text-left font-semibold text-sm">
+        {/* Card / Table */}
+        <section className="overflow-hidden rounded-2xl bg-white border border-pink-100 shadow-sm">
+          <div className="overflow-x-auto">
+            <table className="min-w-full text-sm text-pink-900" role="table" aria-label="Daftar pasien">
+              <thead className="bg-pink-50/80 sticky top-0 z-10">
+                <tr className="border-b border-pink-100">
+                  {[
+                    "NO. PASIEN",
+                    "NAMA",
+                    "J/K",
+                    "TGL. LAHIR (UMUR)",
+                    "TGL. KUNJUNGAN",
+                    "TINDAKAN",
+                  ].map((h) => (
+                    <th key={h} scope="col" className="px-4 py-3 text-left font-semibold text-pink-800">
                       {h}
                     </th>
                   ))}
                 </tr>
               </thead>
-              <tbody className="divide-y divide-pink-100">
+
+              <tbody>
                 {loading ? (
+                  // skeleton rows
+                  Array.from({ length: Math.max(limit, 5) }).map((_, i) => (
+                    <tr key={`sk-${i}`} className="border-b last:border-b-0">
+                      {Array.from({ length: 6 }).map((__, j) => (
+                        <td key={j} className="px-4 py-4">
+                          <div className="h-4 max-w-32 rounded-md bg-pink-100 animate-pulse" />
+                        </td>
+                      ))}
+                    </tr>
+                  ))
+                ) : visiblePatients.length === 0 ? (
                   <tr>
-                    <td colSpan={6} className="text-center py-8">
-                      <div className="flex justify-center">
-                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-pink-600" />
-                      </div>
-                    </td>
-                  </tr>
-                ) : patients.length === 0 ? (
-                  <tr>
-                    <td colSpan={6} className="px-4 py-8 text-center text-pink-600">
+                    <td colSpan={6} className="py-10 text-center text-pink-600">
                       Tidak ada data pasien
                     </td>
                   </tr>
                 ) : (
-                  patients.map((patient) => (
-                    <tr key={patient.id} className="hover:bg-pink-50">
-                      <td className="px-4 py-3">{patient.patientNumber || "-"}</td>
-                      <td className="px-4 py-3 font-medium">{patient.fullName || "-"}</td>
-                      <td className="px-4 py-3">{patient.gender === "L" ? "Pria" : "Wanita"}</td>
-                      <td className="px-4 py-3">
-                        {patient.dateOfBirth
-                          ? `${formatDate(patient.dateOfBirth)} (${calculateAge(patient.dateOfBirth)})`
-                          : "-"}
-                      </td>
-                      <td className="px-4 py-3">
-                        {patient.lastVisit ? formatDate(patient.lastVisit) : "-"}
-                      </td>
-                      <td className="px-4 py-3">
-                        {patient.chiefComplaint && patient.chiefComplaint.trim() !== ""
-                          ? patient.chiefComplaint
-                          : "-"}
+                  visiblePatients.map((patient: any, idx: number) => (
+                    <tr
+                      key={patient.id || idx}
+                      className={`border-b last:border-b-0 ${idx % 2 === 0 ? "bg-white" : "bg-pink-50/40"} hover:bg-pink-100/60 transition-colors`}
+                    >
+                      <td className="px-4 py-3 align-top">{patient.patientNumber || "-"}</td>
+                      <td className="px-4 py-3 font-medium align-top">{patient.fullName || "-"}</td>
+                      <td className="px-4 py-3 align-top">{patient.gender === "L" ? "Pria" : "Wanita"}</td>
+                      <td className="px-4 py-3 align-top">
+                        {patient.dateOfBirth ? `${formatDate(patient.dateOfBirth)} (${calculateAge(patient.dateOfBirth)})` : "-"}
                       </td>
+                      <td className="px-4 py-3 align-top">{patient.lastVisit ? formatDate(patient.lastVisit) : "-"}</td>
+                      <td className="px-4 py-3 align-top">{patient.chiefComplaint?.trim() || "-"}</td>
                     </tr>
                   ))
                 )}
               </tbody>
             </table>
           </div>
-        </div>
-      </div>
+
+          {/* Pagination / Footer */}
+          <div className="flex flex-col sm:flex-row items-center justify-between gap-3 px-4 py-3 border-t border-pink-100 bg-pink-50/30">
+            <div className="text-sm text-pink-700">
+              <span className="font-medium">{patientsFull.length || 0}</span> pasien — {pageLabel}
+            </div>
+
+            <div className="flex items-center gap-2">
+              {/* First */}
+              <button
+                onClick={() => gotoPage(1)}
+                disabled={page <= 1}
+                aria-label="Halaman pertama"
+                className={`p-2 rounded-md border text-sm ${page <= 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}
+              >
+                <ChevronsLeft className="w-4 h-4" />
+              </button>
+
+              {/* Prev */}
+              <button
+                onClick={() => gotoPage(page - 1)}
+                disabled={page <= 1}
+                aria-label="Sebelumnya"
+                className={`p-2 rounded-md border text-sm ${page <= 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}
+              >
+                <ChevronLeft className="w-4 h-4" />
+              </button>
+
+              {/* Page numbers */}
+              <nav aria-label="Paginasi" className="flex items-center gap-1">
+                {getPageNumbers().map((p, i) =>
+                  p === "ellipsis" ? (
+                    <span key={`ell-${i}`} className="px-2 text-pink-400">…</span>
+                  ) : (
+                    <button
+                      key={`pg-${p}`}
+                      onClick={() => gotoPage(p as number)}
+                      aria-current={page === p ? "true" : undefined}
+                      className={`w-9 h-9 rounded-md text-sm font-medium border flex items-center justify-center focus:outline-none ${page === p ? "bg-pink-600 text-white border-pink-600 shadow" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}
+                    >
+                      {p}
+                    </button>
+                  )
+                )}
+              </nav>
+
+              {/* Next */}
+              <button
+                onClick={() => gotoPage(page + 1)}
+                disabled={page >= totalPages}
+                aria-label="Selanjutnya"
+                className={`p-2 rounded-md border text-sm ${page >= totalPages ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}
+              >
+                <ChevronRight className="w-4 h-4" />
+              </button>
+
+              {/* Last */}
+              <button
+                onClick={() => gotoPage(totalPages)}
+                disabled={page >= totalPages}
+                aria-label="Halaman terakhir"
+                className={`p-2 rounded-md border text-sm ${page >= totalPages ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}
+              >
+                <ChevronsRight className="w-4 h-4" />
+              </button>
+
+              {/* Jump to page */}
+              <div className="flex items-center gap-2 ml-2">
+                <label htmlFor="goto-patient" className="sr-only">Lompat ke halaman</label>
+                <input
+                  id="goto-patient"
+                  type="number"
+                  min={1}
+                  max={totalPages || 1}
+                  placeholder="Go"
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      const v = Number((e.target as HTMLInputElement).value);
+                      if (!isNaN(v)) gotoPage(v);
+                    }
+                  }}
+                  className="w-16 px-2 py-1 rounded-md border border-pink-100 bg-white text-sm text-pink-700 focus:outline-none"
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+     <div className="h-10" />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/dashboard/perawat/pasienpr/rekam-medis/[rmNo]/page.tsx b/frontend/src/app/dashboard/perawat/pasienpr/rekam-medis/[rmNo]/page.tsx
index aa1129c..7b7b5b5 100644
--- a/frontend/src/app/dashboard/perawat/pasienpr/rekam-medis/[rmNo]/page.tsx
+++ b/frontend/src/app/dashboard/perawat/pasienpr/rekam-medis/[rmNo]/page.tsx
@@ -11,8 +11,49 @@ import { visitService, Visit } from "@/services/visit.service";
 import { dashboardNurseService } from "@/services/dashboard-nurse.service";
 import { useToast } from "@/hooks/use-toast";
 
+/**
+ * Nurse read-only view.
+ * - Perawat hanya melihat (no edit buttons).
+ * - PDF generator includes parsed treatment & notes (structured format handling).
+ *
+ * Do NOT change backend behavior.
+ */
+
+/* Structured notes helpers (same format used by doctor UI) */
+const STRUCTURED_PREFIX = "__POLABDC_STRUCTURED__";
+const OPEN_TREAT = "<<TREATMENT>>";
+const CLOSE_TREAT = "<</TREATMENT>>";
+const OPEN_NOTES = "<<NOTES>>";
+const CLOSE_NOTES = "<</NOTES>>";
+
+const unpackNotes = (raw?: string) => {
+  if (!raw) return { treatmentPlan: "", notes: "" };
+  const txt = String(raw);
+  if (!txt.startsWith(STRUCTURED_PREFIX)) {
+    // legacy/unstructured -> fallback: both fields same
+    return { treatmentPlan: txt.trim(), notes: txt.trim() };
+  }
+
+  const tStart = txt.indexOf(OPEN_TREAT);
+  const tEnd = txt.indexOf(CLOSE_TREAT);
+  const nStart = txt.indexOf(OPEN_NOTES);
+  const nEnd = txt.indexOf(CLOSE_NOTES);
+
+  const treatmentPlan =
+    tStart !== -1 && tEnd !== -1 && tEnd > tStart
+      ? txt.slice(tStart + OPEN_TREAT.length, tEnd).trim()
+      : "";
+  const notes =
+    nStart !== -1 && nEnd !== -1 && nEnd > nStart
+      ? txt.slice(nStart + OPEN_NOTES.length, nEnd).trim()
+      : "";
+
+  return { treatmentPlan, notes };
+};
+
 export default function RekamMedisDetailPage() {
-  const { rmNo } = useParams<{ rmNo: string }>();
+  const params = useParams() as { rmNo?: string } | null;
+  const rmNo = params?.rmNo;
   const router = useRouter();
   const { toast } = useToast();
 
@@ -22,6 +63,7 @@ export default function RekamMedisDetailPage() {
   const [isDownloading, setIsDownloading] = useState(false);
   const [visit, setVisit] = useState<Visit | null>(null);
   const [currentNurseName, setCurrentNurseName] = useState<string>("-");
+  const [currentDoctorName, setCurrentDoctorName] = useState<string>("-");
 
   useEffect(() => {
     const fetchNurseInfo = async () => {
@@ -40,16 +82,25 @@ export default function RekamMedisDetailPage() {
   useEffect(() => {
     if (!medicalRecordNumber) return;
     fetchVisitData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [medicalRecordNumber]);
 
   const fetchVisitData = async () => {
+    if (!medicalRecordNumber) return;
     try {
       setLoading(true);
-
       const response = await visitService.getVisitByMedicalRecord(
         medicalRecordNumber
       );
       setVisit(response);
+
+      // also try to extract doctor name if available (optional)
+      try {
+        const docName = (response as any).doctorName || (response as any).doctor?.fullName;
+        if (docName) setCurrentDoctorName(docName);
+      } catch {
+        // ignore
+      }
     } catch (error: any) {
       toast({
         title: "Error",
@@ -63,6 +114,45 @@ export default function RekamMedisDetailPage() {
     }
   };
 
+  const formatDate = (dateString?: string) => {
+    try {
+      if (!dateString) return "-";
+      return new Date(dateString).toLocaleDateString("id-ID", {
+        day: "2-digit",
+        month: "long",
+        year: "numeric",
+      });
+    } catch {
+      return "-";
+    }
+  };
+
+  const calculateAge = (birthDate?: string) => {
+    try {
+      if (!birthDate) return 0;
+      const birth = new Date(birthDate);
+      const today = new Date();
+      let age = today.getFullYear() - birth.getFullYear();
+      const monthDiff = today.getMonth() - birth.getMonth();
+      if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
+        age--;
+      }
+      return age;
+    } catch {
+      return 0;
+    }
+  };
+
+  const getTindakan = () => {
+    if (!visit) return "-";
+    const firstTreatment = (visit as any).treatments?.[0];
+    return (
+      (visit as any).chiefComplaint ||
+      firstTreatment?.service?.serviceName ||
+      "-"
+    );
+  };
+
   const handlePrint = () => window.print();
 
   const handleDownloadPdf = async () => {
@@ -89,18 +179,22 @@ export default function RekamMedisDetailPage() {
       const MARGIN = 50;
       const FOOTER_HEIGHT = 60;
       const CONTENT_WIDTH = PAGE_WIDTH - MARGIN * 2;
-      const LINE_HEIGHT = 13;
+
+      // Typography & layout tweaks
+      const LINE_HEIGHT = 14;
       const CELL_PADDING = 6;
-      const FONT_SIZE_NORMAL = 7;
-      const FONT_SIZE_HEADER = 16;
-      const FONT_SIZE_SECTION = 9;
-      const BG_SECTION = rgb(0.96, 0.98, 1);
-      const COLOR_PRIMARY = rgb(0.06, 0.2, 0.5);
+      const FONT_SIZE_NORMAL = 9; // body / table text
+      const FONT_SIZE_HEADER = 18; // main title
+      const FONT_SIZE_SECTION = 11; // section titles
+      const BG_SECTION = rgb(0.98, 0.94, 0.97); // pale pink background for section bar
+      const COLOR_PRIMARY = rgb(0.90, 0.20, 0.50); // main pink (header)
+      const COLOR_SECTION_TEXT = rgb(0.78, 0.12, 0.40); // darker pink for section title text
+      const TEXT_COLOR = rgb(0.12, 0.12, 0.12); // dark gray for body text
       const SECTION_SPACING = 15;
 
       const pdfDoc = await PDFDocument.create();
-      const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
-      const fontBold = await pdfDoc.embedFont(StandardFonts.HelveticaBold);
+      const font = await pdfDoc.embedFont(StandardFonts.TimesRoman);
+      const fontBold = await pdfDoc.embedFont(StandardFonts.TimesRomanBold);
 
       let page = pdfDoc.addPage([PAGE_WIDTH, PAGE_HEIGHT]);
       let { width, height } = page.getSize();
@@ -155,13 +249,19 @@ export default function RekamMedisDetailPage() {
 
       const drawMeta = (meta: string) => {
         ensureSpace(18);
-        page.drawText(meta, { x: MARGIN, y: cursorY - 4, size: 9, font });
+        page.drawText(meta, {
+          x: MARGIN,
+          y: cursorY - 4,
+          size: 9,
+          font,
+          color: TEXT_COLOR,
+        });
         cursorY -= 18;
       };
 
       const drawSectionTitle = (title: string) => {
         cursorY -= SECTION_SPACING;
-        const barH = 20;
+        const barH = 22;
         ensureSpace(barH + SECTION_SPACING);
         page.drawRectangle({
           x: MARGIN - 2,
@@ -171,18 +271,17 @@ export default function RekamMedisDetailPage() {
           color: BG_SECTION,
         });
         page.drawText(title, {
-          x: MARGIN + 6,
-          y: cursorY - barH + 7,
+          x: MARGIN + 8,
+          y: cursorY - barH + 8,
           size: FONT_SIZE_SECTION,
           font: fontBold,
-          color: rgb(0.06, 0.3, 0.6),
+          color: COLOR_SECTION_TEXT,
         });
         cursorY -= barH + 8;
       };
 
       const drawTable = (rows: string[][], colWidths: number[]) => {
-        for (const row of rows)
-          while (row.length < colWidths.length) row.push("");
+        for (const row of rows) while (row.length < colWidths.length) row.push("");
 
         for (const row of rows) {
           const cellsLines = row.map((cell, idx) =>
@@ -225,6 +324,7 @@ export default function RekamMedisDetailPage() {
                 y: textY,
                 size: FONT_SIZE_NORMAL,
                 font: ci % 2 === 0 ? fontBold : font,
+                color: TEXT_COLOR,
               });
               textY -= LINE_HEIGHT;
             }
@@ -278,7 +378,6 @@ export default function RekamMedisDetailPage() {
           "No. Telepon",
           (visit as any).patient?.phone || "-",
         ],
-        ["Catatan", (visit as any).patient?.allergies || "-", "", ""],
       ];
 
       const labelW = 90;
@@ -293,9 +392,24 @@ export default function RekamMedisDetailPage() {
       drawTable(patientRows, patientColWidths);
 
       drawSectionTitle("Informasi Kunjungan Terkini");
+
+      // parse notes for PDF
+      const rawNotes = (visit as any).notes || "";
+      const { treatmentPlan: pdfTreatmentPlan, notes: pdfNotes } = unpackNotes(rawNotes);
+
+      const cleanText = (txt?: string) =>
+        String(txt || "")
+          .replace(/__POLABDC_STRUCTURED__/g, "")
+          .replace(/<<\/?TREATMENT>>/gi, "")
+          .replace(/<<\/?NOTES>>/gi, "")
+          .replace(/<<.*?>>/g, "")
+          .replace(/<\/<.*?>>/g, "")
+          .trim() || "-";
+
       drawTable(
         [
           ["Tanggal Kunjungan", formatDate((visit as any).visitDate)],
+          ["Dokter Pemeriksa", currentDoctorName],
           ["Perawat", currentNurseName],
           ["Tindakan", getTindakan()],
           ["Diagnosis", (visit as any).patient?.medicalHistory || "-"],
@@ -308,12 +422,14 @@ export default function RekamMedisDetailPage() {
         [
           ["Keluhan Utama", (visit as any).chiefComplaint || "-"],
           ["Hasil Pemeriksaan Fisik", (visit as any).bloodPressure || "-"],
-          ["Rencana Perawatan", (visit as any).notes || "-"],
+          ["Rencana Perawatan", cleanText(pdfTreatmentPlan) || "-"],
+          ["Catatan Kunjungan", cleanText(pdfNotes) || "-"],
         ],
         [160, CONTENT_WIDTH - 160]
       );
 
       drawSectionTitle("Obat yang Diberikan");
+
       const pdfMeds: any[] = (visit as any).medications || [];
       if (!Array.isArray(pdfMeds) || pdfMeds.length === 0) {
         drawTable([["Obat", "Tidak ada obat yang diresepkan."]], [
@@ -341,7 +457,7 @@ export default function RekamMedisDetailPage() {
           color: rgb(0.85, 0.85, 0.85),
         });
 
-        p.drawText(`© ${new Date().getFullYear()} RoxyDental`, {
+        p.drawText(`© ${new Date().getFullYear()} POLABDC - Dental Clinic`, {
           x: MARGIN,
           y: FOOTER_HEIGHT - 34,
           size: 9,
@@ -365,9 +481,7 @@ export default function RekamMedisDetailPage() {
       const url = URL.createObjectURL(blob);
       const a = document.createElement("a");
       a.href = url;
-      a.download = `${
-        (visit as any).patient?.medicalRecordNumber || "rekam_medis"
-      }.pdf`;
+      a.download = `${(visit as any).patient?.medicalRecordNumber || "rekam_medis"}.pdf`;
       a.click();
       URL.revokeObjectURL(url);
     } catch (err) {
@@ -382,47 +496,6 @@ export default function RekamMedisDetailPage() {
     }
   };
 
-  const formatDate = (dateString: string) => {
-    try {
-      return new Date(dateString).toLocaleDateString("id-ID", {
-        day: "2-digit",
-        month: "long",
-        year: "numeric",
-      });
-    } catch {
-      return "-";
-    }
-  };
-
-  const calculateAge = (birthDate: string) => {
-    try {
-      const birth = new Date(birthDate);
-      const today = new Date();
-      let age = today.getFullYear() - birth.getFullYear();
-      const monthDiff = today.getMonth() - birth.getMonth();
-
-      if (
-        monthDiff < 0 ||
-        (monthDiff === 0 && today.getDate() < birth.getDate())
-      ) {
-        age--;
-      }
-      return age;
-    } catch {
-      return 0;
-    }
-  };
-
-  const getTindakan = () => {
-    if (!visit) return "-";
-    const firstTreatment = (visit as any).treatments?.[0];
-    return (
-      (visit as any).chiefComplaint ||
-      firstTreatment?.service?.serviceName ||
-      "-"
-    );
-  };
-
   if (loading) {
     return (
       <div className="min-h-screen bg-[#FFF5F7]">
@@ -438,9 +511,7 @@ export default function RekamMedisDetailPage() {
     return (
       <div className="min-h-screen bg-background p-6">
         <div className="max-w-4xl mx-auto text-center py-20">
-          <p className="text-pink-700 font-semibold text-lg">
-            Rekam medis tidak ditemukan
-          </p>
+          <p className="text-pink-700 font-semibold text-lg">Rekam medis tidak ditemukan</p>
           <Button className="mt-4" onClick={() => router.back()}>
             Kembali ke daftar
           </Button>
@@ -450,6 +521,7 @@ export default function RekamMedisDetailPage() {
   }
 
   const meds: any[] = (visit as any).medications || [];
+  const { treatmentPlan, notes } = unpackNotes((visit as any).notes || "");
 
   return (
     <div className="min-h-screen bg-[#FFF5F7]">
@@ -458,9 +530,7 @@ export default function RekamMedisDetailPage() {
       <div id="rekam-medis-root" className="max-w-7xl mx-auto p-4 md:p-6">
         <div className="flex items-center justify-between mb-6">
           <Button
-            onClick={() =>
-              router.push("/dashboard/perawat/pasienpr/rekam-medis")
-            }
+            onClick={() => router.push("/dashboard/perawat/pasienpr/rekam-medis")}
             className="inline-flex items-center gap-2 bg-white/60 border border-pink-200 text-pink-700 px-3 py-2 rounded shadow-sm text-sm hover:bg-white"
           >
             <ArrowLeft className="w-4 h-4" />
@@ -498,10 +568,9 @@ export default function RekamMedisDetailPage() {
           <div>
             <Card className="shadow-lg">
               <CardHeader className="bg-pink-600 text-white rounded-t-md">
-                <CardTitle className="text-lg font-semibold">
-                  Informasi Pasien
-                </CardTitle>
+                <CardTitle className="text-lg font-semibold">Informasi Pasien</CardTitle>
               </CardHeader>
+
               <CardContent className="space-y-4 bg-white text-sm pt-4">
                 <div>
                   <p className="text-xs text-gray-400">NO. REKAM MEDIS</p>
@@ -512,61 +581,40 @@ export default function RekamMedisDetailPage() {
 
                 <div>
                   <p className="text-xs text-gray-400">NO. ID</p>
-                  <p className="font-medium mt-1">
-                    {(visit as any).patient?.patientNumber || "-"}
-                  </p>
+                  <p className="font-medium mt-1">{(visit as any).patient?.patientNumber || "-"}</p>
                 </div>
 
                 <div>
                   <p className="text-xs text-gray-400">NAMA LENGKAP</p>
-                  <p className="font-medium mt-1">
-                    {(visit as any).patient?.fullName || "-"}
-                  </p>
+                  <p className="font-medium mt-1">{(visit as any).patient?.fullName || "-"}</p>
                 </div>
 
                 <div className="grid grid-cols-2 gap-4">
                   <div>
                     <p className="text-xs text-gray-400">UMUR</p>
-                    <p className="font-medium mt-1">
-                      {calculateAge((visit as any).patient?.dateOfBirth)} tahun
-                    </p>
+                    <p className="font-medium mt-1">{calculateAge((visit as any).patient?.dateOfBirth)} tahun</p>
                   </div>
                   <div>
                     <p className="text-xs text-gray-400">JENIS KELAMIN</p>
                     <p className="font-medium mt-1">
-                      {(visit as any).patient?.gender === "L"
-                        ? "Laki-laki"
-                        : "Perempuan"}
+                      {(visit as any).patient?.gender === "L" ? "Laki-laki" : "Perempuan"}
                     </p>
                   </div>
                 </div>
 
                 <div>
                   <p className="text-xs text-gray-400">TANGGAL LAHIR</p>
-                  <p className="font-medium mt-1">
-                    {formatDate((visit as any).patient?.dateOfBirth)}
-                  </p>
+                  <p className="font-medium mt-1">{formatDate((visit as any).patient?.dateOfBirth)}</p>
                 </div>
 
                 <div>
                   <p className="text-xs text-gray-400">ALAMAT</p>
-                  <p className="font-medium mt-1">
-                    {(visit as any).patient?.address || "-"}
-                  </p>
+                  <p className="font-medium mt-1">{(visit as any).patient?.address || "-"}</p>
                 </div>
 
                 <div>
                   <p className="text-xs text-gray-400">NO. TELEPON</p>
-                  <p className="font-medium mt-1">
-                    {(visit as any).patient?.phone || "-"}
-                  </p>
-                </div>
-
-                <div>
-                  <p className="text-xs text-gray-400">CATATAN</p>
-                  <p className="text-pink-700 font-medium mt-1">
-                    {(visit as any).patient?.allergies || "-"}
-                  </p>
+                  <p className="font-medium mt-1">{(visit as any).patient?.phone || "-"}</p>
                 </div>
               </CardContent>
             </Card>
@@ -575,17 +623,13 @@ export default function RekamMedisDetailPage() {
           <div className="lg:col-span-2 space-y-6 font-sans">
             <Card className="shadow-lg">
               <CardHeader className="bg-yellow-400/40 rounded-t-md py-5">
-                <CardTitle className="text-lg font-semibold leading-none">
-                  Informasi Kunjungan Terkini
-                </CardTitle>
+                <CardTitle className="text-lg font-semibold leading-none">Informasi Kunjungan Terkini</CardTitle>
               </CardHeader>
 
               <CardContent className="grid grid-cols-1 md:grid-cols-3 gap-4 items-start bg-white text-sm pt-4">
                 <div>
                   <p className="text-xs text-gray-400">TANGGAL KUNJUNGAN</p>
-                  <p className="font-medium mt-1">
-                    {formatDate((visit as any).visitDate)}
-                  </p>
+                  <p className="font-medium mt-1">{formatDate((visit as any).visitDate)}</p>
                 </div>
 
                 <div>
@@ -601,9 +645,7 @@ export default function RekamMedisDetailPage() {
                 <div className="md:col-span-3 mt-2">
                   <p className="text-xs text-gray-400">DIAGNOSIS</p>
                   <div className="mt-2 rounded-md bg-pink-50 p-3">
-                    <p className="text-pink-700 font-semibold">
-                      {(visit as any).patient?.medicalHistory || "-"}
-                    </p>
+                    <p className="text-pink-700 font-semibold">{(visit as any).patient?.medicalHistory || "-"}</p>
                   </div>
                 </div>
               </CardContent>
@@ -611,74 +653,51 @@ export default function RekamMedisDetailPage() {
 
             <Card className="shadow-lg">
               <CardHeader className="bg-pink-600 text-white rounded-t-md">
-                <CardTitle className="text-lg font-semibold">
-                  Detail Pemeriksaan
-                </CardTitle>
+                <CardTitle className="text-lg font-semibold">Detail Pemeriksaan</CardTitle>
               </CardHeader>
 
               <CardContent className="space-y-4 bg-white text-sm pt-4">
                 <div>
                   <p className="text-xs text-gray-400">KELUHAN UTAMA</p>
-                  <p className="font-medium mt-1">
-                    {(visit as any).chiefComplaint || "-"}
-                  </p>
+                  <p className="font-medium mt-1">{(visit as any).chiefComplaint || "-"}</p>
                 </div>
 
                 <div>
-                  <p className="text-xs text-gray-400">
-                    HASIL PEMERIKSAAN FISIK
-                  </p>
-                  <p className="font-medium mt-1">
-                    {(visit as any).bloodPressure || "-"}
-                  </p>
+                  <p className="text-xs text-gray-400">HASIL PEMERIKSAAN FISIK</p>
+                  <p className="font-medium mt-1">{(visit as any).bloodPressure || "-"}</p>
                 </div>
 
                 <div>
                   <p className="text-xs text-gray-400">RENCANA PERAWATAN</p>
-                  <p className="font-medium mt-1">
-                    {(visit as any).notes || "-"}
-                  </p>
+                  <p className="font-medium mt-1">{treatmentPlan || ((visit as any).notes || "-")}</p>
                 </div>
 
-                {(visit as any).notes && (
+                {notes ? (
                   <div className="bg-yellow-50 border-l-4 border-yellow-300 p-3 rounded mt-2">
                     <p className="text-sm font-medium">Catatan:</p>
-                    <p className="text-sm mt-1 text-gray-700">
-                      {(visit as any).notes}
-                    </p>
+                    <p className="text-sm mt-1 text-gray-700 whitespace-pre-line">{notes}</p>
                   </div>
-                )}
+                ) : null}
               </CardContent>
             </Card>
 
             <Card className="shadow-lg">
               <CardHeader className="bg-yellow-400/40 rounded-t-md">
-                <CardTitle className="text-lg font-semibold">
-                  Obat yang Diberikan
-                </CardTitle>
+                <CardTitle className="text-lg font-semibold">Obat yang Diberikan</CardTitle>
               </CardHeader>
 
               <CardContent className="space-y-3 bg-white text-sm pt-4">
                 {meds.length === 0 ? (
-                  <p className="text-gray-600">
-                    Tidak ada obat yang diresepkan pada kunjungan ini.
-                  </p>
+                  <div className="mt-4 py-6 flex justify-center">
+                    <p className="text-gray-600 text-center">Tidak ada obat yang diresepkan pada kunjungan ini.</p>
+                  </div>
                 ) : (
                   meds.map((m: any, idx: number) => (
-                    <div
-                      key={m.id ?? idx}
-                      className="rounded-md bg-pink-50 p-4 border border-pink-100 space-y-2"
-                    >
+                    <div key={m.id ?? idx} className="rounded-md bg-pink-50 p-4 border border-pink-100 space-y-2">
                       <div className="flex justify-between items-start">
                         <div>
-                          <p className="font-semibold text-pink-700">
-                            {m.name}
-                          </p>
-                          {m.instructions && (
-                            <p className="text-gray-700 text-sm mt-1">
-                              {m.instructions}
-                            </p>
-                          )}
+                          <p className="font-semibold text-pink-700">{m.name}</p>
+                          {m.instructions && <p className="text-gray-700 text-sm mt-1">{m.instructions}</p>}
                         </div>
                         <Badge variant="secondary">Qty: {m.quantity}</Badge>
                       </div>
@@ -690,10 +709,8 @@ export default function RekamMedisDetailPage() {
           </div>
         </div>
 
-        <div className="mt-8 text-center text-xs text-gray-400">
-          © 2025 RoxyDental.
-        </div>
+        <div className="mt-8 text-center text-xs text-gray-400">  © 2025 POLABDC Dental Clinic.</div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/dashboard/perawat/pasienpr/rekam-medis/page.tsx b/frontend/src/app/dashboard/perawat/pasienpr/rekam-medis/page.tsx
index bb00a89..0c1faee 100644
--- a/frontend/src/app/dashboard/perawat/pasienpr/rekam-medis/page.tsx
+++ b/frontend/src/app/dashboard/perawat/pasienpr/rekam-medis/page.tsx
@@ -1,12 +1,12 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { Search, Eye } from "lucide-react";
+import { Search, Eye, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
 import DoctorNavbar from "@/components/ui/navbarpr";
 import { patientService, PatientWithVisit } from "@/services/patient.service";
 import { dashboardNurseService } from "@/services/dashboard-nurse.service";
@@ -32,16 +32,27 @@ type PatientsApiDirect = {
   pagination?: Pagination;
 };
 
+/**
+ * MedicalRecordsPage (Perawat)
+ * - UI aligned with doctor's polished page (sticky header, card, skeleton, pagination UI)
+ * - BE calls NOT changed: patientService.getPatients(currentPage, limit, searchQuery)
+ * - Debounce search, rows-per-page select, accessible pagination
+ */
+
 export default function MedicalRecordsPage() {
   const router = useRouter();
   const pathname = usePathname();
   const { toast } = useToast();
 
+  // search + debounce
+  const [rawQuery, setRawQuery] = useState("");
   const [searchQuery, setSearchQuery] = useState("");
+  const debounceRef = useRef<number | undefined>(undefined);
+
+  // data & pagination (server-driven)
   const [currentPage, setCurrentPage] = useState(1);
   const [rows, setRows] = useState<PatientWithVisit[]>([]);
   const [loading, setLoading] = useState(false);
-
   const [pagination, setPagination] = useState<Pagination>({
     total: 0,
     page: 1,
@@ -84,9 +95,8 @@ export default function MedicalRecordsPage() {
     })();
   }, []);
 
-  const normalizePatientsResponse = (
-    raw: any
-  ): { list: PatientWithVisit[]; pg: Pagination } => {
+  // Normalize various possible API shapes
+  const normalizePatientsResponse = (raw: any): { list: PatientWithVisit[]; pg: Pagination } => {
     const defaultPg: Pagination = {
       total: 0,
       page: currentPage,
@@ -94,48 +104,66 @@ export default function MedicalRecordsPage() {
       totalPages: 0,
     };
 
-    const w = raw as PatientsApiWrapped;
-    if (w && typeof w === "object" && "data" in w && w.data) {
-      const list = (w.data.patients || []) as PatientWithVisit[];
-      const pg = (w.data.pagination || defaultPg) as Pagination;
+    if (!raw) return { list: [], pg: defaultPg };
+
+    // wrapped: { success, data: { patients, pagination } }
+    if (typeof raw === "object" && "data" in raw && raw.data) {
+      const list = Array.isArray(raw.data.patients) ? raw.data.patients : [];
+      const pg = raw.data.pagination || defaultPg;
       return { list, pg };
     }
 
-    const d = raw as PatientsApiDirect;
-    if (d && typeof d === "object" && ("patients" in d || "pagination" in d)) {
-      const list = (d.patients || []) as PatientWithVisit[];
-      const pg = (d.pagination || defaultPg) as Pagination;
+    // direct: { patients, pagination }
+    if (typeof raw === "object" && ("patients" in raw || "pagination" in raw)) {
+      const list = Array.isArray(raw.patients) ? raw.patients : [];
+      const pg = raw.pagination || defaultPg;
       return { list, pg };
     }
 
+    // array itself
+    if (Array.isArray(raw)) {
+      return {
+        list: raw,
+        pg: { total: raw.length, page: currentPage, limit: pagination.limit || 20, totalPages: Math.max(1, Math.ceil(raw.length / (pagination.limit || 20))) },
+      };
+    }
+
+    // fallback if raw.data is array
+    if (raw && raw.data && Array.isArray(raw.data)) {
+      return {
+        list: raw.data as PatientWithVisit[],
+        pg: { total: raw.data.length, page: currentPage, limit: pagination.limit || 20, totalPages: Math.max(1, Math.ceil(raw.data.length / (pagination.limit || 20))) },
+      };
+    }
+
     return { list: [], pg: defaultPg };
   };
 
-  const fetchMedicalRecords = async () => {
+  // FETCH - BE signature preserved
+  const fetchMedicalRecords = async (p = currentPage, lim = pagination.limit, q = searchQuery) => {
     setLoading(true);
     try {
-      const response = await patientService.getPatients(
-        currentPage,
-        20,
-        searchQuery
-      );
-
+      const response = await patientService.getPatients(p, lim, q);
       const { list, pg } = normalizePatientsResponse(response);
 
       setRows(Array.isArray(list) ? list : []);
-      setPagination(pg);
+      setPagination({
+        total: pg.total || 0,
+        page: pg.page || p,
+        limit: pg.limit || lim,
+        totalPages: pg.totalPages || (pg.total ? Math.max(1, Math.ceil(pg.total / (pg.limit || lim))) : 0),
+      });
     } catch (error: any) {
       toast({
         title: "Error",
-        description:
-          error?.response?.data?.message || "Gagal mengambil data rekam medis",
+        description: error?.response?.data?.message || "Gagal mengambil data rekam medis",
         variant: "destructive",
       });
       setRows([]);
       setPagination({
         total: 0,
         page: 1,
-        limit: 20,
+        limit: lim,
         totalPages: 0,
       });
     } finally {
@@ -143,11 +171,27 @@ export default function MedicalRecordsPage() {
     }
   };
 
+  // debounce rawQuery -> searchQuery
   useEffect(() => {
-    fetchMedicalRecords();
-  }, [currentPage, searchQuery]);
+    window.clearTimeout(debounceRef.current);
+    debounceRef.current = window.setTimeout(() => {
+      setSearchQuery(rawQuery.trim());
+      setCurrentPage(1);
+    }, 300);
 
-  const formatDate = (date: string) => {
+    return () => window.clearTimeout(debounceRef.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rawQuery]);
+
+  // fetch whenever searchQuery or currentPage or pagination.limit changes
+  useEffect(() => {
+    fetchMedicalRecords(currentPage, pagination.limit, searchQuery);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery, currentPage, pagination.limit]);
+
+  // format helpers
+  const formatDate = (date?: string) => {
+    if (!date) return "-";
     try {
       return new Date(date).toLocaleDateString("id-ID", {
         day: "2-digit",
@@ -162,14 +206,11 @@ export default function MedicalRecordsPage() {
   const getNoRm = (row: PatientWithVisit) => row.medicalRecordNumber || "-";
   const getNoId = (row: PatientWithVisit) => row.patientNumber || "-";
   const getNama = (row: PatientWithVisit) => row.fullName || "-";
-
   const getTanggal = (row: PatientWithVisit) => {
     const raw = row.lastVisit;
     return raw ? formatDate(raw) : "-";
   };
-
   const getDiagnosis = (row: PatientWithVisit) => row.lastDiagnosis || "-";
-
   const getTindakan = (row: PatientWithVisit) =>
     row.chiefComplaint?.trim()
       ? row.chiefComplaint
@@ -190,23 +231,58 @@ export default function MedicalRecordsPage() {
     }
   };
 
+  // pagination helpers with ellipsis
+  const totalPages = Math.max(1, pagination.totalPages || Math.ceil((pagination.total || rows.length) / (pagination.limit || 20)));
+  const page = currentPage;
+
+  const getPageNumbers = () => {
+    const total = totalPages || 1;
+    const current = page;
+    const delta = 2;
+    const range: number[] = [];
+    for (let i = Math.max(1, current - delta); i <= Math.min(total, current + delta); i++) {
+      range.push(i);
+    }
+
+    const pages: Array<number | "ellipsis"> = [];
+    if (range[0] > 1) {
+      pages.push(1);
+      if (range[0] > 2) pages.push("ellipsis");
+    }
+    pages.push(...range);
+    if (range[range.length - 1] < total) {
+      if (range[range.length - 1] < total - 1) pages.push("ellipsis");
+      pages.push(total);
+    }
+    return pages;
+  };
+
+  const gotoPage = (p: number) => {
+    const clamped = Math.max(1, Math.min(p, totalPages || 1));
+    setCurrentPage(clamped);
+    const el = document.getElementById("medrec-table-top");
+    if (el) el.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  };
+
+  const pageLabel = `Halaman ${page} dari ${totalPages || 1}`;
+
   return (
     <div className="min-h-screen bg-[#FFF5F7]">
       <DoctorNavbar />
 
-      <div className="pt-6 px-6 max-w-7xl mx-auto space-y-6">
-        <div className="flex gap-4 mb-4">
+      <main className="pt-6 px-6 max-w-7xl mx-auto space-y-6">
+        {/* Tabs */}
+        <div className="flex gap-3 mb-2">
           {tabs.map((tab) => {
             const isActive = pathname.includes(tab.value);
             return (
               <Link
                 key={tab.value}
                 href={tab.href}
-                className={`px-4 py-2 rounded-full font-medium transition ${
-                  isActive
-                    ? "bg-pink-600 text-white shadow-md"
-                    : "bg-white border border-pink-200 text-pink-600 hover:bg-pink-50"
+                className={`px-5 py-2 rounded-full text-sm font-semibold transition ${
+                  isActive ? "bg-linear-to-r from-pink-600 to-pink-500 text-white shadow-md" : "bg-white text-pink-700 border border-pink-100 hover:bg-pink-50"
                 }`}
+                aria-current={isActive ? "page" : undefined}
               >
                 {tab.label}
               </Link>
@@ -214,113 +290,130 @@ export default function MedicalRecordsPage() {
           })}
         </div>
 
-        <h1 className="text-2xl font-bold text-pink-900">Rekam Medis</h1>
-
-        <div className="relative mb-4 w-full max-w-md">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-pink-400" />
-          <Input
-            placeholder="Cari No. RM / No. ID / Nama Pasien"
-            value={searchQuery}
-            onChange={(e) => {
-              setSearchQuery(e.target.value);
-              setCurrentPage(1);
-            }}
-            className="pl-12 py-2 rounded-lg border border-pink-200"
-          />
+        <div className="flex items-center justify-between gap-4 mt-7">
+          <h1 id="medrec-table-top" className="text-2xl font-bold text-pink-900">Rekam Medis</h1>
         </div>
 
-        <div className="overflow-x-auto rounded-lg shadow-md bg-white">
-          <table className="min-w-full divide-y divide-pink-200">
-            <thead className="bg-pink-100 text-pink-900">
-              <tr>
-                {[
-                  "NO. RM",
-                  "NO. ID",
-                  "NAMA PASIEN",
-                  "TANGGAL",
-                  "PERAWAT",
-                  "DIAGNOSIS",
-                  "TINDAKAN",
-                  "AKSI",
-                ].map((head) => (
-                  <th
-                    key={head}
-                    className="px-4 py-3 text-left font-semibold text-sm"
-                  >
-                    {head}
-                  </th>
-                ))}
-              </tr>
-            </thead>
-
-            <tbody className="bg-white divide-y divide-pink-100 text-pink-900">
-              {loading ? (
-                <tr>
-                  <td colSpan={8} className="text-center py-8">
-                    <div className="flex justify-center">
-                      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-pink-600"></div>
-                    </div>
-                  </td>
-                </tr>
-              ) : rows.length === 0 ? (
-                <tr>
-                  <td
-                    colSpan={8}
-                    className="px-4 py-4 text-center text-pink-600"
-                  >
-                    Tidak ada data rekam medis
-                  </td>
+        {/* Search */}
+        <div className="max-w-md">
+          <div className="flex items-center gap-2 bg-white px-3 py-2 rounded-lg border border-pink-100 shadow-sm">
+            <Search className="w-5 h-5 text-pink-400" />
+            <Input
+              placeholder="Cari No. RM / No. ID / Nama Pasien"
+              value={rawQuery}
+              onChange={(e) => setRawQuery(e.target.value)}
+              className="border-none focus-visible:ring-0 placeholder:text-pink-300"
+              aria-label="Cari rekam medis"
+            />
+          </div>
+        </div>
+
+        {/* Card / Table */}
+        <section className="overflow-hidden rounded-2xl bg-white border border-pink-100 shadow-sm">
+          <div className="overflow-x-auto">
+            <table className="min-w-full text-sm text-pink-900" role="table" aria-label="Daftar rekam medis">
+              <thead className="bg-pink-50/80 sticky top-0 z-10">
+                <tr className="border-b border-pink-100">
+                  {["NO. RM", "NO. ID", "NAMA PASIEN", "TANGGAL", "PERAWAT", "DIAGNOSIS", "TINDAKAN", "AKSI"].map((head) => (
+                    <th key={head} scope="col" className="px-4 py-3 text-left font-semibold text-pink-800">
+                      {head}
+                    </th>
+                  ))}
                 </tr>
-              ) : (
-                rows.map((row, idx) => (
-                  <tr key={idx} className="hover:bg-pink-50">
-                    <td className="px-4 py-2">{getNoRm(row)}</td>
-                    <td className="px-4 py-2">{getNoId(row)}</td>
-                    <td className="px-4 py-2 font-medium">{getNama(row)}</td>
-                    <td className="px-4 py-2">{getTanggal(row)}</td>
-                    <td className="px-4 py-2">{currentUserName}</td>
-                    <td className="px-4 py-2">
-                      <Badge variant="secondary">{getDiagnosis(row)}</Badge>
-                    </td>
-                    <td className="px-4 py-2">{getTindakan(row)}</td>
-                    <td className="px-4 py-2">
-                      <Button
-                        size="sm"
-                        variant="outline"
-                        onClick={() => openDetail(row)}
-                        className="flex items-center gap-1"
-                      >
-                        <Eye className="h-4 w-4" />
-                        Detail
-                      </Button>
-                    </td>
+              </thead>
+
+              <tbody>
+                {loading ? (
+                  Array.from({ length: Math.max(pagination.limit, 5) }).map((_, i) => (
+                    <tr key={`sk-${i}`} className="border-b last:border-b-0">
+                      {Array.from({ length: 8 }).map((__, j) => (
+                        <td key={j} className="px-4 py-4">
+                          <div className="h-4 max-w-40 rounded-md bg-pink-100 animate-pulse" />
+                        </td>
+                      ))}
+                    </tr>
+                  ))
+                ) : rows.length === 0 ? (
+                  <tr>
+                    <td colSpan={8} className="px-4 py-10 text-center text-pink-600">Tidak ada data rekam medis</td>
                   </tr>
-                ))
-              )}
-            </tbody>
-          </table>
-        </div>
+                ) : (
+                  rows.map((row, idx) => (
+                    <tr key={row.medicalRecordNumber || row.patientNumber || idx} className={`border-b last:border-b-0 ${idx % 2 === 0 ? "bg-white" : "bg-pink-50/40"} hover:bg-pink-100/60 transition-colors`}>
+                      <td className="px-4 py-3 align-top">{getNoRm(row)}</td>
+                      <td className="px-4 py-3 align-top">{getNoId(row)}</td>
+                      <td className="px-4 py-3 font-medium align-top">{getNama(row)}</td>
+                      <td className="px-4 py-3 align-top">{getTanggal(row)}</td>
+                      <td className="px-4 py-3 align-top">{currentUserName}</td>
+                      <td className="px-4 py-3 align-top"> <Badge variant="secondary" className="font-normal text-sm">{getDiagnosis(row)}</Badge></td>
+                      <td className="px-4 py-3 align-top">{getTindakan(row)}</td>
+                      <td className="px-4 py-3 align-top">
+                        <Button
+                            size="sm"
+                            onClick={() => openDetail(row)}
+                            className="flex items-center gap-1 bg-linear-to-r from-pink-400 to-pink-500 text-white hover:opacity-90 transition"
+                          >
+                            <Eye className="h-4 w-4" />
+                               Detail
+                        </Button>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
 
-        {pagination.totalPages > 1 && (
-          <div className="flex justify-center gap-2 pt-4">
-            {Array.from({ length: pagination.totalPages }).map((_, i) => (
-              <button
-                key={i}
-                onClick={() => setCurrentPage(i + 1)}
-                className={`px-4 py-2 rounded-lg border ${
-                  currentPage === i + 1
-                    ? "bg-pink-600 text-white"
-                    : "bg-white border-pink-200 text-pink-600 hover:bg-pink-50"
-                }`}
-              >
-                {i + 1}
+          {/* Pagination Footer */}
+          <div className="flex flex-col sm:flex-row items-center justify-between gap-3 px-4 py-3 border-t border-pink-100 bg-pink-50/30">
+            <div className="text-sm text-pink-700">
+              <span className="font-medium">{pagination.total || rows.length || 0}</span> rekam medis — {pageLabel}
+            </div>
+
+            <div className="flex items-center gap-2">
+              <button onClick={() => gotoPage(1)} disabled={page <= 1} aria-label="Halaman pertama" className={`p-2 rounded-md border text-sm ${page <= 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}>
+                <ChevronsLeft className="w-4 h-4" />
+              </button>
+
+              <button onClick={() => gotoPage(page - 1)} disabled={page <= 1} aria-label="Sebelumnya" className={`p-2 rounded-md border text-sm ${page <= 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}>
+                <ChevronLeft className="w-4 h-4" />
               </button>
-            ))}
+
+              <nav aria-label="Paginasi" className="flex items-center gap-1">
+                {getPageNumbers().map((p, i) =>
+                  p === "ellipsis" ? (
+                    <span key={`ell-${i}`} className="px-2 text-pink-400">…</span>
+                  ) : (
+                    <button key={`pg-${p}`} onClick={() => gotoPage(p as number)} aria-current={page === p ? "true" : undefined} className={`w-9 h-9 rounded-md text-sm font-medium border flex items-center justify-center focus:outline-none ${page === p ? "bg-pink-600 text-white border-pink-600 shadow" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}>
+                      {p}
+                    </button>
+                  )
+                )}
+              </nav>
+
+              <button onClick={() => gotoPage(page + 1)} disabled={page >= totalPages} aria-label="Selanjutnya" className={`p-2 rounded-md border text-sm ${page >= totalPages ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}>
+                <ChevronRight className="w-4 h-4" />
+              </button>
+
+              <button onClick={() => gotoPage(totalPages)} disabled={page >= totalPages} aria-label="Halaman terakhir" className={`p-2 rounded-md border text-sm ${page >= totalPages ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-white border-pink-200 text-pink-600 hover:bg-pink-100"}`}>
+                <ChevronsRight className="w-4 h-4" />
+              </button>
+
+              <div className="flex items-center gap-2 ml-2">
+                <label htmlFor="goto-medrec" className="sr-only">Lompat ke halaman</label>
+                <input id="goto-medrec" type="number" min={1} max={totalPages || 1} placeholder="Go" onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    const v = Number((e.target as HTMLInputElement).value);
+                    if (!isNaN(v)) gotoPage(v);
+                  }
+                }} className="w-16 px-2 py-1 rounded-md border border-pink-100 bg-white text-sm text-pink-700 focus:outline-none" />
+              </div>
+            </div>
           </div>
-        )}
-      </div>
+        </section>
+      </main>
 
-      <div className="h-10"></div>
+      <div className="h-10" />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/dashboard/perawat/pembayaran/page.tsx b/frontend/src/app/dashboard/perawat/pembayaran/page.tsx
new file mode 100644
index 0000000..b021ce6
--- /dev/null
+++ b/frontend/src/app/dashboard/perawat/pembayaran/page.tsx
@@ -0,0 +1,267 @@
+"use client";
+
+import React, { useMemo, useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Search } from "lucide-react";
+import InputPembayaran from "@/components/ui/addpembayaran";
+
+/* =======================
+   TYPE DATA
+======================= */
+interface Payment {
+  id: string;
+  patientName: string;
+  visitNumber: string;
+  totalBill: number;
+  paymentMethod: string;
+  amountPaid: number;
+  change: number;
+  note?: string;
+  createdAt: string;
+}
+
+interface PaymentForm {
+  visitId: string;
+  totalTagihan: number;
+  metode: string;
+  jumlahBayar: number;
+  catatan: string;
+}
+
+/* =======================
+   CONSTANT
+======================= */
+const PAGE_SIZE = 10;
+
+export default function PaymentPage() {
+  const [payments, setPayments] = useState<Payment[]>([
+    {
+      id: "1",
+      patientName: "Intan Nuraeini",
+      visitNumber: "KJ-2025-001",
+      totalBill: 250000,
+      paymentMethod: "Cash",
+      amountPaid: 300000,
+      change: 50000,
+      note: "Lunas",
+      createdAt: "2025-12-01T10:20:00",
+    },
+  ]);
+
+  const [search, setSearch] = useState("");
+  const [page, setPage] = useState(1);
+  const [showModal, setShowModal] = useState(false);
+
+  /* =======================
+     FILTER
+  ======================= */
+  const filteredPayments = useMemo(() => {
+    return payments.filter(
+      (p) =>
+        p.patientName.toLowerCase().includes(search.toLowerCase()) ||
+        p.visitNumber.toLowerCase().includes(search.toLowerCase())
+    );
+  }, [search, payments]);
+
+  const totalPages = Math.max(1, Math.ceil(filteredPayments.length / PAGE_SIZE));
+
+  const displayedPayments = filteredPayments.slice(
+    (page - 1) * PAGE_SIZE,
+    page * PAGE_SIZE
+  );
+
+  /* =======================
+     TOTAL
+  ======================= */
+  const total = filteredPayments.reduce(
+    (acc, p) => {
+      acc.totalBill += p.totalBill;
+      acc.amountPaid += p.amountPaid;
+      acc.change += p.change;
+      return acc;
+    },
+    { totalBill: 0, amountPaid: 0, change: 0 }
+  );
+
+  const formatCurrency = (v: number) =>
+    `Rp ${v.toLocaleString("id-ID")}`;
+
+  /* =======================
+     SAVE PEMBAYARAN
+  ======================= */
+  const handleSavePayment = (data: PaymentForm) => {
+    const newPayment: Payment = {
+      id: Date.now().toString(),
+      patientName: data.visitId, // sementara dari input
+      visitNumber: data.visitId,
+      totalBill: data.totalTagihan,
+      paymentMethod: data.metode,
+      amountPaid: data.jumlahBayar,
+      change: Math.max(data.jumlahBayar - data.totalTagihan, 0),
+      note: data.catatan,
+      createdAt: new Date().toISOString(),
+    };
+
+    setPayments((prev) => [newPayment, ...prev]);
+    setShowModal(false);
+  };
+
+  /* =======================
+     UI
+  ======================= */
+  return (
+    <div className="min-h-screen bg-[#FFF5F7] p-6">
+      <div className="max-w-6xl mx-auto">
+        {/* HEADER */}
+        <div className="flex justify-between items-center mb-4">
+          <h1 className="text-xl font-bold text-pink-600">
+            Data Pembayaran
+          </h1>
+
+          <Button
+            className="bg-pink-600 hover:bg-pink-700 text-white text-sm"
+            onClick={() => setShowModal(true)}
+          >
+            + Tambah Pembayaran
+          </Button>
+        </div>
+
+        {/* SEARCH */}
+        <Card className="mb-4">
+          <CardContent className="p-4">
+            <div className="relative max-w-sm">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-pink-400" />
+              <Input
+                placeholder="Cari nama pasien / nomor kunjungan"
+                value={search}
+                onChange={(e) => {
+                  setSearch(e.target.value);
+                  setPage(1);
+                }}
+                className="pl-10 border-pink-300"
+              />
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* TABLE */}
+        <Card className="shadow-md overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="min-w-full text-xs">
+              <thead className="bg-pink-100">
+                <tr>
+                  {[
+                    "TANGGAL",
+                    "PASIEN",
+                    "NO KUNJUNGAN",
+                    "TOTAL TAGIHAN",
+                    "METODE",
+                    "JUMLAH BAYAR",
+                    "KEMBALIAN",
+                    "CATATAN",
+                  ].map((h, i) => (
+                    <th
+                      key={i}
+                      className="px-3 py-2 text-left font-semibold text-pink-900"
+                    >
+                      {h}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+
+              <tbody className="bg-white divide-y divide-pink-100">
+                {displayedPayments.map((p) => (
+                  <tr key={p.id} className="hover:bg-pink-50">
+                    <td className="px-3 py-2">
+                      {new Date(p.createdAt).toLocaleDateString("id-ID")}
+                    </td>
+                    <td className="px-3 py-2 font-medium">
+                      {p.patientName}
+                    </td>
+                    <td className="px-3 py-2">{p.visitNumber}</td>
+                    <td className="px-3 py-2 text-right">
+                      {formatCurrency(p.totalBill)}
+                    </td>
+                    <td className="px-3 py-2">{p.paymentMethod}</td>
+                    <td className="px-3 py-2 text-right">
+                      {formatCurrency(p.amountPaid)}
+                    </td>
+                    <td className="px-3 py-2 text-right">
+                      {formatCurrency(p.change)}
+                    </td>
+                    <td className="px-3 py-2">
+                      {p.note || "-"}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+
+              <tfoot className="bg-pink-50 font-semibold">
+                <tr>
+                  <td colSpan={3} className="px-3 py-2">
+                    TOTAL
+                  </td>
+                  <td className="px-3 py-2 text-right">
+                    {formatCurrency(total.totalBill)}
+                  </td>
+                  <td />
+                  <td className="px-3 py-2 text-right">
+                    {formatCurrency(total.amountPaid)}
+                  </td>
+                  <td className="px-3 py-2 text-right">
+                    {formatCurrency(total.change)}
+                  </td>
+                  <td />
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+
+          {/* PAGINATION */}
+          <div className="flex justify-end items-center gap-3 px-4 py-3">
+            <Button
+              size="sm"
+              variant="outline"
+              disabled={page === 1}
+              onClick={() => setPage(page - 1)}
+            >
+              Prev
+            </Button>
+            <span className="text-xs text-pink-600">
+              Page {page} of {totalPages}
+            </span>
+            <Button
+              size="sm"
+              variant="outline"
+              disabled={page === totalPages}
+              onClick={() => setPage(page + 1)}
+            >
+              Next
+            </Button>
+          </div>
+        </Card>
+      </div>
+
+      {/* =======================
+          MODAL INPUT PEMBAYARAN
+      ======================= */}
+      {showModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center px-4">
+          <div
+            className="absolute inset-0 bg-black/40"
+            onClick={() => setShowModal(false)}
+          />
+          <div className="relative z-10 w-full max-w-3xl">
+            <InputPembayaran
+              onSave={handleSavePayment}
+              onClose={() => setShowModal(false)}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/app/dashboard/perawat/profilpr/passwordpr/page.tsx b/frontend/src/app/dashboard/perawat/profilpr/passwordpr/page.tsx
index d5aafc9..62ffa8d 100644
--- a/frontend/src/app/dashboard/perawat/profilpr/passwordpr/page.tsx
+++ b/frontend/src/app/dashboard/perawat/profilpr/passwordpr/page.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
-import { Eye, EyeOff, Shield, Loader2 } from "lucide-react";
+import { Eye, EyeOff, Shield, Loader2, CheckCircle2, X, AlertCircle } from "lucide-react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import DoctorNavbar from "@/components/ui/navbarpr";
 import SettingsSidebar from "@/components/ui/SettingsSidebarpr";
@@ -43,6 +43,17 @@ export default function SettingsChangePassword() {
     confirmPassword: false,
   });
 
+  // Toast state (same as dokter file, optional)
+  const [toast, setToast] = useState<{ type: "success" | "error" | null; message: string }>({
+    type: null,
+    message: "",
+  });
+
+  const showToast = (type: "success" | "error", message: string) => {
+    setToast({ type, message });
+    setTimeout(() => setToast({ type: null, message: "" }), 3500);
+  };
+
   const validateField = (type: string, value: string) => {
     if (type === "old") return value ? "" : "Password saat ini harus diisi";
     if (type === "new") {
@@ -68,19 +79,12 @@ export default function SettingsChangePassword() {
     const newError = validateField("new", passwordData.newPassword);
     const confirmError = validateField("confirm", passwordData.confirmPassword);
 
-    setPasswordErrors({
-      oldPassword: oldError,
-      newPassword: newError,
-      confirmPassword: confirmError,
-    });
+    setPasswordErrors({ oldPassword: oldError, newPassword: newError, confirmPassword: confirmError });
 
     if (oldError || newError || confirmError) {
-      setTouched({
-        oldPassword: true,
-        newPassword: true,
-        confirmPassword: true,
-      });
+      setTouched({ oldPassword: true, newPassword: true, confirmPassword: true });
       setConfirmDialogOpen(false);
+      showToast("error", "Periksa kembali syarat password sebelum mengubah.");
       return;
     }
 
@@ -94,28 +98,33 @@ export default function SettingsChangePassword() {
       });
 
       if (response.success) {
+        showToast("success", "Password berhasil diperbarui.");
         setSuccessDialogOpen(true);
         setPasswordData({ oldPassword: "", newPassword: "", confirmPassword: "" });
         setTouched({ oldPassword: false, newPassword: false, confirmPassword: false });
         setPasswordErrors({ oldPassword: "", newPassword: "", confirmPassword: "" });
+      } else {
+        setErrorMessage(response.message || "Gagal mengganti password");
+        setErrorDialogOpen(true);
+        showToast("error", response.message || "Gagal mengganti password");
       }
     } catch (error: any) {
       console.error("Change password error:", error);
-      
-      if (error.message === "Password saat ini salah") {
+
+      if (error?.message === "Password saat ini salah") {
         setErrorMessage("Password saat ini yang Anda masukkan salah");
-        setPasswordErrors({
-          ...passwordErrors,
-          oldPassword: "Password saat ini salah"
-        });
+        setPasswordErrors({ ...passwordErrors, oldPassword: "Password saat ini salah" });
         setTouched({ ...touched, oldPassword: true });
-      } else if (error.errors) {
+        showToast("error", "Password saat ini salah.");
+      } else if (error?.errors) {
         const firstError = error.errors[0];
         setErrorMessage(firstError.message || "Validasi gagal");
+        showToast("error", firstError.message || "Validasi gagal");
       } else {
-        setErrorMessage(error.message || "Terjadi kesalahan saat mengganti password");
+        setErrorMessage(error?.message || "Terjadi kesalahan saat mengganti password");
+        showToast("error", error?.message || "Terjadi kesalahan saat mengganti password");
       }
-      
+
       setErrorDialogOpen(true);
     } finally {
       setLoading(false);
@@ -124,96 +133,138 @@ export default function SettingsChangePassword() {
 
   const handleSuccessClose = () => {
     setSuccessDialogOpen(false);
-    // Redirect ke dashboard utama perawat
     router.push("/dashboard/perawat/mainpr");
   };
 
+  // password criteria for checklist
+  const newPw = passwordData.newPassword || "";
+  const criteria = {
+    minLength: newPw.length >= 6,
+    hasLower: /[a-z]/.test(newPw),
+    hasUpper: /[A-Z]/.test(newPw),
+    hasNumber: /\d/.test(newPw),
+    hasSymbol: /[\W_]/.test(newPw),
+    notSameAsOld: newPw !== "" && newPw !== passwordData.oldPassword,
+  };
+
   return (
-    <div className="min-h-screen bg-[#FFF5F7]">
+    <div className="min-h-screen bg-linear-to-b from-[#FFF5F7] to-white">
       <DoctorNavbar />
+
       <div className="pt-6 px-4 lg:px-8">
-        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6 items-start">
           <SettingsSidebar activeMenu={activeMenu} setActiveMenu={setActiveMenu} />
 
-          <div className="lg:col-span-3 mt-6">
-            <Card className="shadow-xl rounded-2xl border border-pink-100">
-              <CardHeader className="bg-linear-to-r from-pink-100 to-pink-50 rounded-t-2xl px-6 py-6">
-                <h2 className="text-2xl font-bold text-pink-900">Ganti Password</h2>
-                <p className="text-sm text-pink-600 mt-1">
-                  Perbarui password untuk keamanan akun Anda
-                </p>
+          <div className="lg:col-span-3">
+            <Card className="shadow-2xl rounded-2xl border border-pink-100 bg-white overflow-hidden">
+              <CardHeader className="px-8 py-6 border-b border-pink-100 bg-linear-to-r from-pink-50 via-white to-white">
+                <div className="flex items-center justify-between gap-4">
+                  <div className="flex items-center gap-4">
+                    <div className="w-12 h-12 rounded-lg bg-pink-100 flex items-center justify-center shadow-inner">
+                      <Shield className="w-6 h-6 text-pink-600" />
+                    </div>
+                    <div>
+                      <h2 className="text-2xl font-extrabold text-pink-900 tracking-tight">Ganti Password</h2>
+                      <p className="text-sm text-pink-600 mt-1">Demi keamanan akun, gunakan password yang kuat dan unik</p>
+                    </div>
+                  </div>
+                  <div className="text-right">
+                    <p className="text-xs text-gray-500">Terakhir diperbarui</p>
+                    <p className="text-sm font-medium text-pink-700">{new Date().toLocaleDateString('id-ID')}</p>
+                  </div>
+                </div>
               </CardHeader>
 
               <CardContent className="p-8 space-y-6">
                 <div className="space-y-5">
-                  {["old", "new", "confirm"].map((type, idx) => {
-                    const isOld = type === "old";
-                    const isNew = type === "new";
-                    const isConfirm = type === "confirm";
+                 {(['old', 'new', 'confirm'] as const).map((type, idx) => {
+  const isOld = type === 'old';
+
+                    const isNew = type === 'new';
+                    const isConfirm = type === 'confirm';
                     const show = isOld ? showOldPassword : isNew ? showNewPassword : showConfirmPassword;
-                    const setter = isOld
-                      ? setShowOldPassword
-                      : isNew
-                      ? setShowNewPassword
-                      : setShowConfirmPassword;
-                    const value = isOld
-                      ? passwordData.oldPassword
-                      : isNew
-                      ? passwordData.newPassword
-                      : passwordData.confirmPassword;
-                    const label = isOld
-                      ? "Password Saat Ini"
-                      : isNew
-                      ? "Password Baru"
-                      : "Konfirmasi Password Baru";
-                    const placeholder = isOld
-                      ? "Masukkan password saat ini"
-                      : isNew
-                      ? "Masukkan password baru"
-                      : "Konfirmasi password baru";
-
-                    const key = type === "old" ? "oldPassword" : type === "new" ? "newPassword" : "confirmPassword";
+                    const setter = isOld ? setShowOldPassword : isNew ? setShowNewPassword : setShowConfirmPassword;
+                    const value = isOld ? passwordData.oldPassword : isNew ? passwordData.newPassword : passwordData.confirmPassword;
+                    const label = isOld ? 'Password Saat Ini' : isNew ? 'Password Baru' : 'Konfirmasi Password Baru';
+                    const placeholder = isOld ? 'Masukkan password saat ini' : isNew ? 'Masukkan password baru' : 'Konfirmasi password baru';
+
+                    const key = type === 'old' ? 'oldPassword' : type === 'new' ? 'newPassword' : 'confirmPassword';
                     const error = passwordErrors[key];
                     const showError = touched[key] && error;
 
                     return (
-                      <div key={type} className={idx === 0 ? "mt-4" : ""}>
+                      <div key={type} className={`${idx === 0 ? 'mt-4' : ''}`}>
                         <Label className="text-pink-900 font-semibold mb-1">{label}</Label>
                         <div className="relative">
                           <Input
-                            type={show ? "text" : "password"}
+                            aria-label={label}
+                            type={show ? 'text' : 'password'}
                             placeholder={placeholder}
                             value={value}
                             onChange={(e) => {
-                              const fieldKey = type + "Password";
+                              const fieldKey = type + 'Password';
                               setPasswordData({ ...passwordData, [fieldKey]: e.target.value });
                               setTouched({ ...touched, [fieldKey]: true });
-                              setPasswordErrors({
-                                ...passwordErrors,
-                                [fieldKey]: validateField(type, e.target.value),
-                              });
+                              setPasswordErrors({ ...passwordErrors, [fieldKey]: validateField(type, e.target.value) });
                             }}
-                            className={`border-pink-300 pr-10 focus:border-pink-500 focus:ring-1 focus:ring-pink-200 ${
-                              showError ? "border-red-500" : ""
-                            }`}
+                            className={`border-pink-200 pr-12 focus:border-pink-500 focus:ring-2 focus:ring-pink-100 rounded-lg transition-shadow duration-150 shadow-sm ${showError ? 'border-red-400 ring-red-50' : 'hover:shadow-md'}`}
                             disabled={loading}
                           />
+
                           <button
                             type="button"
                             onClick={() => setter(!show)}
-                            className="absolute right-3 top-1/2 -translate-y-1/2 text-pink-400 hover:text-pink-600"
+                            className="absolute right-3 top-1/2 -translate-y-1/2 text-pink-400 hover:text-pink-600 focus:outline-none"
+                            aria-label={`Toggle ${label}`}
                             disabled={loading}
                           >
                             {show ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                           </button>
                         </div>
+
                         {showError && <p className="text-red-600 text-xs mt-1">{error}</p>}
+
+                        {isNew && (
+                          <div className="mt-3 bg-pink-50 border border-pink-100 rounded-md p-3 text-sm">
+                            <div className="font-semibold text-pink-800 mb-2">Syarat Password</div>
+                            <ul className="space-y-1">
+                              <li className="flex items-center gap-2">
+                                {criteria.minLength ? <CheckCircle2 className="w-4 h-4 text-emerald-600" /> : <X className="w-4 h-4 text-red-400" />}
+                                <span className="text-xs">Minimal 6 karakter</span>
+                              </li>
+                              <li className="flex items-center gap-2">
+                                {criteria.hasUpper ? <CheckCircle2 className="w-4 h-4 text-emerald-600" /> : <X className="w-4 h-4 text-red-400" />}
+                                <span className="text-xs">Huruf besar (A-Z)</span>
+                              </li>
+                              <li className="flex items-center gap-2">
+                                {criteria.hasLower ? <CheckCircle2 className="w-4 h-4 text-emerald-600" /> : <X className="w-4 h-4 text-red-400" />}
+                                <span className="text-xs">Huruf kecil (a-z)</span>
+                              </li>
+                              <li className="flex items-center gap-2">
+                                {criteria.hasNumber ? <CheckCircle2 className="w-4 h-4 text-emerald-600" /> : <X className="w-4 h-4 text-red-400" />}
+                                <span className="text-xs">Angka (0-9)</span>
+                              </li>
+                              <li className="flex items-center gap-2">
+                                {criteria.hasSymbol ? <CheckCircle2 className="w-4 h-4 text-emerald-600" /> : <X className="w-4 h-4 text-red-400" />}
+                                <span className="text-xs">Simbol (mis. !@#)</span>
+                              </li>
+                              <li className="flex items-center gap-2">
+                                {criteria.notSameAsOld ? <CheckCircle2 className="w-4 h-4 text-emerald-600" /> : <X className="w-4 h-4 text-red-400" />}
+                                <span className="text-xs">Tidak sama dengan password lama</span>
+                              </li>
+                              <li className="flex items-start gap-2">
+                                <AlertCircle className="w-4 h-4 text-yellow-600 mt-0.5" />
+                                <span className="text-xs">Jangan gunakan informasi pribadi yang mudah ditebak (nama, tanggal lahir, dsb.). <span className="italic">(Petunjuk)</span></span>
+                              </li>
+                            </ul>
+                          </div>
+                        )}
                       </div>
                     );
                   })}
                 </div>
 
-                <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
+                <div className="bg-blue-50 border border-blue-100 rounded-xl p-4">
                   <div className="flex items-start gap-3">
                     <Shield className="w-6 h-6 text-blue-600 mt-1 shrink-0" />
                     <div>
@@ -226,7 +277,7 @@ export default function SettingsChangePassword() {
                           "Jangan gunakan password yang sama untuk akun lain",
                         ].map((tip, idx) => (
                           <li key={idx} className="text-sm text-blue-800 flex items-start gap-2">
-                            <span className="text-blue-600 mt-1">•</span>
+                            <span className="text-blue-600 mt-0.5">•</span>
                             <span>{tip}</span>
                           </li>
                         ))}
@@ -237,9 +288,14 @@ export default function SettingsChangePassword() {
 
                 <div className="flex justify-end">
                   <Button
-                    className="bg-pink-600 hover:bg-pink-700 text-white px-8 py-2 rounded-lg shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
+                    className="bg-pink-600 hover:bg-pink-700 text-white px-8 py-2 rounded-lg shadow-md disabled:opacity-50 disabled:cursor-not-allowed transform transition-transform active:scale-95"
                     onClick={() => setConfirmDialogOpen(true)}
-                    disabled={loading || !passwordData.oldPassword || !passwordData.newPassword || !passwordData.confirmPassword}
+                    disabled={
+                      loading ||
+                      !passwordData.oldPassword ||
+                      !passwordData.newPassword ||
+                      !passwordData.confirmPassword
+                    }
                   >
                     {loading ? (
                       <>
@@ -256,36 +312,21 @@ export default function SettingsChangePassword() {
           </div>
         </div>
 
-        <p className="text-center text-sm text-pink-600 mt-8">
-          © 2025 RosyDental. Platform untuk klinik gigi modern
-        </p>
+        <p className="text-center text-sm text-pink-600 mt-8">© 2025 POLADC — All rights reserved</p>
       </div>
 
       {/* Konfirmasi Dialog */}
       <Dialog open={confirmDialogOpen} onOpenChange={setConfirmDialogOpen}>
         <DialogContent className="max-w-md">
           <DialogHeader>
-            <DialogTitle className="text-center text-pink-900">
-              Yakin ingin mengganti password?
-            </DialogTitle>
+            <DialogTitle className="text-center text-pink-900">Yakin ingin mengganti password?</DialogTitle>
           </DialogHeader>
-          <p className="text-center text-gray-600 text-sm">
-            Pastikan Anda mengingat password baru yang telah dibuat
-          </p>
+          <p className="text-center text-gray-600 text-sm">Pastikan Anda mengingat password baru yang telah dibuat</p>
           <div className="flex gap-3 justify-center pt-4">
-            <Button
-              variant="outline"
-              onClick={() => setConfirmDialogOpen(false)}
-              className="px-8 border-pink-300 text-pink-700"
-              disabled={loading}
-            >
+            <Button variant="outline" onClick={() => setConfirmDialogOpen(false)} className="px-8 border-pink-300 text-pink-700" disabled={loading}>
               Batal
             </Button>
-            <Button
-              className="bg-pink-600 hover:bg-pink-700 text-white px-8 disabled:opacity-50"
-              onClick={handleConfirmChange}
-              disabled={loading}
-            >
+            <Button className="bg-pink-600 hover:bg-pink-700 text-white px-8 disabled:opacity-50" onClick={handleConfirmChange} disabled={loading}>
               {loading ? (
                 <>
                   <Loader2 className="w-4 h-4 mr-2 animate-spin" />
@@ -301,32 +342,16 @@ export default function SettingsChangePassword() {
 
       {/* Dialog Sukses */}
       <Dialog open={successDialogOpen} onOpenChange={setSuccessDialogOpen}>
-        <DialogContent className="max-w-md">
-          <div className="text-center p-6">
-            <div className="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="w-10 h-10 text-green-600"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                strokeWidth={2}
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
-              </svg>
-            </div>
-            <h3 className="text-xl font-bold text-gray-900 mb-2">Password Berhasil Diganti!</h3>
-            <p className="text-sm text-gray-600 mb-6">
-              Password Anda telah berhasil diperbarui. Silakan gunakan password baru untuk login selanjutnya.
-            </p>
-            <div className="flex gap-3 justify-center">
-              <Button
-                className="bg-pink-600 hover:bg-pink-700 text-white px-6"
-                onClick={handleSuccessClose}
-              >
-                Kembali ke Dashboard
-              </Button>
-            </div>
+        <DialogContent className="max-w-md flex justify-center items-center p-6">
+          <div className="text-center bg-pink-100 rounded-2xl shadow-lg p-6 w-full">
+            <svg xmlns="http://www.w3.org/2000/svg" className="mx-auto w-16 h-16 text-pink-600 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+            <h3 className="text-xl font-bold text-pink-700 mb-2">Password Berhasil Diganti!</h3>
+            <p className="text-sm text-gray-600 mb-4">Password Anda telah berhasil diperbarui</p>
+            <Button className="bg-pink-600 hover:bg-pink-700 text-white px-6 py-2 rounded-lg mt-2" onClick={handleSuccessClose}>
+              Kembali ke Dashboard
+            </Button>
           </div>
         </DialogContent>
       </Dialog>
@@ -335,35 +360,44 @@ export default function SettingsChangePassword() {
       <Dialog open={errorDialogOpen} onOpenChange={setErrorDialogOpen}>
         <DialogContent className="max-w-md">
           <DialogHeader>
-            <DialogTitle className="text-center text-red-900">
-              Gagal Mengganti Password
-            </DialogTitle>
+            <DialogTitle className="text-center text-red-900">Gagal Mengganti Password</DialogTitle>
           </DialogHeader>
           <div className="text-center py-4">
-            <div className="mx-auto w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="w-10 h-10 text-red-600"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                strokeWidth={2}
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </div>
-            <p className="text-gray-700 mb-4">{errorMessage}</p>
+            <svg xmlns="http://www.w3.org/2000/svg" className="mx-auto w-16 h-16 text-red-600 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+            <p className="text-gray-700">{errorMessage}</p>
           </div>
-          <div className="flex justify-center">
-            <Button
-              className="bg-red-600 hover:bg-red-700 text-white px-8"
-              onClick={() => setErrorDialogOpen(false)}
-            >
+          <div className="flex justify-center pt-2">
+            <Button className="bg-red-600 hover:bg-red-700 text-white px-8" onClick={() => setErrorDialogOpen(false)}>
               Tutup
             </Button>
           </div>
         </DialogContent>
       </Dialog>
+
+      {/* Toast */}
+      {toast.type && (
+        <div className="fixed right-6 top-6 z-50">
+          <div
+            className={`max-w-xs w-full rounded-lg shadow-lg p-3 flex items-start gap-3 transform transition-transform duration-200 ${
+              toast.type === "success" ? "bg-emerald-50 border border-emerald-200" : "bg-red-50 border border-red-200"
+            }`}
+            role="status"
+            aria-live="polite"
+          >
+            <div className="pt-1">
+              {toast.type === "success" ? <CheckCircle2 className="w-6 h-6 text-emerald-600" /> : <X className="w-6 h-6 text-red-600" />}
+            </div>
+            <div className="text-sm">
+              <div className={`${toast.type === "success" ? "text-emerald-800 font-medium" : "text-red-800 font-medium"}`}>
+                {toast.type === "success" ? "Berhasil" : "Gagal"}
+              </div>
+              <div className="text-gray-700">{toast.message}</div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/forgot-password/page.tsx b/frontend/src/app/forgot-password/page.tsx
index 0342781..59e74fb 100644
--- a/frontend/src/app/forgot-password/page.tsx
+++ b/frontend/src/app/forgot-password/page.tsx
@@ -2,30 +2,31 @@
 
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { FaEnvelope, FaCheckCircle } from "react-icons/fa";
+import { FaEnvelope } from "react-icons/fa";
 import api from "@/lib/api";
 import Image from "next/image";
 
 export default function ForgotPasswordPage() {
   const router = useRouter();
+
   const [email, setEmail] = useState("");
   const [step, setStep] = useState<"input" | "sent">("input");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
+  const [resendSuccess, setResendSuccess] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");
 
     if (!email.includes("@")) {
-      setError("Masukkan email yang valid");
+      setError("Masukkan alamat email yang valid");
       return;
     }
 
     setLoading(true);
-
     try {
-      await api.post('/auth/forgot-password', { email });
+      await api.post("/auth/forgot-password", { email });
       setStep("sent");
     } catch (err: any) {
       setError(err.response?.data?.message || "Gagal mengirim email reset");
@@ -37,136 +38,156 @@ export default function ForgotPasswordPage() {
   const handleResend = async () => {
     setLoading(true);
     setError("");
+    setResendSuccess(false);
 
     try {
-      await api.post('/auth/forgot-password', { email });
+      await api.post("/auth/forgot-password", { email });
+      setResendSuccess(true);
+
+      setTimeout(() => {
+        setResendSuccess(false);
+      }, 3000);
     } catch (err: any) {
-      setError(err.response?.data?.message || "Gagal mengirim email reset");
+      setError(err.response?.data?.message || "Gagal mengirim ulang email");
     } finally {
       setLoading(false);
     }
   };
 
   return (
-    <div className="relative flex flex-col items-center justify-center min-h-screen text-center overflow-hidden font-poppins bg-linear-to-br from-pink-100 via-pink-200 to-pink-300">
-
-      <div className="absolute -top-20 left-[-100px] w-[260px] h-[260px] bg-pink-200/30 rounded-full blur-[60px] animate-float-slow"></div>
-      <div className="absolute bottom-[-120px] right-[-100px] w-[300px] h-[300px] bg-pink-300/30 rounded-full blur-[60px] animate-float-slow delay-2000"></div>
-
-      {step === "input" && (
-        <div className="w-full max-w-[400px] transition-all duration-700 opacity-100 translate-y-0">
-          <div className="
-          mx-auto mb-6
-          w-[90px] h-[90px]
-          flex items-center justify-center
-          rounded-full
-          bg-linear-to-br from-pink-400 via-pink-500 to-pink-600
-          shadow-lg
-          animate-pulse
-        ">
-          <Image
-            src="/images/putih.png"
-            alt="Logo Gigi"
-            width={48}
-            height={48}
-            className="object-contain"
-            priority
-          />
-          </div>
-
-
-          <h2 className="text-2xl font-bold text-pink-600 drop-shadow-sm mb-2">Lupa Password?</h2>
-          <p className="text-pink-500 text-sm opacity-80 mb-6">
-            Masukkan email kamu untuk menerima tautan reset password
-          </p>
-
-          {error && (
-            <div className="mb-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-xl text-sm">
-              {error}
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-pink-100 via-pink-200 to-pink-300 px-4 font-poppins">
+      <div className="relative w-full max-w-[420px]">
+        {/* Background blur */}
+        <div className="absolute -left-24 -top-20 w-64 h-64 bg-pink-200/30 rounded-full blur-3xl" />
+        <div className="absolute -right-24 bottom-[-40px] w-72 h-72 bg-pink-300/30 rounded-full blur-3xl" />
+
+        {/* ================= INPUT STEP ================= */}
+        {step === "input" && (
+          <div className="relative bg-white/60 backdrop-blur-md rounded-3xl shadow-lg p-6 md:p-8 border border-white/30">
+            <div className="flex flex-col items-center mb-6">
+              <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-pink-400 to-pink-600 flex items-center justify-center shadow">
+                <Image
+                  src="/images/putih.png"
+                  alt="Logo"
+                  width={36}
+                  height={36}
+                  priority
+                />
+              </div>
+
+              <h1 className="mt-4 text-[22px] font-semibold tracking-tight text-pink-700">
+                Lupa Password
+              </h1>
+              <p className="mt-1 text-[13px] text-slate-600 text-center leading-relaxed">
+                Masukkan email terdaftar untuk menerima tautan reset password
+              </p>
             </div>
-          )}
-
-          <form onSubmit={handleSubmit} className="text-left bg-white/40 backdrop-blur-md p-6 rounded-2xl shadow-xl">
-            <label className="text-pink-500 text-sm font-medium">Email</label>
-            <div className="flex items-center bg-white/70 rounded-xl mt-1 mb-5 px-3 py-2 shadow-inner focus-within:ring-2 focus-within:ring-pink-400 transition-all">
-              <FaEnvelope className="text-pink-400 mr-2" />
-             <input
-              type="email"
-              className="
-                w-full py-2 px-1
-                outline-none bg-transparent
-                text-gray-800
-                placeholder-pink-300
-              "
-              placeholder="Masukkan email kamu"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              disabled={loading}
-            />
-            </div>
-
-            <button
-              type="submit"
-              disabled={loading}
-              className="w-full py-3 text-white font-bold rounded-xl shadow-lg bg-linear-to-r from-pink-400 via-pink-500 to-pink-600 hover:from-pink-500 hover:to-pink-400 hover:scale-105 transition-all duration-300 drop-shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              {loading ? "Mengirim..." : "Kirim Email"}
-            </button>
-          </form>
-
-          <button
-            onClick={() => router.push("/login")}
-            className="mt-5 text-pink-600 font-semibold text-sm hover:underline drop-shadow-sm"
-          >
-            Kembali ke Login
-          </button>
-        </div>
-      )}
-
-      {step === "sent" && (
-        <div className="w-full max-w-[440px] transition-all duration-700 opacity-100 translate-y-0">
-          <div className="mx-auto mb-6 w-[110px] h-[110px] flex items-center justify-center rounded-full text-white text-4xl shadow-xl bg-linear-to-br from-pink-400 via-pink-500 to-pink-600 animate-pulse drop-shadow-sm">
-            <FaCheckCircle />
-          </div>
-
-          <h2 className="text-2xl font-bold text-pink-600 drop-shadow-sm">Email Terkirim</h2>
-          <p className="text-pink-500 opacity-80 text-sm mb-4">
-            Kami telah mengirimkan tautan reset password ke <strong>{email}</strong>. 
-            Silakan cek inbox atau folder spam kamu.
-          </p>
 
-          <div className="bg-yellow-50 border border-yellow-300 text-yellow-800 p-3 rounded-lg text-xs mb-4">
-            Development Mode: Cek console terminal backend untuk link reset password
+            {error && (
+              <div className="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-[13px] text-red-700">
+                {error}
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label className="block text-[13px] font-medium text-slate-700 mb-2">
+                  Email
+                </label>
+                <div className="flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 focus-within:ring-2 focus-within:ring-pink-200">
+                  <FaEnvelope className="text-pink-400 text-sm" />
+                  <input
+                    type="email"
+                    className="w-full bg-transparent outline-none text-[14px] text-slate-800 placeholder:text-slate-400"
+                    placeholder="nama@email.com"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    disabled={loading}
+                  />
+                </div>
+              </div>
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full py-3 rounded-lg bg-gradient-to-br from-pink-500 to-pink-600 text-[14px] font-semibold text-white shadow hover:scale-[1.02] transition-transform disabled:opacity-60"
+              >
+                {loading ? "Mengirim..." : "Kirim Email Reset"}
+              </button>
+            </form>
+
+            <div className="mt-5 text-center">
+              <button
+                onClick={() => router.push("/login")}
+                className="text-[13px] font-medium text-pink-600 hover:underline"
+              >
+                Kembali ke Login
+              </button>
+            </div>
           </div>
+        )}
+
+        {/* ================= SENT STEP ================= */}
+        {step === "sent" && (
+          <div className="relative bg-white/60 backdrop-blur-md rounded-3xl shadow-lg p-6 md:p-8 border border-white/30 text-center">
+            {/* Header minimal – TANPA ICON */}
+            <div className="mb-6">
+              <div className="h-[3px] w-16 mx-auto rounded-full bg-gradient-to-r from-pink-400 to-pink-600 mb-4" />
+              <h2 className="text-[22px] font-semibold text-pink-700 tracking-tight">
+                Email Terkirim
+              </h2>
+              <p className="mt-1 text-[12.5px] text-slate-500">
+                Silakan periksa email Anda
+              </p>
+            </div>
 
-          {error && (
-            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-2 rounded-lg text-sm mb-3">
-              {error}
+            <p className="text-[13px] text-slate-600 leading-relaxed mb-4">
+              Kami telah mengirimkan tautan reset password ke alamat email:
+              <span className="block mt-1 font-medium text-slate-800">
+                {email}
+              </span>
+            </p>
+
+            {resendSuccess && (
+              <div className="mb-4 rounded-xl border border-pink-200 bg-pink-50 px-4 py-3 text-left">
+                <p className="text-[13px] font-medium text-pink-700">
+                  Email berhasil dikirim ulang
+                </p>
+                <p className="text-[12px] text-slate-600 leading-relaxed">
+                  Silakan periksa inbox atau folder spam.
+                </p>
+              </div>
+            )}
+
+            {error && (
+              <div className="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-[13px] text-red-700">
+                {error}
+              </div>
+            )}
+
+            <div className="flex flex-col gap-3">
+              <button
+                onClick={() => router.push("/login")}
+                className="py-3 rounded-lg bg-gradient-to-br from-pink-500 to-pink-600 text-[14px] font-semibold text-white shadow hover:scale-[1.02] transition-transform"
+              >
+                Kembali ke Login
+              </button>
+
+              <button
+                onClick={handleResend}
+                disabled={loading}
+                className="text-[13px] font-medium text-pink-600 hover:underline disabled:text-slate-400"
+              >
+                {loading ? "Mengirim ulang..." : "Kirim ulang email"}
+              </button>
             </div>
-          )}
-
-          <div className="flex flex-col gap-3 w-full max-w-[300px] mx-auto mt-4">
-            <button
-              onClick={() => router.push("/login")}
-              className="py-3 text-white font-bold rounded-xl shadow-lg bg-linear-to-r from-pink-400 via-pink-500 to-pink-600 hover:from-pink-500 hover:to-pink-400 hover:scale-105 transition-all duration-300 drop-shadow-sm"
-            >
-              Kembali ke Login
-            </button>
-
-            <button
-              onClick={handleResend}
-              disabled={loading}
-              className={`text-sm font-semibold ${loading ? "text-gray-400" : "text-pink-600 hover:underline"} drop-shadow-sm`}
-            >
-              {loading ? "Mengirim ulang..." : "Kirim Ulang Email"}
-            </button>
-          </div>
 
-          <p className="mt-5 text-pink-500 text-xs opacity-70 drop-shadow-sm">
-            2025 RoxyDental - All rights reserved
-          </p>
-        </div>
-      )}
+            <p className="mt-6 text-[11px] text-slate-500">
+             © 2025 POLABDC — All rights reserved
+            </p>
+          </div>
+        )}
+      </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index cc519e5..6e9db56 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -7,7 +7,7 @@ import { ProfileProvider } from "@/contexts/ProfileContext";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "POLADC - Dental Clinic Management",
+  title: "POLABDC - Dental Clinic Management",
   description: "Professional Dental Clinic Management System",
 
   icons: {
diff --git a/frontend/src/app/login/page.tsx b/frontend/src/app/login/page.tsx
index 304539a..a067f3a 100644
--- a/frontend/src/app/login/page.tsx
+++ b/frontend/src/app/login/page.tsx
@@ -5,9 +5,11 @@ import { useRouter } from "next/navigation";
 import Image from "next/image";
 import { HiEye, HiEyeOff } from "react-icons/hi";
 import { authService } from "@/services/auth.service";
+import { useToast } from "@/hooks/use-toast";
 
 export default function LoginPage() {
   const router = useRouter();
+  const { toast } = useToast();
 
   const [role, setRole] = useState<"DOKTER" | "PERAWAT">();
   const [username, setUsername] = useState("");
@@ -17,11 +19,7 @@ export default function LoginPage() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
-  const slides = [
-    "/images/logo1.jpg",
-    "/images/logo2.jpg",
-    "/images/logo3.jpg",
-  ];
+  const slides = ["/images/logo1.jpg", "/images/logo2.jpg", "/images/logo3.jpg"];
 
   useEffect(() => {
     const timer = setInterval(() => {
@@ -32,11 +30,10 @@ export default function LoginPage() {
 
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
-    setError("");
 
     if (!role) {
-    setError("Pilih role terlebih dahulu");
-    return;
+      setError("Pilih role terlebih dahulu");
+      return;
     }
 
     if (!username || !password) {
@@ -47,18 +44,27 @@ export default function LoginPage() {
     setLoading(true);
 
     try {
-     const response = await authService.login({ username, password, role });
-      
-      if (response.success) {
-        if (role === 'DOKTER') {
-          router.push('/dashboard/dokter/main');
-        } else {
-          router.push('/dashboard/perawat/mainpr');
-        }
+      const response = await authService.login({ username, password, role });
+
+      // backend returns 200 tetapi success=false
+      if (!response?.success) {
+        throw {
+          response: {
+            status: 401,
+            data: { message: response?.message || "Username atau password salah" },
+          },
+        };
       }
 
+      // --- SUCCESS: show toast (singkat) lalu redirect segera ---
+      toast({ title: "Login berhasil", description: "Mengalihkan ke dashboard..." });
+
+      if (role === "DOKTER") router.push("/dashboard/dokter/main");
+      else router.push("/dashboard/perawat/mainpr");
+
     } catch (err: any) {
-      if (err.response) {
+      // jangan hapus input di sini — biarkan user tetap melihat apa yg diketik
+      if (err?.response) {
         if (err.response.status === 401 || err.response.status === 400) {
           setError("Username atau password salah");
         } else {
@@ -67,201 +73,151 @@ export default function LoginPage() {
       } else {
         setError("Server tidak dapat dihubungi");
       }
+
+      // Additionally, surface a short toast for network/server errors (optional)
+      // toast({ title: 'Login gagal', description: error || 'Cek kembali koneksi atau coba lagi.' });
+
     } finally {
       setLoading(false);
     }
   };
 
   return (
-    <div className="min-h-screen w-full flex flex-col lg:flex-row">
-      <div className="hidden lg:flex relative flex-col justify-center items-center lg:w-3/5 overflow-hidden"
-           style={{ background: "linear-gradient(135deg, #FFDDE6 0%, #FFCAD4 40%, #FFB4C8 100%)" }}>
-        <div className="absolute top-10 right-10 w-32 h-32 bg-white/20 rounded-full blur-3xl"></div>
-        <div className="absolute bottom-20 left-10 w-40 h-40 bg-pink-300/30 rounded-full blur-3xl"></div>
-
-        <div className="relative z-10 w-[85%] max-w-3xl">
-          <div className="text-left w-full mb-8">
-            <h1 className="text-5xl xl:text-6xl font-bold text-gray-900 leading-tight mb-2">Selamat Datang</h1>
-            <h2 className="text-5xl xl:text-6xl font-bold text-gray-900 leading-tight mb-2">
-              di <span className="text-pink-600 drop-shadow-sm">POLADC</span>
-            </h2>
-          </div>
-
-          <div className="relative rounded-3xl shadow-2xl bg-white/40 backdrop-blur-sm p-4">
-            <div className="relative overflow-hidden w-full rounded-2xl bg-gray-100" style={{ paddingBottom: "56.25%" }}>
-              {slides.map((src, index) => (
-                <img
-                  key={index}
-                  src={src}
-                  alt={`Clinic slide ${index + 1}`}
-                  className={`absolute inset-0 w-full h-full object-cover transition-all duration-1000 ${
-                    currentSlide === index ? "opacity-100 scale-100" : "opacity-0 scale-105"
-                  }`}
-                />
-              ))}
-              
-              <div className="absolute inset-0 bg-linear-to-t from-black/20 to-transparent"></div>
-            </div>
-
-            <div className="flex justify-center mt-5 gap-3">
-              {slides.map((_, index) => (
-                <button
-                  key={index}
-                  onClick={() => setCurrentSlide(index)}
-                  className="transition-all duration-300 rounded-full hover:scale-110"
-                  style={{
-                    width: currentSlide === index ? "28px" : "10px",
-                    height: "10px",
-                    backgroundColor: currentSlide === index ? "#FF5E8A" : "#FFB4C8",
-                  }}
-                  aria-label={`Go to slide ${index + 1}`}
-                />
-              ))}
+    <>
+      <div className="min-h-screen w-full flex flex-col lg:flex-row">
+        {/* LEFT SLIDE PART - unchanged visually */}
+        <div className="hidden lg:flex relative flex-col justify-center items-center lg:w-3/5 overflow-hidden" style={{ background: "linear-gradient(135deg, #FFDDE6 0%, #FFCAD4 40%, #FFB4C8 100%)" }}>
+          <div className="absolute top-10 right-10 w-32 h-32 bg-white/20 rounded-full blur-3xl"></div>
+          <div className="absolute bottom-20 left-10 w-40 h-40 bg-pink-300/30 rounded-full blur-3xl"></div>
+
+          <div className="relative z-10 w-[85%] max-w-3xl">
+            <div className="text-left w-full mb-8">
+              <h1 className="text-5xl xl:text-6xl font-bold text-gray-900 leading-tight mb-2">Selamat Datang</h1>
+              <h2 className="text-5xl xl:text-6xl font-bold text-gray-900 leading-tight mb-2">di <span className="text-pink-600 drop-shadow-sm">POLABDC</span></h2>
             </div>
-          </div>
-        </div>
-      </div>
 
-      <div className="flex flex-col w-full lg:w-2/5 bg-white min-h-screen">
-        <div className="flex flex-col justify-center items-center flex-1 px-6 sm:px-8 md:px-12 py-8 sm:py-10">
-          <div className="w-full max-w-md">
-            
-            <div className="flex flex-col items-center mb-8">
-              <div className="rounded-full flex items-center justify-center shadow-lg mb-4 transform hover:scale-105 transition-transform"
-                   style={{ width: "80px", height: "80px", background: "linear-gradient(135deg, #FF7AA2 0%, #FF5E8A 100%)" }}>
-                <Image src="/images/putih.png" alt="Logo POLADC" width={60} height={60} className="object-contain" />
+            <div className="relative rounded-3xl shadow-2xl bg-white/40 backdrop-blur-sm p-4">
+              <div className="relative overflow-hidden w-full rounded-2xl bg-gray-100" style={{ paddingBottom: "56.25%" }}>
+                {slides.map((src, index) => (
+                  <img key={index} src={src} alt={`Clinic slide ${index + 1}`} className={`absolute inset-0 w-full h-full object-cover transition-all duration-1000 ${currentSlide === index ? "opacity-100 scale-100" : "opacity-0 scale-105"}`} />
+                ))}
+                <div className="absolute inset-0 bg-linear-to-t from-black/20 to-transparent"></div>
               </div>
-              <h2 className="text-2xl sm:text-3xl font-bold text-pink-500 mb-1 text-center">POLADC</h2>
-              <p className="text-gray-500 font-medium text-sm sm:text-base text-center">Login ke Akun Kamu</p>
-            </div>
 
-            {error && (
-              <div className="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-xl text-sm">
-                {error}
+              <div className="flex justify-center mt-5 gap-3">
+                {slides.map((_, index) => (
+                  <button key={index} onClick={() => setCurrentSlide(index)} className="transition-all duration-300 rounded-full hover:scale-110" style={{ width: currentSlide === index ? "28px" : "10px", height: "10px", backgroundColor: currentSlide === index ? "#FF5E8A" : "#FFB4C8" }} aria-label={`Go to slide ${index + 1}`} />
+                ))}
               </div>
-            )}
+            </div>
+          </div>
+        </div>
 
-            <form onSubmit={handleLogin}>
-              <div className="mb-6">
-                <label className="block text-sm font-semibold text-gray-700 mb-3">
-                  Pilih Role
-                </label>
-                <div className="grid grid-cols-2 gap-3">
-                  {[
-                    { value: "DOKTER", label: "Dokter" },
-                    { value: "PERAWAT", label: "Perawat" }
-                  ].map((r) => (
-                    <button
-                      key={r.value}
-                      type="button"
-                      className={`px-4 py-3 rounded-xl font-semibold transition-all border-2 text-sm sm:text-base ${
-                        role === r.value
-                          ? "text-white bg-pink-500 border-pink-500 shadow-lg scale-105"
-                          : "text-gray-700 bg-white border-gray-300 hover:border-pink-300 hover:bg-pink-50"
-                      }`}
-                      onClick={() => setRole(r.value as any)}
-                    >
-                      {r.label}
-                    </button>
-                  ))}
+        {/* RIGHT LOGIN PART */}
+        <div className="flex flex-col w-full lg:w-2/5 bg-white min-h-screen">
+          <div className="flex flex-col justify-center items-center flex-1 px-6 sm:px-8 md:px-12 py-8 sm:py-10">
+            <div className="w-full max-w-md">
+              <div className="flex flex-col items-center mb-8 animate-in fade-in zoom-in duration-300">
+                <div className="w-20 h-20 rounded-full flex items-center justify-center bg-linear-to-br from-pink-400 to-pink-600 shadow-[0_12px_30px_rgba(255,94,138,0.4)] mb-4 transition-transform hover:scale-105">
+                  <Image src="/images/putih.png" alt="Logo POLABDC" width={56} height={56} className="object-contain" priority />
                 </div>
+
+                <h2 className="text-3xl font-bold text-pink-500 tracking-wide text-center">POLABDC</h2>
+                <p className="text-gray-500 font-medium text-sm mt-1 text-center">Login ke Akun Kamu</p>
               </div>
 
-              <div className="space-y-4">
-                <div>
-                  <label className="block font-semibold text-sm text-gray-900 mb-2">
-                    Username
-                  </label>
-                  <input
-                    type="text"
-                    className="w-full border-2 rounded-xl px-4 py-3 text-sm sm:text-base text-gray-900 placeholder:text-gray-400 focus:border-pink-500 focus:ring-4 focus:ring-pink-100 outline-none transition-all"
-                    placeholder="Masukkan username"
-                    value={username}
-                    onChange={(e) => setUsername(e.target.value)}
-                    disabled={loading}
-                  />
+              {error && (
+                <div className="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-xl text-sm">{error}</div>
+              )}
+
+              <form onSubmit={handleLogin}>
+                <div className="mb-6">
+                  <label className="block text-sm font-semibold text-gray-700 mb-3">Pilih Role</label>
+                  <div className="grid grid-cols-2 gap-3">
+                    {[{ value: "DOKTER", label: "Dokter" }, { value: "PERAWAT", label: "Perawat" }].map((r) => (
+                      <button key={r.value} type="button" className={`px-4 py-3 rounded-xl font-semibold transition-all border-2 text-sm sm:text-base ${role === r.value ? "text-white bg-pink-500 border-pink-500 shadow-lg scale-105" : "text-gray-700 bg-white border-gray-300 hover:border-pink-300 hover:bg-pink-50"}`} onClick={() => { setRole(r.value as any); if (error) setError(""); }}>
+                        {r.label}
+                      </button>
+                    ))}
+                  </div>
                 </div>
 
-                <div>
-                  <label className="block font-semibold text-sm text-gray-900 mb-2">
-                    Password
-                  </label>
-                  <div className="relative">
+                <div className="space-y-4">
+                  <div>
+                    <label className="block font-semibold text-sm text-gray-900 mb-2">Username</label>
                     <input
-                      type={showPassword ? "text" : "password"}
-                      className="w-full border-2 rounded-xl px-4 py-3 pr-12 text-sm sm:text-base text-gray-900 placeholder:text-gray-400 focus:border-pink-500 focus:ring-4 focus:ring-pink-100 outline-none transition-all"
-                      placeholder="Masukkan password"
-                      value={password}
-                      onChange={(e) => setPassword(e.target.value)}
+                      autoComplete="username"
+                      type="text"
+                      className="w-full border-2 rounded-xl px-4 py-3 text-sm sm:text-base text-gray-900 placeholder:text-gray-400 focus:border-pink-500 focus:ring-4 focus:ring-pink-100 outline-none transition-all"
+                      placeholder="Masukkan username"
+                      value={username}
+                      onChange={(e) => {
+                        setUsername(e.target.value);
+                        if (error) setError("");
+                      }}
                       disabled={loading}
                     />
-                    <button
-                      type="button"
-                      className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-600 hover:text-pink-600 transition-colors"
-                      onClick={() => setShowPassword(!showPassword)}
-                    >
-                      {showPassword ? <HiEyeOff size={22} /> : <HiEye size={22} />}
-                    </button>
                   </div>
+
+                  <div>
+                    <label className="block font-semibold text-sm text-gray-900 mb-2">Password</label>
+                    <div className="relative">
+                      <input
+                        autoComplete="current-password"
+                        type={showPassword ? "text" : "password"}
+                        className="w-full border-2 rounded-xl px-4 py-3 pr-12 text-sm sm:text-base text-gray-900 placeholder:text-gray-400 focus:border-pink-500 focus:ring-4 focus:ring-pink-100 outline-none transition-all"
+                        placeholder="Masukkan password"
+                        value={password}
+                        onChange={(e) => {
+                          setPassword(e.target.value);
+                          if (error) setError("");
+                        }}
+                        disabled={loading}
+                      />
+                      <button type="button" className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-600 hover:text-pink-600 transition-colors" onClick={() => setShowPassword(!showPassword)}>
+                        {showPassword ? <HiEyeOff size={22} /> : <HiEye size={22} />}
+                      </button>
+                    </div>
+                  </div>
+
+                  <button type="submit" disabled={loading} className="w-full bg-linear-to-r from-pink-500 to-pink-600 text-white py-3.5 rounded-xl font-bold text-base sm:text-lg shadow-lg hover:shadow-xl hover:from-pink-600 hover:to-pink-700 transform hover:scale-[1.02] transition-all active:scale-[0.98] mt-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none">
+                    {loading ? (
+                      <span className="flex items-center justify-center gap-2">
+                        <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
+                          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+                          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                        </svg>
+                        Memproses...
+                      </span>
+                    ) : (
+                      "Sign In"
+                    )}
+                  </button>
                 </div>
+              </form>
 
-                <button
-                  type="submit"
-                  disabled={loading}
-                  className="w-full bg-linear-to-r from-pink-500 to-pink-600 text-white py-3.5 rounded-xl font-bold text-base sm:text-lg shadow-lg hover:shadow-xl hover:from-pink-600 hover:to-pink-700 transform hover:scale-[1.02] transition-all active:scale-[0.98] mt-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
-                >
-                  {loading ? (
-                    <span className="flex items-center justify-center gap-2">
-                      <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
-                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"/>
-                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
-                      </svg>
-                      Memproses...
-                    </span>
-                  ) : (
-                    "Sign In"
-                  )}
-                </button>
-              </div>
-            </form>
+              <div className="mt-6 space-y-3 text-center">
+                <p className="text-pink-600 font-bold underline cursor-pointer text-sm sm:text-base hover:text-pink-700" onClick={() => router.push("/forgot-password")}>Lupa Password?</p>
 
-            <div className="mt-6 space-y-3 text-center">
-              <p
-                className="text-pink-600 font-bold underline cursor-pointer text-sm sm:text-base hover:text-pink-700"
-                onClick={() => router.push("/forgot-password")}
-              >
-                Lupa Password?
-              </p>
+                <div className="h-6">
+                  {role === "PERAWAT" && (
+                    <p className="text-gray-600 text-sm sm:text-base">Belum punya akun? <span className="text-pink-600 font-bold underline cursor-pointer hover:text-pink-700" onClick={() => router.push("/register")}>Daftar Sekarang</span></p>
+                  )}
+                </div>
 
-              <div className="h-6">
-                {role === "PERAWAT" && (
-                  <p className="text-gray-600 text-sm sm:text-base">
-                    Belum punya akun?{" "}
-                    <span
-                      className="text-pink-600 font-bold underline cursor-pointer hover:text-pink-700"
-                      onClick={() => router.push("/register")}
-                    >
-                      Daftar Sekarang
-                    </span>
-                  </p>
-                )}
+                <button onClick={() => router.push("/")} className="inline-flex items-center gap-2 text-gray-500 font-medium hover:text-pink-600 transition-colors text-sm sm:text-base">
+                  <svg className="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+                  </svg>
+                  Kembali ke Beranda
+                </button>
               </div>
 
-              <button
-                onClick={() => router.push("/")}
-                className="inline-flex items-center gap-2 text-gray-500 font-medium hover:text-pink-600 transition-colors text-sm sm:text-base"
-              >
-                <svg className="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-                </svg>
-                Kembali ke Beranda
-              </button>
+              <p className="text-gray-400 text-xs sm:text-sm text-center mt-8">© 2025 POLABDC — All rights reserved</p>
             </div>
-
-            <p className="text-gray-400 text-xs sm:text-sm text-center mt-8">© 2025 POLADC — All rights reserved</p>
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/register/page.tsx b/frontend/src/app/register/page.tsx
index 6aadf74..3279f00 100644
--- a/frontend/src/app/register/page.tsx
+++ b/frontend/src/app/register/page.tsx
@@ -26,6 +26,13 @@ export default function RegisterPage() {
   const [error, setError] = useState("");
   const [showSuccessModal, setShowSuccessModal] = useState(false);
 
+  // Toast untuk notifikasi kegagalan pendaftaran (UI kecil yang tidak "mengubah" layout utama)
+  const [showErrorToast, setShowErrorToast] = useState(false);
+
+  // Khusus: deteksi bila email sudah terdaftar -> tampilkan banner non-blokir yang membantu
+  const [emailExists, setEmailExists] = useState(false);
+  const [emailExistsMessage, setEmailExistsMessage] = useState("");
+
   // ✅ Redirect hanya setelah sukses registrasi (bukan berdasarkan isAuthenticated)
   useEffect(() => {
     if (!showSuccessModal) return;
@@ -33,8 +40,50 @@ export default function RegisterPage() {
     return () => clearTimeout(t);
   }, [showSuccessModal, router]);
 
+  // auto-hide error toast setelah 4 detik
+  useEffect(() => {
+    if (!showErrorToast) return;
+    const t = setTimeout(() => setShowErrorToast(false), 4000);
+    return () => clearTimeout(t);
+  }, [showErrorToast]);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+    const { name, value } = e.target;
+    // jika user mengubah email, reset flag emailExists agar user bisa coba email lain
+    if (name === "email") {
+      setEmailExists(false);
+      setEmailExistsMessage("");
+    }
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const passwordContainsPersonal = (password: string) => {
+    const lowered = password.toLowerCase();
+    const checks: string[] = [];
+
+    if (formData.username) checks.push(formData.username.toLowerCase());
+    if (formData.fullName) {
+      // cek tiap kata dari fullName
+      formData.fullName.split(/\s+/).forEach((p) => p && checks.push(p.toLowerCase()));
+    }
+    if (formData.email) {
+      const local = formData.email.split("@")[0];
+      if (local) checks.push(local.toLowerCase());
+    }
+    if (formData.phone) {
+      // beberapa digit telepon (compact) untuk dicek
+      const digits = formData.phone.replace(/\D/g, "");
+      if (digits.length >= 4) {
+        // cek potongan 4-digit
+        for (let i = 0; i <= digits.length - 4; i++) {
+          checks.push(digits.slice(i, i + 4));
+        }
+      } else if (digits.length > 0) {
+        checks.push(digits);
+      }
+    }
+
+    return checks.some((part) => part && part.length >= 3 && lowered.includes(part));
   };
 
   const validateForm = () => {
@@ -60,10 +109,30 @@ export default function RegisterPage() {
       return false;
     }
 
-    if (formData.password.length < 6) {
+    // Password rules:
+    const pwd = formData.password;
+    if (pwd.length < 6) {
       setError("Password minimal 6 karakter");
       return false;
     }
+    if (!/[A-Z]/.test(pwd)) {
+      setError("Password harus mengandung minimal 1 huruf besar (A-Z)");
+      return false;
+    }
+    if (!/[a-z]/.test(pwd)) {
+      setError("Password harus mengandung minimal 1 huruf kecil (a-z)");
+      return false;
+    }
+    if (!/[0-9]/.test(pwd)) {
+      setError("Password harus mengandung minimal 1 angka (0-9)");
+      return false;
+    }
+
+    // Cegah password yang mudah ditebak: mengandung bagian username/fullname/email/phone
+    if (passwordContainsPersonal(pwd)) {
+      setError("Password tidak boleh mengandung informasi pribadi (nama, username, email, atau nomor telepon).");
+      return false;
+    }
 
     if (formData.password !== formData.confirmPassword) {
       setError("Password tidak cocok");
@@ -75,7 +144,7 @@ export default function RegisterPage() {
       return false;
     }
 
-    if (formData.phone.length < 10) {
+    if (formData.phone.replace(/\D/g, "").length < 10) {
       setError("Nomor telepon minimal 10 digit");
       return false;
     }
@@ -86,6 +155,9 @@ export default function RegisterPage() {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");
+    setShowErrorToast(false);
+    setEmailExists(false);
+    setEmailExistsMessage("");
 
     if (!validateForm()) return;
 
@@ -102,7 +174,33 @@ export default function RegisterPage() {
 
       setShowSuccessModal(true);
     } catch (err: any) {
-      setError(err?.message || "Registrasi gagal. Silakan coba lagi.");
+      // tampilkan pesan error dari server bila ada; tampilkan juga toast notifikasi kecil
+      const serverMessage =
+        err?.response?.data?.message || err?.message || "Registrasi gagal. Silakan coba lagi.";
+
+      // Deteksi kasus email sudah terdaftar
+      const status = err?.response?.status;
+      const emailExistsPatterns = [
+        /email.*already/i,
+        /email.*sudah/i,
+        /already exists/i,
+        /duplicate/i,
+        /unique/i,
+        /email.*exists/i,
+      ];
+      const isEmailExists = status === 409 || emailExistsPatterns.some((p) => p.test(serverMessage));
+
+      if (isEmailExists) {
+        // Tampilkan banner non-blokir dengan opsi masuk atau ganti email
+        setEmailExists(true);
+        setEmailExistsMessage("Email tersebut sudah terdaftar. Jika itu akun Anda, silakan masuk. Atau gunakan email lain untuk registrasi.");
+        // jangan set error besar; tampilkan toast kecil juga supaya user melihat ada masalah
+        setShowErrorToast(true);
+        setError("");
+      } else {
+        setError(serverMessage);
+        setShowErrorToast(true);
+      }
     } finally {
       setLoading(false);
     }
@@ -124,9 +222,8 @@ export default function RegisterPage() {
         <div className="absolute inset-0">
           <Image
             src="/images/perawat.jpg"
-            alt="POLADC Background"
+            alt="POLABDC Background"
             fill
-            // ✅ Karena kolom kiri hanya 2/5 (≈40%) di desktop, bukan 100vw
             sizes="(min-width: 1024px) 40vw, 100vw"
             className="object-cover"
             priority
@@ -146,7 +243,7 @@ export default function RegisterPage() {
 
         <div className="relative z-10 text-center px-8">
           <h1 className="text-5xl font-bold text-gray-900 mb-6">
-            Bergabung dengan <span className="text-pink-600">POLADC</span>
+            Bergabung dengan <span className="text-pink-600">POLABDC</span>
           </h1>
           <p className="text-xl text-gray-700 mb-8">
             Daftar sebagai Perawat dan mulai kelola pasien dengan sistem yang efisien
@@ -156,6 +253,16 @@ export default function RegisterPage() {
 
       {/* RIGHT / FORM */}
       <div className="flex flex-col w-full lg:w-3/5 bg-white min-h-screen overflow-y-auto">
+        {/* Error toast (tidak mengubah layout form, muncul di atas kanan) */}
+        {showErrorToast && (error || emailExistsMessage) && (
+          <div className="fixed top-6 right-6 z-50">
+            <div className="max-w-xs w-full bg-red-50 border border-red-200 text-red-700 rounded-xl p-3 shadow-lg animate-in slide-in-from-right">
+              <div className="text-sm font-semibold mb-1">Gagal Membuat Akun</div>
+              <div className="text-xs leading-snug">{error || emailExistsMessage}</div>
+            </div>
+          </div>
+        )}
+
         <div className="flex flex-col justify-center items-center flex-1 px-6 sm:px-8 md:px-12 py-8 sm:py-10">
           <div className="w-full max-w-2xl">
             <div
@@ -165,23 +272,21 @@ export default function RegisterPage() {
               <h1 className="text-3xl sm:text-4xl font-bold text-gray-900 text-center mb-2">
                 Daftar Akun
               </h1>
-              <h2 className="text-2xl sm:text-3xl font-bold text-pink-600 text-center">
-                Perawat POLADC
-              </h2>
+              <h2 className="text-2xl sm:text-3xl font-bold text-pink-600 text-center">Perawat POLABDC</h2>
             </div>
 
-            <div className="flex flex-col items-center mb-8">
+           <div className="flex flex-col items-center mb-8 animate-in fade-in zoom-in duration-300">
+
+              {/* LOGO */}
               <div
-                className="rounded-full flex items-center justify-center shadow-lg mb-4 overflow-hidden"
-                style={{
-                  width: "80px",
-                  height: "80px",
-                  background: "linear-gradient(135deg, #FF7AA2 0%, #FF5E8A 100%)",
-                }}
+                className="w-20 h-20 rounded-full flex items-center justify-center
+                          bg-linear-to-br from-pink-400 to-pink-600
+                          shadow-[0_12px_30px_rgba(255,94,138,0.4)]
+                          mb-4 transition-transform hover:scale-105 overflow-hidden"
               >
                 <Image
                   src="/images/putih.png"
-                  alt="Logo POLADC"
+                  alt="Logo POLABDC"
                   width={56}
                   height={56}
                   className="object-contain"
@@ -189,12 +294,16 @@ export default function RegisterPage() {
                 />
               </div>
 
-              <h2 className="text-2xl sm:text-3xl font-bold text-pink-500 mb-1">
+              {/* TITLE */}
+              <h2 className="text-2xl sm:text-3xl font-bold text-pink-500 mb-1 text-center tracking-wide">
                 Registrasi Perawat
               </h2>
-              <p className="text-gray-500 font-medium text-sm sm:text-base">
+
+              {/* SUBTITLE */}
+              <p className="text-gray-500 font-medium text-sm sm:text-base text-center">
                 Lengkapi data diri Anda
               </p>
+
             </div>
 
             {error && (
@@ -203,6 +312,30 @@ export default function RegisterPage() {
               </div>
             )}
 
+            {/* khusus: banner email sudah terdaftar (non-blokir) */}
+            {emailExists && (
+              <div className="mb-4 p-3 bg-yellow-50 border border-yellow-200 text-yellow-800 rounded-xl text-sm flex items-start justify-between gap-4">
+                <div className="flex-1">
+                  <div className="font-semibold">Perhatian — Email sudah terdaftar</div>
+                  <div className="text-xs mt-1">{emailExistsMessage}</div>
+                </div>
+                <div className="flex flex-col gap-2">
+                  <button
+                    onClick={() => router.push("/login")}
+                    className="text-xs px-3 py-1 rounded-lg bg-yellow-100 hover:bg-yellow-200 font-semibold"
+                  >
+                    Masuk
+                  </button>
+                  <button
+                    onClick={() => setFormData((p) => ({ ...p, email: "" }))}
+                    className="text-xs px-3 py-1 rounded-lg bg-white border border-yellow-200 hover:bg-yellow-50 font-medium"
+                  >
+                    Gunakan email lain
+                  </button>
+                </div>
+              </div>
+            )}
+
             <form onSubmit={handleSubmit}>
               <div className="grid md:grid-cols-2 gap-4">
                 <div>
@@ -302,6 +435,10 @@ export default function RegisterPage() {
                       {showPassword ? "Hide" : "Show"}
                     </button>
                   </div>
+                  {/* helper text (tidak mengubah struktur UI utama) */}
+                  <p className="text-xs text-gray-400 mt-2">
+                    Password minimal 6 karakter, mengandung huruf besar, huruf kecil, dan angka. Jangan gunakan informasi pribadi.
+                  </p>
                 </div>
 
                 <div>
@@ -394,16 +531,12 @@ export default function RegisterPage() {
                     Ke Halaman Login
                   </button>
 
-                  <p className="text-xs text-gray-400">
-                    Anda akan diarahkan otomatis dalam beberapa detik
-                  </p>
+                  <p className="text-xs text-gray-400">Anda akan diarahkan otomatis dalam beberapa detik</p>
                 </div>
               </DialogContent>
             </Dialog>
 
-            <p className="text-gray-400 text-xs text-center mt-8">
-              © 2025 POLADC — All rights reserved
-            </p>
+            <p className="text-gray-400 text-xs text-center mt-8">© 2025 POLABDC — All rights reserved</p>
           </div>
         </div>
       </div>
diff --git a/frontend/src/app/reset-password/page.tsx b/frontend/src/app/reset-password/page.tsx
index 7121bae..e0ba0e8 100644
--- a/frontend/src/app/reset-password/page.tsx
+++ b/frontend/src/app/reset-password/page.tsx
@@ -6,6 +6,29 @@ import { FaLock, FaCheckCircle } from "react-icons/fa";
 import { HiEye, HiEyeOff } from "react-icons/hi";
 import api from "@/lib/api";
 
+type NoticeType = "error" | "warning" | "info";
+
+function Notice({ type, message }: { type: NoticeType; message: string }) {
+  const base = "mb-4 p-4 rounded-lg text-sm leading-relaxed flex items-start gap-3 border";
+  const styles = {
+    error: "bg-red-50 border-red-200 text-red-700",
+    warning: "bg-yellow-50 border-yellow-200 text-yellow-700",
+    info: "bg-blue-50 border-blue-200 text-blue-700",
+  }[type];
+
+  const Icon =
+    type === "error" ? FaLock : type === "warning" ? FaLock : FaCheckCircle;
+
+  return (
+    <div role={type === "error" ? "alert" : "status"} aria-live="polite" className={`${base} ${styles}`}>
+      <div className="mt-0.5 text-lg" aria-hidden>
+        <Icon />
+      </div>
+      <p className="text-sm font-normal tracking-normal">{message}</p>
+    </div>
+  );
+}
+
 function ResetPasswordContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -14,9 +37,11 @@ function ResetPasswordContent() {
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
+  const [error, setError] = useState(""); // legacy error message (kept for compatibility)
   const [success, setSuccess] = useState(false);
 
+  const [notice, setNotice] = useState<{ type: NoticeType; message: string } | null>(null);
+
   const email = searchParams.get("email");
   const token = searchParams.get("token");
 
@@ -26,35 +51,73 @@ function ResetPasswordContent() {
     }
   }, [email, token]);
 
+  // auto-dismiss notice after 5s
+  useEffect(() => {
+    if (!notice) return;
+    const t = setTimeout(() => setNotice(null), 5000);
+    return () => clearTimeout(t);
+  }, [notice]);
+
+  // realtime validation: show info if password & confirm mismatch as user types
+  useEffect(() => {
+    if (!confirmPassword && !password) {
+      setNotice(null);
+      return;
+    }
+    if (confirmPassword && password !== confirmPassword) {
+      setNotice({ type: "info", message: "Password dan konfirmasi belum sama." });
+    } else {
+      // do not remove an error/warning explicitly set by submit flow; only clear info
+      if (notice?.type === "info") setNotice(null);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [password, confirmPassword]);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");
+    setNotice(null);
+
+    // basic client-side checks
+    if (!password || !confirmPassword) {
+      setNotice({ type: "warning", message: "Semua field wajib diisi." });
+      return;
+    }
 
     if (password.length < 6) {
-      setError("Password minimal 6 karakter");
+      setNotice({ type: "warning", message: "Password minimal terdiri dari 6 karakter." });
       return;
     }
 
     if (password !== confirmPassword) {
-      setError("Password tidak cocok");
+      setNotice({ type: "error", message: "Password baru dan konfirmasi password tidak sama." });
       return;
     }
 
     setLoading(true);
 
     try {
-      await api.post('/auth/reset-password', {
+      // call existing backend endpoint (no BE changes)
+      await api.post("/auth/reset-password", {
         email,
         token,
-        newPassword: password
+        newPassword: password,
       });
+
+      // success UI
       setSuccess(true);
-      
+      setNotice({ type: "info", message: "Password berhasil direset — mengalihkan ke halaman login..." });
+
+      // Redirect after short delay
       setTimeout(() => {
         router.push("/login");
-      }, 3000);
+      }, 2800);
     } catch (err: any) {
-      setError(err.response?.data?.message || "Gagal reset password");
+      // prefer BE message, fallback generic
+      const msg = err?.response?.data?.message || "Gagal reset password";
+      // if backend specifically rejects because "new password must be different" or similar,
+      // that message will be shown here without changing BE.
+      setNotice({ type: "error", message: msg });
     } finally {
       setLoading(false);
     }
@@ -62,13 +125,13 @@ function ResetPasswordContent() {
 
   if (!email || !token) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-linear-to-br from-pink-100 via-pink-200 to-pink-300">
-        <div className="bg-red-50 border border-red-200 text-red-700 p-6 rounded-xl max-w-md">
-          <h3 className="font-bold text-lg mb-2">Link Tidak Valid</h3>
-          <p className="text-sm mb-4">Link reset password tidak valid atau sudah kadaluarsa.</p>
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-pink-100 via-pink-200 to-pink-300 px-4">
+        <div className="bg-white/60 border border-red-200 text-red-700 p-6 rounded-2xl max-w-md w-full backdrop-blur-sm">
+          <h3 className="font-semibold text-lg mb-2">Link Tidak Valid</h3>
+          <p className="text-sm mb-4 text-slate-700">Link reset password tidak valid atau sudah kadaluarsa.</p>
           <button
             onClick={() => router.push("/forgot-password")}
-            className="w-full py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
+            className="w-full py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
           >
             Kirim Ulang Link
           </button>
@@ -79,16 +142,16 @@ function ResetPasswordContent() {
 
   if (success) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-linear-to-br from-pink-100 via-pink-200 to-pink-300">
-        <div className="text-center max-w-md">
-          <div className="mx-auto mb-6 w-[110px] h-[110px] flex items-center justify-center rounded-full text-white text-4xl shadow-xl bg-linear-to-br from-green-400 via-green-500 to-green-600 animate-pulse">
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-pink-100 via-pink-200 to-pink-300 px-4">
+        <div className="text-center max-w-md w-full bg-white/60 rounded-2xl p-6 shadow-lg backdrop-blur-sm">
+          <div className="mx-auto mb-6 w-[108px] h-[108px] flex items-center justify-center rounded-full text-white text-4xl shadow-xl bg-gradient-to-br from-green-400 via-green-500 to-green-600">
             <FaCheckCircle />
           </div>
-          <h2 className="text-2xl font-bold text-green-600 mb-2">Password Berhasil Direset</h2>
-          <p className="text-green-500 mb-4">Anda akan diarahkan ke halaman login...</p>
+          <h2 className="text-2xl font-bold text-green-700 mb-2">Password Berhasil Direset</h2>
+          <p className="text-sm text-slate-700 mb-4">Anda akan diarahkan ke halaman login...</p>
           <button
             onClick={() => router.push("/login")}
-            className="py-3 px-8 text-white font-bold rounded-xl shadow-lg bg-linear-to-br from-green-400 to-green-600 hover:scale-105 transition-all"
+            className="py-3 px-6 text-white font-semibold rounded-lg shadow bg-gradient-to-br from-green-400 to-green-600 hover:scale-105 transition-transform"
           >
             Login Sekarang
           </button>
@@ -98,111 +161,121 @@ function ResetPasswordContent() {
   }
 
   return (
-    <div className="relative flex flex-col items-center justify-center min-h-screen text-center overflow-hidden font-poppins bg-linear-to-br from-pink-100 via-pink-200 to-pink-300">
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-pink-100 via-pink-200 to-pink-300 px-4 font-poppins">
+      <div className="relative max-w-[440px] w-full">
+        <div className="absolute -left-24 -top-16 w-64 h-64 bg-pink-200/30 rounded-full blur-3xl animate-fade-in-slow" />
+        <div className="absolute -right-16 bottom-[-40px] w-72 h-72 bg-pink-300/30 rounded-full blur-3xl animate-fade-in-slow" />
+
+        <div className="bg-white/60 backdrop-blur-md rounded-3xl shadow-lg p-6 md:p-8 border border-white/30">
+          <div className="flex items-center gap-4 mb-4">
+            <div className="w-14 h-14 flex items-center justify-center rounded-lg bg-gradient-to-br from-pink-400 to-pink-600 text-white shadow">
+              <FaLock className="text-xl" />
+            </div>
+            <div>
+              <h1 className="text-[22px] font-semibold tracking-tight text-pink-700">Reset Password</h1>
+              <p className="text-[13px] leading-relaxed text-slate-600">Masukkan password baru untuk akun <span className="font-medium text-slate-800">{email}</span></p>
+            </div>
+          </div>
 
-      <div className="absolute -top-20 left-[-100px] w-[260px] h-[260px] bg-pink-200/30 rounded-full blur-[60px] animate-float-slow"></div>
-      <div className="absolute bottom-[-120px] right-[-100px] w-[300px] h-[300px] bg-pink-300/30 rounded-full blur-[60px] animate-float-slow delay-2000"></div>
+          {error && (
+            <div className="mb-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">{error}</div>
+          )}
 
-      <div className="w-full max-w-[400px] transition-all duration-700 opacity-100 translate-y-0">
-        <div className="mx-auto mb-6 w-[90px] h-[90px] flex items-center justify-center rounded-full shadow-lg animate-pulse drop-shadow-sm overflow-hidden bg-linear-to-br from-pink-400 via-pink-500 to-pink-600">
-          <FaLock className="text-white text-3xl" />
-        </div>
+          {notice && <Notice type={notice.type} message={notice.message} />}
 
-        <h2 className="text-2xl font-bold text-pink-600 drop-shadow-sm mb-2">Reset Password</h2>
-        <p className="text-pink-500 text-sm opacity-80 mb-6">
-          Masukkan password baru untuk akun <strong>{email}</strong>
-        </p>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="new-password" className="block text-[13px] font-medium text-slate-700 mb-2">
+                Password Baru
+              </label>
+              <div className="relative">
+                <input
+                  id="new-password"
+                  type={showPassword ? "text" : "password"}
+                  className="w-full py-3 px-4 pr-12 rounded-lg outline-none bg-white border border-slate-200 text-[14px] text-slate-800 placeholder:text-slate-400 focus:border-pink-400 focus:ring-2 focus:ring-pink-100 transition"
+                  placeholder="Min. 6 karakter"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  disabled={loading}
+                  aria-label="Password baru"
+                  aria-required
+                />
 
-        {error && (
-          <div className="mb-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-xl text-sm">
-            {error}
-          </div>
-        )}
-
-        <form onSubmit={handleSubmit} className="text-left bg-white/40 backdrop-blur-md p-6 rounded-2xl shadow-xl space-y-4">
-          <div>
-            <label className="text-pink-500 text-sm font-medium">Password Baru</label>
-            <div className="relative">
-              <input
-                type={showPassword ? "text" : "password"}
-                className="
-                  w-full py-3 px-4 pr-12
-                  rounded-xl
-                  outline-none
-                  bg-white
-                  border border-slate-300
-                  text-slate-800
-                  placeholder:text-slate-400
-                  focus:border-slate-400
-                  focus:ring-2
-                  focus:ring-slate-200
-                  transition-all
-                "
-                placeholder="Min. 6 karakter"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                disabled={loading}
-              />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-pink-500 hover:text-pink-700"
+                  aria-label={showPassword ? "Sembunyikan password" : "Tampilkan password"}
+                >
+                  {showPassword ? <HiEyeOff size={22} /> : <HiEye size={22} />}
+                </button>
+              </div>
 
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-pink-400 hover:text-pink-600"
-              >
-                {showPassword ? <HiEyeOff size={22} /> : <HiEye size={22} />}
-              </button>
+              <div className="mt-2 text-[12px] leading-relaxed text-slate-600">
+                {password.length > 0 ? (
+                  password.length >= 6 ? (
+                    <span className="inline-flex items-center gap-2 text-green-600">
+                      <FaCheckCircle /> <span>Kekuatan: cukup</span>
+                    </span>
+                  ) : (
+                    <span className="text-yellow-700">Password kurang dari 6 karakter</span>
+                  )
+                ) : (
+                  <span>Gunakan kombinasi huruf dan angka untuk keamanan lebih baik.</span>
+                )}
+              </div>
             </div>
-          </div>
 
-          <div>
-            <label className="text-pink-500 text-sm font-medium">Konfirmasi Password</label>
-            <div className="relative">
-              <input
-                type={showConfirmPassword ? "text" : "password"}
-                className="
-                  w-full py-3 px-4 pr-12
-                  rounded-xl
-                  outline-none
-                  bg-white
-                  border border-slate-300
-                  text-slate-800
-                  placeholder:text-slate-400
-                  focus:border-slate-400
-                  focus:ring-2
-                  focus:ring-slate-200
-                  transition-all
-                "
-                placeholder="Ulangi password"
-                value={confirmPassword}
-                onChange={(e) => setConfirmPassword(e.target.value)}
-                disabled={loading}
-              />
+            <div>
+              <label htmlFor="confirm-password" className="block text-[13px] font-medium text-slate-700 mb-2">
+                Konfirmasi Password
+              </label>
+              <div className="relative">
+                <input
+                  id="confirm-password"
+                  type={showConfirmPassword ? "text" : "password"}
+                  className="w-full py-3 px-4 pr-12 rounded-lg outline-none bg-white border border-slate-200 text-[14px] text-slate-800 placeholder:text-slate-400 focus:border-pink-400 focus:ring-2 focus:ring-pink-100 transition"
+                  placeholder="Ulangi password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  disabled={loading}
+                  aria-label="Konfirmasi password"
+                />
 
+                <button
+                  type="button"
+                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-pink-500 hover:text-pink-700"
+                  aria-label={showConfirmPassword ? "Sembunyikan konfirmasi" : "Tampilkan konfirmasi"}
+                >
+                  {showConfirmPassword ? <HiEyeOff size={22} /> : <HiEye size={22} />}
+                </button>
+              </div>
+            </div>
+
+            <div>
               <button
-                type="button"
-                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-pink-400 hover:text-pink-600"
+                type="submit"
+                disabled={loading}
+                className="w-full py-3 text-[14px] font-semibold text-white rounded-lg shadow bg-gradient-to-br from-pink-500 to-pink-600 hover:scale-[1.02] transition-transform disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center gap-3"
               >
-                {showConfirmPassword ? <HiEyeOff size={22} /> : <HiEye size={22} />}
+                {loading ? (
+                  <svg className="w-5 h-5 animate-spin" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="12" cy="12" r="10" stroke="white" strokeWidth="4" strokeOpacity="0.3" />
+                    <path d="M22 12a10 10 0 00-10-10" stroke="white" strokeWidth="4" strokeLinecap="round" />
+                  </svg>
+                ) : null}
+                <span>{loading ? "Memproses..." : "Reset Password"}</span>
               </button>
             </div>
-          </div>
+          </form>
 
-          <button
-            type="submit"
-            disabled={loading}
-            className="w-full py-3 text-white font-bold rounded-xl shadow-lg bg-linear-to-br from-pink-400 via-pink-500 to-pink-600 hover:from-pink-500 hover:to-pink-400 hover:scale-105 transition-all duration-300 drop-shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {loading ? "Memproses..." : "Reset Password"}
-          </button>
-        </form>
-
-        <button
-          onClick={() => router.push("/login")}
-          className="mt-5 text-pink-600 font-semibold text-sm hover:underline drop-shadow-sm"
-        >
-          Kembali ke Login
-        </button>
+          <div className="mt-4 text-center">
+            <button onClick={() => router.push("/login")} className="text-pink-600 text-sm font-medium hover:underline">
+              Kembali ke Login
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   );
@@ -210,12 +283,14 @@ function ResetPasswordContent() {
 
 export default function ResetPasswordPage() {
   return (
-    <Suspense fallback={
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-pink-500"></div>
-      </div>
-    }>
+    <Suspense
+      fallback={
+        <div className="min-h-screen flex items-center justify-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-pink-500"></div>
+        </div>
+      }
+    >
       <ResetPasswordContent />
     </Suspense>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/logo.tsx b/frontend/src/components/logo.tsx
index 2427445..5e2adc4 100644
--- a/frontend/src/components/logo.tsx
+++ b/frontend/src/components/logo.tsx
@@ -8,7 +8,7 @@ export default function logo() {
       <div className="relative w-12 h-12 md:w-14 md:h-14">
         <Image
           src="/images/pink.png"
-          alt="POLADC Logo"
+          alt="POLABDC Logo"
           width={56}
           height={56}
           className="w-full h-full object-contain"
diff --git a/frontend/src/components/ui/PredictionModal.tsx b/frontend/src/components/ui/PredictionModal.tsx
index d8fd7c1..c436113 100644
--- a/frontend/src/components/ui/PredictionModal.tsx
+++ b/frontend/src/components/ui/PredictionModal.tsx
@@ -13,8 +13,6 @@ import {
   Tooltip,
   Legend,
   ResponsiveContainer,
-  Area,
-  AreaChart,
 } from "recharts";
 import { aiService, PredictionData } from "@/services/ai.service";
 
@@ -64,15 +62,15 @@ export default function PredictionModal({ onClose }: Props) {
 
   if (loading) {
     return (
-      <div className="fixed inset-0 z-9999 flex items-center justify-center bg-gradient-to-br from-black/60 via-purple-900/20 to-pink-900/20 backdrop-blur-md animate-in fade-in duration-300">
-        <div className="bg-white/95 backdrop-blur-xl px-10 py-8 rounded-3xl shadow-2xl border border-white/20 flex flex-col items-center gap-4">
+      <div className="fixed inset-0 z-9999 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-in fade-in duration-300">
+        <div className="bg-white px-10 py-8 rounded-2xl shadow-xl flex flex-col items-center gap-4">
           <div className="relative">
-            <div className="animate-spin rounded-full h-12 w-12 border-4 border-pink-200"></div>
-            <div className="animate-spin rounded-full h-12 w-12 border-t-4 border-pink-600 absolute top-0 left-0"></div>
+            <div className="animate-spin rounded-full h-12 w-12 border-4 border-pink-100"></div>
+            <div className="animate-spin rounded-full h-12 w-12 border-t-4 border-[#E91E8C] absolute top-0 left-0"></div>
           </div>
           <div className="text-center">
-            <span className="text-gray-800 font-semibold text-lg">Memuat prediksi...</span>
-            <p className="text-gray-500 text-sm mt-1">Menganalisis data klinik Anda</p>
+            <span className="text-slate-800 font-semibold text-lg">Memuat prediksi...</span>
+            <p className="text-slate-500 text-sm mt-1">Menganalisis data klinik Anda</p>
           </div>
         </div>
       </div>
@@ -81,29 +79,29 @@ export default function PredictionModal({ onClose }: Props) {
 
   if (error) {
     return (
-      <div className="fixed inset-0 z-9999 flex items-center justify-center bg-gradient-to-br from-black/60 via-red-900/20 to-orange-900/20 backdrop-blur-md p-4 animate-in fade-in duration-300">
-        <Card className="w-full max-w-md rounded-3xl shadow-2xl border-0 overflow-hidden animate-in zoom-in duration-300">
-          <CardHeader className="bg-gradient-to-r from-red-500 via-red-600 to-rose-600 text-white p-6">
+      <div className="fixed inset-0 z-9999 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-300">
+        <Card className="w-full max-w-md rounded-2xl shadow-xl border-0 overflow-hidden animate-in zoom-in duration-300">
+          <CardHeader className="bg-linear-to-r from-red-600 to-red-700 text-white p-6">
             <CardTitle className="flex items-center gap-3 text-xl">
-              <div className="bg-white/20 p-2 rounded-full">
+              <div className="bg-white/20 p-2 rounded-lg">
                 <AlertTriangle className="w-6 h-6" />
               </div>
               Prediksi Tidak Tersedia
             </CardTitle>
           </CardHeader>
-          <CardContent className="p-6 space-y-4 bg-gradient-to-b from-white to-gray-50">
-            <div className="bg-gradient-to-r from-red-50 to-rose-50 border-l-4 border-red-500 rounded-lg p-4 shadow-sm">
+          <CardContent className="p-6 space-y-4 bg-white">
+            <div className="bg-red-50 border-l-4 border-red-500 rounded-lg p-4">
               <p className="text-red-800 text-sm font-medium">{error}</p>
             </div>
             
-            <div className="bg-gradient-to-r from-blue-50 to-indigo-50 border-l-4 border-blue-500 rounded-lg p-4 shadow-sm">
-              <p className="text-blue-900 font-bold text-sm mb-3 flex items-center gap-2">
+            <div className="bg-blue-50 border-l-4 border-blue-500 rounded-lg p-4">
+              <p className="text-blue-900 font-semibold text-sm mb-3 flex items-center gap-2">
                 <Activity className="w-4 h-4" />
                 Langkah Troubleshooting:
               </p>
               <ol className="text-blue-800 text-xs space-y-2 list-decimal list-inside ml-2">
                 <li className="leading-relaxed">Pastikan AI Service berjalan di terminal terpisah</li>
-                <li className="leading-relaxed">Jalankan: <code className="bg-blue-200/50 px-2 py-0.5 rounded font-mono text-xs">cd roxydental-ai && uvicorn api:app --reload</code></li>
+                <li className="leading-relaxed">Jalankan: <code className="bg-blue-100 px-2 py-0.5 rounded font-mono text-xs">cd roxydental-ai && uvicorn api:app --reload</code></li>
                 <li className="leading-relaxed">Pastikan minimal 5 minggu data transaksi tersedia</li>
                 <li className="leading-relaxed">Cek koneksi database di file .env</li>
               </ol>
@@ -111,7 +109,7 @@ export default function PredictionModal({ onClose }: Props) {
 
             <Button 
               onClick={onClose} 
-              className="w-full bg-gradient-to-r from-red-600 to-rose-600 hover:from-red-700 hover:to-rose-700 text-white shadow-lg hover:shadow-xl transition-all duration-200 py-6 rounded-xl font-semibold"
+              className="w-full bg-red-600 hover:bg-red-700 text-white shadow-sm hover:shadow-md transition-all duration-200 py-6 rounded-lg font-medium"
             >
               Tutup
             </Button>
@@ -123,26 +121,26 @@ export default function PredictionModal({ onClose }: Props) {
 
   if (data.length === 0) {
     return (
-      <div className="fixed inset-0 z-9999 flex items-center justify-center bg-gradient-to-br from-black/60 via-yellow-900/20 to-orange-900/20 backdrop-blur-md p-4 animate-in fade-in duration-300">
-        <Card className="w-full max-w-md rounded-3xl shadow-2xl border-0 overflow-hidden animate-in zoom-in duration-300">
-          <CardHeader className="bg-gradient-to-r from-yellow-500 via-yellow-600 to-amber-600 text-white p-6">
+      <div className="fixed inset-0 z-9999 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-300">
+        <Card className="w-full max-w-md rounded-2xl shadow-xl border border-slate-200 overflow-hidden animate-in zoom-in duration-300">
+          <CardHeader className="bg-linear-to-r from-amber-500 to-amber-600 text-white p-6">
             <CardTitle className="flex items-center gap-3 text-xl">
-              <div className="bg-white/20 p-2 rounded-full">
+              <div className="bg-white/20 p-2 rounded-lg">
                 <AlertTriangle className="w-6 h-6" />
               </div>
               Data Belum Tersedia
             </CardTitle>
           </CardHeader>
-          <CardContent className="p-6 space-y-4 bg-gradient-to-b from-white to-gray-50">
-            <div className="bg-gradient-to-r from-yellow-50 to-amber-50 border-l-4 border-yellow-500 rounded-lg p-4 shadow-sm">
-              <p className="text-gray-800 font-medium leading-relaxed">
+          <CardContent className="p-6 space-y-4 bg-white">
+            <div className="bg-amber-50 border-l-4 border-amber-500 rounded-lg p-4">
+              <p className="text-slate-800 font-medium leading-relaxed">
                 Data transaksi belum mencukupi untuk membuat prediksi. 
                 Minimal 5 minggu data historis diperlukan.
               </p>
             </div>
             <Button 
               onClick={onClose} 
-              className="w-full bg-gradient-to-r from-yellow-600 to-amber-600 hover:from-yellow-700 hover:to-amber-700 text-white shadow-lg hover:shadow-xl transition-all duration-200 py-6 rounded-xl font-semibold"
+              className="w-full bg-amber-600 hover:bg-amber-700 text-white shadow-sm hover:shadow-md transition-all duration-200 py-6 rounded-lg font-medium"
             >
               Tutup
             </Button>
@@ -158,89 +156,89 @@ export default function PredictionModal({ onClose }: Props) {
   const avgPatients = totalPatients / data.length;
 
   return (
-    <div className="fixed inset-0 z-9999 bg-gradient-to-br from-black/60 via-purple-900/30 to-pink-900/30 backdrop-blur-md flex items-center justify-center p-4 animate-in fade-in duration-300">
-      <Card className="w-full max-w-4xl relative pointer-events-auto rounded-3xl shadow-2xl border-0 overflow-hidden max-h-[90vh] flex flex-col animate-in zoom-in duration-300">
+    <div className="fixed inset-0 z-9999 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 animate-in fade-in duration-300">
+      <Card className="w-full max-w-4xl relative pointer-events-auto rounded-2xl shadow-xl border-0 overflow-hidden max-h-[90vh] flex flex-col animate-in zoom-in duration-300">
 
         <button
           onClick={onClose}
-          className="absolute top-5 right-5 text-white hover:text-gray-200 z-10 bg-white/20 hover:bg-white/30 rounded-full p-2 backdrop-blur-md transition-all duration-200 hover:scale-110 shadow-lg"
+          className="absolute top-4 right-4 text-white hover:text-slate-200 z-10 bg-white/20 hover:bg-white/30 rounded-lg p-2 backdrop-blur-md transition-all duration-200 shadow-md"
         >
           <X className="w-5 h-5" />
         </button>
 
-        <CardHeader className="bg-gradient-to-r from-pink-500 via-purple-500 to-rose-500 text-white p-6 rounded-t-3xl shadow-lg">
+        <CardHeader className="bg-linear-to-r from-[#E91E8C] via-[#D91A7E] to-[#C91670] text-white p-6 shadow-lg">
           <div className="flex items-center gap-3">
-            <div className="bg-white/20 p-3 rounded-full backdrop-blur-sm shadow-lg">
-              <Sparkles className="w-6 h-6" />
+            <div className="bg-white/20 p-3 rounded-lg backdrop-blur-sm">
+              <Sparkles className="w-6 h-6 text-white" />
             </div>
             <div>
-              <CardTitle className="text-2xl font-bold">Prediksi Kinerja Klinik</CardTitle>
-              <p className="text-white/80 text-sm mt-1">Analisis AI untuk 4 minggu ke depan</p>
+              <CardTitle className="text-2xl font-semibold text-white">Prediksi Kinerja Klinik</CardTitle>
+              <p className="text-pink-100 text-sm mt-1">Analisis AI untuk 4 minggu ke depan</p>
             </div>
           </div>
         </CardHeader>
 
-        <CardContent className="p-6 space-y-6 overflow-y-auto flex-1 bg-gradient-to-b from-white to-gray-50">
+        <CardContent className="p-6 space-y-6 overflow-y-auto flex-1 bg-linear-to-b from-slate-50 to-white">
 
           {/* Stats Cards */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="bg-gradient-to-br from-purple-500 to-purple-600 p-5 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 text-white">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
+            <div className="bg-white p-5 rounded-xl shadow-sm hover:shadow-md transition-all duration-300">
               <div className="flex items-center justify-between mb-3">
-                <div className="bg-white/20 p-2 rounded-lg backdrop-blur-sm">
-                  <TrendingUp className="w-5 h-5" />
+                <div className="bg-pink-50 p-2 rounded-lg">
+                  <TrendingUp className="w-5 h-5 text-[#E91E8C]" />
                 </div>
-                <Calendar className="w-5 h-5 opacity-60" />
+                <Calendar className="w-5 h-5 text-slate-400" />
               </div>
-              <p className="text-white/90 text-sm font-medium mb-1">Total Pendapatan</p>
-              <p className="text-2xl font-bold mb-1">{formatCurrency(totalRevenue)}</p>
-              <p className="text-xs text-white/70">4 minggu ke depan</p>
+              <p className="text-slate-600 text-sm font-medium mb-1">Total Pendapatan</p>
+              <p className="text-2xl font-bold text-slate-800 mb-1">{formatCurrency(totalRevenue)}</p>
+              <p className="text-xs text-slate-500">4 minggu ke depan</p>
             </div>
 
-            <div className="bg-gradient-to-br from-green-500 to-green-600 p-5 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 text-white">
+            <div className="bg-white p-5 rounded-xl shadow-sm hover:shadow-md transition-all duration-300">
               <div className="flex items-center justify-between mb-3">
-                <div className="bg-white/20 p-2 rounded-lg backdrop-blur-sm">
-                  <Users className="w-5 h-5" />
+                <div className="bg-pink-50 p-2 rounded-lg">
+                  <Users className="w-5 h-5 text-[#E91E8C]" />
                 </div>
-                <Activity className="w-5 h-5 opacity-60" />
+                <Activity className="w-5 h-5 text-slate-400" />
               </div>
-              <p className="text-white/90 text-sm font-medium mb-1">Total Pasien</p>
-              <p className="text-2xl font-bold mb-1">{Math.round(totalPatients)} orang</p>
-              <p className="text-xs text-white/70">4 minggu ke depan</p>
+              <p className="text-slate-600 text-sm font-medium mb-1">Total Pasien</p>
+              <p className="text-2xl font-bold text-slate-800 mb-1">{Math.round(totalPatients)} orang</p>
+              <p className="text-xs text-slate-500">4 minggu ke depan</p>
             </div>
 
-            <div className="bg-gradient-to-br from-pink-500 to-rose-600 p-5 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 text-white">
+            <div className="bg-white p-5 rounded-xl shadow-sm hover:shadow-md transition-all duration-300">
               <div className="flex items-center justify-between mb-3">
-                <div className="bg-white/20 p-2 rounded-lg backdrop-blur-sm">
-                  <Sparkles className="w-5 h-5" />
+                <div className="bg-pink-50 p-2 rounded-lg">
+                  <Sparkles className="w-5 h-5 text-[#E91E8C]" />
                 </div>
-                <TrendingUp className="w-5 h-5 opacity-60" />
+                <TrendingUp className="w-5 h-5 text-slate-400" />
               </div>
-              <p className="text-white/90 text-sm font-medium mb-1">Rata-rata/Minggu</p>
-              <p className="text-2xl font-bold mb-1">{formatCurrency(avgRevenue)}</p>
-              <p className="text-xs text-white/70">~{Math.round(avgPatients)} pasien</p>
+              <p className="text-slate-600 text-sm font-medium mb-1">Rata-rata/Minggu</p>
+              <p className="text-2xl font-bold text-slate-800 mb-1">{formatCurrency(avgRevenue)}</p>
+              <p className="text-xs text-slate-500">~{Math.round(avgPatients)} pasien</p>
             </div>
           </div>
 
           {/* Chart Container */}
-          <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
-            <h3 className="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
-              <Activity className="w-5 h-5 text-pink-600" />
+          <div className="bg-white rounded-xl shadow-sm p-6">
+            <h3 className="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
+              <Activity className="w-5 h-5 text-[#E91E8C]" />
               Grafik Prediksi
             </h3>
-            <div className="h-[320px] w-full">
+            <div className="h-80 w-full">
               <ResponsiveContainer width="100%" height="100%">
                 <LineChart data={data}>
                   <defs>
                     <linearGradient id="colorRevenue" x1="0" y1="0" x2="0" y2="1">
-                      <stop offset="5%" stopColor="#E91E63" stopOpacity={0.1}/>
-                      <stop offset="95%" stopColor="#E91E63" stopOpacity={0}/>
+                      <stop offset="5%" stopColor="#E91E8C" stopOpacity={0.2}/>
+                      <stop offset="95%" stopColor="#E91E8C" stopOpacity={0}/>
                     </linearGradient>
                     <linearGradient id="colorPatients" x1="0" y1="0" x2="0" y2="1">
-                      <stop offset="5%" stopColor="#10B981" stopOpacity={0.1}/>
-                      <stop offset="95%" stopColor="#10B981" stopOpacity={0}/>
+                      <stop offset="5%" stopColor="#D91A7E" stopOpacity={0.2}/>
+                      <stop offset="95%" stopColor="#D91A7E" stopOpacity={0}/>
                     </linearGradient>
                   </defs>
-                  <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+                  <CartesianGrid strokeDasharray="3 3" stroke="#fce7f3" />
                   <XAxis
                     dataKey="date"
                     tickFormatter={(d) =>
@@ -249,28 +247,28 @@ export default function PredictionModal({ onClose }: Props) {
                         month: "short",
                       })
                     }
-                    stroke="#888"
+                    stroke="#94a3b8"
                     style={{ fontSize: '12px' }}
                   />
                   <YAxis
                     yAxisId="left"
                     tickFormatter={(v) => `${v / 1_000_000}jt`}
-                    stroke="#E91E63"
+                    stroke="#E91E8C"
                     style={{ fontSize: '12px' }}
                   />
                   <YAxis 
                     yAxisId="right" 
                     orientation="right" 
-                    stroke="#10B981"
+                    stroke="#D91A7E"
                     style={{ fontSize: '12px' }}
                   />
 
                   <Tooltip
                     contentStyle={{
-                      backgroundColor: 'rgba(255, 255, 255, 0.95)',
-                      border: 'none',
-                      borderRadius: '12px',
-                      boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
+                      backgroundColor: 'rgba(255, 255, 255, 0.98)',
+                      border: '1px solid #fbcfe8',
+                      borderRadius: '8px',
+                      boxShadow: '0 4px 12px rgba(233,30,140,0.1)',
                       padding: '12px'
                     }}
                     formatter={(value, name) => {
@@ -292,21 +290,21 @@ export default function PredictionModal({ onClose }: Props) {
                   <Line
                     yAxisId="left"
                     dataKey="revenue"
-                    stroke="#E91E63"
-                    strokeWidth={3}
+                    stroke="#E91E8C"
+                    strokeWidth={2.5}
                     name="Revenue (Rp)"
-                    dot={{ fill: '#E91E63', strokeWidth: 2, r: 5 }}
-                    activeDot={{ r: 7 }}
+                    dot={{ fill: '#E91E8C', strokeWidth: 2, r: 4 }}
+                    activeDot={{ r: 6 }}
                     fill="url(#colorRevenue)"
                   />
                   <Line
                     yAxisId="right"
                     dataKey="patients"
-                    stroke="#10B981"
-                    strokeWidth={3}
+                    stroke="#D91A7E"
+                    strokeWidth={2.5}
                     name="Jumlah Pasien"
-                    dot={{ fill: '#10B981', strokeWidth: 2, r: 5 }}
-                    activeDot={{ r: 7 }}
+                    dot={{ fill: '#D91A7E', strokeWidth: 2, r: 4 }}
+                    activeDot={{ r: 6 }}
                     fill="url(#colorPatients)"
                   />
                 </LineChart>
@@ -315,35 +313,35 @@ export default function PredictionModal({ onClose }: Props) {
           </div>
 
           {/* Weekly Breakdown */}
-          <div className="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
-            <h3 className="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
-              <Calendar className="w-5 h-5 text-purple-600" />
+          <div className="bg-white rounded-xl shadow-sm p-6">
+            <h3 className="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
+              <Calendar className="w-5 h-5 text-[#E91E8C]" />
               Rincian Per Minggu
             </h3>
             <div className="space-y-3">
               {data.map((week, idx) => (
                 <div 
                   key={idx}
-                  className="flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-white rounded-xl border border-gray-100 hover:border-pink-200 hover:shadow-md transition-all duration-200"
+                  className="flex items-center justify-between p-4 bg-pink-50/50 rounded-lg hover:bg-pink-50 transition-all duration-200"
                 >
                   <div className="flex items-center gap-4">
-                    <div className="bg-gradient-to-br from-pink-500 to-purple-600 text-white font-bold w-12 h-12 rounded-xl flex items-center justify-center shadow-md">
+                    <div className="bg-linear-to-br from-[#E91E8C] to-[#D91A7E] text-white font-semibold w-12 h-12 rounded-lg flex items-center justify-center shadow-sm">
                       {idx + 1}
                     </div>
                     <div>
-                      <p className="font-semibold text-gray-800">
+                      <p className="font-medium text-slate-800">
                         {new Date(week.date).toLocaleDateString("id-ID", {
                           day: "numeric",
                           month: "long",
                           year: "numeric"
                         })}
                       </p>
-                      <p className="text-sm text-gray-500">Minggu ke-{idx + 1}</p>
+                      <p className="text-sm text-slate-500">Minggu ke-{idx + 1}</p>
                     </div>
                   </div>
                   <div className="text-right">
-                    <p className="font-bold text-lg text-pink-600">{formatCurrency(week.revenue)}</p>
-                    <p className="text-sm text-gray-600">{Math.round(week.patients)} pasien</p>
+                    <p className="font-semibold text-lg text-slate-800">{formatCurrency(week.revenue)}</p>
+                    <p className="text-sm text-slate-600">{Math.round(week.patients)} pasien</p>
                   </div>
                 </div>
               ))}
@@ -352,7 +350,7 @@ export default function PredictionModal({ onClose }: Props) {
 
           <Button
             onClick={onClose}
-            className="w-full bg-gradient-to-r from-pink-600 via-purple-600 to-rose-600 hover:from-pink-700 hover:via-purple-700 hover:to-rose-700 text-white shadow-lg hover:shadow-xl transition-all duration-200 py-6 rounded-xl font-semibold text-lg"
+            className="w-full bg-linear-to-r from-[#E91E8C] to-[#D91A7E] hover:from-[#D91A7E] hover:to-[#C91670] text-white shadow-sm hover:shadow-md transition-all duration-200 py-6 rounded-lg font-medium text-base"
           >
             Tutup
           </Button>
diff --git a/frontend/src/components/ui/addpembayaran.tsx b/frontend/src/components/ui/addpembayaran.tsx
new file mode 100644
index 0000000..a7fe6de
--- /dev/null
+++ b/frontend/src/components/ui/addpembayaran.tsx
@@ -0,0 +1,175 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+
+interface PaymentForm {
+  visitId: string;
+  totalTagihan: number;
+  metode: string;
+  jumlahBayar: number;
+  catatan: string;
+}
+
+interface Props {
+  onClose?: () => void;
+  onSave: (data: PaymentForm) => void;
+}
+
+export default function InputPembayaran({ onSave, onClose }: Props) {
+  const [form, setForm] = useState<PaymentForm>({
+    visitId: "",
+    totalTagihan: 0,
+    metode: "",
+    jumlahBayar: 0,
+    catatan: "",
+  });
+
+  const update = (key: keyof PaymentForm, value: string | number) => {
+    setForm({ ...form, [key]: value });
+  };
+
+  const kembalian = useMemo(() => {
+    return Math.max(form.jumlahBayar - form.totalTagihan, 0);
+  }, [form.jumlahBayar, form.totalTagihan]);
+
+  const handleSubmit = () => {
+    if (!form.visitId) {
+      alert("Silakan pilih kunjungan pasien");
+      return;
+    }
+    if (!form.metode) {
+      alert("Silakan pilih metode pembayaran");
+      return;
+    }
+    onSave(form);
+  };
+
+  return (
+    <Card className="w-full max-w-3xl mx-auto rounded-xl shadow-lg">
+      <CardContent className="p-6">
+        {/* Header */}
+        <h2 className="text-xl font-semibold text-gray-800">
+          Input Pembayaran
+        </h2>
+        <p className="text-sm text-gray-500 mb-5">
+          Catat pembayaran kunjungan pasien dengan mudah
+        </p>
+
+        {/* Pilih Kunjungan */}
+        <label className="block mb-4 text-sm">
+          <span className="font-medium text-gray-700">
+            Pilih Kunjungan Pasien
+          </span>
+          <input
+            className="w-full mt-1 p-2 border rounded-lg bg-gray-50"
+            placeholder="Cari nama pasien atau nomor kunjungan..."
+            value={form.visitId}
+            onChange={(e) => update("visitId", e.target.value)}
+          />
+        </label>
+
+        {/* Total Tagihan */}
+        <label className="block mb-4 text-sm">
+          <span className="font-medium text-gray-700">
+            Total Tagihan (Rp)
+          </span>
+          <input
+            className="w-full mt-1 p-2 border rounded-lg bg-gray-100 text-gray-600"
+            value={form.totalTagihan.toLocaleString("id-ID")}
+            disabled
+          />
+        </label>
+
+        {/* Metode Pembayaran */}
+        <label className="block mb-4 text-sm">
+          <span className="font-medium text-gray-700">
+            Metode Pembayaran
+          </span>
+          <select
+            className="w-full mt-1 p-2 border rounded-lg bg-gray-50"
+            value={form.metode}
+            onChange={(e) => update("metode", e.target.value)}
+          >
+            <option value="">Pilih metode</option>
+            <option value="cash">Cash</option>
+            <option value="debit">Debit</option>
+            <option value="qris">QRIS</option>
+            <option value="transfer">Transfer</option>
+          </select>
+        </label>
+
+        {/* Jumlah Bayar & Kembalian */}
+        <div className="grid grid-cols-2 gap-4 mb-4 text-sm">
+          <label>
+            <span className="font-medium text-gray-700">
+              Jumlah Bayar (Rp)
+            </span>
+            <input
+              type="number"
+              min={0}
+              className="w-full mt-1 p-2 border rounded-lg bg-gray-50"
+              value={form.jumlahBayar}
+              onChange={(e) =>
+                update("jumlahBayar", Number(e.target.value))
+              }
+            />
+          </label>
+
+          <label>
+            <span className="font-medium text-gray-700">
+              Kembalian (Rp)
+            </span>
+            <input
+              className="w-full mt-1 p-2 border rounded-lg bg-gray-100 text-gray-600"
+              value={kembalian.toLocaleString("id-ID")}
+              disabled
+            />
+          </label>
+        </div>
+
+        {/* Catatan */}
+        <label className="block mb-5 text-sm">
+          <span className="font-medium text-gray-700">
+            Catatan (Opsional)
+          </span>
+          <input
+            className="w-full mt-1 p-2 border rounded-lg bg-gray-50"
+            placeholder="Contoh: Lunas, DP, dll"
+            value={form.catatan}
+            onChange={(e) => update("catatan", e.target.value)}
+          />
+        </label>
+
+        {/* Info Box */}
+        <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg text-sm mb-5 flex gap-2">
+          <span className="text-blue-600 font-semibold">ℹ️</span>
+          <p className="text-blue-700">
+            Pastikan total tagihan sudah sesuai dengan tindakan yang
+            dilakukan dokter. Status kunjungan harus{" "}
+            <b>Selesai (COMPLETED)</b> agar dapat dilakukan pembayaran.
+          </p>
+        </div>
+
+        {/* Buttons */}
+        <div className="flex justify-end gap-3">
+          {onClose && (
+            <button
+              onClick={onClose}
+              className="px-4 py-2 rounded-lg border text-gray-700 hover:bg-gray-100 text-sm"
+            >
+              Batal
+            </button>
+          )}
+
+          <button
+            onClick={handleSubmit}
+            className="px-6 py-2 rounded-lg bg-pink-600 text-white hover:bg-pink-700 text-sm font-medium"
+          >
+            SIMPAN PEMBAYARAN
+          </button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/ui/navbardr.tsx b/frontend/src/components/ui/navbardr.tsx
index 3d7d0bf..25a53d7 100644
--- a/frontend/src/components/ui/navbardr.tsx
+++ b/frontend/src/components/ui/navbardr.tsx
@@ -140,49 +140,49 @@ export default function Navbar() {
                 </div>
 
                 <div className="py-2">
-  <DropdownItem
-    href="/dashboard/dokter/main"
-    icon={<LayoutDashboard className="w-5 h-5" />}
-    text="Dashboard"
-    active={pathname === "/dashboard/dokter/main"}
-  />
+              <DropdownItem
+                href="/dashboard/dokter/main"
+                icon={<LayoutDashboard className="w-5 h-5" />}
+                text="Dashboard"
+                active={pathname === "/dashboard/dokter/main"}
+              />
 
-  <DropdownItem
-    href="/dashboard/dokter/akun"
-    icon={<User className="w-5 h-5" />}
-    text="Profil"
-    active={pathname === "/dashboard/dokter/akun"}
-  />
+              <DropdownItem
+                href="/dashboard/dokter/akun"
+                icon={<User className="w-5 h-5" />}
+                text="Profil"
+                active={pathname === "/dashboard/dokter/akun"}
+              />
 
-  {/* PASIEN (Daftar Pasien + Antrian + Rekam Medis) */}
-  <DropdownItem
-    href="/dashboard/dokter/pasien/daftar-pasien"
-    icon={<Users className="w-5 h-5" />}
-    text="Daftar Pasien"
-    active={pathname.startsWith("/dashboard/dokter/pasien")}
-  />
+              {/* PASIEN (Daftar Pasien + Antrian + Rekam Medis) */}
+              <DropdownItem
+                href="/dashboard/dokter/pasien/daftar-pasien"
+                icon={<Users className="w-5 h-5" />}
+                text="Daftar Pasien"
+                active={pathname.startsWith("/dashboard/dokter/pasien")}
+              />
 
-  <DropdownItem
-    href="/dashboard/dokter/kalender"
-    icon={<Calendar className="w-5 h-5" />}
-    text="Kalender"
-    active={pathname.startsWith("/dashboard/dokter/kalender")}
-  />
+              <DropdownItem
+                href="/dashboard/dokter/kalender"
+                icon={<Calendar className="w-5 h-5" />}
+                text="Kalender"
+                active={pathname.startsWith("/dashboard/dokter/kalender")}
+              />
 
-  <DropdownItem
-    href="/dashboard/dokter/keuangan"
-    icon={<FileText className="w-5 h-5" />}
-    text="Keuangan"
-    active={pathname.startsWith("/dashboard/dokter/keuangan")}
-  />
+              <DropdownItem
+                href="/dashboard/dokter/keuangan"
+                icon={<FileText className="w-5 h-5" />}
+                text="Keuangan"
+                active={pathname.startsWith("/dashboard/dokter/keuangan")}
+              />
 
-  <DropdownItem
-    href="/dashboard/dokter/profil/akun"
-    icon={<Settings className="w-5 h-5" />}
-    text="Pengaturan"
-    active={pathname.startsWith("/dashboard/dokter/profil")}
-  />
-</div>
+              <DropdownItem
+                href="/dashboard/dokter/profil/akun"
+                icon={<Settings className="w-5 h-5" />}
+                text="Pengaturan"
+                active={pathname.startsWith("/dashboard/dokter/profil")}
+              />
+            </div>
 
 
                 <div className="border-t border-gray-200 py-2">
diff --git a/frontend/src/components/ui/navbarpr.tsx b/frontend/src/components/ui/navbarpr.tsx
index 9a785f8..1143be1 100644
--- a/frontend/src/components/ui/navbarpr.tsx
+++ b/frontend/src/components/ui/navbarpr.tsx
@@ -10,6 +10,7 @@ import {
   Calendar,
   Users,
   MapPin,
+  FileText,
   Settings,
   LogOut,
   LayoutDashboard,
@@ -162,6 +163,14 @@ export default function Navbar() {
                     text="Kalender"
                     active={pathname === "/dashboard/perawat/kalenderpr"}
                   />
+
+                   <DropdownItem
+                    href="/dashboard/perawat/pembayaran"
+                    icon={<FileText className="w-5 h-5" />}
+                    text="Pembayaran"
+                    active={pathname.startsWith("/dashboard/perawat/pembayaran")}
+                  />
+
                   <DropdownItem
                     href="/dashboard/perawat/profilpr/akunpr"
                     icon={<Settings className="w-5 h-5" />}