diff --git a/package.json b/package.json
index 5c0e988..a99a77c 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
 		"test:unit": "vitest"
 	},
 	"devDependencies": {
+		"@iconify/svelte": "^3.1.4",
 		"@playwright/test": "^1.28.1",
 		"@skeletonlabs/skeleton": "^1.10.0",
 		"@sveltejs/adapter-auto": "^2.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4c69a8f..542f374 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,6 +36,9 @@ dependencies:
     version: 1.4.1(typescript@5.1.6)
 
 devDependencies:
+  '@iconify/svelte':
+    specifier: ^3.1.4
+    version: 3.1.4(svelte@4.1.1)
   '@playwright/test':
     specifier: ^1.28.1
     version: 1.36.2
@@ -845,6 +848,19 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
+  /@iconify/svelte@3.1.4(svelte@4.1.1):
+    resolution: {integrity: sha512-YDwQlN46ka8KPRayDb7TivmkAPizfTXi6BSRNqa1IV0+byA907n8JcgQafA7FD//pW5XCuuAhVx6uRbKTo+CfA==}
+    peerDependencies:
+      svelte: '*'
+    dependencies:
+      '@iconify/types': 2.0.0
+      svelte: 4.1.1
+    dev: true
+
+  /@iconify/types@2.0.0:
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+    dev: true
+
   /@ipld/dag-cbor@6.0.15:
     resolution: {integrity: sha512-Vm3VTSTwlmGV92a3C5aeY+r2A18zbH2amehNhsX8PBa3muXICaWrN8Uri85A5hLH7D7ElhE8PdjxD6kNqUmTZA==}
     dependencies:
diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte
new file mode 100644
index 0000000..7a59fae
--- /dev/null
+++ b/src/lib/components/Actions.svelte
@@ -0,0 +1,26 @@
+<script>
+	import { clearMessages } from '$lib/services/messages/messages';
+	import { drawerStore } from '@skeletonlabs/skeleton';
+
+	function handleClear() {
+		clearMessages();
+		drawerStore.close();
+	}
+
+	let buttons = [
+		{
+			label: 'clear Messages',
+			handler: handleClear
+		}
+	];
+</script>
+
+<div class="flex flex-col items-start p-4">
+	<h2 class="mb-4 font-bold h3">Actions</h2>
+
+	{#each buttons as button}
+		<button on:click={button.handler} class="btn variant-filled-secondary">
+			{button.label}
+		</button>
+	{/each}
+</div>
diff --git a/src/lib/components/AppBar.svelte b/src/lib/components/AppBar.svelte
index 3ea6bfd..f60a8a8 100644
--- a/src/lib/components/AppBar.svelte
+++ b/src/lib/components/AppBar.svelte
@@ -1,12 +1,8 @@
 <script>
 	import { AppBar } from '@skeletonlabs/skeleton';
-	import { Avatar } from '@skeletonlabs/skeleton';
 </script>
 
 <AppBar>
-	<svelte:fragment slot="lead"
-		><Avatar src="logo.png" width="w-8" rounded="rounded-full" /></svelte:fragment
-	>
 	<h1 class="h4">Nova</h1>
 	<!-- <svelte:fragment slot="trail">(actions)</svelte:fragment> -->
 </AppBar>
diff --git a/src/lib/components/Apps.svelte b/src/lib/components/Apps.svelte
index 92a4430..27e53c1 100644
--- a/src/lib/components/Apps.svelte
+++ b/src/lib/components/Apps.svelte
@@ -1,17 +1,26 @@
 <script>
+	import Icon from '@iconify/svelte';
+	import { drawerStore } from '@skeletonlabs/skeleton';
+
 	const routes = [
-		{ path: '/', name: 'Home', icon: '🏠' },
-		{ path: '/wallet', name: 'Wallet', icon: '💼' },
-		{ path: '/helloearth', name: 'Hello Earth', icon: '🌍' },
-		{ path: '/login', name: 'Login', icon: '🔑' }
+		{ path: '/', name: 'Home', icon: 'iconoir:home-simple-door' },
+		{ path: '/messages', name: 'Messages', icon: 'iconoir:message-text' },
+		{ path: '/wallet', name: 'Wallet', icon: 'iconoir:wallet' },
+		{ path: '/helloearth', name: 'Hello Earth', icon: 'iconoir:planet-sat' }
 	];
+	function closeDrawer() {
+		drawerStore.close();
+	}
 </script>
 
-<div class="logo-cloud grid-cols-1 lg:!grid-cols-4 gap-1">
-	{#each routes as route, index}
-		<a class="logo-item" href={route.path}>
-			<span>{route.icon}</span>
-			<span>{route.name}</span>
-		</a>
-	{/each}
+<div class="flex flex-col items-start p-4">
+	<h2 class="font-bold h3">Apps</h2>
+	<div class="flex space-x-4">
+		{#each routes as route}
+			<a class="flex flex-col items-center w-28 logo-item" href={route.path} on:click={closeDrawer}>
+				<Icon icon={route.icon} width="96" height="96" />
+				<span class="mt-2 text-center">{route.name}</span>
+			</a>
+		{/each}
+	</div>
 </div>
diff --git a/src/lib/components/GoogleAuth.svelte b/src/lib/components/GoogleAuth.svelte
index 3ea2e88..17a4c2f 100644
--- a/src/lib/components/GoogleAuth.svelte
+++ b/src/lib/components/GoogleAuth.svelte
@@ -5,8 +5,10 @@
 	import { ProviderType } from '@lit-protocol/constants';
 	import { createMessage } from '$lib/services/messages/messages';
 	import { createLitSession } from '$lib/services/createLitSession/createLitSession';
+	import Icon from '@iconify/svelte';
+	import Apps from '$lib/components/Apps.svelte';
 
-	const redirectUri = 'http://localhost:5173/login/';
+	const redirectUri = 'http://localhost:5173/';
 
 	export let services;
 
@@ -109,37 +111,42 @@
 	}
 </script>
 
-<main>
-	{#if error}
-		<h1>Error</h1>
-		<p>{error.message}</p>
-		<button on:click={resetView}>Got it</button>
-	{:else if isLoading}
-		<h1>Loading...</h1>
-	{:else if view === 'sign_in'}
-		<h1>Sign in with Lit</h1>
-		<button on:click={authWithGoogle}>Google</button>
-	{:else if view === 'fetching'}
-		<h1>Fetching your PKPs...</h1>
-	{:else if view === 'NO_PKPS'}
-		<h1>No PKPs found.</h1>
-		<button on:click={mint}>Mint a PKP</button>
-	{:else if view === 'fetched'}
-		<h1>Select a PKP to continue</h1>
-		{#each pkps as pkp}
-			<button on:click={async () => await createSession(pkp)}>{pkp.ethAddress}</button>
-		{/each}
-	{:else if view === 'MINTING'}
-		<h1>Minting your PKP...</h1>
-	{:else if view === 'MINTED'}
-		<h1>Minted!</h1>
-	{:else if view === 'CREATING_SESSION'}
-		<h1>Creating session...</h1>
-	{:else if view === 'SESSION_CREATED'}
-		<h1>Ready for the open web</h1>
-		<div>
-			<p>Check out your PKP:</p>
-			<p>{currentPKP.ethAddress}</p>
-		</div>
-	{/if}
+<main class="flex items-center justify-center h-full">
+	<div class="text-center">
+		{#if error}
+			<h1>Error</h1>
+			<p>{error.message}</p>
+			<button on:click={resetView}>Got it</button>
+		{:else if isLoading}
+			<h1>Loading...</h1>
+		{:else if view === 'sign_in'}
+			<button on:click={authWithGoogle} class="btn variant-filled">
+				<span><Icon icon="flat-color-icons:google" /></span>
+				<span>Sign in with Google</span>
+			</button>
+		{:else if view === 'fetching'}
+			<h1>Fetching your PKPs...</h1>
+		{:else if view === 'NO_PKPS'}
+			<h1>No PKPs found.</h1>
+			<button on:click={mint}>Mint a PKP</button>
+		{:else if view === 'fetched'}
+			<h1>Select a PKP to continue</h1>
+			{#each pkps as pkp}
+				<button on:click={async () => await createSession(pkp)}>{pkp.ethAddress}</button>
+			{/each}
+		{:else if view === 'MINTING'}
+			<h1>Minting your PKP...</h1>
+		{:else if view === 'MINTED'}
+			<h1>Minted!</h1>
+		{:else if view === 'CREATING_SESSION'}
+			<h1>Creating session...</h1>
+		{:else if view === 'SESSION_CREATED'}
+			<h1>Ready for the open web</h1>
+			<div>
+				<p>Check out your PKP:</p>
+				<p>{currentPKP.ethAddress}</p>
+			</div>
+			<Apps />
+		{/if}
+	</div>
 </main>
diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
new file mode 100644
index 0000000..e359c9e
--- /dev/null
+++ b/src/lib/components/Navigation.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import Apps from '$lib/components/Apps.svelte';
+	import Actions from '$lib/components/Actions.svelte';
+</script>
+
+<div>
+	<Actions />
+	<Apps />
+</div>
diff --git a/src/lib/components/Terminal.svelte b/src/lib/components/Terminal.svelte
index 9730605..8334d19 100644
--- a/src/lib/components/Terminal.svelte
+++ b/src/lib/components/Terminal.svelte
@@ -1,14 +1,16 @@
 <!-- TerminalComponent.svelte -->
 
 <script lang="ts">
-	import { createMessage, clearMessages } from '$lib/services/messages/messages';
+	import { createMessage } from '$lib/services/messages/messages';
 	import { drawerStore } from '@skeletonlabs/skeleton';
 	import type { DrawerSettings } from '@skeletonlabs/skeleton';
+	import { Avatar } from '@skeletonlabs/skeleton';
 
 	const drawerSettings: DrawerSettings = {
 		position: 'bottom',
 		id: 'drawer',
-		meta: { id: 'apps', component: 'Apps' }
+		meta: { id: 'navigation', component: 'Navigation' },
+		height: 'auto'
 	};
 
 	const openDrawer = () => {
@@ -45,18 +47,15 @@
 			createMessage(message);
 		}
 	}
-
-	// Clear messages logic
-	function handleClear() {
-		clearMessages();
-	}
 </script>
 
-<div class="input-group input-group-divider grid-cols-[auto_1fr_auto] rounded-container-token h-12">
-	<button class="input-group-shim" on:click={openDrawer}>+</button>
+<div class="input-group input-group-divider grid-cols-[auto_1fr_auto] rounded-container-token h-14">
+	<button class="input-group-shim" on:drawer{closeDrawer} on:click={openDrawer}>
+		<Avatar src="logo.png" width="w-10" rounded="rounded-full" />
+	</button>
 
-	<textarea
-		class="bg-transparent border-0 ring-0"
+	<input
+		class="p-4 bg-transparent border-0 ring-0"
 		name="prompt"
 		id="prompt"
 		placeholder="Write a message..."
@@ -65,5 +64,4 @@
 		on:keydown={handleKeyDown}
 	/>
 	<button class="variant-filled-primary" on:click={() => sendMessage(newMessageText)}>Send</button>
-	<!-- <button class="variant-filled-primary" on:click={handleClear}>clear</button> -->
 </div>
diff --git a/src/lib/core/Composite.svelte b/src/lib/core/Composite.svelte
index dbc072b..6096bd2 100644
--- a/src/lib/core/Composite.svelte
+++ b/src/lib/core/Composite.svelte
@@ -39,6 +39,7 @@
 
 		if (composite?.children) {
 			composite.children.forEach((child) => {
+				initializeCompositeState(child);
 				initializeAndLoadServices(child);
 				mapAndSubscribe(child);
 			});
@@ -161,7 +162,10 @@
 	}
 </script>
 
-<div class={`grid w-full h-full ${composite?.layout?.tailwindClasses || ''}`} style={layoutStyle}>
+<div
+	class={`grid w-full h-full overflow-hidden ${composite?.layout?.tailwindClasses || ''}`}
+	style={layoutStyle}
+>
 	{#if composite?.servicesLoaded}
 		{#await loadComponentAndService(composite) then Component}
 			{#if Component}
@@ -171,15 +175,16 @@
 					store={getCompositeStore(composite.id)}
 					services={loadedServices}
 				/>
-			{:else}
-				<p>Component {composite.component} not found.</p>
 			{/if}
 		{/await}
 	{/if}
 
 	{#if composite?.children}
 		{#each composite.children as child (child.id)}
-			<div class="w-full h-full overflow-hidden" style={`grid-area: ${child.slot}`}>
+			<div
+				class="grid w-full h-full overflow-hidden ${composite?.layout?.tailwindClasses || ''}"
+				style={`grid-area: ${child.slot}`}
+			>
 				{#if child.servicesLoaded}
 					{#await loadComponentAndService(child) then ChildComponent}
 						{#if ChildComponent}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 751287e..91fcaf0 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -6,7 +6,6 @@
 	import { initChainProvider } from '$lib/services/provider/setupChainProvider';
 	import { onMount } from 'svelte';
 
-	import { Modal, modalStore } from '@skeletonlabs/skeleton';
 	import { Drawer, drawerStore } from '@skeletonlabs/skeleton';
 	import Composite from '$lib/core/Composite.svelte';
 
@@ -19,7 +18,6 @@
 	});
 </script>
 
-<Modal />
 <Drawer>
 	<Composite composite={$drawerStore.meta} />
 </Drawer>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 676ed2f..6b58b9b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,34 +1,10 @@
 <script>
 	import Composite from '$lib/core/Composite.svelte';
-	import { dataStore } from '$lib/core/dataLoader';
-
-	$: console.log('Data Store contents:', $dataStore);
 
 	let composite = {
-		id: 'composite',
-		layout: {
-			areas: `
-				"top top"
-				"main main"
-				"footer footer";
-			`,
-			columns: '1fr 300px',
-			rows: 'auto 1fr auto'
-		},
-		children: [
-			{ id: 'appbar', component: 'AppBar', slot: 'top' },
-			{
-				id: 'me',
-				component: 'Messages',
-				slot: 'main',
-				map: { messages: 'data.queryMessages' }
-			},
-			{
-				id: 'terminal',
-				component: 'Terminal',
-				slot: 'footer'
-			}
-		]
+		id: 'google',
+		component: 'GoogleAuth',
+		services: ['setupLit']
 	};
 </script>
 
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
deleted file mode 100644
index d292cfb..0000000
--- a/src/routes/login/+page.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script>
-	import Composite from '$lib/core/Composite.svelte';
-
-	let composite = {
-		id: 'login',
-		children: [
-			{
-				id: 'google',
-				component: 'GoogleAuth',
-				slot: 'main',
-				services: ['setupLit']
-			}
-		]
-	};
-</script>
-
-<Composite {composite} />
diff --git a/src/routes/messages/+page.svelte b/src/routes/messages/+page.svelte
new file mode 100644
index 0000000..676ed2f
--- /dev/null
+++ b/src/routes/messages/+page.svelte
@@ -0,0 +1,35 @@
+<script>
+	import Composite from '$lib/core/Composite.svelte';
+	import { dataStore } from '$lib/core/dataLoader';
+
+	$: console.log('Data Store contents:', $dataStore);
+
+	let composite = {
+		id: 'composite',
+		layout: {
+			areas: `
+				"top top"
+				"main main"
+				"footer footer";
+			`,
+			columns: '1fr 300px',
+			rows: 'auto 1fr auto'
+		},
+		children: [
+			{ id: 'appbar', component: 'AppBar', slot: 'top' },
+			{
+				id: 'me',
+				component: 'Messages',
+				slot: 'main',
+				map: { messages: 'data.queryMessages' }
+			},
+			{
+				id: 'terminal',
+				component: 'Terminal',
+				slot: 'footer'
+			}
+		]
+	};
+</script>
+
+<Composite {composite} />