diff --git a/web/src/app.css b/web/src/app.css
index 22b5e1626..3dc40fc1d 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -347,3 +347,127 @@ body {
 	color: var(--foreground);
 	font-family: sans-serif;
 }
+
+article.timeline-item {
+	padding: 12px 16px;
+	font-family:
+		'Segoe UI',
+		Meiryo,
+		system-ui,
+		-apple-system,
+		BlinkMacSystemFont,
+		sans-serif;
+}
+
+article.timeline-item + article.timeline-item {
+	padding-top: 0;
+}
+
+blockquote {
+	margin: 0.5em 0;
+	border: var(--default-border);
+	border-radius: 5px;
+	overflow: hidden;
+}
+
+ul.clear {
+	list-style: none;
+	padding: 0;
+}
+
+button,
+input[type='button'],
+input[type='submit'] {
+	padding: 0.6rem 1.5rem;
+	border-radius: 9999px;
+	background-color: var(--accent);
+	color: var(--accent-foreground);
+	font-weight: bold;
+	cursor: pointer;
+}
+
+button:hover,
+input[type='button']:hover,
+input[type='submit']:hover {
+	opacity: 0.75;
+}
+
+.button-small {
+	padding: 0.5rem 1.25rem;
+}
+
+.button-outlined {
+	background: transparent;
+	border: 1px solid var(--accent-gray);
+	color: var(--accent-gray);
+}
+
+.button-outlined:hover {
+	opacity: 1;
+	background: var(--accent-surface-high);
+}
+
+button:disabled {
+	opacity: 0.5 !important;
+}
+
+input[type='text'],
+input[type='email'],
+input[type='number'],
+input[type='password'],
+input[type='search'],
+input[type='tel'],
+input[type='url'],
+textarea {
+	padding: 0.5rem 0.75rem;
+	border-radius: 0.5rem;
+	outline-style: none;
+	background-color: var(--surface);
+}
+
+input[type='text'],
+input[type='email'],
+input[type='number'],
+input[type='password'],
+input[type='search'],
+input[type='tel'],
+input[type='url'] {
+	border: var(--default-border);
+}
+
+button.clear {
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+	outline: none;
+	padding: 0;
+	width: inherit;
+	height: inherit;
+}
+
+.card {
+	background-color: var(--surface);
+	color: var(--surface-foreground);
+	padding: 1rem;
+	border-radius: 0.5rem;
+	border: var(--default-border);
+}
+
+a {
+	color: var(--accent-gray);
+}
+
+a[target='_blank'] {
+	color: var(--accent-gray);
+	text-decoration-line: underline;
+}
+
+a:hover {
+	color: var(--accent);
+}
+
+dialog {
+	position: fixed;
+	inset: 0;
+	margin: auto;
+}
diff --git a/web/src/lib/components/ModalDialog.svelte b/web/src/lib/components/ModalDialog.svelte
index e6686623a..96d2fdc33 100644
--- a/web/src/lib/components/ModalDialog.svelte
+++ b/web/src/lib/components/ModalDialog.svelte
@@ -28,6 +28,7 @@
 
 <dialog
 	bind:this={dialog}
+	class="card"
 	on:click={tryClose}
 	on:keyup|stopPropagation={console.debug}
 	on:close={onClose}
@@ -40,6 +41,10 @@
 <style>
 	dialog {
 		border: var(--default-border);
-		border-radius: 10px;
+		border-radius: var(--radius);
+	}
+
+	.dialog-content {
+		margin: 0.5rem;
 	}
 </style>
diff --git a/web/src/lib/i18n/locales/en.json b/web/src/lib/i18n/locales/en.json
index 9866c1694..b9ce5da0d 100644
--- a/web/src/lib/i18n/locales/en.json
+++ b/web/src/lib/i18n/locales/en.json
@@ -15,13 +15,13 @@
 		"recommended": "Recommended",
 		"key": "Login with key",
 		"create_account": "Create account",
+		"create": "Create",
 		"name": "name",
-		"try_demo": "Try demo",
-		"login": "Login"
+		"try_demo": "See timeline",
+		"login": "Login",
+		"hero-message": "Freedom is Here",
+		"hero-message-sub": "All you need is name. No e-mail address, no account suspension, open SNS. Play with Emoji Kitchen."
 	},
-	"post": "Post",
-	"follow": "Follow",
-	"following": "Following",
 	"editor": {
 		"post": "Post"
 	},
@@ -39,5 +39,10 @@
 			"label": "Analytics",
 			"description": "Used to control Google Analytics."
 		}
-	}
+	},
+	"post": "Post",
+	"follow": "Follow",
+	"following": "Following",
+	"cancel": "Cancel",
+	"or": "OR"
 }
diff --git a/web/src/lib/i18n/locales/ja.json b/web/src/lib/i18n/locales/ja.json
index b0881c09f..c1d63b4e5 100644
--- a/web/src/lib/i18n/locales/ja.json
+++ b/web/src/lib/i18n/locales/ja.json
@@ -15,13 +15,13 @@
 		"recommended": "推奨",
 		"key": "鍵でログイン",
 		"create_account": "アカウントを作成",
+		"create": "作成",
 		"name": "名前",
-		"try_demo": "デモを試す",
-		"login": "ログイン"
+		"try_demo": "タイムラインをのぞいてみる",
+		"login": "ログイン",
+		"hero-message": "すべての自由が、ここに。",
+		"hero-message-sub": "必要なのは名前だけ。メールアドレスも要らない、凍結もない、オープンなSNS。絵文字キッチンで遊ぼう。"
 	},
-	"post": "投稿",
-	"follow": "フォロー",
-	"following": "フォロー中",
 	"editor": {
 		"post": "ポストする"
 	},
@@ -39,5 +39,9 @@
 			"label": "アナリティクス",
 			"description": "Google Analytics に使用されます。"
 		}
-	}
+	},
+	"post": "投稿",
+	"follow": "フォロー",
+	"following": "フォロー中",
+	"or": "または"
 }
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/(app)/+layout.svelte
similarity index 62%
rename from web/src/routes/+layout.svelte
rename to web/src/routes/(app)/+layout.svelte
index f635217ee..ff47f03c8 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/(app)/+layout.svelte
@@ -2,12 +2,12 @@
 	import { WebStorage } from '$lib/WebStorage';
 	import Header from './Header.svelte';
 	import NoteDialog from './NoteDialog.svelte';
-	import { openNoteDialog } from '../stores/NoteDialog';
+	import { openNoteDialog } from '../../stores/NoteDialog';
 	import { onMount } from 'svelte';
-	import { debugMode } from '../stores/Preference';
+	import { debugMode } from '../../stores/Preference';
 	import ReloadDialog from './ReloadDialog.svelte';
 	import { _ } from 'svelte-i18n';
-	import '../app.css';
+	import '../../app.css';
 	import Gdpr from './parts/Gdpr.svelte';
 
 	let debugMessage = '';
@@ -162,130 +162,6 @@
 		background-color: white;
 	}
 
-	:global(article.timeline-item) {
-		padding: 12px 16px;
-		font-family:
-			'Segoe UI',
-			Meiryo,
-			system-ui,
-			-apple-system,
-			BlinkMacSystemFont,
-			sans-serif;
-	}
-
-	:global(article.timeline-item + article.timeline-item) {
-		padding-top: 0;
-	}
-
-	:global(blockquote) {
-		margin: 0.5em 0;
-		border: var(--default-border);
-		border-radius: 5px;
-		overflow: hidden;
-	}
-
-	:global(ul.clear) {
-		list-style: none;
-		padding: 0;
-	}
-
-	:global(button, input[type='button'], input[type='submit']) {
-		padding: 0.6rem 1.5rem;
-		border-radius: 9999px;
-		background-color: var(--accent);
-		color: var(--accent-foreground);
-		font-weight: bold;
-		cursor: pointer;
-	}
-
-	:global(button:hover, input[type='button']:hover, input[type='submit']:hover) {
-		opacity: 0.75;
-	}
-
-	:global(.button-small) {
-		padding: 0.5rem 1.25rem;
-	}
-
-	:global(.button-outlined) {
-		background: transparent;
-		border: 1px solid var(--accent-gray);
-		color: var(--accent-gray);
-	}
-
-	:global(.button-outlined:hover) {
-		opacity: 1;
-		background: var(--accent-surface-high);
-	}
-
-	:global(button:disabled) {
-		opacity: 0.5;
-	}
-
-	:global(
-			input[type='text'],
-			input[type='email'],
-			input[type='number'],
-			input[type='password'],
-			input[type='search'],
-			input[type='tel'],
-			input[type='url'],
-			textarea
-		) {
-		padding: 0.5rem 0.75rem;
-		border-radius: 0.5rem;
-		outline-style: none;
-		background-color: var(--surface);
-	}
-
-	:global(
-			input[type='text'],
-			input[type='email'],
-			input[type='number'],
-			input[type='password'],
-			input[type='search'],
-			input[type='tel'],
-			input[type='url']
-		) {
-		border: var(--default-border);
-	}
-
-	:global(button.clear) {
-		background-color: transparent;
-		border: none;
-		cursor: pointer;
-		outline: none;
-		padding: 0;
-		width: inherit;
-		height: inherit;
-	}
-
-	:global(.card) {
-		background-color: var(--surface);
-		color: var(--surface-foreground);
-		padding: 1rem;
-		border-radius: 0.5rem;
-		border: var(--default-border);
-	}
-
-	:global(a) {
-		color: var(--accent-gray);
-	}
-
-	:global(a[target='_blank']) {
-		color: var(--accent-gray);
-		text-decoration-line: underline;
-	}
-
-	:global(a):hover {
-		color: var(--accent);
-	}
-
-	:global(dialog) {
-		position: fixed;
-		inset: 0;
-		margin: auto;
-	}
-
 	@keyframes -global-rotation {
 		0% {
 			transform: rotate(0);
diff --git a/web/src/routes/Badges.svelte b/web/src/routes/(app)/Badges.svelte
similarity index 100%
rename from web/src/routes/Badges.svelte
rename to web/src/routes/(app)/Badges.svelte
diff --git a/web/src/routes/CreatedAt.svelte b/web/src/routes/(app)/CreatedAt.svelte
similarity index 100%
rename from web/src/routes/CreatedAt.svelte
rename to web/src/routes/(app)/CreatedAt.svelte
diff --git a/web/src/routes/Header.svelte b/web/src/routes/(app)/Header.svelte
similarity index 97%
rename from web/src/routes/Header.svelte
rename to web/src/routes/(app)/Header.svelte
index 4fa9b25ee..47882d6a2 100644
--- a/web/src/routes/Header.svelte
+++ b/web/src/routes/(app)/Header.svelte
@@ -9,8 +9,8 @@
 	import IconPencilPlus from '@tabler/icons-svelte/dist/svelte/icons/IconPencilPlus.svelte';
 	import { nip19 } from 'nostr-tools';
 	import { japaneseBotNpub, trendingPeopleBotNpub } from '$lib/Constants';
-	import { unreadEvents } from '../stores/Notifications';
-	import { pubkey, rom } from '../stores/Author';
+	import { unreadEvents } from '../../stores/Notifications';
+	import { pubkey, rom } from '../../stores/Author';
 	import { _ } from 'svelte-i18n';
 
 	let npub = trendingPeopleBotNpub;
diff --git a/web/src/routes/Loading.svelte b/web/src/routes/(app)/Loading.svelte
similarity index 100%
rename from web/src/routes/Loading.svelte
rename to web/src/routes/(app)/Loading.svelte
diff --git a/web/src/routes/(app)/Login.svelte b/web/src/routes/(app)/Login.svelte
new file mode 100644
index 000000000..af611a8ee
--- /dev/null
+++ b/web/src/routes/(app)/Login.svelte
@@ -0,0 +1,400 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { _ } from 'svelte-i18n';
+	import type { Nip07 } from 'nostr-typedef';
+	import { generatePrivateKey, getPublicKey, nip19 } from 'nostr-tools';
+	import { Login } from '$lib/Login';
+	import { loginType } from '../../stores/Author';
+	import { page } from '$app/stores';
+	import { afterNavigate, goto } from '$app/navigation';
+	import { authorProfile } from '../../stores/Author';
+	import { WebStorage } from '$lib/WebStorage';
+	import ModalDialog from '$lib/components/ModalDialog.svelte';
+
+	let nostr: Nip07.Nostr | undefined;
+	let key = '';
+	let name = '';
+
+	let showCreateAccountDialog = false;
+	let showLoginDialog = false;
+
+	const login = new Login();
+
+	async function loginWithNip07() {
+		await login.withNip07();
+		await gotoHome();
+	}
+
+	async function loginWithKey() {
+		if (key.startsWith('nsec')) {
+			await login.withNsec(key);
+		} else {
+			await login.withNpub(key);
+		}
+		await gotoHome();
+	}
+
+	async function loginWithDemo() {
+		await goto('/home');
+	}
+
+	function createAccount(): void {
+		showCreateAccountDialog = true;
+		const seckey = generatePrivateKey();
+		key = nip19.nsecEncode(seckey);
+		console.log('[pubkey]', getPublicKey(seckey));
+	}
+
+	async function register(): Promise<void> {
+		await login.withNsec(key);
+		await login.saveBasicInfo(name);
+		await gotoHome();
+	}
+
+	function showLogin(): void {
+		showLoginDialog = true;
+	}
+
+	onMount(async () => {
+		console.log('[login on mount]');
+
+		const storage = new WebStorage(localStorage);
+		const savedLogin = storage.get('login');
+		console.log('[login]', savedLogin);
+
+		if (savedLogin === null) {
+			const { waitNostr } = await import('nip07-awaiter');
+			waitNostr(10000).then((n) => (nostr = n));
+		}
+	});
+
+	async function gotoHome() {
+		console.log('[goto home]', $authorProfile);
+		if ($authorProfile === undefined) {
+			console.error('[login failed]');
+			return;
+		}
+
+		const url = '/home';
+		console.log(`Redirect to ${url}`);
+		await goto(url);
+	}
+
+	afterNavigate(async () => {
+		console.log('afterNavigate');
+		const queryNpub = $page.url.searchParams.get('login');
+
+		if (queryNpub === null || !queryNpub.startsWith('npub') || $loginType !== undefined) {
+			return;
+		}
+
+		key = queryNpub;
+		await login.withNpub(queryNpub);
+	});
+</script>
+
+<div class="login-wrapper">
+	<div class="login">
+		<img src="/nostter-logo.svg" alt="nostter" />
+		<div class="messages-and-actions">
+			<p class="hero-message">
+				{$_('login.hero-message')}<img src="https://www.gstatic.com/android/keyboard/emojikitchen/20201001/u1f431/u1f431_u1f383.png" alt="cute pumpkin cat emoji" />
+			</p>
+			<p class="hero-message-sub">
+				{$_('login.hero-message-sub')}
+			</p>
+
+			<div class="actions">
+				<section>
+					<button on:click={createAccount}>{$_('login.create_account')}</button>
+					<ModalDialog bind:open={showCreateAccountDialog}>
+						<div>
+							<h2>{$_('login.create_account')}</h2>
+							<article>
+								<form method="dialog" on:submit|preventDefault={register}>
+									<div>
+										<input
+											type="text"
+											name="name"
+											placeholder={$_('login.name')}
+											bind:value={name}
+										/>
+									</div>
+									<div class="hidden">
+										<input type="password" bind:value={key} readonly />
+									</div>
+									<div>
+										<input
+											type="submit"
+											value={$_('login.create')}
+											disabled={$loginType !== undefined}
+										/>
+									</div>
+								</form>
+							</article>
+						</div>
+					</ModalDialog>
+				</section>
+
+				<section>
+					<button on:click={loginWithDemo} disabled={$loginType !== undefined}>
+						{$_('login.try_demo')}
+					</button>
+				</section>
+
+				<div class="divider-with-message">
+					<div />
+					<p>{$_('or')}</p>
+					<div />
+				</div>
+
+				<section>
+					<button class="button-outlined" on:click={showLogin}>{$_('login.login')}</button
+					>
+					<ModalDialog bind:open={showLoginDialog}>
+						<article class="login-modal-content">
+							<section>
+								<p class="login-recommend">{$_('login.recommended')}</p>
+								{#if nostr === undefined}
+									<p>
+										Please install <a
+											href="https://github.com/nostr-protocol/nips/blob/master/07.md#implementation"
+											target="_blank"
+											rel="noopener noreferrer"
+										>
+											Browser Extension
+										</a>
+									</p>
+								{/if}
+								<div>
+									<button
+										on:click|once={loginWithNip07}
+										disabled={$loginType !== undefined || nostr === undefined}
+									>
+										{$_('login.browser_extension')}
+									</button>
+								</div>
+							</section>
+
+							<div class="divider-with-message">
+								<div />
+								<p>{$_('or')}</p>
+								<div />
+							</div>
+
+							<section>
+								<form method="dialog" on:submit|preventDefault|once={loginWithKey}>
+									<div>
+										<input
+											type="password"
+											bind:value={key}
+											placeholder="npub or nsec"
+											pattern="^(npub|nsec)1[a-z0-9]+$"
+											required
+											on:keyup|stopPropagation={() => console.debug()}
+										/>
+									</div>
+
+									<div>
+										<input
+											type="submit"
+											value={$_('login.key')}
+											disabled={$loginType !== undefined}
+										/>
+									</div>
+								</form>
+							</section>
+
+						</article>
+					</ModalDialog>
+				</section>
+			</div>
+		</div>
+	</div>
+</div>
+
+<footer>
+	<p>
+		© 2023 🐾 nostter, <a
+			href="/npub1s02jksmr6tgmcksf3hnmue7pyzlm0sxwarh7lk8tdeprw2hjg6ysp7fxtw"
+		>
+			@SnowCait
+		</a>
+	</p>
+</footer>
+
+<style>
+	h2 {
+		font-size: 2rem;
+	}
+
+	.login-wrapper {
+		position: fixed;
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		height: calc(100% - 46px);
+		align-items: center;
+		justify-content: center;
+		overflow-y: scroll;
+		margin-bottom: 46px;
+	}
+
+	footer {
+		position: fixed;
+		bottom: 0;
+		width: 100%;
+		border-top: var(--default-border);
+		padding: 0.75rem;
+		margin: 0 auto;
+		text-align: center;
+		font-size: 0.875rem;
+		font-weight: 600;
+		color: var(--accent);
+		background: var(--background);
+	}
+
+	.login {
+		display: flex;
+		justify-content: center;
+		max-width: 984px;
+		width: 100%;
+		gap: 3rem;
+		margin: 0 auto;
+		padding: 2rem;
+		position: absolute;
+	}
+
+	.login img {
+		width: 100%;
+		max-width: 360px;
+	}
+
+	.messages-and-actions {
+		display: flex;
+		flex-direction: column;
+		gap: 2.5rem;
+	}
+
+	.hero-message {
+		font-size: 4rem;
+		font-weight: 600;
+		line-height: 1.05;
+	}
+
+	.hero-message > img {
+    vertical-align: bottom;
+		width: 4.5rem;
+		height: 4.5rem;
+	}
+
+	.hero-message-sub {
+		font-size: 1.2rem;
+		color: var(--accent);
+		word-wrap: break-word;
+	}
+
+	.actions {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		max-width: 320px;
+	}
+
+	.divider-with-message {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		color: var(--accent-gray);
+	}
+
+	.divider-with-message > div {
+		width: 100%;
+		border-top: var(--default-border);
+	}
+
+	.divider-with-message > p {
+		white-space: nowrap;
+		text-align: center;
+	}
+
+	button {
+		width: 100%;
+	}
+
+	article {
+		margin-top: 1rem;
+	}
+
+	.login-modal-content section {
+		margin: 1rem 0;
+	}
+
+	.login-modal-content section > * {
+		margin: 0.5rem 0;
+	}
+
+	.login-recommend {
+		font-weight: 600;
+		color: var(--accent);
+	}
+
+	form {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	input[type='text'],
+	input[type='password'] {
+		min-width: 280px;
+	}
+
+	.hidden {
+		display: none;
+	}
+
+	@media screen and (max-width: 860px) {
+		:global(main) {
+			padding-bottom: 0;
+		}
+
+		.login {
+			flex-direction: column;
+			gap: 1.5rem;
+		}
+
+		.login img {
+			max-width: 220px;
+		}
+
+		.messages-and-actions {
+			gap: 1.5rem;
+		}
+	}
+
+	@media screen and (max-width: 600px) {
+		.hero-message {
+			font-size: 3rem;
+		}
+
+		.hero-message > img {
+			width: 3.5rem;
+			height: 3.5rem;
+		}
+
+		.hero-message-sub {
+			font-size: 1.1rem;
+		}
+
+		.actions {
+			max-width: 100%;
+		}
+	}
+
+	@media screen and (max-height: 576px) {
+		.login {
+			top: 0
+		}
+	}
+</style>
diff --git a/web/src/routes/Logout.svelte b/web/src/routes/(app)/Logout.svelte
similarity index 94%
rename from web/src/routes/Logout.svelte
rename to web/src/routes/(app)/Logout.svelte
index c47c53d19..5920b18cd 100644
--- a/web/src/routes/Logout.svelte
+++ b/web/src/routes/(app)/Logout.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { WebStorage } from '$lib/WebStorage';
-	import { loginType } from '../stores/Author';
+	import { loginType } from '../../stores/Author';
 
 	let saved = false;
 	let showNsec = false;
diff --git a/web/src/routes/Nip94.svelte b/web/src/routes/(app)/Nip94.svelte
similarity index 100%
rename from web/src/routes/Nip94.svelte
rename to web/src/routes/(app)/Nip94.svelte
diff --git a/web/src/routes/NoteDialog.svelte b/web/src/routes/(app)/NoteDialog.svelte
similarity index 95%
rename from web/src/routes/NoteDialog.svelte
rename to web/src/routes/(app)/NoteDialog.svelte
index e5912f8c7..3e2d33086 100644
--- a/web/src/routes/NoteDialog.svelte
+++ b/web/src/routes/(app)/NoteDialog.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { openNoteDialog } from '../stores/NoteDialog';
+	import { openNoteDialog } from '../../stores/NoteDialog';
 	import NoteEditor from './editor/NoteEditor.svelte';
 
 	let dialog: HTMLDialogElement;
diff --git a/web/src/routes/ReloadDialog.svelte b/web/src/routes/(app)/ReloadDialog.svelte
similarity index 88%
rename from web/src/routes/ReloadDialog.svelte
rename to web/src/routes/(app)/ReloadDialog.svelte
index a68380e7b..a3b388871 100644
--- a/web/src/routes/ReloadDialog.svelte
+++ b/web/src/routes/(app)/ReloadDialog.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { Relay } from 'nostr-tools';
-	import { pool } from '../stores/Pool';
-	import { readRelays } from '../stores/Author';
-	import { debugMode } from '../stores/Preference';
+	import { pool } from '../../stores/Pool';
+	import { readRelays } from '../../stores/Author';
+	import { debugMode } from '../../stores/Preference';
 	import ModalDialog from '$lib/components/ModalDialog.svelte';
 
 	let open = false;
diff --git a/web/src/routes/TimelineView.svelte b/web/src/routes/(app)/TimelineView.svelte
similarity index 98%
rename from web/src/routes/TimelineView.svelte
rename to web/src/routes/(app)/TimelineView.svelte
index 4af672477..38ac6efc7 100644
--- a/web/src/routes/TimelineView.svelte
+++ b/web/src/routes/(app)/TimelineView.svelte
@@ -4,7 +4,7 @@
 	import type { Item } from '$lib/Items';
 	import { channelIdStore } from '$lib/Channel';
 	import { findChannelId } from '$lib/EventHelper';
-	import { author, isMuteEvent } from '../stores/Author';
+	import { author, isMuteEvent } from '../../stores/Author';
 	import Loading from './Loading.svelte';
 	import EventComponent from './timeline/EventComponent.svelte';
 	import { nip19, type Event } from 'nostr-tools';
diff --git a/web/src/routes/ZapDialog.svelte b/web/src/routes/(app)/ZapDialog.svelte
similarity index 98%
rename from web/src/routes/ZapDialog.svelte
rename to web/src/routes/(app)/ZapDialog.svelte
index a5a15cd5e..d17ac4b90 100644
--- a/web/src/routes/ZapDialog.svelte
+++ b/web/src/routes/(app)/ZapDialog.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { nip57 } from 'nostr-tools';
 	import QRCode from 'qrcode';
-	import { writeRelays } from '../stores/Author';
+	import { writeRelays } from '../../stores/Author';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { WebStorage } from '$lib/WebStorage';
 	import { Signer } from '$lib/Signer';
diff --git a/web/src/routes/[naddr=naddr]/+page.svelte b/web/src/routes/(app)/[naddr=naddr]/+page.svelte
similarity index 97%
rename from web/src/routes/[naddr=naddr]/+page.svelte
rename to web/src/routes/(app)/[naddr=naddr]/+page.svelte
index 3abb5be4a..09021b952 100644
--- a/web/src/routes/[naddr=naddr]/+page.svelte
+++ b/web/src/routes/(app)/[naddr=naddr]/+page.svelte
@@ -3,7 +3,7 @@
 	import { error } from '@sveltejs/kit';
 	import { nip19, type Event } from 'nostr-tools';
 	import type { AddressPointer } from 'nostr-tools/lib/nip19';
-	import { pool } from '../../stores/Pool';
+	import { pool } from '../../../stores/Pool';
 	import { Api } from '$lib/Api';
 	import { defaultRelays } from '$lib/Constants';
 	import { onMount } from 'svelte';
diff --git a/web/src/routes/[npub=npub]/+page.svelte b/web/src/routes/(app)/[npub=npub]/+page.svelte
similarity index 98%
rename from web/src/routes/[npub=npub]/+page.svelte
rename to web/src/routes/(app)/[npub=npub]/+page.svelte
index 5c302b909..40f670576 100644
--- a/web/src/routes/[npub=npub]/+page.svelte
+++ b/web/src/routes/(app)/[npub=npub]/+page.svelte
@@ -7,9 +7,9 @@
 	import { metadataStore } from '$lib/cache/Events';
 	import { referencesReqEmit, rxNostr } from '$lib/timelines/MainTimeline';
 	import { normalizeNip05 } from '$lib/MetadataHelper';
-	import { pool } from '../../stores/Pool';
+	import { pool } from '../../../stores/Pool';
 	import TimelineView from '../TimelineView.svelte';
-	import { pubkey as authorPubkey, readRelays, rom } from '../../stores/Author';
+	import { pubkey as authorPubkey, readRelays, rom } from '../../../stores/Author';
 	import { afterNavigate } from '$app/navigation';
 	import FollowButton from '../action/FollowButton.svelte';
 	import { Api } from '$lib/Api';
@@ -24,7 +24,7 @@
 	import { minTimelineLength, reverseChronologicalItem, timelineBufferMs } from '$lib/Constants';
 	import IconTool from '@tabler/icons-svelte/dist/svelte/icons/IconTool.svelte';
 	import UserStatus from '../parts/UserStatus.svelte';
-	import NostrAddress from './NostrAddress.svelte';
+	import NostrAddress from '../[npub=npub]/NostrAddress.svelte';
 
 	let metadata: Metadata | undefined;
 	let user: MetadataContent | undefined;
diff --git a/web/src/routes/[npub=npub]/NostrAddress.svelte b/web/src/routes/(app)/[npub=npub]/NostrAddress.svelte
similarity index 100%
rename from web/src/routes/[npub=npub]/NostrAddress.svelte
rename to web/src/routes/(app)/[npub=npub]/NostrAddress.svelte
diff --git a/web/src/routes/[npub=npub]/bookmark/+page.svelte b/web/src/routes/(app)/[npub=npub]/bookmark/+page.svelte
similarity index 96%
rename from web/src/routes/[npub=npub]/bookmark/+page.svelte
rename to web/src/routes/(app)/[npub=npub]/bookmark/+page.svelte
index aa32bfccf..5e9bc8c13 100644
--- a/web/src/routes/[npub=npub]/bookmark/+page.svelte
+++ b/web/src/routes/(app)/[npub=npub]/bookmark/+page.svelte
@@ -2,8 +2,8 @@
 	import { Api } from '$lib/Api';
 	import { onMount } from 'svelte';
 	import type { Event as NostrEvent } from 'nostr-tools';
-	import { pool } from '../../../stores/Pool';
-	import { pubkey as authorPubkey, readRelays, rom, bookmarkEvent } from '../../../stores/Author';
+	import { pool } from '../../../../stores/Pool';
+	import { pubkey as authorPubkey, readRelays, rom, bookmarkEvent } from '../../../../stores/Author';
 	import { page } from '$app/stores';
 	import { User } from '$lib/User';
 	import { error } from '@sveltejs/kit';
diff --git a/web/src/routes/[npub=npub]/followees/+page.svelte b/web/src/routes/(app)/[npub=npub]/followees/+page.svelte
similarity index 89%
rename from web/src/routes/[npub=npub]/followees/+page.svelte
rename to web/src/routes/(app)/[npub=npub]/followees/+page.svelte
index 0dd961393..f7d21ed7d 100644
--- a/web/src/routes/[npub=npub]/followees/+page.svelte
+++ b/web/src/routes/(app)/[npub=npub]/followees/+page.svelte
@@ -4,13 +4,13 @@
 	import { page } from '$app/stores';
 	import { Api } from '$lib/Api';
 	import { User as UserDecoder } from '$lib/User';
-	import type { UserEvent } from '../../types';
-	import { pool } from '../../../stores/Pool';
-	import { readRelays, rom } from '../../../stores/Author';
+	import type { UserEvent } from '../../../types';
+	import { pool } from '../../../../stores/Pool';
+	import { readRelays, rom } from '../../../../stores/Author';
 	import { filterTags } from '$lib/EventHelper';
 	import TimelineView from '../../TimelineView.svelte';
 	import { Kind, type Filter } from 'nostr-tools';
-	import { lastNotesMap, saveLastNote } from '../../../stores/LastNotes';
+	import { lastNotesMap, saveLastNote } from '../../../../stores/LastNotes';
 	import { chunk } from '$lib/Array';
 	import { Metadata } from '$lib/Items';
 
diff --git a/web/src/routes/[npub=npub]/pins/+page.svelte b/web/src/routes/(app)/[npub=npub]/pins/+page.svelte
similarity index 96%
rename from web/src/routes/[npub=npub]/pins/+page.svelte
rename to web/src/routes/(app)/[npub=npub]/pins/+page.svelte
index 79fd279d0..0b5e7d85a 100644
--- a/web/src/routes/[npub=npub]/pins/+page.svelte
+++ b/web/src/routes/(app)/[npub=npub]/pins/+page.svelte
@@ -6,7 +6,7 @@
 	import { WebStorage } from '$lib/WebStorage';
 	import { EventItem } from '$lib/Items';
 	import { User as UserDecoder } from '$lib/User';
-	import { pubkey as authorPubkey, readRelays } from '../../../stores/Author';
+	import { pubkey as authorPubkey, readRelays } from '../../../../stores/Author';
 	import type { Event } from 'nostr-tools';
 	import { onDestroy } from 'svelte';
 	import { firstValueFrom, EmptyError } from 'rxjs';
diff --git a/web/src/routes/[npub=npub]/reactions/+page.svelte b/web/src/routes/(app)/[npub=npub]/reactions/+page.svelte
similarity index 94%
rename from web/src/routes/[npub=npub]/reactions/+page.svelte
rename to web/src/routes/(app)/[npub=npub]/reactions/+page.svelte
index 5202ea560..ee2e66b89 100644
--- a/web/src/routes/[npub=npub]/reactions/+page.svelte
+++ b/web/src/routes/(app)/[npub=npub]/reactions/+page.svelte
@@ -2,8 +2,8 @@
 	import TimelineView from '../../TimelineView.svelte';
 	import { afterNavigate } from '$app/navigation';
 	import { Api } from '$lib/Api';
-	import { pool } from '../../../stores/Pool';
-	import { readRelays } from '../../../stores/Author';
+	import { pool } from '../../../../stores/Pool';
+	import { readRelays } from '../../../../stores/Author';
 	import { page } from '$app/stores';
 	import { error } from '@sveltejs/kit';
 	import { User as UserDecoder } from '$lib/User';
diff --git a/web/src/routes/[npub=npub]/relays/+page.svelte b/web/src/routes/(app)/[npub=npub]/relays/+page.svelte
similarity index 97%
rename from web/src/routes/[npub=npub]/relays/+page.svelte
rename to web/src/routes/(app)/[npub=npub]/relays/+page.svelte
index 345840a9e..bece36e0e 100644
--- a/web/src/routes/[npub=npub]/relays/+page.svelte
+++ b/web/src/routes/(app)/[npub=npub]/relays/+page.svelte
@@ -4,12 +4,12 @@
 	import { page } from '$app/stores';
 	import { User as UserDecoder } from '$lib/User';
 	import { Api } from '$lib/Api';
-	import { pubkey as authorPubkey, readRelays, writeRelays } from '../../../stores/Author';
-	import { pool } from '../../../stores/Pool';
+	import { pubkey as authorPubkey, readRelays, writeRelays } from '../../../../stores/Author';
+	import { pool } from '../../../../stores/Pool';
 	import { Kind } from 'nostr-tools';
 	import Relay from './Relay.svelte';
 	import { filterRelayTags, parseRelayJson } from '$lib/EventHelper';
-	import type { User } from '../../types';
+	import type { User } from '../../../types';
 	import IconPencil from '@tabler/icons-svelte/dist/svelte/icons/IconPencil.svelte';
 	import IconDeviceFloppy from '@tabler/icons-svelte/dist/svelte/icons/IconDeviceFloppy.svelte';
 	import Loading from '../../Loading.svelte';
diff --git a/web/src/routes/[npub=npub]/relays/Relay.svelte b/web/src/routes/(app)/[npub=npub]/relays/Relay.svelte
similarity index 100%
rename from web/src/routes/[npub=npub]/relays/Relay.svelte
rename to web/src/routes/(app)/[npub=npub]/relays/Relay.svelte
diff --git a/web/src/routes/[npub=npub]/timeline/+page.svelte b/web/src/routes/(app)/[npub=npub]/timeline/+page.svelte
similarity index 100%
rename from web/src/routes/[npub=npub]/timeline/+page.svelte
rename to web/src/routes/(app)/[npub=npub]/timeline/+page.svelte
diff --git a/web/src/routes/[npub=npub]/timeline/UserFollowingTimeline.svelte b/web/src/routes/(app)/[npub=npub]/timeline/UserFollowingTimeline.svelte
similarity index 96%
rename from web/src/routes/[npub=npub]/timeline/UserFollowingTimeline.svelte
rename to web/src/routes/(app)/[npub=npub]/timeline/UserFollowingTimeline.svelte
index e93b6b31f..edd6cf090 100644
--- a/web/src/routes/[npub=npub]/timeline/UserFollowingTimeline.svelte
+++ b/web/src/routes/(app)/[npub=npub]/timeline/UserFollowingTimeline.svelte
@@ -8,8 +8,8 @@
 		pubkey as authorPubkey,
 		followees as authorFollowees,
 		readRelays
-	} from '../../../stores/Author';
-	import { userTimelineEvents as items } from '../../../stores/Events';
+	} from '../../../../stores/Author';
+	import { userTimelineEvents as items } from '../../../../stores/Events';
 	import { Kind, SimplePool, type Event, nip19 } from 'nostr-tools';
 	import { minTimelineLength, reverseChronologicalItem, timelineBufferMs } from '$lib/Constants';
 	import { rxNostr, referencesReqEmit } from '$lib/timelines/MainTimeline';
diff --git a/web/src/routes/[slug=note]/+page.svelte b/web/src/routes/(app)/[slug=note]/+page.svelte
similarity index 98%
rename from web/src/routes/[slug=note]/+page.svelte
rename to web/src/routes/(app)/[slug=note]/+page.svelte
index 153d88609..7bed6e0f9 100644
--- a/web/src/routes/[slug=note]/+page.svelte
+++ b/web/src/routes/(app)/[slug=note]/+page.svelte
@@ -5,8 +5,8 @@
 	import { rxNostr, referencesReqEmit } from '$lib/timelines/MainTimeline';
 	import { eventItemStore, metadataStore } from '$lib/cache/Events';
 	import type { PageData } from './$types';
-	import { author, readRelays } from '../../stores/Author';
-	import { pool } from '../../stores/Pool';
+	import { author, readRelays } from '../../../stores/Author';
+	import { pool } from '../../../stores/Pool';
 	import TimelineView from '../TimelineView.svelte';
 	import { Api } from '$lib/Api';
 	import { referTags } from '$lib/EventHelper';
diff --git a/web/src/routes/[slug=note]/+page.ts b/web/src/routes/(app)/[slug=note]/+page.ts
similarity index 100%
rename from web/src/routes/[slug=note]/+page.ts
rename to web/src/routes/(app)/[slug=note]/+page.ts
diff --git a/web/src/routes/[slug=note]/ProfileIcon.svelte b/web/src/routes/(app)/[slug=note]/ProfileIcon.svelte
similarity index 100%
rename from web/src/routes/[slug=note]/ProfileIcon.svelte
rename to web/src/routes/(app)/[slug=note]/ProfileIcon.svelte
diff --git a/web/src/routes/[slug=note]/ProfileIconList.svelte b/web/src/routes/(app)/[slug=note]/ProfileIconList.svelte
similarity index 100%
rename from web/src/routes/[slug=note]/ProfileIconList.svelte
rename to web/src/routes/(app)/[slug=note]/ProfileIconList.svelte
diff --git a/web/src/routes/action/FollowButton.svelte b/web/src/routes/(app)/action/FollowButton.svelte
similarity index 96%
rename from web/src/routes/action/FollowButton.svelte
rename to web/src/routes/(app)/action/FollowButton.svelte
index 10f82085d..a51fc62be 100644
--- a/web/src/routes/action/FollowButton.svelte
+++ b/web/src/routes/(app)/action/FollowButton.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Api } from '$lib/Api';
-	import { pool } from '../../stores/Pool';
-	import { followees, pubkey as authorPubkey, writeRelays } from '../../stores/Author';
+	import { pool } from '../../../stores/Pool';
+	import { followees, pubkey as authorPubkey, writeRelays } from '../../../stores/Author';
 	import { nip19 } from 'nostr-tools';
 	import { Contacts } from '$lib/Contacts';
 	import { _ } from 'svelte-i18n';
diff --git a/web/src/routes/action/MuteButton.svelte b/web/src/routes/(app)/action/MuteButton.svelte
similarity index 96%
rename from web/src/routes/action/MuteButton.svelte
rename to web/src/routes/(app)/action/MuteButton.svelte
index 17973295f..2baada5f6 100644
--- a/web/src/routes/action/MuteButton.svelte
+++ b/web/src/routes/(app)/action/MuteButton.svelte
@@ -2,14 +2,14 @@
 	import { nip19 } from 'nostr-tools';
 	import IconVolumeOff from '@tabler/icons-svelte/dist/svelte/icons/IconVolumeOff.svelte';
 	import IconTrash from '@tabler/icons-svelte/dist/svelte/icons/IconTrash.svelte';
-	import { pool } from '../../stores/Pool';
+	import { pool } from '../../../stores/Pool';
 	import {
 		pubkey as authorPubkey,
 		mutePubkeys,
 		muteEventIds,
 		muteWords,
 		writeRelays
-	} from '../../stores/Author';
+	} from '../../../stores/Author';
 	import { Mute } from '$lib/Mute';
 
 	export let tagName: 'p' | 'e' | 'word';
diff --git a/web/src/routes/channels/[nevent=note]/+page.svelte b/web/src/routes/(app)/channels/[nevent=note]/+page.svelte
similarity index 99%
rename from web/src/routes/channels/[nevent=note]/+page.svelte
rename to web/src/routes/(app)/channels/[nevent=note]/+page.svelte
index b1a4fcbd3..bf947cc52 100644
--- a/web/src/routes/channels/[nevent=note]/+page.svelte
+++ b/web/src/routes/(app)/channels/[nevent=note]/+page.svelte
@@ -19,7 +19,7 @@
 	import { timeout } from '$lib/Constants';
 	import type { ChannelMetadata } from '$lib/Types';
 	import { referencesReqEmit } from '$lib/timelines/MainTimeline';
-	import { author, readRelays } from '../../../stores/Author';
+	import { author, readRelays } from '../../../../stores/Author';
 	import Content from '../../content/Content.svelte';
 	import TimelineView from '../../TimelineView.svelte';
 	import { EventItem } from '$lib/Items';
diff --git a/web/src/routes/channels/[nevent=note]/PinChannel.svelte b/web/src/routes/(app)/channels/[nevent=note]/PinChannel.svelte
similarity index 98%
rename from web/src/routes/channels/[nevent=note]/PinChannel.svelte
rename to web/src/routes/(app)/channels/[nevent=note]/PinChannel.svelte
index f8835334a..006b0f93b 100644
--- a/web/src/routes/channels/[nevent=note]/PinChannel.svelte
+++ b/web/src/routes/(app)/channels/[nevent=note]/PinChannel.svelte
@@ -5,7 +5,7 @@
 	import type { Kind, EventTemplate } from 'nostr-tools';
 	import { Signer } from '$lib/Signer';
 	import { WebStorage } from '$lib/WebStorage';
-	import { pubkey, writeRelays } from '../../../stores/Author';
+	import { pubkey, writeRelays } from '../../../../stores/Author';
 	import IconPin from '@tabler/icons-svelte/dist/svelte/icons/IconPin.svelte';
 	import IconPinnedFilled from '@tabler/icons-svelte/dist/svelte/icons/IconPinnedFilled.svelte';
 
diff --git a/web/src/routes/content/Content.svelte b/web/src/routes/(app)/content/Content.svelte
similarity index 100%
rename from web/src/routes/content/Content.svelte
rename to web/src/routes/(app)/content/Content.svelte
diff --git a/web/src/routes/content/CustomEmoji.svelte b/web/src/routes/(app)/content/CustomEmoji.svelte
similarity index 100%
rename from web/src/routes/content/CustomEmoji.svelte
rename to web/src/routes/(app)/content/CustomEmoji.svelte
diff --git a/web/src/routes/content/Hashtag.svelte b/web/src/routes/(app)/content/Hashtag.svelte
similarity index 100%
rename from web/src/routes/content/Hashtag.svelte
rename to web/src/routes/(app)/content/Hashtag.svelte
diff --git a/web/src/routes/content/LongFormContent.svelte b/web/src/routes/(app)/content/LongFormContent.svelte
similarity index 96%
rename from web/src/routes/content/LongFormContent.svelte
rename to web/src/routes/(app)/content/LongFormContent.svelte
index 72f48dfa6..615b61bb8 100644
--- a/web/src/routes/content/LongFormContent.svelte
+++ b/web/src/routes/(app)/content/LongFormContent.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { nip19, type Event } from 'nostr-tools';
-	import { intentContent, openNoteDialog } from '../../stores/NoteDialog';
+	import { intentContent, openNoteDialog } from '../../../stores/NoteDialog';
 	import IconCodeDots from '@tabler/icons-svelte/dist/svelte/icons/IconCodeDots.svelte';
 	import IconQuote from '@tabler/icons-svelte/dist/svelte/icons/IconQuote.svelte';
 
diff --git a/web/src/routes/content/Naddr.svelte b/web/src/routes/(app)/content/Naddr.svelte
similarity index 96%
rename from web/src/routes/content/Naddr.svelte
rename to web/src/routes/(app)/content/Naddr.svelte
index ae782bb1a..b23c65816 100644
--- a/web/src/routes/content/Naddr.svelte
+++ b/web/src/routes/(app)/content/Naddr.svelte
@@ -4,7 +4,7 @@
 	import type { AddressPointer } from 'nostr-tools/lib/nip19';
 	import { Api } from '$lib/Api';
 	import { defaultRelays } from '$lib/Constants';
-	import { pool } from '../../stores/Pool';
+	import { pool } from '../../../stores/Pool';
 	import LongFormContent from './LongFormContent.svelte';
 
 	export let naddr: string;
diff --git a/web/src/routes/content/Reference.svelte b/web/src/routes/(app)/content/Reference.svelte
similarity index 87%
rename from web/src/routes/content/Reference.svelte
rename to web/src/routes/(app)/content/Reference.svelte
index c0a7dfa79..e6053055d 100644
--- a/web/src/routes/content/Reference.svelte
+++ b/web/src/routes/(app)/content/Reference.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
 	import { nip19 } from 'nostr-tools';
 	import type { EventItem } from '$lib/Items';
-	import { events } from '../../stores/Events';
-	import { userEvents } from '../../stores/UserEvents';
+	import { events } from '../../../stores/Events';
+	import { userEvents } from '../../../stores/UserEvents';
 	import Note from '../timeline/Note.svelte';
 	import Hashtag from './Hashtag.svelte';
 	import Text from './Text.svelte';
 	import { onMount } from 'svelte';
 	import { Api } from '$lib/Api';
-	import { pool } from '../../stores/Pool';
-	import { readRelays } from '../../stores/Author';
+	import { pool } from '../../../stores/Pool';
+	import { readRelays } from '../../../stores/Author';
 	import Url from './Url.svelte';
 
 	export let text: string;
diff --git a/web/src/routes/content/ReferenceNip27.svelte b/web/src/routes/(app)/content/ReferenceNip27.svelte
similarity index 93%
rename from web/src/routes/content/ReferenceNip27.svelte
rename to web/src/routes/(app)/content/ReferenceNip27.svelte
index f106212da..c9eb486e1 100644
--- a/web/src/routes/content/ReferenceNip27.svelte
+++ b/web/src/routes/(app)/content/ReferenceNip27.svelte
@@ -2,10 +2,10 @@
 	import { Api } from '$lib/Api';
 	import { nip19 } from 'nostr-tools';
 	import { onMount } from 'svelte';
-	import { events } from '../../stores/Events';
-	import type { Event } from '../types';
-	import { pool } from '../../stores/Pool';
-	import { readRelays } from '../../stores/Author';
+	import { events } from '../../../stores/Events';
+	import type { Event } from '../../types';
+	import { pool } from '../../../stores/Pool';
+	import { readRelays } from '../../../stores/Author';
 	import Text from './Text.svelte';
 	import Nip94 from '../Nip94.svelte';
 	import Naddr from './Naddr.svelte';
diff --git a/web/src/routes/content/Text.svelte b/web/src/routes/(app)/content/Text.svelte
similarity index 100%
rename from web/src/routes/content/Text.svelte
rename to web/src/routes/(app)/content/Text.svelte
diff --git a/web/src/routes/content/Url.svelte b/web/src/routes/(app)/content/Url.svelte
similarity index 100%
rename from web/src/routes/content/Url.svelte
rename to web/src/routes/(app)/content/Url.svelte
diff --git a/web/src/routes/editor/ContentWarning.svelte b/web/src/routes/(app)/editor/ContentWarning.svelte
similarity index 100%
rename from web/src/routes/editor/ContentWarning.svelte
rename to web/src/routes/(app)/editor/ContentWarning.svelte
diff --git a/web/src/routes/editor/EmojiPickerSlide.svelte b/web/src/routes/(app)/editor/EmojiPickerSlide.svelte
similarity index 92%
rename from web/src/routes/editor/EmojiPickerSlide.svelte
rename to web/src/routes/(app)/editor/EmojiPickerSlide.svelte
index 5fd0a2d4d..2ea88c801 100644
--- a/web/src/routes/editor/EmojiPickerSlide.svelte
+++ b/web/src/routes/(app)/editor/EmojiPickerSlide.svelte
@@ -4,10 +4,10 @@
 	import type { BaseEmoji } from '@types/emoji-mart';
 	import data from '@emoji-mart/data';
 	import { browser } from '$app/environment';
-	import { customEmojiTags } from '../../stores/CustomEmojis';
+	import { customEmojiTags } from '../../../stores/CustomEmojis';
 	import IconMoodSmile from '@tabler/icons-svelte/dist/svelte/icons/IconMoodSmile.svelte';
 
-	let emojiPicker: HTMLElement | undefined;
+	let emojiPicker: HTMLElement | null = null;
 	let hidden = true;
 
 	const dispatch = createEventDispatcher();
@@ -19,7 +19,7 @@
 	}
 
 	function updatePicker() {
-		if (emojiPicker === undefined) {
+		if (emojiPicker === null) {
 			return;
 		}
 
diff --git a/web/src/routes/editor/MediaPicker.svelte b/web/src/routes/(app)/editor/MediaPicker.svelte
similarity index 100%
rename from web/src/routes/editor/MediaPicker.svelte
rename to web/src/routes/(app)/editor/MediaPicker.svelte
diff --git a/web/src/routes/editor/NoteEditor.svelte b/web/src/routes/(app)/editor/NoteEditor.svelte
similarity index 98%
rename from web/src/routes/editor/NoteEditor.svelte
rename to web/src/routes/(app)/editor/NoteEditor.svelte
index ecae670ca..592972d23 100644
--- a/web/src/routes/editor/NoteEditor.svelte
+++ b/web/src/routes/(app)/editor/NoteEditor.svelte
@@ -10,9 +10,9 @@
 	import { cachedEvents, channelMetadataEvents, metadataStore } from '$lib/cache/Events';
 	import { EventItem, Metadata } from '$lib/Items';
 	import { NostrcheckMe } from '$lib/media/NostrcheckMe';
-	import { openNoteDialog, replyTo, quotes, intentContent } from '../../stores/NoteDialog';
-	import { rom } from '../../stores/Author';
-	import { customEmojiTags } from '../../stores/CustomEmojis';
+	import { openNoteDialog, replyTo, quotes, intentContent } from '../../../stores/NoteDialog';
+	import { rom } from '../../../stores/Author';
+	import { customEmojiTags } from '../../../stores/CustomEmojis';
 	import Note from '../timeline/Note.svelte';
 	import ChannelTitle from '../parts/ChannelTitle.svelte';
 	import MediaPicker from './MediaPicker.svelte';
diff --git a/web/src/routes/home/+page.svelte b/web/src/routes/(app)/home/+page.svelte
similarity index 94%
rename from web/src/routes/home/+page.svelte
rename to web/src/routes/(app)/home/+page.svelte
index f9ad55e46..132a840b1 100644
--- a/web/src/routes/home/+page.svelte
+++ b/web/src/routes/(app)/home/+page.svelte
@@ -6,7 +6,7 @@
 	import { nip19 } from 'nostr-tools';
 	import { tick } from 'svelte';
 	import { writable, type Writable } from 'svelte/store';
-	import { pubkey as authorPubkey, followees } from '../../stores/Author';
+	import { pubkey as authorPubkey, followees } from '../../../stores/Author';
 
 	let pubkey: string;
 	$: pubkey = nip19.decode(japaneseBotNpub).data as string;
diff --git a/web/src/routes/home/FollowingTimeline.svelte b/web/src/routes/(app)/home/FollowingTimeline.svelte
similarity index 96%
rename from web/src/routes/home/FollowingTimeline.svelte
rename to web/src/routes/(app)/home/FollowingTimeline.svelte
index 222f59248..2a8964577 100644
--- a/web/src/routes/home/FollowingTimeline.svelte
+++ b/web/src/routes/(app)/home/FollowingTimeline.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import type { Event } from '../types';
+	import type { Event } from '../../types';
 	import TimelineView from '../TimelineView.svelte';
-	import { events, eventsPool } from '../../stores/Events';
-	import { saveMetadataEvent } from '../../stores/UserEvents';
-	import { pool } from '../../stores/Pool';
+	import { events, eventsPool } from '../../../stores/Events';
+	import { saveMetadataEvent } from '../../../stores/UserEvents';
+	import { pool } from '../../../stores/Pool';
 	import {
 		pubkey,
 		author,
@@ -15,11 +15,11 @@
 		rom,
 		bookmarkEvent,
 		writeRelays
-	} from '../../stores/Author';
+	} from '../../../stores/Author';
 	import { goto } from '$app/navigation';
 	import { Api } from '$lib/Api';
 	import { Kind, type Filter, type Event as NostrEvent, type Relay } from 'nostr-tools';
-	import { saveLastNote } from '../../stores/LastNotes';
+	import { saveLastNote } from '../../../stores/LastNotes';
 	import { Signer } from '$lib/Signer';
 	import {
 		filterLimitItems,
@@ -34,14 +34,14 @@
 		loadingNotifications,
 		notifiedEvents,
 		unreadEvents
-	} from '../../stores/Notifications';
+	} from '../../../stores/Notifications';
 	import { EventItem } from '$lib/Items';
 	import { NotificationTimeline } from '$lib/NotificationTimeline';
 	import { Mute } from '$lib/Mute';
-	import { autoRefresh } from '../../stores/Preference';
+	import { autoRefresh } from '../../../stores/Preference';
 	import { batch, createRxForwardReq, createRxOneshotReq, latestEach, uniq } from 'rx-nostr';
 	import { tap, bufferTime } from 'rxjs';
-	import { userStatusesGeneral, userStatusesMusic } from '../../stores/UserStatuses';
+	import { userStatusesGeneral, userStatusesMusic } from '../../../stores/UserStatuses';
 	import { referencesReqEmit, rxNostr } from '$lib/timelines/MainTimeline';
 	import { WebStorage } from '$lib/WebStorage';
 	import { findIdentifier } from '$lib/EventHelper';
diff --git a/web/src/routes/notifications/+page.svelte b/web/src/routes/(app)/notifications/+page.svelte
similarity index 91%
rename from web/src/routes/notifications/+page.svelte
rename to web/src/routes/(app)/notifications/+page.svelte
index 1b2492b0a..39e332add 100644
--- a/web/src/routes/notifications/+page.svelte
+++ b/web/src/routes/(app)/notifications/+page.svelte
@@ -4,9 +4,9 @@
 	import { NotificationTimeline } from '$lib/NotificationTimeline';
 	import { minTimelineLength } from '$lib/Constants';
 	import { Api } from '$lib/Api';
-	import { notifiedEvents, unreadEvents, loadingNotifications } from '../../stores/Notifications';
-	import { pubkey, writeRelays } from '../../stores/Author';
-	import { pool } from '../../stores/Pool';
+	import { notifiedEvents, unreadEvents, loadingNotifications } from '../../../stores/Notifications';
+	import { pubkey, writeRelays } from '../../../stores/Author';
+	import { pool } from '../../../stores/Pool';
 	import TimelineView from '../TimelineView.svelte';
 
 	afterNavigate(() => {
diff --git a/web/src/routes/parts/ChannelTitle.svelte b/web/src/routes/(app)/parts/ChannelTitle.svelte
similarity index 100%
rename from web/src/routes/parts/ChannelTitle.svelte
rename to web/src/routes/(app)/parts/ChannelTitle.svelte
diff --git a/web/src/routes/parts/CopyButton.svelte b/web/src/routes/(app)/parts/CopyButton.svelte
similarity index 100%
rename from web/src/routes/parts/CopyButton.svelte
rename to web/src/routes/(app)/parts/CopyButton.svelte
diff --git a/web/src/routes/parts/EmojiPicker.svelte b/web/src/routes/(app)/parts/EmojiPicker.svelte
similarity index 97%
rename from web/src/routes/parts/EmojiPicker.svelte
rename to web/src/routes/(app)/parts/EmojiPicker.svelte
index 3bd821ec1..04d4e9685 100644
--- a/web/src/routes/parts/EmojiPicker.svelte
+++ b/web/src/routes/(app)/parts/EmojiPicker.svelte
@@ -5,7 +5,7 @@
 	import data from '@emoji-mart/data';
 	import { computePosition, flip, shift } from '@floating-ui/dom';
 	import IconMoodSmile from '@tabler/icons-svelte/dist/svelte/icons/IconMoodSmile.svelte';
-	import { customEmojiTags } from '../../stores/CustomEmojis';
+	import { customEmojiTags } from '../../../stores/CustomEmojis';
 
 	let button: HTMLButtonElement;
 	let emojiPicker: HTMLElement;
diff --git a/web/src/routes/parts/Gdpr.svelte b/web/src/routes/(app)/parts/Gdpr.svelte
similarity index 100%
rename from web/src/routes/parts/Gdpr.svelte
rename to web/src/routes/(app)/parts/Gdpr.svelte
diff --git a/web/src/routes/parts/ProxyLink.svelte b/web/src/routes/(app)/parts/ProxyLink.svelte
similarity index 100%
rename from web/src/routes/parts/ProxyLink.svelte
rename to web/src/routes/(app)/parts/ProxyLink.svelte
diff --git a/web/src/routes/parts/UserStatus.svelte b/web/src/routes/(app)/parts/UserStatus.svelte
similarity index 94%
rename from web/src/routes/parts/UserStatus.svelte
rename to web/src/routes/(app)/parts/UserStatus.svelte
index 2d8e4307d..3e2ef71b6 100644
--- a/web/src/routes/parts/UserStatus.svelte
+++ b/web/src/routes/(app)/parts/UserStatus.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { Event } from 'nostr-tools';
 	import { chronological } from '$lib/Constants';
-	import { userStatusesGeneral, userStatusesMusic } from '../../stores/UserStatuses';
-	import { pubkey as authorPubkey } from '../../stores/Author';
+	import { userStatusesGeneral, userStatusesMusic } from '../../../stores/UserStatuses';
+	import { pubkey as authorPubkey } from '../../../stores/Author';
 	import IconUser from '@tabler/icons-svelte/dist/svelte/icons/IconUser.svelte';
 	import IconMusic from '@tabler/icons-svelte/dist/svelte/icons/IconMusic.svelte';
 	import IconLink from '@tabler/icons-svelte/dist/svelte/icons/IconLink.svelte';
diff --git a/web/src/routes/post/+page.svelte b/web/src/routes/(app)/post/+page.svelte
similarity index 81%
rename from web/src/routes/post/+page.svelte
rename to web/src/routes/(app)/post/+page.svelte
index 705c9c1d7..590942f96 100644
--- a/web/src/routes/post/+page.svelte
+++ b/web/src/routes/(app)/post/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
-	import { intentContent, openNoteDialog } from '../../stores/NoteDialog';
+	import { intentContent, openNoteDialog } from '../../../stores/NoteDialog';
 	import { goto } from '$app/navigation';
 
 	onMount(async () => {
diff --git a/web/src/routes/preference/+page.svelte b/web/src/routes/(app)/preference/+page.svelte
similarity index 95%
rename from web/src/routes/preference/+page.svelte
rename to web/src/routes/(app)/preference/+page.svelte
index 578f4a4f9..b179441f7 100644
--- a/web/src/routes/preference/+page.svelte
+++ b/web/src/routes/(app)/preference/+page.svelte
@@ -2,8 +2,8 @@
 	import Notification from './Notification.svelte';
 	import ReactionEmoji from './ReactionEmoji.svelte';
 	import Logout from '../Logout.svelte';
-	import { author } from '../../stores/Author';
-	import { debugMode } from '../../stores/Preference';
+	import { author } from '../../../stores/Author';
+	import { debugMode } from '../../../stores/Preference';
 	import WordMute from './WordMute.svelte';
 	import AutoRefresh from './AutoRefresh.svelte';
 	import MutedUsers from './MutedUsers.svelte';
diff --git a/web/src/routes/preference/AutoRefresh.svelte b/web/src/routes/(app)/preference/AutoRefresh.svelte
similarity index 82%
rename from web/src/routes/preference/AutoRefresh.svelte
rename to web/src/routes/(app)/preference/AutoRefresh.svelte
index 83157f51c..1b5ea36dd 100644
--- a/web/src/routes/preference/AutoRefresh.svelte
+++ b/web/src/routes/(app)/preference/AutoRefresh.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { autoRefresh } from '../../stores/Preference';
+	import { autoRefresh } from '../../../stores/Preference';
 
 	let needRefresh = false;
 </script>
diff --git a/web/src/routes/preference/ClearEmojiMartCache.svelte b/web/src/routes/(app)/preference/ClearEmojiMartCache.svelte
similarity index 100%
rename from web/src/routes/preference/ClearEmojiMartCache.svelte
rename to web/src/routes/(app)/preference/ClearEmojiMartCache.svelte
diff --git a/web/src/routes/preference/MutedEvents.svelte b/web/src/routes/(app)/preference/MutedEvents.svelte
similarity index 88%
rename from web/src/routes/preference/MutedEvents.svelte
rename to web/src/routes/(app)/preference/MutedEvents.svelte
index 238a35ceb..dc44cf298 100644
--- a/web/src/routes/preference/MutedEvents.svelte
+++ b/web/src/routes/(app)/preference/MutedEvents.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { nip19 } from 'nostr-tools';
 	import { Mute } from '$lib/Mute';
-	import { pubkey, muteEventIds, writeRelays } from '../../stores/Author';
-	import { pool } from '../../stores/Pool';
+	import { pubkey, muteEventIds, writeRelays } from '../../../stores/Author';
+	import { pool } from '../../../stores/Pool';
 	import IconTrash from '@tabler/icons-svelte/dist/svelte/icons/IconTrash.svelte';
 
 	let unmuting = false;
diff --git a/web/src/routes/preference/MutedUsers.svelte b/web/src/routes/(app)/preference/MutedUsers.svelte
similarity index 92%
rename from web/src/routes/preference/MutedUsers.svelte
rename to web/src/routes/(app)/preference/MutedUsers.svelte
index b5b6dbb5a..b97d8a5ad 100644
--- a/web/src/routes/preference/MutedUsers.svelte
+++ b/web/src/routes/(app)/preference/MutedUsers.svelte
@@ -4,8 +4,8 @@
 	import { Mute } from '$lib/Mute';
 	import { Api } from '$lib/Api';
 	import { Metadata } from '$lib/Items';
-	import { pubkey, mutePubkeys, writeRelays } from '../../stores/Author';
-	import { pool } from '../../stores/Pool';
+	import { pubkey, mutePubkeys, writeRelays } from '../../../stores/Author';
+	import { pool } from '../../../stores/Pool';
 	import IconTrash from '@tabler/icons-svelte/dist/svelte/icons/IconTrash.svelte';
 
 	let metadataEvents = new Map<string, Event>();
diff --git a/web/src/routes/preference/Notification.svelte b/web/src/routes/(app)/preference/Notification.svelte
similarity index 100%
rename from web/src/routes/preference/Notification.svelte
rename to web/src/routes/(app)/preference/Notification.svelte
diff --git a/web/src/routes/preference/ReactionEmoji.svelte b/web/src/routes/(app)/preference/ReactionEmoji.svelte
similarity index 86%
rename from web/src/routes/preference/ReactionEmoji.svelte
rename to web/src/routes/(app)/preference/ReactionEmoji.svelte
index df058c344..b7fe76d13 100644
--- a/web/src/routes/preference/ReactionEmoji.svelte
+++ b/web/src/routes/(app)/preference/ReactionEmoji.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { reactionEmoji } from '../../stores/Preference';
-	import { pool } from '../../stores/Pool';
-	import { writeRelays } from '../../stores/Author';
+	import { reactionEmoji } from '../../../stores/Preference';
+	import { pool } from '../../../stores/Pool';
+	import { writeRelays } from '../../../stores/Author';
 	import { Signer } from '$lib/Signer';
 	import type { Kind } from 'nostr-tools';
 	import IconHeart from '@tabler/icons-svelte/dist/svelte/icons/IconHeart.svelte';
diff --git a/web/src/routes/preference/Theme.svelte b/web/src/routes/(app)/preference/Theme.svelte
similarity index 100%
rename from web/src/routes/preference/Theme.svelte
rename to web/src/routes/(app)/preference/Theme.svelte
diff --git a/web/src/routes/preference/WordMute.svelte b/web/src/routes/(app)/preference/WordMute.svelte
similarity index 89%
rename from web/src/routes/preference/WordMute.svelte
rename to web/src/routes/(app)/preference/WordMute.svelte
index b2924001d..cf2f360fd 100644
--- a/web/src/routes/preference/WordMute.svelte
+++ b/web/src/routes/(app)/preference/WordMute.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Mute } from '$lib/Mute';
 	import IconTrash from '@tabler/icons-svelte/dist/svelte/icons/IconTrash.svelte';
-	import { pubkey, muteWords, writeRelays } from '../../stores/Author';
-	import { pool } from '../../stores/Pool';
+	import { pubkey, muteWords, writeRelays } from '../../../stores/Author';
+	import { pool } from '../../../stores/Pool';
 
 	let word = '';
 
diff --git a/web/src/routes/profile/+page.svelte b/web/src/routes/(app)/profile/+page.svelte
similarity index 98%
rename from web/src/routes/profile/+page.svelte
rename to web/src/routes/(app)/profile/+page.svelte
index de1a796b6..991cf3ba2 100644
--- a/web/src/routes/profile/+page.svelte
+++ b/web/src/routes/(app)/profile/+page.svelte
@@ -2,8 +2,8 @@
 	import { Kind, nip19 } from 'nostr-tools';
 	import { Api } from '$lib/Api';
 	import { NostrcheckMe } from '$lib/media/NostrcheckMe';
-	import { pubkey, author, authorProfile, metadataEvent, writeRelays } from '../../stores/Author';
-	import { pool } from '../../stores/Pool';
+	import { pubkey, author, authorProfile, metadataEvent, writeRelays } from '../../../stores/Author';
+	import { pool } from '../../../stores/Pool';
 	import { goto } from '$app/navigation';
 	import MediaPicker from '../editor/MediaPicker.svelte';
 
diff --git a/web/src/routes/search/+page.svelte b/web/src/routes/(app)/search/+page.svelte
similarity index 97%
rename from web/src/routes/search/+page.svelte
rename to web/src/routes/(app)/search/+page.svelte
index fe63f2868..9707f2a22 100644
--- a/web/src/routes/search/+page.svelte
+++ b/web/src/routes/(app)/search/+page.svelte
@@ -5,7 +5,7 @@
 	import { Search } from '$lib/Search';
 	import { minTimelineLength } from '$lib/Constants';
 	import type { EventItem } from '$lib/Items';
-	import type { Event } from '../types';
+	import type { Event } from '../../types';
 	import TimelineView from '../TimelineView.svelte';
 	import SearchForm from './SearchForm.svelte';
 	import Trending from './Trending.svelte';
diff --git a/web/src/routes/search/SearchForm.svelte b/web/src/routes/(app)/search/SearchForm.svelte
similarity index 100%
rename from web/src/routes/search/SearchForm.svelte
rename to web/src/routes/(app)/search/SearchForm.svelte
diff --git a/web/src/routes/search/Trending.svelte b/web/src/routes/(app)/search/Trending.svelte
similarity index 100%
rename from web/src/routes/search/Trending.svelte
rename to web/src/routes/(app)/search/Trending.svelte
diff --git a/web/src/routes/timeline/Channel.svelte b/web/src/routes/(app)/timeline/Channel.svelte
similarity index 94%
rename from web/src/routes/timeline/Channel.svelte
rename to web/src/routes/(app)/timeline/Channel.svelte
index 603d91c64..754d70a4e 100644
--- a/web/src/routes/timeline/Channel.svelte
+++ b/web/src/routes/(app)/timeline/Channel.svelte
@@ -2,11 +2,11 @@
 	import { onMount } from 'svelte';
 	import { Api } from '$lib/Api';
 	import { nip19, type Event } from 'nostr-tools';
-	import { pool } from '../../stores/Pool';
-	import { readRelays } from '../../stores/Author';
+	import { pool } from '../../../stores/Pool';
+	import { readRelays } from '../../../stores/Author';
 	import IconCodeDots from '@tabler/icons-svelte/dist/svelte/icons/IconCodeDots.svelte';
 	import IconQuote from '@tabler/icons-svelte/dist/svelte/icons/IconQuote.svelte';
-	import { intentContent, openNoteDialog } from '../../stores/NoteDialog';
+	import { intentContent, openNoteDialog } from '../../../stores/NoteDialog';
 	import { Channel } from '$lib/Channel';
 
 	export let event: Event;
diff --git a/web/src/routes/timeline/CustomEmojiList.svelte b/web/src/routes/(app)/timeline/CustomEmojiList.svelte
similarity index 100%
rename from web/src/routes/timeline/CustomEmojiList.svelte
rename to web/src/routes/(app)/timeline/CustomEmojiList.svelte
diff --git a/web/src/routes/timeline/EventComponent.svelte b/web/src/routes/(app)/timeline/EventComponent.svelte
similarity index 100%
rename from web/src/routes/timeline/EventComponent.svelte
rename to web/src/routes/(app)/timeline/EventComponent.svelte
diff --git a/web/src/routes/timeline/Note.svelte b/web/src/routes/(app)/timeline/Note.svelte
similarity index 98%
rename from web/src/routes/timeline/Note.svelte
rename to web/src/routes/(app)/timeline/Note.svelte
index e7d61c887..9bf5499e2 100644
--- a/web/src/routes/timeline/Note.svelte
+++ b/web/src/routes/(app)/timeline/Note.svelte
@@ -13,12 +13,12 @@
 	import IconBookmark from '@tabler/icons-svelte/dist/svelte/icons/IconBookmark.svelte';
 	import IconMessages from '@tabler/icons-svelte/dist/svelte/icons/IconMessages.svelte';
 	import IconDots from '@tabler/icons-svelte/dist/svelte/icons/IconDots.svelte';
-	import type { User } from '../types';
-	import { reactionEmoji } from '../../stores/Preference';
-	import { openNoteDialog, quotes, replyTo } from '../../stores/NoteDialog';
-	import { readRelays, writeRelays, pubkey, isBookmarked, author } from '../../stores/Author';
-	import { pool } from '../../stores/Pool';
-	import { rom } from '../../stores/Author';
+	import type { User } from '../../types';
+	import { reactionEmoji } from '../../../stores/Preference';
+	import { openNoteDialog, quotes, replyTo } from '../../../stores/NoteDialog';
+	import { readRelays, writeRelays, pubkey, isBookmarked, author } from '../../../stores/Author';
+	import { pool } from '../../../stores/Pool';
+	import { rom } from '../../../stores/Author';
 	import CreatedAt from '../CreatedAt.svelte';
 	import { Api } from '$lib/Api';
 	import { onMount } from 'svelte';
diff --git a/web/src/routes/timeline/NoteLink.svelte b/web/src/routes/(app)/timeline/NoteLink.svelte
similarity index 100%
rename from web/src/routes/timeline/NoteLink.svelte
rename to web/src/routes/(app)/timeline/NoteLink.svelte
diff --git a/web/src/routes/timeline/Profile.svelte b/web/src/routes/(app)/timeline/Profile.svelte
similarity index 93%
rename from web/src/routes/timeline/Profile.svelte
rename to web/src/routes/(app)/timeline/Profile.svelte
index c465d5ab7..ecbdfc11f 100644
--- a/web/src/routes/timeline/Profile.svelte
+++ b/web/src/routes/(app)/timeline/Profile.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { nip19 } from 'nostr-tools';
 	import FollowButton from '../action/FollowButton.svelte';
-	import { rom } from '../../stores/Author';
-	import { lastNotesMap } from '../../stores/LastNotes';
+	import { rom } from '../../../stores/Author';
+	import { lastNotesMap } from '../../../stores/LastNotes';
 	import Content from '../content/Content.svelte';
 	import type { Metadata } from '$lib/Items';
 
diff --git a/web/src/routes/timeline/Reaction.svelte b/web/src/routes/(app)/timeline/Reaction.svelte
similarity index 100%
rename from web/src/routes/timeline/Reaction.svelte
rename to web/src/routes/(app)/timeline/Reaction.svelte
diff --git a/web/src/routes/timeline/RepostedNote.svelte b/web/src/routes/(app)/timeline/RepostedNote.svelte
similarity index 100%
rename from web/src/routes/timeline/RepostedNote.svelte
rename to web/src/routes/(app)/timeline/RepostedNote.svelte
diff --git a/web/src/routes/timeline/Zap.svelte b/web/src/routes/(app)/timeline/Zap.svelte
similarity index 97%
rename from web/src/routes/timeline/Zap.svelte
rename to web/src/routes/(app)/timeline/Zap.svelte
index d012686d3..889125275 100644
--- a/web/src/routes/timeline/Zap.svelte
+++ b/web/src/routes/(app)/timeline/Zap.svelte
@@ -3,8 +3,8 @@
 	import { eventItemStore, metadataStore } from '$lib/cache/Events';
 	import IconBolt from '@tabler/icons-svelte/dist/svelte/icons/IconBolt.svelte';
 	import IconCodeDots from '@tabler/icons-svelte/dist/svelte/icons/IconCodeDots.svelte';
-	import { pool } from '../../stores/Pool';
-	import { readRelays } from '../../stores/Author';
+	import { pool } from '../../../stores/Pool';
+	import { readRelays } from '../../../stores/Author';
 	import { nip19, type Event } from 'nostr-tools';
 	import CreatedAt from '../CreatedAt.svelte';
 	import { Api } from '$lib/Api';
diff --git a/web/src/routes/+layout.ts b/web/src/routes/+layout.ts
index e1f2f788d..5a482bc07 100644
--- a/web/src/routes/+layout.ts
+++ b/web/src/routes/+layout.ts
@@ -8,14 +8,19 @@ import { defaultRelays } from '$lib/Constants';
 
 export const load = async () => {
 	console.log('[layout load]');
+	let authenticated = false;
 	if (browser) {
 		locale.set(window.navigator.language);
-		const success = await tryLogin();
-		if (!success) {
+		authenticated = await tryLogin();
+		if (!authenticated) {
 			await rxNostr.switchRelays(defaultRelays);
 		}
 	}
 	await waitLocale();
+	return {
+		splash: !browser || authenticated,
+		authenticated
+	};
 };
 
 async function tryLogin(): Promise<boolean> {
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 0679b636c..f4ca968c8 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,15 +1,23 @@
 <script lang="ts">
-	import { author } from '../stores/Author';
-	import Login from './Login.svelte';
+	import { goto } from '$app/navigation';
+	import type { LayoutData } from './$types';
+	import SplashScreen from './SplashScreen.svelte';
+	import Login from './(app)/Login.svelte';
+	import '../app.css';
+
+	export let data: LayoutData;
+
+	$: if (data.authenticated) {
+		goto('/home');
+	}
 </script>
 
 <svelte:head>
 	<title>nostter</title>
 </svelte:head>
 
-<main>
-	<h1>nostter</h1>
-	{#if $author === undefined}
-		<Login />
-	{/if}
-</main>
+{#if data.splash}
+	<SplashScreen />
+{:else}
+	<Login />
+{/if}
diff --git a/web/src/routes/Login.svelte b/web/src/routes/Login.svelte
deleted file mode 100644
index 8ebeddf04..000000000
--- a/web/src/routes/Login.svelte
+++ /dev/null
@@ -1,211 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { _ } from 'svelte-i18n';
-	import type { Nip07 } from 'nostr-typedef';
-	import { generatePrivateKey, getPublicKey, nip19 } from 'nostr-tools';
-	import { Login } from '$lib/Login';
-	import { loginType } from '../stores/Author';
-	import { page } from '$app/stores';
-	import { afterNavigate, goto } from '$app/navigation';
-	import { authorProfile } from '../stores/Author';
-	import { WebStorage } from '$lib/WebStorage';
-	import ModalDialog from '$lib/components/ModalDialog.svelte';
-
-	let nostr: Nip07.Nostr | undefined;
-	let key = '';
-	let name = '';
-
-	let showCreateAccountDialog = false;
-	let showLoginDialog = false;
-
-	const login = new Login();
-
-	async function loginWithNip07() {
-		await login.withNip07();
-		await gotoHome();
-	}
-
-	async function loginWithKey() {
-		if (key.startsWith('nsec')) {
-			await login.withNsec(key);
-		} else {
-			await login.withNpub(key);
-		}
-		await gotoHome();
-	}
-
-	async function loginWithDemo() {
-		await goto('/home');
-	}
-
-	function createAccount(): void {
-		showCreateAccountDialog = true;
-		const seckey = generatePrivateKey();
-		key = nip19.nsecEncode(seckey);
-		console.log('[pubkey]', getPublicKey(seckey));
-	}
-
-	async function register(): Promise<void> {
-		await login.withNsec(key);
-		await login.saveBasicInfo(name);
-		await gotoHome();
-	}
-
-	function showLogin(): void {
-		showLoginDialog = true;
-	}
-
-	onMount(async () => {
-		console.log('[login on mount]');
-
-		const storage = new WebStorage(localStorage);
-		const savedLogin = storage.get('login');
-		console.log('[login]', savedLogin);
-
-		if (savedLogin === null) {
-			const { waitNostr } = await import('nip07-awaiter');
-			waitNostr(10000).then((n) => (nostr = n));
-		}
-	});
-
-	async function gotoHome() {
-		console.log('[goto home]', $authorProfile);
-		if ($authorProfile === undefined) {
-			console.error('[login failed]');
-			return;
-		}
-
-		const url = '/home';
-		console.log(`Redirect to ${url}`);
-		await goto(url);
-	}
-
-	afterNavigate(async () => {
-		console.log('afterNavigate');
-		const queryNpub = $page.url.searchParams.get('login');
-
-		if (queryNpub === null || !queryNpub.startsWith('npub') || $loginType !== undefined) {
-			return;
-		}
-
-		key = queryNpub;
-		await login.withNpub(queryNpub);
-	});
-</script>
-
-<section>
-	<button on:click={createAccount}>{$_('login.create_account')}</button>
-	<ModalDialog bind:open={showCreateAccountDialog}>
-		<article>
-			<form method="dialog" on:submit|preventDefault={register}>
-				<div>
-					<input
-						type="text"
-						name="name"
-						placeholder={$_('login.name')}
-						bind:value={name}
-					/>
-				</div>
-				<div class="hidden">
-					<input type="password" bind:value={key} readonly />
-				</div>
-				<div>
-					<input
-						type="submit"
-						value={$_('login.create_account')}
-						disabled={$loginType !== undefined}
-					/>
-				</div>
-			</form>
-		</article>
-	</ModalDialog>
-</section>
-
-<section>
-	<button on:click={showLogin}>{$_('login.login')}</button>
-	<ModalDialog bind:open={showLoginDialog}>
-		<article>
-			<section>
-				<div>{$_('login.recommended')}</div>
-				{#if nostr === undefined}
-					<p>
-						Please install <a
-							href="https://github.com/nostr-protocol/nips/blob/master/07.md#implementation"
-							target="_blank"
-							rel="noopener noreferrer"
-						>
-							Browser Extension
-						</a>
-					</p>
-				{/if}
-				<div>
-					<button
-						on:click|once={loginWithNip07}
-						disabled={$loginType !== undefined || nostr === undefined}
-					>
-						{$_('login.browser_extension')}
-					</button>
-				</div>
-			</section>
-
-			<section>
-				<form method="dialog" on:submit|preventDefault|once={loginWithKey}>
-					<div>
-						<input
-							type="password"
-							bind:value={key}
-							placeholder="npub or nsec"
-							pattern="^(npub|nsec)1[a-z0-9]+$"
-							required
-							on:keyup|stopPropagation={() => console.debug()}
-						/>
-					</div>
-					<div>
-						<input
-							type="submit"
-							value={$_('login.key')}
-							disabled={$loginType !== undefined}
-						/>
-					</div>
-				</form>
-			</section>
-		</article>
-	</ModalDialog>
-</section>
-
-<section>
-	<button on:click={loginWithDemo} disabled={$loginType !== undefined}>
-		{$_('login.try_demo')}
-	</button>
-</section>
-
-<style>
-	section {
-		margin: 1rem auto;
-	}
-
-	article {
-		margin: 1rem;
-		text-align: center;
-	}
-
-	form[method='dialog'] div + div {
-		margin-top: 1rem;
-	}
-
-	button:disabled {
-		background-color: lightgray;
-	}
-
-	button:disabled:hover {
-		opacity: initial;
-	}
-
-	input::placeholder {
-		text-align: center;
-	}
-
-	.hidden {
-		display: none;
-	}
-</style>
diff --git a/web/src/routes/SplashScreen.svelte b/web/src/routes/SplashScreen.svelte
new file mode 100644
index 000000000..42263e425
--- /dev/null
+++ b/web/src/routes/SplashScreen.svelte
@@ -0,0 +1,21 @@
+<main>
+	<img src="/nostter-logo.svg" alt="nostter" />
+</main>
+
+<style>
+	:global(html, body) {
+		width: 100vw;
+		height: 100vh;
+	}
+
+	main {
+		height: 100vh;
+		display: flex;
+		justify-content: center;
+	}
+
+	img {
+		width: 90vw;
+		max-width: 360px;
+	}
+</style>
diff --git a/web/tests/test.ts b/web/tests/test.ts
index e569c799c..e75ed738e 100644
--- a/web/tests/test.ts
+++ b/web/tests/test.ts
@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-test('index page has expected h1', async ({ page }) => {
+test('index page has expected logo', async ({ page }) => {
 	await page.goto('/');
-	await expect(page.getByRole('heading', { name: 'nostter' })).toBeVisible();
+	await expect(page.getByRole('img', { name: 'nostter' })).toBeVisible();
 });