diff --git a/src/routes/console/project-[project]/settings/migrations/+page.svelte b/src/routes/console/project-[project]/settings/migrations/+page.svelte
index 2a7877a02..8d5657b18 100644
--- a/src/routes/console/project-[project]/settings/migrations/+page.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/+page.svelte
@@ -24,10 +24,12 @@
     import Status from '$lib/components/status.svelte';
     import { capitalize } from '$lib/helpers/string';
     import { readOnly } from '$lib/stores/billing';
+    import type { Models } from '@appwrite.io/console';
 
     export let data;
-    let details: string | null = null;
+    let migration: Models.Migration = null;
     let showExport = false;
+    let showMigration = false;
 
     const getStatus = (status: string) => {
         if (status === 'failed') {
@@ -129,6 +131,11 @@
         //     JSON.stringify(migrationData)
         // )}`;
     };
+
+    function showDetails(m: Models.Migration) {
+        showMigration = true;
+        migration = m;
+    }
 </script>
 
 <Container>
@@ -182,7 +189,7 @@
                                 </TableCell>
                                 <TableCell title="">
                                     <div class="u-flex u-main-end">
-                                        <Button secondary on:click={() => (details = entry.$id)}
+                                        <Button secondary on:click={() => showDetails(entry)}
                                             >Details</Button>
                                     </div>
                                 </TableCell>
@@ -296,7 +303,7 @@
 
 <ExportModal bind:show={showExport} />
 
-<Details bind:migrationId={details} migrations={data.migrations} />
+<Details {migration} bind:show={showMigration} />
 
 <style lang="scss">
     .import-box {
diff --git a/src/routes/console/project-[project]/settings/migrations/details.svelte b/src/routes/console/project-[project]/settings/migrations/details.svelte
index 7fb707b7b..9e827ce19 100644
--- a/src/routes/console/project-[project]/settings/migrations/details.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/details.svelte
@@ -8,12 +8,8 @@
     import type { Models } from '@appwrite.io/console';
     import { ResourcesFriendly } from '$lib/stores/migration';
 
-    export let migrations: Models.Migration[] = [];
-    export let migrationId: string = null;
-
-    $: details = migrations.find((migration) => migration.$id === migrationId);
-
-    $: show = !!details && migrationId !== null;
+    export let migration: Models.Migration = null;
+    export let show = false;
 
     type StatusCounters = {
         [resource in 'Database' | 'Collection' | 'Function' | 'Users']?: StatusCounter;
@@ -23,7 +19,7 @@
     };
 
     $: statusCounters = parseIfString(
-        (details?.statusCounters as unknown as string) || '{}'
+        (migration?.statusCounters as unknown as string) || '{}'
     ) as StatusCounters;
 
     const hasError = (counter: StatusCounter) => {
@@ -49,9 +45,9 @@
     let tab = 'details' as 'details' | 'logs';
 </script>
 
-<Modal bind:show on:close={() => (migrationId = null)} size="big">
+<Modal bind:show size="big">
     <svelte:fragment slot="title">
-        {#if details.status === 'failed'}
+        {#if migration.status === 'failed'}
             Resolve migration issues
         {:else}
             Migration details
@@ -63,13 +59,13 @@
     </Tabs>
 
     {#if tab === 'logs'}
-        <Code code={JSON.stringify(details, null, 2)} language="json" allowScroll />
+        <Code code={JSON.stringify(migration, null, 2)} language="json" allowScroll />
     {:else if tab === 'details'}
         <div class="box meta">
             <span>Date</span>
-            <span>{toLocaleDateTime(details.$createdAt)}</span>
+            <span>{toLocaleDateTime(migration.$createdAt)}</span>
             <span>Source</span>
-            <span>{details.source}</span>
+            <span>{migration.source}</span>
         </div>
 
         {#if Object.values(statusCounters).some(hasError)}