diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 0499ef6de..024c5e6e7 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -4,13 +4,12 @@
     import { Cover } from '.';
     import { Copy, DropList, DropListItem } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { organization } from '../../routes/console/store';
+    import { Button } from '$lib/elements/forms';
+    import { organization, newOrgModal, newMemberModal } from '../../routes/console/store';
 
     export let isOpen = false;
     export let showSideNavigation = false;
 
-    // $: base = `/console/${$page.params.project}`;
-
     let tabsList: HTMLUListElement;
     let showLeft = false;
     let showRight = false;
@@ -99,19 +98,36 @@
                             </h1>
                         </button>
                         <svelte:fragment slot="list">
-                            {#each $titleDropdown as organization}
-                                <DropListItem>
-                                    {organization.name}
+                            {#each $titleDropdown as org}
+                                <DropListItem
+                                    on:click={() => {
+                                        showDropdown = false;
+                                        if (org.$id !== $organization.$id) {
+                                            organization.load(org.$id);
+                                        }
+                                    }}>
+                                    {org.name}
                                 </DropListItem>
                             {/each}
                         </svelte:fragment>
                         <svelte:fragment slot="other">
                             <section class="drop-section">
                                 <ul class="drop-list">
-                                    <DropListItem icon="plus">New Organizations</DropListItem>
+                                    <DropListItem
+                                        icon="plus"
+                                        on:click={() => {
+                                            showDropdown = false;
+                                            newOrgModal.set(true);
+                                        }}>New Organization</DropListItem>
                                 </ul>
                             </section></svelte:fragment>
                     </DropList>
+                    <div class="u-margin-inline-start-auto">
+                        <Button secondary on:click={() => newMemberModal.set(true)}>
+                            <span class="icon-plus" aria-hidden="true" />
+                            <span class="text">Invite</span>
+                        </Button>
+                    </div>
                 {:else}
                     <h1 class="heading-level-4">
                         <span class="text"> {$title}</span>
diff --git a/src/routes/console/__layout-intro.svelte b/src/routes/console/__layout-intro.svelte
index c388793ee..285ae7f1b 100644
--- a/src/routes/console/__layout-intro.svelte
+++ b/src/routes/console/__layout-intro.svelte
@@ -4,7 +4,11 @@
     import { updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
     import { afterNavigate } from '$app/navigation';
-    import { organizationList, organization } from './store';
+    import { organizationList, organization, newOrgModal, newMemberModal } from './store';
+    import CreateMember from './_createMember.svelte';
+    import Create from './_createOrganization.svelte';
+
+    const created = () => console.log('test');
 
     onMount(handle);
     afterNavigate(handle);
@@ -16,7 +20,7 @@
         }
         updateLayout({
             navigate: event,
-            title: `${$organizationList.teams[0].name}`,
+            title: $organization?.name ?? `${$organizationList.teams[0].name}`,
             titleDropdown: $organizationList.teams,
             level: 0,
             customBase: '',
@@ -40,6 +44,10 @@
             ]
         });
     }
+
+    organization.subscribe(() => {
+        handle();
+    });
 </script>
 
 <svelte:head>
@@ -55,3 +63,6 @@
         <footer class="main-footer" />
     </Shell>
 {/if}
+
+<Create bind:show={$newOrgModal} on:created={() => created()} />
+<CreateMember bind:showCreate={$newMemberModal} on:created={() => created()} />
diff --git a/src/routes/console/__layout.svelte b/src/routes/console/__layout.svelte
index 340e96d0d..929e21596 100644
--- a/src/routes/console/__layout.svelte
+++ b/src/routes/console/__layout.svelte
@@ -3,9 +3,10 @@
     import SideNavigation from '$lib/layout/navigation.svelte';
     import Header from '$lib/layout/header.svelte';
     import { updateLayout } from '$lib/stores/layout';
+    import { organization } from './store';
 
     updateLayout({
-        title: 'Projects',
+        title: $organization.name ?? 'Projects',
         level: 0
     });
 </script>
diff --git a/src/routes/console/_deleteOrganization.svelte b/src/routes/console/_deleteOrganization.svelte
index b6050103a..edd51b37f 100644
--- a/src/routes/console/_deleteOrganization.svelte
+++ b/src/routes/console/_deleteOrganization.svelte
@@ -5,7 +5,7 @@
     import { Button, Form } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import { organization } from './store';
+    import { organization, organizationList } from './store';
 
     export let showDelete = false;
 
@@ -17,6 +17,9 @@
                 type: 'success',
                 message: `${$organization.name} has been deleted`
             });
+            if ($organizationList?.total) {
+                organization.set($organizationList.teams[0]);
+            }
             await goto(`${base}/console/`);
         } catch (error) {
             addNotification({
diff --git a/src/routes/console/index@intro.svelte b/src/routes/console/index@intro.svelte
index ff24b1d82..63c62e6d6 100644
--- a/src/routes/console/index@intro.svelte
+++ b/src/routes/console/index@intro.svelte
@@ -2,7 +2,7 @@
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { Pill } from '$lib/elements';
-    import { Bucket, EmptyBucket, Pagination } from '$lib/components';
+    import { Bucket, EmptyBucket, Empty, Pagination } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import type { Models } from '@aw-labs/appwrite-console';
@@ -28,6 +28,12 @@
     const projectCreated = async (event: CustomEvent<Models.Project>) => {
         await goto(`${base}/console/${event.detail.$id}`);
     };
+
+    $: if (currentOrganization !== $organization?.$id) {
+        currentOrganization = $organization.$id;
+        projectList.load();
+        projects = $projectList.projects.filter((a) => a.teamId === $organization.$id);
+    }
     //TODO: fix technology icon display
 </script>
 
@@ -69,12 +75,31 @@
                         </Button>
                     </div>
                     <div class="common-section">
-                        <p>Add a new bucket</p>
+                        <p>Create a new project</p>
                     </div>
                 </EmptyBucket>
             {/if}
         </ul>
 
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <p class="text">Total results: {projects.length}</p>
+            <Pagination {limit} bind:offset sum={projects.length} />
+        </div>
+    {:else}
+        <Empty dashed centered>
+            <div class="bucket">
+                <div class="u-flex u-flex-vertical u-cross-center">
+                    <div class="common-section">
+                        <Button secondary round on:click={() => (showCreate = true)}>
+                            <i class="icon-plus" />
+                        </Button>
+                    </div>
+                    <div class="common-section">
+                        <p>Create a new project</p>
+                    </div>
+                </div>
+            </div>
+        </Empty>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {projects.length}</p>
             <Pagination {limit} bind:offset sum={projects.length} />
@@ -84,9 +109,7 @@
 
 <CreateOrganization bind:show={addOrganization} />
 
-{#if projects?.length}
-    <CreateProject
-        bind:show={showCreate}
-        bind:teamId={currentOrganization}
-        on:created={projectCreated} />
-{/if}
+<CreateProject
+    bind:show={showCreate}
+    bind:teamId={currentOrganization}
+    on:created={projectCreated} />
diff --git a/src/routes/console/members@intro.svelte b/src/routes/console/members@intro.svelte
index 1dbf21e45..3c4c67a56 100644
--- a/src/routes/console/members@intro.svelte
+++ b/src/routes/console/members@intro.svelte
@@ -13,8 +13,7 @@
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import Delete from './_deleteMember.svelte';
-    import Create from './_createMember.svelte';
-    import { organization, memberList } from './store';
+    import { organization, memberList, newMemberModal } from './store';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
     import { pageLimit } from '$lib/stores/layout';
@@ -23,12 +22,10 @@
     let offset: number = null;
 
     let selectedMember: Models.Membership;
-    let showCreate = false;
     let showDelete = false;
 
     const getAvatar = (name: string) => sdkForConsole.avatars.getInitials(name, 32, 32).toString();
     const deleted = () => memberList.load($organization.$id, search, $pageLimit, offset ?? 0);
-    const created = () => memberList.load($organization.$id, search, $pageLimit, offset ?? 0);
 
     $: if (search) offset = 0;
     $: memberList.load($organization.$id, search, $pageLimit, offset ?? 0);
@@ -41,7 +38,7 @@
 
             <Button
                 on:click={() => {
-                    showCreate = true;
+                    newMemberModal.set(true);
                 }}>
                 <span class="icon-plus" aria-hidden="true" />
                 <span class="text">Invite</span>
@@ -102,7 +99,6 @@
     {/if}
 </Container>
 
-<Create bind:showCreate on:created={() => created()} />
 {#if selectedMember}
     <Delete {selectedMember} bind:showDelete on:deleted={() => deleted()} />
 {/if}
diff --git a/src/routes/console/settings@intro.svelte b/src/routes/console/settings@intro.svelte
index 5ef8ef366..89eb48849 100644
--- a/src/routes/console/settings@intro.svelte
+++ b/src/routes/console/settings@intro.svelte
@@ -18,7 +18,7 @@
             await sdkForConsole.teams.update($organization.$id, name);
             $organization.name = name;
             title.set(name);
-            const breadcrumb = $breadcrumbs.get($breadcrumbs.size);
+            const breadcrumb = $breadcrumbs.get(0);
             breadcrumb.title = name;
             $breadcrumbs = $breadcrumbs.set($breadcrumbs.size, breadcrumb);
             addNotification({
@@ -32,6 +32,8 @@
             });
         }
     }
+
+    organization.subscribe((org) => (name = org.name));
 </script>
 
 <Container>
diff --git a/src/routes/console/store.ts b/src/routes/console/store.ts
index 1afbbef00..1bacf460f 100644
--- a/src/routes/console/store.ts
+++ b/src/routes/console/store.ts
@@ -71,6 +71,8 @@ export const organizationList = createOrganizationList();
 export const organization = createOrganization();
 export const projectList = createProjectList();
 export const memberList = createMemberList();
+export const newOrgModal = writable<boolean>(false);
+export const newMemberModal = writable<boolean>(false);
 
 if (browser) {
     organizationList.subscribe((n) =>