diff --git a/docs/api-docs.yaml b/docs/api-docs.yaml
index 025d4af..f8620f9 100644
--- a/docs/api-docs.yaml
+++ b/docs/api-docs.yaml
@@ -819,35 +819,83 @@ components:
           format: date-time
 
     # ValueSets
+    ValueSetLibItem:
+      type: object
+      description: Library/system value set item from JSON files
+      properties:
+        value:
+          type: string
+          description: The value/key code
+        label:
+          type: string
+          description: The display label
+
     ValueSetDef:
       type: object
+      description: User-defined value set definition (from database)
       properties:
-        id:
+        VSetID:
           type: integer
-        VSetCode:
+          description: Primary key
+        SiteID:
+          type: integer
+          description: Site reference
+        VSName:
           type: string
-        VSetName:
+          description: Value set name
+        VSDesc:
           type: string
-        Description:
+          description: Value set description
+        CreateDate:
           type: string
-        Category:
+          format: date-time
+          description: Creation timestamp
+        EndDate:
           type: string
+          format: date-time
+          nullable: true
+          description: Soft delete timestamp
+        ItemCount:
+          type: integer
+          description: Number of items in this value set
 
     ValueSetItem:
       type: object
+      description: User-defined value set item (from database)
       properties:
-        id:
+        VID:
           type: integer
+          description: Primary key
+        SiteID:
+          type: integer
+          description: Site reference
         VSetID:
           type: integer
+          description: Reference to value set definition
+        VOrder:
+          type: integer
+          description: Display order
         VValue:
           type: string
-        VLabel:
+          description: The value code
+        VDesc:
           type: string
-        VSeq:
-          type: integer
-        IsActive:
-          type: boolean
+          description: The display description/label
+        VCategory:
+          type: string
+          description: Category code
+        CreateDate:
+          type: string
+          format: date-time
+          description: Creation timestamp
+        EndDate:
+          type: string
+          format: date-time
+          nullable: true
+          description: Soft delete timestamp
+        VSName:
+          type: string
+          description: Value set name (from joined definition)
 
     # Master Data
     Location:
@@ -1391,10 +1439,21 @@ paths:
                 properties:
                   status:
                     type: string
+                  message:
+                    type: string
                   data:
                     type: array
                     items:
                       $ref: '#/components/schemas/PatientVisit'
+                  total:
+                    type: integer
+                    description: Total number of records
+                  page:
+                    type: integer
+                    description: Current page number
+                  per_page:
+                    type: integer
+                    description: Number of records per page
 
     post:
       tags: [Patient Visits]
@@ -2863,7 +2922,7 @@ paths:
     get:
       tags: [ValueSets]
       summary: List lib value sets
-      description: List all library/system value sets from JSON files
+      description: List all library/system value sets from JSON files with item counts. Returns an object where keys are value set names and values are item counts.
       security:
         - bearerAuth: []
       parameters:
@@ -2871,7 +2930,7 @@ paths:
           in: query
           schema:
             type: string
-          description: Optional search term to filter value sets
+          description: Optional search term to filter value set names
       responses:
         '200':
           description: List of lib value sets with item counts
@@ -2882,17 +2941,72 @@ paths:
                 properties:
                   status:
                     type: string
+                    example: success
                   data:
                     type: object
                     additionalProperties:
                       type: integer
                       description: Number of items in each value set
+                    example:
+                      sex: 3
+                      marital_status: 6
+                      order_status: 6
 
   /api/valueset/{key}:
     get:
       tags: [ValueSets]
       summary: Get lib value set by key
-      description: Get a specific library/system value set from JSON files
+      description: |
+        Get a specific library/system value set from JSON files.
+        
+        **Available value set keys:**
+        - `activity_result` - Activity Result
+        - `additive` - Additive
+        - `adt_event` - ADT Event
+        - `area_class` - Area Class
+        - `body_site` - Body Site
+        - `collection_method` - Collection Method
+        - `container_cap_color` - Container Cap Color
+        - `container_class` - Container Class
+        - `container_size` - Container Size
+        - `country` - Country
+        - `death_indicator` - Death Indicator
+        - `did_type` - DID Type
+        - `enable_disable` - Enable/Disable
+        - `entity_type` - Entity Type
+        - `ethnic` - Ethnic
+        - `fasting_status` - Fasting Status
+        - `formula_language` - Formula Language
+        - `generate_by` - Generate By
+        - `identifier_type` - Identifier Type
+        - `location_type` - Location Type
+        - `marital_status` - Marital Status
+        - `math_sign` - Math Sign
+        - `numeric_ref_type` - Numeric Reference Type
+        - `operation` - Operation (CRUD)
+        - `order_priority` - Order Priority
+        - `order_status` - Order Status
+        - `race` - Race (Ethnicity)
+        - `range_type` - Range Type
+        - `reference_type` - Reference Type
+        - `religion` - Religion
+        - `requested_entity` - Requested Entity
+        - `result_type` - Result Type
+        - `result_unit` - Result Unit
+        - `sex` - Sex
+        - `site_class` - Site Class
+        - `site_type` - Site Type
+        - `specimen_activity` - Specimen Activity
+        - `specimen_condition` - Specimen Condition
+        - `specimen_role` - Specimen Role
+        - `specimen_status` - Specimen Status
+        - `specimen_type` - Specimen Type
+        - `test_activity` - Test Activity
+        - `test_type` - Test Type
+        - `text_ref_type` - Text Reference Type
+        - `unit` - Unit
+        - `v_category` - VCategory
+        - `ws_type` - Workstation Type
       security:
         - bearerAuth: []
       parameters:
@@ -2901,7 +3015,8 @@ paths:
           required: true
           schema:
             type: string
-          description: Value set key (e.g., marital_status, sex)
+            enum: [activity_result, additive, adt_event, area_class, body_site, collection_method, container_cap_color, container_class, container_size, country, death_indicator, did_type, enable_disable, entity_type, ethnic, fasting_status, formula_language, generate_by, identifier_type, location_type, marital_status, math_sign, numeric_ref_type, operation, order_priority, order_status, race, range_type, reference_type, religion, requested_entity, result_type, result_unit, sex, site_class, site_type, specimen_activity, specimen_condition, specimen_role, specimen_status, specimen_type, test_activity, test_type, text_ref_type, unit, v_category, ws_type]
+          description: Value set key name
       responses:
         '200':
           description: Lib value set details
@@ -2915,23 +3030,29 @@ paths:
                   data:
                     type: array
                     items:
-                      type: object
-                      properties:
-                        value:
-                          type: string
-                        label:
-                          type: string
+                      $ref: '#/components/schemas/ValueSetLibItem'
 
   /api/valueset/refresh:
     post:
       tags: [ValueSets]
       summary: Refresh lib ValueSet cache
-      description: Clear and reload the library/system ValueSet cache from JSON files
+      description: Clear and reload the library/system ValueSet cache from JSON files. Call this after modifying JSON files in app/Libraries/Data/.
       security:
         - bearerAuth: []
       responses:
         '200':
           description: Lib ValueSet cache refreshed
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  status:
+                    type: string
+                    example: success
+                  message:
+                    type: string
+                    example: Cache cleared
 
   /api/valueset/user/items:
     get:
@@ -2946,6 +3067,16 @@ paths:
           schema:
             type: integer
           description: Filter by ValueSet ID
+        - name: search
+          in: query
+          schema:
+            type: string
+          description: Search term to filter by VValue, VDesc, or VSName
+        - name: param
+          in: query
+          schema:
+            type: string
+          description: Alternative search parameter (alias for search)
       responses:
         '200':
           description: List of user value set items
@@ -2954,6 +3085,8 @@ paths:
               schema:
                 type: object
                 properties:
+                  status:
+                    type: string
                   data:
                     type: array
                     items:
@@ -2970,10 +3103,39 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/ValueSetItem'
+              type: object
+              required:
+                - VSetID
+              properties:
+                SiteID:
+                  type: integer
+                  description: Site reference (default 1)
+                VSetID:
+                  type: integer
+                  description: Reference to value set definition (required)
+                VOrder:
+                  type: integer
+                  description: Display order (default 0)
+                VValue:
+                  type: string
+                  description: The value code
+                VDesc:
+                  type: string
+                  description: The display description/label
       responses:
         '201':
           description: User value set item created
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  status:
+                    type: string
+                  message:
+                    type: string
+                  data:
+                    $ref: '#/components/schemas/ValueSetItem'
 
   /api/valueset/user/items/{id}:
     get:
@@ -2991,6 +3153,15 @@ paths:
       responses:
         '200':
           description: User value set item details
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  status:
+                    type: string
+                  data:
+                    $ref: '#/components/schemas/ValueSetItem'
 
     put:
       tags: [ValueSets]
@@ -3009,10 +3180,37 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/ValueSetItem'
+              type: object
+              properties:
+                SiteID:
+                  type: integer
+                  description: Site reference
+                VSetID:
+                  type: integer
+                  description: Reference to value set definition
+                VOrder:
+                  type: integer
+                  description: Display order
+                VValue:
+                  type: string
+                  description: The value code
+                VDesc:
+                  type: string
+                  description: The display description/label
       responses:
         '200':
           description: User value set item updated
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  status:
+                    type: string
+                  message:
+                    type: string
+                  data:
+                    $ref: '#/components/schemas/ValueSetItem'
 
     delete:
       tags: [ValueSets]
@@ -3029,6 +3227,15 @@ paths:
       responses:
         '200':
           description: User value set item deleted
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  status:
+                    type: string
+                  message:
+                    type: string
 
   /api/valueset/user/def:
     get:
@@ -3037,9 +3244,47 @@ paths:
       description: List value set definitions from database (user-defined)
       security:
         - bearerAuth: []
+      parameters:
+        - name: search
+          in: query
+          schema:
+            type: string
+          description: Optional search term to filter definitions
+        - name: page
+          in: query
+          schema:
+            type: integer
+            default: 1
+          description: Page number for pagination
+        - name: limit
+          in: query
+          schema:
+            type: integer
+            default: 100
+          description: Number of items per page
       responses:
         '200':
           description: List of user value set definitions
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  status:
+                    type: string
+                  data:
+                    type: array
+                    items:
+                      $ref: '#/components/schemas/ValueSetDef'
+                  meta:
+                    type: object
+                    properties:
+                      total:
+                        type: integer
+                      page:
+                        type: integer
+                      limit:
+                        type: integer
 
     post:
       tags: [ValueSets]
@@ -3052,10 +3297,31 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/ValueSetDef'
+              type: object
+              properties:
+                SiteID:
+                  type: integer
+                  description: Site reference (default 1)
+                VSName:
+                  type: string
+                  description: Value set name
+                VSDesc:
+                  type: string
+                  description: Value set description
       responses:
         '201':
           description: User value set definition created
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  status:
+                    type: string
+                  message:
+                    type: string
+                  data:
+                    $ref: '#/components/schemas/ValueSetDef'
 
   /api/valueset/user/def/{id}:
     get:
@@ -3073,6 +3339,15 @@ paths:
       responses:
         '200':
           description: User value set definition details
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  status:
+                    type: string
+                  data:
+                    $ref: '#/components/schemas/ValueSetDef'
 
     put:
       tags: [ValueSets]
@@ -3091,10 +3366,31 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/ValueSetDef'
+              type: object
+              properties:
+                SiteID:
+                  type: integer
+                  description: Site reference
+                VSName:
+                  type: string
+                  description: Value set name
+                VSDesc:
+                  type: string
+                  description: Value set description
       responses:
         '200':
           description: User value set definition updated
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  status:
+                    type: string
+                  message:
+                    type: string
+                  data:
+                    $ref: '#/components/schemas/ValueSetDef'
 
     delete:
       tags: [ValueSets]
@@ -3111,6 +3407,15 @@ paths:
       responses:
         '200':
           description: User value set definition deleted
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  status:
+                    type: string
+                  message:
+                    type: string
 
   # ========================================
   # Master Data Routes
diff --git a/src/lib/components/SelectDropdown.svelte b/src/lib/components/SelectDropdown.svelte
index 7b92338..32ed546 100644
--- a/src/lib/components/SelectDropdown.svelte
+++ b/src/lib/components/SelectDropdown.svelte
@@ -63,6 +63,11 @@
       dropdownOptions = options;
     }
   });
+
+  // Check if current value exists in options
+  let hasValidValue = $derived(
+    !value || dropdownOptions.some(opt => opt.value === value)
+  );
 </script>
 
 <div class="form-control w-full {className}">
@@ -87,7 +92,11 @@
     >
       <option value="">{placeholder}</option>
       
-      {#each dropdownOptions as option}
+      {#if value && !hasValidValue}
+        <option value={value} selected>{value}</option>
+      {/if}
+      
+      {#each dropdownOptions as option (option.value)}
         <option value={option.value}>{option.label}</option>
       {/each}
     </select>
diff --git a/src/routes/(app)/patients/+page.svelte b/src/routes/(app)/patients/+page.svelte
index 70097b1..43f41ca 100644
--- a/src/routes/(app)/patients/+page.svelte
+++ b/src/routes/(app)/patients/+page.svelte
@@ -1,183 +1,49 @@
 <script>
   import { onMount } from 'svelte';
-  import {
-    fetchPatients,
-    fetchPatient,
-    createPatient,
-    updatePatient,
-    deletePatient,
-  } from '$lib/api/patients.js';
-  import { fetchProvinces, fetchCities } from '$lib/api/geography.js';
-  import {
-    fetchVisitsByPatient,
-    fetchVisit,
-    createVisit,
-    updateVisit,
-    deleteVisit,
-  } from '$lib/api/visits.js';
+  import { fetchPatients, fetchPatient, deletePatient } from '$lib/api/patients.js';
   import { success as toastSuccess, error as toastError } from '$lib/utils/toast.js';
   import DataTable from '$lib/components/DataTable.svelte';
   import Modal from '$lib/components/Modal.svelte';
-  import SelectDropdown from '$lib/components/SelectDropdown.svelte';
-  import { Plus, Edit2, Trash2, Search, ChevronLeft, ChevronRight, User, Calendar, Stethoscope, MapPin, Clock } from 'lucide-svelte';
+  import PatientFormModal from './PatientFormModal.svelte';
+  import PatientDetailModal from './PatientDetailModal.svelte';
+  import VisitListModal from './VisitListModal.svelte';
+  import { Plus, Edit2, Trash2, Search, ChevronLeft, ChevronRight, User, Calendar } from 'lucide-svelte';
 
   // State
   let loading = $state(false);
-  let modalLoading = $state(false);
   let patients = $state([]);
-  let provinces = $state([]);
-  let cities = $state([]);
-  let modalOpen = $state(false);
-  let modalMode = $state('create');
-  let saving = $state(false);
-  let deleteConfirmOpen = $state(false);
-  let deleteItem = $state(null);
-  let visitsModalOpen = $state(false);
-  let patientVisits = $state([]);
-  let currentPatientForVisits = $state(null);
-  let visitModalOpen = $state(false);
-  let visitModalMode = $state('create');
-  let visitFormLoading = $state(false);
-  let visitFormErrors = $state({});
-  let visitDeleteConfirmOpen = $state(false);
-  let visitToDelete = $state(null);
-  let currentStep = $state(1);
-  let formErrors = $state({});
-  let previousProvince = $state('');
-
-  // Search and pagination
   let searchQuery = $state('');
   let currentPage = $state(1);
   let perPage = $state(20);
   let totalItems = $state(0);
   let totalPages = $state(1);
 
-  // Form data
-  let formData = $state({
-    InternalPID: null,
-    PatientID: '',
-    Prefix: '',
-    NameFirst: '',
-    NameMiddle: '',
-    NameLast: '',
-    NameMaiden: '',
-    Suffix: '',
-    Sex: '',
-    Birthdate: '',
-    PlaceOfBirth: '',
-    Citizenship: '',
-    Street_1: '',
-    Street_2: '',
-    Street_3: '',
-    ZIP: '',
-    Province: '',
-    City: '',
-    Country: 'Indonesia',
-    Phone: '',
-    MobilePhone: '',
-    EmailAddress1: '',
-    EmailAddress2: '',
-    PatIdt: { IdentifierType: '', Identifier: '' },
-    Race: '',
-    MaritalStatus: '',
-    Religion: '',
-    Ethnic: '',
-    DeathIndicator: 'N',
-    TimeOfDeath: '',
-    PatCom: '',
-  });
-
-  // Visit form data
-  let visitFormData = $state({
-    InternalPVID: null,
-    PatientID: '',
-    EpisodeID: '',
-    InternalPID: null,
-    PV1: {
-      PatientClass: '',
-      AssignedPatientLocation: '',
-      AttendingDoctor: '',
-      ReferringDoctor: '',
-      AdmittingDoctor: '',
-      AdmitDateTime: '',
-      DischargeDateTime: '',
-    },
-  });
-
-  // Dropdown options (prefix - valueset not available yet)
-  const prefixOptions = [
-    { value: 'Mr', label: 'Mr' },
-    { value: 'Mrs', label: 'Mrs' },
-    { value: 'Ms', label: 'Ms' },
-    { value: 'Dr', label: 'Dr' },
-    { value: 'Prof', label: 'Prof' },
-  ];
-
-  // Patient class options
-  const patientClassOptions = [
-    { value: 'E', label: 'Emergency' },
-    { value: 'I', label: 'Inpatient' },
-    { value: 'O', label: 'Outpatient' },
-    { value: 'P', label: 'Preadmit' },
-    { value: 'R', label: 'Recurring Patient' },
-    { value: 'B', label: 'Obstetrics' },
-    { value: 'C', label: 'Commercial Account' },
-    { value: 'N', label: 'Not Applicable' },
-    { value: 'U', label: 'Unknown' },
-  ];
-
-  // ADT Status options with colors
-  const adtStatusOptions = [
-    { value: 'A01', label: 'Admitted', color: 'badge-error', icon: '🏥' },
-    { value: 'A02', label: 'Transferred', color: 'badge-warning', icon: '🔄' },
-    { value: 'A03', label: 'Discharged', color: 'badge-success', icon: '✅' },
-    { value: 'A04', label: 'Registered', color: 'badge-info', icon: '📝' },
-    { value: 'A08', label: 'Updated', color: 'badge-ghost', icon: '✏️' },
-  ];
-
-  function getADTStatus(code) {
-    return adtStatusOptions.find((s) => s.value === code) || { label: 'Unknown', color: 'badge-ghost', icon: '❓' };
-  }
-
-  function getPatientClassLabel(code) {
-    const option = patientClassOptions.find((o) => o.value === code);
-    return option ? option.label : code || '-';
-  }
-
-  // Derived values
-  const provinceOptions = $derived(
-    provinces.map((p) => ({ value: p.value, label: p.label }))
-  );
-
-  const cityOptions = $derived(
-    cities.map((c) => ({ value: c.value, label: c.label }))
-  );
+  // Modal states
+  let patientFormOpen = $state(false);
+  let patientDetailOpen = $state(false);
+  let deleteConfirmOpen = $state(false);
+  let visitListOpen = $state(false);
+  let selectedPatient = $state(null);
+  let patientToDelete = $state(null);
+  let patientFormLoading = $state(false);
 
   const columns = [
     { key: 'PatientID', label: 'Patient ID', class: 'font-medium' },
     { key: 'FullName', label: 'Name' },
     { key: 'SexLabel', label: 'Sex' },
     { key: 'BirthdateFormatted', label: 'Birthdate' },
-    { key: 'actions', label: 'Actions', class: 'w-32 text-center' },
+    { key: 'actions', label: 'Actions', class: 'w-40 text-center' },
   ];
 
-  onMount(async () => {
-    await Promise.all([
-      loadPatients(),
-      loadProvinces(),
-    ]);
+  onMount(() => {
+    loadPatients();
   });
 
   async function loadPatients() {
     loading = true;
     try {
-      const params = {
-        page: currentPage,
-        perPage: perPage,
-      };
-      if (searchQuery.trim()) {
-        params.Name = searchQuery.trim();
-      }
+      const params = { page: currentPage, perPage };
+      if (searchQuery.trim()) params.Name = searchQuery.trim();
 
       const response = await fetchPatients(params);
       patients = Array.isArray(response.data) ? response.data : [];
@@ -194,30 +60,6 @@
     }
   }
 
-  async function loadProvinces() {
-    try {
-      const response = await fetchProvinces();
-      provinces = Array.isArray(response.data) ? response.data : [];
-    } catch (err) {
-      console.error('Failed to load provinces:', err);
-      provinces = [];
-    }
-  }
-
-  async function loadCities(provinceCode) {
-    if (!provinceCode) {
-      cities = [];
-      return;
-    }
-    try {
-      const response = await fetchCities(provinceCode);
-      cities = Array.isArray(response.data) ? response.data : (Array.isArray(response) ? response : []);
-    } catch (err) {
-      console.error('Failed to load cities:', err);
-      cities = [];
-    }
-  }
-
   function handleSearch() {
     currentPage = 1;
     loadPatients();
@@ -231,331 +73,44 @@
   }
 
   function openCreateModal() {
-    modalMode = 'create';
-    currentStep = 1;
-    formErrors = {};
-    formData = {
-      InternalPID: null,
-      PatientID: '',
-      Prefix: '',
-      NameFirst: '',
-      NameMiddle: '',
-      NameLast: '',
-      NameMaiden: '',
-      Suffix: '',
-      Sex: '',
-      Birthdate: '',
-      PlaceOfBirth: '',
-      Citizenship: '',
-      Street_1: '',
-      Street_2: '',
-      Street_3: '',
-      ZIP: '',
-      Province: '',
-      City: '',
-      Country: 'Indonesia',
-      Phone: '',
-      MobilePhone: '',
-      EmailAddress1: '',
-      EmailAddress2: '',
-      PatIdt: { IdentifierType: '', Identifier: '' },
-      Race: '',
-      MaritalStatus: '',
-      Religion: '',
-      Ethnic: '',
-      DeathIndicator: 'N',
-      TimeOfDeath: '',
-      PatCom: '',
-    };
-    cities = [];
-    modalOpen = true;
+    selectedPatient = null;
+    patientFormOpen = true;
   }
 
-  async function openEditModal(row) {
-    modalMode = 'edit';
-    currentStep = 1;
-    formErrors = {};
-    modalLoading = true;
-
+  async function openEditModal(patient) {
+    // Reset selectedPatient to null first to prevent showing stale data
+    selectedPatient = null;
+    patientFormLoading = true;
+    patientFormOpen = true;
     try {
-      // Fetch full patient details including individual name fields
-      const response = await fetchPatient(row.InternalPID);
-      const patient = response.data || response;
-
-      formData = {
-        InternalPID: patient.InternalPID,
-        PatientID: patient.PatientID || '',
-        Prefix: patient.Prefix || '',
-        NameFirst: patient.NameFirst || '',
-        NameMiddle: patient.NameMiddle || '',
-        NameLast: patient.NameLast || '',
-        NameMaiden: patient.NameMaiden || '',
-        Suffix: patient.Suffix || '',
-        Sex: patient.Sex || '',
-        Birthdate: patient.Birthdate ? patient.Birthdate.split('T')[0] : '',
-        PlaceOfBirth: patient.PlaceOfBirth || '',
-        Citizenship: patient.Citizenship || '',
-        Street_1: patient.Street_1 || '',
-        Street_2: patient.Street_2 || '',
-        Street_3: patient.Street_3 || '',
-        ZIP: patient.ZIP || '',
-        Province: patient.Province || '',
-        City: patient.City || '',
-        Country: patient.Country || 'Indonesia',
-        Phone: patient.Phone || '',
-        MobilePhone: patient.MobilePhone || '',
-        EmailAddress1: patient.EmailAddress1 || '',
-        EmailAddress2: patient.EmailAddress2 || '',
-        PatIdt: patient.PatIdt || { IdentifierType: '', Identifier: '' },
-        Race: patient.Race || '',
-        MaritalStatus: patient.MaritalStatus || '',
-        Religion: patient.Religion || '',
-        Ethnic: patient.Ethnic || '',
-        DeathIndicator: patient.DeathIndicator || 'N',
-        TimeOfDeath: patient.TimeOfDeath ? patient.TimeOfDeath.split('T')[0] : '',
-        PatCom: patient.PatCom || '',
-      };
-
-      // Load cities if province is set
-      if (formData.Province) {
-        await loadCities(formData.Province);
-      }
-
-      modalOpen = true;
+      const response = await fetchPatient(patient.InternalPID);
+      selectedPatient = response.data || patient;
     } catch (err) {
       toastError(err.message || 'Failed to load patient details');
+      selectedPatient = patient;
     } finally {
-      modalLoading = false;
+      patientFormLoading = false;
     }
   }
 
-  function validateStep(step) {
-    const errors = {};
-
-    if (step === 1) {
-      if (!formData.PatientID?.trim()) {
-        errors.PatientID = 'Patient ID is required';
-      }
-      if (!formData.NameFirst?.trim()) {
-        errors.NameFirst = 'First name is required';
-      }
-      if (!formData.Sex) {
-        errors.Sex = 'Sex is required';
-      }
-      if (!formData.Birthdate) {
-        errors.Birthdate = 'Birthdate is required';
-      }
-    }
-
-    formErrors = errors;
-    return Object.keys(errors).length === 0;
+  function openDetailModal(patient) {
+    selectedPatient = patient;
+    patientDetailOpen = true;
   }
 
-  function nextStep() {
-    if (validateStep(currentStep)) {
-      currentStep++;
-    }
+  function openVisitList(patient) {
+    selectedPatient = patient;
+    visitListOpen = true;
   }
 
-  function prevStep() {
-    currentStep--;
-    formErrors = {};
-  }
-
-  async function handleSave() {
-    // Validate all required fields
-    if (!validateStep(1)) {
-      currentStep = 1;
-      return;
-    }
-
-    saving = true;
-    try {
-      // Prepare data for API
-      const payload = {
-        ...formData,
-        Birthdate: formData.Birthdate ? new Date(formData.Birthdate).toISOString() : undefined,
-        TimeOfDeath: formData.TimeOfDeath ? new Date(formData.TimeOfDeath).toISOString() : undefined,
-      };
-
-      // Remove empty optional fields
-      Object.keys(payload).forEach((key) => {
-        if (payload[key] === '' || payload[key] === null) {
-          delete payload[key];
-        }
-      });
-
-      if (modalMode === 'create') {
-        await createPatient(payload);
-        toastSuccess('Patient created successfully');
-      } else {
-        await updatePatient(payload);
-        toastSuccess('Patient updated successfully');
-      }
-      modalOpen = false;
-      await loadPatients();
-    } catch (err) {
-      toastError(err.message || 'Failed to save patient');
-    } finally {
-      saving = false;
-    }
-  }
-
-  function confirmDelete(row) {
-    deleteItem = row;
+  function confirmDelete(patient) {
+    patientToDelete = patient;
     deleteConfirmOpen = true;
   }
 
-  async function openVisitsModal(patient) {
-    currentPatientForVisits = patient;
-    visitsModalOpen = true;
-    await loadVisitsForPatient(patient.InternalPID);
-  }
-
-  async function loadVisitsForPatient(patientId) {
-    try {
-      const response = await fetchVisitsByPatient(patientId);
-      patientVisits = Array.isArray(response.data) ? response.data : [];
-    } catch (err) {
-      toastError(err.message || 'Failed to load patient visits');
-      patientVisits = [];
-    }
-  }
-
-  function openCreateVisitModal() {
-    visitModalMode = 'create';
-    visitFormErrors = {};
-    visitFormData = {
-      InternalPVID: null,
-      PatientID: currentPatientForVisits?.PatientID || '',
-      EpisodeID: '',
-      InternalPID: currentPatientForVisits?.InternalPID || null,
-      PV1: {
-        PatientClass: '',
-        AssignedPatientLocation: '',
-        AttendingDoctor: '',
-        ReferringDoctor: '',
-        AdmittingDoctor: '',
-        AdmitDateTime: '',
-        DischargeDateTime: '',
-      },
-    };
-    visitModalOpen = true;
-  }
-
-  async function openEditVisitModal(visit) {
-    visitModalMode = 'edit';
-    visitFormErrors = {};
-    visitFormLoading = true;
-    visitModalOpen = true;
-
-    try {
-      const response = await fetchVisit(visit.PVID);
-      const visitData = response.data || response;
-
-      visitFormData = {
-        InternalPVID: visitData.InternalPVID,
-        PatientID: visitData.PatientID || currentPatientForVisits?.PatientID || '',
-        EpisodeID: visitData.EpisodeID || '',
-        InternalPID: visitData.InternalPID || currentPatientForVisits?.InternalPID || null,
-        PV1: {
-          PatientClass: visitData.PV1?.PatientClass || '',
-          AssignedPatientLocation: visitData.PV1?.AssignedPatientLocation || '',
-          AttendingDoctor: visitData.PV1?.AttendingDoctor || '',
-          ReferringDoctor: visitData.PV1?.ReferringDoctor || '',
-          AdmittingDoctor: visitData.PV1?.AdmittingDoctor || '',
-          AdmitDateTime: visitData.PV1?.AdmitDateTime
-            ? new Date(visitData.PV1.AdmitDateTime).toISOString().slice(0, 16)
-            : '',
-          DischargeDateTime: visitData.PV1?.DischargeDateTime
-            ? new Date(visitData.PV1.DischargeDateTime).toISOString().slice(0, 16)
-            : '',
-        },
-      };
-    } catch (err) {
-      toastError(err.message || 'Failed to load visit details');
-      visitModalOpen = false;
-    } finally {
-      visitFormLoading = false;
-    }
-  }
-
-  function validateVisitForm() {
-    const errors = {};
-
-    if (!visitFormData.EpisodeID?.trim()) {
-      errors.EpisodeID = 'Episode ID is required';
-    }
-    if (!visitFormData.PV1?.PatientClass) {
-      errors.PatientClass = 'Patient class is required';
-    }
-
-    visitFormErrors = errors;
-    return Object.keys(errors).length === 0;
-  }
-
-  async function handleSaveVisit() {
-    if (!validateVisitForm()) {
-      return;
-    }
-
-    saving = true;
-    try {
-      const payload = {
-        ...visitFormData,
-        PV1: {
-          ...visitFormData.PV1,
-          AdmitDateTime: visitFormData.PV1.AdmitDateTime
-            ? new Date(visitFormData.PV1.AdmitDateTime).toISOString()
-            : undefined,
-          DischargeDateTime: visitFormData.PV1.DischargeDateTime
-            ? new Date(visitFormData.PV1.DischargeDateTime).toISOString()
-            : undefined,
-        },
-      };
-
-      // Remove empty optional fields from PV1
-      Object.keys(payload.PV1).forEach((key) => {
-        if (payload.PV1[key] === '' || payload.PV1[key] === null) {
-          delete payload.PV1[key];
-        }
-      });
-
-      if (visitModalMode === 'create') {
-        await createVisit(payload);
-        toastSuccess('🎉 Visit created successfully!');
-      } else {
-        await updateVisit(payload);
-        toastSuccess('✨ Visit updated successfully!');
-      }
-      visitModalOpen = false;
-      await loadVisitsForPatient(currentPatientForVisits.InternalPID);
-    } catch (err) {
-      toastError(err.message || 'Failed to save visit');
-    } finally {
-      saving = false;
-    }
-  }
-
-  function confirmDeleteVisit(visit) {
-    visitToDelete = visit;
-    visitDeleteConfirmOpen = true;
-  }
-
-  async function handleDeleteVisit() {
-    try {
-      await deleteVisit(visitToDelete.InternalPVID);
-      toastSuccess('🗑️ Visit deleted successfully');
-      visitDeleteConfirmOpen = false;
-      await loadVisitsForPatient(currentPatientForVisits.InternalPID);
-    } catch (err) {
-      toastError(err.message || 'Failed to delete visit');
-    }
-  }
-
   async function handleDelete() {
     try {
-      await deletePatient(deleteItem.InternalPID);
+      await deletePatient(patientToDelete.InternalPID);
       toastSuccess('Patient deleted successfully');
       deleteConfirmOpen = false;
       await loadPatients();
@@ -564,13 +119,9 @@
     }
   }
 
-  $effect(() => {
-    if (formData.Province !== previousProvince) {
-      previousProvince = formData.Province;
-      formData.City = '';
-      loadCities(formData.Province);
-    }
-  });
+  function handlePatientSaved() {
+    loadPatients();
+  }
 </script>
 
 <div class="p-6">
@@ -598,9 +149,7 @@
         />
         <Search class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
       </div>
-      <button class="btn btn-outline" onclick={handleSearch}>
-        Search
-      </button>
+      <button class="btn btn-outline" onclick={handleSearch}>Search</button>
     </div>
   </div>
 
@@ -610,23 +159,21 @@
       {columns}
       data={patients.map((p) => ({
         ...p,
-        FullName: p.FullName || [p.Prefix, p.NameFirst, p.NameMiddle, p.NameLast, p.Suffix]
-          .filter(Boolean)
-          .join(' ') || '-',
+        FullName: p.FullName || [p.Prefix, p.NameFirst, p.NameMiddle, p.NameLast].filter(Boolean).join(' ') || '-',
         SexLabel: p.SexLabel || (p.Sex === '1' ? 'Female' : p.Sex === '2' ? 'Male' : '-'),
-        BirthdateFormatted: p.Birthdate
-          ? new Date(p.Birthdate).toLocaleDateString()
-          : '-',
+        BirthdateFormatted: p.Birthdate ? new Date(p.Birthdate).toLocaleDateString() : '-',
       }))}
       {loading}
       emptyMessage="No patients found"
       hover={true}
-      bordered={false}
     >
-      {#snippet cell({ column, row, value })}
+      {#snippet cell({ column, row })}
         {#if column.key === 'actions'}
-          <div class="flex justify-center gap-2">
-            <button class="btn btn-sm btn-ghost" title="View Visits" onclick={() => openVisitsModal(row)}>
+          <div class="flex justify-center gap-1">
+            <button class="btn btn-sm btn-ghost" title="View" onclick={() => openDetailModal(row)}>
+              <User class="w-4 h-4" />
+            </button>
+            <button class="btn btn-sm btn-ghost" title="Visits" onclick={() => openVisitList(row)}>
               <Calendar class="w-4 h-4" />
             </button>
             <button class="btn btn-sm btn-ghost" title="Edit" onclick={() => openEditModal(row)}>
@@ -637,33 +184,22 @@
             </button>
           </div>
         {:else}
-          {value}
+          {row[column.key]}
         {/if}
       {/snippet}
     </DataTable>
 
-    <!-- Pagination -->
     {#if totalPages > 1}
       <div class="flex items-center justify-between px-4 py-3 border-t border-base-200">
         <div class="text-sm text-gray-600">
-          Showing {(currentPage - 1) * perPage + 1} - {Math.min(currentPage * perPage, totalItems)} of {totalItems} patients
+          Showing {(currentPage - 1) * perPage + 1} - {Math.min(currentPage * perPage, totalItems)} of {totalItems}
         </div>
         <div class="flex gap-2">
-          <button
-            class="btn btn-sm btn-ghost"
-            onclick={() => handlePageChange(currentPage - 1)}
-            disabled={currentPage === 1}
-          >
+          <button class="btn btn-sm btn-ghost" onclick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1}>
             <ChevronLeft class="w-4 h-4" />
           </button>
-          <span class="btn btn-sm btn-ghost no-animation">
-            Page {currentPage} of {totalPages}
-          </span>
-          <button
-            class="btn btn-sm btn-ghost"
-            onclick={() => handlePageChange(currentPage + 1)}
-            disabled={currentPage === totalPages}
-          >
+          <span class="btn btn-sm btn-ghost no-animation">Page {currentPage} of {totalPages}</span>
+          <button class="btn btn-sm btn-ghost" onclick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages}>
             <ChevronRight class="w-4 h-4" />
           </button>
         </div>
@@ -672,869 +208,17 @@
   </div>
 </div>
 
-<!-- Patient Form Modal -->
-<Modal
-  bind:open={modalOpen}
-  title={modalMode === 'create' ? 'Add Patient' : 'Edit Patient'}
-  size="lg"
->
-  <!-- Tabs -->
-  <div class="mb-6">
-    <div class="flex items-center justify-center gap-2">
-      <button
-        class="px-4 py-2 rounded-lg transition-colors"
-        class:bg-emerald-600={currentStep === 1}
-        class:text-white={currentStep === 1}
-        class:bg-gray-100={currentStep !== 1}
-        class:text-gray-600={currentStep !== 1}
-        class:font-semibold={currentStep === 1}
-        onclick={() => (currentStep = 1)}
-      >
-        Basic Info
-      </button>
-      <button
-        class="px-4 py-2 rounded-lg transition-colors"
-        class:bg-emerald-600={currentStep === 2}
-        class:text-white={currentStep === 2}
-        class:bg-gray-100={currentStep !== 2}
-        class:text-gray-600={currentStep !== 2}
-        class:font-semibold={currentStep === 2}
-        onclick={() => (currentStep = 2)}
-      >
-        Address
-      </button>
-      <button
-        class="px-4 py-2 rounded-lg transition-colors"
-        class:bg-emerald-600={currentStep === 3}
-        class:text-white={currentStep === 3}
-        class:bg-gray-100={currentStep !== 3}
-        class:text-gray-600={currentStep !== 3}
-        class:font-semibold={currentStep === 3}
-        onclick={() => (currentStep = 3)}
-      >
-        Contact & ID
-      </button>
-      <button
-        class="px-4 py-2 rounded-lg transition-colors"
-        class:bg-emerald-600={currentStep === 4}
-        class:text-white={currentStep === 4}
-        class:bg-gray-100={currentStep !== 4}
-        class:text-gray-600={currentStep !== 4}
-        class:font-semibold={currentStep === 4}
-        onclick={() => (currentStep = 4)}
-      >
-        Additional
-      </button>
-    </div>
-  </div>
+<PatientFormModal bind:open={patientFormOpen} patient={selectedPatient} onSave={handlePatientSaved} loading={patientFormLoading} />
+<PatientDetailModal bind:open={patientDetailOpen} patient={selectedPatient} />
+<VisitListModal bind:open={visitListOpen} patient={selectedPatient} />
 
-  {#if modalLoading}
-    <div class="flex flex-col items-center justify-center py-12">
-      <span class="loading loading-spinner loading-lg text-primary"></span>
-      <p class="text-gray-500 mt-4">Loading patient data...</p>
-    </div>
-  {:else}
-  <form class="space-y-5" onsubmit={(e) => e.preventDefault()}>
-    <!-- Step 1: Basic Information -->
-    {#if currentStep === 1}
-      <div class="space-y-5">
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <div class="form-control">
-            <label class="label" for="patientId">
-              <span class="label-text font-medium">Patient ID</span>
-              <span class="label-text-alt text-error">*</span>
-            </label>
-            <input
-              id="patientId"
-              type="text"
-              class="input input-bordered w-full"
-              class:input-error={formErrors.PatientID}
-              bind:value={formData.PatientID}
-              placeholder="Enter patient ID"
-              disabled={modalMode === 'edit'}
-            />
-            {#if formErrors.PatientID}
-              <span class="text-error text-sm mt-1">{formErrors.PatientID}</span>
-            {/if}
-          </div>
-          <SelectDropdown
-            label="Prefix"
-            name="prefix"
-            bind:value={formData.Prefix}
-            options={prefixOptions}
-            placeholder="Select..."
-          />
-          <div class="form-control">
-            <label class="label" for="suffix">
-              <span class="label-text font-medium">Suffix</span>
-            </label>
-            <input
-              id="suffix"
-              type="text"
-              class="input input-bordered w-full"
-              bind:value={formData.Suffix}
-              placeholder="Jr, Sr, etc."
-            />
-          </div>
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div class="form-control">
-            <label class="label" for="nameFirst">
-              <span class="label-text font-medium">First Name</span>
-              <span class="label-text-alt text-error">*</span>
-            </label>
-            <input
-              id="nameFirst"
-              type="text"
-              class="input input-bordered w-full"
-              class:input-error={formErrors.NameFirst}
-              bind:value={formData.NameFirst}
-              placeholder="Enter first name"
-            />
-            {#if formErrors.NameFirst}
-              <span class="text-error text-sm mt-1">{formErrors.NameFirst}</span>
-            {/if}
-          </div>
-          <div class="form-control">
-            <label class="label" for="nameLast">
-              <span class="label-text font-medium">Last Name</span>
-            </label>
-            <input
-              id="nameLast"
-              type="text"
-              class="input input-bordered w-full"
-              bind:value={formData.NameLast}
-              placeholder="Enter last name"
-            />
-          </div>
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div class="form-control">
-            <label class="label" for="nameMiddle">
-              <span class="label-text font-medium">Middle Name</span>
-            </label>
-            <input
-              id="nameMiddle"
-              type="text"
-              class="input input-bordered w-full"
-              bind:value={formData.NameMiddle}
-              placeholder="Enter middle name"
-            />
-          </div>
-          <div class="form-control">
-            <label class="label" for="nameMaiden">
-              <span class="label-text font-medium">Maiden Name</span>
-            </label>
-            <input
-              id="nameMaiden"
-              type="text"
-              class="input input-bordered w-full"
-              bind:value={formData.NameMaiden}
-              placeholder="Enter maiden name"
-            />
-          </div>
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <SelectDropdown
-            label="Sex"
-            name="sex"
-            bind:value={formData.Sex}
-            valueSetKey="sex"
-            placeholder="Select sex..."
-            required={true}
-          />
-          {#if formErrors.Sex}
-            <span class="text-error text-sm">{formErrors.Sex}</span>
-          {/if}
-          <div class="form-control">
-            <label class="label" for="birthdate">
-              <span class="label-text font-medium">Birthdate</span>
-              <span class="label-text-alt text-error">*</span>
-            </label>
-            <input
-              id="birthdate"
-              type="date"
-              class="input input-bordered w-full"
-              class:input-error={formErrors.Birthdate}
-              bind:value={formData.Birthdate}
-            />
-            {#if formErrors.Birthdate}
-              <span class="text-error text-sm mt-1">{formErrors.Birthdate}</span>
-            {/if}
-          </div>
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div class="form-control">
-            <label class="label" for="placeOfBirth">
-              <span class="label-text font-medium">Place of Birth</span>
-            </label>
-            <input
-              id="placeOfBirth"
-              type="text"
-              class="input input-bordered w-full"
-              bind:value={formData.PlaceOfBirth}
-              placeholder="Enter place of birth"
-            />
-          </div>
-          <div class="form-control">
-            <label class="label" for="citizenship">
-              <span class="label-text font-medium">Citizenship</span>
-            </label>
-            <input
-              id="citizenship"
-              type="text"
-              class="input input-bordered w-full"
-              bind:value={formData.Citizenship}
-              placeholder="Enter citizenship"
-            />
-          </div>
-        </div>
-      </div>
-    {/if}
-
-    <!-- Step 2: Address -->
-    {#if currentStep === 2}
-      <div class="space-y-5">
-        <div class="form-control">
-          <label class="label" for="street1">
-            <span class="label-text font-medium">Street Address 1</span>
-          </label>
-          <input
-            id="street1"
-            type="text"
-            class="input input-bordered w-full"
-            bind:value={formData.Street_1}
-            placeholder="Enter street address"
-          />
-        </div>
-
-        <div class="form-control">
-          <label class="label" for="street2">
-            <span class="label-text font-medium">Street Address 2</span>
-          </label>
-          <input
-            id="street2"
-            type="text"
-            class="input input-bordered w-full"
-            bind:value={formData.Street_2}
-            placeholder="Apartment, suite, unit, etc."
-          />
-        </div>
-
-        <div class="form-control">
-          <label class="label" for="street3">
-            <span class="label-text font-medium">Street Address 3</span>
-          </label>
-          <input
-            id="street3"
-            type="text"
-            class="input input-bordered w-full"
-            bind:value={formData.Street_3}
-            placeholder="Additional address info"
-          />
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <div class="form-control">
-            <label class="label" for="zip">
-              <span class="label-text font-medium">ZIP Code</span>
-            </label>
-            <input
-              id="zip"
-              type="text"
-              class="input input-bordered w-full"
-              bind:value={formData.ZIP}
-              placeholder="Enter ZIP code"
-            />
-          </div>
-          <SelectDropdown
-            label="Province"
-            name="province"
-            bind:value={formData.Province}
-            options={provinceOptions}
-            placeholder="Select province..."
-          />
-          <SelectDropdown
-            label="City"
-            name="city"
-            bind:value={formData.City}
-            options={cityOptions}
-            placeholder={formData.Province ? "Select city..." : "Select province first"}
-            disabled={!formData.Province}
-          />
-        </div>
-
-        <div class="form-control">
-          <label class="label" for="country">
-            <span class="label-text font-medium">Country</span>
-          </label>
-          <input
-            id="country"
-            type="text"
-            class="input input-bordered w-full"
-            bind:value={formData.Country}
-            placeholder="Enter country"
-          />
-        </div>
-      </div>
-    {/if}
-
-    <!-- Step 3: Contact & Identification -->
-    {#if currentStep === 3}
-      <div class="space-y-5">
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div class="form-control">
-            <label class="label" for="phone">
-              <span class="label-text font-medium">Phone</span>
-            </label>
-            <input
-              id="phone"
-              type="tel"
-              class="input input-bordered w-full"
-              bind:value={formData.Phone}
-              placeholder="Enter phone number"
-            />
-          </div>
-          <div class="form-control">
-            <label class="label" for="mobilePhone">
-              <span class="label-text font-medium">Mobile Phone</span>
-            </label>
-            <input
-              id="mobilePhone"
-              type="tel"
-              class="input input-bordered w-full"
-              bind:value={formData.MobilePhone}
-              placeholder="Enter mobile number"
-            />
-          </div>
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div class="form-control">
-            <label class="label" for="email1">
-              <span class="label-text font-medium">Email Address 1</span>
-            </label>
-            <input
-              id="email1"
-              type="email"
-              class="input input-bordered w-full"
-              bind:value={formData.EmailAddress1}
-              placeholder="Enter email address"
-            />
-          </div>
-          <div class="form-control">
-            <label class="label" for="email2">
-              <span class="label-text font-medium">Email Address 2</span>
-            </label>
-            <input
-              id="email2"
-              type="email"
-              class="input input-bordered w-full"
-              bind:value={formData.EmailAddress2}
-              placeholder="Enter secondary email"
-            />
-          </div>
-        </div>
-
-        <div class="border-t border-base-200 pt-5 mt-5">
-          <h4 class="font-medium text-gray-700 mb-4">Identification Document</h4>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <SelectDropdown
-              label="ID Type"
-              name="idType"
-              bind:value={formData.PatIdt.IdentifierType}
-              valueSetKey="identifier_type"
-              placeholder="Select ID type..."
-            />
-            <div class="form-control">
-              <label class="label" for="idNumber">
-                <span class="label-text font-medium">ID Number</span>
-              </label>
-              <input
-                id="idNumber"
-                type="text"
-                class="input input-bordered w-full"
-                bind:value={formData.PatIdt.Identifier}
-                placeholder="Enter ID number"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    {/if}
-
-    <!-- Step 4: Additional Information -->
-    {#if currentStep === 4}
-      <div class="space-y-5">
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <SelectDropdown
-             label="Marital Status"
-             name="maritalStatus"
-             bind:value={formData.MaritalStatus}
-             valueSetKey="marital_status"
-             placeholder="Select status..."
-           />
-           <SelectDropdown
-             label="Religion"
-             name="religion"
-             bind:value={formData.Religion}
-             valueSetKey="religion"
-             placeholder="Select religion..."
-           />
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-           <SelectDropdown
-             label="Race"
-             name="race"
-             bind:value={formData.Race}
-             valueSetKey="race"
-             placeholder="Select race..."
-           />
-           <SelectDropdown
-             label="Ethnicity"
-             name="ethnic"
-             bind:value={formData.Ethnic}
-             valueSetKey="ethnic"
-             placeholder="Select ethnicity..."
-           />
-        </div>
-
-        <div class="border-t border-base-200 pt-5 mt-5">
-          <h4 class="font-medium text-gray-700 mb-4">Other Information</h4>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <SelectDropdown
-              label="Death Indicator"
-              name="deathIndicator"
-              bind:value={formData.DeathIndicator}
-              valueSetKey="death_indicator"
-              placeholder="Select..."
-            />
-            {#if formData.DeathIndicator === 'Y'}
-              <div class="form-control">
-                <label class="label" for="timeOfDeath">
-                  <span class="label-text font-medium">Time of Death</span>
-                </label>
-                <input
-                  id="timeOfDeath"
-                  type="datetime-local"
-                  class="input input-bordered w-full"
-                  bind:value={formData.TimeOfDeath}
-                />
-              </div>
-            {/if}
-          </div>
-        </div>
-
-        <div class="form-control">
-          <label class="label" for="comments">
-            <span class="label-text font-medium">Comments</span>
-          </label>
-          <textarea
-            id="comments"
-            class="textarea textarea-bordered w-full"
-            bind:value={formData.PatCom}
-            placeholder="Enter any additional comments or notes"
-            rows="3"
-          ></textarea>
-        </div>
-      </div>
-     {/if}
-  </form>
-  {/if}
-
-  {#snippet footer()}
-    <div class="flex justify-between w-full">
-      <div>
-        {#if currentStep > 1}
-          <button class="btn btn-ghost" onclick={prevStep} type="button">
-            <ChevronLeft class="w-4 h-4 mr-2" />
-            Previous
-          </button>
-        {/if}
-      </div>
-      <div class="flex gap-2">
-        <button class="btn btn-ghost" onclick={() => (modalOpen = false)} type="button">
-          Cancel
-        </button>
-        {#if currentStep < 4}
-          <button class="btn btn-primary" onclick={nextStep} type="button">
-            Next
-            <ChevronRight class="w-4 h-4 ml-2" />
-          </button>
-        {:else}
-          <button class="btn btn-primary" onclick={handleSave} disabled={saving} type="button">
-            {#if saving}
-              <span class="loading loading-spinner loading-sm mr-2"></span>
-            {/if}
-            {saving ? 'Saving...' : 'Save'}
-          </button>
-        {/if}
-      </div>
-    </div>
-  {/snippet}
-</Modal>
-
-<!-- Delete Confirmation Modal -->
 <Modal bind:open={deleteConfirmOpen} title="Confirm Delete" size="sm">
   <div class="py-2">
-    <p class="text-base-content/80">
-      Are you sure you want to delete patient <strong class="text-base-content">{deleteItem?.PatientID}</strong>?
-    </p>
+    <p>Are you sure you want to delete patient <strong>{patientToDelete?.PatientID}</strong>?</p>
     <p class="text-sm text-error mt-2">This action cannot be undone.</p>
   </div>
   {#snippet footer()}
-    <button class="btn btn-ghost" onclick={() => (deleteConfirmOpen = false)} type="button">
-      Cancel
-    </button>
+    <button class="btn btn-ghost" onclick={() => (deleteConfirmOpen = false)} type="button">Cancel</button>
     <button class="btn btn-error" onclick={handleDelete} type="button">Delete</button>
   {/snippet}
 </Modal>
-
-<!-- Patient Visits Modal -->
-<Modal
-  bind:open={visitsModalOpen}
-  title={currentPatientForVisits ? `Visits for ${[currentPatientForVisits.Prefix, currentPatientForVisits.NameFirst, currentPatientForVisits.NameLast].filter(Boolean).join(' ')}` : 'Patient Visits'}
-  size="lg"
-  closable={true}
->
-  <div class="space-y-4">
-    <!-- Fun Header with Add Button -->
-    <div class="flex justify-between items-center pb-4 border-b border-base-200">
-      <div class="flex items-center gap-2">
-        <Stethoscope class="w-5 h-5 text-emerald-600" />
-        <span class="text-sm text-gray-600">{patientVisits.length} visit(s) found</span>
-      </div>
-      <button
-        class="btn btn-sm btn-primary gap-2 hover:scale-105 transition-transform"
-        onclick={openCreateVisitModal}
-      >
-        <Plus class="w-4 h-4 animate-bounce" />
-        Add Visit
-      </button>
-    </div>
-
-    {#if patientVisits.length === 0}
-      <!-- Fun Empty State -->
-      <div class="text-center py-12">
-        <div class="text-6xl mb-4">🏥</div>
-        <h3 class="text-xl font-semibold text-gray-700 mb-2">No visits yet!</h3>
-        <p class="text-gray-500 mb-6">This patient hasn't had any visits recorded.</p>
-        <button
-          class="btn btn-primary gap-2 hover:scale-105 transition-transform"
-          onclick={openCreateVisitModal}
-        >
-          <Plus class="w-4 h-4" />
-          Create First Visit
-        </button>
-      </div>
-    {:else}
-      <div class="overflow-y-auto max-h-96">
-        <table class="table table-zebra w-full">
-          <thead>
-            <tr class="bg-emerald-50">
-              <th class="text-emerald-800">Visit ID</th>
-              <th class="text-emerald-800">Episode</th>
-              <th class="text-emerald-800">Class</th>
-              <th class="text-emerald-800">Status</th>
-              <th class="text-emerald-800">Created</th>
-              <th class="text-emerald-800 text-center">Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            {#each patientVisits as visit}
-              {@const status = getADTStatus(visit.PatVisitADT?.ADTCode)}
-              <tr class="hover:bg-emerald-50/50 transition-colors">
-                <td class="font-mono text-sm">{visit.PVID}</td>
-                <td>{visit.EpisodeID || '-'}</td>
-                <td>
-                  <span class="badge badge-sm badge-outline">
-                    {getPatientClassLabel(visit.PV1?.PatientClass)}
-                  </span>
-                </td>
-                <td>
-                  <span class="badge badge-sm {status.color} gap-1">
-                    <span>{status.icon}</span>
-                    {status.label}
-                  </span>
-                </td>
-                <td class="text-sm text-gray-600">
-                  {visit.CreateDate ? new Date(visit.CreateDate).toLocaleDateString() : '-'}
-                </td>
-                <td>
-                  <div class="flex justify-center gap-1">
-                    <button
-                      class="btn btn-ghost btn-xs hover:bg-emerald-100 hover:text-emerald-700"
-                      title="Edit Visit"
-                      onclick={() => openEditVisitModal(visit)}
-                    >
-                      <Edit2 class="w-3.5 h-3.5" />
-                    </button>
-                    <button
-                      class="btn btn-ghost btn-xs hover:bg-red-100 hover:text-red-600"
-                      title="Delete Visit"
-                      onclick={() => confirmDeleteVisit(visit)}
-                    >
-                      <Trash2 class="w-3.5 h-3.5" />
-                    </button>
-                  </div>
-                </td>
-              </tr>
-            {/each}
-          </tbody>
-        </table>
-      </div>
-    {/if}
-  </div>
-
-  {#snippet footer()}
-    <div class="flex justify-end w-full">
-      <button class="btn btn-ghost" onclick={() => visitsModalOpen = false}>Close</button>
-    </div>
-  {/snippet}
-</Modal>
-
-<!-- Visit Form Modal -->
-<Modal
-  bind:open={visitModalOpen}
-  title={visitModalMode === 'create' ? '🏥 Create New Visit' : '✏️ Edit Visit'}
-  size="lg"
->
-  {#if visitFormLoading}
-    <div class="flex flex-col items-center justify-center py-12">
-      <span class="loading loading-spinner loading-lg text-emerald-600"></span>
-      <p class="text-gray-500 mt-4">Loading visit data...</p>
-    </div>
-  {:else}
-    <form class="space-y-5" onsubmit={(e) => e.preventDefault()}>
-      <!-- Locked Patient Display -->
-      <div class="form-control">
-        <label class="label" for="patient">
-          <span class="label-text font-medium flex items-center gap-2">
-            <User class="w-4 h-4" />
-            Patient
-          </span>
-        </label>
-        <div class="input input-bordered w-full bg-base-200 flex items-center gap-2 opacity-75">
-          <span class="text-xl">🔒</span>
-          <span class="font-medium">
-            {currentPatientForVisits
-              ? [currentPatientForVisits.Prefix, currentPatientForVisits.NameFirst, currentPatientForVisits.NameLast].filter(Boolean).join(' ')
-              : 'Unknown Patient'}
-          </span>
-          <span class="text-sm text-gray-500 ml-auto">
-            ID: {currentPatientForVisits?.PatientID || '-'}
-          </span>
-        </div>
-        <p class="text-xs text-gray-500 mt-1">Patient is locked for this visit</p>
-      </div>
-
-      <!-- Episode ID & Patient Class -->
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div class="form-control">
-          <label class="label" for="episodeId">
-            <span class="label-text font-medium flex items-center gap-2">
-              <Calendar class="w-4 h-4" />
-              Episode ID
-              <span class="text-error">*</span>
-            </span>
-          </label>
-          <input
-            id="episodeId"
-            type="text"
-            class="input input-bordered w-full"
-            class:input-error={visitFormErrors.EpisodeID}
-            bind:value={visitFormData.EpisodeID}
-            placeholder="Enter episode ID"
-          />
-          {#if visitFormErrors.EpisodeID}
-            <span class="text-error text-sm mt-1">{visitFormErrors.EpisodeID}</span>
-          {/if}
-        </div>
-
-        <div class="form-control">
-          <label class="label" for="patientClass">
-            <span class="label-text font-medium flex items-center gap-2">
-              <Stethoscope class="w-4 h-4" />
-              Patient Class
-              <span class="text-error">*</span>
-            </span>
-          </label>
-          <select
-            id="patientClass"
-            class="select select-bordered w-full"
-            class:select-error={visitFormErrors.PatientClass}
-            bind:value={visitFormData.PV1.PatientClass}
-          >
-            <option value="">Select class...</option>
-            {#each patientClassOptions as option}
-              <option value={option.value}>{option.label}</option>
-            {/each}
-          </select>
-          {#if visitFormErrors.PatientClass}
-            <span class="text-error text-sm mt-1">{visitFormErrors.PatientClass}</span>
-          {/if}
-        </div>
-      </div>
-
-      <!-- Location -->
-      <div class="form-control">
-        <label class="label" for="location">
-          <span class="label-text font-medium flex items-center gap-2">
-            <MapPin class="w-4 h-4" />
-            Assigned Location
-          </span>
-        </label>
-        <input
-          id="location"
-          type="text"
-          class="input input-bordered w-full"
-          bind:value={visitFormData.PV1.AssignedPatientLocation}
-          placeholder="e.g., Ward A, Room 101, ER Bay 3"
-        />
-      </div>
-
-      <!-- Doctors -->
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div class="form-control">
-          <label class="label" for="attendingDoctor">
-            <span class="label-text font-medium flex items-center gap-2">
-              <User class="w-4 h-4" />
-              Attending Doctor
-            </span>
-          </label>
-          <input
-            id="attendingDoctor"
-            type="text"
-            class="input input-bordered w-full"
-            bind:value={visitFormData.PV1.AttendingDoctor}
-            placeholder="Dr. Smith"
-          />
-        </div>
-
-        <div class="form-control">
-          <label class="label" for="referringDoctor">
-            <span class="label-text font-medium flex items-center gap-2">
-              <User class="w-4 h-4" />
-              Referring Doctor
-            </span>
-          </label>
-          <input
-            id="referringDoctor"
-            type="text"
-            class="input input-bordered w-full"
-            bind:value={visitFormData.PV1.ReferringDoctor}
-            placeholder="Dr. Johnson"
-          />
-        </div>
-      </div>
-
-      <!-- Admitting Doctor -->
-      <div class="form-control">
-        <label class="label" for="admittingDoctor">
-          <span class="label-text font-medium flex items-center gap-2">
-            <User class="w-4 h-4" />
-            Admitting Doctor
-          </span>
-        </label>
-        <input
-          id="admittingDoctor"
-          type="text"
-          class="input input-bordered w-full"
-          bind:value={visitFormData.PV1.AdmittingDoctor}
-          placeholder="Dr. Williams"
-        />
-      </div>
-
-      <!-- Dates -->
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div class="form-control">
-          <label class="label" for="admitDate">
-            <span class="label-text font-medium flex items-center gap-2">
-              <Clock class="w-4 h-4" />
-              Admit Date & Time
-            </span>
-          </label>
-          <input
-            id="admitDate"
-            type="datetime-local"
-            class="input input-bordered w-full"
-            bind:value={visitFormData.PV1.AdmitDateTime}
-          />
-        </div>
-
-        <div class="form-control">
-          <label class="label" for="dischargeDate">
-            <span class="label-text font-medium flex items-center gap-2">
-              <Clock class="w-4 h-4" />
-              Discharge Date & Time
-            </span>
-          </label>
-          <input
-            id="dischargeDate"
-            type="datetime-local"
-            class="input input-bordered w-full"
-            bind:value={visitFormData.PV1.DischargeDateTime}
-          />
-        </div>
-      </div>
-    </form>
-  {/if}
-
-  {#snippet footer()}
-    <div class="flex justify-end gap-2">
-      <button class="btn btn-ghost" onclick={() => (visitModalOpen = false)} type="button">
-        Cancel
-      </button>
-      <button
-        class="btn btn-primary gap-2 hover:scale-105 transition-transform"
-        onclick={handleSaveVisit}
-        disabled={saving}
-        type="button"
-      >
-        {#if saving}
-          <span class="loading loading-spinner loading-sm"></span>
-          Saving...
-        {:else}
-          <span>{visitModalMode === 'create' ? '🎉' : '✨'}</span>
-          {visitModalMode === 'create' ? 'Create Visit' : 'Update Visit'}
-        {/if}
-      </button>
-    </div>
-  {/snippet}
-</Modal>
-
-<!-- Visit Delete Confirmation Modal -->
-<Modal bind:open={visitDeleteConfirmOpen} title="🗑️ Delete Visit?" size="sm">
-  <div class="py-2">
-    <p class="text-base-content/80">
-      Are you sure you want to delete visit
-      <strong class="text-base-content">#{visitToDelete?.PVID}</strong>?
-    </p>
-    {#if visitToDelete?.EpisodeID}
-      <p class="text-sm text-gray-500 mt-2">Episode: {visitToDelete.EpisodeID}</p>
-    {/if}
-    <p class="text-sm text-error mt-3">⚠️ This action cannot be undone.</p>
-  </div>
-  {#snippet footer()}
-    <button
-      class="btn btn-ghost"
-      onclick={() => (visitDeleteConfirmOpen = false)}
-      type="button"
-    >
-      Cancel
-    </button>
-    <button
-      class="btn btn-error gap-2"
-      onclick={handleDeleteVisit}
-      type="button"
-    >
-      <Trash2 class="w-4 h-4" />
-      Delete
-    </button>
-  {/snippet}
-</Modal>
diff --git a/src/routes/(app)/patients/PatientDetailModal.svelte b/src/routes/(app)/patients/PatientDetailModal.svelte
new file mode 100644
index 0000000..9ed862b
--- /dev/null
+++ b/src/routes/(app)/patients/PatientDetailModal.svelte
@@ -0,0 +1,127 @@
+<script>
+  import { User, MapPin, Activity, FileText } from 'lucide-svelte';
+  import Modal from '$lib/components/Modal.svelte';
+
+  /** @type {{ open: boolean, patient: any | null }} */
+  let { open = $bindable(false), patient = null } = $props();
+</script>
+
+<Modal bind:open title="Patient Details" size="xl">
+  {#if patient}
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <div class="card bg-base-100 shadow border border-base-200">
+        <div class="card-body">
+          <h3 class="card-title text-lg flex items-center gap-2">
+            <User class="w-5 h-5 text-primary" />
+            Basic Information
+          </h3>
+          <div class="space-y-3 mt-4">
+            <div class="flex justify-between py-2 border-b border-base-200">
+              <span class="text-gray-500">Patient ID</span>
+              <span class="font-medium">{patient.PatientID}</span>
+            </div>
+            <div class="flex justify-between py-2 border-b border-base-200">
+              <span class="text-gray-500">Full Name</span>
+              <span class="font-medium">
+                {[patient.Prefix, patient.NameFirst, patient.NameMiddle, patient.NameLast, patient.Suffix]
+                  .filter(Boolean)
+                  .join(' ')}
+              </span>
+            </div>
+            <div class="flex justify-between py-2 border-b border-base-200">
+              <span class="text-gray-500">Sex</span>
+              <span class="font-medium">{patient.Sex === '1' ? 'Female' : patient.Sex === '2' ? 'Male' : '-'}</span>
+            </div>
+            <div class="flex justify-between py-2 border-b border-base-200">
+              <span class="text-gray-500">Birthdate</span>
+              <span class="font-medium">{patient.Birthdate ? new Date(patient.Birthdate).toLocaleDateString() : '-'}</span>
+            </div>
+            <div class="flex justify-between py-2">
+              <span class="text-gray-500">Citizenship</span>
+              <span class="font-medium">{patient.Citizenship || '-'}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card bg-base-100 shadow border border-base-200">
+        <div class="card-body">
+          <h3 class="card-title text-lg flex items-center gap-2">
+            <MapPin class="w-5 h-5 text-primary" />
+            Address
+          </h3>
+          <div class="space-y-3 mt-4">
+            <div class="flex justify-between py-2 border-b border-base-200">
+              <span class="text-gray-500">Street</span>
+              <span class="font-medium text-right">
+                {[patient.Street_1, patient.Street_2, patient.Street_3].filter(Boolean).join(', ') || '-'}
+              </span>
+            </div>
+            <div class="flex justify-between py-2 border-b border-base-200">
+              <span class="text-gray-500">City</span>
+              <span class="font-medium">{patient.City || '-'}</span>
+            </div>
+            <div class="flex justify-between py-2 border-b border-base-200">
+              <span class="text-gray-500">Province</span>
+              <span class="font-medium">{patient.Province || '-'}</span>
+            </div>
+            <div class="flex justify-between py-2">
+              <span class="text-gray-500">ZIP</span>
+              <span class="font-medium">{patient.ZIP || '-'}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card bg-base-100 shadow border border-base-200">
+        <div class="card-body">
+          <h3 class="card-title text-lg flex items-center gap-2">
+            <Activity class="w-5 h-5 text-primary" />
+            Contact
+          </h3>
+          <div class="space-y-3 mt-4">
+            <div class="flex justify-between py-2 border-b border-base-200">
+              <span class="text-gray-500">Phone</span>
+              <span class="font-medium">{patient.Phone || '-'}</span>
+            </div>
+            <div class="flex justify-between py-2 border-b border-base-200">
+              <span class="text-gray-500">Mobile</span>
+              <span class="font-medium">{patient.MobilePhone || '-'}</span>
+            </div>
+            <div class="flex justify-between py-2">
+              <span class="text-gray-500">Email</span>
+              <span class="font-medium">{patient.EmailAddress1 || '-'}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card bg-base-100 shadow border border-base-200">
+        <div class="card-body">
+          <h3 class="card-title text-lg flex items-center gap-2">
+            <FileText class="w-5 h-5 text-primary" />
+            Additional
+          </h3>
+          <div class="space-y-3 mt-4">
+            <div class="flex justify-between py-2 border-b border-base-200">
+              <span class="text-gray-500">Marital Status</span>
+              <span class="font-medium">{patient.MaritalStatus || '-'}</span>
+            </div>
+            <div class="flex justify-between py-2 border-b border-base-200">
+              <span class="text-gray-500">Religion</span>
+              <span class="font-medium">{patient.Religion || '-'}</span>
+            </div>
+            <div class="flex justify-between py-2">
+              <span class="text-gray-500">Race</span>
+              <span class="font-medium">{patient.Race || '-'}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  {/if}
+
+  {#snippet footer()}
+    <button class="btn btn-ghost" onclick={() => (open = false)} type="button">Close</button>
+  {/snippet}
+</Modal>
diff --git a/src/routes/(app)/patients/PatientFormModal.svelte b/src/routes/(app)/patients/PatientFormModal.svelte
new file mode 100644
index 0000000..fc72e28
--- /dev/null
+++ b/src/routes/(app)/patients/PatientFormModal.svelte
@@ -0,0 +1,637 @@
+<script>
+  import { onMount } from 'svelte';
+  import { fetchProvinces, fetchCities } from '$lib/api/geography.js';
+  import { createPatient, updatePatient } from '$lib/api/patients.js';
+  import { success as toastSuccess, error as toastError } from '$lib/utils/toast.js';
+  import Modal from '$lib/components/Modal.svelte';
+  import SelectDropdown from '$lib/components/SelectDropdown.svelte';
+
+  /** @type {{ open: boolean, patient: any | null, onSave: () => void, patientLoading?: boolean }} */
+  let { open = $bindable(false), patient = null, onSave, patientLoading = false } = $props();
+
+  let loading = $state(false);
+  let saving = $state(false);
+  let provinces = $state([]);
+  let cities = $state([]);
+  let formErrors = $state({});
+
+  let formData = $state({
+    InternalPID: null,
+    PatientID: '',
+    Prefix: '',
+    NameFirst: '',
+    NameMiddle: '',
+    NameLast: '',
+    NameMaiden: '',
+    Suffix: '',
+    Sex: '',
+    Birthdate: '',
+    PlaceOfBirth: '',
+    Citizenship: '',
+    Street_1: '',
+    Street_2: '',
+    Street_3: '',
+    Province: '',
+    City: '',
+    ZIP: '',
+    Country: '',
+    Phone: '',
+    MobilePhone: '',
+    EmailAddress1: '',
+    EmailAddress2: '',
+    Race: '',
+    MaritalStatus: '',
+    Religion: '',
+    Ethnic: '',
+  });
+
+  // Track last loaded province to prevent infinite loops
+  let lastLoadedProvince = $state('');
+  // Track which patient we've initialized the form for
+  let initializedPatientId = $state(null);
+
+  const prefixOptions = [
+    { value: 'Mr', label: 'Mr' },
+    { value: 'Mrs', label: 'Mrs' },
+    { value: 'Ms', label: 'Ms' },
+    { value: 'Dr', label: 'Dr' },
+  ];
+
+  const provinceOptions = $derived(
+    provinces.map((p) => ({
+      value: p.AreaCode || p.value || p.code || p.Code || p.id || p.ID || '',
+      label: p.AreaName || p.label || p.name || p.Name || p.description || p.Description || ''
+    }))
+  );
+
+  const cityOptions = $derived(
+    cities.map((c) => ({
+      value: c.AreaCode || c.value || c.code || c.Code || c.id || c.ID || '',
+      label: c.AreaName || c.label || c.name || c.Name || c.description || c.Description || ''
+    }))
+  );
+
+  const isEdit = $derived(!!patient);
+
+  onMount(async () => {
+    await loadProvinces();
+  });
+
+  $effect(() => {
+    const currentPatientId = patient?.InternalPID || null;
+    
+    if (open && patient && !patientLoading && provinces.length > 0 && initializedPatientId !== currentPatientId) {
+      // Edit mode - populate form (only when provinces are loaded and for a new patient)
+      initializedPatientId = currentPatientId;
+      const patientProvince = patient.Province || '';
+      const patientCity = patient.City || '';
+
+      formData = {
+        InternalPID: patient.InternalPID,
+        PatientID: patient.PatientID || '',
+        Prefix: patient.Prefix || '',
+        NameFirst: patient.NameFirst || '',
+        NameMiddle: patient.NameMiddle || '',
+        NameLast: patient.NameLast || '',
+        NameMaiden: patient.NameMaiden || '',
+        Suffix: patient.Suffix || '',
+        Sex: patient.Sex || '',
+        Birthdate: patient.Birthdate ? patient.Birthdate.split('T')[0] : '',
+        PlaceOfBirth: patient.PlaceOfBirth || '',
+        Citizenship: patient.Citizenship || '',
+        Street_1: patient.Street_1 || '',
+        Street_2: patient.Street_2 || '',
+        Street_3: patient.Street_3 || '',
+        Province: patientProvince,
+        City: patientCity, // Set immediately, will be validated once cities load
+        ZIP: patient.ZIP || '',
+        Country: patient.Country || '',
+        Phone: patient.Phone || '',
+        MobilePhone: patient.MobilePhone || '',
+        EmailAddress1: patient.EmailAddress1 || '',
+        EmailAddress2: patient.EmailAddress2 || '',
+        Race: patient.Race || '',
+        MaritalStatus: patient.MaritalStatus || '',
+        Religion: patient.Religion || '',
+        Ethnic: patient.Ethnic || '',
+      };
+      
+      // Load cities for this province
+      lastLoadedProvince = patientProvince;
+      if (patientProvince) {
+        loadCities(patientProvince);
+      }
+    } else if (open && !patient && !patientLoading && initializedPatientId !== 'create') {
+      // Create mode - reset form
+      initializedPatientId = 'create';
+      formData = {
+        InternalPID: null,
+        PatientID: '',
+        Prefix: '',
+        NameFirst: '',
+        NameMiddle: '',
+        NameLast: '',
+        NameMaiden: '',
+        Suffix: '',
+        Sex: '',
+        Birthdate: '',
+        PlaceOfBirth: '',
+        Citizenship: '',
+        Street_1: '',
+        Street_2: '',
+        Street_3: '',
+        Province: '',
+        City: '',
+        ZIP: '',
+        Country: '',
+        Phone: '',
+        MobilePhone: '',
+        EmailAddress1: '',
+        EmailAddress2: '',
+        Race: '',
+        MaritalStatus: '',
+        Religion: '',
+        Ethnic: '',
+      };
+      cities = [];
+      lastLoadedProvince = '';
+    } else if (!open) {
+      // Reset initialization when modal closes
+      initializedPatientId = null;
+    }
+  });
+
+  async function loadProvinces() {
+    try {
+      const response = await fetchProvinces();
+      provinces = Array.isArray(response.data) ? response.data : [];
+    } catch (err) {
+      console.error('Failed to load provinces:', err);
+    }
+  }
+
+  async function loadCities(provinceCode) {
+    if (!provinceCode) {
+      cities = [];
+      return;
+    }
+    try {
+      const response = await fetchCities(provinceCode);
+      cities = Array.isArray(response.data) ? response.data : [];
+    } catch (err) {
+      console.error('Failed to load cities:', err);
+      cities = [];
+    }
+  }
+
+  function validateForm() {
+    const errors = {};
+    if (!formData.PatientID?.trim()) {
+      errors.PatientID = 'Patient ID is required';
+    }
+    if (!formData.NameFirst?.trim()) {
+      errors.NameFirst = 'First name is required';
+    }
+    if (!formData.Sex) {
+      errors.Sex = 'Sex is required';
+    }
+    if (!formData.Birthdate) {
+      errors.Birthdate = 'Birthdate is required';
+    }
+    formErrors = errors;
+    return Object.keys(errors).length === 0;
+  }
+
+  async function handleSubmit() {
+    if (!validateForm()) return;
+
+    saving = true;
+    try {
+      const payload = {
+        ...formData,
+        Birthdate: formData.Birthdate ? new Date(formData.Birthdate).toISOString() : undefined,
+      };
+
+      // Remove empty fields
+      Object.keys(payload).forEach((key) => {
+        if (payload[key] === '' || payload[key] === null) {
+          delete payload[key];
+        }
+      });
+
+      if (isEdit) {
+        await updatePatient(payload);
+        toastSuccess('Patient updated successfully');
+      } else {
+        await createPatient(payload);
+        toastSuccess('Patient created successfully');
+      }
+      open = false;
+      onSave?.();
+    } catch (err) {
+      toastError(err.message || 'Failed to save patient');
+    } finally {
+      saving = false;
+    }
+  }
+
+  $effect(() => {
+    const province = formData.Province;
+    if (province && province !== lastLoadedProvince) {
+      lastLoadedProvince = province;
+      // Clear city when province changes (only after form is initialized)
+      if (initializedPatientId !== null) {
+        formData.City = '';
+      }
+      loadCities(province);
+    } else if (!province) {
+      cities = [];
+      lastLoadedProvince = '';
+      if (initializedPatientId !== null) {
+        formData.City = '';
+      }
+    }
+  });
+</script>
+
+<Modal
+  bind:open
+  title={isEdit ? 'Edit Patient' : 'Add Patient'}
+  size="lg"
+>
+  {#if patientLoading}
+    <div class="flex items-center justify-center py-12">
+      <span class="loading loading-spinner loading-lg text-primary"></span>
+    </div>
+  {:else}
+  <form class="space-y-6" onsubmit={(e) => e.preventDefault()}>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div class="form-control">
+        <label class="label" for="patientId">
+          <span class="label-text font-medium">Patient ID</span>
+          <span class="label-text-alt text-error">*</span>
+        </label>
+        <input
+          id="patientId"
+          type="text"
+          class="input input-bordered w-full"
+          class:input-error={formErrors.PatientID}
+          bind:value={formData.PatientID}
+          placeholder="Enter patient ID"
+          disabled={isEdit}
+        />
+        {#if formErrors.PatientID}
+          <span class="text-error text-sm mt-1">{formErrors.PatientID}</span>
+        {/if}
+      </div>
+
+      <SelectDropdown
+        label="Prefix"
+        name="prefix"
+        bind:value={formData.Prefix}
+        options={prefixOptions}
+        placeholder="Select..."
+      />
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <div class="form-control">
+        <label class="label" for="nameFirst">
+          <span class="label-text font-medium">First Name</span>
+          <span class="label-text-alt text-error">*</span>
+        </label>
+        <input
+          id="nameFirst"
+          type="text"
+          class="input input-bordered w-full"
+          class:input-error={formErrors.NameFirst}
+          bind:value={formData.NameFirst}
+          placeholder="Enter first name"
+        />
+        {#if formErrors.NameFirst}
+          <span class="text-error text-sm mt-1">{formErrors.NameFirst}</span>
+        {/if}
+      </div>
+
+      <div class="form-control">
+        <label class="label" for="nameMiddle">
+          <span class="label-text font-medium">Middle Name</span>
+        </label>
+        <input
+          id="nameMiddle"
+          type="text"
+          class="input input-bordered w-full"
+          bind:value={formData.NameMiddle}
+          placeholder="Enter middle name"
+        />
+      </div>
+
+      <div class="form-control">
+        <label class="label" for="nameLast">
+          <span class="label-text font-medium">Last Name</span>
+        </label>
+        <input
+          id="nameLast"
+          type="text"
+          class="input input-bordered w-full"
+          bind:value={formData.NameLast}
+          placeholder="Enter last name"
+        />
+      </div>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <div class="form-control">
+        <label class="label" for="nameMaiden">
+          <span class="label-text font-medium">Maiden Name</span>
+        </label>
+        <input
+          id="nameMaiden"
+          type="text"
+          class="input input-bordered w-full"
+          bind:value={formData.NameMaiden}
+          placeholder="Enter maiden name"
+        />
+      </div>
+
+      <div class="form-control">
+        <label class="label" for="suffix">
+          <span class="label-text font-medium">Suffix</span>
+        </label>
+        <input
+          id="suffix"
+          type="text"
+          class="input input-bordered w-full"
+          bind:value={formData.Suffix}
+          placeholder="Enter suffix (e.g., Jr, Sr, III)"
+        />
+      </div>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <SelectDropdown
+          label="Sex"
+          name="sex"
+          bind:value={formData.Sex}
+          valueSetKey="sex"
+          placeholder="Select sex..."
+          required={true}
+          error={formErrors.Sex}
+        />
+
+      <div class="form-control">
+        <label class="label" for="birthdate">
+          <span class="label-text font-medium">Birthdate</span>
+          <span class="label-text-alt text-error">*</span>
+        </label>
+        <input
+          id="birthdate"
+          type="date"
+          class="input input-bordered w-full"
+          class:input-error={formErrors.Birthdate}
+          bind:value={formData.Birthdate}
+        />
+        {#if formErrors.Birthdate}
+          <span class="text-error text-sm mt-1">{formErrors.Birthdate}</span>
+        {/if}
+      </div>
+
+      <div class="form-control">
+        <label class="label" for="placeOfBirth">
+          <span class="label-text font-medium">Place of Birth</span>
+        </label>
+        <input
+          id="placeOfBirth"
+          type="text"
+          class="input input-bordered w-full"
+          bind:value={formData.PlaceOfBirth}
+          placeholder="Enter place of birth"
+        />
+      </div>
+    </div>
+
+    <div class="border-t border-base-200 pt-6">
+      <h4 class="font-medium text-gray-700 mb-4">Demographics</h4>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+        <SelectDropdown
+          label="Race"
+          name="race"
+          bind:value={formData.Race}
+          valueSetKey="race"
+          placeholder="Select race..."
+        />
+
+        <SelectDropdown
+          label="Marital Status"
+          name="maritalStatus"
+          bind:value={formData.MaritalStatus}
+          valueSetKey="marital_status"
+          placeholder="Select marital status..."
+        />
+
+        <SelectDropdown
+          label="Religion"
+          name="religion"
+          bind:value={formData.Religion}
+          valueSetKey="religion"
+          placeholder="Select religion..."
+        />
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <SelectDropdown
+          label="Ethnicity"
+          name="ethnic"
+          bind:value={formData.Ethnic}
+          valueSetKey="ethnic"
+          placeholder="Select ethnicity..."
+        />
+
+        <div class="form-control">
+          <label class="label" for="citizenship">
+            <span class="label-text font-medium">Citizenship</span>
+          </label>
+          <input
+            id="citizenship"
+            type="text"
+            class="input input-bordered w-full"
+            bind:value={formData.Citizenship}
+            placeholder="Enter citizenship"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="border-t border-base-200 pt-6">
+      <h4 class="font-medium text-gray-700 mb-4">Address Information</h4>
+
+      <div class="form-control mb-4">
+        <label class="label" for="street1">
+          <span class="label-text font-medium">Street Address</span>
+        </label>
+        <input
+          id="street1"
+          type="text"
+          class="input input-bordered w-full"
+          bind:value={formData.Street_1}
+          placeholder="Enter street address"
+        />
+      </div>
+
+      <div class="form-control mb-4">
+        <label class="label" for="street2">
+          <span class="label-text font-medium">Street Address Line 2</span>
+        </label>
+        <input
+          id="street2"
+          type="text"
+          class="input input-bordered w-full"
+          bind:value={formData.Street_2}
+          placeholder="Enter street address line 2"
+        />
+      </div>
+
+      <div class="form-control mb-4">
+        <label class="label" for="street3">
+          <span class="label-text font-medium">Street Address Line 3</span>
+        </label>
+        <input
+          id="street3"
+          type="text"
+          class="input input-bordered w-full"
+          bind:value={formData.Street_3}
+          placeholder="Enter street address line 3"
+        />
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <SelectDropdown
+          label="Province"
+          name="province"
+          bind:value={formData.Province}
+          options={provinceOptions}
+          placeholder="Select province..."
+        />
+
+        <SelectDropdown
+          label="City"
+          name="city"
+          bind:value={formData.City}
+          options={cityOptions}
+          placeholder={formData.Province ? "Select city..." : "Select province first"}
+          disabled={!formData.Province}
+        />
+
+        <div class="form-control">
+          <label class="label" for="zip">
+            <span class="label-text font-medium">ZIP Code</span>
+          </label>
+          <input
+            id="zip"
+            type="text"
+            class="input input-bordered w-full"
+            bind:value={formData.ZIP}
+            placeholder="Enter ZIP code"
+          />
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
+        <SelectDropdown
+          label="Country"
+          name="country"
+          bind:value={formData.Country}
+          valueSetKey="country"
+          placeholder="Select country..."
+        />
+      </div>
+    </div>
+
+    <div class="border-t border-base-200 pt-6">
+      <h4 class="font-medium text-gray-700 mb-4">Contact Information</h4>
+      
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="form-control">
+          <label class="label" for="phone">
+            <span class="label-text font-medium">Phone</span>
+          </label>
+          <input
+            id="phone"
+            type="tel"
+            class="input input-bordered w-full"
+            bind:value={formData.Phone}
+            placeholder="Enter phone number"
+          />
+        </div>
+
+        <div class="form-control">
+          <label class="label" for="mobilePhone">
+            <span class="label-text font-medium">Mobile Phone</span>
+          </label>
+          <input
+            id="mobilePhone"
+            type="tel"
+            class="input input-bordered w-full"
+            bind:value={formData.MobilePhone}
+            placeholder="Enter mobile number"
+          />
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+        <div class="form-control">
+          <label class="label" for="email1">
+            <span class="label-text font-medium">Email Address</span>
+          </label>
+          <input
+            id="email1"
+            type="email"
+            class="input input-bordered w-full"
+            bind:value={formData.EmailAddress1}
+            placeholder="Enter email address"
+          />
+        </div>
+
+        <div class="form-control">
+          <label class="label" for="email2">
+            <span class="label-text font-medium">Secondary Email</span>
+          </label>
+          <input
+            id="email2"
+            type="email"
+            class="input input-bordered w-full"
+            bind:value={formData.EmailAddress2}
+            placeholder="Enter secondary email"
+          />
+        </div>
+      </div>
+    </div>
+  </form>
+  {/if}
+  {#snippet footer()}
+    {#if patientLoading}
+      <div class="flex justify-end gap-2">
+        <button class="btn btn-ghost" disabled type="button">Cancel</button>
+        <button class="btn btn-primary" disabled type="button">Loading...</button>
+      </div>
+    {:else}
+    <div class="flex justify-end gap-2">
+      <button class="btn btn-ghost" onclick={() => (open = false)} type="button">
+        Cancel
+      </button>
+      <button
+        class="btn btn-primary"
+        onclick={handleSubmit}
+        disabled={saving}
+        type="button"
+      >
+        {#if saving}
+          <span class="loading loading-spinner loading-sm mr-2"></span>
+        {/if}
+        {saving ? 'Saving...' : 'Save'}
+      </button>
+     </div>
+    {/if}
+  {/snippet}
+</Modal>
diff --git a/src/routes/(app)/patients/VisitListModal.svelte b/src/routes/(app)/patients/VisitListModal.svelte
new file mode 100644
index 0000000..f899312
--- /dev/null
+++ b/src/routes/(app)/patients/VisitListModal.svelte
@@ -0,0 +1,153 @@
+<script>
+  import { onMount } from 'svelte';
+  import { fetchVisitsByPatient } from '$lib/api/visits.js';
+  import { error as toastError } from '$lib/utils/toast.js';
+  import Modal from '$lib/components/Modal.svelte';
+  import { Calendar, Clock, MapPin, FileText, Plus } from 'lucide-svelte';
+
+  /** @type {{ open: boolean, patient: any | null }} */
+  let { open = $bindable(false), patient = null } = $props();
+
+  let visits = $state([]);
+  let loading = $state(false);
+
+  onMount(() => {
+    if (patient && open) {
+      loadVisits();
+    }
+  });
+
+  $effect(() => {
+    if (open && patient) {
+      loadVisits();
+    }
+  });
+
+  async function loadVisits() {
+    if (!patient?.InternalPID) return;
+    
+    loading = true;
+    try {
+      const response = await fetchVisitsByPatient(patient.InternalPID);
+      visits = Array.isArray(response.data) ? response.data : [];
+    } catch (err) {
+      toastError(err.message || 'Failed to load visits');
+      visits = [];
+    } finally {
+      loading = false;
+    }
+  }
+
+  function formatDate(dateStr) {
+    if (!dateStr) return '-';
+    return new Date(dateStr).toLocaleDateString();
+  }
+
+  function formatDateTime(dateStr) {
+    if (!dateStr) return '-';
+    return new Date(dateStr).toLocaleString();
+  }
+</script>
+
+<Modal bind:open title="Patient Visits" size="xl">
+  {#if patient}
+    <div class="mb-4 p-4 bg-base-200 rounded-lg">
+      <div class="flex items-center gap-4">
+        <div>
+          <h3 class="font-bold text-lg">
+            {[patient.Prefix, patient.NameFirst, patient.NameMiddle, patient.NameLast].filter(Boolean).join(' ')}
+          </h3>
+          <p class="text-sm text-gray-600">Patient ID: {patient.PatientID}</p>
+        </div>
+      </div>
+    </div>
+
+    {#if loading}
+      <div class="flex items-center justify-center py-12">
+        <span class="loading loading-spinner loading-lg text-primary"></span>
+      </div>
+    {:else if visits.length === 0}
+      <div class="text-center py-12 text-gray-500">
+        <Calendar class="w-16 h-16 mx-auto mb-4 opacity-50" />
+        <p class="text-lg">No visits found</p>
+        <p class="text-sm">This patient has no visit records.</p>
+      </div>
+    {:else}
+      <div class="space-y-4">
+        {#each visits as visit}
+          <div class="card bg-base-100 shadow border border-base-200 hover:shadow-md transition-shadow">
+            <div class="card-body p-4">
+              <div class="flex items-start justify-between">
+                <div class="flex-1">
+                  <div class="flex items-center gap-2 mb-2">
+                    <Calendar class="w-4 h-4 text-primary" />
+                    <span class="font-semibold">{formatDate(visit.AdmissionDateTime)}</span>
+                    {#if visit.VisitStatus}
+                      <span class="badge badge-sm {visit.VisitStatus === 'Active' ? 'badge-success' : 'badge-ghost'}">
+                        {visit.VisitStatus}
+                      </span>
+                    {/if}
+                  </div>
+                  
+                  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+                    {#if visit.AdmissionType}
+                      <div>
+                        <span class="text-gray-500">Type:</span>
+                        <span class="ml-1">{visit.AdmissionType}</span>
+                      </div>
+                    {/if}
+                    
+                    {#if visit.Location}
+                      <div class="flex items-center gap-1">
+                        <MapPin class="w-3 h-3 text-gray-400" />
+                        <span class="text-gray-500">Location:</span>
+                        <span class="ml-1">{visit.Location}</span>
+                      </div>
+                    {/if}
+                    
+                    {#if visit.DoctorName}
+                      <div>
+                        <span class="text-gray-500">Doctor:</span>
+                        <span class="ml-1">{visit.DoctorName}</span>
+                      </div>
+                    {/if}
+                    
+                    {#if visit.AdmissionDateTime}
+                      <div class="flex items-center gap-1">
+                        <Clock class="w-3 h-3 text-gray-400" />
+                        <span class="text-gray-500">Time:</span>
+                        <span class="ml-1">{formatDateTime(visit.AdmissionDateTime)}</span>
+                      </div>
+                    {/if}
+                  </div>
+
+                  {#if visit.Diagnosis}
+                    <div class="mt-3 pt-3 border-t border-base-200">
+                      <div class="flex items-start gap-2">
+                        <FileText class="w-4 h-4 text-gray-400 mt-0.5" />
+                        <div>
+                          <span class="text-gray-500 text-sm">Diagnosis:</span>
+                          <p class="text-sm mt-1">{visit.Diagnosis}</p>
+                        </div>
+                      </div>
+                    </div>
+                  {/if}
+                </div>
+              </div>
+            </div>
+          </div>
+        {/each}
+      </div>
+    {/if}
+  {/if}
+
+  {#snippet footer()}
+    <div class="flex justify-between items-center w-full">
+      <button class="btn btn-primary btn-sm" onclick={() => {}} disabled>
+        <Plus class="w-4 h-4 mr-1" />
+        New Visit
+      </button>
+      <button class="btn btn-ghost" onclick={() => (open = false)} type="button">Close</button>
+    </div>
+  {/snippet}
+</Modal>