diff --git a/src/lib/website/EditableWebsite.svelte b/src/lib/website/EditableWebsite.svelte
index a3a5cc6..9d45b00 100644
--- a/src/lib/website/EditableWebsite.svelte
+++ b/src/lib/website/EditableWebsite.svelte
@@ -31,6 +31,7 @@
 	import { compressImage } from '../helper';
 	import Account from './Account.svelte';
 	import EditBar from './EditBar.svelte';
+	import { user } from '$lib/atproto';
 
 	let {
 		data
@@ -744,18 +745,20 @@
 		</div>
 	</Sidebar>
 
-	<EditBar
-		{data}
-		bind:linkValue
-		bind:isSaving
-		bind:showingMobileView
-		bind:showSettings
-		{newCard}
-		{addLink}
-		{save}
-		{handleImageInputChange}
-		{handleVideoInputChange}
-	/>
+	{#if user.isLoggedIn}
+		<EditBar
+			{data}
+			bind:linkValue
+			bind:isSaving
+			bind:showingMobileView
+			bind:showSettings
+			{newCard}
+			{addLink}
+			{save}
+			{handleImageInputChange}
+			{handleVideoInputChange}
+		/>
+	{/if}
 
 	<Toaster />
 </Context>
diff --git a/src/lib/website/EmptyState.svelte b/src/lib/website/EmptyState.svelte
new file mode 100644
index 0000000..eb789ac
--- /dev/null
+++ b/src/lib/website/EmptyState.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { login, user } from '$lib/atproto';
+	import BaseCard from '$lib/cards/BaseCard/BaseCard.svelte';
+	import Card from '$lib/cards/Card/Card.svelte';
+	import type { Item, WebsiteData } from '$lib/types';
+	import type { ActorIdentifier } from '@atcute/lexicons';
+	import { Button } from '@foxui/core';
+
+	let { data }: { data: WebsiteData } = $props();
+
+	let cards = $derived.by((): Item[] => {
+		const items: Item[] = [];
+
+		// Name + "No blento yet" card
+		items.push({
+			id: 'empty-main',
+			x: 0,
+			y: 0,
+			w: 6,
+			h: 2,
+			mobileX: 0,
+			mobileY: 0,
+			mobileW: 8,
+			mobileH: 3,
+			cardType: 'text',
+			color: 'red',
+			cardData: {
+				text: `## No blento yet!`,
+				textAlign: 'center',
+				verticalAlign: 'center'
+			}
+		});
+
+		// Bluesky social icon
+		items.push({
+			id: 'empty-bluesky',
+			x: 0,
+			y: 2,
+			w: 2,
+			h: 2,
+			mobileX: 0,
+			mobileY: 3,
+			mobileW: 3,
+			mobileH: 3,
+			cardType: 'bigsocial',
+			cardData: {
+				platform: 'bluesky',
+				href: `https://bsky.app/profile/${data.handle}`,
+				color: '0285FF'
+			}
+		});
+
+		return items;
+	});
+
+	let maxHeight = $derived(cards.reduce((max, item) => Math.max(max, item.y + item.h), 0));
+
+	let maxMobileHeight = $derived(
+		cards.reduce((max, item) => Math.max(max, item.mobileY + item.mobileH), 0)
+	);
+</script>
+
+{#each cards as item (item.id)}
+	<BaseCard {item}>
+		<Card {item} />
+	</BaseCard>
+{/each}
+
+<!-- Spacer for grid height -->
+<div class="hidden @[42rem]/grid:block" style="height: {(maxHeight / 8) * 100}cqw;"></div>
+<div class="@[42rem]/grid:hidden" style="height: {(maxMobileHeight / 4) * 100}cqw;"></div>
+
+{#if !user.isLoggedIn}
+	<div
+		class="dark:bg-base-950 border-base-200 dark:border-base-900 fixed top-4 right-4 z-20 flex flex-col gap-4 rounded-2xl border bg-white p-4 shadow-lg"
+	>
+		<span class="text-sm font-semibold">Login to edit your page</span>
+
+		<Button
+			onclick={async () => {
+				await login(data.handle as ActorIdentifier);
+			}}>Login</Button
+		>
+	</div>
+{/if}
diff --git a/src/lib/website/Website.svelte b/src/lib/website/Website.svelte
index 9f00a02..6e6b45c 100644
--- a/src/lib/website/Website.svelte
+++ b/src/lib/website/Website.svelte
@@ -10,6 +10,7 @@
 	import Head from './Head.svelte';
 	import type { Did, Handle } from '@atcute/lexicons';
 	import QRModalProvider from '$lib/components/qr/QRModalProvider.svelte';
+	import EmptyState from './EmptyState.svelte';
 
 	let { data }: { data: WebsiteData } = $props();
 
@@ -55,12 +56,16 @@
 		>
 			<div></div>
 			<div bind:this={container} class="@container/grid relative col-span-3 px-2 py-8 lg:px-8">
-				{#each data.cards.toSorted(sortItems) as item (item.id)}
-					<BaseCard {item}>
-						<Card {item} />
-					</BaseCard>
-				{/each}
-				<div style="height: {(maxHeight / 8) * 100}cqw;"></div>
+				{#if data.cards.length === 0}
+					<EmptyState {data} />
+				{:else}
+					{#each data.cards.toSorted(sortItems) as item (item.id)}
+						<BaseCard {item}>
+							<Card {item} />
+						</BaseCard>
+					{/each}
+					<div style="height: {(maxHeight / 8) * 100}cqw;"></div>
+				{/if}
 			</div>
 		</div>