diff --git a/src/lib/components/ChatLayout.svelte b/src/lib/components/ChatLayout.svelte
new file mode 100644
index 0000000..304991d
--- /dev/null
+++ b/src/lib/components/ChatLayout.svelte
@@ -0,0 +1,54 @@
+<script>
+	import { ArrowTurnUpSolid } from "svelte-awesome-icons";
+
+
+	import { Button } from "./ui/button";
+	import { goto } from "$app/navigation";
+	import { base } from "$app/paths";
+	import { toggleMode } from "mode-watcher";
+	import { Home, QuestionMark, Sun, Moon } from "radix-icons-svelte";
+	import LoginButton from "./LoginButton.svelte";
+	import { Input } from "./ui/input";
+
+</script>
+
+<div
+	class="grid grid-cols-12 grid-rows-12 w-full h-full dark:bg-gradient-to-r from-transparent to-blue-950"
+>
+	<div class="grid grid-cols-12 grid-rows-12 col-span-12 row-span-10">
+		<div
+			class="flex flex-col gap-2 py-2 bg-slate-400 dark:bg-zinc-800 row-span-12 col-span-1 place-items-center"
+		> <slot name="buttons" />
+
+			<Button on:click={()=>{goto(`${base}/`)}} variant="outline" size="icon" class="-scale-x-100 hover:skew-y-12"
+				><Home size={24} /></Button
+			>
+			<Button variant="outline" size="icon" class="hover:skew-y-12"
+				><QuestionMark size={24} /></Button
+			>
+
+			<Button on:click={toggleMode} variant="outline" size="icon">
+				<Sun
+					class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+				/>
+				<Moon
+					class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+				/>
+				<span class="sr-only">Toggle theme</span>
+			</Button>
+
+			<LoginButton />
+
+			<Button on:click={()=>{goto(`${base}/debug`)}}>D</Button>
+
+		</div>
+		<div
+			class="bg-white dark:bg-zinc-900 row-span-12 col-span-11 overflow-x-hidden overflow-y-scroll no-scrollbar"
+		>
+			<slot />
+		</div>
+	</div>
+	<div class="col-span-12 row-span-10 bg-sky-100 dark:bg-sky-950">
+		<Input placeholder="Start typing..." type="text" class=" bg-sky-100 dark:bg-sky-950" />
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/lib/components/Kind1.svelte b/src/lib/components/Kind1.svelte
index e844eab..5524269 100644
--- a/src/lib/components/Kind1.svelte
+++ b/src/lib/components/Kind1.svelte
@@ -21,4 +21,4 @@
         <a href="#" on:click={()=>{newParent.update(existing=>{existing.push(id); return existing})}} class="text-sm font-normal text-gray-500 dark:text-gray-400 float-right">{tree.children.size}<ArrowRight /></a>
      </div>
 </div>
-{/each}
+{/each}
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9c8088b..a695fab 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -12,52 +12,12 @@
 	import Moon from 'svelte-radix/Moon.svelte';
 	import Sun from 'svelte-radix/Sun.svelte';
 	import '../app.css';
+	import { page } from '$app/stores';
 
 	onMount(() => {
 		Init();
 	});
 </script>
-<ModeWatcher />
-
-<div
-	class="grid grid-cols-12 grid-rows-12 w-full h-full dark:bg-gradient-to-r from-transparent to-blue-950"
->
-	<div class="grid grid-cols-12 grid-rows-12 col-span-12 row-span-10">
-		<div
-			class="flex flex-col gap-2 py-2 bg-slate-400 dark:bg-zinc-800 row-span-12 col-span-1 place-items-center"
-		>
-			<Button variant="outline" size="icon" class="-scale-x-100 hover:skew-y-12"
-				><ArrowTurnUpSolid /></Button
-			>
-			<Button on:click={()=>{goto(`${base}/`)}} variant="outline" size="icon" class="-scale-x-100 hover:skew-y-12"
-				><Home size={24} /></Button
-			>
-			<Button variant="outline" size="icon" class="hover:skew-y-12"
-				><QuestionMark size={24} /></Button
-			>
-
-			<Button on:click={toggleMode} variant="outline" size="icon">
-				<Sun
-					class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
-				/>
-				<Moon
-					class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
-				/>
-				<span class="sr-only">Toggle theme</span>
-			</Button>
 
-			<LoginButton />
-
-			<Button on:click={()=>{goto(`${base}/debug`)}}>D</Button>
-
-		</div>
-		<div
-			class="bg-white dark:bg-zinc-900 row-span-12 col-span-11 overflow-x-hidden overflow-y-scroll no-scrollbar"
-		>
-			<slot />
-		</div>
-	</div>
-	<div class="col-span-12 row-span-10 bg-sky-100 dark:bg-sky-950">
-		<Input placeholder="Start typing..." type="text" class=" bg-sky-100 dark:bg-sky-950" />
-	</div>
-</div>
+<ModeWatcher />
+<slot />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 85b57de..35eec9f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,12 +1,17 @@
 <script lang="ts">
+	import ChatLayout from '@/components/ChatLayout.svelte';
 	import Kind1 from '@/components/Kind1.svelte';
+	import { Button } from '@/components/ui/button';
 	import { EventTreeItem, type RecursiveEventMap } from '@/workers/firehose.types';
 	import { responseFromWorker } from '@/workers/firehose_master';
 	import { onDestroy, onMount } from 'svelte';
+	import { ArrowTurnUpSolid } from 'svelte-awesome-icons';
 	import { derived, writable, type Writable } from 'svelte/store';
 	onMount(() => {});
 	onDestroy(() => {});
 
+
+
 	function find(m: RecursiveEventMap, id: string): EventTreeItem | undefined {
 		if (m.get(id)) {
 			return m.get(id)!;
@@ -19,25 +24,43 @@
 		}
 	}
 
-	let parentFromUsersHistory = writable([""])
-
 	//todo: if the last parentFromUsersHistory is included in the current threadParent's tags, go to that when user navigates UP. If not, go to the e-tag that 1) we have and 2) has the most replies.
 
 	let threadParentID = writable(["root"]);
 
-	let rThreadParent = derived([responseFromWorker, threadParentID], ([$rfw, $parentID]) => {
-		if ($parentID[$parentID.length-1] == 'root') {
+	function pop() {
+		threadParentID.update(existing=>{
+			existing.pop()
+			return existing
+		})
+	}
+
+	let rThreadParent = derived([responseFromWorker, threadParentID], ([$rfw, $threadParentID]) => {
+		if ($threadParentID[$threadParentID.length-1] == 'root') {
 			return $rfw.recursiveEvents;
 		} else {
-			return find($rfw.recursiveEvents.children, $parentID[$parentID.length-1]);
+			return find($rfw.recursiveEvents.children, $threadParentID[$threadParentID.length-1]);
 		}
 	});
 </script>
 
+<ChatLayout>
+	<div slot="buttons">
+		{#if $threadParentID[$threadParentID.length-1] != "root"}
+		<Button on:click={pop} variant="outline" size="icon" class="-scale-x-100 hover:skew-y-12"
+		><ArrowTurnUpSolid /></Button
+	>
+	{/if}
+	</div>
+	<slot>
+
 {#if $rThreadParent}
-	{$rThreadParent.children.size} <br />
-	<Kind1
-		treeItem={$rThreadParent || $responseFromWorker.recursiveEvents}
-		bind:newParent={threadParentID}
-	/>
+{$rThreadParent.children.size} <br />
+<Kind1
+	treeItem={$rThreadParent || $responseFromWorker.recursiveEvents}
+	bind:newParent={threadParentID}
+/>
 {/if}
+	</slot>
+</ChatLayout>
+
diff --git a/src/routes/debug/+page.svelte b/src/routes/debug/+page.svelte
index 6210611..4c484db 100644
--- a/src/routes/debug/+page.svelte
+++ b/src/routes/debug/+page.svelte
@@ -1,14 +1,20 @@
 <script lang="ts">
+	import ChatLayout from '@/components/ChatLayout.svelte';
 	import { Button } from '@/components/ui/button';
 	import { currentPubkey } from '@/stores/user';
 import { responseFromWorker } from '@/workers/firehose_master';
 
 
 </script>
-<Button on:click={()=>{console.log($responseFromWorker)}}>Print responseFromWorker to console</Button><br />
-Local Pubkey: {$currentPubkey}
-{#if responseFromWorker && $responseFromWorker}
-Master pubkey for WoT: {$responseFromWorker.masterPubkey} <br />
-Root events: {$responseFromWorker.rootEvents.size} <br />
-Total events: {$responseFromWorker.events.size}
-{/if}
+<ChatLayout>
+	<slot>
+		<Button on:click={()=>{console.log($responseFromWorker)}}>Print responseFromWorker to console</Button><br />
+		Local Pubkey: {$currentPubkey}
+		{#if responseFromWorker && $responseFromWorker}
+		Master pubkey for WoT: {$responseFromWorker.masterPubkey} <br />
+		Root events: {$responseFromWorker.rootEvents.size} <br />
+		Total events: {$responseFromWorker.events.size}
+		{/if}
+	</slot>
+</ChatLayout>
+