diff --git a/src/lib/cards/core/LinkCard/CreateLinkCardModal.svelte b/src/lib/cards/core/LinkCard/CreateLinkCardModal.svelte
index b11e6ee..82d2066 100644
--- a/src/lib/cards/core/LinkCard/CreateLinkCardModal.svelte
+++ b/src/lib/cards/core/LinkCard/CreateLinkCardModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Button, Input, Modal, Subheading } from '@foxui/core';
+	import { Button, Input, Subheading } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
 	import type { CreationModalComponentProps } from '../../types';
 	import { validateLink } from '$lib/helper';
 
diff --git a/src/lib/cards/core/MapCard/CreateMapCardModal.svelte b/src/lib/cards/core/MapCard/CreateMapCardModal.svelte
index caace80..b88fcfe 100644
--- a/src/lib/cards/core/MapCard/CreateMapCardModal.svelte
+++ b/src/lib/cards/core/MapCard/CreateMapCardModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Alert, Button, Input, Modal, Subheading } from '@foxui/core';
+	import { Alert, Button, Input, Subheading } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
 	import type { CreationModalComponentProps } from '../../types';
 	import { getZoomLevel } from '.';
 
diff --git a/src/lib/cards/media/AppleMusicCard/CreateAppleMusicCardModal.svelte b/src/lib/cards/media/AppleMusicCard/CreateAppleMusicCardModal.svelte
index 7a16d8c..3c9e605 100644
--- a/src/lib/cards/media/AppleMusicCard/CreateAppleMusicCardModal.svelte
+++ b/src/lib/cards/media/AppleMusicCard/CreateAppleMusicCardModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Alert, Button, Input, Modal, Subheading } from '@foxui/core';
+	import { Alert, Button, Input, Subheading } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
 	import type { CreationModalComponentProps } from '../../types';
 
 	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
diff --git a/src/lib/cards/media/BlueskyMediaCard/CreateBlueskyMediaCardModal.svelte b/src/lib/cards/media/BlueskyMediaCard/CreateBlueskyMediaCardModal.svelte
index fb39a50..4f58204 100644
--- a/src/lib/cards/media/BlueskyMediaCard/CreateBlueskyMediaCardModal.svelte
+++ b/src/lib/cards/media/BlueskyMediaCard/CreateBlueskyMediaCardModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Button, Input, Label, Modal, Subheading } from '@foxui/core';
+	import { Button, Subheading } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
 	import type { CreationModalComponentProps } from '../../types';
 	import { onMount } from 'svelte';
 	import { getDidContext } from '$lib/website/context';
@@ -17,12 +18,13 @@
 	onMount(async () => {
 		const authorFeed = await getAuthorFeed({ did });
 
+		const collected: typeof mediaList = [];
 		for (let post of authorFeed?.feed ?? []) {
 			let images =
 				post.post.embed?.$type === 'app.bsky.embed.images#view' ? post.post.embed : undefined;
 
 			for (let image of images?.images ?? []) {
-				mediaList.push(image);
+				collected.push(image);
 			}
 
 			if (
@@ -30,7 +32,7 @@
 				post.post.embed.thumbnail &&
 				post.post.embed.playlist
 			) {
-				mediaList.push({
+				collected.push({
 					...post.post.embed,
 					isVideo: true,
 					fullsize: ''
@@ -38,10 +40,11 @@
 			}
 		}
 
+		mediaList = collected;
 		isLoading = false;
 	});
 
-	let selected = $state();
+
 </script>
 
 <Modal
@@ -57,29 +60,28 @@
 	<Subheading>Select an image or video</Subheading>
 
 	<div
-		class="bg-base-100 dark:bg-base-950 grid h-[50dvh] grid-cols-2 gap-4 overflow-y-scroll rounded-2xl p-4 lg:grid-cols-3"
+		class="bg-base-200 dark:bg-base-950/30 grid h-[50dvh] grid-cols-2 gap-4 overflow-y-scroll rounded-2xl p-4 lg:grid-cols-3"
 	>
-		{#each mediaList as media (media.thumbnail || media.playlist)}
+		{#each mediaList as media (media.fullsize || media.thumbnail || media.playlist)}
 			<button
 				onclick={() => {
-					selected = media;
 					if (media.isVideo) {
 						item.cardData = {
 							video: media
 						};
-					} else item.cardData.image = media;
+					} else {
+						item.cardData = {
+							image: media
+						};
+					}
+					oncreate();
 				}}
 				class="relative cursor-pointer"
 			>
 				<img
 					src={media.fullsize || media.thumbnail}
 					alt=""
-					class={[
-						'h-32 w-full rounded-xl object-cover',
-						selected === media
-							? 'outline-accent-500 opacity-100 outline-2 -outline-offset-2'
-							: 'opacity-80'
-					]}
+					class="h-32 w-full rounded-xl object-cover opacity-80 hover:opacity-100"
 				/>
 				{#if media.isVideo}
 					<div class="absolute inset-0 inline-flex items-center justify-center">
@@ -106,21 +108,12 @@
 		{/if}
 	</div>
 
-	<Label class="mt-4">Link (optional):</Label>
-	<Input bind:value={item.cardData.href} />
-
-	<div class="mt-4 flex justify-end gap-2">
+	<div class="mt-4 flex justify-end">
 		<Button
 			onclick={() => {
 				oncancel();
 			}}
 			variant="ghost">Cancel</Button
 		>
-		<Button
-			disabled={!selected}
-			onclick={async () => {
-				oncreate();
-			}}>Create</Button
-		>
 	</div>
 </Modal>
diff --git a/src/lib/cards/media/BlueskyMediaCard/index.ts b/src/lib/cards/media/BlueskyMediaCard/index.ts
index 1176c43..079e607 100644
--- a/src/lib/cards/media/BlueskyMediaCard/index.ts
+++ b/src/lib/cards/media/BlueskyMediaCard/index.ts
@@ -1,12 +1,14 @@
 import type { CardDefinition } from '../../types';
 import BlueskyMediaCard from './BlueskyMediaCard.svelte';
 import CreateBlueskyMediaCardModal from './CreateBlueskyMediaCardModal.svelte';
+import ImageCardSettings from '../../core/ImageCard/ImageCardSettings.svelte';
 
 export const BlueskyMediaCardDefinition = {
 	type: 'blueskyMedia',
 	contentComponent: BlueskyMediaCard,
 	createNew: () => {},
 	creationModalComponent: CreateBlueskyMediaCardModal,
+	settingsComponent: ImageCardSettings,
 	canHaveLabel: true,
 
 	keywords: ['bsky', 'atproto', 'media', 'feed'],
diff --git a/src/lib/cards/media/EmbedCard/CreateEmbedCardModal.svelte b/src/lib/cards/media/EmbedCard/CreateEmbedCardModal.svelte
index bb9d2d2..bad0f6d 100644
--- a/src/lib/cards/media/EmbedCard/CreateEmbedCardModal.svelte
+++ b/src/lib/cards/media/EmbedCard/CreateEmbedCardModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Alert, Button, Input, Modal, Subheading } from '@foxui/core';
+	import { Alert, Button, Input, Subheading } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
 	import type { CreationModalComponentProps } from '../../types';
 
 	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
diff --git a/src/lib/cards/media/GIFCard/GiphySearchModal.svelte b/src/lib/cards/media/GIFCard/GiphySearchModal.svelte
index c5eb82e..062a75a 100644
--- a/src/lib/cards/media/GIFCard/GiphySearchModal.svelte
+++ b/src/lib/cards/media/GIFCard/GiphySearchModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Button, Input, Modal, Subheading } from '@foxui/core';
+	import { Button, Input, Subheading } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
 	import { env } from '$env/dynamic/public';
 	import PoweredByGiphy from './PoweredByGiphy.gif';
 
diff --git a/src/lib/cards/media/LastFMCard/CreateLastFMCardModal.svelte b/src/lib/cards/media/LastFMCard/CreateLastFMCardModal.svelte
index 1ee2ed2..5f47839 100644
--- a/src/lib/cards/media/LastFMCard/CreateLastFMCardModal.svelte
+++ b/src/lib/cards/media/LastFMCard/CreateLastFMCardModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Button, Input, Modal, Subheading } from '@foxui/core';
+	import { Button, Input, Subheading } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
 	import type { CreationModalComponentProps } from '../../types';
 
 	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
diff --git a/src/lib/cards/media/PhotoGalleryCard/CreateGrainGalleryCardModal.svelte b/src/lib/cards/media/PhotoGalleryCard/CreateGrainGalleryCardModal.svelte
index 0a7c61c..d5c365f 100644
--- a/src/lib/cards/media/PhotoGalleryCard/CreateGrainGalleryCardModal.svelte
+++ b/src/lib/cards/media/PhotoGalleryCard/CreateGrainGalleryCardModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Alert, Button, Input, Modal, Subheading } from '@foxui/core';
+	import { Alert, Button, Input, Subheading } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
 	import type { CreationModalComponentProps } from '../../types';
 	import { parseGrainGalleryUrl } from './helpers';
 	import { resolveHandle } from '$lib/atproto';
diff --git a/src/lib/cards/media/PlyrFMCard/CreatePlyrFMCardModal.svelte b/src/lib/cards/media/PlyrFMCard/CreatePlyrFMCardModal.svelte
index 5a09aa5..6480b12 100644
--- a/src/lib/cards/media/PlyrFMCard/CreatePlyrFMCardModal.svelte
+++ b/src/lib/cards/media/PlyrFMCard/CreatePlyrFMCardModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Alert, Button, Input, Modal, Subheading } from '@foxui/core';
+	import { Alert, Button, Input, Subheading } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
 	import type { CreationModalComponentProps } from '../../types';
 	import { toPlyrFMEmbedUrl } from './index';
 
diff --git a/src/lib/cards/media/SpotifyCard/CreateSpotifyCardModal.svelte b/src/lib/cards/media/SpotifyCard/CreateSpotifyCardModal.svelte
index 7cecfb5..e483261 100644
--- a/src/lib/cards/media/SpotifyCard/CreateSpotifyCardModal.svelte
+++ b/src/lib/cards/media/SpotifyCard/CreateSpotifyCardModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Alert, Button, Input, Modal, Subheading } from '@foxui/core';
+	import { Alert, Button, Input, Subheading } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
 	import type { CreationModalComponentProps } from '../../types';
 
 	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
diff --git a/src/lib/cards/media/YoutubeVideoCard/CreateYoutubeCardModal.svelte b/src/lib/cards/media/YoutubeVideoCard/CreateYoutubeCardModal.svelte
index 323eabd..d28daf6 100644
--- a/src/lib/cards/media/YoutubeVideoCard/CreateYoutubeCardModal.svelte
+++ b/src/lib/cards/media/YoutubeVideoCard/CreateYoutubeCardModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Button, Input, Modal, Subheading } from '@foxui/core';
+	import { Button, Input, Subheading } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
 	import type { CreationModalComponentProps } from '../../types';
 	import { matcher } from './index';
 
diff --git a/src/lib/cards/social/BigSocialCard/CreateBigSocialCardModal.svelte b/src/lib/cards/social/BigSocialCard/CreateBigSocialCardModal.svelte
index b4e63d9..631348a 100644
--- a/src/lib/cards/social/BigSocialCard/CreateBigSocialCardModal.svelte
+++ b/src/lib/cards/social/BigSocialCard/CreateBigSocialCardModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Alert, Button, Input, Modal, Subheading } from '@foxui/core';
+	import { Alert, Button, Input, Subheading } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
 	import type { CreationModalComponentProps } from '../../types';
 	import { detectPlatform, platformsData } from '.';
 
diff --git a/src/lib/cards/social/BlueskyPostCard/CreateBlueskyPostCardModal.svelte b/src/lib/cards/social/BlueskyPostCard/CreateBlueskyPostCardModal.svelte
index 16ced64..6c91f45 100644
--- a/src/lib/cards/social/BlueskyPostCard/CreateBlueskyPostCardModal.svelte
+++ b/src/lib/cards/social/BlueskyPostCard/CreateBlueskyPostCardModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Alert, Button, Input, Modal, Subheading } from '@foxui/core';
+	import { Alert, Button, Input, Subheading } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
 	import type { CreationModalComponentProps } from '../../types';
 	import { parseBlueskyPostUrl } from './utils';
 
diff --git a/src/lib/cards/social/EventCard/CreateEventCardModal.svelte b/src/lib/cards/social/EventCard/CreateEventCardModal.svelte
index 591daf7..e4af690 100644
--- a/src/lib/cards/social/EventCard/CreateEventCardModal.svelte
+++ b/src/lib/cards/social/EventCard/CreateEventCardModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Alert, Button, Input, Modal, Subheading } from '@foxui/core';
+	import { Alert, Button, Input, Subheading } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
 	import type { CreationModalComponentProps } from '../../types';
 
 	const EVENT_COLLECTION = 'community.lexicon.calendar.event';
diff --git a/src/lib/cards/social/GitHubContributorsCard/CreateGitHubContributorsCardModal.svelte b/src/lib/cards/social/GitHubContributorsCard/CreateGitHubContributorsCardModal.svelte
index b08ed16..318b708 100644
--- a/src/lib/cards/social/GitHubContributorsCard/CreateGitHubContributorsCardModal.svelte
+++ b/src/lib/cards/social/GitHubContributorsCard/CreateGitHubContributorsCardModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Button, Input, Modal, Subheading } from '@foxui/core';
+	import { Button, Input, Subheading } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
 	import type { CreationModalComponentProps } from '../../types';
 
 	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
diff --git a/src/lib/cards/social/GitHubProfileCard/CreateGitHubProfileCardModal.svelte b/src/lib/cards/social/GitHubProfileCard/CreateGitHubProfileCardModal.svelte
index aee8eb9..f13dd17 100644
--- a/src/lib/cards/social/GitHubProfileCard/CreateGitHubProfileCardModal.svelte
+++ b/src/lib/cards/social/GitHubProfileCard/CreateGitHubProfileCardModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Button, Input, Modal, Subheading } from '@foxui/core';
+	import { Button, Input, Subheading } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
 	import type { CreationModalComponentProps } from '../../types';
 
 	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
diff --git a/src/lib/cards/social/GuestbookCard/CreateGuestbookCardModal.svelte b/src/lib/cards/social/GuestbookCard/CreateGuestbookCardModal.svelte
index 358a9ef..25b343a 100644
--- a/src/lib/cards/social/GuestbookCard/CreateGuestbookCardModal.svelte
+++ b/src/lib/cards/social/GuestbookCard/CreateGuestbookCardModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Alert, Button, Input, Modal, Subheading } from '@foxui/core';
+	import { Alert, Button, Input, Subheading } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
 	import type { CreationModalComponentProps } from '../../types';
 	import { createPost } from '$lib/atproto/methods';
 	import { user } from '$lib/atproto/auth.svelte';
diff --git a/src/lib/cards/social/KickstarterCard/CreateKickstarterCardModal.svelte b/src/lib/cards/social/KickstarterCard/CreateKickstarterCardModal.svelte
index 49d7f27..917adb0 100644
--- a/src/lib/cards/social/KickstarterCard/CreateKickstarterCardModal.svelte
+++ b/src/lib/cards/social/KickstarterCard/CreateKickstarterCardModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Alert, Button, Modal, Subheading } from '@foxui/core';
+	import { Alert, Button, Subheading } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
 	import type { CreationModalComponentProps } from '../../types';
 
 	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
diff --git a/src/lib/cards/social/ProductHuntCard/CreateProductHuntCardModal.svelte b/src/lib/cards/social/ProductHuntCard/CreateProductHuntCardModal.svelte
index 6417bc9..73455f9 100644
--- a/src/lib/cards/social/ProductHuntCard/CreateProductHuntCardModal.svelte
+++ b/src/lib/cards/social/ProductHuntCard/CreateProductHuntCardModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Alert, Button, Modal, Subheading } from '@foxui/core';
+	import { Alert, Button, Subheading } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
 	import type { CreationModalComponentProps } from '../../types';
 
 	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
diff --git a/src/lib/cards/social/SembleCollectionCard/CreateSembleCollectionCardModal.svelte b/src/lib/cards/social/SembleCollectionCard/CreateSembleCollectionCardModal.svelte
index f8718df..4dde7d5 100644
--- a/src/lib/cards/social/SembleCollectionCard/CreateSembleCollectionCardModal.svelte
+++ b/src/lib/cards/social/SembleCollectionCard/CreateSembleCollectionCardModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Alert, Button, Input, Modal, Subheading } from '@foxui/core';
+	import { Alert, Button, Input, Subheading } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
 	import type { CreationModalComponentProps } from '../../types';
 
 	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
diff --git a/src/lib/cards/visual/FluidTextCard/CreateFluidTextCardModal.svelte b/src/lib/cards/visual/FluidTextCard/CreateFluidTextCardModal.svelte
index e854be9..0ba376a 100644
--- a/src/lib/cards/visual/FluidTextCard/CreateFluidTextCardModal.svelte
+++ b/src/lib/cards/visual/FluidTextCard/CreateFluidTextCardModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Button, Input, Modal, Subheading, Label } from '@foxui/core';
+	import { Button, Input, Subheading, Label } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
 	import type { CreationModalComponentProps } from '../../types';
 
 	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
diff --git a/src/lib/cards/visual/Model3DCard/CreateModel3DCardModal.svelte b/src/lib/cards/visual/Model3DCard/CreateModel3DCardModal.svelte
index 44e2d6b..265f23a 100644
--- a/src/lib/cards/visual/Model3DCard/CreateModel3DCardModal.svelte
+++ b/src/lib/cards/visual/Model3DCard/CreateModel3DCardModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Alert, Button, Modal, Subheading } from '@foxui/core';
+	import { Alert, Button, Subheading } from '@foxui/core';
+	import Modal from '$lib/components/modal/Modal.svelte';
 	import type { CreationModalComponentProps } from '../../types';
 
 	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();