diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 3583e0be2..8b0984861 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -4,6 +4,7 @@
     import { Form } from '$lib/elements/forms';
     import { disableCommands } from '$lib/commandCenter';
     import { beforeNavigate } from '$app/navigation';
+    import { Dialog } from '@appwrite.io/pink-svelte';
 
     export let show = false;
     export let size: 'small' | 'big' | 'huge' = null;
@@ -12,6 +13,7 @@
     export let error: string = null;
     export let closable = true;
     export let headerDivider = true;
+    export let open = false;
     export let onSubmit: (e: SubmitEvent) => Promise<void> | void = function () {
         return;
     };
@@ -31,6 +33,8 @@
     }
 </script>
 
+<!-- <Dialog {title} bind:open /> -->
+
 <ModalWrapper bind:show {size} {headerDivider} let:close>
     <Form isModal {onSubmit}>
         <header class="modal-header">
diff --git a/src/lib/components/repositories.svelte b/src/lib/components/repositories.svelte
index d6554f0e8..aec763885 100644
--- a/src/lib/components/repositories.svelte
+++ b/src/lib/components/repositories.svelte
@@ -9,7 +9,8 @@
     import { repositories } from '$routes/(console)/project-[project]/functions/function-[function]/store';
     import { installation, installations, repository } from '$lib/stores/vcs';
     import { createEventDispatcher } from 'svelte';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Layout, Table, Typography, Icon, Avatar } from '@appwrite.io/pink-svelte';
+    import { IconLockClosed } from '@appwrite.io/pink-icons-svelte';
 
     const dispatch = createEventDispatcher();
 
@@ -122,6 +123,68 @@
                 </Layout.Stack>
             {:then response}
                 {#if response?.length}
+                    <Table.Root>
+                        <!-- <svelte:fragment slot="header">
+                                    <Table.Header.Cell width="200px">Key</Table.Header.Cell>
+                                    <Table.Header.Cell>Value</Table.Header.Cell>
+                                    <Table.Header.Cell width="10px"></Table.Header.Cell>
+                                </svelte:fragment> -->
+                        {#each response as repo, i}
+                            <Table.Row>
+                                <Table.Cell>
+                                    <Layout.Stack direction="row" alignItems="center">
+                                        {#if action === 'select'}
+                                            <input
+                                                class="is-small u-margin-inline-end-8"
+                                                type="radio"
+                                                name="repositories"
+                                                bind:group={selectedRepository}
+                                                on:change={() => repository.set(repo)}
+                                                value={repo.id} />
+                                        {/if}
+
+                                        <Avatar
+                                            size="xs"
+                                            src={repo?.runtime
+                                                ? `${base}/icons/${$app.themeInUse}/color/${
+                                                      repo.runtime.split('-')[0]
+                                                  }.svg`
+                                                : ''}
+                                            alt={repo.name} />
+
+                                        <Layout.Stack gap="s" direction="row" alignItems="center">
+                                            <Typography.Text truncate>
+                                                {repo.name}
+                                            </Typography.Text>
+                                            {#if repo.private}
+                                                <Icon
+                                                    size="s"
+                                                    icon={IconLockClosed}
+                                                    color="--color-fgcolor-neutral-tertiary" />
+                                            {/if}
+                                            <time datetime={repo.pushedAt}>
+                                                <Typography.Text
+                                                    truncate
+                                                    color="--color-fgcolor-neutral-tertiary">
+                                                    {timeFromNow(repo.pushedAt)}
+                                                </Typography.Text>
+                                            </time>
+                                        </Layout.Stack>
+                                        {#if action === 'button'}
+                                            <div class="u-margin-inline-start-auto">
+                                                <Button
+                                                    size="s"
+                                                    secondary
+                                                    on:click={() => dispatch('connect', repo)}>
+                                                    Connect
+                                                </Button>
+                                            </div>
+                                        {/if}
+                                    </Layout.Stack>
+                                </Table.Cell>
+                            </Table.Row>
+                        {/each}
+                    </Table.Root>
                     <ul class="table is-remove-outer-styles">
                         {#each response as repo, i}
                             <li