diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
index 2f7db8290..17ae79b2b 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
@@ -359,6 +359,21 @@
         bottom: 35%;
         position: fixed;
 
+        @media (max-width: 768px) and (max-height: 768px) {
+            left: unset;
+            bottom: 12.5% !important;
+        }
+
+        @media (max-width: 768px) and (max-height: 1024px) {
+            left: unset;
+            bottom: 15% !important;
+        }
+
+        @media (max-width: 1024px) and (max-height: 1024px) {
+            left: unset;
+            bottom: 15%;
+        }
+
         @media (max-width: 1024px) {
             left: unset;
             bottom: 30%;
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte
index 59064ab85..0eb239ecc 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte
@@ -3,6 +3,8 @@
     import { Button, Form } from '$lib/elements/forms';
     import { Badge, Divider, Layout, Sheet, Tag, Typography } from '@appwrite.io/pink-svelte';
     import { Copy } from '$lib/components';
+    import { writable } from 'svelte/store';
+    import { isTabletViewport } from '$lib/stores/viewport';
 
     let {
         show = $bindable(false),
@@ -38,6 +40,9 @@
         footer?: Snippet | null;
     } = $props();
 
+    let form: Form;
+    let submitting = writable(false);
+
     let copyText = $state(undefined);
 </script>
 
@@ -74,6 +79,8 @@
 
         <Layout.Stack direction="column" justifyContent="space-evenly">
             <Form
+                bind:this={form}
+                bind:isSubmitting={submitting}
                 onSubmit={async () => {
                     try {
                         const keepOpen = await submit?.onClick?.();
@@ -87,32 +94,38 @@
                 <Layout.Stack gap="xl" class="sheet-content">
                     {@render children?.()}
                 </Layout.Stack>
-
-                {#if submit}
-                    <div class="sheet-footer">
-                        <Layout.Stack gap="l">
-                            <Divider />
-
-                            <div class="sheet-footer-actions">
-                                <Layout.Stack
-                                    gap="m"
-                                    direction="row"
-                                    justifyContent="flex-end"
-                                    alignItems="center">
-                                    {#if footer}
-                                        {@render footer?.()}
-                                    {/if}
-                                    <Button size="s" secondary on:click={() => (show = false)}
-                                        >Cancel</Button>
-                                    <Button size="s" submit disabled={submit.disabled}>
-                                        {submit.text}
-                                    </Button>
-                                </Layout.Stack>
-                            </div>
-                        </Layout.Stack>
-                    </div>
-                {/if}
             </Form>
+
+            {#if submit}
+                <div class="sheet-footer">
+                    <Layout.Stack gap="l">
+                        <Divider />
+
+                        <div class="sheet-footer-actions">
+                            <Layout.Stack
+                                gap="m"
+                                direction="row"
+                                justifyContent="flex-end"
+                                alignItems="center">
+                                {#if footer}
+                                    {@render footer?.()}
+                                {/if}
+                                <Button size="s" secondary on:click={() => (show = false)}
+                                    >Cancel</Button>
+                                <Button
+                                    size="s"
+                                    submit
+                                    disabled={submit.disabled || $submitting}
+                                    forceShowLoader={$submitting && $isTabletViewport}
+                                    submissionLoader={$submitting && $isTabletViewport}
+                                    on:click={() => form?.triggerSubmit()}>
+                                    {submit.text}
+                                </Button>
+                            </Layout.Stack>
+                        </div>
+                    </Layout.Stack>
+                </div>
+            {/if}
         </Layout.Stack>
     </Sheet>
 </div>
@@ -131,6 +144,14 @@
         & :global(.sheet-content) {
             // overflow-y: auto;
             padding-bottom: 5rem;
+
+            @media (max-width: 768px) {
+                /*
+                 * different mobile browsers handle bottom spaces differently,
+                 * therefore, having extra bottom space doesn't hurt anyone imo!
+                 */
+                padding-bottom: 15rem;
+            }
         }
     }
 
@@ -141,6 +162,10 @@
         position: absolute;
         background: var(--bgcolor-neutral-primary);
 
+        @media (max-width: 768px) {
+            position: fixed;
+        }
+
         & .sheet-footer-actions {
             padding-inline: var(--space-8);
             padding-block-end: var(--space-6);