diff --git a/docs/Beta.md b/docs/Beta.md
deleted file mode 100644
index 6dc5a68..0000000
--- a/docs/Beta.md
+++ /dev/null
@@ -1,42 +0,0 @@
-# Todo for beta version
-
-- site.standard
-  - move description to markdownDescription and set description as text only
-
-- allow editing on mobile
-
-- get automatic layout for mobile if only edited on desktop (and vice versa)
-
-- add cards in middle of current position (both mobile and desktop version)
-
-- show nsfw warnings
-
-- card with big call to action button "create your blento"
-
-- ask to fill with some default cards on page creation
-
-- when adding images try to add them in a size that best fits aspect ratio
-
-- onboarding?
-
-- switch sidebar to a quick list of available cards with search function
-
-- test
-  - selfhosting
-
-- guestbook card
-
-- onboarding?
-
-- switch sidebar to a quick list of available cards with search function
-
-- test
-  - selfhosting
-
-- guestbook card
-
-- analytics?
-
-- refresh recently updated blentos (move to top of list, update profiles every 24 hours)
-
-- server side oauth?
diff --git a/package.json b/package.json
index 70fde20..b7e00bf 100644
--- a/package.json
+++ b/package.json
@@ -85,6 +85,7 @@
 		"svelte-sonner": "^1.0.7",
 		"tailwind-merge": "^3.4.0",
 		"tailwind-variants": "^3.2.2",
+		"tailwindcss-animate": "^1.0.7",
 		"three": "^0.176.0",
 		"turndown": "^7.2.2",
 		"wrangler": "^4.60.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6434d0a..fefeeb3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -146,6 +146,9 @@ importers:
       tailwind-variants:
         specifier: ^3.2.2
         version: 3.2.2(tailwind-merge@3.4.0)(tailwindcss@4.1.18)
+      tailwindcss-animate:
+        specifier: ^1.0.7
+        version: 1.0.7(tailwindcss@4.1.18)
       three:
         specifier: ^0.176.0
         version: 0.176.0
@@ -2800,6 +2803,11 @@ packages:
       tailwind-merge:
         optional: true
 
+  tailwindcss-animate@1.0.7:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==, tarball: https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+
   tailwindcss@4.1.18:
     resolution: {integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==}
 
@@ -5561,6 +5569,10 @@ snapshots:
     optionalDependencies:
       tailwind-merge: 3.4.0
 
+  tailwindcss-animate@1.0.7(tailwindcss@4.1.18):
+    dependencies:
+      tailwindcss: 4.1.18
+
   tailwindcss@4.1.18: {}
 
   tapable@2.3.0: {}
diff --git a/src/app.css b/src/app.css
index 3914088..a8f1c18 100644
--- a/src/app.css
+++ b/src/app.css
@@ -3,6 +3,10 @@
 @plugin '@tailwindcss/forms';
 @plugin '@tailwindcss/typography';
 
+
+@plugin "tailwindcss-animate";
+
+
 @source '../node_modules/@foxui';
 
 @custom-variant dark (&:where(.dark, .dark *):not(:where(.light, .light *)));
diff --git a/src/lib/cards/ATProtoCollectionsCard/index.ts b/src/lib/cards/ATProtoCollectionsCard/index.ts
index 95a06a8..3d50466 100644
--- a/src/lib/cards/ATProtoCollectionsCard/index.ts
+++ b/src/lib/cards/ATProtoCollectionsCard/index.ts
@@ -19,5 +19,9 @@ export const ATProtoCollectionsCardDefinition = {
 		item.w = 4;
 		item.mobileW = 8;
 	},
-	sidebarButtonText: 'Atmosphere Collections'
+	sidebarButtonText: 'Atmosphere Collections',
+
+	name: 'ATProto Collections',
+
+	groups: ['Social']
 } as CardDefinition & { type: 'atprotocollections' };
diff --git a/src/lib/cards/BigSocialCard/index.ts b/src/lib/cards/BigSocialCard/index.ts
index d0657bf..d46dbbc 100644
--- a/src/lib/cards/BigSocialCard/index.ts
+++ b/src/lib/cards/BigSocialCard/index.ts
@@ -51,7 +51,9 @@ export const BigSocialCardDefinition = {
 		return item;
 	},
 	urlHandlerPriority: 1,
-	canHaveLabel: true
+	canHaveLabel: true,
+
+	groups: ['Social']
 } as CardDefinition & { type: 'bigsocial' };
 
 import {
diff --git a/src/lib/cards/BlueskyMediaCard/index.ts b/src/lib/cards/BlueskyMediaCard/index.ts
index b3411a2..722ab57 100644
--- a/src/lib/cards/BlueskyMediaCard/index.ts
+++ b/src/lib/cards/BlueskyMediaCard/index.ts
@@ -8,5 +8,9 @@ export const BlueskyMediaCardDefinition = {
 	createNew: () => {},
 	creationModalComponent: CreateBlueskyMediaCardModal,
 	sidebarButtonText: 'Bluesky Media',
-	canHaveLabel: true
+	canHaveLabel: true,
+
+	groups: ['Media'],
+
+	name: 'Video/Image from Bluesky'
 } as CardDefinition & { type: 'blueskyMedia' };
diff --git a/src/lib/cards/BlueskyPostCard/index.ts b/src/lib/cards/BlueskyPostCard/index.ts
index aae6e61..5194efb 100644
--- a/src/lib/cards/BlueskyPostCard/index.ts
+++ b/src/lib/cards/BlueskyPostCard/index.ts
@@ -63,5 +63,7 @@ export const BlueskyPostCardDefinition = {
 		return postsMap;
 	},
 	minW: 4,
-	name: 'Bluesky Post'
+	name: 'Bluesky Post',
+
+	groups: ['Social']
 } as CardDefinition & { type: 'blueskyPost' };
diff --git a/src/lib/cards/ButtonCard/index.ts b/src/lib/cards/ButtonCard/index.ts
index e5c0080..48317ae 100644
--- a/src/lib/cards/ButtonCard/index.ts
+++ b/src/lib/cards/ButtonCard/index.ts
@@ -27,5 +27,8 @@ export const ButtonCardDefinition: CardDefinition = {
 	minW: 2,
 	minH: 1,
 	maxW: 8,
-	maxH: 4
+	maxH: 4,
+
+	groups: ['Utilities'],
+	name: 'Button'
 };
diff --git a/src/lib/cards/DrawCard/index.ts b/src/lib/cards/DrawCard/index.ts
index 29d99dd..0b36c69 100644
--- a/src/lib/cards/DrawCard/index.ts
+++ b/src/lib/cards/DrawCard/index.ts
@@ -23,5 +23,7 @@ export const DrawCardDefinition = {
 			strokeWidth: 1,
 			locked: true
 		};
-	}
+	},
+
+	groups: ['Visual']
 } as CardDefinition & { type: 'draw' };
diff --git a/src/lib/cards/EmbedCard/index.ts b/src/lib/cards/EmbedCard/index.ts
index 4bc8c95..52cd098 100644
--- a/src/lib/cards/EmbedCard/index.ts
+++ b/src/lib/cards/EmbedCard/index.ts
@@ -19,5 +19,5 @@ export const EmbedCardDefinition = {
 	// change: (item) => {
 	// 	return item;
 	// },
-	name: 'Embed Card'
+	name: 'Embed'
 } as CardDefinition & { type: 'embed' };
diff --git a/src/lib/cards/EventCard/index.ts b/src/lib/cards/EventCard/index.ts
index 5d03aca..01a219d 100644
--- a/src/lib/cards/EventCard/index.ts
+++ b/src/lib/cards/EventCard/index.ts
@@ -112,5 +112,7 @@ export const EventCardDefinition = {
 
 	urlHandlerPriority: 5,
 
-	name: 'Event Card'
+	name: 'Event',
+
+	groups: ['Social']
 } as CardDefinition & { type: 'event' };
diff --git a/src/lib/cards/FluidTextCard/index.ts b/src/lib/cards/FluidTextCard/index.ts
index 666e89f..a55d2f6 100644
--- a/src/lib/cards/FluidTextCard/index.ts
+++ b/src/lib/cards/FluidTextCard/index.ts
@@ -23,5 +23,8 @@ export const FluidTextCardDefinition = {
 	sidebarButtonText: 'Fluid Text',
 	defaultColor: 'transparent',
 	allowSetColor: true,
-	minW: 2
+	minW: 2,
+
+	groups: ['Visual'],
+	name: 'Fluid Text'
 } as CardDefinition & { type: 'fluid-text' };
diff --git a/src/lib/cards/GIFCard/index.ts b/src/lib/cards/GIFCard/index.ts
index 21e9cf1..56ffd26 100644
--- a/src/lib/cards/GIFCard/index.ts
+++ b/src/lib/cards/GIFCard/index.ts
@@ -45,5 +45,7 @@ export const GifCardDefinition = {
 		return null;
 	},
 	urlHandlerPriority: 5,
-	name: 'GIF'
+	name: 'GIF',
+
+	groups: ['Media']
 } as CardDefinition & { type: 'gif' };
diff --git a/src/lib/cards/GameCards/DinoGameCard/index.ts b/src/lib/cards/GameCards/DinoGameCard/index.ts
index e037b5c..b2902b2 100644
--- a/src/lib/cards/GameCards/DinoGameCard/index.ts
+++ b/src/lib/cards/GameCards/DinoGameCard/index.ts
@@ -14,5 +14,8 @@ export const DinoGameCardDefinition = {
 		card.mobileH = 6;
 		card.cardData = {};
 	},
-	canHaveLabel: true
+	canHaveLabel: true,
+
+	groups: ['Games'],
+	name: 'Dino Game'
 } as CardDefinition & { type: 'dino-game' };
diff --git a/src/lib/cards/GameCards/TetrisCard/index.ts b/src/lib/cards/GameCards/TetrisCard/index.ts
index 030f890..e11df77 100644
--- a/src/lib/cards/GameCards/TetrisCard/index.ts
+++ b/src/lib/cards/GameCards/TetrisCard/index.ts
@@ -19,5 +19,9 @@ export const TetrisCardDefinition = {
 		card.cardData = {};
 	},
 	maxH: 10,
-	canHaveLabel: true
+	canHaveLabel: true,
+
+	groups: ['Games'],
+
+	name: 'Tetris'
 } as CardDefinition & { type: 'tetris' };
diff --git a/src/lib/cards/GitHubProfileCard/index.ts b/src/lib/cards/GitHubProfileCard/index.ts
index af7ccc8..2c9d9d1 100644
--- a/src/lib/cards/GitHubProfileCard/index.ts
+++ b/src/lib/cards/GitHubProfileCard/index.ts
@@ -50,7 +50,9 @@ export const GithubProfileCardDefitition = {
 
 		return item;
 	},
-	name: 'Github Profile'
+	name: 'Github Profile',
+
+	groups: ['Social']
 } as CardDefinition & { type: 'githubProfile' };
 
 function getGitHubUsername(url: string | undefined): string | undefined {
diff --git a/src/lib/cards/GuestbookCard/index.ts b/src/lib/cards/GuestbookCard/index.ts
index 9e4fdfe..b3a7cd6 100644
--- a/src/lib/cards/GuestbookCard/index.ts
+++ b/src/lib/cards/GuestbookCard/index.ts
@@ -60,5 +60,6 @@ export const GuestbookCardDefinition = {
 
 		return results;
 	},
-	name: 'Guestbook'
+	name: 'Guestbook',
+	groups: ['Social']
 } as CardDefinition & { type: 'guestbook' };
diff --git a/src/lib/cards/ImageCard/index.ts b/src/lib/cards/ImageCard/index.ts
index 4dcec56..9e14944 100644
--- a/src/lib/cards/ImageCard/index.ts
+++ b/src/lib/cards/ImageCard/index.ts
@@ -42,7 +42,24 @@ export const ImageCardDefinition = {
 	},
 	urlHandlerPriority: 3,
 
-	name: 'Image Card',
+	name: 'Image',
 
-	canHaveLabel: true
+	canHaveLabel: true,
+
+	groups: ['Core'],
+
+	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="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+					/>
+				</svg>`
 } as CardDefinition & { type: 'image' };
diff --git a/src/lib/cards/LatestBlueskyPostCard/index.ts b/src/lib/cards/LatestBlueskyPostCard/index.ts
index dc07aa4..f547949 100644
--- a/src/lib/cards/LatestBlueskyPostCard/index.ts
+++ b/src/lib/cards/LatestBlueskyPostCard/index.ts
@@ -18,5 +18,9 @@ export const LatestBlueskyPostCardDefinition = {
 
 		return JSON.parse(JSON.stringify(authorFeed));
 	},
-	minW: 4
+	minW: 4,
+
+	name: 'Latest Bluesky Post',
+
+	groups: ['Social']
 } as CardDefinition & { type: 'latestPost' };
diff --git a/src/lib/cards/LinkCard/CreateLinkCardModal.svelte b/src/lib/cards/LinkCard/CreateLinkCardModal.svelte
new file mode 100644
index 0000000..1699229
--- /dev/null
+++ b/src/lib/cards/LinkCard/CreateLinkCardModal.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { Button, Input, Modal, Subheading } from '@foxui/core';
+	import type { CreationModalComponentProps } from '../types';
+	import { validateLink } from '$lib/helper';
+
+	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
+
+	let isFetchingLocation = $state(false);
+
+	let errorMessage = $state('');
+</script>
+
+<Modal open={true} closeButton={false}>
+	<form
+		onsubmit={() => {
+			if (!item.cardData.href.trim()) return;
+
+			let link = validateLink(item.cardData.href);
+			if (!link) {
+				errorMessage = 'Invalid link';
+				return;
+			}
+
+			item.cardData.href = link;
+			item.cardData.domain = new URL(link).hostname;
+			item.cardData.hasFetched = false;
+
+			oncreate?.();
+		}}
+		class="flex flex-col gap-2"
+	>
+		<Subheading>Enter a link</Subheading>
+		<Input bind:value={item.cardData.href} class="mt-4" />
+
+		{#if errorMessage}
+			<p class="mt-2 text-sm text-red-600">{errorMessage}</p>
+		{/if}
+
+		<div class="mt-4 flex justify-end gap-2">
+			<Button onclick={oncancel} variant="ghost">Cancel</Button>
+			<Button type="submit" disabled={isFetchingLocation}>Create</Button>
+		</div>
+	</form>
+</Modal>
diff --git a/src/lib/cards/LinkCard/index.ts b/src/lib/cards/LinkCard/index.ts
index bc65d59..1fa7ec3 100644
--- a/src/lib/cards/LinkCard/index.ts
+++ b/src/lib/cards/LinkCard/index.ts
@@ -1,5 +1,6 @@
 import { checkAndUploadImage, validateLink } from '$lib/helper';
 import type { CardDefinition } from '../types';
+import CreateLinkCardModal from './CreateLinkCardModal.svelte';
 import EditingLinkCard from './EditingLinkCard.svelte';
 import LinkCard from './LinkCard.svelte';
 import LinkCardSettings from './LinkCardSettings.svelte';
@@ -13,7 +14,9 @@ export const LinkCardDefinition = {
 	},
 	settingsComponent: LinkCardSettings,
 
-	name: 'Link Card',
+	creationModalComponent: CreateLinkCardModal,
+
+	name: 'Link',
 	canChange: (item) => Boolean(validateLink(item.cardData?.href)),
 	change: (item) => {
 		const href = validateLink(item.cardData?.href);
@@ -36,5 +39,22 @@ export const LinkCardDefinition = {
 		await checkAndUploadImage(item.cardData, 'favicon');
 		return item;
 	},
-	urlHandlerPriority: 0
+	urlHandlerPriority: 0,
+
+	groups: ['Core'],
+
+	icon: `<svg
+xmlns="http://www.w3.org/2000/svg"
+fill="none"
+viewBox="-2 -2 28 28"
+stroke-width="2"
+stroke="currentColor"
+class="size-4"
+>
+<path
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
+/>
+</svg>`
 } as CardDefinition & { type: 'link' };
diff --git a/src/lib/cards/LivestreamCard/index.ts b/src/lib/cards/LivestreamCard/index.ts
index 9fbd513..d20adfb 100644
--- a/src/lib/cards/LivestreamCard/index.ts
+++ b/src/lib/cards/LivestreamCard/index.ts
@@ -81,7 +81,8 @@ export const LivestreamCardDefitition = {
 
 	urlHandlerPriority: 5,
 
-	name: 'stream.place Card'
+	name: 'Latest Livestream (stream.place)',
+	groups: ['Media']
 } as CardDefinition & { type: 'latestLivestream' };
 
 export const LivestreamEmbedCardDefitition = {
diff --git a/src/lib/cards/MapCard/index.ts b/src/lib/cards/MapCard/index.ts
index 87dd5bb..e0149a1 100644
--- a/src/lib/cards/MapCard/index.ts
+++ b/src/lib/cards/MapCard/index.ts
@@ -17,7 +17,16 @@ export const MapCardDefinition = {
 	creationModalComponent: CreateMapCardModal,
 	allowSetColor: false,
 	canHaveLabel: true,
-	settingsComponent: MapCardSettings
+	settingsComponent: MapCardSettings,
+
+	groups: ['Core'],
+
+	name: 'Map',
+
+	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="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z" />
+</svg>
+`
 } as CardDefinition & { type: 'mapLocation' };
 
 export function getZoomLevel(type: string | undefined): number {
diff --git a/src/lib/cards/PopfeedReviews/index.ts b/src/lib/cards/PopfeedReviews/index.ts
index 6888e0f..ac58439 100644
--- a/src/lib/cards/PopfeedReviews/index.ts
+++ b/src/lib/cards/PopfeedReviews/index.ts
@@ -18,5 +18,8 @@ export const PopfeedReviewsCardDefinition = {
 	},
 	minH: 3,
 	sidebarButtonText: 'Popfeed Reviews',
-	canHaveLabel: true
+	canHaveLabel: true,
+
+	groups: ['Media'],
+	name: 'Movie and TV Reviews'
 } as CardDefinition & { type: 'recentPopfeedReviews' };
diff --git a/src/lib/cards/SectionCard/index.ts b/src/lib/cards/SectionCard/index.ts
index f8a2235..c3128df 100644
--- a/src/lib/cards/SectionCard/index.ts
+++ b/src/lib/cards/SectionCard/index.ts
@@ -26,7 +26,22 @@ export const SectionCardDefinition = {
 	defaultColor: 'transparent',
 	maxH: 1,
 	canResize: false,
-	settingsComponent: SectionCardSettings
+	settingsComponent: SectionCardSettings,
+
+	name: 'Heading',
+	groups: ['Core'],
+
+	icon: `<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class="size-4"
+	><path d="M6 12h12" /><path d="M6 20V4" /><path d="M18 20V4" /></svg
+>`
 } as CardDefinition & { type: 'section' };
 
 export const textAlignClasses: Record<string, string> = {
diff --git a/src/lib/cards/SpotifyCard/index.ts b/src/lib/cards/SpotifyCard/index.ts
index 9db2828..873347e 100644
--- a/src/lib/cards/SpotifyCard/index.ts
+++ b/src/lib/cards/SpotifyCard/index.ts
@@ -40,7 +40,9 @@ export const SpotifyCardDefinition = {
 	name: 'Spotify Embed',
 	canResize: true,
 	minW: 4,
-	minH: 5
+	minH: 5,
+
+	groups: ['Media']
 } as CardDefinition & { type: typeof cardType };
 
 // Match Spotify album and playlist URLs
diff --git a/src/lib/cards/StandardSiteDocumentListCard/index.ts b/src/lib/cards/StandardSiteDocumentListCard/index.ts
index f0d7fc8..191230f 100644
--- a/src/lib/cards/StandardSiteDocumentListCard/index.ts
+++ b/src/lib/cards/StandardSiteDocumentListCard/index.ts
@@ -42,5 +42,9 @@ export const StandardSiteDocumentListCardDefinition = {
 		return records;
 	},
 
-	sidebarButtonText: 'site.standard.document list'
+	sidebarButtonText: 'site.standard.document list',
+
+	name: 'Blog Posts',
+
+	groups: ['Content']
 } as CardDefinition & { type: 'site.standard.document list' };
diff --git a/src/lib/cards/StatusphereCard/index.ts b/src/lib/cards/StatusphereCard/index.ts
index 31aa6e1..2e80076 100644
--- a/src/lib/cards/StatusphereCard/index.ts
+++ b/src/lib/cards/StatusphereCard/index.ts
@@ -47,7 +47,10 @@ export const StatusphereCardDefinition = {
 			item.cardData.label = item.cardData.title;
 		}
 	},
-	canHaveLabel: true
+	canHaveLabel: true,
+
+	name: 'Emoji',
+	groups: ['Media']
 } as CardDefinition & { type: 'statusphere' };
 
 export function emojiToNotoAnimatedWebp(emoji: string | undefined): string | undefined {
diff --git a/src/lib/cards/TealFMPlaysCard/index.ts b/src/lib/cards/TealFMPlaysCard/index.ts
index c18a511..e2d9d1f 100644
--- a/src/lib/cards/TealFMPlaysCard/index.ts
+++ b/src/lib/cards/TealFMPlaysCard/index.ts
@@ -22,5 +22,9 @@ export const TealFMPlaysCardDefinition = {
 	},
 	minW: 4,
 	sidebarButtonText: 'teal.fm Plays',
-	canHaveLabel: true
+	canHaveLabel: true,
+
+	name: 'Teal.fm Plays',
+
+	groups: ['Media']
 } as CardDefinition & { type: 'recentTealFMPlays' };
diff --git a/src/lib/cards/TextCard/index.ts b/src/lib/cards/TextCard/index.ts
index 4f8296a..ff7c4b9 100644
--- a/src/lib/cards/TextCard/index.ts
+++ b/src/lib/cards/TextCard/index.ts
@@ -14,7 +14,22 @@ export const TextCardDefinition = {
 		};
 	},
 
-	settingsComponent: TextCardSettings
+	settingsComponent: TextCardSettings,
+
+	name: 'Text',
+
+	groups: ['Core'],
+
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4"
+					><path
+						fill="none"
+						stroke="currentColor"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="m15 16l2.536-7.328a1.02 1.02 1 0 1 1.928 0L22 16m-6.303-2h5.606M2 16l4.039-9.69a.5.5 0 0 1 .923 0L11 16m-7.696-3h6.392"
+					/></svg
+				>`
 } as CardDefinition & { type: 'text' };
 
 export const textAlignClasses: Record<string, string> = {
diff --git a/src/lib/cards/TimerCard/index.ts b/src/lib/cards/TimerCard/index.ts
index 7bbe0b2..86726a3 100644
--- a/src/lib/cards/TimerCard/index.ts
+++ b/src/lib/cards/TimerCard/index.ts
@@ -33,5 +33,6 @@ export const TimerCardDefinition = {
 	allowSetColor: true,
 	name: 'Timer Card',
 	minW: 4,
-	canHaveLabel: true
+	canHaveLabel: true,
+	groups: ['Utilities']
 } as CardDefinition & { type: 'timer' };
diff --git a/src/lib/cards/VCardCard/index.ts b/src/lib/cards/VCardCard/index.ts
index 6632304..fc2b9ed 100644
--- a/src/lib/cards/VCardCard/index.ts
+++ b/src/lib/cards/VCardCard/index.ts
@@ -122,5 +122,6 @@ export const VCardCardDefinition = {
 
 	sidebarButtonText: 'vCard',
 	allowSetColor: true,
-	name: 'vCard Card'
+	name: 'vCard Card',
+	groups: ['Social']
 } as CardDefinition & { type: 'vcard' };
diff --git a/src/lib/cards/YoutubeVideoCard/index.ts b/src/lib/cards/YoutubeVideoCard/index.ts
index d8579cb..b2296c6 100644
--- a/src/lib/cards/YoutubeVideoCard/index.ts
+++ b/src/lib/cards/YoutubeVideoCard/index.ts
@@ -51,7 +51,16 @@ export const YoutubeCardDefinition = {
 
 		return item;
 	},
-	name: 'Youtube Video'
+	name: 'Youtube Video',
+
+	groups: ['Media'],
+
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-3" viewBox="0 0 256 180"
+			><path
+				fill="currentColor"
+				d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134"
+			/><path fill="currentColor" class="invert" d="m102.421 128.06l66.328-38.418l-66.328-38.418z" /></svg
+		>`
 } as CardDefinition & { type: 'youtubeVideo' };
 
 // Thanks to eleventy-plugin-youtube-embed
diff --git a/src/lib/cards/types.ts b/src/lib/cards/types.ts
index 3143eec..0620740 100644
--- a/src/lib/cards/types.ts
+++ b/src/lib/cards/types.ts
@@ -73,4 +73,10 @@ export type CardDefinition = {
 	canHaveLabel?: boolean;
 
 	migrate?: (item: Item) => void;
+
+	groups?: string[];
+
+	keywords?: string[];
+
+	icon?: string;
 };
diff --git a/src/lib/components/card-command/CardCommand.svelte b/src/lib/components/card-command/CardCommand.svelte
new file mode 100644
index 0000000..16fa762
--- /dev/null
+++ b/src/lib/components/card-command/CardCommand.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { AllCardDefinitions } from '$lib/cards';
+	import type { CardDefinition } from '$lib/cards/types';
+	import { Command, Dialog } from 'bits-ui';
+
+	const CardDefGroups = [
+		'Core',
+		...Array.from(
+			new Set(
+				AllCardDefinitions.map((cardDef) => cardDef.groups)
+					.flat()
+					.filter((g) => g)
+			)
+		)
+			.sort()
+			.filter((g) => g !== 'Core')
+	];
+
+	let {
+		open = $bindable(false),
+		onselect
+	}: { open: boolean; onselect: (cardDef: CardDefinition) => void } = $props();
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			open = true;
+		}
+	}
+</script>
+
+<svelte:document onkeydown={handleKeydown} />
+
+<Dialog.Root bind:open>
+	<Dialog.Portal>
+		<Dialog.Overlay
+			class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
+		/>
+		<Dialog.Content
+			class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-36 left-[50%] z-50 w-full max-w-[94%] translate-x-[-50%] outline-hidden sm:max-w-lg md:w-full"
+		>
+			<Dialog.Title class="sr-only">Command Menu</Dialog.Title>
+			<Dialog.Description class="sr-only">
+				This is the command menu. Use the arrow keys to navigate and press ⌘K to open the search
+				bar.
+			</Dialog.Description>
+			<Command.Root
+				class="border-base-200 dark:border-base-800 mx-auto flex h-full w-full max-w-[90vw] flex-col overflow-hidden rounded-2xl border bg-white dark:bg-black"
+			>
+				<Command.Input
+					class="focus-override placeholder:text-base-900/50 dark:placeholder:text-base-50/50 border-base-200 dark:border-base-800 bg-base-100 mx-1 mt-1 inline-flex truncate rounded-2xl rounded-tl-2xl px-4 text-sm transition-colors focus:ring-0 focus:outline-hidden dark:bg-black"
+					placeholder="Search for a card..."
+				/>
+				<Command.List
+					class="focus:outline-accent-500/50 max-h-[50vh] overflow-x-hidden overflow-y-auto rounded-br-2xl rounded-bl-2xl bg-white px-2 pb-2 focus:border-0 dark:bg-black"
+				>
+					<Command.Viewport>
+						<Command.Empty
+							class="text-base-900 dark:text-base-100 flex w-full items-center justify-center pt-8 pb-6 text-sm"
+						>
+							No results found.
+						</Command.Empty>
+
+						{#each CardDefGroups as group, index}
+							{#if group && AllCardDefinitions.some((cardDef) => cardDef.groups?.includes(group))}
+								<Command.Group>
+									<Command.GroupHeading
+										class="text-base-600 dark:text-base-400 px-3 pt-4 pb-2 text-xs"
+									>
+										{group}
+									</Command.GroupHeading>
+									<Command.GroupItems>
+										{#each AllCardDefinitions.filter( (cardDef) => cardDef.groups?.includes(group) ) as cardDef}
+											<Command.Item
+												onSelect={() => {
+													open = false;
+													onselect(cardDef);
+												}}
+												class="rounded-button data-selected:bg-accent-500/10 flex h-10 cursor-pointer items-center gap-2 rounded-xl px-3 py-2.5 text-sm outline-hidden select-none"
+												keywords={[group, cardDef.type, ...(cardDef.keywords || [])]}
+											>
+												{#if cardDef.icon}
+													<div class="text-base-700 dark:text-base-300">
+														{@html cardDef.icon}
+													</div>
+												{/if}
+												{cardDef.name}
+											</Command.Item>
+										{/each}
+									</Command.GroupItems>
+								</Command.Group>
+								{#if index < CardDefGroups.length - 1}
+									<Command.Separator class="bg-base-900/5 dark:bg-base-50/5 my-1 h-px w-full" />
+								{/if}
+							{/if}
+						{/each}
+					</Command.Viewport>
+				</Command.List>
+			</Command.Root>
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>
diff --git a/src/lib/website/EditBar.svelte b/src/lib/website/EditBar.svelte
index e07681b..e650629 100644
--- a/src/lib/website/EditBar.svelte
+++ b/src/lib/website/EditBar.svelte
@@ -17,7 +17,9 @@
 		save,
 
 		handleImageInputChange,
-		handleVideoInputChange
+		handleVideoInputChange,
+
+		showCardCommand
 	}: {
 		data: WebsiteData;
 		linkValue: string;
@@ -33,6 +35,8 @@
 
 		handleImageInputChange: (evt: Event) => void;
 		handleVideoInputChange: (evt: Event) => void;
+
+		showCardCommand: () => void;
 	} = $props();
 
 	let linkPopoverOpen = $state(false);
@@ -59,6 +63,7 @@
 	accept="image/*"
 	onchange={handleImageInputChange}
 	class="hidden"
+	id="image-input"
 	multiple
 	bind:this={imageInputRef}
 />
@@ -220,7 +225,7 @@
 				</Button>
 			{/if}
 
-			<Button size="iconLg" variant="ghost" class="backdrop-blur-none" popovertarget="mobile-menu">
+			<Button size="iconLg" variant="ghost" class="backdrop-blur-none" onclick={showCardCommand}>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					fill="none"
diff --git a/src/lib/website/EditableWebsite.svelte b/src/lib/website/EditableWebsite.svelte
index 67d233c..a983629 100644
--- a/src/lib/website/EditableWebsite.svelte
+++ b/src/lib/website/EditableWebsite.svelte
@@ -24,7 +24,7 @@
 	import EditingCard from '../cards/Card/EditingCard.svelte';
 	import { AllCardDefinitions, CardDefinitionsByType } from '../cards';
 	import { tick, type Component } from 'svelte';
-	import type { CreationModalComponentProps } from '../cards/types';
+	import type { CardDefinition, CreationModalComponentProps } from '../cards/types';
 	import { dev } from '$app/environment';
 	import { setIsMobile } from './context';
 	import BaseEditingCard from '../cards/BaseCard/BaseEditingCard.svelte';
@@ -38,6 +38,7 @@
 	import { user } from '$lib/atproto';
 	import { launchConfetti } from '@foxui/visual';
 	import Controls from './Controls.svelte';
+	import CardCommand from '$lib/components/card-command/CardCommand.svelte';
 
 	let {
 		data
@@ -645,6 +646,8 @@
 	}
 
 	// $inspect(items);
+
+	let showCardCommand = $state(true);
 </script>
 
 <svelte:body
@@ -684,6 +687,21 @@
 		</div>
 	{/if}
 
+	<CardCommand
+		bind:open={showCardCommand}
+		onselect={(cardDef: CardDefinition) => {
+			if (cardDef.type === 'image') {
+				const input = document.getElementById('image-input') as HTMLInputElement;
+				if (input) {
+					input.click();
+					return;
+				}
+			} else {
+				newCard(cardDef.type);
+			}
+		}}
+	/>
+
 	<Controls bind:data />
 
 	{#if showingMobileView}
@@ -911,6 +929,9 @@
 		{save}
 		{handleImageInputChange}
 		{handleVideoInputChange}
+		showCardCommand={() => {
+			showCardCommand = true;
+		}}
 	/>
 
 	<Toaster />