diff --git a/src/routes/(authenticated)/git/+layout.svelte b/src/routes/(authenticated)/git/+layout.svelte
index bfc361d98..6f5a1d6c6 100644
--- a/src/routes/(authenticated)/git/+layout.svelte
+++ b/src/routes/(authenticated)/git/+layout.svelte
@@ -2,16 +2,19 @@
     import { base } from '$app/paths';
     import { loading } from '$routes/store';
     import { app } from '$lib/stores/app';
-    import { Typography } from '@appwrite.io/pink-svelte';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
 
     loading.set(false);
 </script>
 
-<div class="auth-bg">
-    <section>
-        <div class="console-container">
-            <slot />
-        </div>
+<Layout.Stack
+    height="100vh"
+    direction="column"
+    alignItems="center"
+    justifyContent="center"
+    style="background: var(--bgcolor-neutral-primary, #fff);">
+    <section class="console-container">
+        <slot />
     </section>
     <footer>
         <Typography.Eyebrow color="--fgcolor-neutral-secondary">POWERED BY</Typography.Eyebrow>
@@ -29,34 +32,20 @@
                 alt="Appwrite Logo" />
         {/if}
     </footer>
-</div>
+</Layout.Stack>
 
 <style lang="scss">
-    .auth-bg {
-        position: fixed;
-        background: var(--bgcolor-neutral-primary, #fff);
-        background-size: cover;
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 100%;
+    section {
+        flex: 1;
         display: flex;
-        flex-direction: column;
         align-items: center;
+    }
+    footer {
+        padding: 2rem 1rem;
+        display: flex;
+        gap: 0.5rem;
         justify-content: center;
-        justify-content: space-between;
-        section {
-            flex: 1;
-            display: flex;
-            align-items: center;
-        }
-        footer {
-            padding: 2rem 1rem;
-            display: flex;
-            gap: 0.5rem;
-            justify-content: center;
-            align-items: center;
-            flex-wrap: wrap;
-        }
+        align-items: center;
+        flex-wrap: wrap;
     }
 </style>
diff --git a/src/routes/(authenticated)/git/authorize-contributor/+page.svelte b/src/routes/(authenticated)/git/authorize-contributor/+page.svelte
index 8d90750b5..3b74702e9 100644
--- a/src/routes/(authenticated)/git/authorize-contributor/+page.svelte
+++ b/src/routes/(authenticated)/git/authorize-contributor/+page.svelte
@@ -51,18 +51,16 @@
     }
 </script>
 
-<section class="container" style="display: grid; place-items: center;">
-    <Layout.Stack gap="l" alignItems="center" style="max-width: 500px;">
-        {#if error}
-            <Badge type="error" variant="secondary" content={error} />
-        {/if}
-        {#if success}
-            <Badge type="success" variant="secondary" content={success} />
-        {/if}
-        <Typography.Title size="l" align="center">
-            The deployment for pull request #{providerPullRequestId}
-            is awaiting approval. When authorized, deployments will be started.
-        </Typography.Title>
-        <Button on:click={approveDeployment} secondary>Approve Deployment</Button>
-    </Layout.Stack>
-</section>
+<Layout.Stack gap="l" alignItems="center" style="max-width: 500px;">
+    {#if error}
+        <Badge type="error" variant="secondary" content={error} />
+    {/if}
+    {#if success}
+        <Badge type="success" variant="secondary" content={success} />
+    {/if}
+    <Typography.Title size="l" align="center">
+        The deployment for pull request #{providerPullRequestId}
+        is awaiting approval. When authorized, deployments will be started.
+    </Typography.Title>
+    <Button on:click={approveDeployment} secondary>Approve Deployment</Button>
+</Layout.Stack>