diff --git a/src/lib/layout/index.ts b/src/lib/layout/index.ts
index 43584d1bc..d6ba706e4 100644
--- a/src/lib/layout/index.ts
+++ b/src/lib/layout/index.ts
@@ -6,3 +6,4 @@ export { default as Navigation } from './navigation.svelte';
 export { default as Notification } from './notification.svelte';
 export { default as Notifications } from './notifications.svelte';
 export { default as Shell } from './shell.svelte';
+export { default as Wizard } from './wizard.svelte';
diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
new file mode 100644
index 000000000..c9bfe453a
--- /dev/null
+++ b/src/lib/layout/wizard.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { createEventDispatcher, onMount } from 'svelte';
+    import { fly, type FlyParams } from 'svelte/transition';
+
+    export let show = false;
+    export let title: string;
+    let browser = false;
+    //TODO: explore other solutions compatible with testing library
+    onMount(() => {
+        browser = true;
+    });
+
+    const dispatch = createEventDispatcher();
+    const transitionFly: FlyParams = {
+        duration: 150,
+        y: 50
+    };
+
+    const handleKeydown = (event: KeyboardEvent) => {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            closeModal();
+        }
+    };
+
+    const closeModal = () => {
+        show = false;
+        dispatch('close');
+    };
+
+    $: if (browser) {
+        if (show) {
+            document.body.classList.add('u-overflow-hidden');
+        } else {
+            document.body.classList.remove('u-overflow-hidden');
+        }
+    }
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+{#if show}
+    <section class="wizard" transition:fly={transitionFly}>
+        <div class="wizard-header-strip" />
+        <div class="wizard-start-bg" />
+        <div class="wizard-end-bg" />
+
+        <header class="wizard-header">
+            <div class="body-text-1">{title}</div>
+
+            <slot name="header" />
+            <button class="x-button" aria-label="close wizard" on:click={closeModal}>
+                <span class="icon-x" aria-hidden="true" />
+            </button>
+        </header>
+
+        <aside class="wizard-side">
+            <slot name="aside" />
+        </aside>
+        <div class="wizard-main">
+            <slot />
+        </div>
+    </section>
+{/if}
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
index 1d38f86ba..fe421a4ec 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte
@@ -59,9 +59,10 @@
                             href={`${base}/console/${projectId}/databases/database/${databaseId}/collection/${$collection.$id}/document/${document.$id}`}>
                             <TableCell main width={230}>
                                 <Copy value={document.$id}>
-                                    <Pill button
-                                        ><span class="icon-duplicate" aria-hidden="true" />
-                                        <span class="text">{document.$id}</span></Pill>
+                                    <Pill button>
+                                        <span class="icon-duplicate" aria-hidden="true" />
+                                        <span class="text u-trim-start">{document.$id}</span>
+                                    </Pill>
                                 </Copy>
                             </TableCell>
                             {#each columns as column}