diff --git a/ProcessMaker/Http/Controllers/Api/CasesRetentionController.php b/ProcessMaker/Http/Controllers/Api/CasesRetentionController.php
new file mode 100644
index 0000000000..218b7e0439
--- /dev/null
+++ b/ProcessMaker/Http/Controllers/Api/CasesRetentionController.php
@@ -0,0 +1,76 @@
+<?php
+
+namespace ProcessMaker\Http\Controllers\Api;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+use ProcessMaker\Http\Controllers\Controller;
+use ProcessMaker\Http\Resources\ApiCollection;
+use ProcessMaker\Models\CaseRetentionPolicyLog;
+
+class CasesRetentionController extends Controller
+{
+    private const LOG_SORT_COLUMNS = [
+        'id',
+        'process_id',
+        'case_ids',
+        'deleted_count',
+        'total_time_taken',
+        'deleted_at',
+        'created_at',
+    ];
+
+    /**
+     * Search log id, process_id, numeric columns, and JSON case_ids — not date columns.
+     */
+    private function applyLogsFilter($query, string $term): void
+    {
+        $term = trim($term);
+        if ($term === '') {
+            return;
+        }
+
+        $like = '%' . $term . '%';
+        $driver = $query->getConnection()->getDriverName();
+
+        $query->where(function ($q) use ($like, $driver) {
+            $q->where('id', 'like', $like)
+                ->orWhere('process_id', 'like', $like)
+                ->orWhere('deleted_count', 'like', $like)
+                ->orWhere('total_time_taken', 'like', $like);
+
+            if ($driver === 'pgsql') {
+                $q->orWhereRaw('case_ids::text ILIKE ?', [$like]);
+            } else {
+                $q->orWhereRaw('CAST(case_ids AS CHAR) LIKE ?', [$like]);
+            }
+        });
+    }
+
+    public function logs(Request $request): ApiCollection
+    {
+        $query = CaseRetentionPolicyLog::query();
+
+        if ($request->filled('filter')) {
+            $this->applyLogsFilter($query, (string) $request->input('filter'));
+        }
+
+        $orderBy = $request->input('order_by');
+        if ($orderBy && in_array($orderBy, self::LOG_SORT_COLUMNS, true)) {
+            $orderBy = DB::raw(preg_replace('/\.(.+)/', "->>'\$.$1'", $orderBy, 1));
+
+            $orderDirection = strtolower((string) $request->input('order_direction', 'asc'));
+            if (!in_array($orderDirection, ['asc', 'desc'], true)) {
+                $orderDirection = 'asc';
+            }
+
+            $query->orderBy($orderBy, $orderDirection);
+        } else {
+            $query->orderByDesc('created_at');
+        }
+
+        $response = $query->paginate($request->input('per_page', 10));
+
+        return new ApiCollection($response);
+    }
+}
diff --git a/ProcessMaker/Jobs/EvaluateProcessRetentionJob.php b/ProcessMaker/Jobs/EvaluateProcessRetentionJob.php
index a04cba2800..e5b14a267d 100644
--- a/ProcessMaker/Jobs/EvaluateProcessRetentionJob.php
+++ b/ProcessMaker/Jobs/EvaluateProcessRetentionJob.php
@@ -184,7 +184,7 @@ public function handle(): void
 
                 CaseRetentionPolicyLog::create([
                     'process_id' => $this->processId,
-                    'case_ids' => json_encode($caseIds),
+                    'case_ids' => $caseIds,
                     'deleted_count' => $chunkSize,
                     'total_time_taken' => $chunkTimeMs,
                     'deleted_at' => Carbon::now(),
diff --git a/ProcessMaker/Models/CaseRetentionPolicyLog.php b/ProcessMaker/Models/CaseRetentionPolicyLog.php
index 35da191f1e..a2d16c7364 100644
--- a/ProcessMaker/Models/CaseRetentionPolicyLog.php
+++ b/ProcessMaker/Models/CaseRetentionPolicyLog.php
@@ -25,4 +25,8 @@ class CaseRetentionPolicyLog extends ProcessMakerModel
         'total_time_taken',
         'deleted_at',
     ];
+
+    protected $casts = [
+        'case_ids' => 'array',
+    ];
 }
diff --git a/database/factories/ProcessMaker/Models/CaseRetentionPolicyLogFactory.php b/database/factories/ProcessMaker/Models/CaseRetentionPolicyLogFactory.php
index e38c9a3fb8..9a82e8d17d 100644
--- a/database/factories/ProcessMaker/Models/CaseRetentionPolicyLogFactory.php
+++ b/database/factories/ProcessMaker/Models/CaseRetentionPolicyLogFactory.php
@@ -22,7 +22,7 @@ public function definition()
             'process_id' => function () {
                 return Process::factory()->create()->id;
             },
-            'case_ids' => json_encode(CaseNumber::factory()->count($this->faker->numberBetween(1, 1000))->create()->pluck('id')->toArray()),
+            'case_ids' => CaseNumber::factory()->count($this->faker->numberBetween(1, 1000))->create()->pluck('id')->toArray(),
             'deleted_count' => $this->faker->numberBetween(1, 1000),
             'total_time_taken' => $this->faker->numberBetween(1, 1000000),
             'deleted_at' => $this->faker->dateTimeBetween('-1 year', 'now'),
diff --git a/resources/js/admin/cases-retention/components/CaseIdsTableCell.vue b/resources/js/admin/cases-retention/components/CaseIdsTableCell.vue
new file mode 100644
index 0000000000..8710bc181e
--- /dev/null
+++ b/resources/js/admin/cases-retention/components/CaseIdsTableCell.vue
@@ -0,0 +1,172 @@
+<template>
+  <div
+    v-uni-id="'case-id-' + rowId"
+    class="case-ids-cell"
+  >
+    <template v-if="!ids.length">
+      —
+    </template>
+    <template v-else-if="!hasOverflow">
+      <span class="case-ids-preview">{{ ids.join(", ") }}</span>
+    </template>
+    <template v-else>
+      <button
+        :id="popoverTriggerId"
+        type="button"
+        class="case-ids-trigger"
+        :title="$t('Show full list')"
+      >
+        <span class="case-ids-preview">{{ previewHead }}</span><span class="case-ids-ellipsis">…</span><span class="case-ids-more-count text-muted">+{{ moreHiddenCount }}</span>
+      </button>
+      <b-popover
+        :target="popoverTriggerId"
+        triggers="click"
+        placement="auto"
+        boundary="viewport"
+        container="body"
+        custom-class="case-ids-popover"
+      >
+        <template #title>
+          {{ $t("Case IDs") }}
+          <span class="text-muted font-weight-normal">({{ ids.length }})</span>
+        </template>
+        <div class="case-ids-popover-inner">
+          <pre class="case-ids-popover-pre mb-0">{{ fullListText }}</pre>
+        </div>
+      </b-popover>
+    </template>
+  </div>
+</template>
+
+<script>
+import { createUniqIdsMixin } from "vue-uniq-ids";
+
+const uniqIdsMixin = createUniqIdsMixin();
+
+export default {
+  name: "CaseIdsTableCell",
+  mixins: [uniqIdsMixin],
+  props: {
+    caseIds: {
+      type: [Array, String, Number],
+      default: null,
+    },
+    rowId: {
+      type: [Number, String],
+      required: true,
+    },
+    previewLimit: {
+      type: Number,
+      default: 5,
+    },
+  },
+  computed: {
+    ids() {
+      return this.parseCaseIdsArray(this.caseIds);
+    },
+    hasOverflow() {
+      return this.ids.length > this.previewLimit;
+    },
+    previewHead() {
+      return this.ids.slice(0, this.previewLimit).join(", ");
+    },
+    moreHiddenCount() {
+      return this.ids.length - this.previewLimit;
+    },
+    fullListText() {
+      return this.ids.join(", ");
+    },
+    popoverTriggerId() {
+      return `retention-case-ids-pop-${this.rowId}`;
+    },
+  },
+  methods: {
+    parseCaseIdsArray(caseIds) {
+      if (caseIds == null || caseIds === "") {
+        return [];
+      }
+      if (Array.isArray(caseIds)) {
+        return caseIds.map(String);
+      }
+      if (typeof caseIds === "string") {
+        try {
+          const parsed = JSON.parse(caseIds);
+          return Array.isArray(parsed) ? parsed.map(String) : [];
+        } catch {
+          return [];
+        }
+      }
+      return [String(caseIds)];
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.case-ids-preview {
+  color: #4e5663;
+}
+
+.case-ids-trigger {
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  border-radius: 4px;
+  margin: -2px -4px;
+  padding: 2px 4px;
+  display: inline;
+  text-align: left;
+  line-height: inherit;
+  vertical-align: baseline;
+
+  &:hover,
+  &:focus {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
+  }
+}
+
+.case-ids-ellipsis {
+  color: #4e5663;
+  letter-spacing: 0.02em;
+}
+
+.case-ids-more-count {
+  font-size: 12px;
+  margin-left: 2px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+</style>
+
+<!-- Popover is teleported to body; scoped styles do not apply. -->
+<style lang="scss">
+.popover.case-ids-popover {
+  max-width: min(440px, 92vw);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
+}
+
+.popover.case-ids-popover .popover-body {
+  padding: 0;
+}
+
+.case-ids-popover-inner {
+  max-height: min(320px, 50vh);
+  overflow: auto;
+  padding: 0.75rem 1rem;
+}
+
+.case-ids-popover-pre {
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-size: 13px;
+  line-height: 1.45;
+  color: #4e5663;
+}
+</style>
diff --git a/resources/js/admin/cases-retention/components/CasesRetentionLogs.vue b/resources/js/admin/cases-retention/components/CasesRetentionLogs.vue
index 933e99eef1..ea6f5ff671 100644
--- a/resources/js/admin/cases-retention/components/CasesRetentionLogs.vue
+++ b/resources/js/admin/cases-retention/components/CasesRetentionLogs.vue
@@ -34,7 +34,11 @@
             slot="case_ids"
             slot-scope="props"
           >
-            <span v-uni-id="`case-id-${props.rowData.id}`">{{ props.rowData.case_ids.join(', ') }}</span>
+            <case-ids-table-cell
+              :case-ids="props.rowData.case_ids"
+              :row-id="props.rowData.id"
+              :preview-limit="caseIdsPreviewLimit"
+            />
           </template>
           <template
             slot="deleted_count"
@@ -78,63 +82,15 @@
 import { createUniqIdsMixin } from "vue-uniq-ids";
 import datatableMixin from "../../../components/common/mixins/datatable";
 import dataLoadingMixin from "../../../components/common/mixins/apiDataLoading";
+import CaseIdsTableCell from "./CaseIdsTableCell.vue";
 
 const uniqIdsMixin = createUniqIdsMixin();
 
-/**
- * Fake data matching retention_policy_logs schema until the table/API exists.
- * - id, process_id, case_ids (array of case IDs), deleted_at, created_at
- */
-const FAKE_RETENTION_LOGS = [
-  {
-    id: 1,
-    process_id: 101,
-    case_ids: [5001],
-    deleted_count: 1,
-    total_time_taken: 1000,
-    deleted_at: "2025-03-01T14:30:00.000000Z",
-    created_at: "2025-03-01T14:30:05.000000Z",
-  },
-  {
-    id: 2,
-    process_id: 101,
-    case_ids: [500, 501, 502],
-    deleted_count: 3,
-    total_time_taken: 1000,
-    deleted_at: "2025-03-02T09:15:00.000000Z",
-    created_at: "2025-03-02T09:15:02.000000Z",
-  },
-  {
-    id: 3,
-    process_id: 204,
-    case_ids: [7003],
-    deleted_count: 1,
-    total_time_taken: 1000,
-    deleted_at: "2025-03-03T16:45:00.000000Z",
-    created_at: "2025-03-03T16:45:10.000000Z",
-  },
-  {
-    id: 4,
-    process_id: 305,
-    case_ids: [8010],
-    deleted_count: 1,
-    total_time_taken: 1000,
-    deleted_at: "2025-03-04T11:00:00.000000Z",
-    created_at: "2025-03-04T11:00:01.000000Z",
-  },
-  {
-    id: 5,
-    process_id: 204,
-    case_ids: [7005],
-    deleted_count: 1,
-    total_time_taken: 1000,
-    deleted_at: "2025-03-05T08:22:00.000000Z",
-    created_at: "2025-03-05T08:22:03.000000Z",
-  },
-];
-
 export default {
   name: "CasesRetentionLogs",
+  components: {
+    CaseIdsTableCell,
+  },
   mixins: [datatableMixin, dataLoadingMixin, uniqIdsMixin],
   props: {
     filter: {
@@ -145,9 +101,12 @@ export default {
   data() {
     return {
       orderBy: "created_at",
+      orderDirection: "desc",
+      // Object { data, meta } after fetch — not a bare array — so vuetable calls dataManager on sort
+      // (see vuetable-2 callDataManager: Array.isArray short-circuits and skips fetch).
       data: [],
       sortOrder: [
-        { field: "created_at", sortField: "created_at", direction: "desc" },
+        { field: "__slot:created_at", sortField: "created_at", direction: "desc" },
       ],
       fields: [
         {
@@ -159,7 +118,6 @@ export default {
         {
           title: () => this.$t("Case IDs"),
           name: "__slot:case_ids",
-          sortField: "case_ids",
           width: "16.66%",
         },
         {
@@ -189,32 +147,32 @@ export default {
           width: "16.66%",
         },
       ],
+      caseIdsPreviewLimit: 5,
     };
   },
   watch: {
     filter() {
-      this.page = 1;
+      // this.page = 1;
       this.fetch();
     },
+
   },
   methods: {
     fetch() {
-      // TODO: replace with API call when retention_policy_logs table and endpoint exist
-      const total = FAKE_RETENTION_LOGS.length;
-      this.data = {
-        data: FAKE_RETENTION_LOGS,
-        meta: {
-          total,
-          per_page: 15,
-          current_page: 1,
-          last_page: 1,
-          from: 1,
-          to: total,
-          total_pages: 1,
-          count: total,
+      ProcessMaker.apiClient.get('cases-retention/logs', {
+        params: {
+          filter: this.filter,
+          order_by: this.orderBy,
+          order_direction: this.orderDirection,
+          page: this.page,
+          per_page: this.perPage,
         },
-      };
-      this.apiDataLoading = false;
+      }).then(response => {
+        this.data = this.transform(response.data);
+        this.apiDataLoading = false;
+      }).catch(error => {
+        this.apiDataLoading = false;
+      });
     },
     reload() {
       this.fetch();
diff --git a/routes/api.php b/routes/api.php
index 99eb8b31d7..8617b3de7e 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -4,6 +4,7 @@
 use ProcessMaker\Http\Controllers\Admin\TenantQueueController;
 use ProcessMaker\Http\Controllers\Api\BookmarkController;
 use ProcessMaker\Http\Controllers\Api\CaseController;
+use ProcessMaker\Http\Controllers\Api\CasesRetentionController;
 use ProcessMaker\Http\Controllers\Api\ChangePasswordController;
 use ProcessMaker\Http\Controllers\Api\CommentController;
 use ProcessMaker\Http\Controllers\Api\CssOverrideController;
@@ -450,5 +451,8 @@
 
     // Slack Connector Validation
     Route::post('connector-slack/validate-token', [ProcessMaker\Packages\Connectors\Slack\Controllers\SlackController::class, 'validateToken'])->name('connector-slack.validate-token');
+
+    // Cases Retention
+    Route::get('cases-retention/logs', [CasesRetentionController::class, 'logs'])->name('cases-retention.logs');
 });
 Route::post('devlink/bundle-updated/{bundle}/{token}', [DevLinkController::class, 'bundleUpdated'])->name('devlink.bundle-updated');
diff --git a/tests/unit/ProcessMaker/Models/CaseRetentionPolicyLogTest.php b/tests/unit/ProcessMaker/Models/CaseRetentionPolicyLogTest.php
index 285340552a..52c388feb2 100644
--- a/tests/unit/ProcessMaker/Models/CaseRetentionPolicyLogTest.php
+++ b/tests/unit/ProcessMaker/Models/CaseRetentionPolicyLogTest.php
@@ -57,7 +57,7 @@ public function testJobAddsLogRecordWhenCasesAreDeleted(): void
         $this->assertIsNumeric($log->total_time_taken);
         $this->assertNotNull($log->deleted_at);
 
-        $loggedCaseIds = json_decode($log->case_ids, true);
+        $loggedCaseIds = $log->case_ids;
         $this->assertIsArray($loggedCaseIds);
         $this->assertContains((int) $caseOld->id, array_map('intval', $loggedCaseIds));