diff --git a/package.json b/package.json
index 150f9e3b1..270e22da8 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5eac713f",
         "@appwrite.io/pink-legacy": "^1.0.0",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5eac713f",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@66d65aa",
         "@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 89eba9793..26313e5db 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,8 +21,8 @@ importers:
         specifier: ^1.0.0
         version: 1.0.0
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5eac713f
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5eac713f(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@66d65aa
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@66d65aa(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -221,8 +221,8 @@ packages:
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5eac713f8e69d09316b297f98a772b4871245ed1':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5eac713f8e69d09316b297f98a772b4871245ed1}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@66d65aa75bd39e90088f87ebd62f0ca344ae0430':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@66d65aa75bd39e90088f87ebd62f0ca344ae0430}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -236,8 +236,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.0':
     resolution: {integrity: sha512-EZk/wX8oDhIsCXf2A0oQjdNOaHvh5MnWbLQI4pAiGrdy5qQGPoU19AK6iVX6z3QoOq7geoEu0zVwAowBy5hZbQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5eac713f':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5eac713f}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@66d65aa':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@66d65aa}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -4090,7 +4090,7 @@ snapshots:
     dependencies:
       svelte: 4.2.19
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5eac713f8e69d09316b297f98a772b4871245ed1(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@66d65aa75bd39e90088f87ebd62f0ca344ae0430(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
@@ -4103,9 +4103,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5eac713f(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@66d65aa(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@5eac713f8e69d09316b297f98a772b4871245ed1(svelte@4.2.19)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@66d65aa75bd39e90088f87ebd62f0ca344ae0430(svelte@4.2.19)
       '@floating-ui/dom': 1.6.13
       '@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/breadcrumbs.svelte b/src/lib/components/breadcrumbs.svelte
index 7078d81ea..bbd07c136 100644
--- a/src/lib/components/breadcrumbs.svelte
+++ b/src/lib/components/breadcrumbs.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { createMenubar, melt } from '@melt-ui/svelte';
-    import { Badge, Icon, type SheetMenu, ActionMenu } from '@appwrite.io/pink-svelte';
+    import { Badge, Icon, type SheetMenu, ActionMenu, Card } from '@appwrite.io/pink-svelte';
     import {
         IconChevronDown,
         IconChevronRight,
@@ -205,44 +205,66 @@
     {/if}
 
     <div class="menu" use:melt={$menuOrganizations}>
-        {#if selectedOrg}
-            <div use:melt={$itemOrganizations}>
-                <ActionMenu.Root>
-                    <ActionMenu.Item.Anchor href={`/console/organization-${selectedOrg?.$id}`}
-                        >Organization overview</ActionMenu.Item.Anchor
-                    ></ActionMenu.Root>
-            </div>
-            {#if organizations.length > 1}
-                <div class="separator" use:melt={$separatorOrganizations} />
-
-                <div use:melt={$subTriggerOrganizations}>
+        <Card.Base padding="xxxs" shadow={true}>
+            {#if selectedOrg}
+                <div use:melt={$itemOrganizations}>
                     <ActionMenu.Root>
-                        <ActionMenu.Item.Button trailingIcon={IconChevronRight}
-                            >Switch organization</ActionMenu.Item.Button>
-                    </ActionMenu.Root>
+                        <ActionMenu.Item.Anchor href={`/console/organization-${selectedOrg?.$id}`}
+                            >Organization overview</ActionMenu.Item.Anchor
+                        ></ActionMenu.Root>
                 </div>
-                <div class="menu subMenu" use:melt={$subMenuOrganizations}>
-                    <div use:melt={$radioGroupOrganizations}>
-                        {#each organizations as organization}
-                            <div use:melt={$itemOrganizations}>
-                                <ActionMenu.Root>
-                                    <ActionMenu.Item.Anchor
-                                        href={`/console/organization-${organization?.$id}`}
-                                        >{organization.name}</ActionMenu.Item.Anchor>
-                                </ActionMenu.Root>
-                            </div>
-                        {/each}
-                        <div class="separator" use:melt={$separatorOrganizations} />
-                        <div use:melt={$itemOrganizations}>
-                            <ActionMenu.Root>
-                                <ActionMenu.Item.Button
-                                    leadingIcon={IconPlusSm}
-                                    on:click={createOrg}>Create organization</ActionMenu.Item.Button
-                                ></ActionMenu.Root>
-                        </div>
+                {#if organizations.length > 1}
+                    <div class="separator" use:melt={$separatorOrganizations} />
+
+                    <div use:melt={$subTriggerOrganizations}>
+                        <ActionMenu.Root>
+                            <ActionMenu.Item.Button trailingIcon={IconChevronRight}
+                                >Switch organization</ActionMenu.Item.Button>
+                        </ActionMenu.Root>
                     </div>
-                </div>
+                    <div class="menu subMenu" use:melt={$subMenuOrganizations}>
+                        <Card.Base padding="xxxs" shadow={true}>
+                            <div use:melt={$radioGroupOrganizations}>
+                                {#each organizations as organization}
+                                    <div use:melt={$itemOrganizations}>
+                                        <ActionMenu.Root>
+                                            <ActionMenu.Item.Anchor
+                                                href={`/console/organization-${organization?.$id}`}
+                                                >{organization.name}</ActionMenu.Item.Anchor>
+                                        </ActionMenu.Root>
+                                    </div>
+                                {/each}
+                                <div class="separator" use:melt={$separatorOrganizations} />
+                                <div use:melt={$itemOrganizations}>
+                                    <ActionMenu.Root>
+                                        <ActionMenu.Item.Button
+                                            leadingIcon={IconPlusSm}
+                                            on:click={createOrg}
+                                            >Create organization</ActionMenu.Item.Button
+                                        ></ActionMenu.Root>
+                                </div>
+                            </div>
+                        </Card.Base>
+                    </div>
+                {:else}
+                    <div class="separator" use:melt={$separatorOrganizations} />
+                    <div use:melt={$itemOrganizations}>
+                        <ActionMenu.Root>
+                            <ActionMenu.Item.Button leadingIcon={IconPlusSm} on:click={createOrg}
+                                >Create organization</ActionMenu.Item.Button
+                            ></ActionMenu.Root>
+                    </div>
+                {/if}
             {:else}
+                {#each organizations as organization}
+                    <div use:melt={$itemOrganizations}>
+                        <ActionMenu.Root>
+                            <ActionMenu.Item.Anchor
+                                href={`/console/organization-${organization?.$id}`}
+                                >{organization.name}</ActionMenu.Item.Anchor
+                            ></ActionMenu.Root>
+                    </div>
+                {/each}
                 <div class="separator" use:melt={$separatorOrganizations} />
                 <div use:melt={$itemOrganizations}>
                     <ActionMenu.Root>
@@ -251,23 +273,7 @@
                         ></ActionMenu.Root>
                 </div>
             {/if}
-        {:else}
-            {#each organizations as organization}
-                <div use:melt={$itemOrganizations}>
-                    <ActionMenu.Root>
-                        <ActionMenu.Item.Anchor href={`/console/organization-${organization?.$id}`}
-                            >{organization.name}</ActionMenu.Item.Anchor
-                        ></ActionMenu.Root>
-                </div>
-            {/each}
-            <div class="separator" use:melt={$separatorOrganizations} />
-            <div use:melt={$itemOrganizations}>
-                <ActionMenu.Root>
-                    <ActionMenu.Item.Button leadingIcon={IconPlusSm} on:click={createOrg}
-                        >Create organization</ActionMenu.Item.Button
-                    ></ActionMenu.Root>
-            </div>
-        {/if}
+        </Card.Base>
     </div>
 
     {#if selectedOrg && selectedProject}
@@ -293,35 +299,37 @@
         {/if}
 
         <div class="menu" use:melt={$menuProjects}>
-            {#if selectedOrg.projects.length > 1}
-                {#each selectedOrg.projects as project, index}
-                    {#if index < 4}
-                        <div use:melt={$itemProjects}>
-                            <ActionMenu.Root>
-                                <ActionMenu.Item.Anchor href={`/console/project-${project.$id}`}
-                                    >{project.name}</ActionMenu.Item.Anchor
-                                ></ActionMenu.Root>
-                        </div>
-                    {:else if index === 4}
-                        <div use:melt={$itemProjects}>
-                            <ActionMenu.Root>
-                                <ActionMenu.Item.Anchor
-                                    href={`/console/organization-${selectedOrg.$id}`}
-                                    >All projects</ActionMenu.Item.Anchor
-                                ></ActionMenu.Root>
-                        </div>
-                    {/if}
-                {/each}
-                <div class="separator" use:melt={$separatorProjects} />
-            {/if}
-            <div use:melt={$itemProjects}>
-                <ActionMenu.Root>
-                    <ActionMenu.Item.Anchor
-                        leadingIcon={IconPlusSm}
-                        href={`/console/organization-${selectedOrg?.$id}?create-project`}
-                        >Create project</ActionMenu.Item.Anchor
-                    ></ActionMenu.Root>
-            </div>
+            <Card.Base padding="xxxs" shadow={true}>
+                {#if selectedOrg.projects.length > 1}
+                    {#each selectedOrg.projects as project, index}
+                        {#if index < 4}
+                            <div use:melt={$itemProjects}>
+                                <ActionMenu.Root>
+                                    <ActionMenu.Item.Anchor href={`/console/project-${project.$id}`}
+                                        >{project.name}</ActionMenu.Item.Anchor
+                                    ></ActionMenu.Root>
+                            </div>
+                        {:else if index === 4}
+                            <div use:melt={$itemProjects}>
+                                <ActionMenu.Root>
+                                    <ActionMenu.Item.Anchor
+                                        href={`/console/organization-${selectedOrg.$id}`}
+                                        >All projects</ActionMenu.Item.Anchor
+                                    ></ActionMenu.Root>
+                            </div>
+                        {/if}
+                    {/each}
+                    <div class="separator" use:melt={$separatorProjects} />
+                {/if}
+                <div use:melt={$itemProjects}>
+                    <ActionMenu.Root>
+                        <ActionMenu.Item.Anchor
+                            leadingIcon={IconPlusSm}
+                            href={`/console/organization-${selectedOrg?.$id}?create-project`}
+                            >Create project</ActionMenu.Item.Anchor
+                        ></ActionMenu.Root>
+                </div>
+            </Card.Base>
         </div>
     {/if}
 </div>
@@ -332,19 +340,19 @@
 
 <style lang="scss">
     .menu {
-        display: flex;
-        flex-direction: column;
-        outline: none !important;
+        //display: flex;
+        //flex-direction: column;
+        //outline: none !important;
         min-width: 220px;
-        border-radius: var(--border-radius-m, 12px);
-        border: 1px solid var(--color-border-neutral, #ededf0);
-        background: var(--color-bgcolor-neutral-primary, #fff);
+        //border-radius: var(--border-radius-m, 12px);
+        //border: 1px solid var(--color-border-neutral, #ededf0);
+        //background: var(--color-bgcolor-neutral-primary, #fff);
         z-index: 20;
-
-        /* box-shadow/neutral/L */
-        box-shadow:
-            -2px 8px 16px 0px rgba(0, 0, 0, 0.02),
-            -2px 20px 24px 0px rgba(0, 0, 0, 0.02);
+        //
+        ///* box-shadow/neutral/L */
+        //box-shadow:
+        //    -2px 8px 16px 0px rgba(0, 0, 0, 0.02),
+        //    -2px 20px 24px 0px rgba(0, 0, 0, 0.02);
     }
 
     .not-mobile {
@@ -437,8 +445,10 @@
             0 0 0 4px var(--color-border-focus, #818186);
     }
     .separator {
-        margin: 5px 0;
         height: 1px;
+        margin-block: 2px;
+        margin-inline-start: calc(var(--base-4) * -1);
+        width: calc(100% + var(--base-8));
         background-color: var(--color-border-neutral);
     }
     .breadcrumb-separator {
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index 97d6d6f6c..2d2d6072a 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -160,7 +160,7 @@
             </Link.Button>
             {#if showAccountMenu}
                 <div class="account-container">
-                    <Card.Base padding="xxs" shadow={true}>
+                    <Card.Base padding="xxxs" shadow={true}>
                         <Layout.Stack gap="xxs">
                             <ActionMenu.Root>
                                 <Layout.Stack gap="xxs">
@@ -182,23 +182,29 @@
                                         trailingIcon={IconLogoutRight}
                                         size="l"
                                         on:click={logout}>Sign out</ActionMenu.Item.Button>
+                                    <div
+                                        style:padding-inline-start="10px"
+                                        style:padding-inline-end="8px">
+                                        <Layout.Stack
+                                            justifyContent="space-between"
+                                            direction="row"
+                                            alignItems="center">
+                                            <Typography.Text>Theme</Typography.Text>
+                                            <ToggleButton
+                                                bind:active={activeTheme}
+                                                buttons={[
+                                                    { id: 'light', label: 'Light', icon: IconSun },
+                                                    { id: 'dark', label: 'Dark', icon: IconMoon },
+                                                    {
+                                                        id: 'system',
+                                                        label: 'System',
+                                                        icon: IconMode
+                                                    }
+                                                ]}></ToggleButton>
+                                        </Layout.Stack>
+                                    </div>
                                 </Layout.Stack>
                             </ActionMenu.Root>
-                            <div style:padding-inline-start="13px" style:padding-inline-end="8px">
-                                <Layout.Stack
-                                    justifyContent="space-between"
-                                    direction="row"
-                                    alignItems="center">
-                                    <Typography.Text>Theme</Typography.Text>
-                                    <ToggleButton
-                                        bind:active={activeTheme}
-                                        buttons={[
-                                            { id: 'light', label: 'Light', icon: IconSun },
-                                            { id: 'dark', label: 'Dark', icon: IconMoon },
-                                            { id: 'system', label: 'System', icon: IconMode }
-                                        ]}></ToggleButton>
-                                </Layout.Stack>
-                            </div>
                         </Layout.Stack>
                     </Card.Base>
                 </div>