diff --git a/src/lib/components/avatarGroup.svelte b/src/lib/components/avatarGroup.svelte
index c9091ffcf5..c874eb46c8 100644
--- a/src/lib/components/avatarGroup.svelte
+++ b/src/lib/components/avatarGroup.svelte
@@ -9,6 +9,9 @@
     export let bordered = false;
     export let color = '';
 
+    let classes = '';
+    export { classes as class };
+
     enum Sizes {
         xsmall = 'is-size-x-small',
         small = 'is-size-small',
@@ -18,7 +21,7 @@
     }
 </script>
 
-<ul class="avatars-group" class:is-with-border={bordered}>
+<ul class="avatars-group {classes}" class:is-with-border={bordered}>
     {#each avatars as name, index}
         {#if index < 2}
             <li class="avatars-group-item">
diff --git a/src/routes/(console)/project-[project]/settings/GitDisconnectModal.svelte b/src/routes/(console)/project-[project]/settings/GitDisconnectModal.svelte
index b414f37bda..fa12b9e3ba 100644
--- a/src/routes/(console)/project-[project]/settings/GitDisconnectModal.svelte
+++ b/src/routes/(console)/project-[project]/settings/GitDisconnectModal.svelte
@@ -51,11 +51,6 @@
     bind:show={showGitDisconnect}
     onSubmit={handleSubmit}
     size="big">
-    <p>
-        Are you sure you want to disconnect this git installation? This will affect future
-        deployments to the following functions:
-    </p>
-
     {#await loadFunctions()}
         <div class="u-flex u-main-center">
             <div class="avatar is-size-x-small">
@@ -64,6 +59,10 @@
         </div>
     {:then functions}
         {#if functions.total}
+            <p>
+                Are you sure you want to disconnect this git installation? This will affect future
+                deployments to the following functions:
+            </p>
             <div class="u-flex u-flex-vertical u-gap-12">
                 {#each functions.functions as func}
                     <div class="u-flex u-main-start u-gap-8">
@@ -73,7 +72,9 @@
                         <div
                             class="u-cross-child-center u-flex u-main-space-between u-flex-wrap u-gap-8 u-width-full-line">
                             <h6>{func.name}</h6>
-                            <p class="u-x-small" style="color: hsl(var(--color-neutral-70));">
+                            <p
+                                class="u-x-small u-cross-child-center"
+                                style="color: hsl(var(--color-neutral-70));">
                                 Last deployed: {toLocaleDateTime(func.$updatedAt)}
                             </p>
                         </div>
diff --git a/src/routes/(console)/project-[project]/settings/GitInstallationModal.svelte b/src/routes/(console)/project-[project]/settings/GitInstallationModal.svelte
index 06e4fcae6e..c846ff6a78 100644
--- a/src/routes/(console)/project-[project]/settings/GitInstallationModal.svelte
+++ b/src/routes/(console)/project-[project]/settings/GitInstallationModal.svelte
@@ -19,7 +19,7 @@
 </script>
 
 <Modal title="Install" headerDivider={false} bind:show={showGitInstall} size="big">
-    <p>Select a provider to import an existing git repositories.</p>
+    <p>Select a provider to import an existing git repository.</p>
 
     <div class="u-flex u-cross-center u-flex-vertical u-gap-16">
         <Button href={connectGitHub().toString()} fullWidth secondary>
diff --git a/src/routes/(console)/project-[project]/settings/updateInstallations.svelte b/src/routes/(console)/project-[project]/settings/updateInstallations.svelte
index aaabb6fbae..690a1da2bc 100644
--- a/src/routes/(console)/project-[project]/settings/updateInstallations.svelte
+++ b/src/routes/(console)/project-[project]/settings/updateInstallations.svelte
@@ -3,6 +3,7 @@
     import { page } from '$app/stores';
     import {
         Alert,
+        Arrow,
         AvatarGroup,
         CardGrid,
         DropList,
@@ -89,7 +90,7 @@
     <svelte:fragment slot="aside">
         {#if total > 0}
             <div>
-                <div class="u-flex u-flex-vertical-mobile u-main-end">
+                <div class="u-flex u-flex-vertical-mobile u-main-end u-padding-block-end-16">
                     <ul class="buttons-list">
                         <li class="buttons-list-item">
                             <Button secondary on:click={() => (showGitIstall = true)}>
@@ -100,77 +101,81 @@
                     </ul>
                 </div>
 
-                <Table noMargin noStyles>
-                    <TableHeader>
-                        <TableCellHead width={150}>Installation ID</TableCellHead>
-                        <TableCellHead>Repository</TableCellHead>
-                        <TableCellHead>Updated</TableCellHead>
-                        <TableCellHead width={40} />
-                    </TableHeader>
-                    <TableBody>
-                        {#each installations as installation, i}
-                            <TableRow>
-                                <TableCell title="installations">
-                                    <Id value={installation.$id}>{installation.$id}</Id>
-                                </TableCell>
-                                <TableCell title="repository">
-                                    <div class="u-flex u-gap-8 u-cross-center">
-                                        <div class="avatar is-size-small">
-                                            <span
-                                                class={getProviderIcon(installation.provider)}
-                                                style="font-size: var(--icon-size-medium)!important" />
+                <div style="overflow: auto">
+                    <Table noMargin noStyles isAutoLayout>
+                        <TableHeader>
+                            <TableCellHead width={150}>Installation ID</TableCellHead>
+                            <TableCellHead>Repository</TableCellHead>
+                            <TableCellHead>Updated</TableCellHead>
+                            <TableCellHead width={40} />
+                        </TableHeader>
+                        <TableBody>
+                            {#each installations as installation, i}
+                                <TableRow>
+                                    <TableCell title="installations">
+                                        <Id value={installation.$id}>{installation.$id}</Id>
+                                    </TableCell>
+                                    <TableCell title="repository">
+                                        <div class="u-flex u-gap-8 u-cross-center">
+                                            <div class="avatar is-size-small">
+                                                <span
+                                                    class={getProviderIcon(installation.provider)}
+                                                    style="font-size: var(--icon-size-medium)!important" />
+                                            </div>
+                                            <a
+                                                href={getInstallationLink(installation)}
+                                                target="_blank"
+                                                class="u-flex u-gap-4 u-cross-center">
+                                                <span>{installation.organization}</span><span
+                                                    style="font-size: 1rem; color: hsl(var(--color-neutral-70));"
+                                                    class="icon-external-link" /></a>
                                         </div>
-                                        <a
-                                            href={getInstallationLink(installation)}
-                                            target="_blank"
-                                            class="u-flex u-gap-4 u-cross-center">
-                                            <span>{installation.organization}</span><span
-                                                style="font-size: 1rem; color: hsl(var(--color-neutral-70));"
-                                                class="icon-external-link" /></a>
-                                    </div>
-                                </TableCell>
-                                <TableCellText title="updated">
-                                    {dayjs().to(installation.$updatedAt)}
-                                </TableCellText>
+                                    </TableCell>
+                                    <TableCellText title="updated">
+                                        {dayjs().to(installation.$updatedAt)}
+                                    </TableCellText>
 
-                                <TableCell>
-                                    <DropList
-                                        bind:show={showInstallationDropdown[i]}
-                                        placement="bottom-start"
-                                        noArrow>
-                                        <button
-                                            class="button is-text is-only-icon"
-                                            aria-label="more options"
-                                            on:click|preventDefault={() =>
-                                                (showInstallationDropdown[i] =
-                                                    !showInstallationDropdown[i])}>
-                                            <span class="icon-dots-horizontal" aria-hidden="true" />
-                                        </button>
-                                        <svelte:fragment slot="list">
-                                            <DropListLink
-                                                href={configureGitHub()}
-                                                icon="external-link"
-                                                on:click={() => {
-                                                    showInstallationDropdown[i] = false;
-                                                }}>
-                                                Configure
-                                            </DropListLink>
-                                            <DropListItem
-                                                icon="x-circle"
-                                                on:click={async () => {
-                                                    showInstallationDropdown[i] = false;
-                                                    showGitDisconnect = true;
-                                                    selectedInstallation = installation;
-                                                }}>
-                                                Disconnect
-                                            </DropListItem>
-                                        </svelte:fragment>
-                                    </DropList>
-                                </TableCell>
-                            </TableRow>
-                        {/each}
-                    </TableBody>
-                </Table>
+                                    <TableCell>
+                                        <DropList
+                                            bind:show={showInstallationDropdown[i]}
+                                            placement="bottom-start"
+                                            noArrow>
+                                            <button
+                                                class="button is-text is-only-icon"
+                                                aria-label="more options"
+                                                on:click|preventDefault={() =>
+                                                    (showInstallationDropdown[i] =
+                                                        !showInstallationDropdown[i])}>
+                                                <span
+                                                    class="icon-dots-horizontal"
+                                                    aria-hidden="true" />
+                                            </button>
+                                            <svelte:fragment slot="list">
+                                                <DropListLink
+                                                    href={configureGitHub()}
+                                                    icon="external-link"
+                                                    on:click={() => {
+                                                        showInstallationDropdown[i] = false;
+                                                    }}>
+                                                    Configure
+                                                </DropListLink>
+                                                <DropListItem
+                                                    icon="x-circle"
+                                                    on:click={async () => {
+                                                        showInstallationDropdown[i] = false;
+                                                        showGitDisconnect = true;
+                                                        selectedInstallation = installation;
+                                                    }}>
+                                                    Disconnect
+                                                </DropListItem>
+                                            </svelte:fragment>
+                                        </DropList>
+                                    </TableCell>
+                                </TableRow>
+                            {/each}
+                        </TableBody>
+                    </Table>
+                </div>
             </div>
             <div class="u-flex u-main-space-between">
                 <p class="text">Total installations: {total}</p>
@@ -201,8 +206,12 @@
             <article class="card-git card is-border-dashed is-no-shadow">
                 <div class="u-flex u-cross-center u-flex-vertical u-gap-32">
                     <div class="u-flex u-cross-center u-flex-vertical u-gap-8">
-                        <AvatarGroup bordered icons={['github', 'gitlab', 'bitBucket', 'azure']} />
-                        <span class="icon-arrow-narrow-down" />
+                        <AvatarGroup
+                            class="git-installation-avatar-group"
+                            bordered
+                            icons={['github', 'gitlab', 'bitBucket', 'azure']} />
+
+                        <Arrow direction="down" />
 
                         <div class="avatar"><SvgIcon name="appwrite" type="color" size={80} /></div>
                     </div>
@@ -225,3 +234,9 @@
 {#if showGitDisconnect}
     <GitDisconnectModal bind:showGitDisconnect {selectedInstallation} />
 {/if}
+
+<style>
+    :global(.git-installation-avatar-group .icon-gitlab, .icon-bitBucket, .icon-azure) {
+        color: hsl(var(--color-neutral-50));
+    }
+</style>