diff --git a/src/lib/cards/ButtonCard/ButtonCard.svelte b/src/lib/cards/ButtonCard/ButtonCard.svelte
--- 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
--- 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
--- 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>