diff --git a/app/Http/Controllers/PhoneViewController.php b/app/Http/Controllers/PhoneViewController.php
index 320d63c..25df4d4 100644
--- a/app/Http/Controllers/PhoneViewController.php
+++ b/app/Http/Controllers/PhoneViewController.php
@@ -13,8 +13,12 @@ public function __construct(protected ReferenceDataCache $referenceCache) {}
     public function index(Request $request)
     {
         $userId = $request->user()->id;
+        $search = $request->input('search');
+        $clientFilter = $request->input('client');
+        $perPage = $request->integer('per_page', 15);
+        $perPage = max(1, min(100, $perPage));
 
-        $jobs = FieldJob::query()
+        $query = FieldJob::query()
             ->where('assigned_user_id', $userId)
             ->whereNull('completed_at')
             ->whereNull('cancelled_at')
@@ -23,32 +27,78 @@ public function index(Request $request)
                     $q->with([
                         'type:id,name',
                         'account',
-                        'clientCase.person' => function ($pq) {
-                            $pq->with(['addresses', 'phones']);
-                        },
+                        'clientCase.person.address.type',
+                        'clientCase.person.phones',
                         'clientCase.client:id,uuid,person_id',
                         'clientCase.client.person:id,full_name',
                     ]);
                 },
             ])
-            ->orderByDesc('assigned_at')
-            ->limit(100)
-            ->get();
+            ->orderByDesc('assigned_at');
+
+        // Apply client filter
+        if ($clientFilter) {
+            $query->whereHas('contract.clientCase.client', function ($q) use ($clientFilter) {
+                $q->where('uuid', $clientFilter);
+            });
+        }
+
+        // Apply search filter
+        if ($search) {
+            $query->where(function ($q) use ($search) {
+                $q->whereHas('contract', function ($cq) use ($search) {
+                    $cq->where('reference', 'ilike', '%'.$search.'%')
+                        ->orWhereHas('clientCase.person', function ($pq) use ($search) {
+                            $pq->where('full_name', 'ilike', '%'.$search.'%');
+                        })
+                        ->orWhereHas('clientCase.client.person', function ($pq) use ($search) {
+                            $pq->where('full_name', 'ilike', '%'.$search.'%');
+                        });
+                });
+            });
+        }
+
+        $jobs = $query->paginate($perPage)->withQueryString();
+
+        // Get unique clients for filter dropdown
+        $clients = \App\Models\Client::query()
+            ->whereHas('clientCases.contracts.fieldJobs', function ($q) use ($userId) {
+                $q->where('assigned_user_id', $userId)
+                    ->whereNull('completed_at')
+                    ->whereNull('cancelled_at');
+            })
+            ->with(['person:id,full_name'])
+            ->get(['uuid', 'person_id'])
+            ->map(fn ($c) => [
+                'uuid' => (string) $c->uuid,
+                'name' => (string) optional($c->person)->full_name,
+            ])
+            ->sortBy('name', SORT_NATURAL | SORT_FLAG_CASE)
+            ->values();
 
         return Inertia::render('Phone/Index', [
             'jobs' => $jobs,
+            'clients' => $clients,
             'view_mode' => 'assigned',
+            'filters' => [
+                'search' => $search,
+                'client' => $clientFilter,
+            ],
         ]);
     }
 
     public function completedToday(Request $request)
     {
         $userId = $request->user()->id;
+        $search = $request->input('search');
+        $clientFilter = $request->input('client');
+        $perPage = $request->integer('per_page', 15);
+        $perPage = max(1, min(100, $perPage));
 
         $start = now()->startOfDay();
         $end = now()->endOfDay();
 
-        $jobs = FieldJob::query()
+        $query = FieldJob::query()
             ->where('assigned_user_id', $userId)
             ->whereNull('cancelled_at')
             ->whereBetween('completed_at', [$start, $end])
@@ -57,21 +107,63 @@ public function completedToday(Request $request)
                     $q->with([
                         'type:id,name',
                         'account',
-                        'clientCase.person' => function ($pq) {
-                            $pq->with(['addresses', 'phones']);
-                        },
+                        'clientCase.person.address.type',
+                        'clientCase.person.phones',
                         'clientCase.client:id,uuid,person_id',
                         'clientCase.client.person:id,full_name',
                     ]);
                 },
             ])
-            ->orderByDesc('completed_at')
-            ->limit(100)
-            ->get();
+            ->orderByDesc('completed_at');
+
+        // Apply client filter
+        if ($clientFilter) {
+            $query->whereHas('contract.clientCase.client', function ($q) use ($clientFilter) {
+                $q->where('uuid', $clientFilter);
+            });
+        }
+
+        // Apply search filter
+        if ($search) {
+            $query->where(function ($q) use ($search) {
+                $q->whereHas('contract', function ($cq) use ($search) {
+                    $cq->where('reference', 'ilike', '%'.$search.'%')
+                        ->orWhereHas('clientCase.person', function ($pq) use ($search) {
+                            $pq->where('full_name', 'ilike', '%'.$search.'%');
+                        })
+                        ->orWhereHas('clientCase.client.person', function ($pq) use ($search) {
+                            $pq->where('full_name', 'ilike', '%'.$search.'%');
+                        });
+                });
+            });
+        }
+
+        $jobs = $query->paginate($perPage)->withQueryString();
+
+        // Get unique clients for filter dropdown
+        $clients = \App\Models\Client::query()
+            ->whereHas('clientCases.contracts.fieldJobs', function ($q) use ($userId, $start, $end) {
+                $q->where('assigned_user_id', $userId)
+                    ->whereNull('cancelled_at')
+                    ->whereBetween('completed_at', [$start, $end]);
+            })
+            ->with(['person:id,full_name'])
+            ->get(['uuid', 'person_id'])
+            ->map(fn ($c) => [
+                'uuid' => (string) $c->uuid,
+                'name' => (string) optional($c->person)->full_name,
+            ])
+            ->sortBy('name', SORT_NATURAL | SORT_FLAG_CASE)
+            ->values();
 
         return Inertia::render('Phone/Index', [
             'jobs' => $jobs,
+            'clients' => $clients,
             'view_mode' => 'completed-today',
+            'filters' => [
+                'search' => $search,
+                'client' => $clientFilter,
+            ],
         ]);
     }
 
@@ -81,7 +173,7 @@ public function showCase(\App\Models\ClientCase $clientCase, Request $request)
         $completedMode = $request->boolean('completed');
 
         // Eager load case with person details
-        $case = $clientCase->load('person.addresses', 'person.phones', 'person.emails', 'person.bankAccounts');
+        $case = $clientCase->load('person.address.type', 'person.phones', 'person.emails', 'person.bankAccounts');
 
         // Query contracts based on field jobs
         $contractsQuery = FieldJob::query()
@@ -131,7 +223,7 @@ public function showCase(\App\Models\ClientCase $clientCase, Request $request)
             ->unique();
 
         return Inertia::render('Phone/Case/Index', [
-            'client' => $case->client->load('person.addresses', 'person.phones', 'person.emails', 'person.bankAccounts'),
+            'client' => $case->client->load('person.address.type', 'person.phones', 'person.emails', 'person.bankAccounts'),
             'client_case' => $case,
             'contracts' => $contracts,
             'documents' => $documents,
diff --git a/resources/js/Pages/Phone/Case/Index.vue b/resources/js/Pages/Phone/Case/Index.vue
index e1314ba..0c2c8bf 100644
--- a/resources/js/Pages/Phone/Case/Index.vue
+++ b/resources/js/Pages/Phone/Case/Index.vue
@@ -1,20 +1,60 @@
 <script setup>
 import AppPhoneLayout from "@/Layouts/AppPhoneLayout.vue";
-import SectionTitle from "@/Components/SectionTitle.vue";
 import PersonDetailPhone from "@/Components/PersonDetailPhone.vue";
-// Removed table-based component for phone; render a list instead
-// import DocumentsTable from '@/Components/DocumentsTable.vue';
 import DocumentViewerDialog from "@/Components/DocumentsTable/DocumentViewerDialog.vue";
 import { classifyDocument } from "@/Services/documents";
-import { reactive, ref, computed, watch, onMounted } from "vue";
-import DialogModal from "@/Components/DialogModal.vue";
-import InputLabel from "@/Components/InputLabel.vue";
-import TextInput from "@/Components/TextInput.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import BasicButton from "@/Components/buttons/BasicButton.vue";
+import { reactive, ref, computed, watch } from "vue";
 import { useForm, router } from "@inertiajs/vue3";
 import ActivityDrawer from "@/Pages/Cases/Partials/ActivityDrawer.vue";
-import ConfirmationModal from "@/Components/ConfirmationModal.vue";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardFooter,
+} from "@/Components/ui/card";
+import { Button } from "@/Components/ui/button";
+import { Badge } from "@/Components/ui/badge";
+import { Separator } from "@/Components/ui/separator";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/Components/ui/dialog";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/Components/ui/alert-dialog";
+import { Input } from "@/Components/ui/input";
+import { Label } from "@/Components/ui/label";
+import { Checkbox } from "@/Components/ui/checkbox";
+import {
+  ArrowLeft,
+  CheckCircle2,
+  FileText,
+  Calendar,
+  Euro,
+  User,
+  Plus,
+  Upload,
+  Download,
+  Eye,
+  Building2,
+  Phone,
+  Mail,
+  MapPin,
+  Activity,
+} from "lucide-vue-next";
 
 const props = defineProps({
   client: Object,
@@ -234,297 +274,304 @@ const clientSummary = computed(() => {
     <template #header>
       <div class="flex items-center justify-between gap-3">
         <div class="flex items-center gap-3 min-w-0">
-          <a
-            :href="route('phone.index')"
-            class="text-sm text-blue-600 hover:underline shrink-0"
-            >← Nazaj</a
+          <Button
+            variant="ghost"
+            size="sm"
+            @click="router.visit(route('phone.index'))"
+            class="shrink-0"
           >
-          <h2 class="font-semibold text-xl text-gray-800 truncate">
+            <ArrowLeft class="w-4 h-4 mr-1" />
+            Nazaj
+          </Button>
+          <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-100 truncate">
             {{ client_case?.person?.full_name }}
           </h2>
         </div>
         <div class="shrink-0">
-          <span
+          <Badge
             v-if="props.completed_mode"
-            class="inline-flex items-center px-2 py-1 rounded-full bg-emerald-100 text-emerald-700 text-xs font-medium"
+            variant="secondary"
+            class="bg-emerald-100 text-emerald-700 hover:bg-emerald-100"
           >
+            <CheckCircle2 class="w-3 h-3 mr-1" />
             Zaključeno danes
-          </span>
-          <button
+          </Badge>
+          <Button
             v-else
-            type="button"
-            class="px-3 py-2 rounded bg-green-600 text-white hover:bg-green-700"
             @click="confirmComplete = true"
+            class="bg-green-600 hover:bg-green-700"
           >
+            <CheckCircle2 class="w-4 h-4 mr-2" />
             Zaključi
-          </button>
+          </Button>
         </div>
       </div>
     </template>
 
     <div class="py-4 sm:py-6">
-      <div class="mx-auto max-w-5xl px-2 sm:px-4">
+      <div class="mx-auto max-w-5xl px-2 sm:px-4 space-y-4">
         <!-- Client details (account holder) -->
-        <div class="bg-white rounded-lg shadow border overflow-hidden">
-          <div class="p-3 sm:p-4">
-            <h3
-              class="text-base font-semibold text-gray-900 leading-tight flex items-center gap-2"
-            >
+        <Card>
+          <CardHeader>
+            <CardTitle class="flex items-center gap-2 text-base">
+              <Building2 class="w-5 h-5 text-gray-500" />
               <span class="truncate">{{ clientSummary.name }}</span>
-              <span class="chip-base chip-indigo">Naročnik</span>
-            </h3>
-            <div class="mt-4 pt-4 border-t border-dashed">
-              <PersonDetailPhone
-                :types="types"
-                :person="client.person"
-                default-tab="phones"
-              />
-            </div>
-          </div>
-        </div>
+              <Badge variant="secondary">Naročnik</Badge>
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Separator class="mb-4" />
+            <PersonDetailPhone
+              :types="types"
+              :person="client.person"
+              default-tab="phones"
+            />
+          </CardContent>
+        </Card>
 
         <!-- Person (case person) -->
-        <div class="bg-white rounded-lg shadow border overflow-hidden">
-          <div class="p-3 sm:p-4">
-            <h3
-              class="text-base font-semibold text-gray-900 leading-tight flex items-center gap-2"
-            >
+        <Card>
+          <CardHeader>
+            <CardTitle class="flex items-center gap-2 text-base">
+              <User class="w-5 h-5 text-gray-500" />
               <span class="truncate">{{ client_case.person.full_name }}</span>
-              <span class="chip-base chip-indigo">Primer</span>
-            </h3>
-            <div
+              <Badge variant="secondary">Primer</Badge>
+            </CardTitle>
+            <CardDescription
               v-if="client_case?.person?.description"
-              class="mt-2 text-sm text-gray-700 whitespace-pre-line"
+              class="mt-2 whitespace-pre-line"
             >
               {{ client_case.person.description }}
-            </div>
-            <div class="mt-4 pt-4 border-t border-dashed">
-              <PersonDetailPhone
-                :types="types"
-                :person="client_case.person"
-                default-tab="addresses"
-              />
-            </div>
-          </div>
-        </div>
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Separator class="mb-4" />
+            <PersonDetailPhone
+              :types="types"
+              :person="client_case.person"
+              default-tab="addresses"
+            />
+          </CardContent>
+        </Card>
 
         <!-- Contracts assigned to me -->
-        <div class="mt-4 sm:mt-6 bg-white rounded-lg shadow border overflow-hidden">
-          <div class="p-3 sm:p-4">
-            <SectionTitle>
-              <template #title>Pogodbe</template>
-            </SectionTitle>
-            <div class="mt-3 space-y-3">
-              <div
-                v-for="c in contracts"
-                :key="c.uuid || c.id"
-                class="rounded border p-3 sm:p-4 bg-white shadow-sm"
-              >
-                <!-- Header Row -->
+        <Card>
+          <CardHeader>
+            <CardTitle class="flex items-center gap-2">
+              <FileText class="w-5 h-5" />
+              Pogodbe
+            </CardTitle>
+          </CardHeader>
+          <CardContent class="space-y-3">
+            <Card
+              v-for="c in contracts"
+              :key="c.uuid || c.id"
+              class="border-l-4 border-l-indigo-500"
+            >
+              <CardHeader class="pb-3">
                 <div class="flex items-start justify-between gap-3">
-                  <div class="min-w-0">
+                  <div class="min-w-0 flex-1">
                     <div class="flex items-center gap-2 flex-wrap">
-                      <p
-                        class="font-semibold text-gray-900 text-sm leading-tight truncate"
-                      >
+                      <CardTitle class="text-sm">
                         {{ c.reference || c.uuid }}
-                      </p>
-                      <span
-                        v-if="c.type?.name"
-                        class="inline-flex items-center px-2 py-0.5 rounded-full bg-indigo-100 text-indigo-700 text-[11px] font-medium"
-                      >
+                      </CardTitle>
+                      <Badge v-if="c.type?.name" variant="secondary" class="text-[11px]">
                         {{ c.type.name }}
-                      </span>
+                      </Badge>
                     </div>
-                    <div v-if="c.account" class="mt-2 flex items-baseline gap-2">
-                      <span class="uppercase tracking-wide text-[11px] text-gray-400"
-                        >Odprto</span
-                      >
-                      <span
-                        class="text-lg font-semibold text-gray-900 leading-none tracking-tight"
-                        >{{ formatAmount(c.account.balance_amount) }} €</span
-                      >
+                    <div v-if="c.account" class="mt-3 flex items-center gap-2">
+                      <Euro class="w-4 h-4 text-gray-400" />
+                      <div class="flex items-baseline gap-2">
+                        <span class="text-xs text-gray-500 uppercase">Odprto</span>
+                        <span
+                          class="text-lg font-semibold text-gray-900 dark:text-gray-100"
+                        >
+                          {{ formatAmount(c.account.balance_amount) }} €
+                        </span>
+                      </div>
                     </div>
                   </div>
-                  <div class="flex flex-col gap-1.5 w-32 text-right shrink-0">
-                    <button
-                      type="button"
-                      class="text-sm px-3 py-2 rounded-md bg-indigo-600 text-white hover:bg-indigo-700 active:scale-[.97] transition shadow"
-                      @click="openDrawerAddActivity(c)"
-                    >
-                      + Aktivnost
-                    </button>
-                    <button
-                      type="button"
-                      class="text-sm px-3 py-2 rounded-md bg-indigo-600 text-white hover:bg-indigo-700 active:scale-[.97] transition shadow"
-                      @click="openDocDialog(c)"
-                    >
-                      + Dokument
-                    </button>
-                    <!--button
-                      type="button"
-                      :disabled="!getContractObjects(c).length"
-                      @click="openObjectsModal(c)"
-                      class="relative text-sm px-3 py-2 rounded-md flex items-center justify-center transition disabled:cursor-not-allowed disabled:opacity-50 bg-slate-600 text-white hover:bg-slate-700 active:scale-[.97] shadow"
-                    >
-                      Predmeti
-                      <span
-                        class="ml-1 inline-flex items-center justify-center min-w-[1.1rem] h-5 text-[11px] px-1.5 rounded-full bg-white/90 text-slate-700 font-medium"
-                        >{{ getContractObjects(c).length }}</span
-                      >
-                    </button-->
+                  <div class="flex flex-col gap-2 shrink-0">
+                    <Button size="sm" @click="openDrawerAddActivity(c)">
+                      <Plus class="w-4 h-4 mr-1" />
+                      Aktivnost
+                    </Button>
+                    <Button size="sm" variant="secondary" @click="openDocDialog(c)">
+                      <Upload class="w-4 h-4 mr-1" />
+                      Dokument
+                    </Button>
                   </div>
                 </div>
-                <!-- Subject / Last Object -->
-                <div v-if="c.last_object" class="mt-3 border-t pt-3">
-                  <p class="text-[11px] uppercase tracking-wide text-gray-400 mb-1">
-                    Zadnji predmet
-                  </p>
-                  <div class="text-sm font-medium text-gray-800">
+              </CardHeader>
+              <CardContent v-if="c.last_object" class="pt-0">
+                <Separator class="mb-3" />
+                <div class="space-y-1">
+                  <p class="text-xs text-gray-500 uppercase">Zadnji predmet</p>
+                  <div class="text-sm font-medium text-gray-800 dark:text-gray-200">
                     {{ c.last_object.name || c.last_object.reference }}
                     <span
                       v-if="c.last_object.type"
                       class="ml-2 text-xs font-normal text-gray-500"
-                      >({{ c.last_object.type }})</span
                     >
+                      ({{ c.last_object.type }})
+                    </span>
                   </div>
                   <div
                     v-if="c.last_object.description"
-                    class="mt-1 text-sm text-gray-600 leading-snug"
+                    class="text-sm text-gray-600 dark:text-gray-400"
                   >
                     {{ c.last_object.description }}
                   </div>
                 </div>
-              </div>
-              <p v-if="!contracts?.length" class="text-sm text-gray-600">
-                Ni pogodbenih obveznosti dodeljenih vam za ta primer.
-              </p>
-            </div>
-          </div>
-        </div>
+              </CardContent>
+            </Card>
+            <p
+              v-if="!contracts?.length"
+              class="text-sm text-gray-600 dark:text-gray-400 text-center py-4"
+            >
+              Ni pogodbenih obveznosti dodeljenih vam za ta primer.
+            </p>
+          </CardContent>
+        </Card>
 
         <!-- Activities -->
-        <div class="mt-4 sm:mt-6 bg-white rounded-lg shadow border overflow-hidden">
-          <div class="p-3 sm:p-4">
+        <Card>
+          <CardHeader>
             <div class="flex items-center justify-between">
-              <SectionTitle>
-                <template #title>Aktivnosti</template>
-              </SectionTitle>
-              <button
-                class="text-xs font-medium px-3 py-2 rounded-md bg-indigo-600 text-white shadow-sm active:scale-[.98] hover:bg-indigo-700"
-                @click="openDrawerAddActivity()"
-              >
+              <CardTitle class="flex items-center gap-2">
+                <Activity class="w-5 h-5" />
+                Aktivnosti
+              </CardTitle>
+              <Button size="sm" @click="openDrawerAddActivity()">
+                <Plus class="w-4 h-4 mr-1" />
                 Nova
-              </button>
+              </Button>
             </div>
-            <div class="mt-3 space-y-3">
-              <div
-                v-for="a in activities"
-                :key="a.id"
-                class="rounded-md border border-gray-200 bg-gray-50/70 px-3 py-3 shadow-sm text-[13px]"
-              >
-                <!-- Top line: action + date/user -->
+          </CardHeader>
+          <CardContent class="space-y-3">
+            <Card
+              v-for="a in activities"
+              :key="a.id"
+              class="bg-gray-50/70 dark:bg-gray-800/50"
+            >
+              <CardHeader class="pb-3">
                 <div class="flex items-start justify-between gap-3">
-                  <div class="font-medium text-gray-800 leading-snug truncate">
+                  <CardTitle class="text-sm font-medium truncate">
                     {{ activityActionLine(a) || "Aktivnost" }}
-                  </div>
+                  </CardTitle>
                   <div
-                    class="shrink-0 text-right text-[11px] text-gray-500 leading-tight"
+                    class="shrink-0 text-right text-xs text-gray-500 dark:text-gray-400"
                   >
-                    <div v-if="a.created_at">{{ formatDateShort(a.created_at) }}</div>
-                    <div v-if="(a.user && a.user.name) || a.user_name" class="truncate">
+                    <div v-if="a.created_at" class="flex items-center gap-1">
+                      <Calendar class="w-3 h-3" />
+                      {{ formatDateShort(a.created_at) }}
+                    </div>
+                    <div
+                      v-if="(a.user && a.user.name) || a.user_name"
+                      class="truncate flex items-center gap-1 mt-1"
+                    >
+                      <User class="w-3 h-3" />
                       {{ a.user?.name || a.user_name }}
                     </div>
                   </div>
                 </div>
-
-                <!-- Badges row -->
-                <div class="mt-2 flex flex-wrap gap-1.5">
-                  <span
-                    v-if="a.contract"
-                    class="inline-flex items-center rounded-full bg-indigo-100 text-indigo-700 px-2 py-0.5 text-[10px] font-medium"
-                    >Pogodba: {{ a.contract.reference }}</span
-                  >
-                  <span
+              </CardHeader>
+              <CardContent class="pt-0 space-y-2">
+                <div class="flex flex-wrap gap-1.5">
+                  <Badge v-if="a.contract" variant="secondary" class="text-[10px]">
+                    <FileText class="w-3 h-3 mr-1" />
+                    Pogodba: {{ a.contract.reference }}
+                  </Badge>
+                  <Badge
                     v-if="a.due_date"
-                    class="inline-flex items-center rounded-full bg-amber-100 text-amber-700 px-2 py-0.5 text-[10px] font-medium"
-                    >Zapadlost: {{ formatDateShort(a.due_date) || a.due_date }}</span
+                    variant="secondary"
+                    class="bg-amber-100 text-amber-700 hover:bg-amber-100 text-[10px]"
                   >
-                  <span
+                    <Calendar class="w-3 h-3 mr-1" />
+                    Zapadlost: {{ formatDateShort(a.due_date) || a.due_date }}
+                  </Badge>
+                  <Badge
                     v-if="a.amount != null"
-                    class="inline-flex items-center rounded-full bg-emerald-100 text-emerald-700 px-2 py-0.5 text-[10px] font-medium"
-                    >Znesek: {{ formatAmount(a.amount) }} €</span
-                  >
-                  <span
-                    v-if="a.status"
-                    class="inline-flex items-center rounded-full bg-gray-200 text-gray-700 px-2 py-0.5 text-[10px] font-medium"
-                    >{{ a.status }}</span
+                    variant="secondary"
+                    class="bg-emerald-100 text-emerald-700 hover:bg-emerald-100 text-[10px]"
                   >
+                    <Euro class="w-3 h-3 mr-1" />
+                    Znesek: {{ formatAmount(a.amount) }} €
+                  </Badge>
+                  <Badge v-if="a.status" variant="outline" class="text-[10px]">
+                    {{ a.status }}
+                  </Badge>
                 </div>
-
-                <!-- Note -->
-                <div v-if="a.note" class="mt-2 text-gray-700 leading-snug">
+                <p v-if="a.note" class="text-sm text-gray-700 dark:text-gray-300">
                   {{ a.note }}
-                </div>
-              </div>
-              <div
-                v-if="!activities?.length"
-                class="text-gray-600 text-sm py-2 text-center"
-              >
-                Ni aktivnosti.
-              </div>
-            </div>
-          </div>
-        </div>
+                </p>
+              </CardContent>
+            </Card>
+            <p
+              v-if="!activities?.length"
+              class="text-sm text-gray-600 dark:text-gray-400 text-center py-4"
+            >
+              Ni aktivnosti.
+            </p>
+          </CardContent>
+        </Card>
 
         <!-- Documents (case + assigned contracts) -->
-        <div class="mt-4 sm:mt-6 bg-white rounded-lg shadow border overflow-hidden">
-          <div class="p-3 sm:p-4">
+        <Card>
+          <CardHeader>
             <div class="flex items-center justify-between">
-              <SectionTitle>
-                <template #title>Dokumenti</template>
-              </SectionTitle>
-              <button
-                class="text-sm px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700"
-                @click="openDocDialog()"
-              >
+              <CardTitle class="flex items-center gap-2">
+                <FileText class="w-5 h-5" />
+                Dokumenti
+              </CardTitle>
+              <Button size="sm" variant="secondary" @click="openDocDialog()">
+                <Upload class="w-4 h-4 mr-1" />
                 Dodaj
-              </button>
+              </Button>
             </div>
-
-            <div class="mt-3 divide-y">
-              <div v-for="d in documents" :key="d.uuid || d.id" class="py-3">
+          </CardHeader>
+          <CardContent>
+            <div class="divide-y">
+              <div v-for="d in documents" :key="d.uuid || d.id" class="py-3 first:pt-0">
                 <div class="flex items-start justify-between gap-3">
-                  <div class="min-w-0">
-                    <div class="font-medium text-gray-900 truncate">
+                  <div class="min-w-0 flex-1">
+                    <div
+                      class="font-medium text-gray-900 dark:text-gray-100 truncate flex items-center gap-2"
+                    >
+                      <FileText class="w-4 h-4 text-gray-400 shrink-0" />
                       {{ d.name || d.original_name }}
                     </div>
-                    <div class="text-xs text-gray-500 mt-0.5">
-                      <span v-if="d.contract_reference"
-                        >Pogodba: {{ d.contract_reference }}</span
-                      >
-                      <span v-else>Primer</span>
-                      <span v-if="d.created_at" class="ml-2"
-                        >· {{ new Date(d.created_at).toLocaleDateString("sl-SI") }}</span
-                      >
-                    </div>
                     <div
+                      class="text-xs text-gray-500 dark:text-gray-400 mt-1 flex items-center gap-2"
+                    >
+                      <Badge
+                        v-if="d.contract_reference"
+                        variant="outline"
+                        class="text-[10px]"
+                      >
+                        Pogodba: {{ d.contract_reference }}
+                      </Badge>
+                      <Badge v-else variant="outline" class="text-[10px]"> Primer </Badge>
+                      <span v-if="d.created_at" class="flex items-center gap-1">
+                        <Calendar class="w-3 h-3" />
+                        {{ new Date(d.created_at).toLocaleDateString("sl-SI") }}
+                      </span>
+                    </div>
+                    <p
                       v-if="d.description"
-                      class="text-gray-600 text-sm mt-1 line-clamp-2"
+                      class="text-sm text-gray-600 dark:text-gray-400 mt-1 line-clamp-2"
                     >
                       {{ d.description }}
-                    </div>
+                    </p>
                   </div>
-                  <div class="shrink-0 flex flex-col items-end gap-2">
-                    <button
-                      type="button"
-                      class="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-800"
-                      @click="openViewer(d)"
-                    >
-                      Ogled
-                    </button>
-                    <a
-                      class="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-800"
+                  <div class="shrink-0 flex gap-2">
+                    <Button size="sm" variant="ghost" @click="openViewer(d)">
+                      <Eye class="w-4 h-4" />
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      as="a"
                       :href="
                         (() => {
                           const isC = (d?.documentable_type || '')
@@ -541,17 +588,21 @@ const clientSummary = computed(() => {
                               });
                         })()
                       "
-                      >Prenesi</a
                     >
+                      <Download class="w-4 h-4" />
+                    </Button>
                   </div>
                 </div>
               </div>
-              <div v-if="!documents?.length" class="text-gray-600 text-sm py-2">
+              <p
+                v-if="!documents?.length"
+                class="text-sm text-gray-600 dark:text-gray-400 text-center py-4"
+              >
                 Ni dokumentov.
-              </div>
+              </p>
             </div>
-          </div>
-        </div>
+          </CardContent>
+        </Card>
       </div>
     </div>
 
@@ -573,177 +624,74 @@ const clientSummary = computed(() => {
       :contracts="contracts"
     />
 
-    <ConfirmationModal :show="confirmComplete" @close="confirmComplete = false">
-      <template #title>Potrditev</template>
-      <template #content> Ali ste prepričani da želite že zaključit stranko? </template>
-      <template #footer>
-        <button
-          type="button"
-          class="px-3 py-2 rounded bg-gray-100 hover:bg-gray-200"
-          @click="confirmComplete = false"
-        >
-          Prekliči
-        </button>
-        <button
-          type="button"
-          class="px-3 py-2 rounded bg-green-600 text-white hover:bg-green-700 ml-2"
-          @click="submitComplete"
-        >
-          Potrdi
-        </button>
-      </template>
-    </ConfirmationModal>
-
-    <!-- Contract Objects (Predmeti) Modal -->
-    <DialogModal :show="objectsModal.open" @close="closeObjectsModal">
-      <template #title>
-        Predmeti
-        <span
-          v-if="objectsModal.contract"
-          class="block text-xs font-normal text-gray-500 mt-0.5"
-        >
-          {{ objectsModal.contract.reference || objectsModal.contract.uuid }}
-        </span>
-      </template>
-      <template #content>
-        <div
-          v-if="objectsModal.items.length"
-          class="space-y-3 max-h-[60vh] overflow-y-auto pr-1"
-        >
-          <div
-            v-for="(o, idx) in objectsModal.items"
-            :key="o.id || o.uuid || idx"
-            class="rounded border border-gray-200 bg-gray-50 px-3 py-2 text-sm"
+    <!-- Complete Case Confirmation -->
+    <AlertDialog :open="confirmComplete" @update:open="confirmComplete = $event">
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Potrditev</AlertDialogTitle>
+          <AlertDialogDescription>
+            Ali ste prepričani da želite že zaključit stranko?
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel @click="confirmComplete = false">
+            Prekliči
+          </AlertDialogCancel>
+          <AlertDialogAction
+            @click="submitComplete"
+            class="bg-green-600 hover:bg-green-700"
           >
-            <div class="font-medium text-gray-800 truncate">
-              {{ o.name || o.reference || "#" + (o.id || o.uuid || idx + 1) }}
-            </div>
-            <div class="mt-0.5 text-xs text-gray-500 flex flex-wrap gap-x-2 gap-y-0.5">
-              <span
-                v-if="o.type"
-                class="inline-flex items-center bg-indigo-100 text-indigo-700 px-1.5 py-0.5 rounded-full"
-                >{{ o.type }}</span
-              >
-              <span
-                v-if="o.status"
-                class="inline-flex items-center bg-gray-200 text-gray-700 px-1.5 py-0.5 rounded-full"
-                >{{ o.status }}</span
-              >
-              <span
-                v-if="o.amount != null"
-                class="inline-flex items-center bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded-full"
-                >{{ formatAmount(o.amount) }} €</span
-              >
-            </div>
-            <div v-if="o.description" class="mt-1 text-gray-600 leading-snug">
-              {{ o.description }}
-            </div>
-          </div>
-        </div>
-        <div v-else class="text-gray-600 text-sm">Ni predmetov.</div>
-      </template>
-      <template #footer>
-        <button
-          type="button"
-          class="px-3 py-2 rounded bg-gray-100 hover:bg-gray-200"
-          @click="closeObjectsModal"
-        >
-          Zapri
-        </button>
-      </template>
-    </DialogModal>
+            Potrdi
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
 
-    <!-- Upload Document Modal -->
-    <DialogModal :show="docDialogOpen" @close="closeDocDialog">
-      <template #title>Dodaj dokument</template>
-      <template #content>
-        <div class="space-y-4">
-          <div v-if="selectedContract" class="text-sm text-gray-700">
+    <!-- Upload Document Dialog -->
+    <Dialog :open="docDialogOpen" @update:open="docDialogOpen = $event">
+      <DialogContent class="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Dodaj dokument</DialogTitle>
+          <DialogDescription v-if="selectedContract">
             Dokument bo dodan k pogodbi:
-            <span class="font-medium">{{
-              selectedContract.reference || selectedContract.uuid
-            }}</span>
-          </div>
+            <strong>{{ selectedContract.reference || selectedContract.uuid }}</strong>
+          </DialogDescription>
+        </DialogHeader>
+        <div class="space-y-4">
           <div>
-            <InputLabel for="docFile" value="Datoteka" />
-            <input
-              id="docFile"
-              type="file"
-              class="mt-1 block w-full"
-              @change="onPickDocument"
-            />
-            <div v-if="docForm.errors.file" class="text-sm text-red-600 mt-1">
+            <Label for="docFile">Datoteka</Label>
+            <Input id="docFile" type="file" class="mt-1" @change="onPickDocument" />
+            <p v-if="docForm.errors.file" class="text-sm text-red-600 mt-1">
               {{ docForm.errors.file }}
-            </div>
+            </p>
           </div>
           <div>
-            <InputLabel for="docName" value="Ime" />
-            <TextInput id="docName" v-model="docForm.name" class="mt-1 block w-full" />
-            <div v-if="docForm.errors.name" class="text-sm text-red-600 mt-1">
+            <Label for="docName">Ime</Label>
+            <Input id="docName" v-model="docForm.name" class="mt-1" />
+            <p v-if="docForm.errors.name" class="text-sm text-red-600 mt-1">
               {{ docForm.errors.name }}
-            </div>
+            </p>
           </div>
           <div>
-            <InputLabel for="docDesc" value="Opis" />
-            <TextInput
-              id="docDesc"
-              v-model="docForm.description"
-              class="mt-1 block w-full"
-            />
-            <div v-if="docForm.errors.description" class="text-sm text-red-600 mt-1">
+            <Label for="docDesc">Opis</Label>
+            <Input id="docDesc" v-model="docForm.description" class="mt-1" />
+            <p v-if="docForm.errors.description" class="text-sm text-red-600 mt-1">
               {{ docForm.errors.description }}
-            </div>
+            </p>
           </div>
           <div class="flex items-center gap-2">
-            <input id="docPublic" type="checkbox" v-model="docForm.is_public" />
-            <InputLabel for="docPublic" value="Javno" />
+            <Checkbox id="docPublic" :model-value="docForm.is_public" />
+            <Label for="docPublic">Javno</Label>
           </div>
         </div>
-      </template>
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <button
-            type="button"
-            class="px-3 py-2 rounded bg-gray-100 hover:bg-gray-200"
-            @click="closeDocDialog"
-          >
-            Prekliči
-          </button>
-          <button
-            type="button"
-            class="px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700"
-            :disabled="docForm.processing || !docForm.file"
-            @click="submitDocument"
-          >
+        <DialogFooter>
+          <Button variant="outline" @click="closeDocDialog"> Prekliči </Button>
+          <Button :disabled="docForm.processing || !docForm.file" @click="submitDocument">
+            <Upload class="w-4 h-4 mr-2" />
             Naloži
-          </button>
-        </div>
-      </template>
-    </DialogModal>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   </AppPhoneLayout>
 </template>
-
-<style scoped>
-/* Using basic CSS since @apply is not processed in this scoped block by default */
-.chip-base {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.125rem 0.5rem; /* py-0.5 px-2 */
-  border-radius: 9999px;
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 1.1;
-}
-.chip-indigo {
-  background: #eef2ff;
-  color: #3730a3;
-} /* approx indigo-50 / indigo-700 */
-.chip-default {
-  background: #f1f5f9;
-  color: #334155;
-} /* slate-100 / slate-700 */
-.chip-emerald {
-  background: #ecfdf5;
-  color: #047857;
-} /* emerald-50 / emerald-700 */
-</style>
diff --git a/resources/js/Pages/Phone/Index.vue b/resources/js/Pages/Phone/Index.vue
index 8440a76..783afec 100644
--- a/resources/js/Pages/Phone/Index.vue
+++ b/resources/js/Pages/Phone/Index.vue
@@ -1,67 +1,94 @@
 <script setup>
 import AppPhoneLayout from "@/Layouts/AppPhoneLayout.vue";
-import { Separator } from "reka-ui";
-import { computed, ref } from "vue";
+import { Badge } from "@/Components/ui/badge";
+import { Button } from "@/Components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/Components/ui/card";
+import { Input } from "@/Components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/Components/ui/select";
+import { Separator } from "@/Components/ui/separator";
+import { Skeleton } from "@/Components/ui/skeleton";
+import { router } from "@inertiajs/vue3";
+import { computed, ref, watch } from "vue";
+import { useDebounceFn } from "@vueuse/core";
+import {
+  CalendarDays,
+  FileText,
+  FilterIcon,
+  MapPin,
+  Phone,
+  Wallet,
+} from "lucide-vue-next";
 
 const props = defineProps({
-  jobs: { type: Array, default: () => [] },
-  view_mode: { type: String, default: "assigned" }, // 'assigned' | 'completed-today'
+  jobs: { type: Object, required: true },
+  clients: { type: Array, default: () => [] },
+  view_mode: { type: String, default: "assigned" },
+  filters: { type: Object, default: () => ({ search: "", client: "" }) },
 });
 
-const items = computed(() => props.jobs || []);
+const search = ref(props.filters.search || "");
+const clientFilter = ref(props.filters.client || "");
+const isLoading = ref(false);
 
-// Client filter options derived from jobs
-const clientFilter = ref("");
-const listNonActivity = ref([]);
-const listActivity = ref([]);
+const listNonActivity = computed(() =>
+  (props.jobs.data || []).filter((item) => !item.added_activity)
+);
 
-const clientOptions = computed(() => {
-  const map = new Map();
-  for (const job of items.value) {
-    const client = job?.contract?.client_case?.client;
-    const uuid = client?.uuid;
-    const name = client?.person?.full_name;
-    if (uuid && name && !map.has(uuid)) {
-      map.set(uuid, { uuid, name });
+const listActivity = computed(() =>
+  (props.jobs.data || []).filter((item) => !!item.added_activity)
+);
+
+const debouncedSearch = useDebounceFn((value) => {
+  performSearch();
+}, 500);
+
+watch(search, (newValue) => {
+  debouncedSearch(newValue);
+});
+
+watch(clientFilter, () => {
+  performSearch();
+});
+
+function performSearch() {
+  isLoading.value = true;
+
+  router.get(
+    route(props.view_mode === "completed-today" ? "phone.completed" : "phone.index"),
+    {
+      search: search.value || undefined,
+      client: clientFilter.value || undefined,
+    },
+    {
+      preserveState: true,
+      preserveScroll: true,
+      only: ["jobs", "filters"],
+      onFinish: () => {
+        isLoading.value = false;
+      },
     }
-  }
-  return Array.from(map.values()).sort((a, b) => a.name.localeCompare(b.name));
-});
+  );
+}
 
-// Search filter (contract reference or person full name)
-const search = ref("");
-const filteredJobs = computed(() => {
-  const term = search.value.trim().toLowerCase();
-  const filterList = items.value.filter((job) => {
-    // Filter by selected client (if any)
-    if (clientFilter.value) {
-      const juuid = job?.contract?.client_case?.client?.uuid;
-      if (juuid !== clientFilter.value) {
-        return false;
-      }
-    }
-
-    // Text search
-    if (!term) return true;
-    const refStr = (job.contract?.reference || job.contract?.uuid || "")
-      .toString()
-      .toLowerCase();
-    const nameStr = (job.contract?.client_case?.person?.full_name || "").toLowerCase();
-    const clientNameStr = (
-      job.contract?.client_case?.client?.person?.full_name || ""
-    ).toLowerCase();
-    return (
-      refStr.includes(term) || nameStr.includes(term) || clientNameStr.includes(term)
-    );
-  });
-  listNonActivity.value = filterList.filter((item) => !item.added_activity);
-  listActivity.value = filterList.filter((item) => !!item.added_activity);
-  return filterList;
-});
+function clearSearch() {
+  search.value = "";
+  clientFilter.value = "";
+}
 
 function formatDateDMY(d) {
   if (!d) return "-";
-  // Handle date-only strings from Laravel JSON casts (YYYY-MM-DD...)
   if (/^\d{4}-\d{2}-\d{2}/.test(d)) {
     const [y, m, rest] = d.split("-");
     const day = (rest || "").slice(0, 2) || "01";
@@ -85,226 +112,472 @@ function formatAmount(val) {
   });
 }
 
-// Safely resolve a client case UUID for a job
 function getCaseUuid(job) {
   return (
     job?.contract?.client_case?.uuid || job?.client_case?.uuid || job?.case_uuid || null
   );
 }
+
+function changePage(url) {
+  if (!url) return;
+  isLoading.value = true;
+  router.get(
+    url,
+    {},
+    {
+      preserveState: true,
+      preserveScroll: false,
+      only: ["jobs"],
+      onFinish: () => {
+        isLoading.value = false;
+      },
+    }
+  );
+}
 </script>
 
 <template>
   <AppPhoneLayout title="Phone">
     <template #header>
-      <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+      <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
         {{
-          props.view_mode === "completed-today"
-            ? "Zaključena opravila danes"
-            : "Moja terenska opravila"
+          props.view_mode === "completed-today" ? "Zaključeno danes" : "Terenska opravila"
         }}
       </h2>
     </template>
 
-    <div class="py-4 sm:py-8">
-      <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
-        <div class="mb-4 flex items-center gap-2 flex-wrap">
-          <select
-            v-model="clientFilter"
-            class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-          >
-            <option value="">Vsi naročniki</option>
-            <option v-for="c in clientOptions" :key="c.uuid" :value="c.uuid">
-              {{ c.name }}
-            </option>
-          </select>
-          <input
-            v-model="search"
-            type="text"
-            placeholder="Išči po referenci ali imenu..."
-            class="flex-1 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-          />
-          <button
-            v-if="search"
-            type="button"
-            @click="search = ''"
-            class="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-600"
-          >
-            Počisti
-          </button>
-        </div>
+    <div class="py-6 sm:py-8">
+      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 space-y-4">
+        <!-- Filters Section -->
+        <Card>
+          <CardHeader class="flex flex-row gap-1 items-center">
+            <FilterIcon size="20" />
+            <CardTitle class="text-xl">Filter</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div class="flex flex-col sm:flex-row gap-4">
+              <div class="flex-1">
+                <Input
+                  v-model="search"
+                  type="text"
+                  placeholder="Išči po referenci ali imenu..."
+                  class="w-full"
+                />
+              </div>
 
-        <template v-if="filteredJobs.length">
-          <h2 class="py-4">Nove / Ne obdelane</h2>
-          <div class="grid grid-cols-1 gap-3 sm:gap-4 md:grid-cols-2 lg:grid-cols-3">
-            <div
-              v-for="job in listNonActivity"
-              :key="job.id"
-              class="bg-white rounded-lg shadow border p-3 sm:p-4"
-            >
-              <div class="mb-4 flex gap-2">
-                <a
-                  v-if="getCaseUuid(job)"
-                  :href="
-                    route('phone.case', {
-                      client_case: getCaseUuid(job),
-                      completed: props.view_mode === 'completed-today' ? 1 : undefined,
-                    })
-                  "
-                  class="inline-flex-1 flex-1 text-center px-3 py-2 rounded-md bg-blue-600 text-white text-sm hover:bg-blue-700"
-                >
-                  Odpri primer
-                </a>
-                <button
-                  v-else
-                  type="button"
-                  disabled
-                  class="inline-flex-1 flex-1 text-center px-3 py-2 rounded-md bg-gray-300 text-gray-600 text-sm cursor-not-allowed"
-                >
-                  Manjka primer
-                </button>
-              </div>
-              <div class="flex items-center justify-between">
-                <p class="text-sm text-gray-500">
-                  Dodeljeno:
-                  <span class="font-medium text-gray-700">{{
-                    formatDateDMY(job.assigned_at)
-                  }}</span>
-                </p>
-                <span
-                  v-if="job.priority"
-                  class="inline-block text-xs px-2 py-0.5 rounded bg-amber-100 text-amber-700"
-                  >Prioriteta</span
-                >
-              </div>
-              <div class="mt-2">
-                <p class="text-base sm:text-lg font-semibold text-gray-800">
-                  {{ job.contract?.client_case?.person?.full_name || "—" }}
-                </p>
-                <p class="text-sm text-gray-600">
-                  Naročnik:
-                  <span class="font-semibold text-gray-800">
-                    {{ job.contract?.client_case?.client?.person?.full_name || "—" }}
-                  </span>
-                </p>
-                <p class="text-sm text-gray-600 truncate">
-                  Kontrakt: {{ job.contract?.reference || job.contract?.uuid }}
-                </p>
-                <p
-                  class="text-sm text-gray-600"
-                  v-if="
-                    job.contract?.account &&
-                    job.contract.account.balance_amount !== null &&
-                    job.contract.account.balance_amount !== undefined
-                  "
-                >
-                  Odprto: {{ formatAmount(job.contract.account.balance_amount) }} €
-                </p>
-              </div>
-              <div class="mt-3 text-sm text-gray-600">
-                <p>
-                  <span class="font-medium">Naslov:</span>
-                  {{ job.contract?.client_case?.person?.addresses?.[0]?.address || "—" }}
-                </p>
-                <p>
-                  <span class="font-medium">Telefon:</span>
-                  {{ job.contract?.client_case?.person?.phones?.[0]?.nu || "—" }}
-                </p>
-              </div>
+              <Select v-model="clientFilter">
+                <SelectTrigger class="w-full sm:w-64">
+                  <SelectValue placeholder="Vsi naročniki" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem
+                    v-for="client in props.clients"
+                    :key="client.uuid"
+                    :value="client.uuid"
+                  >
+                    {{ client.name }}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+
+              <Button
+                v-if="search || clientFilter"
+                variant="outline"
+                @click="clearSearch"
+              >
+                Počisti
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        <!-- Loading Skeleton -->
+        <div v-if="isLoading" class="space-y-6">
+          <div class="space-y-3">
+            <Skeleton class="h-8 w-48" />
+            <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+              <Skeleton v-for="i in 6" :key="i" class="h-72" />
             </div>
           </div>
-          <h2 class="py-4">Obdelane pogodbe</h2>
-          <div class="grid grid-cols-1 gap-3 sm:gap-4 md:grid-cols-2 lg:grid-cols-3">
-            <div
-              v-for="job in listActivity"
-              :key="job.id"
-              class="bg-white rounded-lg shadow border p-3 sm:p-4"
-            >
-              <div class="mb-4 flex gap-2">
-                <a
-                  v-if="getCaseUuid(job)"
-                  :href="
-                    route('phone.case', {
-                      client_case: getCaseUuid(job),
-                      completed: props.view_mode === 'completed-today' ? 1 : undefined,
-                    })
-                  "
-                  class="inline-flex-1 flex-1 text-center px-3 py-2 rounded-md bg-blue-600 text-white text-sm hover:bg-blue-700"
-                >
-                  Odpri primer
-                </a>
-                <button
-                  v-else
-                  type="button"
-                  disabled
-                  class="inline-flex-1 flex-1 text-center px-3 py-2 rounded-md bg-gray-300 text-gray-600 text-sm cursor-not-allowed"
-                >
-                  Manjka primer
-                </button>
-              </div>
-              <div class="flex items-center justify-between">
-                <p class="text-sm text-gray-500">
-                  Dodeljeno:
-                  <span class="font-medium text-gray-700">{{
-                    formatDateDMY(job.assigned_at)
-                  }}</span>
-                </p>
-                <span
-                  v-if="job.priority"
-                  class="inline-block text-xs px-2 py-0.5 rounded bg-amber-100 text-amber-700"
-                  >Prioriteta</span
-                >
-              </div>
-              <div class="mt-2">
-                <p class="text-base sm:text-lg font-semibold text-gray-800">
-                  {{ job.contract?.client_case?.person?.full_name || "—" }}
-                </p>
-                <p class="text-sm text-gray-600">
-                  Naročnik:
-                  <span class="font-semibold text-gray-800">
-                    {{ job.contract?.client_case?.client?.person?.full_name || "—" }}
-                  </span>
-                </p>
-                <p class="text-sm text-gray-600 truncate">
-                  Kontrakt: {{ job.contract?.reference || job.contract?.uuid }}
-                </p>
-
-                <p
-                  class="text-sm text-gray-600"
-                  v-if="
-                    job.contract?.account &&
-                    job.contract.account.balance_amount !== null &&
-                    job.contract.account.balance_amount !== undefined
-                  "
-                >
-                  Odprto: {{ formatAmount(job.contract.account.balance_amount) }} €
-                </p>
-              </div>
-              <div class="mt-3 text-sm text-gray-600">
-                <p>
-                  <span class="font-medium">Naslov:</span>
-                  {{ job.contract?.client_case?.person?.addresses?.[0]?.address || "—" }}
-                </p>
-                <p>
-                  <span class="font-medium">Telefon:</span>
-                  {{ job.contract?.client_case?.person?.phones?.[0]?.nu || "—" }}
-                </p>
-              </div>
-              <div class="mt-3 text-sm text-gray-600">
-                <p>
-                  <span class="font-medium">Zadnja aktivnost:</span>
-                  {{ formatDateDMY(job.last_activity) || "—" }}
-                </p>
-              </div>
-            </div>
-          </div>
-        </template>
-        <div
-          v-else
-          class="col-span-full bg-white rounded-lg shadow border p-6 text-center text-gray-600"
-        >
-          <span v-if="search">Ni zadetkov za podani filter.</span>
-          <span v-else>Trenutno nimate dodeljenih terenskih opravil.</span>
         </div>
+
+        <!-- Content -->
+        <div v-else-if="props.jobs.data && props.jobs.data.length" class="space-y-8">
+          <!-- Non-Activity Jobs -->
+          <section v-if="listNonActivity.length" class="space-y-4">
+            <div class="flex items-center gap-3">
+              <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
+                Nove / Ne obdelano
+              </h2>
+              <Badge variant="secondary" class="text-sm">
+                {{ listNonActivity.length }}
+              </Badge>
+            </div>
+
+            <div class="grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-3">
+              <Card
+                v-for="job in listNonActivity"
+                :key="job.id"
+                class="flex flex-col hover:shadow-xl transition-all duration-200 border-l-2 border-l-blue-500"
+              >
+                <CardHeader>
+                  <div class="flex items-start justify-between gap-2">
+                    <div class="flex-1 min-w-0">
+                      <h3
+                        class="text-xl font-bold text-gray-900 dark:text-gray-100 truncate mb-1"
+                      >
+                        {{ job.contract?.client_case?.person?.full_name || "—" }}
+                      </h3>
+                      <p class="text-sm text-gray-600 dark:text-gray-400">
+                        <span class="font-semibold text-indigo-600 dark:text-indigo-400"
+                          >Naročnik:</span
+                        >
+                        <span class="ml-1 font-medium text-gray-900 dark:text-gray-200">
+                          {{
+                            job.contract?.client_case?.client?.person?.full_name || "—"
+                          }}
+                        </span>
+                      </p>
+                    </div>
+                    <Badge
+                      v-if="job.priority"
+                      variant="destructive"
+                      class="shrink-0 animate-pulse"
+                    >
+                      Prioriteta
+                    </Badge>
+                  </div>
+                </CardHeader>
+
+                <CardContent class="flex-1 space-y-3 pt-4">
+                  <div class="space-y-3 text-sm">
+                    <div class="flex items-start gap-3">
+                      <CalendarDays class="w-5 h-5 text-gray-400 shrink-0 mt-0.5" />
+                      <div class="flex-1 min-w-0">
+                        <p
+                          class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-0.5"
+                        >
+                          Dodeljeno
+                        </p>
+                        <p class="font-semibold text-gray-900 dark:text-gray-100">
+                          {{ formatDateDMY(job.assigned_at) }}
+                        </p>
+                      </div>
+                    </div>
+
+                    <Separator />
+
+                    <div class="flex items-start gap-3">
+                      <FileText class="w-5 h-5 text-gray-400 shrink-0 mt-0.5" />
+                      <div class="flex-1 min-w-0">
+                        <p
+                          class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-0.5"
+                        >
+                          Pogodba
+                        </p>
+                        <p
+                          class="font-mono text-xs text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded inline-block"
+                        >
+                          {{ job.contract?.reference || job.contract?.uuid }}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div class="flex items-start gap-3">
+                      <MapPin class="w-5 h-5 text-gray-400 shrink-0 mt-0.5" />
+                      <div class="flex-1 min-w-0">
+                        <p
+                          class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-0.5"
+                        >
+                          Naslov
+                        </p>
+                        <p class="text-gray-900 dark:text-gray-100">
+                          {{ job.contract?.client_case?.person?.address?.address || "—" }}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div class="flex items-start gap-3">
+                      <Phone class="w-5 h-5 text-gray-400 shrink-0 mt-0.5" />
+                      <div class="flex-1 min-w-0">
+                        <p
+                          class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-0.5"
+                        >
+                          Telefon
+                        </p>
+                        <p class="font-medium text-gray-900 dark:text-gray-100">
+                          {{ job.contract?.client_case?.person?.phones?.[0]?.nu || "—" }}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div
+                      v-if="job.contract?.account?.balance_amount != null"
+                      class="flex items-start gap-3 p-3 bg-red-50 dark:bg-red-950/20 rounded border border-red-200 dark:border-red-900 mt-4"
+                    >
+                      <Wallet
+                        class="w-5 h-5 text-red-600 dark:text-red-400 shrink-0 mt-0.5"
+                      />
+                      <div class="flex-1 min-w-0">
+                        <p
+                          class="text-xs text-red-600 dark:text-red-400 uppercase tracking-wide mb-0.5"
+                        >
+                          Odprto
+                        </p>
+                        <p class="font-bold text-red-700 dark:text-red-400 text-lg">
+                          {{ formatAmount(job.contract.account.balance_amount) }} €
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+
+                <CardFooter class="pt-4 mt-auto">
+                  <Button
+                    v-if="getCaseUuid(job)"
+                    as="a"
+                    :href="
+                      route('phone.case', {
+                        client_case: getCaseUuid(job),
+                        completed: props.view_mode === 'completed-today' ? 1 : undefined,
+                      })
+                    "
+                    class="w-full font-semibold"
+                    size="lg"
+                  >
+                    Odpri primer
+                  </Button>
+                  <Button v-else disabled class="w-full" variant="secondary" size="lg">
+                    Manjka primer
+                  </Button>
+                </CardFooter>
+              </Card>
+            </div>
+          </section>
+
+          <!-- Activity Jobs -->
+          <section v-if="listActivity.length" class="space-y-4">
+            <div class="flex items-center gap-3">
+              <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
+                Obdelane pogodbe
+              </h2>
+              <Badge variant="secondary" class="text-sm">
+                {{ listActivity.length }}
+              </Badge>
+            </div>
+
+            <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+              <Card
+                v-for="job in listActivity"
+                :key="job.id"
+                class="flex flex-col hover:shadow-xl transition-all duration-200 border-l-2 border-l-green-500"
+              >
+                <CardHeader>
+                  <div class="flex items-start justify-between gap-2">
+                    <div class="flex-1 min-w-0">
+                      <h3
+                        class="text-xl font-bold text-gray-900 dark:text-gray-100 truncate mb-1"
+                      >
+                        {{ job.contract?.client_case?.person?.full_name || "—" }}
+                      </h3>
+                      <p class="text-sm text-gray-600 dark:text-gray-400">
+                        <span class="font-semibold text-indigo-600 dark:text-indigo-400"
+                          >Naročnik:</span
+                        >
+                        <span class="ml-1 font-medium text-gray-900 dark:text-gray-200">
+                          {{
+                            job.contract?.client_case?.client?.person?.full_name || "—"
+                          }}
+                        </span>
+                      </p>
+                    </div>
+                    <Badge
+                      v-if="job.priority"
+                      variant="destructive"
+                      class="shrink-0 animate-pulse"
+                    >
+                      Prioriteta
+                    </Badge>
+                  </div>
+                </CardHeader>
+
+                <CardContent class="flex-1 space-y-3 pt-4">
+                  <div class="space-y-3 text-sm">
+                    <div class="flex items-start gap-3">
+                      <CalendarDays class="w-5 h-5 text-gray-400 shrink-0 mt-0.5" />
+                      <div class="flex-1 min-w-0">
+                        <p
+                          class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-0.5"
+                        >
+                          Dodeljeno
+                        </p>
+                        <p class="font-semibold text-gray-900 dark:text-gray-100">
+                          {{ formatDateDMY(job.assigned_at) }}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div
+                      class="flex items-start gap-3 p-2 bg-green-50 dark:bg-green-900/20 rounded"
+                    >
+                      <CalendarDays
+                        class="w-5 h-5 text-green-600 dark:text-green-400 shrink-0 mt-0.5"
+                      />
+                      <div class="flex-1 min-w-0">
+                        <p
+                          class="text-xs text-green-600 dark:text-green-400 uppercase tracking-wide mb-0.5"
+                        >
+                          Zadnja aktivnost
+                        </p>
+                        <p class="font-semibold text-green-700 dark:text-green-400">
+                          {{ formatDateDMY(job.last_activity) || "—" }}
+                        </p>
+                      </div>
+                    </div>
+
+                    <Separator />
+
+                    <div class="flex items-start gap-3">
+                      <FileText class="w-5 h-5 text-gray-400 shrink-0 mt-0.5" />
+                      <div class="flex-1 min-w-0">
+                        <p
+                          class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-0.5"
+                        >
+                          Kontrakt
+                        </p>
+                        <p
+                          class="font-mono text-xs text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded inline-block"
+                        >
+                          {{ job.contract?.reference || job.contract?.uuid }}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div class="flex items-start gap-3">
+                      <MapPin class="w-5 h-5 text-gray-400 shrink-0 mt-0.5" />
+                      <div class="flex-1 min-w-0">
+                        <p
+                          class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-0.5"
+                        >
+                          Naslov
+                        </p>
+                        <p class="text-gray-900 dark:text-gray-100">
+                          {{ job.contract?.client_case?.person?.address?.address || "—" }}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div class="flex items-start gap-3">
+                      <Phone class="w-5 h-5 text-gray-400 shrink-0 mt-0.5" />
+                      <div class="flex-1 min-w-0">
+                        <p
+                          class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-0.5"
+                        >
+                          Telefon
+                        </p>
+                        <p class="font-medium text-gray-900 dark:text-gray-100">
+                          {{ job.contract?.client_case?.person?.phones?.[0]?.nu || "—" }}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div
+                      v-if="job.contract?.account?.balance_amount != null"
+                      class="flex items-start gap-3 p-3 bg-red-50 dark:bg-red-950/20 rounded border border-red-200 dark:border-red-900 mt-4"
+                    >
+                      <Wallet
+                        class="w-5 h-5 text-red-600 dark:text-red-400 shrink-0 mt-0.5"
+                      />
+                      <div class="flex-1 min-w-0">
+                        <p
+                          class="text-xs text-red-600 dark:text-red-400 uppercase tracking-wide mb-0.5"
+                        >
+                          Odprto
+                        </p>
+                        <p class="font-bold text-red-700 dark:text-red-400 text-lg">
+                          {{ formatAmount(job.contract.account.balance_amount) }} €
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+
+                <CardFooter class="pt-4 mt-auto">
+                  <Button
+                    v-if="getCaseUuid(job)"
+                    as="a"
+                    :href="
+                      route('phone.case', {
+                        client_case: getCaseUuid(job),
+                        completed: props.view_mode === 'completed-today' ? 1 : undefined,
+                      })
+                    "
+                    class="w-full font-semibold"
+                    variant="secondary"
+                    size="lg"
+                  >
+                    Odpri primer
+                  </Button>
+                  <Button v-else disabled class="w-full" variant="secondary" size="lg">
+                    Manjka primer
+                  </Button>
+                </CardFooter>
+              </Card>
+            </div>
+          </section>
+
+          <!-- Pagination -->
+          <Card v-if="props.jobs.links && props.jobs.links.length > 3">
+            <CardContent class="pt-6">
+              <div class="flex flex-wrap items-center justify-center gap-2">
+                <Button
+                  v-for="(link, index) in props.jobs.links"
+                  :key="index"
+                  :variant="link.active ? 'default' : 'outline'"
+                  :disabled="!link.url"
+                  @click="changePage(link.url)"
+                  size="sm"
+                  v-html="link.label"
+                />
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <!-- Empty State -->
+        <Card v-else>
+          <CardContent class="py-12">
+            <div class="text-center space-y-3">
+              <div
+                class="mx-auto w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center"
+              >
+                <svg
+                  class="w-8 h-8 text-gray-400 dark:text-gray-600"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+                  />
+                </svg>
+              </div>
+              <p class="text-lg font-medium text-gray-900 dark:text-gray-100">
+                {{ search || clientFilter ? "Ni zadetkov" : "Ni opravil" }}
+              </p>
+              <p class="text-sm text-gray-600 dark:text-gray-400">
+                {{
+                  search || clientFilter
+                    ? "Poskusite spremeniti iskalne kriterije"
+                    : "Trenutno nimate dodeljenih terenskih opravil"
+                }}
+              </p>
+            </div>
+          </CardContent>
+        </Card>
       </div>
     </div>
   </AppPhoneLayout>