diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 591f662..fe14c0b 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -1,28 +1,29 @@
 {
-	"permissions": {
-		"allow": [
-			"Bash(pnpm check:*)",
-			"mcp__ide__getDiagnostics",
-			"mcp__plugin_svelte_svelte__svelte-autofixer",
-			"mcp__plugin_svelte_svelte__list-sections",
-			"Bash(pkill:*)",
-			"Bash(timeout 8 pnpm dev:*)",
-			"Bash(git checkout:*)",
-			"Bash(npx svelte-kit:*)",
-			"Bash(ls:*)",
-			"Bash(pnpm format:*)",
-			"Bash(pnpm add:*)",
-			"WebSearch",
-			"WebFetch(domain:github.com)",
-			"WebFetch(domain:flipclockjs.com)",
-			"WebFetch(domain:codepen.io)",
-			"WebFetch(domain:flo-bit.dev)",
-			"Bash(pnpm install)",
-			"Bash(pnpm install:*)",
-			"Bash(pnpm config:*)",
-			"Bash(lsof:*)",
-			"Bash(pnpm dev)",
-			"Bash(pnpm exec svelte-kit:*)"
-		]
-	}
+  "permissions": {
+    "allow": [
+      "Bash(pnpm check:*)",
+      "mcp__ide__getDiagnostics",
+      "mcp__plugin_svelte_svelte__svelte-autofixer",
+      "mcp__plugin_svelte_svelte__list-sections",
+      "Bash(pkill:*)",
+      "Bash(timeout 8 pnpm dev:*)",
+      "Bash(git checkout:*)",
+      "Bash(npx svelte-kit:*)",
+      "Bash(ls:*)",
+      "Bash(pnpm format:*)",
+      "Bash(pnpm add:*)",
+      "WebSearch",
+      "WebFetch(domain:github.com)",
+      "WebFetch(domain:flipclockjs.com)",
+      "WebFetch(domain:codepen.io)",
+      "WebFetch(domain:flo-bit.dev)",
+      "Bash(pnpm install)",
+      "Bash(pnpm install:*)",
+      "Bash(pnpm config:*)",
+      "Bash(lsof:*)",
+      "Bash(pnpm dev)",
+      "Bash(pnpm exec svelte-kit:*)",
+      "Bash(pnpm build:*)"
+    ]
+  }
 }
diff --git a/src/lib/cards/ButtonCard/ButtonCard.svelte b/src/lib/cards/ButtonCard/ButtonCard.svelte
new file mode 100644
index 0000000..d8048e5
--- /dev/null
+++ b/src/lib/cards/ButtonCard/ButtonCard.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { ContentComponentProps } from '../types';
+
+	let { item }: ContentComponentProps = $props();
+</script>
+
+<a
+	href={item.cardData.href || '#'}
+	target="_blank"
+	rel="noopener noreferrer"
+	class="flex h-full w-full items-center justify-center p-4"
+>
+	<span
+		class="bg-accent-500 hover:bg-accent-600 text-base-50 inline-flex items-center justify-center rounded-xl px-6 py-3 text-center font-semibold shadow-md transition-colors"
+	>
+		{item.cardData.text || 'Click me'}
+	</span>
+</a>
diff --git a/src/lib/cards/ButtonCard/ButtonCardSettings.svelte b/src/lib/cards/ButtonCard/ButtonCardSettings.svelte
new file mode 100644
index 0000000..a248500
--- /dev/null
+++ b/src/lib/cards/ButtonCard/ButtonCardSettings.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Item } from '$lib/types';
+	import type { SettingsComponentProps } from '../types';
+	import { Input, Label } from '@foxui/core';
+
+	let { item = $bindable<Item>(), onclose }: SettingsComponentProps = $props();
+
+	function confirmUrl() {
+		let href = item.cardData.href?.trim() || '';
+		if (href && !/^https?:\/\//i.test(href)) {
+			href = 'https://' + href;
+		}
+		item.cardData.href = href;
+		onclose();
+	}
+</script>
+
+<div class="flex flex-col gap-3">
+	<div class="flex flex-col gap-1">
+		<Label for="button-href" class="text-sm">Link URL</Label>
+		<Input
+			id="button-href"
+			bind:value={item.cardData.href}
+			placeholder="youtube.com"
+			class="text-sm"
+			onkeydown={(event) => {
+				if (event.code === 'Enter') {
+					event.preventDefault();
+					confirmUrl();
+				}
+			}}
+		/>
+	</div>
+</div>
diff --git a/src/lib/cards/ButtonCard/EditingButtonCard.svelte b/src/lib/cards/ButtonCard/EditingButtonCard.svelte
new file mode 100644
index 0000000..d39a5b1
--- /dev/null
+++ b/src/lib/cards/ButtonCard/EditingButtonCard.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { ContentComponentProps } from '../types';
+	import PlainTextEditor from '$lib/components/PlainTextEditor.svelte';
+
+	let { item = $bindable() }: ContentComponentProps = $props();
+</script>
+
+<div class="flex h-full w-full flex-col items-center justify-center gap-2 p-4">
+	<div
+		class="bg-accent-500 text-base-50 inline-flex items-center justify-center rounded-xl px-6 py-3 shadow-md"
+	>
+		<PlainTextEditor
+			key="text"
+			bind:contentDict={item.cardData}
+			placeholder="Button text"
+			class="text-center font-semibold"
+		/>
+	</div>
+</div>
diff --git a/src/lib/cards/ButtonCard/index.ts b/src/lib/cards/ButtonCard/index.ts
new file mode 100644
index 0000000..e5c0080
--- /dev/null
+++ b/src/lib/cards/ButtonCard/index.ts
@@ -0,0 +1,31 @@
+import type { CardDefinition } from '../types';
+import ButtonCard from './ButtonCard.svelte';
+import EditingButtonCard from './EditingButtonCard.svelte';
+import ButtonCardSettings from './ButtonCardSettings.svelte';
+
+export const ButtonCardDefinition: CardDefinition = {
+	type: 'button',
+	contentComponent: ButtonCard,
+	editingContentComponent: EditingButtonCard,
+	settingsComponent: ButtonCardSettings,
+	sidebarButtonText: 'Button',
+
+	createNew: (card) => {
+		card.cardData = {
+			text: 'Click me'
+		};
+		card.w = 2;
+		card.h = 1;
+		card.mobileW = 4;
+		card.mobileH = 2;
+	},
+
+	defaultColor: 'transparent',
+	allowSetColor: true,
+	canHaveLabel: false,
+
+	minW: 2,
+	minH: 1,
+	maxW: 8,
+	maxH: 4
+};
diff --git a/src/lib/cards/index.ts b/src/lib/cards/index.ts
index 1aa9e96..59e41cf 100644
--- a/src/lib/cards/index.ts
+++ b/src/lib/cards/index.ts
@@ -31,9 +31,11 @@ import { VCardCardDefinition } from './VCardCard';
 import { DrawCardDefinition } from './DrawCard';
 import { TimerCardDefinition } from './TimerCard';
 import { SpotifyCardDefinition } from './SpotifyCard';
+import { ButtonCardDefinition } from './ButtonCard';
 // import { Model3DCardDefinition } from './Model3DCard';
 
 export const AllCardDefinitions = [
+	ButtonCardDefinition,
 	ImageCardDefinition,
 	VideoCardDefinition,
 	TextCardDefinition,
-- 
2.51.2


From 246e5608e70ae18c58d0166669fe8c3bfe8c0f49 Mon Sep 17 00:00:00 2001
From: unbedenklich <106080544+unbedenklich@users.noreply.github.com>
Date: Thu, 29 Jan 2026 21:21:41 +0100
Subject: [PATCH 2/3] run format

---
 .claude/settings.local.json | 54 ++++++++++++++++++-------------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index fe14c0b..03896c1 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -1,29 +1,29 @@
 {
-  "permissions": {
-    "allow": [
-      "Bash(pnpm check:*)",
-      "mcp__ide__getDiagnostics",
-      "mcp__plugin_svelte_svelte__svelte-autofixer",
-      "mcp__plugin_svelte_svelte__list-sections",
-      "Bash(pkill:*)",
-      "Bash(timeout 8 pnpm dev:*)",
-      "Bash(git checkout:*)",
-      "Bash(npx svelte-kit:*)",
-      "Bash(ls:*)",
-      "Bash(pnpm format:*)",
-      "Bash(pnpm add:*)",
-      "WebSearch",
-      "WebFetch(domain:github.com)",
-      "WebFetch(domain:flipclockjs.com)",
-      "WebFetch(domain:codepen.io)",
-      "WebFetch(domain:flo-bit.dev)",
-      "Bash(pnpm install)",
-      "Bash(pnpm install:*)",
-      "Bash(pnpm config:*)",
-      "Bash(lsof:*)",
-      "Bash(pnpm dev)",
-      "Bash(pnpm exec svelte-kit:*)",
-      "Bash(pnpm build:*)"
-    ]
-  }
+	"permissions": {
+		"allow": [
+			"Bash(pnpm check:*)",
+			"mcp__ide__getDiagnostics",
+			"mcp__plugin_svelte_svelte__svelte-autofixer",
+			"mcp__plugin_svelte_svelte__list-sections",
+			"Bash(pkill:*)",
+			"Bash(timeout 8 pnpm dev:*)",
+			"Bash(git checkout:*)",
+			"Bash(npx svelte-kit:*)",
+			"Bash(ls:*)",
+			"Bash(pnpm format:*)",
+			"Bash(pnpm add:*)",
+			"WebSearch",
+			"WebFetch(domain:github.com)",
+			"WebFetch(domain:flipclockjs.com)",
+			"WebFetch(domain:codepen.io)",
+			"WebFetch(domain:flo-bit.dev)",
+			"Bash(pnpm install)",
+			"Bash(pnpm install:*)",
+			"Bash(pnpm config:*)",
+			"Bash(lsof:*)",
+			"Bash(pnpm dev)",
+			"Bash(pnpm exec svelte-kit:*)",
+			"Bash(pnpm build:*)"
+		]
+	}
 }
-- 
2.51.2


From 5e6395cfbf2fda73750616d3c0b972843196c24d Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Thu, 29 Jan 2026 22:56:48 +0100
Subject: [PATCH 3/3] stuff

---
 src/lib/cards/ButtonCard/ButtonCard.svelte    | 39 +++++++++++++++----
 .../ButtonCard/ButtonCardSettings.svelte      |  6 +--
 .../cards/ButtonCard/EditingButtonCard.svelte | 18 ++++-----
 3 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/src/lib/cards/ButtonCard/ButtonCard.svelte b/src/lib/cards/ButtonCard/ButtonCard.svelte
index d8048e5..36fd549 100644
--- a/src/lib/cards/ButtonCard/ButtonCard.svelte
+++ b/src/lib/cards/ButtonCard/ButtonCard.svelte
@@ -1,18 +1,41 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
+	import { user } from '$lib/atproto';
+	import { getHandleOrDid } from '$lib/atproto/methods';
+	import { loginModalState } from '$lib/atproto/UI/LoginModal.svelte';
 	import type { ContentComponentProps } from '../types';
 
 	let { item }: ContentComponentProps = $props();
 </script>
 
-<a
-	href={item.cardData.href || '#'}
-	target="_blank"
-	rel="noopener noreferrer"
-	class="flex h-full w-full items-center justify-center p-4"
->
+{#snippet content()}
 	<span
-		class="bg-accent-500 hover:bg-accent-600 text-base-50 inline-flex items-center justify-center rounded-xl px-6 py-3 text-center font-semibold shadow-md transition-colors"
+		class="text-base-950 dark:text-base-50 line-clamp-1 inline-flex items-center justify-center px-4 text-2xl font-semibold"
 	>
 		{item.cardData.text || 'Click me'}
 	</span>
-</a>
+{/snippet}
+
+{#if item.cardData.href === '#login'}
+	<button
+		onclick={() => {
+			if (user.isLoggedIn && user.profile) {
+				goto('/' + getHandleOrDid(user.profile) + '/edit', {});
+			} else {
+				loginModalState.show();
+			}
+		}}
+		class="hover:bg-accent-100/20 flex h-full w-full cursor-pointer flex-col items-center justify-center transition-colors duration-100"
+	>
+		{@render content()}
+	</button>
+{:else}
+	<a
+		href={item.cardData.href || '#'}
+		target="_blank"
+		rel="noopener noreferrer"
+		class="hover:bg-accent-100/20 flex h-full w-full flex-col items-center justify-center transition-colors duration-100"
+	>
+		{@render content()}
+	</a>
+{/if}
diff --git a/src/lib/cards/ButtonCard/ButtonCardSettings.svelte b/src/lib/cards/ButtonCard/ButtonCardSettings.svelte
index a248500..8135e96 100644
--- a/src/lib/cards/ButtonCard/ButtonCardSettings.svelte
+++ b/src/lib/cards/ButtonCard/ButtonCardSettings.svelte
@@ -7,7 +7,7 @@
 
 	function confirmUrl() {
 		let href = item.cardData.href?.trim() || '';
-		if (href && !/^https?:\/\//i.test(href)) {
+		if (href && !/^https?:\/\//i.test(href) && !href.startsWith('#')) {
 			href = 'https://' + href;
 		}
 		item.cardData.href = href;
@@ -17,12 +17,12 @@
 
 <div class="flex flex-col gap-3">
 	<div class="flex flex-col gap-1">
-		<Label for="button-href" class="text-sm">Link URL</Label>
+		<Label for="button-href" class="text-sm">Link</Label>
 		<Input
 			id="button-href"
 			bind:value={item.cardData.href}
 			placeholder="youtube.com"
-			class="text-sm"
+			class="text-sm mt-2"
 			onkeydown={(event) => {
 				if (event.code === 'Enter') {
 					event.preventDefault();
diff --git a/src/lib/cards/ButtonCard/EditingButtonCard.svelte b/src/lib/cards/ButtonCard/EditingButtonCard.svelte
index d39a5b1..62376c1 100644
--- a/src/lib/cards/ButtonCard/EditingButtonCard.svelte
+++ b/src/lib/cards/ButtonCard/EditingButtonCard.svelte
@@ -5,15 +5,11 @@
 	let { item = $bindable() }: ContentComponentProps = $props();
 </script>
 
-<div class="flex h-full w-full flex-col items-center justify-center gap-2 p-4">
-	<div
-		class="bg-accent-500 text-base-50 inline-flex items-center justify-center rounded-xl px-6 py-3 shadow-md"
-	>
-		<PlainTextEditor
-			key="text"
-			bind:contentDict={item.cardData}
-			placeholder="Button text"
-			class="text-center font-semibold"
-		/>
-	</div>
+<div class="text-base-950 dark:text-base-50 flex h-full w-full flex-col items-center justify-center gap-2 px-4">
+	<PlainTextEditor
+		key="text"
+		bind:contentDict={item.cardData}
+		placeholder="Button text"
+		class="line-clamp-1 text-center text-2xl font-bold"
+	/>
 </div>