diff --git a/src/lib/cards/FriendsCard/FriendsCard.svelte b/src/lib/cards/FriendsCard/FriendsCard.svelte
index c4ac918..296e471 100644
--- a/src/lib/cards/FriendsCard/FriendsCard.svelte
+++ b/src/lib/cards/FriendsCard/FriendsCard.svelte
@@ -61,6 +61,10 @@
 		return 'lg';
 	});
 
+	function removeFriend(did: string) {
+		item.cardData.friends = item.cardData.friends.filter((d: string) => d !== did);
+	}
+
 	function getLink(profile: FriendsProfile): string {
 		if (profile.hasBlento && profile.handle && profile.handle !== 'handle.invalid') {
 			return `/${profile.handle}`;
@@ -85,17 +89,40 @@
 		<div class="">
 			<div class="flex flex-wrap items-center justify-center" style="padding: {olY}px 0 0 {olX}px;">
 				{#each profiles as profile (profile.did)}
-					<a
-						href={getLink(profile)}
-						class="accent:ring-accent-500 relative block rounded-full ring-2 ring-white transition-transform hover:scale-110 dark:ring-neutral-900"
-						style="margin: -{olY}px 0 0 -{olX}px;"
-					>
-						<Avatar
-							src={profile.avatar}
-							alt={profile.handle}
-							class={sizeClass === 'sm' ? 'size-12' : sizeClass === 'md' ? 'size-16' : 'size-20'}
-						/>
-					</a>
+					<div class="group relative" style="margin: -{olY}px 0 0 -{olX}px;">
+						<a
+							href={getLink(profile)}
+							class="accent:ring-accent-500 relative block rounded-full ring-2 ring-white transition-transform hover:scale-110 dark:ring-neutral-900"
+						>
+							<Avatar
+								src={profile.avatar}
+								alt={profile.handle}
+								class={sizeClass === 'sm' ? 'size-12' : sizeClass === 'md' ? 'size-16' : 'size-20'}
+							/>
+						</a>
+						{#if canEdit()}
+							<button
+								aria-label="Remove friend"
+								class="absolute inset-0 flex cursor-pointer items-center justify-center rounded-full bg-black/50 text-white opacity-0 transition-opacity group-hover:opacity-100"
+								onclick={(e) => {
+									e.preventDefault();
+									e.stopPropagation();
+									removeFriend(profile.did);
+								}}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke-width="2.5"
+									stroke="currentColor"
+									class="size-4"
+								>
+									<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+								</svg>
+							</button>
+						{/if}
+					</div>
 				{/each}
 			</div>
 		</div>
diff --git a/src/lib/cards/FriendsCard/FriendsCardSettings.svelte b/src/lib/cards/FriendsCard/FriendsCardSettings.svelte
index 389a857..2a531bf 100644
--- a/src/lib/cards/FriendsCard/FriendsCardSettings.svelte
+++ b/src/lib/cards/FriendsCard/FriendsCardSettings.svelte
@@ -1,94 +1,23 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import type { Item } from '$lib/types';
 	import type { SettingsComponentProps } from '../types';
 	import type { AppBskyActorDefs } from '@atcute/bluesky';
-	import type { Did } from '@atcute/lexicons';
-	import type { FriendsProfile } from '.';
-	import { getBlentoOrBskyProfile } from '$lib/atproto/methods';
 	import HandleInput from '$lib/atproto/UI/HandleInput.svelte';
-	import { Avatar, Button } from '@foxui/core';
 
 	let { item = $bindable<Item>() }: SettingsComponentProps = $props();
 
 	let handleValue = $state('');
 	let inputRef: HTMLInputElement | null = $state(null);
-	let profiles: FriendsProfile[] = $state([]);
-
-	let dids: string[] = $derived(item.cardData.friends ?? []);
-
-	onMount(() => {
-		loadProfiles();
-	});
-
-	async function loadProfiles() {
-		const results = await Promise.all(
-			dids.map((did) => getBlentoOrBskyProfile({ did: did as Did }).catch(() => undefined))
-		);
-		profiles = results.filter((p): p is FriendsProfile => !!p && p.handle !== 'handle.invalid');
-	}
 
 	function addFriend(actor: AppBskyActorDefs.ProfileViewBasic) {
 		if (!item.cardData.friends) item.cardData.friends = [];
 		if (item.cardData.friends.includes(actor.did)) return;
 		item.cardData.friends = [...item.cardData.friends, actor.did];
-		profiles = [
-			...profiles,
-			{
-				did: actor.did,
-				handle: actor.handle,
-				displayName: actor.displayName || actor.handle,
-				avatar: actor.avatar,
-				hasBlento: false
-			} as FriendsProfile
-		];
 		requestAnimationFrame(() => {
 			handleValue = '';
 			if (inputRef) inputRef.value = '';
 		});
 	}
-
-	function removeFriend(did: string) {
-		item.cardData.friends = item.cardData.friends.filter((d: string) => d !== did);
-		profiles = profiles.filter((p) => p.did !== did);
-	}
-
-	function getProfile(did: string): FriendsProfile | undefined {
-		return profiles.find((p) => p.did === did);
-	}
 </script>
 
-<div class="flex flex-col gap-3">
-	<HandleInput bind:value={handleValue} onselected={addFriend} bind:ref={inputRef} />
-
-	{#if dids.length > 0}
-		<div class="flex flex-col gap-1.5">
-			{#each dids as did (did)}
-				{@const profile = getProfile(did)}
-				<div class="flex items-center gap-2">
-					<Avatar src={profile?.avatar} alt={profile?.handle ?? did} class="size-6 rounded-full" />
-					<span class="min-w-0 flex-1 truncate text-sm">
-						{profile?.handle ?? did}
-					</span>
-					<Button
-						variant="ghost"
-						size="icon"
-						class="size-6 min-w-6"
-						onclick={() => removeFriend(did)}
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke-width="2"
-							stroke="currentColor"
-							class="size-3.5"
-						>
-							<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-						</svg>
-					</Button>
-				</div>
-			{/each}
-		</div>
-	{/if}
-</div>
+<HandleInput bind:value={handleValue} onselected={addFriend} bind:ref={inputRef} />
diff --git a/src/lib/cards/FriendsCard/index.ts b/src/lib/cards/FriendsCard/index.ts
index 5ad6fb7..d6c5302 100644
--- a/src/lib/cards/FriendsCard/index.ts
+++ b/src/lib/cards/FriendsCard/index.ts
@@ -36,7 +36,8 @@ export const FriendsCardDefinition = {
 	minW: 2,
 	minH: 2,
 	name: 'Friends',
-	// groups: ['Social'],
+	groups: ['Social'],
 	keywords: ['friends', 'avatars', 'people', 'community', 'blentos'],
-	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" /></svg>`
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" /></svg>`,
+	canHaveLabel: true
 } as CardDefinition & { type: 'friends' };
diff --git a/src/lib/cards/GameCards/DinoGameCard/index.ts b/src/lib/cards/GameCards/DinoGameCard/index.ts
index 2546769..6c61109 100644
--- a/src/lib/cards/GameCards/DinoGameCard/index.ts
+++ b/src/lib/cards/GameCards/DinoGameCard/index.ts
@@ -8,9 +8,9 @@ export const DinoGameCardDefinition = {
 	allowSetColor: true,
 	createNew: (card) => {
 		card.w = 4;
-		card.h = 4;
+		card.h = 2;
 		card.mobileW = 8;
-		card.mobileH = 6;
+		card.mobileH = 4;
 		card.cardData = {};
 	},
 	canHaveLabel: true,
diff --git a/src/lib/cards/GameCards/TetrisCard/index.ts b/src/lib/cards/GameCards/TetrisCard/index.ts
index 5b75cbd..fdab5a1 100644
--- a/src/lib/cards/GameCards/TetrisCard/index.ts
+++ b/src/lib/cards/GameCards/TetrisCard/index.ts
@@ -9,10 +9,9 @@ export const TetrisCardDefinition = {
 	type: 'tetris',
 	contentComponent: TetrisCard as unknown as Component<ContentComponentProps>,
 	allowSetColor: true,
-	defaultColor: 'accent',
 	createNew: (card) => {
-		card.w = 4;
-		card.h = 6;
+		card.w = 2;
+		card.h = 4;
 		card.mobileW = 8;
 		card.mobileH = 12;
 		card.cardData = {};
diff --git a/src/lib/cards/PopfeedReviews/PopfeedReviewsCard.svelte b/src/lib/cards/PopfeedReviews/PopfeedReviewsCard.svelte
index 32924b0..c2cae3e 100644
--- a/src/lib/cards/PopfeedReviews/PopfeedReviewsCard.svelte
+++ b/src/lib/cards/PopfeedReviews/PopfeedReviewsCard.svelte
@@ -1,9 +1,15 @@
 <script lang="ts">
 	import type { Item } from '$lib/types';
 	import { onMount } from 'svelte';
-	import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context';
+	import {
+		getAdditionalUserData,
+		getCanEdit,
+		getDidContext,
+		getHandleContext
+	} from '$lib/website/context';
 	import { CardDefinitionsByType } from '..';
 	import Rating from './Rating.svelte';
+	import { Button } from '@foxui/core';
 
 	let { item }: { item: Item } = $props();
 
@@ -27,6 +33,8 @@
 			data[item.cardType] = feed;
 		}
 	});
+
+	let canEdit = getCanEdit();
 </script>
 
 <div class="z-10 flex h-full gap-4 overflow-x-scroll p-4">
@@ -36,11 +44,11 @@
 				<a
 					rel="noopener noreferrer"
 					target="_blank"
-					class="flex"
+					class="flex h-full shrink-0"
 					href="https://popfeed.social/review/{review.uri}"
 				>
 					<div
-						class="relative flex aspect-[2/3] h-full flex-col items-center justify-end overflow-hidden rounded-xl p-1"
+						class="relative flex aspect-2/3 h-full flex-col items-center justify-end overflow-hidden rounded-xl p-1"
 					>
 						<img
 							src={review.value.posterUrl}
@@ -49,7 +57,7 @@
 						/>
 
 						<div
-							class="from-base-900/80 absolute right-0 bottom-0 left-0 h-1/3 bg-gradient-to-t via-transparent"
+							class="from-base-900/80 absolute right-0 bottom-0 left-0 h-1/3 bg-linear-to-t via-transparent"
 						></div>
 
 						<Rating class="z-10 text-lg" rating={review.value.rating} />
@@ -58,10 +66,13 @@
 			{/if}
 		{/each}
 	{:else if feed}
-		<div
-			class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full w-full items-center justify-center text-center text-sm"
-		>
+		<div class="flex h-full w-full flex-col items-center justify-center gap-4 text-center text-sm">
 			No reviews yet.
+			{#if canEdit()}
+				<Button href="https://popfeed.social/" target="_blank" rel="noopener noreferrer">
+					Review something on Popfeed
+				</Button>
+			{/if}
 		</div>
 	{:else}
 		<div
diff --git a/src/lib/cards/StandardSiteDocumentListCard/StandardSiteDocumentListCard.svelte b/src/lib/cards/StandardSiteDocumentListCard/StandardSiteDocumentListCard.svelte
index 8cdcfe5..238b0d2 100644
--- a/src/lib/cards/StandardSiteDocumentListCard/StandardSiteDocumentListCard.svelte
+++ b/src/lib/cards/StandardSiteDocumentListCard/StandardSiteDocumentListCard.svelte
@@ -1,9 +1,15 @@
 <script lang="ts">
-	import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context';
+	import {
+		getAdditionalUserData,
+		getCanEdit,
+		getDidContext,
+		getHandleContext
+	} from '$lib/website/context';
 	import { onMount } from 'svelte';
 	import { CardDefinitionsByType } from '..';
 	import type { ContentComponentProps } from '../types';
 	import BlogEntry from './BlogEntry.svelte';
+	import { Button } from '@foxui/core';
 
 	let { item }: ContentComponentProps = $props();
 
@@ -14,6 +20,8 @@
 	let did = getDidContext();
 	let handle = getHandleContext();
 
+	let canEdit = getCanEdit();
+
 	onMount(async () => {
 		if (!feed) {
 			feed = (await CardDefinitionsByType[item.cardType]?.loadData?.([item], {
@@ -37,22 +45,23 @@
 			/>
 		{/each}
 	{:else if feed}
-		<div
-			class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full flex-col items-center justify-center gap-2 text-center text-sm"
-		>
-			<span>No blog posts found.</span>
-			<span>
-				Create some on <a
-					href="https://leaflet.pub"
-					target="_blank"
-					rel="noopener noreferrer"
-					class="underline">Leaflet</a
-				>
-				or
-				<a href="https://pckt.pub" target="_blank" rel="noopener noreferrer" class="underline"
-					>Pckt</a
-				>
-			</span>
+		<div class="z-50 flex h-full flex-col items-center justify-center gap-4 text-center text-sm">
+			<span class="text-lg font-semibold">No blog posts found.</span>
+
+			{#if canEdit()}
+				<span>
+					Create some for example on <Button
+						href="https://leaflet.pub"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="">Leaflet</Button
+					>
+					or
+					<Button href="https://pckt.pub" target="_blank" rel="noopener noreferrer" class=""
+						>Pckt</Button
+					>
+				</span>
+			{/if}
 		</div>
 	{:else}
 		<div
diff --git a/src/lib/cards/StatusphereCard/index.ts b/src/lib/cards/StatusphereCard/index.ts
index 3630bcc..a3d1929 100644
--- a/src/lib/cards/StatusphereCard/index.ts
+++ b/src/lib/cards/StatusphereCard/index.ts
@@ -13,10 +13,7 @@ export const StatusphereCardDefinition = {
 	contentComponent: StatusphereCard,
 	editingContentComponent: EditStatusphereCard,
 
-	createNew: (item) => {
-		item.h = 3;
-		item.mobileH = 5;
-	},
+	createNew: (item) => {},
 
 	loadData: async (items, { did }) => {
 		const data = await listRecords({ did, collection: 'xyz.statusphere.status', limit: 1 });
diff --git a/src/lib/components/card-command/CardCommand.svelte b/src/lib/components/card-command/CardCommand.svelte
index 71d94a7..ec2b24d 100644
--- a/src/lib/components/card-command/CardCommand.svelte
+++ b/src/lib/components/card-command/CardCommand.svelte
@@ -75,7 +75,7 @@
 	function handleKeydown(e: KeyboardEvent) {
 		if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
 			e.preventDefault();
-			open = true;
+			open = !open;
 		}
 		if (e.key === '+' && !isTyping()) {
 			e.preventDefault();
diff --git a/src/lib/website/Account.svelte b/src/lib/website/Account.svelte
index c48150c..d263cdd 100644
--- a/src/lib/website/Account.svelte
+++ b/src/lib/website/Account.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { user, login, logout } from '$lib/atproto';
+	import { getHandleOrDid } from '$lib/atproto/methods';
 	import type { WebsiteData } from '$lib/types';
 	import type { ActorIdentifier } from '@atcute/lexicons';
 	import { Avatar, Button, Popover } from '@foxui/core';
@@ -14,7 +16,7 @@
 </script>
 
 {#if user.isLoggedIn && user.profile}
-	<div class="fixed right-4 bottom-4 z-20">
+	<div class="fixed top-4 right-4 z-20">
 		<Popover sideOffset={8} bind:open={settingsPopoverOpen} class="bg-base-100 dark:bg-base-900">
 			{#snippet child({ props })}
 				<button {...props}>
@@ -22,7 +24,18 @@
 				</button>
 			{/snippet}
 
-			<Button variant="ghost" onclick={logout}>Logout</Button>
+			<div class="flex flex-col">
+				{#if user.profile}
+					<Button
+						variant="ghost"
+						onclick={() => {
+							goto('/' + getHandleOrDid(user.profile), {});
+						}}>Leave edit mode</Button
+					>
+				{/if}
+
+				<Button variant="ghost" onclick={logout}>Logout</Button>
+			</div>
 		</Popover>
 	</div>
 {/if}
diff --git a/src/lib/website/Context.svelte b/src/lib/website/Context.svelte
index e0d6106..8cadf44 100644
--- a/src/lib/website/Context.svelte
+++ b/src/lib/website/Context.svelte
@@ -8,16 +8,18 @@
 
 	let {
 		data,
-		children
+		children,
+		isEditing
 	}: {
 		data: WebsiteData;
 		children: Snippet<[]>;
+		isEditing?: boolean;
 	} = $props();
 
 	// svelte-ignore state_referenced_locally
 	setAdditionalUserData(data.additionalData);
 
-	setCanEdit(() => dev || (user.isLoggedIn && user.profile?.did === data.did));
+	setCanEdit(() => dev || (user.isLoggedIn && user.profile?.did === data.did && isEditing === true));
 
 	// svelte-ignore state_referenced_locally
 	setDidContext(data.did as Did);
diff --git a/src/lib/website/EditableWebsite.svelte b/src/lib/website/EditableWebsite.svelte
index 023a862..4c2ac3e 100644
--- a/src/lib/website/EditableWebsite.svelte
+++ b/src/lib/website/EditableWebsite.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button, toast, Toaster, Sidebar } from '@foxui/core';
+	import { Button, Modal, toast, Toaster, Sidebar } from '@foxui/core';
 	import { COLUMNS, margin, mobileMargin } from '$lib';
 	import {
 		checkAndUploadImage,
@@ -123,6 +123,7 @@
 
 	let showingMobileView = $state(false);
 	let isMobile = $derived(showingMobileView || (innerWidth.current ?? 1000) < 1024);
+	let showMobileWarning = $state((innerWidth.current ?? 1000) < 1024);
 
 	setIsMobile(() => isMobile);
 
@@ -191,6 +192,26 @@
 		}
 	}
 
+	function cleanupDialogArtifacts() {
+		// bits-ui's body scroll lock and portal may not clean up fully when the
+		// modal is unmounted instead of closed via the open prop.
+		const restore = () => {
+			document.body.style.removeProperty('overflow');
+			document.body.style.removeProperty('pointer-events');
+			document.body.style.removeProperty('padding-right');
+			document.body.style.removeProperty('margin-right');
+			// Remove any orphaned dialog overlay/content elements left by the portal
+			for (const el of document.querySelectorAll(
+				'[data-dialog-overlay], [data-dialog-content]'
+			)) {
+				el.remove();
+			}
+		};
+		// Run immediately and again after bits-ui's 24ms scheduled cleanup
+		restore();
+		setTimeout(restore, 50);
+	}
+
 	async function saveNewItem() {
 		if (!newItem.item) return;
 		const item = newItem.item;
@@ -211,6 +232,7 @@
 		newItem = {};
 
 		await tick();
+		cleanupDialogArtifacts();
 
 		scrollToItem(item, isMobile, container);
 	}
@@ -259,8 +281,6 @@
 		}
 	}
 
-	const sidebarItems = AllCardDefinitions.filter((cardDef) => cardDef.name);
-
 	function addAllCardTypes() {
 		const groupOrder = ['Core', 'Social', 'Media', 'Content', 'Visual', 'Utilities', 'Games'];
 		const grouped = new SvelteMap<string, CardDefinition[]>();
@@ -1133,7 +1153,7 @@
 
 <Account {data} />
 
-<Context {data}>
+<Context {data} isEditing={true}>
 	<CardCommand
 		bind:open={showCardCommand}
 		onselect={(cardDef: CardDefinition) => {
@@ -1172,8 +1192,10 @@
 				saveNewItem();
 			}}
 			bind:item={newItem.item}
-			oncancel={() => {
+			oncancel={async () => {
 				newItem = {};
+				await tick();
+				cleanupDialogArtifacts();
 			}}
 		/>
 	{/if}
@@ -1185,6 +1207,30 @@
 		page={data.page}
 	/>
 
+	<Modal open={showMobileWarning} closeButton={false}>
+		<div class="flex flex-col items-center gap-4 text-center">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				class="text-accent-500 size-10"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3"
+				/>
+			</svg>
+			<p class="text-base-700 dark:text-base-300 text-xl font-bold">Mobile Editing</p>
+			<p class="text-base-500 dark:text-base-400 text-sm">
+				Mobile editing is currently experimental. For the best experience, use a desktop browser.
+			</p>
+			<Button class="mt-2 w-full" onclick={() => (showMobileWarning = false)}>Continue</Button>
+		</div>
+	</Modal>
+
 	<div
 		class={[
 			'@container/wrapper relative w-full',