diff --git a/app/Http/Controllers/ImportController.php b/app/Http/Controllers/ImportController.php
index 6264a67..689a872 100644
--- a/app/Http/Controllers/ImportController.php
+++ b/app/Http/Controllers/ImportController.php
@@ -184,7 +184,7 @@ public function store(Request $request)
     }
 
     // Kick off processing of an import - simple synchronous step for now
-    public function process(Import $import, Request $request, ImportServiceV2 $processor)
+    public function process(Import $import, Request $request, ImportProcessor $processor)
     {
         $import->update(['status' => 'validating', 'started_at' => now()]);
         
diff --git a/app/Services/Import/Handlers/AddressHandler.php b/app/Services/Import/Handlers/AddressHandler.php
index 44c8734..bd2ba29 100644
--- a/app/Services/Import/Handlers/AddressHandler.php
+++ b/app/Services/Import/Handlers/AddressHandler.php
@@ -103,7 +103,7 @@ public function process(Import $import, array $mapped, array $raw, array $contex
             $payload = $this->buildPayloadForAddress($address);
             $payload['person_id'] = $personId;
 
-            $addressEntity = new \App\Models\Person\PersonAddress;
+            $addressEntity = new PersonAddress;
             $addressEntity->fill($payload);
             $addressEntity->save();
             
@@ -129,7 +129,7 @@ public function process(Import $import, array $mapped, array $raw, array $contex
     
     protected function resolveAddress(string $address, int $personId): mixed
     {
-        return \App\Models\Person\PersonAddress::where('person_id', $personId)
+        return PersonAddress::where('person_id', $personId)
             ->where('address', $address)
             ->first();
     }
diff --git a/resources/js/Components/PersonInfo/PersonInfoGrid.vue b/resources/js/Components/PersonInfo/PersonInfoGrid.vue
index d9b17f3..b5ca32a 100644
--- a/resources/js/Components/PersonInfo/PersonInfoGrid.vue
+++ b/resources/js/Components/PersonInfo/PersonInfoGrid.vue
@@ -384,6 +384,7 @@ const switchToTab = (tab) => {
     </TabsList>
     <TabsContent value="person" class="py-2">
       <PersonInfoPersonTab
+        :is-client-case="clientCaseUuid ? true : false"
         :person="person"
         :edit="edit"
         :person-edit="personEdit"
diff --git a/resources/js/Components/PersonInfo/PersonInfoPersonTab.vue b/resources/js/Components/PersonInfo/PersonInfoPersonTab.vue
index 84f1019..aab3cab 100644
--- a/resources/js/Components/PersonInfo/PersonInfoPersonTab.vue
+++ b/resources/js/Components/PersonInfo/PersonInfoPersonTab.vue
@@ -1,14 +1,16 @@
 <script setup>
 import { UserEditIcon } from "@/Utilities/Icons";
 import { Button } from "../ui/button";
+import { fmtDateDMY } from "@/Utilities/functions";
 
 const props = defineProps({
   person: Object,
+  isClientCase: { type: Boolean, default: false },
   edit: { type: Boolean, default: true },
   personEdit: { type: Boolean, default: true },
 });
 
-const emit = defineEmits(['edit']);
+const emit = defineEmits(["edit"]);
 
 const getMainAddress = (adresses) => {
   const addr = adresses.filter((a) => a.type.id === 1)[0] ?? "";
@@ -30,7 +32,7 @@ const getMainPhone = (phones) => {
 };
 
 const handleEdit = () => {
-  emit('edit');
+  emit("edit");
 };
 </script>
 
@@ -44,51 +46,126 @@ const handleEdit = () => {
     >
       <UserEditIcon size="md" />
       <span>Uredi</span>
-    </button>
+    </Button>
   </div>
   <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
-    <div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
-      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Nu.</p>
+    <div
+      class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow"
+    >
+      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">
+        Primer ref.
+      </p>
       <p class="text-sm font-semibold text-gray-900">{{ person.nu }}</p>
     </div>
-    <div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
-      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Name.</p>
+    <div
+      class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow"
+    >
+      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Naziv</p>
       <p class="text-sm font-semibold text-gray-900">
         {{ person.full_name }}
       </p>
     </div>
-    <div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
-      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Tax NU.</p>
+    <div
+      class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow"
+    >
+      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">
+        Davčna
+      </p>
       <p class="text-sm font-semibold text-gray-900">
         {{ person.tax_number }}
       </p>
     </div>
-    <div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
-      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Social security NU.</p>
+    <div
+      class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow"
+    >
+      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Emšo</p>
       <p class="text-sm font-semibold text-gray-900">
         {{ person.social_security_number }}
       </p>
     </div>
   </div>
-  <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 mt-3">
-    <div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
-      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Address</p>
+  <div
+    v-if="isClientCase"
+    class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 mt-3"
+  >
+    <div
+      class="md:col-span-full lg:col-span-1 rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow"
+    >
+      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">
+        Naslov
+      </p>
       <p class="text-sm font-medium text-gray-900">
         {{ getMainAddress(person.addresses) }}
       </p>
     </div>
-    <div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
-      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Phone</p>
+    <div
+      class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow"
+    >
+      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">
+        Telefon
+      </p>
       <p class="text-sm font-medium text-gray-900">
         {{ getMainPhone(person.phones) }}
       </p>
     </div>
-    <div class="md:col-span-full lg:col-span-1 rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
-      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Description</p>
+    <div
+      class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow"
+    >
+      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">
+        Dat. rojstva
+      </p>
+      <p class="text-sm font-medium text-gray-900">
+        {{ fmtDateDMY(person.birthday) }}
+      </p>
+    </div>
+  </div>
+
+  <div v-else class="grid grid-rows-* grid-cols-1 md:grid-cols-2 gap-3 mt-3">
+    <div
+      class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow"
+    >
+      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">
+        Naslov
+      </p>
+      <p class="text-sm font-medium text-gray-900">
+        {{ getMainAddress(person.addresses) }}
+      </p>
+    </div>
+    <div
+      class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow"
+    >
+      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">
+        Telefon
+      </p>
+      <p class="text-sm font-medium text-gray-900">
+        {{ getMainPhone(person.phones) }}
+      </p>
+    </div>
+  </div>
+  <div
+    class="grid grid-rows-* grid-cols-1 md:grid-cols-2 gap-3 mt-3"
+    :class="[isClientCase ? 'md:grid-cols-2' : '']"
+  >
+    <div
+      v-if="isClientCase"
+      class="md:col-span-full lg:col-span-1 rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow"
+    >
+      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">
+        Delodajalec
+      </p>
+      <p class="text-sm font-medium text-gray-900">
+        {{ person.employer }}
+      </p>
+    </div>
+
+    <div
+      class="md:col-span-full rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow"
+      :class="[isClientCase ? 'lg:col-span-1' : '']"
+    >
+      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Opis</p>
       <p class="text-sm font-medium text-gray-900">
         {{ person.description }}
       </p>
     </div>
   </div>
 </template>
-
diff --git a/resources/js/Components/PersonInfo/PersonUpdateForm.vue b/resources/js/Components/PersonInfo/PersonUpdateForm.vue
index 40119ee..da0dce3 100644
--- a/resources/js/Components/PersonInfo/PersonUpdateForm.vue
+++ b/resources/js/Components/PersonInfo/PersonUpdateForm.vue
@@ -1,182 +1,205 @@
 <script setup>
-import UpdateDialog from '@/Components/Dialogs/UpdateDialog.vue';
-import SectionTitle from '@/Components/SectionTitle.vue';
+import UpdateDialog from "@/Components/Dialogs/UpdateDialog.vue";
+import SectionTitle from "@/Components/SectionTitle.vue";
 import { useForm, Field as FormField } from "vee-validate";
 import { toTypedSchema } from "@vee-validate/zod";
 import * as z from "zod";
-import { router } from '@inertiajs/vue3';
-import { ref } from 'vue';
-import {
-  FormControl,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/Components/ui/form";
+import { router } from "@inertiajs/vue3";
+import { ref } from "vue";
+import { FormControl, FormItem, FormLabel, FormMessage } from "@/Components/ui/form";
 import { Input } from "@/Components/ui/input";
 import { Textarea } from "@/Components/ui/textarea";
+import DatePicker from "../DatePicker.vue";
 
 const props = defineProps({
-    show: {
-        type: Boolean,
-        default: false
-    },
-    person: Object
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  person: Object,
 });
 
 const processingUpdate = ref(false);
 
-const emit = defineEmits(['close']);
+const emit = defineEmits(["close"]);
 
 const formSchema = toTypedSchema(
   z.object({
     full_name: z.string().min(1, "Naziv je obvezen."),
     tax_number: z.string().optional(),
     social_security_number: z.string().optional(),
+    birthday: z.string().optional(),
     description: z.string().optional(),
+    employer: z.string().optional(),
   })
 );
 
 const form = useForm({
   validationSchema: formSchema,
   initialValues: {
-    full_name: props.person?.full_name || '',
-    tax_number: props.person?.tax_number || '',
-    social_security_number: props.person?.social_security_number || '',
-    description: props.person?.description || ''
+    full_name: props.person?.full_name || "",
+    tax_number: props.person?.tax_number || "",
+    social_security_number: props.person?.social_security_number || "",
+    birthday: props.person?.birthday || "",
+    description: props.person?.description || "",
+    employer: props.person?.employer || "",
   },
 });
 
 const close = () => {
-    emit('close');
-    setTimeout(() => {
-        form.resetForm({
-          values: {
-            full_name: props.person?.full_name || '',
-            tax_number: props.person?.tax_number || '',
-            social_security_number: props.person?.social_security_number || '',
-            description: props.person?.description || ''
-          }
-        });
-    }, 500);
-}
+  emit("close");
+  setTimeout(() => {
+    form.resetForm({
+      values: {
+        full_name: props.person?.full_name || "",
+        tax_number: props.person?.tax_number || "",
+        social_security_number: props.person?.social_security_number || "",
+        birthday: props.person?.birthday || "",
+        description: props.person?.description || "",
+        employer: props.person?.employer || "",
+      },
+    });
+  }, 500);
+};
 
 const updatePerson = async () => {
-    processingUpdate.value = true;
-    const { values } = form;
+  processingUpdate.value = true;
+  const { values } = form;
 
-    router.put(
-      route('person.update', props.person),
-      values,
-      {
-        preserveScroll: true,
-        onSuccess: () => {
-          processingUpdate.value = false;
-          close();
-        },
-        onError: (errors) => {
-          // Map Inertia errors to VeeValidate field errors
-          Object.keys(errors).forEach((field) => {
-            const errorMessages = Array.isArray(errors[field])
-              ? errors[field]
-              : [errors[field]];
-            form.setFieldError(field, errorMessages[0]);
-          });
-          processingUpdate.value = false;
-        },
-        onFinish: () => {
-          processingUpdate.value = false;
-        },
-      }
-    );
-}
+  router.put(route("person.update", props.person), values, {
+    preserveScroll: true,
+    onSuccess: () => {
+      processingUpdate.value = false;
+      close();
+    },
+    onError: (errors) => {
+      // Map Inertia errors to VeeValidate field errors
+      Object.keys(errors).forEach((field) => {
+        const errorMessages = Array.isArray(errors[field])
+          ? errors[field]
+          : [errors[field]];
+        form.setFieldError(field, errorMessages[0]);
+      });
+      processingUpdate.value = false;
+    },
+    onFinish: () => {
+      processingUpdate.value = false;
+    },
+  });
+};
 
 const onSubmit = form.handleSubmit(() => {
   updatePerson();
 });
 
 const onConfirm = () => {
-    onSubmit();
-}
+  onSubmit();
+};
 </script>
 <template>
-    <UpdateDialog
-        :show="show"
-        :title="`Posodobi ${person.full_name}`"
-        confirm-text="Shrani"
-        :processing="processingUpdate"
-        @close="close"
-        @confirm="onConfirm"
-    >
-        <form @submit.prevent="onSubmit">
-            <SectionTitle class="border-b mb-4">
-                <template #title>
-                    Oseba
-                </template>
-            </SectionTitle>
+  <UpdateDialog
+    :show="show"
+    :title="`Posodobi ${person.full_name}`"
+    confirm-text="Shrani"
+    :processing="processingUpdate"
+    @close="close"
+    @confirm="onConfirm"
+  >
+    <form @submit.prevent="onSubmit">
+      <SectionTitle class="border-b mb-4">
+        <template #title> Oseba </template>
+      </SectionTitle>
 
-            <div class="space-y-4">
-                <FormField v-slot="{ componentField }" name="full_name">
-                    <FormItem>
-                        <FormLabel>Naziv</FormLabel>
-                        <FormControl>
-                            <Input 
-                                id="cfullname"
-                                type="text"
-                                placeholder="Naziv"
-                                autocomplete="full-name"
-                                v-bind="componentField"
-                            />
-                        </FormControl>
-                        <FormMessage />
-                    </FormItem>
-                </FormField>
+      <div class="space-y-4">
+        <FormField v-slot="{ componentField }" name="full_name">
+          <FormItem>
+            <FormLabel>Naziv</FormLabel>
+            <FormControl>
+              <Input
+                id="cfullname"
+                type="text"
+                placeholder="Naziv"
+                autocomplete="full-name"
+                v-bind="componentField"
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
 
-                <FormField v-slot="{ componentField }" name="tax_number">
-                    <FormItem>
-                        <FormLabel>Davčna</FormLabel>
-                        <FormControl>
-                            <Input 
-                                id="ctaxnumber"
-                                type="text"
-                                placeholder="Davčna številka"
-                                autocomplete="tax-number"
-                                v-bind="componentField"
-                            />
-                        </FormControl>
-                        <FormMessage />
-                    </FormItem>
-                </FormField>
+        <FormField v-slot="{ componentField }" name="tax_number">
+          <FormItem>
+            <FormLabel>Davčna</FormLabel>
+            <FormControl>
+              <Input
+                id="ctaxnumber"
+                type="text"
+                placeholder="Davčna številka"
+                autocomplete="tax-number"
+                v-bind="componentField"
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
 
-                <FormField v-slot="{ componentField }" name="social_security_number">
-                    <FormItem>
-                        <FormLabel>Matična / Emšo</FormLabel>
-                        <FormControl>
-                            <Input 
-                                id="csocialSecurityNumber"
-                                type="text"
-                                placeholder="Matična / Emšo"
-                                autocomplete="social-security-number"
-                                v-bind="componentField"
-                            />
-                        </FormControl>
-                        <FormMessage />
-                    </FormItem>
-                </FormField>
-                
-                <FormField v-slot="{ componentField }" name="description">
-                    <FormItem>
-                        <FormLabel>Opis</FormLabel>
-                        <FormControl>
-                            <Textarea 
-                                id="cdescription"
-                                placeholder="Opis"
-                                v-bind="componentField"
-                            />
-                        </FormControl>
-                        <FormMessage />
-                    </FormItem>
-                </FormField>
-            </div>
-        </form>
-    </UpdateDialog>
+        <FormField v-slot="{ componentField }" name="social_security_number">
+          <FormItem>
+            <FormLabel>Matična / Emšo</FormLabel>
+            <FormControl>
+              <Input
+                id="csocialSecurityNumber"
+                type="text"
+                placeholder="Matična / Emšo"
+                autocomplete="social-security-number"
+                v-bind="componentField"
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="employer">
+          <FormItem>
+            <FormLabel>Delodajalec</FormLabel>
+            <FormControl>
+              <Input
+                id="cemployer"
+                type="text"
+                placeholder="Delodajalec"
+                autocomplete="employer"
+                v-bind="componentField"
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ value, handleChange }" name="birthday">
+          <FormItem>
+            <FormLabel>Datum rojstva</FormLabel>
+            <FormControl>
+              <DatePicker
+                id="cbirthday"
+                :model-value="value"
+                @update:model-value="handleChange"
+                format="dd.MM.yyyy"
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="description">
+          <FormItem>
+            <FormLabel>Opis</FormLabel>
+            <FormControl>
+              <Textarea id="cdescription" placeholder="Opis" v-bind="componentField" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+      </div>
+    </form>
+  </UpdateDialog>
 </template>
diff --git a/resources/js/Pages/Imports/Partials/CsvPreviewModal.vue b/resources/js/Pages/Imports/Partials/CsvPreviewModal.vue
index c79b1e2..63353ec 100644
--- a/resources/js/Pages/Imports/Partials/CsvPreviewModal.vue
+++ b/resources/js/Pages/Imports/Partials/CsvPreviewModal.vue
@@ -2,9 +2,12 @@
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/Components/ui/dialog";
 import { Button } from "@/Components/ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/Components/ui/select";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/Components/ui/table";
 import { Badge } from "@/Components/ui/badge";
 import { Label } from "@/Components/ui/label";
+import { Checkbox } from "@/Components/ui/checkbox";
+import { ChevronRightIcon } from "@heroicons/vue/24/outline";
+import { computed, ref } from "vue";
+
 const props = defineProps({
   show: Boolean,
   limit: Number,
@@ -14,72 +17,187 @@ const props = defineProps({
   truncated: Boolean,
   hasHeader: Boolean,
 })
+
 const emits = defineEmits(['close','change-limit','refresh'])
-function onLimit(e){ emits('change-limit', Number(e.target.value)); emits('refresh') }
+
+// State
+const selectedRow = ref(null);
+const hideEmptyRows = ref(true);
+
+// Filter out columns with empty headers
+const visibleColumns = computed(() => {
+  if (!props.columns) return [];
+  return props.columns.filter(col => col && String(col).trim() !== '');
+});
+
+// Check if row is empty (first 2 columns are empty)
+function isRowEmpty(row) {
+  if (!visibleColumns.value || visibleColumns.value.length === 0) return false;
+  const firstCols = visibleColumns.value.slice(0, 2);
+  return firstCols.every(col => !row[col] || String(row[col]).trim() === '');
+}
+
+// Filtered rows
+const visibleRows = computed(() => {
+  if (!props.rows) return [];
+  let filtered = props.rows;
+  if (hideEmptyRows.value) {
+    filtered = filtered.filter(r => !isRowEmpty(r));
+  }
+  return filtered.map((r, idx) => ({ ...r, index: idx + 1 }));
+});
+
+// Select row
+function selectRow(row) {
+  selectedRow.value = row;
+}
+
+function onLimit(val) {
+  emits('change-limit', Number(val));
+  emits('refresh');
+}
 </script>
+
 <template>
   <Dialog :open="show" @update:open="(val) => !val && $emit('close')">
-    <DialogContent class="max-w-6xl max-h-[90vh] overflow-hidden flex flex-col">
-      <DialogHeader>
-        <DialogTitle>CSV Preview ({{ rows.length }} / {{ limit }})</DialogTitle>
-      </DialogHeader>
-      
-      <div class="flex items-center gap-3 pb-3 border-b">
-        <div class="flex items-center gap-2">
-          <Label for="limit-select" class="text-sm text-gray-600">Limit:</Label>
-          <Select :model-value="String(limit)" @update:model-value="(val) => { emits('change-limit', Number(val)); emits('refresh'); }">
-            <SelectTrigger id="limit-select" class="w-24 h-8">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="50">50</SelectItem>
-              <SelectItem value="100">100</SelectItem>
-              <SelectItem value="200">200</SelectItem>
-              <SelectItem value="300">300</SelectItem>
-              <SelectItem value="500">500</SelectItem>
-            </SelectContent>
-          </Select>
+    <DialogContent class="max-w-7xl max-h-[90vh] overflow-hidden flex flex-col p-0">
+      <!-- Header -->
+      <div class="px-6 py-4 border-b bg-linear-to-r from-gray-50 to-white">
+        <div class="flex items-center justify-between">
+          <div>
+            <h2 class="text-xl font-semibold text-gray-900">CSV Preview</h2>
+            <p class="text-sm text-gray-500 mt-1">
+              Showing {{ visibleRows.length }} of {{ rows.length }} rows
+            </p>
+          </div>
+          <div class="flex items-center gap-3">
+            <div class="flex items-center gap-2">
+              <Label for="limit-select" class="text-sm text-gray-600">Limit:</Label>
+              <Select :model-value="String(limit)" @update:model-value="onLimit">
+                <SelectTrigger id="limit-select" class="w-24 h-8">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="50">50</SelectItem>
+                  <SelectItem value="100">100</SelectItem>
+                  <SelectItem value="200">200</SelectItem>
+                  <SelectItem value="300">300</SelectItem>
+                  <SelectItem value="500">500</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <Button @click="$emit('refresh')" variant="outline" size="sm" :disabled="loading">
+              {{ loading ? 'Loading…' : 'Refresh' }}
+            </Button>
+            <div class="flex items-center gap-2">
+              <Checkbox
+                id="hide-empty-rows"
+                :checked="hideEmptyRows"
+                @update:checked="(val) => hideEmptyRows = val"
+              />
+              <Label for="hide-empty-rows" class="text-xs cursor-pointer">
+                Hide empty rows
+              </Label>
+            </div>
+            <Badge v-if="truncated" variant="outline" class="bg-amber-50 text-amber-700 border-amber-200">
+              Truncated at limit
+            </Badge>
+          </div>
         </div>
-        <Button @click="$emit('refresh')" variant="outline" size="sm" :disabled="loading">
-          {{ loading ? 'Loading…' : 'Refresh' }}
-        </Button>
-        <Badge v-if="truncated" variant="outline" class="bg-amber-50 text-amber-700 border-amber-200">
-          Truncated at limit
-        </Badge>
       </div>
-      
-      <div class="flex-1 overflow-auto border rounded-lg">
-        <Table>
-          <TableHeader class="sticky top-0 bg-white z-10">
-            <TableRow>
-              <TableHead class="w-16">#</TableHead>
-              <TableHead v-for="col in columns" :key="col">{{ col }}</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            <TableRow v-if="loading">
-              <TableCell :colspan="columns.length + 1" class="text-center text-gray-500">
-                Loading…
-              </TableCell>
-            </TableRow>
-            <TableRow v-for="(r, idx) in rows" :key="idx">
-              <TableCell class="text-gray-500 font-medium">{{ idx + 1 }}</TableCell>
-              <TableCell v-for="col in columns" :key="col" class="whitespace-pre-wrap">
-                {{ r[col] }}
-              </TableCell>
-            </TableRow>
-            <TableRow v-if="!loading && !rows.length">
-              <TableCell :colspan="columns.length + 1" class="text-center text-gray-500">
-                No rows
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
+
+      <!-- Split View -->
+      <div class="flex-1 flex overflow-hidden">
+        <!-- Left Panel - Row List -->
+        <div class="w-96 border-r bg-gray-50 overflow-y-auto">
+          <div v-if="loading" class="p-8 text-center text-gray-500">
+            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-2"></div>
+            Loading...
+          </div>
+          <div v-else-if="!visibleRows.length" class="p-8 text-center text-gray-500">
+            No rows to display
+          </div>
+          <div v-else class="divide-y">
+            <button
+              v-for="row in visibleRows"
+              :key="row.index"
+              @click="selectRow(row)"
+              class="w-full px-4 py-3 text-left hover:bg-white transition-colors"
+              :class="{
+                'bg-white shadow-sm': selectedRow?.index === row.index,
+              }"
+            >
+              <div class="flex items-center justify-between gap-3">
+                <div class="flex items-center gap-3 flex-1 min-w-0">
+                  <!-- Row Number -->
+                  <div class="flex-shrink-0">
+                    <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-700 flex items-center justify-center text-xs font-semibold">
+                      {{ row.index }}
+                    </div>
+                  </div>
+
+                  <!-- Row Preview -->
+                  <div class="flex-1 min-w-0">
+                    <div class="text-xs font-semibold text-gray-900 mb-1">
+                      Row #{{ row.index }}
+                    </div>
+                    <div class="text-xs text-gray-600 truncate">
+                      {{ 
+                        visibleColumns.slice(0, 2).map(col => row[col]).filter(Boolean).join(' • ') || 'Empty row'
+                      }}
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Arrow -->
+                <ChevronRightIcon class="h-4 w-4 text-gray-400 flex-shrink-0" />
+              </div>
+            </button>
+          </div>
+        </div>
+
+        <!-- Right Panel - Row Details -->
+        <div v-if="selectedRow" class="flex-1 overflow-y-auto p-6">
+          <!-- Row Header -->
+          <div class="mb-6">
+            <h3 class="text-lg font-semibold text-gray-900">
+              Row #{{ selectedRow.index }}
+            </h3>
+            <p class="text-sm text-gray-500">Full row details</p>
+          </div>
+
+          <!-- Row Data -->
+          <div class="bg-gray-50 rounded-lg p-4">
+            <dl class="grid grid-cols-1 gap-3">
+              <div
+                v-for="col in visibleColumns"
+                :key="col"
+                class="flex items-start gap-3 py-2 border-b border-gray-200 last:border-0"
+              >
+                <dt class="text-sm font-medium text-gray-600 w-48 flex-shrink-0">
+                  {{ col }}
+                </dt>
+                <dd class="text-sm text-gray-900 flex-1 font-medium whitespace-pre-wrap break-words">
+                  {{ selectedRow[col] || '—' }}
+                </dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+
+        <!-- Empty State for Right Panel -->
+        <div v-else class="flex-1 flex items-center justify-center text-gray-400">
+          <div class="text-center">
+            <div class="text-5xl mb-3">📄</div>
+            <p class="text-sm">Select a row to view details</p>
+          </div>
+        </div>
       </div>
-      
-      <div class="text-xs text-gray-500 pt-3 border-t">
-        Showing up to {{ limit }} rows from source file. 
+
+      <!-- Footer -->
+      <div class="px-6 py-3 border-t bg-gray-50 text-xs text-gray-500">
         Header detection: <span class="font-medium">{{ hasHeader ? 'header present' : 'no header' }}</span>
+        • Click a row to view full details
       </div>
     </DialogContent>
   </Dialog>