diff --git a/src/components/BskyPost.svelte b/src/components/BskyPost.svelte
index a8b1af8..4f3a5ed 100644
--- a/src/components/BskyPost.svelte
+++ b/src/components/BskyPost.svelte
@@ -40,7 +40,7 @@
 	import { settings } from '$lib/settings';
 	import RichText from './RichText.svelte';
 	import { getRelativeTime } from '$lib/date';
-	import { likeSource, repostSource } from '$lib';
+	import { likeSource, repostSource, toCanonicalUri } from '$lib';
 	import ProfileInfo from './ProfileInfo.svelte';
 
 	interface Props {
@@ -72,7 +72,7 @@
 	const selectedDid = $derived(client.user?.did ?? null);
 	const isLoggedInUser = $derived($accounts.some((acc) => acc.did === did));
 
-	const aturi = $derived(`at://${did}/app.bsky.feed.post/${rkey}` as CanonicalResourceUri);
+	const aturi = $derived(toCanonicalUri({ did, collection: 'app.bsky.feed.post', rkey }));
 	const color = $derived(generateColorForDid(did));
 
 	let handle: ActorIdentifier = $state('handle.invalid');
@@ -384,50 +384,69 @@
 {#snippet postControls(post: PostWithUri)}
 	{@const myRepost = findBacklinksBy(post.uri, repostSource, selectedDid!).length > 0}
 	{@const myLike = findBacklinksBy(post.uri, likeSource, selectedDid!).length > 0}
-	{#snippet control(
-		name: string,
-		icon: string,
-		onClick: (e: MouseEvent) => void,
-		isFull?: boolean,
-		hasSolid?: boolean
-	)}
+	{#snippet control({
+		name,
+		icon,
+		onClick,
+		isFull,
+		hasSolid,
+		canBeDisabled = true
+	}: {
+		name: string;
+		icon: string;
+		onClick: (e: MouseEvent) => void;
+		isFull?: boolean;
+		hasSolid?: boolean;
+		canBeDisabled?: boolean;
+	})}
 		<button
 			class="
 			px-2 py-1.5 text-(--nucleus-fg)/90 transition-all
-			duration-100 hover:[backdrop-filter:brightness(120%)]
+			duration-100 not-disabled:hover:[backdrop-filter:brightness(120%)]
+			disabled:cursor-not-allowed!
 			"
 			onclick={(e) => onClick(e)}
 			style="color: {isFull ? color : 'color-mix(in srgb, var(--nucleus-fg) 90%, transparent)'}"
 			title={name}
+			disabled={canBeDisabled ? selectedDid === null : false}
 		>
 			<Icon icon={hasSolid && isFull ? `${icon}-solid` : icon} width={20} />
 		</button>
 	{/snippet}
 	<div class="mt-3 flex w-full items-center justify-between">
 		<div class="flex w-fit items-center rounded-sm" style="background: {color}1f;">
-			{@render control('reply', 'heroicons:chat-bubble-left', () => onReply?.(post), false, true)}
-			{@render control(
-				'repost',
-				'heroicons:arrow-path-rounded-square-20-solid',
-				() => {
+			{@render control({
+				name: 'reply',
+				icon: 'heroicons:chat-bubble-left',
+				hasSolid: true,
+				onClick: () => onReply?.(post)
+			})}
+			{@render control({
+				name: 'repost',
+				icon: 'heroicons:arrow-path-rounded-square-20-solid',
+				onClick: () => {
 					if (!selectedDid) return;
 					if (myRepost) deletePostBacklink(client, post, repostSource);
 					else createPostBacklink(client, post, repostSource);
 				},
-				myRepost
-			)}
-			{@render control('quote', 'heroicons:paper-clip-20-solid', () => onQuote?.(post), false)}
-			{@render control(
-				'like',
-				'heroicons:star',
-				() => {
+				isFull: myRepost
+			})}
+			{@render control({
+				name: 'quote',
+				icon: 'heroicons:paper-clip-20-solid',
+				onClick: () => onQuote?.(post)
+			})}
+			{@render control({
+				name: 'like',
+				icon: 'heroicons:star',
+				onClick: () => {
 					if (!selectedDid) return;
 					if (myLike) deletePostBacklink(client, post, likeSource);
 					else createPostBacklink(client, post, likeSource);
 				},
-				myLike,
-				true
-			)}
+				isFull: myLike,
+				hasSolid: true
+			})}
 		</div>
 		<Dropdown
 			class="post-dropdown"
@@ -459,16 +478,21 @@
 			{#snippet trigger()}
 				<div
 					class="
-          		    w-fit items-center rounded-sm transition-opacity
+					w-fit items-center rounded-sm transition-opacity
          			duration-100 ease-in-out group-hover:opacity-100
          			{!actionsOpen && !Device.isMobile ? 'opacity-0' : ''}
          			"
 					style="background: {color}1f;"
 				>
-					{@render control('actions', 'heroicons:ellipsis-horizontal-16-solid', (e) => {
-						e.stopPropagation();
-						actionsOpen = !actionsOpen;
-						actionsPos = { x: 0, y: 0 };
+					{@render control({
+						name: 'actions',
+						icon: 'heroicons:ellipsis-horizontal-16-solid',
+						onClick: (e: MouseEvent) => {
+							e.stopPropagation();
+							actionsOpen = !actionsOpen;
+							actionsPos = { x: 0, y: 0 };
+						},
+						canBeDisabled: false
 					})}
 				</div>
 			{/snippet}
diff --git a/src/components/FollowingView.svelte b/src/components/FollowingView.svelte
index 8be3191..40a7aff 100644
--- a/src/components/FollowingView.svelte
+++ b/src/components/FollowingView.svelte
@@ -10,16 +10,17 @@
 		type Sort
 	} from '$lib/following';
 	import FollowingItem from './FollowingItem.svelte';
+	import NotLoggedIn from './NotLoggedIn.svelte';
 
 	interface Props {
-		selectedDid: Did;
-		selectedClient: AtpClient;
+		client: AtpClient | undefined;
 		followingSort: Sort;
 	}
 
-	let { selectedDid, selectedClient, followingSort = $bindable('active') }: Props = $props();
+	let { client, followingSort = $bindable('active') }: Props = $props();
 
-	const followsMap = $derived(follows.get(selectedDid));
+	const selectedDid = $derived(client?.user?.did);
+	const followsMap = $derived(selectedDid ? follows.get(selectedDid) : undefined);
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	let sortedFollowing = $state<{ did: Did; data: any }[]>([]);
@@ -36,7 +37,7 @@
 		if (calculationTimer) clearTimeout(calculationTimer);
 		isLongCalculation = false;
 
-		if (!followsMap) {
+		if (!followsMap || !selectedDid) {
 			sortedFollowing = [];
 			return;
 		}
@@ -137,7 +138,9 @@
 	</div>
 
 	<div class="min-h-0 flex-1" bind:this={listContainer}>
-		{#if sortedFollowing.length === 0 || isLongCalculation}
+		{#if !client}
+			<NotLoggedIn />
+		{:else if sortedFollowing.length === 0 || isLongCalculation}
 			<div class="flex justify-center py-8">
 				<div
 					class="h-8 w-8 animate-spin rounded-full border-2 border-t-transparent"
@@ -152,7 +155,7 @@
 						{style}
 						did={user.did}
 						stats={user.data!}
-						client={selectedClient}
+						{client}
 						sort={followingSort}
 						{currentTime}
 					/>
diff --git a/src/components/NotLoggedIn.svelte b/src/components/NotLoggedIn.svelte
new file mode 100644
index 0000000..dd7964e
--- /dev/null
+++ b/src/components/NotLoggedIn.svelte
@@ -0,0 +1,5 @@
+<div class="flex justify-center py-4">
+	<p class="text-xl opacity-80">
+		<span class="text-4xl">x_x</span> <br /> no accounts are logged in!
+	</p>
+</div>
diff --git a/src/components/PostComposer.svelte b/src/components/PostComposer.svelte
index b51fdcb..86e632d 100644
--- a/src/components/PostComposer.svelte
+++ b/src/components/PostComposer.svelte
@@ -67,13 +67,10 @@
 			}
 		});
 
-		if (!res) {
-			return err('failed to post: not logged in');
-		}
+		if (!res) return err('failed to post: not logged in');
 
-		if (!res.ok) {
+		if (!res.ok)
 			return err(`failed to post: ${res.data.error}: ${res.data.message ?? 'no details'}`);
-		}
 
 		return ok({
 			uri: res.data.uri,
@@ -99,15 +96,16 @@
 				postText = '';
 				info = 'posted!';
 				unfocus();
-				setTimeout(() => (info = ''), 1000 * 0.8);
+				setTimeout(() => (info = ''), 800);
 			} else {
-				// todo: add a way to clear error
 				info = res.error;
+				setTimeout(() => (info = ''), 3000);
 			}
 		});
 	};
 
 	$effect(() => {
+		if (!client.atcute) info = 'not logged in';
 		document.documentElement.style.setProperty('--acc-color', color);
 		if (isFocused && textareaEl) textareaEl.focus();
 	});
diff --git a/src/components/ProfilePicture.svelte b/src/components/ProfilePicture.svelte
index 45903eb..c17efa1 100644
--- a/src/components/ProfilePicture.svelte
+++ b/src/components/ProfilePicture.svelte
@@ -1,5 +1,5 @@
 <script lang="ts" module>
-	// Module-level cache for synchronous access during component recycling
+	// we have this to prevent avatars from "flickering"
 	const avatarCache = new SvelteMap<string, string | null>();
 </script>
 
@@ -24,11 +24,7 @@
 	let avatarUrl = $state<string | null>(avatarCache.get(did) ?? null);
 
 	const loadProfile = async (targetDid: Did) => {
-		// If we already have it in cache, we might want to re-validate eventually,
-		// but for UI stability, using the cache is priority.
-		// However, we still need to handle the case where we don't have it.
-		if (avatarCache.has(targetDid)) avatarUrl = avatarCache.get(targetDid) ?? null;
-		else avatarUrl = null;
+		avatarUrl = avatarCache.get(targetDid) ?? null;
 
 		try {
 			const profile = await client.getProfile(targetDid);
@@ -46,8 +42,6 @@
 					avatarCache.set(targetDid, null);
 				}
 			} else {
-				// Don't cache errors aggressively, or maybe cache 'null' to stop retrying?
-				// For now, just set local state.
 				avatarUrl = null;
 			}
 		} catch (e) {
diff --git a/src/components/ProfileView.svelte b/src/components/ProfileView.svelte
index 882adb2..6ddde04 100644
--- a/src/components/ProfileView.svelte
+++ b/src/components/ProfileView.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
-	import { AtpClient, resolveHandle } from '$lib/at/client';
-	import type { ActorIdentifier, AtprotoDid } from '@atcute/lexicons/syntax';
+	import { AtpClient, resolveDidDoc, resolveHandle } from '$lib/at/client';
+	import {
+		isHandle,
+		type ActorIdentifier,
+		type AtprotoDid,
+		type Handle
+	} from '@atcute/lexicons/syntax';
 	import TimelineView from './TimelineView.svelte';
 	import ProfileInfo from './ProfileInfo.svelte';
 	import type { State as PostComposerState } from './PostComposer.svelte';
@@ -9,6 +14,7 @@
 	import { img } from '$lib/cdn';
 	import { isBlob } from '@atcute/lexicons/interfaces';
 	import type { AppBskyActorProfile } from '@atcute/bluesky';
+	import { onMount } from 'svelte';
 
 	interface Props {
 		client: AtpClient;
@@ -20,14 +26,17 @@
 	let { client, actor, onBack, postComposerState = $bindable({ type: 'null' }) }: Props = $props();
 
 	let profile = $state<AppBskyActorProfile.Main | null>(null);
+	const displayName = $derived(profile?.displayName ?? '');
 	let loading = $state(true);
 	let error = $state<string | null>(null);
 	let did = $state<AtprotoDid | null>(null);
+	let handle = $state<Handle | null>(null);
 
 	const loadProfile = async (identifier: ActorIdentifier) => {
 		loading = true;
 		error = null;
 		profile = null;
+		handle = isHandle(identifier) ? identifier : null;
 
 		const resDid = await resolveHandle(identifier);
 		if (resDid.ok) did = resDid.value;
@@ -37,6 +46,11 @@
 			return;
 		}
 
+		if (!handle) {
+			const resHandle = await resolveDidDoc(did);
+			if (resHandle.ok) handle = resHandle.value.handle;
+		}
+
 		const res = await client.getProfile(did);
 		if (res.ok) profile = res.value;
 		else error = res.error;
@@ -44,8 +58,8 @@
 		loading = false;
 	};
 
-	$effect(() => {
-		loadProfile(actor as ActorIdentifier);
+	onMount(async () => {
+		await loadProfile(actor as ActorIdentifier);
 	});
 
 	const color = $derived(did ? generateColorForDid(did) : 'var(--nucleus-fg)');
@@ -69,7 +83,11 @@
 			<Icon icon="heroicons:arrow-left-20-solid" width={24} />
 		</button>
 		<h2 class="text-xl font-bold">
-			{profile?.displayName ?? (loading ? 'loading...' : actor || 'profile')}
+			{displayName.length > 0
+				? displayName
+				: loading
+					? 'loading...'
+					: (handle ?? actor ?? 'profile')}
 		</h2>
 	</div>
 
diff --git a/src/components/TimelineView.svelte b/src/components/TimelineView.svelte
index 8a5524d..1926897 100644
--- a/src/components/TimelineView.svelte
+++ b/src/components/TimelineView.svelte
@@ -16,6 +16,7 @@
 	import Icon from '@iconify/svelte';
 	import { buildThreads, filterThreads, type ThreadPost } from '$lib/thread';
 	import type { AtprotoDid } from '@atcute/lexicons/syntax';
+	import NotLoggedIn from './NotLoggedIn.svelte';
 
 	interface Props {
 		client?: AtpClient | null;
@@ -191,10 +192,6 @@
 			{/snippet}
 		</InfiniteLoader>
 	{:else}
-		<div class="flex justify-center py-4">
-			<p class="text-xl opacity-80">
-				<span class="text-4xl">x_x</span> <br /> no accounts are logged in!
-			</p>
-		</div>
+		<NotLoggedIn />
 	{/if}
 </div>
diff --git a/src/lib/at/client.ts b/src/lib/at/client.ts
index 1a762db..8004b4f 100644
--- a/src/lib/at/client.ts
+++ b/src/lib/at/client.ts
@@ -37,7 +37,7 @@ import type { Notification } from './stardust';
 import { get } from 'svelte/store';
 import { settings } from '$lib/settings';
 import type { OAuthUserAgent } from '@atcute/oauth-browser-client';
-import { timestampFromCursor } from '$lib';
+import { timestampFromCursor, toCanonicalUri, toResourceUri } from '$lib';
 
 export const slingshotUrl: URL = new URL(get(settings).endpoints.slingshot);
 export const spacedustUrl: URL = new URL(get(settings).endpoints.spacedust);
@@ -132,8 +132,9 @@ export class AtpClient {
 		const collection = schema.object.shape.$type.expected;
 
 		try {
-			// Call the cached function
-			const rawValue = await cache.fetchRecord(`at://${repo}/${collection}/${rkey}`);
+			const rawValue = await cache.fetchRecord(
+				toResourceUri({ repo, collection, rkey, fragment: undefined })
+			);
 
 			const parsed = safeParse(schema, rawValue.value);
 			if (!parsed.ok) return err(parsed.message);
@@ -242,7 +243,7 @@ export class AtpClient {
 
 		const timeout = new Promise<null>((resolve) => setTimeout(() => resolve(null), 2000));
 		const query = fetchMicrocosm(constellationUrl, BacklinksQuery, {
-			subject: `at://${did.value}/${collection}/${rkey}`,
+			subject: toCanonicalUri({ did: did.value, collection, rkey }),
 			source,
 			limit: limit || 100
 		});
diff --git a/src/lib/at/fetch.ts b/src/lib/at/fetch.ts
index 25631f7..c192454 100644
--- a/src/lib/at/fetch.ts
+++ b/src/lib/at/fetch.ts
@@ -9,7 +9,7 @@ import { err, expect, ok, type Ok, type Result } from '$lib/result';
 import type { Backlinks } from './constellation';
 import { AppBskyFeedPost } from '@atcute/bluesky';
 import type { AtprotoDid, Did, RecordKey } from '@atcute/lexicons/syntax';
-import { replySource } from '$lib';
+import { replySource, toCanonicalUri } from '$lib';
 
 export type PostWithUri = { uri: ResourceUri; cid: Cid | undefined; record: AppBskyFeedPost.Main };
 export type PostWithBacklinks = PostWithUri & {
@@ -127,7 +127,7 @@ export const hydratePosts = async (
 			for (const reply of backlinks.value.records) {
 				if (reply.did !== postRepo) continue;
 				// if we already have this reply, then we already fetched this chain / are fetching it
-				if (posts.has(`at://${reply.did}/${reply.collection}/${reply.rkey}`)) continue;
+				if (posts.has(toCanonicalUri(reply))) continue;
 				const record =
 					cacheFn(reply.did, reply.rkey) ??
 					(await client.getRecord(AppBskyFeedPost.mainSchema, reply.did, reply.rkey));
diff --git a/src/lib/index.ts b/src/lib/index.ts
index c04ddc2..2424036 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -5,13 +5,16 @@ import type {
 	ParsedResourceUri,
 	ResourceUri
 } from '@atcute/lexicons';
-import type { BacklinksSource } from './at/constellation';
+import type { Backlink, BacklinksSource } from './at/constellation';
 import { parse as parseTid } from '@atcute/tid';
 
 export const toResourceUri = (parsed: ParsedResourceUri): ResourceUri => {
 	return `at://${parsed.repo}${parsed.collection ? `/${parsed.collection}${parsed.rkey ? `/${parsed.rkey}` : ''}` : ''}`;
 };
-export const toCanonicalUri = (parsed: ParsedCanonicalResourceUri): CanonicalResourceUri => {
+export const toCanonicalUri = (
+	parsed: ParsedCanonicalResourceUri | Backlink
+): CanonicalResourceUri => {
+	if ('did' in parsed) return `at://${parsed.did}/${parsed.collection}/${parsed.rkey}`;
 	return `at://${parsed.repo}/${parsed.collection}/${parsed.rkey}${parsed.fragment ? `#${parsed.fragment}` : ''}`;
 };
 
diff --git a/src/lib/router.svelte.ts b/src/lib/router.svelte.ts
index e5d6bc1..86a1202 100644
--- a/src/lib/router.svelte.ts
+++ b/src/lib/router.svelte.ts
@@ -6,7 +6,6 @@ export const routes = [
 	{ path: '/', order: 0 },
 	{ path: '/following', order: 1 },
 	{ path: '/notifications', order: 2 },
-	{ path: '/settings', order: 3 },
 	{ path: '/settings/:tab', order: 3 },
 	{ path: '/profile/:actor', order: 4 }
 ] as const;
@@ -85,7 +84,7 @@ export class Router {
 		window.addEventListener('popstate', () => this._updateState(window.location.pathname));
 	}
 
-	match(urlPath: string): Route {
+	match(urlPath: string): Route | undefined {
 		const segments = urlPath.split('/').filter(Boolean);
 		const params: Record<string, string> = {};
 
@@ -98,7 +97,7 @@ export class Router {
 				node = node.paramChild;
 				if (node.paramName) params[node.paramName] = decodeURIComponent(segment);
 			} else {
-				return fallbackRoute;
+				return undefined;
 			}
 		}
 
@@ -110,7 +109,7 @@ export class Router {
 				url: urlPath
 			} as Route<typeof node.config.path>;
 
-		return fallbackRoute;
+		return undefined;
 	}
 
 	updateDirection(newOrder: number, oldOrder: number) {
@@ -121,6 +120,7 @@ export class Router {
 
 	private _updateState(url: string) {
 		const target = this.match(url);
+		if (!target) return;
 
 		// save scroll position
 		if (typeof window !== 'undefined') this.scrollPositions.set(this.current.url, window.scrollY);
diff --git a/src/lib/state.svelte.ts b/src/lib/state.svelte.ts
index c8ad639..bdea56b 100644
--- a/src/lib/state.svelte.ts
+++ b/src/lib/state.svelte.ts
@@ -21,7 +21,8 @@ import {
 	likeSource,
 	replySource,
 	repostSource,
-	timestampFromCursor
+	timestampFromCursor,
+	toCanonicalUri
 } from '$lib';
 import { Router } from './router.svelte';
 
@@ -231,14 +232,16 @@ export const fetchFollows = async (did: AtprotoDid) => {
 	);
 };
 
+// this fetches up to three days of posts and interactions for using in following list
 export const fetchForInteractions = async (did: AtprotoDid) => {
+	const threeDaysAgo = (Date.now() - 3 * 24 * 60 * 60 * 1000) * 1000;
+
 	const client = await getClient(did);
-	const res = await client.listRecords('app.bsky.feed.post');
+	const res = await client.listRecordsUntil('app.bsky.feed.post', undefined, threeDaysAgo);
 	if (!res.ok) return;
 	addPostsRaw(did, res.value);
 
 	const cursorTimestamp = timestampFromCursor(res.value.cursor) ?? -1;
-	const threeDaysAgo = (Date.now() - 3 * 24 * 60 * 60 * 1000) * 1000;
 	const timestamp = Math.min(cursorTimestamp, threeDaysAgo);
 	console.log(`${did}: fetchForInteractions`, res.value.cursor, timestamp);
 	await Promise.all([repostSource].map((s) => fetchLinksUntil(client, s, timestamp)));
@@ -249,7 +252,7 @@ export const allPosts = new SvelteMap<Did, SvelteMap<ResourceUri, PostWithUri>>(
 export const replyIndex = new SvelteMap<Did, SvelteSet<ResourceUri>>();
 
 export const getPost = (did: Did, rkey: RecordKey) =>
-	allPosts.get(did)?.get(`at://${did}/app.bsky.feed.post/${rkey}`);
+	allPosts.get(did)?.get(toCanonicalUri({ did, collection: 'app.bsky.feed.post', rkey }));
 const hydrateCacheFn: Parameters<typeof hydratePosts>[3] = (did, rkey) => {
 	const cached = getPost(did, rkey);
 	return cached ? ok(cached) : undefined;
@@ -359,7 +362,7 @@ export const handleJetstreamEvent = (event: JetstreamEvent) => {
 	if (event.kind !== 'commit') return;
 
 	const { did, commit } = event;
-	const uri: ResourceUri = `at://${did}/${commit.collection}/${commit.rkey}`;
+	const uri: ResourceUri = toCanonicalUri({ did, ...commit });
 	if (commit.collection === 'app.bsky.feed.post') {
 		if (commit.operation === 'create') {
 			const { cid, record } = commit;
diff --git a/src/routes/+page.svelte b/src/routes/[...catchall]/+page.svelte
similarity index 88%
rename from src/routes/+page.svelte
rename to src/routes/[...catchall]/+page.svelte
index e86c2c7..1db316c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/[...catchall]/+page.svelte
@@ -46,7 +46,7 @@
 		if (selectedDid) localStorage.setItem('selectedDid', selectedDid);
 		else localStorage.removeItem('selectedDid');
 	});
-	const selectedClient = $derived(selectedDid ? clients.get(selectedDid) : null);
+	const selectedClient = $derived(selectedDid ? clients.get(selectedDid) : undefined);
 
 	const loginAccount = async (account: Account) => {
 		if (clients.has(account.did)) return;
@@ -187,17 +187,24 @@
 	</button>
 {/snippet}
 
-{#snippet routeButton(
-	path: (typeof currentRoute)['path'],
-	icon: string,
-	ariaLabel: string,
-	iconHover?: string
-)}
+{#snippet routeButton({
+	route,
+	path = route,
+	icon,
+	iconHover = `${icon}-solid`,
+	ariaLabel = path.split('/').pop() ?? path
+}: {
+	route: (typeof currentRoute)['path'];
+	path?: string;
+	icon: string;
+	ariaLabel?: string;
+	iconHover?: string;
+})}
 	{@render appButton(
 		() => router.navigate(path),
 		icon,
 		ariaLabel,
-		path === currentRoute.path,
+		currentRoute.path === route,
 		iconHover
 	)}
 {/snippet}
@@ -211,30 +218,23 @@
 			bind:postComposerState
 		/>
 
-		{#if currentRoute.path === '/settings/:tab' || currentRoute.path === '/settings'}
+		{#if currentRoute.path === '/settings/:tab'}
 			<div class={animClass}>
-				<SettingsView tab={currentRoute.params.tab ?? 'advanced'} />
+				<SettingsView tab={currentRoute.params.tab} />
 			</div>
-		{/if}
-		{#if currentRoute.path === '/notifications'}
+		{:else if currentRoute.path === '/notifications'}
 			<div class={animClass}>
 				<NotificationsView />
 			</div>
-		{/if}
-		{#if currentRoute.path === '/following'}
+		{:else if currentRoute.path === '/following'}
 			<div class={animClass}>
-				<FollowingView
-					selectedClient={selectedClient!}
-					selectedDid={selectedDid!}
-					bind:followingSort
-				/>
+				<FollowingView client={selectedClient} bind:followingSort />
 			</div>
-		{/if}
-		{#if currentRoute.path === '/profile/:actor'}
+		{:else if currentRoute.path === '/profile/:actor'}
 			{#key currentRoute.params.actor}
 				<div class={animClass}>
 					<ProfileView
-						client={selectedClient!}
+						client={selectedClient ?? viewClient}
 						onBack={() => router.back()}
 						actor={currentRoute.params.actor}
 						bind:postComposerState
@@ -270,11 +270,7 @@
 
 		<div
 			class="
-			{router.current.path === '/' ||
-			router.current.path === '/following' ||
-			router.current.path === '/profile/:actor'
-				? ''
-				: 'hidden'}
+			{['/', '/following', '/profile/:actor'].includes(router.current.path) ? '' : 'hidden'}
 			z-20 w-full max-w-2xl p-2.5 px-4 pb-1 transition-all
 			"
 		>
@@ -328,25 +324,14 @@
 						</div>
 					</div>
 					<div class="grow"></div>
-					{@render routeButton('/', 'heroicons:home', 'timeline', 'heroicons:home-solid')}
-					{@render routeButton(
-						'/following',
-						'heroicons:users',
-						'following',
-						'heroicons:users-solid'
-					)}
-					{@render routeButton(
-						'/notifications',
-						'heroicons:bell',
-						'notifications',
-						'heroicons:bell-solid'
-					)}
-					{@render routeButton(
-						'/settings',
-						'heroicons:cog-6-tooth',
-						'settings',
-						'heroicons:cog-6-tooth-solid'
-					)}
+					{@render routeButton({ route: '/', icon: 'heroicons:home' })}
+					{@render routeButton({ route: '/following', icon: 'heroicons:users' })}
+					{@render routeButton({ route: '/notifications', icon: 'heroicons:bell' })}
+					{@render routeButton({
+						path: '/settings/advanced',
+						route: '/settings/:tab',
+						icon: 'heroicons:cog-6-tooth'
+					})}
 				</div>
 			</div>
 		</div>
diff --git a/src/routes/+page.ts b/src/routes/[...catchall]/+page.ts
similarity index 100%
rename from src/routes/+page.ts
rename to src/routes/[...catchall]/+page.ts