diff --git a/package.json b/package.json
index a7c18b84b..ae57d2dfb 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
         "@appwrite.io/pink": "0.25.0",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "1.0.0-next.7",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@eabc0b1",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@79b0a12",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5bf66abe9..759c33444 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,8 +21,8 @@ importers:
         specifier: 1.0.0-next.7
         version: 1.0.0-next.7(svelte@4.2.19)
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@eabc0b1
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@eabc0b1(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@79b0a12
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@79b0a12(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -223,8 +223,8 @@ packages:
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@eabc0b1d2e2533b931a5cbd3aad9412a644c6641':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@eabc0b1d2e2533b931a5cbd3aad9412a644c6641}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@79b0a127d56612db95ee75c6800c2118e1460bbb':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@79b0a127d56612db95ee75c6800c2118e1460bbb}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -232,8 +232,8 @@ packages:
   '@appwrite.io/pink-icons@0.25.0':
     resolution: {integrity: sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@eabc0b1':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@eabc0b1}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@79b0a12':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@79b0a12}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -4049,15 +4049,15 @@ snapshots:
     dependencies:
       svelte: 4.2.19
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@eabc0b1d2e2533b931a5cbd3aad9412a644c6641(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@79b0a127d56612db95ee75c6800c2118e1460bbb(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
   '@appwrite.io/pink-icons@0.25.0': {}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@eabc0b1(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@79b0a12(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@eabc0b1d2e2533b931a5cbd3aad9412a644c6641(svelte@4.2.19)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@79b0a127d56612db95ee75c6800c2118e1460bbb(svelte@4.2.19)
       '@floating-ui/dom': 1.6.12
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.2(svelte@4.2.19))(svelte@4.2.19)
       '@melt-ui/svelte': 0.86.2(svelte@4.2.19)
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index 47d7b4cb4..4fc187a68 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -1,12 +1,31 @@
 <script lang="ts">
-    import { Navbar, Icon, Layout, Link, Tooltip } from '@appwrite.io/pink-svelte';
+    import {
+        Navbar,
+        Icon,
+        Layout,
+        Link,
+        Tooltip,
+        Card,
+        ActionList,
+        Input
+    } from '@appwrite.io/pink-svelte';
     import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
     import type { BaseNavbarProps } from '@appwrite.io/pink-svelte/dist/navbar/Base.svelte';
-    import { IconMenuAlt4, IconSearch } from '@appwrite.io/pink-icons-svelte';
+    import {
+        IconLogoutRight,
+        IconMenuAlt4,
+        IconMode,
+        IconMoon,
+        IconSearch,
+        IconSun,
+        IconUser
+    } from '@appwrite.io/pink-icons-svelte';
     import { DropList, Support, BreadcrumbsConsole } from '$lib/components';
     import { Feedback } from '$lib/components/feedback';
     import { feedback } from '$lib/stores/feedback';
     import { isMac } from '$lib/helpers/platform';
+    import { base } from '$app/paths';
+    import { logout } from '$lib/helpers/logout';
 
     let showSupport = false;
 
@@ -34,6 +53,7 @@
     export let avatar: $$Props['avatar'];
     export let sideBarIsOpen: $$Props['sideBarIsOpen'] = false;
     export let showSideNavigation: boolean;
+    let showAccountMenu = false;
 </script>
 
 <Navbar.Base {...$$props}>
@@ -85,7 +105,41 @@
                         on:click={toggleCommandCenter}><Icon icon={IconSearch} /></Link.Button
                     ><span slot="tooltip">{isMac() ? '⌘ + K' : 'Ctrl + K'}</span></Tooltip>
             </div>
-            <Link.Button><img src={avatar} alt={'Avatar'} class="avatar" /></Link.Button>
+            <Link.Button
+                on:click={() => {
+                    showAccountMenu = !showAccountMenu;
+                }}><img src={avatar} alt={'Avatar'} class="avatar" /></Link.Button>
+            {#if showAccountMenu}
+                <div class="account-container">
+                    <Card.Base padding="xxs">
+                        <Layout.Stack gap="xxs">
+                            <ActionList.Root>
+                                <ActionList.Item.Anchor
+                                    icon={IconUser}
+                                    title="Account"
+                                    href={`${base}/account`} />
+
+                                <ActionList.Item.Button
+                                    icon={IconLogoutRight}
+                                    on:click={logout}
+                                    title="Sign out" />
+                            </ActionList.Root>
+                            <Input.Select
+                                value="light"
+                                options={[
+                                    { label: 'Light', value: 'light', leadingIcon: IconSun },
+                                    { label: 'Dark', value: 'dark', leadingIcon: IconMoon },
+                                    { label: 'System', value: 'system', leadingIcon: IconMode }
+                                ]} />
+                        </Layout.Stack>
+                    </Card.Base>
+                </div>
+                <div
+                    class="account-backdrop"
+                    on:click={() => {
+                        showAccountMenu = false;
+                    }} />
+            {/if}
         </div>
     </div>
 </Navbar.Base>
@@ -157,4 +211,22 @@
     :global(.icons div:first-of-type) {
         height: 20px;
     }
+
+    .account-container {
+        position: absolute;
+        right: var(--space-7);
+        top: var(--base-44);
+        width: 244px;
+        display: flex;
+        z-index: 1;
+    }
+
+    .account-backdrop {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: transparent;
+    }
 </style>