diff --git a/apps/desktop2/src/components/conversation.tsx b/apps/desktop2/src/components/conversation.tsx
index 18d2f7a9..e8a01cc2 100644
--- a/apps/desktop2/src/components/conversation.tsx
+++ b/apps/desktop2/src/components/conversation.tsx
@@ -17,7 +17,7 @@ export const Conversation = memo(function Conversation({
 		<Note.Provider event={event}>
 			<Note.Root
 				className={cn(
-					"bg-white dark:bg-black/20 backdrop-blur-lg rounded-xl flex flex-col gap-3 shadow-primary dark:ring-1 ring-neutral-800/50",
+					"bg-white dark:bg-black/20 rounded-xl flex flex-col gap-3 shadow-primary dark:ring-1 ring-neutral-800/50",
 					className,
 				)}
 			>
diff --git a/apps/desktop2/src/components/note/content.tsx b/apps/desktop2/src/components/note/content.tsx
index 4143a5cf..024ef1ff 100644
--- a/apps/desktop2/src/components/note/content.tsx
+++ b/apps/desktop2/src/components/note/content.tsx
@@ -97,7 +97,7 @@ export function NoteContent({
 	return (
 		<div className="relative flex flex-col gap-2">
 			{blurred ? (
-				<div className="absolute inset-0 z-10 flex items-center justify-center w-full h-full bg-black/80 backdrop-blur-xl">
+				<div className="absolute inset-0 z-10 flex items-center justify-center w-full h-full bg-black/80 backdrop-blur-lg">
 					<div className="flex flex-col items-center justify-center gap-2 text-center">
 						<p className="text-sm text-white/60">
 							The content is hidden because the author
diff --git a/apps/desktop2/src/components/note/preview/videos.tsx b/apps/desktop2/src/components/note/preview/videos.tsx
index 4642c7d7..3fde75ff 100644
--- a/apps/desktop2/src/components/note/preview/videos.tsx
+++ b/apps/desktop2/src/components/note/preview/videos.tsx
@@ -1,10 +1,9 @@
-import { Carousel, CarouselItem } from "@lume/ui";
-
 export function Videos({ urls }: { urls: string[] }) {
-	if (urls.length === 1) {
-		return (
-			<div className="group px-3">
+	return (
+		<div className="group px-3">
+			{urls.map((url) => (
 				<video
+					key={url}
 					className="max-h-[400px] w-auto  object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
 					preload="metadata"
 					controls
@@ -13,26 +12,7 @@ export function Videos({ urls }: { urls: string[] }) {
 					<source src={`${urls[0]}#t=0.1`} type="video/mp4" />
 					Your browser does not support the video tag.
 				</video>
-			</div>
-		);
-	}
-
-	return (
-		<Carousel
-			items={urls}
-			renderItem={({ item, isSnapPoint }) => (
-				<CarouselItem key={item} isSnapPoint={isSnapPoint}>
-					<video
-						className="w-full h-full object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
-						preload="metadata"
-						controls={false}
-						muted
-					>
-						<source src={`${item}#t=0.1`} type="video/mp4" />
-						Your browser does not support the video tag.
-					</video>
-				</CarouselItem>
-			)}
-		/>
+			))}
+		</div>
 	);
 }
diff --git a/apps/desktop2/src/components/quote.tsx b/apps/desktop2/src/components/quote.tsx
index 728e96c9..e748b68b 100644
--- a/apps/desktop2/src/components/quote.tsx
+++ b/apps/desktop2/src/components/quote.tsx
@@ -15,7 +15,7 @@ export const Quote = memo(function Quote({
 		<Note.Provider event={event}>
 			<Note.Root
 				className={cn(
-					"bg-white dark:bg-black/20 backdrop-blur-lg rounded-xl flex flex-col gap-3 shadow-primary dark:ring-1 ring-neutral-800/50",
+					"bg-white dark:bg-black/20 rounded-xl flex flex-col gap-3 shadow-primary dark:ring-1 ring-neutral-800/50",
 					className,
 				)}
 			>
diff --git a/apps/desktop2/src/components/repost.tsx b/apps/desktop2/src/components/repost.tsx
index 20dc81bf..9858c239 100644
--- a/apps/desktop2/src/components/repost.tsx
+++ b/apps/desktop2/src/components/repost.tsx
@@ -33,7 +33,7 @@ export const RepostNote = memo(function RepostNote({
 	return (
 		<Note.Root
 			className={cn(
-				"bg-white dark:bg-black/20 backdrop-blur-lg rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50",
+				"bg-white dark:bg-black/20 rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50",
 				className,
 			)}
 		>
diff --git a/apps/desktop2/src/components/text.tsx b/apps/desktop2/src/components/text.tsx
index 9c7dd5fd..e4902945 100644
--- a/apps/desktop2/src/components/text.tsx
+++ b/apps/desktop2/src/components/text.tsx
@@ -14,7 +14,7 @@ export const TextNote = memo(function TextNote({
 		<Note.Provider event={event}>
 			<Note.Root
 				className={cn(
-					"bg-white dark:bg-black/20 backdrop-blur rounded-xl shadow-primary dark:ring-1 dark:ring-white/5",
+					"bg-white dark:bg-black/20 rounded-xl shadow-primary dark:ring-1 dark:ring-white/5",
 					className,
 				)}
 			>
diff --git a/apps/desktop2/src/routes/$account.tsx b/apps/desktop2/src/routes/$account.tsx
index 51c108b8..57e266e9 100644
--- a/apps/desktop2/src/routes/$account.tsx
+++ b/apps/desktop2/src/routes/$account.tsx
@@ -5,7 +5,7 @@ import {
 	PlusIcon,
 	SearchIcon,
 } from "@lume/icons";
-import { LumeWindow, NostrAccount } from "@lume/system";
+import { LumeWindow, NostrAccount, NostrQuery } from "@lume/system";
 import { cn } from "@lume/utils";
 import { Outlet, createFileRoute } from "@tanstack/react-router";
 import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
@@ -15,18 +15,19 @@ import { memo, useCallback, useState } from "react";
 
 export const Route = createFileRoute("/$account")({
 	beforeLoad: async ({ params }) => {
+		const settings = await NostrQuery.getUserSettings();
 		const accounts = await NostrAccount.getAccounts();
 		const otherAccounts = accounts.filter(
 			(account) => account !== params.account,
 		);
 
-		return { otherAccounts };
+		return { otherAccounts, settings };
 	},
 	component: Screen,
 });
 
 function Screen() {
-	const { platform } = Route.useRouteContext();
+	const { settings, platform } = Route.useRouteContext();
 
 	const openLumeStore = async () => {
 		await getCurrent().emit("columns", {
@@ -80,7 +81,14 @@ function Screen() {
 					<Accounts />
 				</div>
 			</div>
-			<div className="flex-1">
+			<div
+				className={cn(
+					"flex-1",
+					settings.vibrancy
+						? ""
+						: "bg-white dark:bg-black border-t border-black/20 dark:border-white/20",
+				)}
+			>
 				<Outlet />
 			</div>
 		</div>
diff --git a/apps/desktop2/src/routes/bootstrap-relays.tsx b/apps/desktop2/src/routes/bootstrap-relays.tsx
index 5e7efb84..021551f6 100644
--- a/apps/desktop2/src/routes/bootstrap-relays.tsx
+++ b/apps/desktop2/src/routes/bootstrap-relays.tsx
@@ -28,6 +28,13 @@ function Screen() {
 
 	const onSubmit = async (data: { url: string; purpose: string }) => {
 		try {
+			if (!data.url.startsWith("wss://") || !data.url.startsWith("ws://")) {
+				return await message("Relay must be starts with wss:// or ws://", {
+					title: "Bootstrap Relays",
+					kind: "info",
+				});
+			}
+
 			const relay: Relay = { url: data.url, purpose: data.purpose };
 			setRelays((prev) => [...prev, relay]);
 			reset();
@@ -50,12 +57,21 @@ function Screen() {
 	}, [bootstrapRelays]);
 
 	return (
-		<div className="flex flex-col items-center justify-center w-screen h-screen">
-			<div className="w-full max-w-sm mx-auto lg:max-w-lg">
-				<div className="text-center h-11">
-					<h1 className="font-semibold">Customize Bootstrap Relays</h1>
+		<div
+			data-tauri-drag-region
+			className="relative flex flex-col items-center justify-between w-full h-full"
+		>
+			<div
+				data-tauri-drag-region
+				className="absolute top-0 left-0 h-14 w-full"
+			/>
+			<div className="flex items-end justify-center flex-1 w-full px-4 pb-10">
+				<div className="text-center">
+					<h2 className="text-2xl font-semibold">Customize Bootstrap Relays</h2>
 				</div>
-				<div className="flex flex-col w-full px-2 bg-white rounded-xl shadow-primary backdrop-blur-lg dark:bg-white/20 dark:ring-1 ring-neutral-800/50">
+			</div>
+			<div className="flex flex-col items-center flex-1 w-full">
+				<div className="flex flex-col w-full max-w-sm mx-auto p-3 overflow-hidden bg-white divide-y divide-neutral-100 dark:divide-white/5 rounded-xl shadow-primary dark:bg-white/10 dark:ring-1 ring-white/15">
 					{relays.map((relay) => (
 						<div
 							key={relay.url}
@@ -117,15 +133,18 @@ function Screen() {
 						</form>
 					</div>
 				</div>
-				<button
-					type="button"
-					onClick={() => save()}
-					disabled={isLoading}
-					className="inline-flex items-center justify-center w-full h-10 mt-4 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
-				>
-					{isLoading ? <Spinner /> : "Save & Relaunch"}
-				</button>
+				<div className="w-full max-w-sm mx-auto">
+					<button
+						type="button"
+						onClick={() => save()}
+						disabled={isLoading}
+						className="inline-flex items-center justify-center w-full h-9 mt-4 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
+					>
+						{isLoading ? <Spinner /> : "Save & Relaunch"}
+					</button>
+				</div>
 			</div>
+			<div className="flex-1" />
 		</div>
 	);
 }
diff --git a/apps/desktop2/src/routes/create-group.tsx b/apps/desktop2/src/routes/create-group.tsx
index f773ca59..ced17242 100644
--- a/apps/desktop2/src/routes/create-group.tsx
+++ b/apps/desktop2/src/routes/create-group.tsx
@@ -96,7 +96,7 @@ function Screen() {
 					/>
 				</div>
 				<div className="flex flex-col items-center w-full gap-3">
-					<div className="overflow-y-auto scrollbar-none p-2 w-full h-[450px] flex flex-col gap-3 bg-black/5 dark:bg-white/5 backdrop-blur-lg rounded-xl">
+					<div className="overflow-y-auto scrollbar-none p-2 w-full h-[450px] flex flex-col gap-3 bg-black/5 dark:bg-white/5 rounded-xl">
 						<div className="flex gap-2">
 							<input
 								name="npub"
@@ -122,7 +122,7 @@ function Screen() {
 											key={item}
 											type="button"
 											onClick={() => toggleUser(item)}
-											className="inline-flex items-center justify-between px-3 py-2 bg-white rounded-lg dark:bg-black/20 backdrop-blur-lg shadow-primary dark:ring-1 ring-neutral-800/50"
+											className="inline-flex items-center justify-between px-3 py-2 bg-white rounded-lg dark:bg-black/20 shadow-primary dark:ring-1 ring-neutral-800/50"
 										>
 											<User.Provider pubkey={item}>
 												<User.Root className="flex items-center gap-2.5">
@@ -153,7 +153,7 @@ function Screen() {
 											key={item}
 											type="button"
 											onClick={() => toggleUser(item)}
-											className="inline-flex items-center justify-between px-3 py-2 bg-white rounded-lg dark:bg-black/20 backdrop-blur-lg shadow-primary dark:ring-1 ring-neutral-800/50"
+											className="inline-flex items-center justify-between px-3 py-2 bg-white rounded-lg dark:bg-black/20 shadow-primary dark:ring-1 ring-neutral-800/50"
 										>
 											<User.Provider pubkey={item}>
 												<User.Root className="flex items-center gap-2.5">
diff --git a/apps/desktop2/src/routes/create-newsfeed.f2f.tsx b/apps/desktop2/src/routes/create-newsfeed.f2f.tsx
index 535b72fa..a5c45b79 100644
--- a/apps/desktop2/src/routes/create-newsfeed.f2f.tsx
+++ b/apps/desktop2/src/routes/create-newsfeed.f2f.tsx
@@ -49,7 +49,7 @@ function Screen() {
 	};
 
 	return (
-		<div className="overflow-y-auto scrollbar-none p-2 shrink-0 h-[450px] bg-white dark:bg-white/20 backdrop-blur-lg rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
+		<div className="overflow-y-auto scrollbar-none p-2 shrink-0 h-[450px] bg-white dark:bg-white/20 rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
 			<div className="flex flex-col justify-between h-full">
 				<div className="flex-1 flex flex-col gap-1.5 justify-center px-5">
 					<p className="font-semibold text-neutral-500">
diff --git a/apps/desktop2/src/routes/create-newsfeed.users.tsx b/apps/desktop2/src/routes/create-newsfeed.users.tsx
index 4a1440d2..cbbc747a 100644
--- a/apps/desktop2/src/routes/create-newsfeed.users.tsx
+++ b/apps/desktop2/src/routes/create-newsfeed.users.tsx
@@ -68,7 +68,7 @@ function Screen() {
 
 	return (
 		<div className="flex flex-col items-center w-full gap-3">
-			<div className="overflow-y-auto scrollbar-none p-2 w-full h-[450px] bg-black/5 dark:bg-white/5 backdrop-blur-lg rounded-xl">
+			<div className="overflow-y-auto scrollbar-none p-2 w-full h-[450px] bg-black/5 dark:bg-white/5 rounded-xl">
 				<Suspense
 					fallback={
 						<div className="flex flex-col items-center justify-center w-full h-20 gap-1">
@@ -88,7 +88,7 @@ function Screen() {
 							users.profiles.map((item: { pubkey: string }) => (
 								<div
 									key={item.pubkey}
-									className="w-full p-2 mb-2 overflow-hidden bg-white rounded-lg h-max dark:bg-black/20 backdrop-blur-lg shadow-primary dark:ring-1 ring-neutral-800/50"
+									className="w-full p-2 mb-2 overflow-hidden bg-white rounded-lg h-max dark:bg-black/20shadow-primary dark:ring-1 ring-neutral-800/50"
 								>
 									<User.Provider pubkey={item.pubkey}>
 										<User.Root>
diff --git a/apps/desktop2/src/routes/create-topic.tsx b/apps/desktop2/src/routes/create-topic.tsx
index e88ea7b8..d1604ba0 100644
--- a/apps/desktop2/src/routes/create-topic.tsx
+++ b/apps/desktop2/src/routes/create-topic.tsx
@@ -75,14 +75,14 @@ function Screen() {
 					<span className="text-sm font-medium">Added: {topics.length}</span>
 				</div>
 				<div className="flex flex-col items-center w-full gap-3">
-					<div className="overflow-y-auto scrollbar-none p-2 w-full h-[450px] bg-black/5 dark:bg-white/5 backdrop-blur-lg rounded-xl">
+					<div className="overflow-y-auto scrollbar-none p-2 w-full h-[450px] bg-black/5 dark:bg-white/5 rounded-xl">
 						<div className="flex flex-col gap-3">
 							{TOPICS.map((topic) => (
 								<button
 									key={topic.title}
 									type="button"
 									onClick={() => toggleTopic(topic)}
-									className="flex items-center justify-between px-3 bg-white border border-transparent rounded-lg h-11 dark:bg-black/20 backdrop-blur-lg hover:border-blue-500 shadow-primary dark:ring-1 ring-neutral-800/50"
+									className="flex items-center justify-between px-3 bg-white border border-transparent rounded-lg h-11 dark:bg-black/20 hover:border-blue-500 shadow-primary dark:ring-1 ring-neutral-800/50"
 								>
 									<div className="inline-flex items-center gap-1">
 										<div>{topic.icon}</div>
diff --git a/apps/desktop2/src/routes/events/$id.tsx b/apps/desktop2/src/routes/events/$id.tsx
index 5742c6bb..5efdb39f 100644
--- a/apps/desktop2/src/routes/events/$id.tsx
+++ b/apps/desktop2/src/routes/events/$id.tsx
@@ -1,12 +1,12 @@
 import { Note } from "@/components/note";
 import { LumeEvent, NostrQuery } from "@lume/system";
+import type { Meta } from "@lume/types";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { createFileRoute } from "@tanstack/react-router";
+import { getCurrent } from "@tauri-apps/api/window";
+import { useEffect, useRef, useState } from "react";
 import { Virtualizer } from "virtua";
 import NoteParent from "./-components/parent";
-import * as ScrollArea from "@radix-ui/react-scroll-area";
-import { useEffect, useRef, useState } from "react";
-import { getCurrent } from "@tauri-apps/api/window";
-import type { Meta } from "@lume/types";
 
 type Payload = {
 	raw: string;
@@ -62,7 +62,7 @@ function RootEvent() {
 
 	return (
 		<Note.Provider event={event}>
-			<Note.Root className="bg-white dark:bg-black/10 backdrop-blur rounded-xl shadow-primary dark:ring-1 dark:ring-white/5">
+			<Note.Root className="bg-white dark:bg-black/10 rounded-xl shadow-primary dark:ring-1 dark:ring-white/5">
 				<div className="flex items-center justify-between px-3 h-14">
 					<Note.User />
 					<Note.Menu />
diff --git a/apps/desktop2/src/routes/global.tsx b/apps/desktop2/src/routes/global.tsx
index 814eff28..8882da17 100644
--- a/apps/desktop2/src/routes/global.tsx
+++ b/apps/desktop2/src/routes/global.tsx
@@ -81,7 +81,7 @@ export function Screen() {
 			<ScrollArea.Viewport ref={ref} className="h-full px-3 pb-3">
 				<Virtualizer scrollRef={ref}>
 					{isFetching && !isLoading && !isFetchingNextPage ? (
-						<div className="flex items-center justify-center w-full mb-3 h-11 bg-black/10 dark:bg-white/10 backdrop-blur-lg rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
+						<div className="flex items-center justify-center w-full mb-3 h-11 bg-black/10 dark:bg-white/10 rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
 							<div className="flex items-center justify-center gap-2">
 								<Spinner className="size-5" />
 								<span className="text-sm font-medium">
diff --git a/apps/desktop2/src/routes/group.tsx b/apps/desktop2/src/routes/group.tsx
index d67751ff..7334ea3d 100644
--- a/apps/desktop2/src/routes/group.tsx
+++ b/apps/desktop2/src/routes/group.tsx
@@ -95,7 +95,7 @@ export function Screen() {
 			<ScrollArea.Viewport ref={ref} className="h-full px-3 pb-3">
 				<Virtualizer scrollRef={ref}>
 					{isFetching && !isLoading && !isFetchingNextPage ? (
-						<div className="flex items-center justify-center w-full mb-3 h-11 bg-black/10 dark:bg-white/10 backdrop-blur-lg rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
+						<div className="flex items-center justify-center w-full mb-3 h-11 bg-black/10 dark:bg-white/10 rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
 							<div className="flex items-center justify-center gap-2">
 								<Spinner className="size-5" />
 								<span className="text-sm font-medium">
diff --git a/apps/desktop2/src/routes/index.tsx b/apps/desktop2/src/routes/index.tsx
index 3f2b526f..0943098a 100644
--- a/apps/desktop2/src/routes/index.tsx
+++ b/apps/desktop2/src/routes/index.tsx
@@ -82,7 +82,7 @@ function Screen() {
 				</div>
 			</div>
 			<div className="flex flex-col items-center flex-1 w-full gap-3">
-				<div className="flex flex-col w-full max-w-sm mx-auto overflow-hidden bg-white divide-y divide-neutral-100 dark:divide-white/5 rounded-xl shadow-primary backdrop-blur-lg dark:bg-white/10 dark:ring-1 ring-white/15">
+				<div className="flex flex-col w-full max-w-sm mx-auto overflow-hidden bg-white divide-y divide-neutral-100 dark:divide-white/5 rounded-xl shadow-primary dark:bg-white/10 dark:ring-1 ring-white/15">
 					{context.accounts.map((account) => (
 						<div
 							key={account}
diff --git a/apps/desktop2/src/routes/landing.lazy.tsx b/apps/desktop2/src/routes/landing.lazy.tsx
index f038adc6..f92d370a 100644
--- a/apps/desktop2/src/routes/landing.lazy.tsx
+++ b/apps/desktop2/src/routes/landing.lazy.tsx
@@ -12,7 +12,7 @@ function Screen() {
 			className="flex flex-col items-center justify-center w-screen h-screen"
 		>
 			<div className="w-full max-w-xs mx-auto lg:max-w-md">
-				<div className="flex flex-col w-full gap-2 px-2 bg-white rounded-xl shadow-primary backdrop-blur-lg dark:bg-white/20 dark:ring-1 ring-neutral-800/50">
+				<div className="flex flex-col w-full gap-2 px-2 bg-white rounded-xl shadow-primary dark:bg-white/20 dark:ring-1 ring-neutral-800/50">
 					<div className="flex items-center h-20 border-b border-neutral-100 dark:border-white/5">
 						<Link
 							to="/auth/create-profile"
diff --git a/apps/desktop2/src/routes/newsfeed.tsx b/apps/desktop2/src/routes/newsfeed.tsx
index 29bded41..65d15aae 100644
--- a/apps/desktop2/src/routes/newsfeed.tsx
+++ b/apps/desktop2/src/routes/newsfeed.tsx
@@ -111,7 +111,7 @@ export function Screen() {
 				<Listerner />
 				<Virtualizer scrollRef={ref}>
 					{isFetching && !isLoading && !isFetchingNextPage ? (
-						<div className="flex items-center justify-center w-full mb-3 h-12 bg-black/10 dark:bg-white/10 backdrop-blur-lg rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
+						<div className="flex items-center justify-center w-full mb-3 h-12 bg-black/10 dark:bg-white/10 rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
 							<div className="flex items-center justify-center gap-2">
 								<Spinner className="size-5" />
 								<span className="text-sm font-medium">
diff --git a/apps/desktop2/src/routes/onboarding.tsx b/apps/desktop2/src/routes/onboarding.tsx
index 92401b2c..17993c60 100644
--- a/apps/desktop2/src/routes/onboarding.tsx
+++ b/apps/desktop2/src/routes/onboarding.tsx
@@ -22,7 +22,7 @@ function Screen() {
 				</p>
 			</div>
 			<div className="px-3 flex flex-col gap-3">
-				<div className="relative flex flex-col items-center justify-center rounded-xl bg-black/10 dark:bg-white/10 backdrop-blur-lg">
+				<div className="relative flex flex-col items-center justify-center rounded-xl bg-black/10 dark:bg-white/10">
 					<div className="absolute top-2 left-3 text-2xl font-semibold font-serif text-neutral-600 dark:text-neutral-400">
 						01.
 					</div>
@@ -45,7 +45,7 @@ function Screen() {
 						</video>
 					</div>
 				</div>
-				<div className="relative flex flex-col items-center justify-center rounded-xl bg-black/10 dark:bg-white/10 backdrop-blur-lg">
+				<div className="relative flex flex-col items-center justify-center rounded-xl bg-black/10 dark:bg-white/10">
 					<div className="absolute top-2 left-3 text-2xl font-semibold font-serif text-neutral-600 dark:text-neutral-400">
 						02.
 					</div>
@@ -68,7 +68,7 @@ function Screen() {
 						</video>
 					</div>
 				</div>
-				<div className="relative flex flex-col items-center justify-center rounded-xl bg-black/10 dark:bg-white/10 backdrop-blur-lg">
+				<div className="relative flex flex-col items-center justify-center rounded-xl bg-black/10 dark:bg-white/10">
 					<div className="absolute top-2 left-3 text-2xl font-semibold font-serif text-neutral-600 dark:text-neutral-400">
 						03.
 					</div>
@@ -91,7 +91,7 @@ function Screen() {
 						</video>
 					</div>
 				</div>
-				<div className="relative flex flex-col items-center justify-center rounded-xl bg-black/10 dark:bg-white/10 backdrop-blur-lg">
+				<div className="relative flex flex-col items-center justify-center rounded-xl bg-black/10 dark:bg-white/10">
 					<div className="absolute top-2 left-3 text-2xl font-semibold font-serif text-neutral-600 dark:text-neutral-400">
 						04.
 					</div>
diff --git a/apps/desktop2/src/routes/panel.$account.tsx b/apps/desktop2/src/routes/panel.$account.tsx
index f3a7e97b..7c7df400 100644
--- a/apps/desktop2/src/routes/panel.$account.tsx
+++ b/apps/desktop2/src/routes/panel.$account.tsx
@@ -188,7 +188,7 @@ function Screen() {
 						{[...data.reactions.entries()].map(([root, events]) => (
 							<div
 								key={root}
-								className="flex flex-col gap-1 p-2 mb-2 rounded-lg shrink-0 backdrop-blur-md bg-black/10 dark:bg-white/10"
+								className="flex flex-col gap-1 p-2 mb-2 rounded-lg shrink-0 bg-black/10 dark:bg-white/10"
 							>
 								<div className="flex flex-col flex-1 min-w-0 gap-2">
 									<div className="flex items-center gap-2 pb-2 border-b border-black/5 dark:border-white/5">
@@ -197,7 +197,7 @@ function Screen() {
 									<div className="flex flex-wrap items-center gap-3">
 										{events.map((event) => (
 											<User.Provider key={event.id} pubkey={event.pubkey}>
-												<User.Root className="shrink-0 flex rounded-full h-8 bg-black/10 dark:bg-white/10 backdrop-blur-md p-[2px]">
+												<User.Root className="shrink-0 flex rounded-full h-8 bg-black/10 dark:bg-white/10 p-[2px]">
 													<User.Avatar className="flex-1 rounded-full size-7" />
 													<div className="inline-flex items-center justify-center flex-1 text-xs truncate rounded-full size-7">
 														{event.kind === Kind.Reaction ? (
@@ -222,7 +222,7 @@ function Screen() {
 						{[...data.zaps.entries()].map(([root, events]) => (
 							<div
 								key={root}
-								className="flex flex-col gap-1 p-2 mb-2 rounded-lg shrink-0 backdrop-blur-md bg-black/10 dark:bg-white/10"
+								className="flex flex-col gap-1 p-2 mb-2 rounded-lg shrink-0 bg-black/10 dark:bg-white/10"
 							>
 								<div className="flex flex-col flex-1 min-w-0 gap-2">
 									<div className="flex items-center gap-2 pb-2 border-b border-black/5 dark:border-white/5">
@@ -234,7 +234,7 @@ function Screen() {
 												key={event.id}
 												pubkey={event.tags.find((tag) => tag[0] === "P")[1]}
 											>
-												<User.Root className="shrink-0 flex gap-1.5 rounded-full h-8 bg-black/10 dark:bg-white/10 backdrop-blur-md p-[2px]">
+												<User.Root className="shrink-0 flex gap-1.5 rounded-full h-8 bg-black/10 dark:bg-white/10 p-[2px]">
 													<User.Avatar className="rounded-full size-7" />
 													<div className="flex-1 h-7 w-max pr-1.5 rounded-full inline-flex items-center justify-center text-sm truncate">
 														₿ {decodeZapInvoice(event.tags).bitcoinFormatted}
@@ -319,7 +319,7 @@ function TextNote({ event }: { event: LumeEvent }) {
 
 	return (
 		<Note.Provider event={event}>
-			<Note.Root className="flex flex-col p-2 mb-2 rounded-lg shrink-0 backdrop-blur-md bg-black/10 dark:bg-white/10">
+			<Note.Root className="flex flex-col p-2 mb-2 rounded-lg shrink-0 bg-black/10 dark:bg-white/10">
 				<User.Provider pubkey={event.pubkey}>
 					<User.Root className="inline-flex items-center gap-2">
 						<User.Avatar className="rounded-full size-9" />
diff --git a/apps/desktop2/src/routes/search.users.tsx b/apps/desktop2/src/routes/search.users.tsx
index 4fe59850..96c7adda 100644
--- a/apps/desktop2/src/routes/search.users.tsx
+++ b/apps/desktop2/src/routes/search.users.tsx
@@ -69,7 +69,7 @@ function Screen() {
 					data.map((item) => (
 						<div
 							key={item.pubkey}
-							className="w-full p-3 mb-2 overflow-hidden bg-white rounded-lg h-max dark:bg-black/20 backdrop-blur-lg shadow-primary dark:ring-1 ring-neutral-800/50"
+							className="w-full p-3 mb-2 overflow-hidden bg-white rounded-lg h-max dark:bg-black/20 shadow-primary dark:ring-1 ring-neutral-800/50"
 						>
 							<User.Provider pubkey={item.pubkey} embedProfile={item.profile}>
 								<User.Root className="flex flex-col w-full h-full gap-2">
diff --git a/apps/desktop2/src/routes/settings/general.tsx b/apps/desktop2/src/routes/settings/general.tsx
index 0be523cb..994ac759 100644
--- a/apps/desktop2/src/routes/settings/general.tsx
+++ b/apps/desktop2/src/routes/settings/general.tsx
@@ -130,6 +130,28 @@ function Screen() {
 								</select>
 							</div>
 						</div>
+						<div className="flex items-start justify-between w-full gap-4 py-3">
+							<div className="flex-1">
+								<h3 className="font-medium">Vibrancy Effect</h3>
+								<p className="text-sm text-neutral-700 dark:text-neutral-300">
+									Make the window transparent.
+								</p>
+							</div>
+							<div className="flex justify-end w-36 shrink-0">
+								<Switch.Root
+									checked={settings.vibrancy}
+									onClick={() =>
+										setSettings((prev) => ({
+											...prev,
+											vibrancy: !prev.vibrancy,
+										}))
+									}
+									className="relative h-7 w-12 shrink-0 cursor-default rounded-full bg-black/10 outline-none data-[state=checked]:bg-blue-500 dark:bg-white/10"
+								>
+									<Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+								</Switch.Root>
+							</div>
+						</div>
 						<div className="flex items-start justify-between w-full gap-4 py-3">
 							<div className="flex-1">
 								<h3 className="font-medium">Zap Button</h3>
diff --git a/apps/desktop2/src/routes/store.official.tsx b/apps/desktop2/src/routes/store.official.tsx
index d257a7b9..647b7325 100644
--- a/apps/desktop2/src/routes/store.official.tsx
+++ b/apps/desktop2/src/routes/store.official.tsx
@@ -45,7 +45,7 @@ function Screen() {
 							className="absolute left-0 top-0 z-10 h-full w-full object-cover"
 						/>
 					) : null}
-					<div className="absolute bottom-0 left-0 z-20 h-16 w-full bg-black/40 px-3 backdrop-blur-xl">
+					<div className="absolute bottom-0 left-0 z-20 h-16 w-full bg-black/40 px-3">
 						<div className="flex h-full items-center justify-between">
 							<div>
 								<h1 className="font-semibold text-white">{column.name}</h1>
diff --git a/apps/desktop2/src/routes/topic.tsx b/apps/desktop2/src/routes/topic.tsx
index 87ae1fbd..1eaeb044 100644
--- a/apps/desktop2/src/routes/topic.tsx
+++ b/apps/desktop2/src/routes/topic.tsx
@@ -105,7 +105,7 @@ export function Screen() {
 			<ScrollArea.Viewport ref={ref} className="h-full px-3 pb-3">
 				<Virtualizer scrollRef={ref}>
 					{isFetching && !isLoading && !isFetchingNextPage ? (
-						<div className="flex items-center justify-center w-full mb-3 h-11 bg-black/10 dark:bg-white/10 backdrop-blur-lg rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
+						<div className="flex items-center justify-center w-full mb-3 h-11 bg-black/10 dark:bg-white/10 rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
 							<div className="flex items-center justify-center gap-2">
 								<Spinner className="size-5" />
 								<span className="text-sm font-medium">
diff --git a/apps/desktop2/src/routes/trending.users.tsx b/apps/desktop2/src/routes/trending.users.tsx
index 7cb69aee..fdc3ebf0 100644
--- a/apps/desktop2/src/routes/trending.users.tsx
+++ b/apps/desktop2/src/routes/trending.users.tsx
@@ -45,7 +45,7 @@ export function Screen() {
 						users.profiles.map((item: { pubkey: string }) => (
 							<div
 								key={item.pubkey}
-								className="h-max w-full overflow-hidden mb-3 p-2 bg-black/5 dark:bg-white/5 backdrop-blur-lg rounded-xl"
+								className="h-max w-full overflow-hidden mb-3 p-2 bg-black/5 dark:bg-white/5 rounded-xl"
 							>
 								<User.Provider pubkey={item.pubkey}>
 									<User.Root>
diff --git a/apps/desktop2/src/routes/users/$pubkey.tsx b/apps/desktop2/src/routes/users/$pubkey.tsx
index 611ad3aa..6a2938a5 100644
--- a/apps/desktop2/src/routes/users/$pubkey.tsx
+++ b/apps/desktop2/src/routes/users/$pubkey.tsx
@@ -50,7 +50,7 @@ function Screen() {
 
 	return (
 		<Container withDrag>
-			<Box className="px-0 scrollbar-none bg-black/5 dark:bg-white/5 backdrop-blur-sm">
+			<Box className="px-0 scrollbar-none bg-black/5 dark:bg-white/5">
 				<WindowVirtualizer>
 					<User.Provider pubkey={pubkey}>
 						<User.Root>
diff --git a/packages/system/src/commands.ts b/packages/system/src/commands.ts
index 982deee1..86cc0faa 100644
--- a/packages/system/src/commands.ts
+++ b/packages/system/src/commands.ts
@@ -459,7 +459,7 @@ export type Column = { label: string; url: string; x: number; y: number; width:
 export type Meta = { content: string; images: string[]; videos: string[]; events: string[]; mentions: string[]; hashtags: string[] }
 export type Relays = { connected: string[]; read: string[] | null; write: string[] | null; both: string[] | null }
 export type RichEvent = { raw: string; parsed: Meta | null }
-export type Settings = { proxy: string | null; image_resize_service: string | null; use_relay_hint: boolean; content_warning: boolean; display_avatar: boolean; display_zap_button: boolean; display_repost_button: boolean; display_media: boolean }
+export type Settings = { proxy: string | null; image_resize_service: string | null; use_relay_hint: boolean; content_warning: boolean; display_avatar: boolean; display_zap_button: boolean; display_repost_button: boolean; display_media: boolean; vibrancy: boolean }
 export type Window = { label: string; title: string; url: string; width: number; height: number; maximizable: boolean; minimizable: boolean; hidden_title: boolean }
 
 /** tauri-specta globals **/
diff --git a/packages/ui/src/carousel.tsx b/packages/ui/src/carousel.tsx
deleted file mode 100644
index 5430165b..00000000
--- a/packages/ui/src/carousel.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { ArrowLeftIcon, ArrowRightIcon } from "@lume/icons";
-import { cn } from "@lume/utils";
-import { useSnapCarousel } from "react-snap-carousel";
-
-interface CarouselProps<T> {
-	readonly items: T[];
-	readonly renderItem: (
-		props: CarouselRenderItemProps<T>,
-	) => React.ReactElement<CarouselItemProps>;
-}
-
-interface CarouselRenderItemProps<T> {
-	readonly item: T;
-	readonly index: number;
-	readonly isSnapPoint: boolean;
-}
-
-export const Carousel = <T,>({ items, renderItem }: CarouselProps<T>) => {
-	const { scrollRef, pages, activePageIndex, prev, next, snapPointIndexes } =
-		useSnapCarousel();
-
-	return (
-		<div className="relative group">
-			<ul
-				ref={scrollRef}
-				className="relative flex overflow-auto snap-x scrollbar-none"
-			>
-				{items.map((item, index) =>
-					renderItem({
-						item,
-						index,
-						isSnapPoint: snapPointIndexes.has(index),
-					}),
-				)}
-			</ul>
-			<div
-				aria-hidden
-				className="absolute z-10 items-center justify-between hidden w-full px-5 transform -translate-x-1/2 -translate-y-1/2 group-hover:flex left-1/2 top-1/2"
-			>
-				<button
-					type="button"
-					className={cn(
-						"size-11 rounded-full bg-black/50 backdrop-blur-sm flex items-center justify-center text-white",
-						activePageIndex <= 0 ? "opacity-50" : "",
-					)}
-					onClick={() => prev()}
-				>
-					<ArrowLeftIcon className="size-6" />
-				</button>
-				<button
-					type="button"
-					className={cn(
-						"size-11 rounded-full bg-black/50 backdrop-blur-sm flex items-center justify-center text-white",
-						activePageIndex <= 0 ? "opacity-50" : "",
-					)}
-					onClick={() => next()}
-				>
-					<ArrowRightIcon className="size-6" />
-				</button>
-			</div>
-			<div className="absolute flex items-center justify-center w-12 h-6 text-sm font-medium text-white bg-black rounded-full top-3 right-3 mix-blend-multiply bg-opacity-20 backdrop-blur-sm">
-				{activePageIndex + 1} / {pages.length}
-			</div>
-		</div>
-	);
-};
-
-interface CarouselItemProps {
-	readonly isSnapPoint: boolean;
-	readonly children?: React.ReactNode;
-}
-
-export const CarouselItem = ({ isSnapPoint, children }: CarouselItemProps) => {
-	return (
-		<li
-			className={cn(
-				"w-[240px] h-[320px] shrink-0 pl-3 last:pr-2",
-				isSnapPoint ? "" : "snap-start",
-			)}
-		>
-			{children}
-		</li>
-	);
-};
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index a286d7a6..1ca7c729 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,4 +1,3 @@
 export * from "./container";
 export * from "./box";
 export * from "./spinner";
-export * from "./carousel";
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 0e2a7b0e..a5010ca4 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -43,6 +43,7 @@ pub struct Settings {
   display_zap_button: bool,
   display_repost_button: bool,
   display_media: bool,
+  vibrancy: bool,
 }
 
 impl Default for Settings {
@@ -56,6 +57,7 @@ impl Default for Settings {
       display_zap_button: true,
       display_repost_button: true,
       display_media: true,
+      vibrancy: true,
     }
   }
 }