diff --git a/src/lib/components/chat.svelte b/src/lib/components/chat.svelte
index ef7f6f0be..e9af55678 100644
--- a/src/lib/components/chat.svelte
+++ b/src/lib/components/chat.svelte
@@ -1,6 +1,6 @@
 <script>
     import { Divider, Card, Typography, Layout, Button, Icon } from '@appwrite.io/pink-svelte';
-    import { IconChevronLeft } from '@appwrite.io/pink-icons-svelte';
+    import { IconArrowUp, IconChevronLeft, IconPaperClip } from '@appwrite.io/pink-icons-svelte';
 
     export let showChat;
 </script>
@@ -8,27 +8,43 @@
 <section class="chat" class:is-visible={showChat}>
     <Card.Base>
         <div class="chat-content">
-            <Layout.Stack height="calc(100vh - 120px)">
-                <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
-                    <Typography.Text>Chat</Typography.Text>
-                    <button
-                        on:click={() => {
-                            showChat = false;
-                        }}>
-                        <Icon icon={IconChevronLeft} />
-                    </button>
-                </Layout.Stack>
+            <Layout.Stack height="calc(100vh - 120px)" justifyContent="space-between">
+                <Layout.Stack gap="s">
+                    <Layout.Stack
+                        direction="row"
+                        justifyContent="space-between"
+                        alignItems="center">
+                        <Typography.Text>Chat</Typography.Text>
+                        <Button.Button
+                            icon
+                            variant="secondary"
+                            size="s"
+                            on:click={() => {
+                                showChat = false;
+                            }}
+                            ><Icon
+                                icon={IconChevronLeft}
+                                color="--fgcolor-neutral-tertiary" /></Button.Button>
+                    </Layout.Stack>
 
-                <Divider />
-                <Typography.Text>
-                    Phasellus a ultricies nulla. Proin tristique aliquam dui. Phasellus porta
-                    sodales justo, et feugiat ligula pulvinar sed. Morbi et nulla hendrerit,
-                    pellentesque est sodales, euismod magna. Suspendisse vel massa arcu. Nulla
-                    ultrices sit amet metus ac euismod. Curabitur ultrices aliquet libero, a
-                    pharetra orci tristique in. Etiam egestas fermentum justo ut semper. Sed
-                    vulputate eros erat, ac sollicitudin nulla condimentum volutpat. Sed vulputate
-                    est ante.
-                </Typography.Text>
+                    <Divider />
+                    <!-- CHAT CONTENT -->
+                </Layout.Stack>
+                <div class="input">
+                    <textarea placeholder="Reply..."></textarea>
+                    <div class="options">
+                        <Layout.Stack direction="row" justifyContent="flex-end">
+                            <Button.Button icon variant="secondary" size="s"
+                                ><Icon
+                                    icon={IconPaperClip}
+                                    color="--fgcolor-neutral-tertiary" /></Button.Button>
+                            <Button.Button icon variant="secondary" size="s"
+                                ><Icon
+                                    icon={IconArrowUp}
+                                    color="--fgcolor-neutral-tertiary" /></Button.Button>
+                        </Layout.Stack>
+                    </div>
+                </div>
             </Layout.Stack>
         </div>
     </Card.Base>
@@ -37,6 +53,8 @@
 <style lang="scss">
     .chat {
         width: 0;
+        position: sticky;
+        top: 48px;
         overflow: hidden;
         transition: width 0.3s ease-in-out;
 
@@ -53,4 +71,19 @@
         transition: opacity 0.3s ease-in-out 0.2s;
         opacity: 1;
     }
+
+    .input {
+        margin-inline: calc(-1 * var(--space-9));
+        margin-block-end: calc(-1 * var(--space-9));
+        border-top: 1px solid var(--border-neutral);
+        border-radius: var(--border-radius-m);
+        padding: var(--space-6);
+
+        textarea {
+            width: 100%;
+            min-height: 100px;
+            overflow: hidden;
+            resize: none;
+        }
+    }
 </style>