diff --git a/src/lib/OOBE/CustomizePFP.svelte b/src/lib/OOBE/CustomizePFP.svelte
index 15b571b3..280da9df 100644
--- a/src/lib/OOBE/CustomizePFP.svelte
+++ b/src/lib/OOBE/CustomizePFP.svelte
@@ -18,7 +18,8 @@
 </script>
 
 <div class="pfps">
-	<h1>Set your profile picture</h1>
+	<h1>Select a profile picture</h1>
+	<p>Select a profile picture to make yourself stand out.</p>
 	<div class="pfp-outer">
 		<div class="pfp-list">
 			{#if pfpOverflow && $user.pfp_data < 0}
diff --git a/src/lib/OOBE/CustomizeTheme.svelte b/src/lib/OOBE/CustomizeTheme.svelte
index f8154902..7d801b10 100644
--- a/src/lib/OOBE/CustomizeTheme.svelte
+++ b/src/lib/OOBE/CustomizeTheme.svelte
@@ -1,22 +1,31 @@
 <script>
 	import SwitchThemeModal from "../modals/settings/SwitchTheme.svelte";
 
-	import * as modals from "../modals.js";
-
-	modals.showModal(SwitchThemeModal);
+	import {user} from "../stores.js"
+	import * as clm from "../clmanager.js";
 </script>
 
 <div class="content">
-	<h1>Set your theme</h1>
-	<button on:click={() => modals.showModal(SwitchThemeModal)}
-		>Change Theme</button
-	>
-	<br /><br />
-	Click Next when done.
+	<h1>Personalization</h1>
+	<p>Personalize your layout and theme</p>
+	<SwitchThemeModal fromoobe={true} />
+	<p>Hit the gear icon below to select a layout</p>
+	<button
+		class="circle settings"
+		on:click={() =>
+			clm.updateProfile({
+				layout: $user.layout === "new" ? "old" : "new",
+			})}
+	/>
+	<p>You are currently using the "{$user.layout}" layout.</p>
 </div>
 
 <style>
 	.content {
 		text-align: center;
+		width: 60%;
+		left: 50%;
+        transform: translate(-50%,0);
+        position: relative;
 	}
 </style>
diff --git a/src/lib/OOBE/EasterEgg.svelte b/src/lib/OOBE/EasterEgg.svelte
new file mode 100644
index 00000000..8f8a6872
--- /dev/null
+++ b/src/lib/OOBE/EasterEgg.svelte
@@ -0,0 +1,26 @@
+<div class="content">
+	<h1>...</h1>
+    <br />
+    <p>I already told you multipile times you arent supposed to be here.</p>
+    <p>So congrats, you found another easter egg</p>
+    <p>This oobe was created mainly by bloctans.</p>
+    <p>because why not</p>
+    <p>Funny thing is that i added scrolling</p>
+    <p>Here lemme show you</p>
+    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+    <p>Isnt that nice?</p>
+    <p>Fun fact: the oobe uses a page like system controled by a main svelte file</p>
+    <br />
+    <p>Anyways ill end off with this unused line for the introduction page</p>
+    <p>(Theme and layout switching may cause photosensitive epilepsy, proceed at your own risk)</p>
+</div>
+
+<style>
+    .content {
+        text-align: center;
+        width: 80%;
+        left: 50%;
+        transform: translate(-50%,0);
+        position: relative;
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/OOBE/End.svelte b/src/lib/OOBE/End.svelte
new file mode 100644
index 00000000..a8e5a499
--- /dev/null
+++ b/src/lib/OOBE/End.svelte
@@ -0,0 +1,37 @@
+<script>
+    import {OOBERunning, OOBEPage} from "../stores.js";
+    import {goto} from "@roxi/routify";
+
+    let tosettings = true
+</script>
+
+<h1>Thats it for now.</h1>
+<p>You can customize more things via the settings</p>
+<p>To access settings, click on your pfp (Profile picture) icon in the bottom left.</p>
+<p>or, you can optionally go to the settings here</p>
+<div id="exitthingy">
+    <label for="SettingsONExit">Exit the OOBE to settings</label>
+    <input
+        type="checkbox"
+        id="SettingsONExit"
+        bind:checked={tosettings}
+    /> 
+</div>
+<br />
+<button
+    on:click={() => {
+        if (tosettings) {
+            $goto("/settings")
+        } else {
+            $goto("/home")
+        }
+        OOBERunning.set(false);
+    }}>Exit the OOBE</button
+>
+
+<style>
+    #exitthingy label {
+        bottom: 0.65em;
+        position: relative;
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/OOBE/Introduction.svelte b/src/lib/OOBE/Introduction.svelte
new file mode 100644
index 00000000..7f29959a
--- /dev/null
+++ b/src/lib/OOBE/Introduction.svelte
@@ -0,0 +1,21 @@
+<div class="content">
+	<h1>Introduction</h1>
+    <br />
+    <p>Welcome to Meower!</p>
+    <p>Now lets get you setup and ready to chat!</p>
+    <p>This is the OOBE, you might of seen something simillar if you have set up a windows computer (After XP)</p>
+    <p>If you want to skip the OOBE. You can press the skip button down below.</p>
+    <p>Hit the next button to continue</p>
+    <p>And if you ever wanna go back, hit the back button.</p>
+    <!--<p>(Theme and layout switching may cause photosensitive epilepsy, proceed at your own risk)</p>-->
+</div>
+
+<style>
+    .content {
+        text-align: center;
+        width: 80%;
+        left: 50%;
+        transform: translate(-50%,0);
+        position: relative;
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/OOBE/Main.svelte b/src/lib/OOBE/Main.svelte
index 27fccb71..5e888126 100644
--- a/src/lib/OOBE/Main.svelte
+++ b/src/lib/OOBE/Main.svelte
@@ -1,6 +1,10 @@
 <script>
 	import OOBECustomizePFP from "./CustomizePFP.svelte";
 	import OOBECustomizeTheme from "./CustomizeTheme.svelte";
+	import OOBEIntroduction from "./Introduction.svelte";
+	import OOBEEnd from "./End.svelte";
+	import OOBEEasterEgg from "./EasterEgg.svelte"
+	import OOBEQuote from "./Quote.svelte"
 
 	import {OOBERunning, OOBEPage} from "../stores.js";
 	import * as clm from "../clmanager.js";
@@ -8,7 +12,7 @@
 	import {onMount} from "svelte";
 
 	$: allowPrevious = $OOBEPage > 0;
-	$: allowNext = $OOBEPage < 2;
+	$: allowNext = $OOBEPage < 4;
 
 	onMount(() => {
 		clm.updateProfile({});
@@ -17,20 +21,21 @@
 </script>
 
 <div class="wrapper">
-	<div class="main">
-		<div class="setup">
+	<div class="pages">
+		<div class="inner">
 			<div class="fullcenter">
 				{#if $OOBEPage == 0}
-					<OOBECustomizePFP />
+					<OOBEIntroduction />
 				{:else if $OOBEPage == 1}
-					<OOBECustomizeTheme />
+					<OOBECustomizePFP />
 				{:else if $OOBEPage == 2}
-					<h1>That's it!</h1>
-					<button
-						on:click={() => {
-							OOBERunning.set(false);
-						}}>Let's go!</button
-					>
+					<OOBEQuote />
+				{:else if $OOBEPage == 3}
+					<OOBECustomizeTheme />
+				{:else if $OOBEPage == 4}
+					<OOBEEnd />
+				{:else if $OOBEPage == 8}
+					<OOBEEasterEgg />
 				{:else}
 					<p>You aren't supposed to be here.</p>
 					<p>Current Page: {$OOBEPage}</p>
@@ -40,7 +45,6 @@
 	</div>
 	<div class="footer">
 		<button
-			class="full"
 			disabled={!allowPrevious}
 			on:click={() => {
 				OOBEPage.set($OOBEPage - 1);
@@ -49,13 +53,11 @@
 			&lt;- Back
 		</button>
 		<button
-			class="center full"
 			on:click={() => {
 				OOBERunning.set(false);
 			}}>Skip</button
 		>
 		<button
-			class="right full"
 			disabled={!allowNext}
 			on:click={() => {
 				OOBEPage.set($OOBEPage + 1);
@@ -68,24 +70,41 @@
 
 <style>
 	.wrapper {
+		margin: 0;
 		width: 100%;
 		height: 100%;
+		display: flex;
+		flex-direction: column;
 	}
 
-	.main {
-		height: calc(100% - 3em);
-	}
-
-	.setup {
+	.pages {
 		text-align: center;
-		display: table;
+		flex-grow: 1;
+		flex-shrink: 1;
+		overflow: hidden;
 	}
 
 	.footer {
+		flex-grow: 0;
+		flex-shrink: 0;
+		padding-left: 1em;
+		padding-right: 1em;
 		height: 3em;
 		display: flex;
 		align-items: stretch;
 		justify-content: space-between;
+		background-color: var(--orange-dark);
+	}
+
+	.footer button {
+		height: 80%;
+		align-self: center;
+		border: 0;
+	}
+
+	.inner {
+		height: calc(100vh - 3em);
+		overflow: auto;
 	}
 
 	.fullcenter {
@@ -94,7 +113,7 @@
 		box-sizing: border-box;
 
 		margin: auto;
-		overflow: auto;
+		overflow: none;
 
 		display: table-cell;
 		vertical-align: middle;
diff --git a/src/lib/OOBE/Quote.svelte b/src/lib/OOBE/Quote.svelte
new file mode 100644
index 00000000..2d34c5b6
--- /dev/null
+++ b/src/lib/OOBE/Quote.svelte
@@ -0,0 +1,32 @@
+<script>
+	import {user} from "../stores.js"
+	import * as clm from "../clmanager.js";
+	import {userRestrictions,isRestricted } from "../bitField.js";
+</script>
+
+<div class="content">
+	<h1>Quote</h1>
+	Give yourself a quote, these can be used as a "Bio"
+	<br />
+	<br />
+	<input
+		type="text"
+		id="quotething"
+		class="modal-input white"
+		placeholder="Write something..."
+		maxlength="360"
+		disabled={isRestricted(userRestrictions.EDITING_QUOTE)}
+		bind:value={$user.quote}
+		on:change={() => clm.updateProfile({quote: $user.quote})}
+	/>
+</div>
+
+<style>
+	.content {
+		text-align: center;
+		width: 60%;
+		left: 50%;
+        transform: translate(-50%,0);
+        position: relative;
+	}
+</style>
diff --git a/src/lib/Sidebar.svelte b/src/lib/Sidebar.svelte
index 1249286f..d5d8bf6f 100644
--- a/src/lib/Sidebar.svelte
+++ b/src/lib/Sidebar.svelte
@@ -242,10 +242,14 @@
 		width: 100%;
 		z-index: 10;
 		position: absolute;
-		background-color: var(--background);
+		background-color: #000000;
 		opacity: 0.33;
 	}
 
+	:global(main.layout-old) .locked {
+		width: 110%;
+	}
+
 	.logo {
 		display: none;
 		flex-grow: 1;
diff --git a/src/lib/modals/settings/SwitchTheme.svelte b/src/lib/modals/settings/SwitchTheme.svelte
index e469f724..370af763 100644
--- a/src/lib/modals/settings/SwitchTheme.svelte
+++ b/src/lib/modals/settings/SwitchTheme.svelte
@@ -3,11 +3,13 @@
 
 	import CustomThemeModal from "./CustomTheme.svelte";
 
-	import {user} from "../../stores.js";
+	import {user, OOBERunning} from "../../stores.js";
 	import {removeTheme} from "../../CustomTheme.js";
 	import * as modals from "../../modals.js";
 	import * as clm from "../../clmanager.js";
 
+	export let fromoobe = false;
+
 	import defaultPreview from "../../../assets/themePreviews/OrangeLight.png";
 
 	const themePreviews = import.meta.glob(
@@ -84,66 +86,114 @@
 			themePreviews[
 				"../../../assets/themePreviews/" + themeName + ".png"
 			] || defaultPreview;
+
+		if ($OOBERunning) {
+			removeTheme();
+			const _user = $user;
+			_user.theme = theme;
+			_user.mode = !darkMode;
+			user.set(_user);
+			clm.updateProfile({theme: theme, mode: !darkMode});
+		}
 	}
 </script>
 
-<Modal on:close={modals.closeLastModal}>
-	<h2 slot="header">Select a Theme</h2>
-	<div slot="default">
-		<div class="theme-select">
-			<button
-				on:click={() => {
-					selection -= 1;
-					changeTheme();
-				}}>{"<"}</button
-			>
-			<div class="theme-middle">
-				{#if theme === "custom"}
-					<div class="theme-name">Custom Theme</div>
-					<button on:click={() => modals.showModal(CustomThemeModal)}
-						>Edit theme</button
-					>
-				{:else}
-					<div class="theme-name">
-						{themeCaps + " (" + darkModeStr + ")"}
-					</div>
-					<img
-						src={currentPreviewImage}
-						class="theme-preview"
-						alt={themeName}
-					/>
-				{/if}
+{#if !fromoobe}
+	<Modal on:close={modals.closeLastModal}>
+		<h2 slot="header">Select a Theme</h2>
+		<div slot="default">
+			<div class="theme-select">
+				<button
+					on:click={() => {
+						selection -= 1;
+						changeTheme();
+					}}>{"<"}</button
+				>
+				<div class="theme-middle">
+					{#if theme === "custom"}
+						<div class="theme-name">Custom Theme</div>
+						<button on:click={() => modals.showModal(CustomThemeModal)}
+							>Edit theme</button
+						>
+					{:else}
+						<div class="theme-name">
+							{themeCaps + " (" + darkModeStr + ")"}
+						</div>
+						<img
+							src={currentPreviewImage}
+							class="theme-preview"
+							alt={themeName}
+						/>
+					{/if}
+				</div>
+				<button
+					on:click={() => {
+						selection += 1;
+						changeTheme();
+					}}>{">"}</button
+				>
+			</div>
+			{#if error}
+				<p class="theme-invalid">
+					Your previous theme was invalid, so it was reset to orange.
+				</p>
+			{/if}
+			<p class="layout-text">(Change the layout in the settings.)</p>
+			<div class="modal-buttons">
+				<button on:click={modals.closeLastModal}>Close</button>
+				<button
+					disabled={theme === "custom"}
+					on:click={() => {
+						removeTheme();
+						const _user = $user;
+						_user.theme = theme;
+						_user.mode = !darkMode;
+						user.set(_user);
+						clm.updateProfile({theme: theme, mode: !darkMode});
+						modals.closeLastModal();
+					}}>Save</button
+				>
 			</div>
-			<button
-				on:click={() => {
-					selection += 1;
-					changeTheme();
-				}}>{">"}</button
-			>
 		</div>
-		{#if error}
-			<p class="theme-invalid">
-				Your previous theme was invalid, so it was reset to orange.
-			</p>
-		{/if}
-		<p class="layout-text">(Change the layout in the settings.)</p>
-		<div class="modal-buttons">
-			<button on:click={modals.closeLastModal}>Close</button>
-			<button
-				disabled={theme === "custom"}
-				on:click={() => {
-					removeTheme();
-					const _user = $user;
-					_user.theme = theme;
-					_user.mode = !darkMode;
-					user.set(_user);
-					clm.updateProfile({theme: theme, mode: !darkMode});
-					modals.closeLastModal();
-				}}>Save</button
-			>
+	</Modal>
+{:else}
+	<div class="theme-select">
+		<button
+			on:click={() => {
+				selection -= 1;
+				changeTheme();
+			}}>{"<"}</button
+		>
+		<div class="theme-middle">
+			{#if theme === "custom"}
+				<div class="theme-name">Custom Theme</div>
+				<button on:click={() => modals.showModal(CustomThemeModal)}
+					>Edit theme</button
+				>
+			{:else}
+				<div class="theme-name">
+					{themeCaps + " (" + darkModeStr + ")"}
+				</div>
+				<img
+					src={currentPreviewImage}
+					class="theme-preview"
+					alt={themeName}
+				/>
+			{/if}
 		</div>
+		<button
+			on:click={() => {
+				selection += 1;
+				changeTheme();
+			}}>{">"}</button
+		>
 	</div>
-</Modal>
+	{#if error}
+		<p class="theme-invalid">
+			Your previous theme was invalid, so it was reset to orange.
+		</p>
+	{/if}
+{/if}
 
 <style>
 	.theme-select {
diff --git a/src/lib/settings/Personalization.svelte b/src/lib/settings/Personalization.svelte
index d327ce8f..da6f4a96 100644
--- a/src/lib/settings/Personalization.svelte
+++ b/src/lib/settings/Personalization.svelte
@@ -26,7 +26,7 @@
 	</div>
 
 	<h2>Layout</h2>
-	The layout is currently set to {$user.layout}.
+	You are currently using the "{$user.layout}" layout
 </Container>
 <Container>
 	<div class="settings-controls">
diff --git a/src/pages/_layout.svelte b/src/pages/_layout.svelte
index 13961994..7791378b 100644
--- a/src/pages/_layout.svelte
+++ b/src/pages/_layout.svelte
@@ -96,18 +96,15 @@
 			<div class="sidebar">
 				<Sidebar />
 			</div>
-			<div class="view">
-				<!-- banner (maybe for future use)
-				<div class="banner">
-					<span>This is a banner!</span>
-				</div>
-				-->
-				{#if $OOBERunning}
+			{#if $OOBERunning}
+				<div class="viewnopad">
 					<OOBE />
-				{:else if !remounting}
+				</div>
+			{:else if !remounting}
+				<div class="view">
 					<slot />
-				{/if}
-			</div>
+				</div>
+			{/if}
 		</div>
 	{/if}
 
@@ -256,6 +253,20 @@
 		--view-height: calc(100vh - 0.66em);
 
 		background-color: var(--background);
+		transition: 0.25s;
+	}
+
+	.viewnopad {
+		flex-grow: 1;
+		flex-shrink: 1;
+
+		box-sizing: border-box;
+		overflow: auto;
+
+		--view-height: calc(100vh - 0.66em);
+
+		background-color: var(--background);
+		transition: 0.25s;
 	}
 
 	.banner {