diff --git a/apps/desktop2/public/ai.jpg b/apps/desktop2/public/ai.jpg
deleted file mode 100644
index 36843631..00000000
Binary files a/apps/desktop2/public/ai.jpg and /dev/null differ
diff --git a/apps/desktop2/public/anime.jpg b/apps/desktop2/public/anime.jpg
deleted file mode 100644
index f7f8eeab..00000000
Binary files a/apps/desktop2/public/anime.jpg and /dev/null differ
diff --git a/apps/desktop2/public/art.jpg b/apps/desktop2/public/art.jpg
deleted file mode 100644
index efc36ab3..00000000
Binary files a/apps/desktop2/public/art.jpg and /dev/null differ
diff --git a/apps/desktop2/public/gaming.jpg b/apps/desktop2/public/gaming.jpg
deleted file mode 100644
index de58aeeb..00000000
Binary files a/apps/desktop2/public/gaming.jpg and /dev/null differ
diff --git a/apps/desktop2/public/movie.jpg b/apps/desktop2/public/movie.jpg
deleted file mode 100644
index bcb36809..00000000
Binary files a/apps/desktop2/public/movie.jpg and /dev/null differ
diff --git a/apps/desktop2/public/music.jpg b/apps/desktop2/public/music.jpg
deleted file mode 100644
index 1c533c15..00000000
Binary files a/apps/desktop2/public/music.jpg and /dev/null differ
diff --git a/apps/desktop2/public/nsfw.jpg b/apps/desktop2/public/nsfw.jpg
deleted file mode 100644
index f9e183d2..00000000
Binary files a/apps/desktop2/public/nsfw.jpg and /dev/null differ
diff --git a/apps/desktop2/public/photography.jpg b/apps/desktop2/public/photography.jpg
deleted file mode 100644
index 6f117830..00000000
Binary files a/apps/desktop2/public/photography.jpg and /dev/null differ
diff --git a/apps/desktop2/public/technology.jpg b/apps/desktop2/public/technology.jpg
deleted file mode 100644
index cfd733f0..00000000
Binary files a/apps/desktop2/public/technology.jpg and /dev/null differ
diff --git a/apps/desktop2/src/routes/$account.tsx b/apps/desktop2/src/routes/$account.tsx
index 930cacdf..33a6d06d 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 { Event, Kind } from "@lume/types";
+import { type Event, Kind } from "@lume/types";
 import { User } from "@/components/user";
 import {
 	cn,
diff --git a/apps/desktop2/src/routes/create-group.tsx b/apps/desktop2/src/routes/create-group.tsx
index 774bddf5..68b331d3 100644
--- a/apps/desktop2/src/routes/create-group.tsx
+++ b/apps/desktop2/src/routes/create-group.tsx
@@ -1,8 +1,8 @@
-import { CheckCircleIcon } from "@lume/icons";
+import { CancelIcon, CheckCircleIcon, PlusIcon } from "@lume/icons";
 import type { ColumnRouteSearch } from "@lume/types";
 import { Spinner } from "@lume/ui";
 import { User } from "@/components/user";
-import { createFileRoute, useRouter } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
 import { useState } from "react";
 import { toast } from "sonner";
 
@@ -24,103 +24,173 @@ export const Route = createFileRoute("/create-group")({
 
 function Screen() {
 	const contacts = Route.useLoaderData();
-	const router = useRouter();
+	const navigate = Route.useNavigate();
 
 	const { ark } = Route.useRouteContext();
 	const { label, redirect } = Route.useSearch();
 
-	const [title, setTitle] = useState<string>("Just a new group");
-	const [users, setUsers] = useState<Array<string>>([]);
-	const [loading, setLoading] = useState(false);
-	const [isDone, setIsDone] = useState(false);
+	const [title, setTitle] = useState("");
+	const [npub, setNpub] = useState("");
+	const [users, setUsers] = useState<string[]>([
+		"npub1zfss807aer0j26mwp2la0ume0jqde3823rmu97ra6sgyyg956e0s6xw445", // reya
+	]);
+	const [isLoading, setIsLoading] = useState(false);
 
 	const toggleUser = (pubkey: string) => {
-		const arr = users.includes(pubkey)
-			? users.filter((i) => i !== pubkey)
-			: [...users, pubkey];
-		setUsers(arr);
+		setUsers((prev) =>
+			prev.includes(pubkey)
+				? prev.filter((i) => i !== pubkey)
+				: [...prev, pubkey],
+		);
+	};
+
+	const addUser = () => {
+		if (!npub.startsWith("npub1")) return;
+		if (users.includes(npub)) return;
+
+		setUsers((prev) => [...prev, npub]);
+		setNpub("");
 	};
 
 	const submit = async () => {
 		try {
-			if (isDone) return router.history.push(redirect);
+			setIsLoading(true);
 
-			// start loading
-			setLoading(true);
+			const key = `lume_group_${label}`;
+			const createGroup = await ark.set_nstore(key, JSON.stringify(users));
 
-			const groups = await ark.set_nstore(
-				`lume_group_${label}`,
-				JSON.stringify(users),
-			);
-
-			if (groups) {
-				toast.success("Group has been created successfully.");
-				// start loading
-				setIsDone(true);
-				setLoading(false);
+			if (createGroup) {
+				return navigate({ to: redirect });
 			}
 		} catch (e) {
-			setLoading(false);
+			setIsLoading(false);
 			toast.error(e);
 		}
 	};
 
 	return (
-		<div className="h-full overflow-y-auto scrollbar-none">
-			<div className="flex flex-col gap-5 p-3">
-				<div className="flex flex-col gap-1">
-					<label htmlFor="name" className="font-medium">
+		<div className="w-full h-full flex flex-col items-center justify-center gap-4">
+			<div className="text-center flex flex-col items-center justify-center">
+				<h1 className="text-2xl font-serif font-medium">
+					Focus feeds for people you like
+				</h1>
+				<p className="leading-tight text-neutral-700 dark:text-neutral-300">
+					Add some people for custom feeds.
+				</p>
+			</div>
+			<div className="w-4/5 max-w-full flex flex-col gap-3">
+				<div className="w-full h-9 shrink-0 flex items-center bg-black/5 dark:bg-white/5 rounded-lg">
+					<label
+						htmlFor="name"
+						className="w-16 border-r border-black/10 dark:border-white/10 shrink-0 text-center text-sm font-semibold"
+					>
 						Name
 					</label>
 					<input
 						name="name"
 						value={title}
 						onChange={(e) => setTitle(e.target.value)}
-						placeholder="Nostrichs..."
-						className="h-10 rounded-lg bg-transparent border border-neutral-300 dark:border-neutral-700 px-3 placeholder:text-neutral-600 focus:border-neutral-500 focus:ring-0 dark:placeholder:text-neutral-400"
+						placeholder="Enter a name for this group"
+						className="h-full bg-transparent border-none text-sm px-3 placeholder:text-neutral-600 focus:border-neutral-500 focus:ring-0 dark:placeholder:text-neutral-400"
 					/>
 				</div>
-				<div className="flex flex-col gap-1">
-					<div className="inline-flex items-center justify-between">
-						<span className="font-medium">Pick user</span>
-						<span className="text-neutral-600 dark:text-neutral-400">{`${users.length} / ∞`}</span>
-					</div>
-					<div className="flex flex-col gap-2">
-						{contacts.map((item: string) => (
+				<div className="w-full flex flex-col items-center 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="flex gap-2">
+							<input
+								name="npub"
+								value={npub}
+								onChange={(e) => setNpub(e.target.value)}
+								placeholder="npub1..."
+								className="h-9 w-full rounded-lg bg-black/10 dark:bg-white/10 border-none text-sm px-3 placeholder:text-neutral-600 focus:border-neutral-500 focus:ring-0 dark:placeholder:text-neutral-400"
+							/>
 							<button
-								key={item}
 								type="button"
-								onClick={() => toggleUser(item)}
-								className="inline-flex items-center justify-between px-3 py-2 rounded-lg bg-black/10 dark:bg-white/10 hover:bg-black/20 dark:hover:bg-white/20"
+								onClick={() => addUser()}
+								className="inline-flex size-9 rounded-lg items-center justify-center bg-black/20 dark:bg-white/20 shrink-0 text-white hover:bg-blue-500"
 							>
-								<User.Provider pubkey={item}>
-									<User.Root className="flex items-center gap-2.5">
-										<User.Avatar className="size-10 rounded-full object-cover" />
-										<div className="flex items-center gap-1">
-											<User.Name className="font-medium" />
-											<User.NIP05 />
-										</div>
-									</User.Root>
-								</User.Provider>
-								{users.includes(item) ? (
-									<CheckCircleIcon className="size-5 text-teal-500" />
-								) : null}
+								<PlusIcon className="size-6" />
 							</button>
-						))}
+						</div>
+						<div className="flex flex-col gap-2">
+							<span className="text-sm font-semibold">Added</span>
+							<div className="flex flex-col gap-2">
+								{users.length ? (
+									users.map((item: string) => (
+										<button
+											key={item}
+											type="button"
+											onClick={() => toggleUser(item)}
+											className="inline-flex items-center justify-between px-3 py-2 rounded-lg bg-white dark:bg-black/20 backdrop-blur-lg shadow-primary dark:ring-1 ring-neutral-800/50"
+										>
+											<User.Provider pubkey={item}>
+												<User.Root className="flex items-center gap-2.5">
+													<User.Avatar className="size-8 rounded-full object-cover" />
+													<div className="flex items-center gap-1">
+														<User.Name className="text-sm font-medium" />
+													</div>
+												</User.Root>
+											</User.Provider>
+											<div>
+												<CancelIcon className="size-4" />
+											</div>
+										</button>
+									))
+								) : (
+									<div className="bg-black/5 dark:bg-white/5 text-sm flex items-center justify-center h-14 rounded-lg">
+										Empty.
+									</div>
+								)}
+							</div>
+						</div>
+						<div className="flex flex-col gap-2">
+							<span className="text-sm font-semibold">Contacts</span>
+							<div className="flex flex-col gap-2">
+								{contacts.length ? (
+									contacts.map((item: string) => (
+										<button
+											key={item}
+											type="button"
+											onClick={() => toggleUser(item)}
+											className="inline-flex items-center justify-between px-3 py-2 rounded-lg bg-white dark:bg-black/20 backdrop-blur-lg shadow-primary dark:ring-1 ring-neutral-800/50"
+										>
+											<User.Provider pubkey={item}>
+												<User.Root className="flex items-center gap-2.5">
+													<User.Avatar className="size-8 rounded-full object-cover" />
+													<div className="flex items-center gap-1">
+														<User.Name className="text-sm font-medium" />
+													</div>
+												</User.Root>
+											</User.Provider>
+										</button>
+									))
+								) : (
+									<div className="bg-black/5 dark:bg-white/5 text-sm flex items-center justify-center h-14 rounded-lg">
+										<p>
+											Find more user at{" "}
+											<a
+												href="https://www.nostr.directory/"
+												target="_blank"
+												className="text-blue-600 after:content-['_↗']"
+												rel="noreferrer"
+											>
+												Nostr Directory
+											</a>
+										</p>
+									</div>
+								)}
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<div className="fixed z-10 flex items-center justify-center w-full bottom-6">
-				{users.length >= 1 ? (
 					<button
 						type="button"
 						onClick={() => submit()}
-						disabled={users.length < 1}
-						className="inline-flex items-center justify-center px-4 font-medium text-white transform bg-blue-500 rounded-full active:translate-y-1 w-32 h-10 hover:bg-blue-600 focus:outline-none"
+						disabled={isLoading || users.length < 1}
+						className="inline-flex items-center justify-center w-36 rounded-full h-9 bg-blue-500 text-white text-sm font-medium hover:bg-blue-600 disabled:opacity-50"
 					>
-						{isDone ? "Back" : loading ? <Spinner /> : "Update"}
+						{isLoading ? <Spinner /> : "Confirm"}
 					</button>
-				) : null}
+				</div>
 			</div>
 		</div>
 	);
diff --git a/apps/desktop2/src/routes/create-newsfeed.f2f.tsx b/apps/desktop2/src/routes/create-newsfeed.f2f.tsx
new file mode 100644
index 00000000..a9ad94d2
--- /dev/null
+++ b/apps/desktop2/src/routes/create-newsfeed.f2f.tsx
@@ -0,0 +1,86 @@
+import type { ColumnRouteSearch } from "@lume/types";
+import { Spinner } from "@lume/ui";
+import { createFileRoute } from "@tanstack/react-router";
+import { invoke } from "@tauri-apps/api/core";
+import { useState } from "react";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/create-newsfeed/f2f")({
+	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+		return {
+			account: search.account,
+			label: search.label,
+			name: search.name,
+		};
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const navigate = Route.useNavigate();
+	const { redirect } = Route.useSearch();
+
+	const [npub, setNpub] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+
+	const submit = async () => {
+		if (!npub.startsWith("npub1"))
+			return toast.warning("You must enter a valid npub.");
+
+		try {
+			setIsLoading(true);
+
+			const sync: boolean = await invoke("friend_to_friend", { npub });
+
+			if (sync) {
+				return navigate({ to: redirect });
+			}
+		} catch (e) {
+			setIsLoading(false);
+			toast.error(String(e));
+		}
+	};
+
+	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="h-full flex flex-col justify-between">
+				<div className="flex-1 flex flex-col gap-1.5 justify-center px-5">
+					<p className="font-semibold text-neutral-500">
+						You already have a friend on Nostr?
+					</p>
+					<p>Instead of building the timeline by yourself.</p>
+					<p className="font-semibold text-neutral-500">
+						Just enter your friend's{" "}
+						<span className="text-blue-500">npub.</span>
+					</p>
+					<p>
+						You will have the same experience as your friend. Of course, you
+						always can edit your network later.
+					</p>
+				</div>
+				<div className="flex flex-col gap-2">
+					<div className="flex flex-col gap-1">
+						<label htmlFor="npub" className="font-medium text-sm">
+							NPUB
+						</label>
+						<input
+							name="npub"
+							placeholder="npub1..."
+							value={npub}
+							onChange={(e) => setNpub(e.target.value)}
+							spellCheck={false}
+							className="h-11 rounded-lg bg-transparent border border-neutral-200 dark:border-neutral-800 px-3 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:placeholder:text-neutral-400"
+						/>
+					</div>
+					<button
+						type="button"
+						onClick={() => submit()}
+						className="inline-flex items-center justify-center w-full rounded-lg h-9 bg-blue-500 text-white text-sm font-medium hover:bg-blue-600"
+					>
+						{isLoading ? <Spinner /> : "Confirm"}
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/desktop2/src/routes/create-newsfeed.tsx b/apps/desktop2/src/routes/create-newsfeed.tsx
new file mode 100644
index 00000000..250b6dc7
--- /dev/null
+++ b/apps/desktop2/src/routes/create-newsfeed.tsx
@@ -0,0 +1,53 @@
+import { cn } from "@lume/utils";
+import { Link, Outlet } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/create-newsfeed")({
+	component: Screen,
+});
+
+function Screen() {
+	return (
+		<div className="w-full h-full flex flex-col items-center justify-center gap-4">
+			<div className="text-center flex flex-col items-center justify-center">
+				<h1 className="text-2xl font-serif font-medium">
+					Build up your timeline.
+				</h1>
+				<p className="leading-tight text-neutral-700 dark:text-neutral-300">
+					Follow some people to keep up to date with them.
+				</p>
+			</div>
+			<div className="w-4/5 max-w-full flex flex-col gap-3">
+				<div className="w-full h-9 shrink-0 flex items-center justify-between bg-black/5 dark:bg-white/5 rounded-lg px-0.5">
+					<Link to="/create-newsfeed/users" className="flex-1 h-8">
+						{({ isActive }) => (
+							<div
+								className={cn(
+									"text-sm font-medium rounded-md h-full flex items-center justify-center",
+									isActive
+										? "bg-white dark:bg-white/20 shadow"
+										: "bg-transparent",
+								)}
+							>
+								Users
+							</div>
+						)}
+					</Link>
+					<Link to="/create-newsfeed/f2f" className="flex-1 h-8">
+						{({ isActive }) => (
+							<div
+								className={cn(
+									"rounded-md h-full flex items-center justify-center",
+									isActive ? "bg-white dark:bg-white/20" : "bg-transparent",
+								)}
+							>
+								Friend to Friend
+							</div>
+						)}
+					</Link>
+				</div>
+				<Outlet />
+			</div>
+		</div>
+	);
+}
diff --git a/apps/desktop2/src/routes/create-newsfeed.users.tsx b/apps/desktop2/src/routes/create-newsfeed.users.tsx
new file mode 100644
index 00000000..e88d8fc3
--- /dev/null
+++ b/apps/desktop2/src/routes/create-newsfeed.users.tsx
@@ -0,0 +1,128 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Suspense, useState } from "react";
+import { Await, defer } from "@tanstack/react-router";
+import { User } from "@/components/user";
+import { Spinner } from "@lume/ui";
+import { toast } from "sonner";
+import type { ColumnRouteSearch } from "@lume/types";
+
+export const Route = createFileRoute("/create-newsfeed/users")({
+	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+		return {
+			account: search.account,
+			label: search.label,
+			name: search.name,
+		};
+	},
+	loader: async ({ abortController }) => {
+		try {
+			return {
+				data: defer(
+					fetch("https://api.nostr.band/v0/trending/profiles", {
+						signal: abortController.signal,
+					}).then((res) => res.json()),
+				),
+			};
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const { ark } = Route.useRouteContext();
+	const { data } = Route.useLoaderData();
+	const { redirect } = Route.useSearch();
+
+	const [isLoading, setIsLoading] = useState(false);
+	const [follows, setFollows] = useState<string[]>([]);
+
+	const navigate = Route.useNavigate();
+
+	const toggleFollow = (pubkey: string) => {
+		setFollows((prev) =>
+			prev.includes(pubkey)
+				? prev.filter((i) => i !== pubkey)
+				: [...prev, pubkey],
+		);
+	};
+
+	const submit = async () => {
+		try {
+			setIsLoading(true);
+
+			const newContactList = await ark.set_contact_list(follows);
+
+			if (newContactList) {
+				return navigate({ to: redirect });
+			}
+		} catch (e) {
+			setIsLoading(false);
+			toast.error(String(e));
+		}
+	};
+
+	return (
+		<div className="w-full flex flex-col items-center 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">
+				<Suspense
+					fallback={
+						<div className="flex h-20 w-full flex-col items-center justify-center gap-1">
+							<button
+								type="button"
+								className="inline-flex items-center gap-2 text-sm font-medium"
+								disabled
+							>
+								<Spinner className="size-5" />
+								Loading...
+							</button>
+						</div>
+					}
+				>
+					<Await promise={data}>
+						{(users) =>
+							users.profiles.map((item: { pubkey: string }) => (
+								<div
+									key={item.pubkey}
+									className="h-max w-full overflow-hidden mb-2 p-2 bg-white dark:bg-black/20 backdrop-blur-lg rounded-lg shadow-primary dark:ring-1 ring-neutral-800/50"
+								>
+									<User.Provider pubkey={item.pubkey}>
+										<User.Root>
+											<div className="flex h-full w-full flex-col gap-2">
+												<div className="flex items-center justify-between">
+													<div className="flex items-center gap-2">
+														<User.Avatar className="size-7 shrink-0 rounded-full object-cover" />
+														<User.Name className="text-sm leadning-tight max-w-[15rem] truncate font-semibold" />
+													</div>
+													<button
+														type="button"
+														onClick={() => toggleFollow(item.pubkey)}
+														className="inline-flex h-7 w-20 items-center justify-center rounded-lg bg-black/10 text-sm font-medium hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
+													>
+														{follows.includes(item.pubkey)
+															? "Unfollow"
+															: "Follow"}
+													</button>
+												</div>
+												<User.About className="line-clamp-3 max-w-none select-text text-neutral-800 dark:text-neutral-400" />
+											</div>
+										</User.Root>
+									</User.Provider>
+								</div>
+							))
+						}
+					</Await>
+				</Suspense>
+			</div>
+			<button
+				type="button"
+				onClick={() => submit()}
+				disabled={isLoading || follows.length < 1}
+				className="inline-flex items-center justify-center w-36 rounded-full h-9 bg-blue-500 text-white text-sm font-medium hover:bg-blue-600 disabled:opacity-50"
+			>
+				{isLoading ? <Spinner /> : "Confirm"}
+			</button>
+		</div>
+	);
+}
diff --git a/apps/desktop2/src/routes/create-topic.tsx b/apps/desktop2/src/routes/create-topic.tsx
new file mode 100644
index 00000000..df2241a2
--- /dev/null
+++ b/apps/desktop2/src/routes/create-topic.tsx
@@ -0,0 +1,104 @@
+import { CheckCircleIcon } from "@lume/icons";
+import type { ColumnRouteSearch, Topic } from "@lume/types";
+import { Spinner } from "@lume/ui";
+import { TOPICS } from "@lume/utils";
+import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/create-topic")({
+	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+		return {
+			account: search.account,
+			label: search.label,
+			name: search.name,
+		};
+	},
+	component: Screen,
+});
+
+function Screen() {
+	const { label, redirect } = Route.useSearch();
+	const { ark } = Route.useRouteContext();
+
+	const [topics, setTopics] = useState<Topic[]>([]);
+	const [isLoading, setIsLoading] = useState(false);
+
+	const navigate = Route.useNavigate();
+
+	const toggleTopic = (topic: Topic) => {
+		setTopics((prev) =>
+			prev.find((item) => item.title === topic.title)
+				? prev.filter((i) => i.title !== topic.title)
+				: [...prev, topic],
+		);
+	};
+
+	const submit = async () => {
+		try {
+			setIsLoading(true);
+
+			const key = `lume_topic_${label}`;
+			const createTopic = await ark.set_nstore(key, JSON.stringify(topics));
+
+			if (createTopic) {
+				return navigate({ to: redirect });
+			}
+		} catch (e) {
+			setIsLoading(false);
+			toast.error(String(e));
+		}
+	};
+
+	return (
+		<div className="w-full h-full flex flex-col items-center justify-center gap-4">
+			<div className="text-center flex flex-col items-center justify-center">
+				<h1 className="text-2xl font-serif font-medium">
+					What are your interests?
+				</h1>
+				<p className="leading-tight text-neutral-700 dark:text-neutral-300">
+					Add some topics you want to focus on.
+				</p>
+			</div>
+			<div className="w-4/5 max-w-full flex flex-col gap-3">
+				<div className="w-full h-9 shrink-0 flex items-center justify-between bg-black/5 dark:bg-white/5 rounded-lg px-3">
+					<span className="text-sm font-medium">Added: {topics.length}</span>
+				</div>
+				<div className="w-full flex flex-col items-center 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="flex flex-col gap-3">
+							{TOPICS.map((topic) => (
+								<button
+									key={topic.title}
+									onClick={() => toggleTopic(topic)}
+									className="h-11 px-3 flex items-center justify-between bg-white dark:bg-black/20 backdrop-blur-lg border border-transparent hover:border-blue-500 rounded-lg shadow-primary dark:ring-1 ring-neutral-800/50"
+								>
+									<div className="inline-flex items-center gap-1">
+										<div>{topic.icon}</div>
+										<div className="text-sm font-medium">
+											<span>{topic.title}</span>
+											<span className="ml-1 italic text-neutral-400 dark:text-neutral-600 font-normal">
+												{topic.content.length} hashtags
+											</span>
+										</div>
+									</div>
+									{topics.find((item) => item.title === topic.title) ? (
+										<CheckCircleIcon className="text-teal-500 size-4" />
+									) : null}
+								</button>
+							))}
+						</div>
+					</div>
+					<button
+						type="button"
+						onClick={() => submit()}
+						disabled={isLoading || topics.length < 1}
+						className="inline-flex items-center justify-center w-36 rounded-full h-9 bg-blue-500 text-white text-sm font-medium hover:bg-blue-600 disabled:opacity-50"
+					>
+						{isLoading ? <Spinner /> : "Confirm"}
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/desktop2/src/routes/foryou.tsx b/apps/desktop2/src/routes/foryou.tsx
deleted file mode 100644
index 593c5104..00000000
--- a/apps/desktop2/src/routes/foryou.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import { Conversation } from "@/components/conversation";
-import { Quote } from "@/components/quote";
-import { RepostNote } from "@/components/repost";
-import { TextNote } from "@/components/text";
-import { ArrowRightCircleIcon, ArrowRightIcon } from "@lume/icons";
-import { type ColumnRouteSearch, type Event, Kind } from "@lume/types";
-import { Spinner } from "@lume/ui";
-import { useInfiniteQuery } from "@tanstack/react-query";
-import { Link, createFileRoute, redirect } from "@tanstack/react-router";
-import { Virtualizer } from "virtua";
-
-export const Route = createFileRoute("/foryou")({
-  validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
-    return {
-      account: search.account,
-      label: search.label,
-      name: search.name,
-    };
-  },
-  beforeLoad: async ({ search, context }) => {
-    const ark = context.ark;
-    const interests = await ark.get_interest();
-    const settings = await ark.get_settings();
-
-    if (!interests) {
-      throw redirect({
-        to: "/interests",
-        search: {
-          ...search,
-          redirect: "/foryou",
-        },
-      });
-    }
-
-    return {
-      interests,
-      settings,
-    };
-  },
-  component: Screen,
-});
-
-export function Screen() {
-  const { label, account } = Route.useSearch();
-  const { ark, interests } = Route.useRouteContext();
-  const {
-    data,
-    isLoading,
-    isFetching,
-    isFetchingNextPage,
-    hasNextPage,
-    fetchNextPage,
-  } = useInfiniteQuery({
-    queryKey: [label, account],
-    initialPageParam: 0,
-    queryFn: async ({ pageParam }: { pageParam: number }) => {
-      const events = await ark.get_hashtag_events(
-        interests.hashtags,
-        20,
-        pageParam,
-      );
-      return events;
-    },
-    getNextPageParam: (lastPage) => lastPage?.at(-1)?.created_at - 1,
-    select: (data) => data?.pages.flatMap((page) => page),
-    refetchOnWindowFocus: false,
-  });
-
-  const renderItem = (event: Event) => {
-    if (!event) return;
-    switch (event.kind) {
-      case Kind.Repost:
-        return <RepostNote key={event.id} event={event} />;
-      default: {
-        const isConversation =
-          event.tags.filter((tag) => tag[0] === "e" && tag[3] !== "mention")
-            .length > 0;
-        const isQuote = event.tags.filter((tag) => tag[0] === "q").length > 0;
-
-        if (isConversation) {
-          return <Conversation key={event.id} event={event} className="mb-3" />;
-        }
-
-        if (isQuote) {
-          return <Quote key={event.id} event={event} className="mb-3" />;
-        }
-
-        return <TextNote key={event.id} event={event} className="mb-3" />;
-      }
-    }
-  };
-
-  return (
-    <div className="p-2 w-full h-full overflow-y-auto scrollbar-none">
-      {isFetching && !isLoading && !isFetchingNextPage ? (
-        <div className="w-full h-11 flex items-center justify-center">
-          <div className="flex items-center justify-center gap-2">
-            <Spinner className="size-5" />
-            <span className="text-sm font-medium">Fetching new notes...</span>
-          </div>
-        </div>
-      ) : null}
-      {isLoading ? (
-        <div className="flex h-16 w-full items-center justify-center gap-2">
-          <Spinner className="size-5" />
-          <span className="text-sm font-medium">Loading...</span>
-        </div>
-      ) : !data.length ? (
-        <Empty />
-      ) : (
-        <Virtualizer overscan={3}>
-          {data.map((item) => renderItem(item))}
-        </Virtualizer>
-      )}
-      {data?.length && hasNextPage ? (
-        <div>
-          <button
-            type="button"
-            onClick={() => fetchNextPage()}
-            disabled={isFetchingNextPage || isLoading}
-            className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-neutral-100 px-3 font-medium hover:bg-neutral-50 focus:outline-none dark:bg-white/10 dark:hover:bg-white/20"
-          >
-            {isFetchingNextPage ? (
-              <Spinner className="size-5" />
-            ) : (
-              <>
-                <ArrowRightCircleIcon className="size-5" />
-                Load more
-              </>
-            )}
-          </button>
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-function Empty() {
-  return (
-    <div className="flex flex-col py-10 gap-10">
-      <div className="text-center flex flex-col items-center justify-center">
-        <div className="size-24 bg-blue-100 flex flex-col items-center justify-end overflow-hidden dark:bg-blue-900 rounded-full mb-8">
-          <div className="w-12 h-16 bg-gradient-to-b from-blue-500 dark:from-blue-200 to-blue-50 dark:to-blue-900 rounded-t-lg" />
-        </div>
-        <p className="text-lg font-medium">Your newsfeed is empty</p>
-        <p className="leading-tight text-neutral-700 dark:text-neutral-300">
-          Here are few suggestions to get started.
-        </p>
-      </div>
-      <div className="flex flex-col px-3 gap-2">
-        <Link
-          to="/trending/notes"
-          className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
-        >
-          <ArrowRightIcon className="size-5" />
-          Show trending notes
-        </Link>
-        <Link
-          to="/trending/users"
-          className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
-        >
-          <ArrowRightIcon className="size-5" />
-          Discover trending users
-        </Link>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/desktop2/src/routes/global.tsx b/apps/desktop2/src/routes/global.tsx
index 6dbaa22a..c343ccdf 100644
--- a/apps/desktop2/src/routes/global.tsx
+++ b/apps/desktop2/src/routes/global.tsx
@@ -10,141 +10,141 @@ import { Link, createFileRoute } from "@tanstack/react-router";
 import { Virtualizer } from "virtua";
 
 export const Route = createFileRoute("/global")({
-  validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
-    return {
-      account: search.account,
-      label: search.label,
-      name: search.name,
-    };
-  },
-  beforeLoad: async ({ context }) => {
-    const ark = context.ark;
-    const settings = await ark.get_settings();
+	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+		return {
+			account: search.account,
+			label: search.label,
+			name: search.name,
+		};
+	},
+	beforeLoad: async ({ context }) => {
+		const ark = context.ark;
+		const settings = await ark.get_settings();
 
-    return { settings };
-  },
-  component: Screen,
+		return { settings };
+	},
+	component: Screen,
 });
 
 export function Screen() {
-  const { label, account } = Route.useSearch();
-  const { ark } = Route.useRouteContext();
-  const {
-    data,
-    isLoading,
-    isFetching,
-    isFetchingNextPage,
-    hasNextPage,
-    fetchNextPage,
-  } = useInfiniteQuery({
-    queryKey: [label, account],
-    initialPageParam: 0,
-    queryFn: async ({ pageParam }: { pageParam: number }) => {
-      const events = await ark.get_global_events(20, pageParam);
-      return events;
-    },
-    getNextPageParam: (lastPage) => lastPage?.at(-1)?.created_at - 1,
-    select: (data) => data?.pages.flatMap((page) => page),
-    refetchOnWindowFocus: false,
-  });
+	const { label, account } = Route.useSearch();
+	const { ark } = Route.useRouteContext();
+	const {
+		data,
+		isLoading,
+		isFetching,
+		isFetchingNextPage,
+		hasNextPage,
+		fetchNextPage,
+	} = useInfiniteQuery({
+		queryKey: [label, account],
+		initialPageParam: 0,
+		queryFn: async ({ pageParam }: { pageParam: number }) => {
+			const events = await ark.get_global_events(20, pageParam);
+			return events;
+		},
+		getNextPageParam: (lastPage) => lastPage?.at(-1)?.created_at - 1,
+		select: (data) => data?.pages.flatMap((page) => page),
+		refetchOnWindowFocus: false,
+	});
 
-  const renderItem = (event: Event) => {
-    if (!event) return;
-    switch (event.kind) {
-      case Kind.Repost:
-        return <RepostNote key={event.id} event={event} />;
-      default: {
-        const isConversation =
-          event.tags.filter((tag) => tag[0] === "e" && tag[3] !== "mention")
-            .length > 0;
-        const isQuote = event.tags.filter((tag) => tag[0] === "q").length > 0;
+	const renderItem = (event: Event) => {
+		if (!event) return;
+		switch (event.kind) {
+			case Kind.Repost:
+				return <RepostNote key={event.id} event={event} />;
+			default: {
+				const isConversation =
+					event.tags.filter((tag) => tag[0] === "e" && tag[3] !== "mention")
+						.length > 0;
+				const isQuote = event.tags.filter((tag) => tag[0] === "q").length > 0;
 
-        if (isConversation) {
-          return <Conversation key={event.id} event={event} className="mb-3" />;
-        }
+				if (isConversation) {
+					return <Conversation key={event.id} event={event} className="mb-3" />;
+				}
 
-        if (isQuote) {
-          return <Quote key={event.id} event={event} className="mb-3" />;
-        }
+				if (isQuote) {
+					return <Quote key={event.id} event={event} className="mb-3" />;
+				}
 
-        return <TextNote key={event.id} event={event} className="mb-3" />;
-      }
-    }
-  };
+				return <TextNote key={event.id} event={event} className="mb-3" />;
+			}
+		}
+	};
 
-  return (
-    <div className="p-2 w-full h-full overflow-y-auto scrollbar-none">
-      {isFetching && !isLoading && !isFetchingNextPage ? (
-        <div className="w-full h-11 flex items-center justify-center">
-          <div className="flex items-center justify-center gap-2">
-            <Spinner className="size-5" />
-            <span className="text-sm font-medium">Fetching new notes...</span>
-          </div>
-        </div>
-      ) : null}
-      {isLoading ? (
-        <div className="flex h-16 w-full items-center justify-center gap-2">
-          <Spinner className="size-5" />
-          <span className="text-sm font-medium">Loading...</span>
-        </div>
-      ) : !data.length ? (
-        <Empty />
-      ) : (
-        <Virtualizer overscan={3}>
-          {data.map((item) => renderItem(item))}
-        </Virtualizer>
-      )}
-      {data?.length && hasNextPage ? (
-        <div>
-          <button
-            type="button"
-            onClick={() => fetchNextPage()}
-            disabled={isFetchingNextPage || isLoading}
-            className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-black/5 px-3 font-medium hover:bg-black/10 focus:outline-none dark:bg-white/10 dark:hover:bg-white/20"
-          >
-            {isFetchingNextPage ? (
-              <Spinner className="size-5" />
-            ) : (
-              <>
-                <ArrowRightCircleIcon className="size-5" />
-                Load more
-              </>
-            )}
-          </button>
-        </div>
-      ) : null}
-    </div>
-  );
+	return (
+		<div className="p-2 w-full h-full overflow-y-auto scrollbar-none">
+			{isFetching && !isLoading && !isFetchingNextPage ? (
+				<div className="w-full h-11 flex items-center justify-center">
+					<div className="flex items-center justify-center gap-2">
+						<Spinner className="size-5" />
+						<span className="text-sm font-medium">Fetching new notes...</span>
+					</div>
+				</div>
+			) : null}
+			{isLoading ? (
+				<div className="flex h-16 w-full items-center justify-center gap-2">
+					<Spinner className="size-5" />
+					<span className="text-sm font-medium">Loading...</span>
+				</div>
+			) : !data.length ? (
+				<Empty />
+			) : (
+				<Virtualizer overscan={3}>
+					{data.map((item) => renderItem(item))}
+				</Virtualizer>
+			)}
+			{data?.length && hasNextPage ? (
+				<div>
+					<button
+						type="button"
+						onClick={() => fetchNextPage()}
+						disabled={isFetchingNextPage || isLoading}
+						className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-black/5 px-3 font-medium hover:bg-black/10 focus:outline-none dark:bg-white/10 dark:hover:bg-white/20"
+					>
+						{isFetchingNextPage ? (
+							<Spinner className="size-5" />
+						) : (
+							<>
+								<ArrowRightCircleIcon className="size-5" />
+								Load more
+							</>
+						)}
+					</button>
+				</div>
+			) : null}
+		</div>
+	);
 }
 
 function Empty() {
-  return (
-    <div className="flex flex-col py-10 gap-10">
-      <div className="text-center flex flex-col items-center justify-center">
-        <div className="size-24 bg-blue-100 flex flex-col items-center justify-end overflow-hidden dark:bg-blue-900 rounded-full mb-8">
-          <div className="w-12 h-16 bg-gradient-to-b from-blue-500 dark:from-blue-200 to-blue-50 dark:to-blue-900 rounded-t-lg" />
-        </div>
-        <p className="text-lg font-medium">Your newsfeed is empty</p>
-        <p className="leading-tight text-neutral-700 dark:text-neutral-300">
-          Here are few suggestions to get started.
-        </p>
-      </div>
-      <div className="flex flex-col px-3 gap-2">
-        <Link
-          to="/trending/notes"
-          className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
-        >
-          <ArrowRightIcon className="size-5" />
-          Show trending notes
-        </Link>
-        <Link
-          to="/trending/users"
-          className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
-        >
-          <ArrowRightIcon className="size-5" />
-          Discover trending users
-        </Link>
-      </div>
-    </div>
-  );
+	return (
+		<div className="flex flex-col py-10 gap-10">
+			<div className="text-center flex flex-col items-center justify-center">
+				<div className="size-24 bg-blue-100 flex flex-col items-center justify-end overflow-hidden dark:bg-blue-900 rounded-full mb-8">
+					<div className="w-12 h-16 bg-gradient-to-b from-blue-500 dark:from-blue-200 to-blue-50 dark:to-blue-900 rounded-t-lg" />
+				</div>
+				<p className="text-lg font-medium">Your newsfeed is empty</p>
+				<p className="leading-tight text-neutral-700 dark:text-neutral-300">
+					Here are few suggestions to get started.
+				</p>
+			</div>
+			<div className="flex flex-col px-3 gap-2">
+				<Link
+					to="/trending/notes"
+					className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
+				>
+					<ArrowRightIcon className="size-5" />
+					Show trending notes
+				</Link>
+				<Link
+					to="/trending/users"
+					className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
+				>
+					<ArrowRightIcon className="size-5" />
+					Discover trending users
+				</Link>
+			</div>
+		</div>
+	);
 }
diff --git a/apps/desktop2/src/routes/group.tsx b/apps/desktop2/src/routes/group.tsx
index ad71798e..646864d1 100644
--- a/apps/desktop2/src/routes/group.tsx
+++ b/apps/desktop2/src/routes/group.tsx
@@ -10,158 +10,157 @@ import { Link, createFileRoute, redirect } from "@tanstack/react-router";
 import { Virtualizer } from "virtua";
 
 export const Route = createFileRoute("/group")({
-  validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
-    return {
-      account: search.account,
-      label: search.label,
-      name: search.name,
-    };
-  },
-  beforeLoad: async ({ search, context }) => {
-    const ark = context.ark;
-    const groups = (await ark.get_nstore(
-      `lume_group_${search.label}`,
-    )) as string[];
-    const settings = await ark.get_settings();
+	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+		return {
+			account: search.account,
+			label: search.label,
+			name: search.name,
+		};
+	},
+	beforeLoad: async ({ search, context }) => {
+		const ark = context.ark;
+		const key = `lume_group_${search.label}`;
+		const groups = (await ark.get_nstore(key)) as string[];
+		const settings = await ark.get_settings();
 
-    if (!groups) {
-      throw redirect({
-        to: "/create-group",
-        search: {
-          ...search,
-          redirect: "/group",
-        },
-      });
-    }
+		if (!groups?.length) {
+			throw redirect({
+				to: "/create-group",
+				search: {
+					...search,
+					redirect: "/group",
+				},
+			});
+		}
 
-    return {
-      groups,
-      settings,
-    };
-  },
-  component: Screen,
+		return {
+			groups,
+			settings,
+		};
+	},
+	component: Screen,
 });
 
 export function Screen() {
-  const { label, account } = Route.useSearch();
-  const { ark, groups } = Route.useRouteContext();
-  const {
-    data,
-    isLoading,
-    isFetching,
-    isFetchingNextPage,
-    hasNextPage,
-    fetchNextPage,
-  } = useInfiniteQuery({
-    queryKey: [label, account],
-    initialPageParam: 0,
-    queryFn: async ({ pageParam }: { pageParam: number }) => {
-      const events = await ark.get_group_events(groups, 20, pageParam);
-      return events;
-    },
-    getNextPageParam: (lastPage) => lastPage?.at(-1)?.created_at - 1,
-    select: (data) =>
-      data?.pages.flatMap((page) => page.filter((ev) => ev.kind === Kind.Text)),
-    refetchOnWindowFocus: false,
-  });
+	const { label, account } = Route.useSearch();
+	const { ark, groups } = Route.useRouteContext();
+	const {
+		data,
+		isLoading,
+		isFetching,
+		isFetchingNextPage,
+		hasNextPage,
+		fetchNextPage,
+	} = useInfiniteQuery({
+		queryKey: [label, account],
+		initialPageParam: 0,
+		queryFn: async ({ pageParam }: { pageParam: number }) => {
+			const events = await ark.get_local_events(groups, 20, pageParam);
+			return events;
+		},
+		getNextPageParam: (lastPage) => lastPage?.at(-1)?.created_at - 1,
+		select: (data) =>
+			data?.pages.flatMap((page) => page.filter((ev) => ev.kind === Kind.Text)),
+		refetchOnWindowFocus: false,
+	});
 
-  const renderItem = (event: Event) => {
-    if (!event) return;
-    switch (event.kind) {
-      case Kind.Repost:
-        return <RepostNote key={event.id} event={event} />;
-      default: {
-        const isConversation =
-          event.tags.filter((tag) => tag[0] === "e" && tag[3] !== "mention")
-            .length > 0;
-        const isQuote = event.tags.filter((tag) => tag[0] === "q").length > 0;
+	const renderItem = (event: Event) => {
+		if (!event) return;
+		switch (event.kind) {
+			case Kind.Repost:
+				return <RepostNote key={event.id} event={event} />;
+			default: {
+				const isConversation =
+					event.tags.filter((tag) => tag[0] === "e" && tag[3] !== "mention")
+						.length > 0;
+				const isQuote = event.tags.filter((tag) => tag[0] === "q").length > 0;
 
-        if (isConversation) {
-          return <Conversation key={event.id} event={event} className="mb-3" />;
-        }
+				if (isConversation) {
+					return <Conversation key={event.id} event={event} className="mb-3" />;
+				}
 
-        if (isQuote) {
-          return <Quote key={event.id} event={event} className="mb-3" />;
-        }
+				if (isQuote) {
+					return <Quote key={event.id} event={event} className="mb-3" />;
+				}
 
-        return <TextNote key={event.id} event={event} className="mb-3" />;
-      }
-    }
-  };
+				return <TextNote key={event.id} event={event} className="mb-3" />;
+			}
+		}
+	};
 
-  return (
-    <div className="p-2 w-full h-full overflow-y-auto scrollbar-none">
-      {isFetching && !isLoading && !isFetchingNextPage ? (
-        <div className="w-full h-11 flex items-center justify-center">
-          <div className="flex items-center justify-center gap-2">
-            <Spinner className="size-5" />
-            <span className="text-sm font-medium">Fetching new notes...</span>
-          </div>
-        </div>
-      ) : null}
-      {isLoading ? (
-        <div className="flex h-16 w-full items-center justify-center gap-2">
-          <Spinner className="size-5" />
-          <span className="text-sm font-medium">Loading...</span>
-        </div>
-      ) : !data.length ? (
-        <Empty />
-      ) : (
-        <Virtualizer overscan={3}>
-          {data.map((item) => renderItem(item))}
-        </Virtualizer>
-      )}
-      {data?.length && hasNextPage ? (
-        <div>
-          <button
-            type="button"
-            onClick={() => fetchNextPage()}
-            disabled={isFetchingNextPage || isLoading}
-            className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-neutral-100 px-3 font-medium hover:bg-neutral-50 focus:outline-none dark:bg-white/10 dark:hover:bg-white/20"
-          >
-            {isFetchingNextPage ? (
-              <Spinner className="size-5" />
-            ) : (
-              <>
-                <ArrowRightCircleIcon className="size-5" />
-                Load more
-              </>
-            )}
-          </button>
-        </div>
-      ) : null}
-    </div>
-  );
+	return (
+		<div className="p-2 w-full h-full overflow-y-auto scrollbar-none">
+			{isFetching && !isLoading && !isFetchingNextPage ? (
+				<div className="mb-3 w-full h-11 flex items-center justify-center 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 gap-2">
+						<Spinner className="size-5" />
+						<span className="text-sm font-medium">Fetching new notes...</span>
+					</div>
+				</div>
+			) : null}
+			{isLoading ? (
+				<div className="flex h-16 w-full items-center justify-center gap-2">
+					<Spinner className="size-5" />
+					<span className="text-sm font-medium">Loading...</span>
+				</div>
+			) : !data.length ? (
+				<Empty />
+			) : (
+				<Virtualizer overscan={3}>
+					{data.map((item) => renderItem(item))}
+				</Virtualizer>
+			)}
+			{data?.length && hasNextPage ? (
+				<div>
+					<button
+						type="button"
+						onClick={() => fetchNextPage()}
+						disabled={isFetchingNextPage || isLoading}
+						className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-neutral-100 px-3 font-medium hover:bg-neutral-50 focus:outline-none dark:bg-white/10 dark:hover:bg-white/20"
+					>
+						{isFetchingNextPage ? (
+							<Spinner className="size-5" />
+						) : (
+							<>
+								<ArrowRightCircleIcon className="size-5" />
+								Load more
+							</>
+						)}
+					</button>
+				</div>
+			) : null}
+		</div>
+	);
 }
 
 function Empty() {
-  return (
-    <div className="flex flex-col py-10 gap-10">
-      <div className="text-center flex flex-col items-center justify-center">
-        <div className="size-24 bg-blue-100 flex flex-col items-center justify-end overflow-hidden dark:bg-blue-900 rounded-full mb-8">
-          <div className="w-12 h-16 bg-gradient-to-b from-blue-500 dark:from-blue-200 to-blue-50 dark:to-blue-900 rounded-t-lg" />
-        </div>
-        <p className="text-lg font-medium">Your newsfeed is empty</p>
-        <p className="leading-tight text-neutral-700 dark:text-neutral-300">
-          Here are few suggestions to get started.
-        </p>
-      </div>
-      <div className="flex flex-col px-3 gap-2">
-        <Link
-          to="/trending/notes"
-          className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
-        >
-          <ArrowRightIcon className="size-5" />
-          Show trending notes
-        </Link>
-        <Link
-          to="/trending/users"
-          className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
-        >
-          <ArrowRightIcon className="size-5" />
-          Discover trending users
-        </Link>
-      </div>
-    </div>
-  );
+	return (
+		<div className="flex flex-col py-10 gap-10">
+			<div className="text-center flex flex-col items-center justify-center">
+				<div className="size-24 bg-blue-100 flex flex-col items-center justify-end overflow-hidden dark:bg-blue-900 rounded-full mb-8">
+					<div className="w-12 h-16 bg-gradient-to-b from-blue-500 dark:from-blue-200 to-blue-50 dark:to-blue-900 rounded-t-lg" />
+				</div>
+				<p className="text-lg font-medium">Your newsfeed is empty</p>
+				<p className="leading-tight text-neutral-700 dark:text-neutral-300">
+					Here are few suggestions to get started.
+				</p>
+			</div>
+			<div className="flex flex-col px-3 gap-2">
+				<Link
+					to="/trending/notes"
+					className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
+				>
+					<ArrowRightIcon className="size-5" />
+					Show trending notes
+				</Link>
+				<Link
+					to="/trending/users"
+					className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
+				>
+					<ArrowRightIcon className="size-5" />
+					Discover trending users
+				</Link>
+			</div>
+		</div>
+	);
 }
diff --git a/apps/desktop2/src/routes/interests.tsx b/apps/desktop2/src/routes/interests.tsx
deleted file mode 100644
index b7b36bfc..00000000
--- a/apps/desktop2/src/routes/interests.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import type { ColumnRouteSearch } from "@lume/types";
-import { TOPICS, cn } from "@lume/utils";
-import { createFileRoute, useRouter } from "@tanstack/react-router";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
-
-export const Route = createFileRoute("/interests")({
-	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
-		return {
-			account: search.account,
-			label: search.label,
-			name: search.name,
-		};
-	},
-	component: Screen,
-});
-
-function Screen() {
-	const { t } = useTranslation();
-	const { label, name, redirect } = Route.useSearch();
-	const { ark } = Route.useRouteContext();
-
-	const [hashtags, setHashtags] = useState<string[]>([]);
-	const [isDone, setIsDone] = useState(false);
-
-	const router = useRouter();
-
-	const toggleHashtag = (item: string) => {
-		const arr = hashtags.includes(item)
-			? hashtags.filter((i) => i !== item)
-			: [...hashtags, item];
-		setHashtags(arr);
-	};
-
-	const toggleAll = (item: string[]) => {
-		const sets = new Set([...hashtags, ...item]);
-		setHashtags([...sets]);
-	};
-
-	const submit = async () => {
-		try {
-			if (isDone) {
-				return router.history.push(redirect);
-			}
-
-			const eventId = await ark.set_interest(undefined, undefined, hashtags);
-			if (eventId) {
-				setIsDone(true);
-				toast.success("Interest has been updated successfully.");
-			}
-		} catch (e) {
-			toast.error(String(e));
-		}
-	};
-
-	return (
-		<div className="h-full flex flex-col px-2">
-			<div className="shrink-0 flex h-16 items-center justify-between">
-				<div className="flex flex-1 flex-col">
-					<h3 className="font-semibold">Interests</h3>
-					<p className="text-sm leading-tight text-neutral-700 dark:text-neutral-300">
-						Pick things you'd like to see.
-					</p>
-				</div>
-				<button
-					type="button"
-					onClick={submit}
-					className="inline-flex h-8 w-20 items-center justify-center rounded-full bg-blue-500 px-2 text-sm font-medium text-white hover:bg-blue-600 disabled:opacity-50"
-				>
-					{isDone ? t("global.back") : t("global.update")}
-				</button>
-			</div>
-			<div className="flex-1 flex flex-col gap-3 pb-2 scrollbar-none overflow-y-auto">
-				{TOPICS.map((topic) => (
-					<div
-						key={topic.title}
-						className="flex flex-col gap-4 bg-white dark:bg-black/20 backdrop-blur-lg rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50"
-					>
-						<div className="px-3 flex w-full items-center justify-between h-14 shrink-0 border-b border-neutral-100 dark:border-neutral-900">
-							<div className="inline-flex items-center gap-2.5">
-								<img
-									src={topic.icon}
-									alt={topic.title}
-									className="size-8 rounded-lg object-cover"
-								/>
-								<h3 className="text-lg font-semibold">{topic.title}</h3>
-							</div>
-							<button
-								type="button"
-								onClick={() => toggleAll(topic.content)}
-								className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
-							>
-								{t("interests.followAll")}
-							</button>
-						</div>
-						<div className="px-3 pb-3 flex flex-wrap items-center gap-3">
-							{topic.content.map((hashtag) => (
-								<button
-									key={hashtag}
-									type="button"
-									onClick={() => toggleHashtag(hashtag)}
-									className={cn(
-										"inline-flex items-center rounded-full border border-transparent bg-neutral-100 px-2 py-1 text-sm font-medium dark:bg-neutral-900",
-										hashtags.includes(hashtag)
-											? "border-blue-500 text-blue-500"
-											: "",
-									)}
-								>
-									{hashtag}
-								</button>
-							))}
-						</div>
-					</div>
-				))}
-			</div>
-		</div>
-	);
-}
diff --git a/apps/desktop2/src/routes/newsfeed.tsx b/apps/desktop2/src/routes/newsfeed.tsx
index c056ec9d..a58e3b31 100644
--- a/apps/desktop2/src/routes/newsfeed.tsx
+++ b/apps/desktop2/src/routes/newsfeed.tsx
@@ -6,146 +6,127 @@ import { ArrowRightCircleIcon, ArrowRightIcon } from "@lume/icons";
 import { type ColumnRouteSearch, type Event, Kind } from "@lume/types";
 import { Spinner } from "@lume/ui";
 import { useInfiniteQuery } from "@tanstack/react-query";
-import { Link } from "@tanstack/react-router";
+import { Link, redirect } from "@tanstack/react-router";
 import { createFileRoute } from "@tanstack/react-router";
 import { Virtualizer } from "virtua";
 
 export const Route = createFileRoute("/newsfeed")({
-  validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
-    return {
-      account: search.account,
-      label: search.label,
-      name: search.name,
-    };
-  },
-  beforeLoad: async ({ context }) => {
-    const ark = context.ark;
-    const settings = await ark.get_settings();
+	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+		return {
+			account: search.account,
+			label: search.label,
+			name: search.name,
+		};
+	},
+	beforeLoad: async ({ search, context }) => {
+		const ark = context.ark;
+		const settings = await ark.get_settings();
+		const contacts = await ark.get_contact_list();
 
-    return { settings };
-  },
-  component: Screen,
+		if (!contacts.length) {
+			throw redirect({
+				to: "/create-newsfeed/users",
+				search: {
+					...search,
+					redirect: "/newsfeed",
+				},
+			});
+		}
+
+		return { settings, contacts };
+	},
+	component: Screen,
 });
 
 export function Screen() {
-  const { label, account } = Route.useSearch();
-  const { ark } = Route.useRouteContext();
-  const {
-    data,
-    isLoading,
-    isFetching,
-    isFetchingNextPage,
-    hasNextPage,
-    fetchNextPage,
-  } = useInfiniteQuery({
-    queryKey: [label, account],
-    initialPageParam: 0,
-    queryFn: async ({ pageParam }: { pageParam: number }) => {
-      const events = await ark.get_local_events(20, pageParam);
-      return events;
-    },
-    getNextPageParam: (lastPage) => lastPage?.at(-1)?.created_at - 1,
-    select: (data) => data?.pages.flatMap((page) => page),
-    refetchOnWindowFocus: false,
-  });
+	const { label, account } = Route.useSearch();
+	const { ark, contacts } = Route.useRouteContext();
+	const {
+		data,
+		isLoading,
+		isFetching,
+		isFetchingNextPage,
+		hasNextPage,
+		fetchNextPage,
+	} = useInfiniteQuery({
+		queryKey: [label, account],
+		initialPageParam: 0,
+		queryFn: async ({ pageParam }: { pageParam: number }) => {
+			const events = await ark.get_local_events(contacts, 20, pageParam);
+			return events;
+		},
+		getNextPageParam: (lastPage) => lastPage?.at(-1)?.created_at - 1,
+		select: (data) => data?.pages.flatMap((page) => page),
+		refetchOnWindowFocus: false,
+	});
 
-  const renderItem = (event: Event) => {
-    if (!event) return;
-    switch (event.kind) {
-      case Kind.Repost:
-        return <RepostNote key={event.id} event={event} />;
-      default: {
-        const isConversation =
-          event.tags.filter((tag) => tag[0] === "e" && tag[3] !== "mention")
-            .length > 0;
-        const isQuote = event.tags.filter((tag) => tag[0] === "q").length > 0;
+	const renderItem = (event: Event) => {
+		if (!event) return;
+		switch (event.kind) {
+			case Kind.Repost:
+				return <RepostNote key={event.id} event={event} />;
+			default: {
+				const isConversation =
+					event.tags.filter((tag) => tag[0] === "e" && tag[3] !== "mention")
+						.length > 0;
+				const isQuote = event.tags.filter((tag) => tag[0] === "q").length > 0;
 
-        if (isConversation) {
-          return <Conversation key={event.id} event={event} className="mb-3" />;
-        }
+				if (isConversation) {
+					return <Conversation key={event.id} event={event} className="mb-3" />;
+				}
 
-        if (isQuote) {
-          return <Quote key={event.id} event={event} className="mb-3" />;
-        }
+				if (isQuote) {
+					return <Quote key={event.id} event={event} className="mb-3" />;
+				}
 
-        return <TextNote key={event.id} event={event} className="mb-3" />;
-      }
-    }
-  };
+				return <TextNote key={event.id} event={event} className="mb-3" />;
+			}
+		}
+	};
 
-  return (
-    <div className="p-2 w-full h-full overflow-y-auto scrollbar-none">
-      {isFetching && !isLoading && !isFetchingNextPage ? (
-        <div className="w-full h-11 flex items-center justify-center bg-white dark:bg-black/20 backdrop-blur-lg 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">Fetching new notes...</span>
-          </div>
-        </div>
-      ) : null}
-      {isLoading ? (
-        <div className="flex h-16 w-full items-center justify-center gap-2">
-          <Spinner className="size-5" />
-          <span className="text-sm font-medium">Loading...</span>
-        </div>
-      ) : !data.length ? (
-        <Empty />
-      ) : (
-        <Virtualizer overscan={3}>
-          {data.map((item) => renderItem(item))}
-        </Virtualizer>
-      )}
-      {data?.length && hasNextPage ? (
-        <div>
-          <button
-            type="button"
-            onClick={() => fetchNextPage()}
-            disabled={isFetchingNextPage || isLoading}
-            className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-black/5 px-3 font-medium hover:bg-black/10 focus:outline-none dark:bg-white/10 dark:hover:bg-white/20"
-          >
-            {isFetchingNextPage ? (
-              <Spinner className="size-5" />
-            ) : (
-              <>
-                <ArrowRightCircleIcon className="size-5" />
-                Load more
-              </>
-            )}
-          </button>
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-function Empty() {
-  return (
-    <div className="flex flex-col py-10 gap-10">
-      <div className="text-center flex flex-col items-center justify-center">
-        <div className="size-24 bg-blue-100 flex flex-col items-center justify-end overflow-hidden dark:bg-blue-900 rounded-full mb-8">
-          <div className="w-12 h-16 bg-gradient-to-b from-blue-500 dark:from-blue-200 to-blue-50 dark:to-blue-900 rounded-t-lg" />
-        </div>
-        <p className="text-lg font-medium">Your newsfeed is empty</p>
-        <p className="leading-tight text-neutral-700 dark:text-neutral-300">
-          Here are few suggestions to get started.
-        </p>
-      </div>
-      <div className="flex flex-col px-3 gap-2">
-        <Link
-          to="/trending/notes"
-          className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
-        >
-          <ArrowRightIcon className="size-5" />
-          Show trending notes
-        </Link>
-        <Link
-          to="/trending/users"
-          className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
-        >
-          <ArrowRightIcon className="size-5" />
-          Discover trending users
-        </Link>
-      </div>
-    </div>
-  );
+	return (
+		<div className="p-2 w-full h-full overflow-y-auto scrollbar-none">
+			{isFetching && !isLoading && !isFetchingNextPage ? (
+				<div className="mb-3 w-full h-11 flex items-center justify-center 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 gap-2">
+						<Spinner className="size-5" />
+						<span className="text-sm font-medium">Fetching new notes...</span>
+					</div>
+				</div>
+			) : null}
+			{isLoading ? (
+				<div className="flex h-16 w-full items-center justify-center gap-2">
+					<Spinner className="size-5" />
+					<span className="text-sm font-medium">Loading...</span>
+				</div>
+			) : !data.length ? (
+				<div className="flex items-center justify-center">
+					Yo. You're catching up on all the things happening around you.
+				</div>
+			) : (
+				<Virtualizer overscan={3}>
+					{data.map((item) => renderItem(item))}
+				</Virtualizer>
+			)}
+			{data?.length && hasNextPage ? (
+				<div>
+					<button
+						type="button"
+						onClick={() => fetchNextPage()}
+						disabled={isFetchingNextPage || isLoading}
+						className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-black/5 px-3 font-medium hover:bg-black/10 focus:outline-none dark:bg-white/10 dark:hover:bg-white/20"
+					>
+						{isFetchingNextPage ? (
+							<Spinner className="size-5" />
+						) : (
+							<>
+								<ArrowRightCircleIcon className="size-5" />
+								Load more
+							</>
+						)}
+					</button>
+				</div>
+			) : null}
+		</div>
+	);
 }
diff --git a/apps/desktop2/src/routes/onboarding.tsx b/apps/desktop2/src/routes/onboarding.tsx
index 51c64b78..22cf68e8 100644
--- a/apps/desktop2/src/routes/onboarding.tsx
+++ b/apps/desktop2/src/routes/onboarding.tsx
@@ -1,14 +1,5 @@
-import { ArrowRightIcon, CancelIcon } from "@lume/icons";
-import type { ColumnRouteSearch, LumeColumn } from "@lume/types";
-import { Spinner } from "@lume/ui";
-import { User } from "@/components/user";
-import { cn } from "@lume/utils";
+import type { ColumnRouteSearch } from "@lume/types";
 import { createFileRoute } from "@tanstack/react-router";
-import { invoke } from "@tauri-apps/api/core";
-import { getCurrent } from "@tauri-apps/api/window";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
 
 export const Route = createFileRoute("/onboarding")({
 	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
@@ -22,54 +13,6 @@ export const Route = createFileRoute("/onboarding")({
 });
 
 function Screen() {
-	const { label } = Route.useSearch();
-	const {
-		register,
-		handleSubmit,
-		reset,
-		formState: { isValid, isSubmitting },
-	} = useForm();
-
-	const [userType, setUserType] = useState<"new" | "veteran">(null);
-
-	const install = async (column: LumeColumn) => {
-		const mainWindow = getCurrent();
-		await mainWindow.emit("columns", { type: "add", column });
-	};
-
-	const close = async () => {
-		const mainWindow = getCurrent();
-		await mainWindow.emit("columns", { type: "remove", label });
-	};
-
-	const friendToFriend = async (data: { npub: string }) => {
-		if (!data.npub.startsWith("npub1"))
-			return toast.warning(
-				"NPUB is invalid. NPUB must be starts with npub1...",
-			);
-
-		try {
-			const connect: boolean = await invoke("friend_to_friend", {
-				npub: data.npub,
-			});
-
-			if (connect) {
-				const column = {
-					label: "newsfeed",
-					name: "Newsfeed",
-					content: "/newsfeed",
-				};
-				const mainWindow = getCurrent();
-				await mainWindow.emit("columns", { type: "add", column });
-
-				// reset form
-				reset();
-			}
-		} catch (e) {
-			toast.error(String(e));
-		}
-	};
-
 	return (
 		<div className="h-full flex flex-col py-6 gap-6 overflow-y-auto scrollbar-none">
 			<div className="text-center flex flex-col items-center justify-center">
@@ -78,369 +21,92 @@ function Screen() {
 					Here are a few suggestions to help you get started.
 				</p>
 			</div>
-			<div className="px-3">
-				<div className="mb-6 w-full h-44">
-					<img
-						src="/lock-screen.jpg"
-						srcSet="/lock-screen@2x.jpg 2x"
-						alt="background"
-						className="h-full w-full object-cover rounded-xl outline outline-1 -outline-offset-1 outline-black/15"
-					/>
+			<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="absolute top-2 left-3 text-2xl font-semibold font-serif text-neutral-600 dark:text-neutral-400">
+						01.
+					</div>
+					<div className="h-16 flex items-center justify-center shrink-0 px-3 text-lg select-text">
+						Navigate between columns.
+					</div>
+					<div className="flex-1 w-3/4 h-full pb-10">
+						<video
+							className="h-auto w-full aspect-square rounded-lg shadow-md transform"
+							controls
+							muted
+						>
+							<source
+								src="https://video.nostr.build/692f71e2be47ecfc29edcbdaa198cc5979bfb9c900f05d78682895dd546d8d4f.mp4"
+								type="video/mp4"
+							/>
+							Your browser does not support the video tag.
+						</video>
+					</div>
 				</div>
-				<div className="flex flex-col gap-6">
-					<div className="flex items-start gap-2 text-[13px]">
-						<Mide />
-						<div className="flex flex-col gap-0.5">
-							<h3 className="font-semibold">Mide</h3>
-							<div className="p-2 bg-black/5 dark:bg-white/5 rounded-lg">
-								👋 Yo! I'm Mide, and I'll be your friendly guide to Nostr and
-								beyond. Looking forward to our adventure together!
-							</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="absolute top-2 left-3 text-2xl font-semibold font-serif text-neutral-600 dark:text-neutral-400">
+						02.
 					</div>
-					<div className="flex items-start flex-row-reverse gap-2 text-[13px]">
-						<CurrentUser />
-						<div className="flex flex-col gap-0.5">
-							<h3 className="font-semibold text-end">You</h3>
-							<div className="p-2 bg-black/5 dark:bg-white/5 rounded-lg">
-								How can I get started?
-							</div>
-							<button
-								type="button"
-								onClick={() => setUserType("new")}
-								className={cn(
-									"mt-1 px-3 py-2 shadow-primary flex items-center justify-between gap-6 bg-white hover:bg-blue-500 hover:text-white dark:bg-white/10 rounded-lg",
-									userType === "new"
-										? "bg-blue-500 text-white hover:bg-blue-600"
-										: "",
-								)}
-							>
-								I'm completely new to Nostr.
-								<ArrowRightIcon className="size-4" />
-							</button>
-							<button
-								type="button"
-								onClick={() => setUserType("veteran")}
-								className={cn(
-									"mt-1 px-3 py-2 shadow-primary flex items-center justify-between gap-6 bg-white hover:bg-blue-500 hover:text-white dark:bg-white/10 rounded-lg",
-									userType === "veteran"
-										? "bg-blue-500 text-white hover:bg-blue-600"
-										: "",
-								)}
-							>
-								I've already been using another Nostr client.
-								<ArrowRightIcon className="size-4" />
-							</button>
-						</div>
+					<div className="h-16 flex items-center justify-center shrink-0 px-3 text-lg select-text">
+						Switch between accounts.
+					</div>
+					<div className="flex-1 w-3/4 h-full pb-10">
+						<video
+							className="h-auto w-full aspect-square rounded-lg shadow-md transform"
+							controls
+							muted
+						>
+							<source
+								src="https://video.nostr.build/d33962520506d86acfb4b55a7b265821e10ae637f5ec830a173b7e6092b16ec8.mp4"
+								type="video/mp4"
+							/>
+							Your browser does not support the video tag.
+						</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="absolute top-2 left-3 text-2xl font-semibold font-serif text-neutral-600 dark:text-neutral-400">
+						03.
+					</div>
+					<div className="h-16 flex items-center justify-center shrink-0 px-3 text-lg select-text">
+						Open Lume Store.
+					</div>
+					<div className="flex-1 w-3/4 h-full pb-10">
+						<video
+							className="h-auto w-full aspect-square rounded-lg shadow-md transform"
+							controls
+							muted
+						>
+							<source
+								src="https://video.nostr.build/927abbfde2097e470ac751181b1db456b7e4b9149550408efff1a966a7ffb9a8.mp4"
+								type="video/mp4"
+							/>
+							Your browser does not support the video tag.
+						</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="absolute top-2 left-3 text-2xl font-semibold font-serif text-neutral-600 dark:text-neutral-400">
+						04.
+					</div>
+					<div className="h-16 flex items-center justify-center shrink-0 px-3 text-lg select-text">
+						Use the Tray Menu.
+					</div>
+					<div className="flex-1 w-3/4 h-full pb-10">
+						<video
+							className="h-auto w-full rounded-lg shadow-md transform"
+							controls
+							muted
+						>
+							<source
+								src="https://video.nostr.build/513de4824b6abaf7e9698c1dad2f68096574356848c0c200bc8cb8074df29410.mp4"
+								type="video/mp4"
+							/>
+							Your browser does not support the video tag.
+						</video>
 					</div>
-					{userType === "veteran" ? (
-						<div className="flex items-start gap-2 text-[13px]">
-							<Mide />
-							<div className="flex flex-col gap-0.5">
-								<h3 className="font-semibold">Mide</h3>
-								<div className="p-2 bg-black/5 dark:bg-white/5 rounded-lg">
-									So, I'm excited to give you a quick intro to Lume and all the
-									awesome features it has to offer. Let's dive in!
-								</div>
-							</div>
-						</div>
-					) : null}
-					{userType === "veteran" ? (
-						<div className="flex items-start flex-row-reverse gap-2 text-[13px]">
-							<CurrentUser />
-							<div className="flex flex-col gap-0.5">
-								<h3 className="font-semibold text-end">You</h3>
-								<div className="p-2 bg-black/5 dark:bg-white/5 rounded-lg">
-									Thanks! But I already know about Lume.
-								</div>
-								<button
-									type="button"
-									onClick={() =>
-										install({
-											label: "newsfeed",
-											name: "Newsfeed",
-											content: "/newsfeed",
-										})
-									}
-									className="mt-1 px-3 py-2 shadow-primary flex items-center justify-between gap-6 bg-white hover:bg-blue-500 hover:text-white dark:bg-white/10 rounded-lg"
-								>
-									Skip! Show my newsfeed
-									<ArrowRightIcon className="size-4" />
-								</button>
-							</div>
-						</div>
-					) : null}
-					{userType === "veteran" ? (
-						<div className="flex items-start gap-2 text-[13px]">
-							<Mide />
-							<div className="flex flex-col gap-0.5">
-								<h3 className="font-semibold">Mide</h3>
-								<div className="p-2 bg-black/5 dark:bg-white/5 rounded-lg">
-									First off, Lume is a social media client for Nostr. It's a
-									place where you can follow friends, dive into chats, and post
-									what's on your mind.
-								</div>
-							</div>
-						</div>
-					) : null}
-					{userType === "veteran" ? (
-						<div className="flex items-start gap-2 text-[13px]">
-							<Mide />
-							<div className="flex flex-col gap-0.5">
-								<h3 className="font-semibold">Mide</h3>
-								<div className="p-2 bg-black/5 dark:bg-white/5 rounded-lg">
-									That's not all! What makes Lume unique is the column system.
-									You can enhance your experience by adding new columns from the
-									Lume Store.
-								</div>
-								<div className="mt-1 p-2 bg-black/5 dark:bg-white/5 rounded-lg">
-									If you're confused about the term "Column," you can imagine it
-									as mini-apps, with each column providing its own experience.
-								</div>
-								<div className="mt-1 p-2 bg-black/5 dark:bg-white/5 rounded-lg">
-									Here is a quick guide for how to add a new column:
-								</div>
-								<div className="mt-1 rounded-lg">
-									<video
-										className="h-auto w-full rounded-lg object-cover aspect-video outline outline-1 -outline-offset-1 outline-black/15"
-										controls
-										muted
-									>
-										<source
-											src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4"
-											type="video/mp4"
-										/>
-										Your browser does not support the video tag.
-									</video>
-								</div>
-							</div>
-						</div>
-					) : null}
-					{userType === "veteran" ? (
-						<div className="flex items-start flex-row-reverse gap-2 text-[13px]">
-							<CurrentUser />
-							<div className="flex flex-col gap-0.5">
-								<h3 className="font-semibold text-end">You</h3>
-								<div className="p-2 bg-black/5 dark:bg-white/5 rounded-lg">
-									Can you introduce me to the UI? I am still confused.
-								</div>
-							</div>
-						</div>
-					) : null}
-					{userType === "veteran" ? (
-						<div className="flex items-start gap-2 text-[13px]">
-							<Mide />
-							<div className="flex flex-col gap-0.5">
-								<h3 className="font-semibold">Mide</h3>
-								<div className="p-2 bg-black/5 dark:bg-white/5 rounded-lg">
-									Of course, here is a quick introduction video for Lume.
-								</div>
-								<div className="mt-1 rounded-lg">
-									<video
-										className="h-auto w-full rounded-lg object-cover aspect-video outline outline-1 -outline-offset-1 outline-black/15"
-										controls
-										muted
-									>
-										<source
-											src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4"
-											type="video/mp4"
-										/>
-										Your browser does not support the video tag.
-									</video>
-								</div>
-							</div>
-						</div>
-					) : null}
-					{userType === "new" ? (
-						<div className="flex items-start gap-2 text-[13px]">
-							<Mide />
-							<div className="flex flex-col gap-0.5">
-								<h3 className="font-semibold">Mide</h3>
-								<div className="p-2 bg-black/5 dark:bg-white/5 rounded-lg">
-									Diving into new social media platforms like Nostr can be a bit
-									overwhelming, but don't worry! Here are some handy tips to
-									help you navigate and discover what interests you.
-								</div>
-								<button
-									type="button"
-									onClick={() =>
-										install({
-											label: "foryou",
-											name: "For you",
-											content: "/foryou",
-										})
-									}
-									className="mt-1 px-3 py-2 shadow-primary flex items-center justify-between bg-white hover:bg-blue-500 hover:text-white dark:bg-white/10 rounded-lg"
-								>
-									Add some topics that you're interested in.
-									<ArrowRightIcon className="size-4" />
-								</button>
-								<button
-									type="button"
-									onClick={() =>
-										install({
-											label: "trending_users",
-											name: "Trending",
-											content: "/trending/users",
-										})
-									}
-									className="mt-1 px-3 py-2 shadow-primary flex items-center justify-between bg-white hover:bg-blue-500 hover:text-white dark:bg-white/10 rounded-lg"
-								>
-									Follow some users.
-									<ArrowRightIcon className="size-4" />
-								</button>
-							</div>
-						</div>
-					) : null}
-					{userType === "new" ? (
-						<div className="flex items-start flex-row-reverse gap-2 text-[13px]">
-							<CurrentUser />
-							<div className="flex flex-col gap-0.5">
-								<h3 className="font-semibold text-end">You</h3>
-								<div className="p-2 bg-black/5 dark:bg-white/5 rounded-lg">
-									My girlfriend introduced Nostr to me, and I have her NPUB. Can
-									I get the same experiences as her?
-								</div>
-							</div>
-						</div>
-					) : null}
-					{userType === "new" ? (
-						<div className="flex items-start gap-2 text-[13px]">
-							<Mide />
-							<div className="flex flex-col gap-0.5">
-								<h3 className="font-semibold">Mide</h3>
-								<div className="p-2 bg-black/5 dark:bg-white/5 rounded-lg">
-									Absolutely! Since your girlfriend shared her NPUB with you,
-									you can dive into Nostr and explore it just like she does.
-									It's a great way to share experiences and discover what Nostr
-									has to offer together!
-								</div>
-								<form
-									onSubmit={handleSubmit(friendToFriend)}
-									className="mt-1 flex flex-col items-end bg-white dark:bg-white/10 rounded-lg shadow-primary"
-								>
-									<input
-										{...register("npub", { required: true })}
-										name="npub"
-										placeholder="Enter npub here..."
-										className="w-full h-14 px-3 rounded-t-lg bg-transparent border-b border-x-0 border-t-0 border-neutral-100 dark:border-white/5 focus:border-neutral-200 dark:focus:border-white/20 focus:outline-none focus:ring-0 placeholder:text-neutral-600 dark:placeholder:text-neutral-400"
-									/>
-									<div className="h-10 flex items-center px-1">
-										<button
-											type="submit"
-											disabled={!isValid || isSubmitting}
-											className="px-2 h-8 w-20 inline-flex items-center justify-center bg-blue-500 text-white rounded-md text-sm font-medium hover:bg-blue-600"
-										>
-											{isSubmitting ? <Spinner className="size-4" /> : "Submit"}
-										</button>
-									</div>
-								</form>
-							</div>
-						</div>
-					) : null}
-					{userType ? (
-						<>
-							<div className="flex items-start flex-row-reverse gap-2 text-[13px]">
-								<CurrentUser />
-								<div className="flex flex-col gap-0.5">
-									<h3 className="font-semibold text-end">You</h3>
-									<div className="p-2 bg-black/5 dark:bg-white/5 rounded-lg">
-										Thank you. I can use Lume and explore Nostr by myself from
-										now on.
-									</div>
-								</div>
-							</div>
-							<div className="flex items-start gap-2 text-[13px]">
-								<Mide />
-								<div className="flex flex-col gap-0.5">
-									<h3 className="font-semibold">Mide</h3>
-									<div className="p-2 bg-black/5 dark:bg-white/5 rounded-lg">
-										I really hope you enjoy your time on Nostr! If you're keen
-										to dive deeper, here are some helpful resources to get you
-										started:
-									</div>
-									<a
-										href="https://nostr.org"
-										target="_blank"
-										className="mt-1 px-3 py-2 shadow-primary flex items-center justify-between bg-white hover:bg-blue-500 hover:text-white dark:bg-white/10 rounded-lg"
-										rel="noreferrer"
-									>
-										[Website] nostr.org
-										<ArrowRightIcon className="size-4" />
-									</a>
-									<a
-										href="https://www.youtube.com/watch?v=5W-jtbbh3eA"
-										target="_blank"
-										className="mt-1 px-3 py-2 shadow-primary flex items-center justify-between bg-white hover:bg-blue-500 hover:text-white dark:bg-white/10 rounded-lg"
-										rel="noreferrer"
-									>
-										[Video] What is Nostr?
-										<ArrowRightIcon className="size-4" />
-									</a>
-									<a
-										href="https://github.com/nostr-protocol/nostr"
-										target="_blank"
-										className="mt-1 px-3 py-2 shadow-primary flex items-center justify-between bg-white hover:bg-blue-500 hover:text-white dark:bg-white/10 rounded-lg"
-										rel="noreferrer"
-									>
-										[Develop] Github
-										<ArrowRightIcon className="size-4" />
-									</a>
-									<a
-										href="https://www.nostrapps.com/"
-										target="_blank"
-										className="mt-1 px-3 py-2 shadow-primary flex items-center justify-between bg-white hover:bg-blue-500 hover:text-white dark:bg-white/10 rounded-lg"
-										rel="noreferrer"
-									>
-										[Ecosystem] nostrapps.com
-										<ArrowRightIcon className="size-4" />
-									</a>
-								</div>
-							</div>
-							<div className="flex items-start gap-2 text-[13px]">
-								<Mide />
-								<div className="flex flex-col gap-0.5">
-									<h3 className="font-semibold">Mide</h3>
-									<div className="p-2 bg-black/5 dark:bg-white/5 rounded-lg">
-										If you want to close this onboarding board, you can click
-										the button below.
-									</div>
-									<button
-										type="button"
-										onClick={() => close()}
-										className="mt-1 px-3 py-2 shadow-primary flex items-center justify-between bg-white hover:bg-blue-500 hover:text-white dark:bg-white/10 rounded-lg"
-									>
-										Close
-										<CancelIcon className="size-4" />
-									</button>
-								</div>
-							</div>
-						</>
-					) : null}
 				</div>
 			</div>
 		</div>
 	);
 }
-
-function Mide() {
-	return (
-		<img
-			src="/ai.jpg"
-			alt="Ai-chan"
-			className="shrink-0 size-10 rounded-full outline outline-1 -outline-offset-1 outline-black/15"
-		/>
-	);
-}
-
-function CurrentUser() {
-	const { account } = Route.useSearch();
-
-	return (
-		<User.Provider pubkey={account}>
-			<User.Root className="shrink-0">
-				<User.Avatar className="size-10 rounded-full outline outline-1 -outline-offset-1 outline-black/15" />
-			</User.Root>
-		</User.Provider>
-	);
-}
diff --git a/apps/desktop2/src/routes/topic.tsx b/apps/desktop2/src/routes/topic.tsx
new file mode 100644
index 00000000..23965db3
--- /dev/null
+++ b/apps/desktop2/src/routes/topic.tsx
@@ -0,0 +1,171 @@
+import { Conversation } from "@/components/conversation";
+import { Quote } from "@/components/quote";
+import { RepostNote } from "@/components/repost";
+import { TextNote } from "@/components/text";
+import { ArrowRightCircleIcon, ArrowRightIcon } from "@lume/icons";
+import { type ColumnRouteSearch, type Event, Kind, Topic } from "@lume/types";
+import { Spinner } from "@lume/ui";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { Link, createFileRoute, redirect } from "@tanstack/react-router";
+import { Virtualizer } from "virtua";
+
+export const Route = createFileRoute("/topic")({
+	validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+		return {
+			account: search.account,
+			label: search.label,
+			name: search.name,
+		};
+	},
+	beforeLoad: async ({ search, context }) => {
+		const ark = context.ark;
+		const key = `lume_topic_${search.label}`;
+		const topics = (await ark.get_nstore(key)) as unknown as Topic[];
+		const settings = await ark.get_settings();
+
+		if (!topics?.length) {
+			throw redirect({
+				to: "/create-topic",
+				search: {
+					...search,
+					redirect: "/topic",
+				},
+			});
+		}
+
+		let hashtags: string[] = [];
+
+		for (const topic of topics) {
+			hashtags.push(...topic.content);
+		}
+
+		return {
+			hashtags,
+			settings,
+		};
+	},
+	component: Screen,
+});
+
+export function Screen() {
+	const { label, account } = Route.useSearch();
+	const { ark, hashtags } = Route.useRouteContext();
+	const {
+		data,
+		isLoading,
+		isFetching,
+		isFetchingNextPage,
+		hasNextPage,
+		fetchNextPage,
+	} = useInfiniteQuery({
+		queryKey: [label, account],
+		initialPageParam: 0,
+		queryFn: async ({ pageParam }: { pageParam: number }) => {
+			const events = ark.get_hashtag_events(hashtags, 20, pageParam);
+			return events;
+		},
+		getNextPageParam: (lastPage) => lastPage?.at(-1)?.created_at - 1,
+		select: (data) => data?.pages.flatMap((page) => page),
+		refetchOnWindowFocus: false,
+	});
+
+	const renderItem = (event: Event) => {
+		if (!event) return;
+		switch (event.kind) {
+			case Kind.Repost:
+				return <RepostNote key={event.id} event={event} />;
+			default: {
+				const isConversation =
+					event.tags.filter((tag) => tag[0] === "e" && tag[3] !== "mention")
+						.length > 0;
+				const isQuote = event.tags.filter((tag) => tag[0] === "q").length > 0;
+
+				if (isConversation) {
+					return <Conversation key={event.id} event={event} className="mb-3" />;
+				}
+
+				if (isQuote) {
+					return <Quote key={event.id} event={event} className="mb-3" />;
+				}
+
+				return <TextNote key={event.id} event={event} className="mb-3" />;
+			}
+		}
+	};
+
+	return (
+		<div className="p-2 w-full h-full overflow-y-auto scrollbar-none">
+			{isFetching && !isLoading && !isFetchingNextPage ? (
+				<div className="mb-3 w-full h-11 flex items-center justify-center 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 gap-2">
+						<Spinner className="size-5" />
+						<span className="text-sm font-medium">Fetching new notes...</span>
+					</div>
+				</div>
+			) : null}
+			{isLoading ? (
+				<div className="flex h-16 w-full items-center justify-center gap-2">
+					<Spinner className="size-5" />
+					<span className="text-sm font-medium">Loading...</span>
+				</div>
+			) : !data.length ? (
+				<Empty />
+			) : (
+				<Virtualizer overscan={3}>
+					{data.map((item) => renderItem(item))}
+				</Virtualizer>
+			)}
+			{data?.length && hasNextPage ? (
+				<div>
+					<button
+						type="button"
+						onClick={() => fetchNextPage()}
+						disabled={isFetchingNextPage || isLoading}
+						className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-neutral-100 px-3 font-medium hover:bg-neutral-50 focus:outline-none dark:bg-white/10 dark:hover:bg-white/20"
+					>
+						{isFetchingNextPage ? (
+							<Spinner className="size-5" />
+						) : (
+							<>
+								<ArrowRightCircleIcon className="size-5" />
+								Load more
+							</>
+						)}
+					</button>
+				</div>
+			) : null}
+		</div>
+	);
+}
+
+function Empty() {
+	return (
+		<div className="flex flex-col py-10 gap-10">
+			<div className="text-center flex flex-col items-center justify-center">
+				<div className="size-24 bg-blue-100 flex flex-col items-center justify-end overflow-hidden dark:bg-blue-900 rounded-full mb-8">
+					<div className="w-12 h-16 bg-gradient-to-b from-blue-500 dark:from-blue-200 to-blue-50 dark:to-blue-900 rounded-t-lg" />
+				</div>
+				<p className="text-lg font-medium">Your newsfeed is empty</p>
+				<p className="leading-tight text-neutral-700 dark:text-neutral-300">
+					Here are few suggestions to get started.
+				</p>
+			</div>
+			<div className="flex flex-col px-3 gap-2">
+				<Link
+					to="/trending/notes"
+					className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
+				>
+					<ArrowRightIcon className="size-5" />
+					Show trending notes
+				</Link>
+				<Link
+					to="/trending/users"
+					className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
+				>
+					<ArrowRightIcon className="size-5" />
+					Discover trending users
+				</Link>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/desktop2/src/routes/trending.notes.tsx b/apps/desktop2/src/routes/trending.notes.tsx
index 74da71a3..5460572d 100644
--- a/apps/desktop2/src/routes/trending.notes.tsx
+++ b/apps/desktop2/src/routes/trending.notes.tsx
@@ -1,5 +1,5 @@
 import { TextNote } from "@/components/text";
-import { type Event } from "@lume/types";
+import type { Event } from "@lume/types";
 import { Spinner } from "@lume/ui";
 import { Await, createFileRoute } from "@tanstack/react-router";
 import { defer } from "@tanstack/react-router";
diff --git a/apps/desktop2/src/routes/trending.users.tsx b/apps/desktop2/src/routes/trending.users.tsx
index e8fe68c3..542fbdd9 100644
--- a/apps/desktop2/src/routes/trending.users.tsx
+++ b/apps/desktop2/src/routes/trending.users.tsx
@@ -42,7 +42,7 @@ export function Screen() {
 			>
 				<Await promise={data}>
 					{(users) =>
-						users.profiles.map((item) => (
+						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"
diff --git a/apps/desktop2/src/routes/users/$pubkey.tsx b/apps/desktop2/src/routes/users/$pubkey.tsx
index 0d9ec5fc..528c9ab6 100644
--- a/apps/desktop2/src/routes/users/$pubkey.tsx
+++ b/apps/desktop2/src/routes/users/$pubkey.tsx
@@ -6,91 +6,91 @@ import { Conversation } from "@/components/conversation";
 import { Quote } from "@/components/quote";
 import { RepostNote } from "@/components/repost";
 import { TextNote } from "@/components/text";
-import { Event, Kind } from "@lume/types";
+import { type Event, Kind } from "@lume/types";
 import { Suspense } from "react";
 import { Await } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/users/$pubkey")({
-  beforeLoad: async ({ context }) => {
-    const ark = context.ark;
-    const settings = await ark.get_settings();
+	beforeLoad: async ({ context }) => {
+		const ark = context.ark;
+		const settings = await ark.get_settings();
 
-    return { settings };
-  },
-  loader: async ({ params, context }) => {
-    const ark = context.ark;
-    return { data: defer(ark.get_events_by(params.pubkey, 50)) };
-  },
-  component: Screen,
+		return { settings };
+	},
+	loader: async ({ params, context }) => {
+		const ark = context.ark;
+		return { data: defer(ark.get_events_by(params.pubkey, 50)) };
+	},
+	component: Screen,
 });
 
 function Screen() {
-  const { pubkey } = Route.useParams();
-  const { data } = Route.useLoaderData();
+	const { pubkey } = Route.useParams();
+	const { data } = Route.useLoaderData();
 
-  const renderItem = (event: Event) => {
-    if (!event) return;
-    switch (event.kind) {
-      case Kind.Repost:
-        return <RepostNote key={event.id} event={event} />;
-      default: {
-        const isConversation =
-          event.tags.filter((tag) => tag[0] === "e" && tag[3] !== "mention")
-            .length > 0;
-        const isQuote = event.tags.filter((tag) => tag[0] === "q").length > 0;
+	const renderItem = (event: Event) => {
+		if (!event) return;
+		switch (event.kind) {
+			case Kind.Repost:
+				return <RepostNote key={event.id} event={event} />;
+			default: {
+				const isConversation =
+					event.tags.filter((tag) => tag[0] === "e" && tag[3] !== "mention")
+						.length > 0;
+				const isQuote = event.tags.filter((tag) => tag[0] === "q").length > 0;
 
-        if (isConversation) {
-          return <Conversation key={event.id} event={event} className="mb-3" />;
-        }
+				if (isConversation) {
+					return <Conversation key={event.id} event={event} className="mb-3" />;
+				}
 
-        if (isQuote) {
-          return <Quote key={event.id} event={event} className="mb-3" />;
-        }
+				if (isQuote) {
+					return <Quote key={event.id} event={event} className="mb-3" />;
+				}
 
-        return <TextNote key={event.id} event={event} className="mb-3" />;
-      }
-    }
-  };
+				return <TextNote key={event.id} event={event} className="mb-3" />;
+			}
+		}
+	};
 
-  return (
-    <Container withDrag>
-      <Box className="px-0 scrollbar-none bg-black/5 dark:bg-white/5 backdrop-blur-sm">
-        <WindowVirtualizer>
-          <User.Provider pubkey={pubkey}>
-            <User.Root>
-              <User.Cover className="h-44 w-full object-cover" />
-              <div className="relative -mt-8 flex flex-col px-3">
-                <User.Avatar className="size-14 rounded-full" />
-                <div className="mb-4 inline-flex items-center justify-between">
-                  <div className="flex items-center gap-1">
-                    <User.Name className="text-lg font-semibold leading-tight" />
-                    <User.NIP05 />
-                  </div>
-                  <User.Button className="h-9 w-24 rounded-full inline-flex items-center justify-center bg-black text-sm font-medium text-white hover:bg-neutral-900 dark:bg-neutral-900" />
-                </div>
-                <User.About />
-              </div>
-            </User.Root>
-          </User.Provider>
-          <div className="px-3 mt-5">
-            <div className="mb-3">
-              <h3 className="text-lg font-semibold">Latest notes</h3>
-            </div>
-            <Suspense
-              fallback={
-                <div className="flex h-20 w-full items-center justify-center gap-1.5 text-sm font-medium">
-                  <Spinner className="size-5" />
-                  Loading...
-                </div>
-              }
-            >
-              <Await promise={data}>
-                {(events) => events.map((event) => renderItem(event))}
-              </Await>
-            </Suspense>
-          </div>
-        </WindowVirtualizer>
-      </Box>
-    </Container>
-  );
+	return (
+		<Container withDrag>
+			<Box className="px-0 scrollbar-none bg-black/5 dark:bg-white/5 backdrop-blur-sm">
+				<WindowVirtualizer>
+					<User.Provider pubkey={pubkey}>
+						<User.Root>
+							<User.Cover className="h-44 w-full object-cover" />
+							<div className="relative -mt-8 flex flex-col px-3">
+								<User.Avatar className="size-14 rounded-full" />
+								<div className="mb-4 inline-flex items-center justify-between">
+									<div className="flex items-center gap-1">
+										<User.Name className="text-lg font-semibold leading-tight" />
+										<User.NIP05 />
+									</div>
+									<User.Button className="h-9 w-24 rounded-full inline-flex items-center justify-center bg-black text-sm font-medium text-white hover:bg-neutral-900 dark:bg-neutral-900" />
+								</div>
+								<User.About />
+							</div>
+						</User.Root>
+					</User.Provider>
+					<div className="px-3 mt-5">
+						<div className="mb-3">
+							<h3 className="text-lg font-semibold">Latest notes</h3>
+						</div>
+						<Suspense
+							fallback={
+								<div className="flex h-20 w-full items-center justify-center gap-1.5 text-sm font-medium">
+									<Spinner className="size-5" />
+									Loading...
+								</div>
+							}
+						>
+							<Await promise={data}>
+								{(events) => events.map((event) => renderItem(event))}
+							</Await>
+						</Suspense>
+					</div>
+				</WindowVirtualizer>
+			</Box>
+		</Container>
+	);
 }
diff --git a/apps/desktop2/src/routes/users/-components/eventList.tsx b/apps/desktop2/src/routes/users/-components/eventList.tsx
index 6510ce52..f81677e6 100644
--- a/apps/desktop2/src/routes/users/-components/eventList.tsx
+++ b/apps/desktop2/src/routes/users/-components/eventList.tsx
@@ -3,70 +3,69 @@ import { TextNote } from "@/components/text";
 import { ArrowRightCircleIcon, InfoIcon } from "@lume/icons";
 import { type Event, Kind } from "@lume/types";
 import { Spinner } from "@lume/ui";
-import { FETCH_LIMIT } from "@lume/utils";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useRouteContext } from "@tanstack/react-router";
 
 export function EventList({ id }: { id: string }) {
-  const { ark } = useRouteContext({ strict: false });
-  const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
-    useInfiniteQuery({
-      queryKey: ["events", id],
-      initialPageParam: 0,
-      queryFn: async ({ pageParam }: { pageParam: number }) => {
-        const events = await ark.get_events_by(id, FETCH_LIMIT, pageParam);
-        return events;
-      },
-      getNextPageParam: (lastPage) => {
-        const lastEvent = lastPage?.at(-1);
-        return lastEvent ? lastEvent.created_at - 1 : null;
-      },
-      refetchOnWindowFocus: false,
-    });
+	const { ark } = useRouteContext({ strict: false });
+	const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
+		useInfiniteQuery({
+			queryKey: ["events", id],
+			initialPageParam: 0,
+			queryFn: async ({ pageParam }: { pageParam: number }) => {
+				const events = await ark.get_events_by(id, 20, pageParam);
+				return events;
+			},
+			getNextPageParam: (lastPage) => {
+				const lastEvent = lastPage?.at(-1);
+				return lastEvent ? lastEvent.created_at - 1 : null;
+			},
+			refetchOnWindowFocus: false,
+		});
 
-  const renderItem = (event: Event) => {
-    if (!event) return;
-    switch (event.kind) {
-      case Kind.Repost:
-        return <RepostNote key={event.id} event={event} />;
-      default:
-        return <TextNote key={event.id} event={event} />;
-    }
-  };
+	const renderItem = (event: Event) => {
+		if (!event) return;
+		switch (event.kind) {
+			case Kind.Repost:
+				return <RepostNote key={event.id} event={event} />;
+			default:
+				return <TextNote key={event.id} event={event} />;
+		}
+	};
 
-  return (
-    <div>
-      {isLoading ? (
-        <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
-          <Spinner className="size-5" />
-        </div>
-      ) : !data.length ? (
-        <div className="flex items-center gap-2 rounded-xl bg-neutral-50 p-5 dark:bg-neutral-950">
-          <InfoIcon className="size-6" />
-          <p>Empty newsfeed.</p>
-        </div>
-      ) : (
-        data.map((item) => renderItem(item))
-      )}
-      <div className="flex h-20 items-center justify-center">
-        {hasNextPage ? (
-          <button
-            type="button"
-            onClick={() => fetchNextPage()}
-            disabled={!hasNextPage || isFetchingNextPage}
-            className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
-          >
-            {isFetchingNextPage ? (
-              <Spinner className="size-5" />
-            ) : (
-              <>
-                <ArrowRightCircleIcon className="size-5" />
-                Load more
-              </>
-            )}
-          </button>
-        ) : null}
-      </div>
-    </div>
-  );
+	return (
+		<div>
+			{isLoading ? (
+				<div className="flex h-20 w-full flex-col items-center justify-center gap-1">
+					<Spinner className="size-5" />
+				</div>
+			) : !data.length ? (
+				<div className="flex items-center gap-2 rounded-xl bg-neutral-50 p-5 dark:bg-neutral-950">
+					<InfoIcon className="size-6" />
+					<p>Empty newsfeed.</p>
+				</div>
+			) : (
+				data.map((item) => renderItem(item))
+			)}
+			<div className="flex h-20 items-center justify-center">
+				{hasNextPage ? (
+					<button
+						type="button"
+						onClick={() => fetchNextPage()}
+						disabled={!hasNextPage || isFetchingNextPage}
+						className="inline-flex h-12 w-36 items-center justify-center gap-2 rounded-full bg-neutral-100 px-3 font-medium hover:bg-neutral-200 focus:outline-none dark:bg-neutral-900 dark:hover:bg-neutral-800"
+					>
+						{isFetchingNextPage ? (
+							<Spinner className="size-5" />
+						) : (
+							<>
+								<ArrowRightCircleIcon className="size-5" />
+								Load more
+							</>
+						)}
+					</button>
+				) : null}
+			</div>
+		</div>
+	);
 }
diff --git a/packages/ark/src/ark.ts b/packages/ark/src/ark.ts
index a4dceca8..3aa0dfe8 100644
--- a/packages/ark/src/ark.ts
+++ b/packages/ark/src/ark.ts
@@ -1,12 +1,12 @@
 import {
-  type Event,
-  type EventWithReplies,
-  type Interests,
-  type Keys,
-  type LumeColumn,
-  type Metadata,
-  type Settings,
-  Relays,
+	type Event,
+	type EventWithReplies,
+	type Interests,
+	type Keys,
+	type LumeColumn,
+	type Metadata,
+	type Settings,
+	Relays,
 } from "@lume/types";
 import { generateContentTags } from "@lume/utils";
 import { invoke } from "@tauri-apps/api/core";
@@ -15,904 +15,884 @@ import { open } from "@tauri-apps/plugin-dialog";
 import { readFile } from "@tauri-apps/plugin-fs";
 
 enum NSTORE_KEYS {
-  settings = "lume_user_settings",
-  interests = "lume_user_interests",
-  columns = "lume_user_columns",
+	settings = "lume_user_settings",
+	columns = "lume_user_columns",
 }
 
 export class Ark {
-  public windows: WebviewWindow[];
-  public settings: Settings;
-  public accounts: string[];
-
-  constructor() {
-    this.windows = [];
-    this.settings = undefined;
-  }
-
-  public async get_all_accounts() {
-    try {
-      const cmd: string[] = await invoke("get_accounts");
-      const accounts: string[] = cmd.map((item) => item.replace(".npub", ""));
-
-      if (!this.accounts) this.accounts = accounts;
-
-      return accounts;
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async load_selected_account(npub: string) {
-    try {
-      const cmd: boolean = await invoke("load_selected_account", {
-        npub,
-      });
-      return cmd;
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async nostr_connect(uri: string) {
-    try {
-      const remoteKey = uri.replace("bunker://", "").split("?")[0];
-      const npub: string = await invoke("to_npub", { hex: remoteKey });
-
-      if (npub) {
-        const connect: string = await invoke("nostr_connect", {
-          npub,
-          uri,
-        });
-
-        return connect;
-      }
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async create_keys() {
-    try {
-      const cmd: Keys = await invoke("create_keys");
-      return cmd;
-    } catch (e) {
-      console.error(String(e));
-    }
-  }
-
-  public async save_account(nsec: string, password = "") {
-    try {
-      const cmd: string = await invoke("save_key", {
-        nsec,
-        password,
-      });
-
-      return cmd;
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async event_to_bech32(id: string, relays: string[]) {
-    try {
-      const cmd: string = await invoke("event_to_bech32", {
-        id,
-        relays,
-      });
-      return cmd;
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async get_relays() {
-    try {
-      const cmd: Relays = await invoke("get_relays");
-      return cmd;
-    } catch (e) {
-      console.error(String(e));
-      return null;
-    }
-  }
-
-  public async add_relay(url: string) {
-    try {
-      const relayUrl = new URL(url);
-
-      if (relayUrl.protocol === "wss:" || relayUrl.protocol === "ws:") {
-        const cmd: boolean = await invoke("connect_relay", { relay: relayUrl });
-        return cmd;
-      }
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async remove_relay(url: string) {
-    try {
-      const relayUrl = new URL(url);
-
-      if (relayUrl.protocol === "wss:" || relayUrl.protocol === "ws:") {
-        const cmd: boolean = await invoke("remove_relay", { relay: relayUrl });
-        return cmd;
-      }
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async get_activities(account: string, kind: "1" | "6" | "9735" = "1") {
-    try {
-      const events: Event[] = await invoke("get_activities", { account, kind });
-      return events;
-    } catch (e) {
-      console.error(String(e));
-      return null;
-    }
-  }
-
-  public async get_event(id: string) {
-    try {
-      const eventId: string = id.replace("nostr:", "").replace(/[^\w\s]/gi, "");
-      const cmd: string = await invoke("get_event", { id: eventId });
-      const event: Event = JSON.parse(cmd);
-      return event;
-    } catch (e) {
-      console.error(id, String(e));
-      throw new Error(String(e));
-    }
-  }
-
-  public async search(content: string, limit: number) {
-    try {
-      if (content.length < 1) return [];
-
-      const events: Event[] = await invoke("search", {
-        content: content.trim(),
-        limit,
-      });
-
-      return events;
-    } catch (e) {
-      console.info(String(e));
-      return [];
-    }
-  }
-
-  private dedup_events(nostrEvents: Event[]) {
-    const seens = new Set<string>();
-    const events = nostrEvents.filter((event) => {
-      const eTags = event.tags.filter((el) => el[0] === "e");
-      const ids = eTags.map((item) => item[1]);
-      const isDup = ids.some((id) => seens.has(id));
-
-      // Add found ids to seen list
-      for (const id of ids) {
-        seens.add(id);
-      }
-
-      // Filter NSFW event
-      if (this.settings?.nsfw) {
-        const wTags = event.tags.filter((t) => t[0] === "content-warning");
-        const isLewd = wTags.length > 0;
-
-        return !isDup && !isLewd;
-      }
-
-      // Filter duplicate event
-      return !isDup;
-    });
-
-    return events;
-  }
-
-  public async get_local_events(limit: number, asOf?: number) {
-    try {
-      const until: string = asOf && asOf > 0 ? asOf.toString() : undefined;
-      const nostrEvents: Event[] = await invoke("get_local_events", {
-        limit,
-        until,
-      });
-      const events = this.dedup_events(nostrEvents);
-
-      return events;
-    } catch (e) {
-      console.error("[get_local_events] failed", String(e));
-      return [];
-    }
-  }
-
-  public async get_global_events(limit: number, asOf?: number) {
-    try {
-      const until: string = asOf && asOf > 0 ? asOf.toString() : undefined;
-      const nostrEvents: Event[] = await invoke("get_global_events", {
-        limit,
-        until,
-      });
-      const events = this.dedup_events(nostrEvents);
-
-      return events;
-    } catch (e) {
-      console.error("[get_global_events] failed", String(e));
-      return [];
-    }
-  }
-
-  public async get_hashtag_events(
-    hashtags: string[],
-    limit: number,
-    asOf?: number,
-  ) {
-    try {
-      const until: string = asOf && asOf > 0 ? asOf.toString() : undefined;
-      const nostrTags = hashtags.map((tag) => tag.replace("#", ""));
-      const nostrEvents: Event[] = await invoke("get_hashtag_events", {
-        hashtags: nostrTags,
-        limit,
-        until,
-      });
-      const events = this.dedup_events(nostrEvents);
-
-      return events;
-    } catch (e) {
-      console.error("[get_hashtag_events] failed", String(e));
-      return [];
-    }
-  }
-
-  public async get_group_events(
-    contacts: string[],
-    limit: number,
-    asOf?: number,
-  ) {
-    try {
-      const until: string = asOf && asOf > 0 ? asOf.toString() : undefined;
-      const nostrEvents: Event[] = await invoke("get_group_events", {
-        list: contacts,
-        limit,
-        until,
-      });
-      const events = this.dedup_events(nostrEvents);
-
-      return events;
-    } catch (e) {
-      console.error("[get_group_events] failed", String(e));
-      return [];
-    }
-  }
-
-  public async get_events_by(pubkey: string, limit: number, asOf?: number) {
-    try {
-      const until: string = asOf && asOf > 0 ? asOf.toString() : undefined;
-      const nostrEvents: Event[] = await invoke("get_events_by", {
-        publicKey: pubkey,
-        limit,
-        as_of: until,
-      });
-
-      return nostrEvents.sort((a, b) => b.created_at - a.created_at);
-    } catch (e) {
-      console.error("[get_events_by] failed", String(e));
-      return [];
-    }
-  }
-
-  public async publish(
-    content: string,
-    reply_to?: string,
-    quote?: boolean,
-    nsfw?: boolean,
-  ) {
-    try {
-      const g = await generateContentTags(content);
-
-      const eventContent = g.content;
-      const eventTags = g.tags;
-
-      if (reply_to) {
-        const replyEvent = await this.get_event(reply_to);
-        const relayHint =
-          replyEvent.tags.find((ev) => ev[0] === "e")?.[0][2] ?? "";
-
-        if (quote) {
-          eventTags.push(["e", replyEvent.id, relayHint, "mention"]);
-          eventTags.push(["q", replyEvent.id]);
-        } else {
-          const rootEvent = replyEvent.tags.find((ev) => ev[3] === "root");
-
-          if (rootEvent) {
-            eventTags.push([
-              "e",
-              rootEvent[1],
-              rootEvent[2] || relayHint,
-              "root",
-            ]);
-          }
-
-          eventTags.push(["e", replyEvent.id, relayHint, "reply"]);
-          eventTags.push(["p", replyEvent.pubkey]);
-        }
-      }
-
-      if (nsfw) {
-        eventTags.push(["L", "content-warning"]);
-        eventTags.push(["l", "reason", "content-warning"]);
-        eventTags.push(["content-warning", "nsfw"]);
-      }
-
-      const cmd: string = await invoke("publish", {
-        content: eventContent,
-        tags: eventTags,
-      });
-
-      return cmd;
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async reply_to(content: string, tags: string[]) {
-    try {
-      const cmd: string = await invoke("reply_to", { content, tags });
-      return cmd;
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async repost(id: string, author: string) {
-    try {
-      const cmd: string = await invoke("repost", { id, pubkey: author });
-      return cmd;
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async get_event_thread(id: string) {
-    try {
-      const events: EventWithReplies[] = await invoke("get_thread", {
-        id,
-      });
-
-      if (events.length > 0) {
-        const replies = new Set();
-        for (const event of events) {
-          const tags = event.tags.filter(
-            (el) => el[0] === "e" && el[1] !== id && el[3] !== "mention",
-          );
-          if (tags.length > 0) {
-            for (const tag of tags) {
-              const rootIndex = events.findIndex((el) => el.id === tag[1]);
-              if (rootIndex !== -1) {
-                const rootEvent = events[rootIndex];
-                if (rootEvent?.replies) {
-                  rootEvent.replies.push(event);
-                } else {
-                  rootEvent.replies = [event];
-                }
-                replies.add(event.id);
-              }
-            }
-          }
-        }
-        const cleanEvents = events.filter((ev) => !replies.has(ev.id));
-        return cleanEvents;
-      }
-
-      return events;
-    } catch (e) {
-      return [];
-    }
-  }
-
-  public get_thread(tags: string[][], gossip: boolean = false) {
-    let root: string = null;
-    let reply: string = null;
-
-    // Get all event references from tags, ignore mention
-    const events = tags.filter((el) => el[0] === "e" && el[3] !== "mention");
-
-    if (gossip) {
-      const relays = tags.filter((el) => el[0] === "e" && el[2]?.length);
-
-      if (relays.length >= 1) {
-        for (const relay of relays) {
-          if (relay[2]?.length) this.add_relay(relay[2]);
-        }
-      }
-    }
-
-    if (events.length === 1) {
-      root = events[0][1];
-    }
-
-    if (events.length > 1) {
-      root = events.find((el) => el[3] === "root")?.[1] ?? events[0][1];
-      reply = events.find((el) => el[3] === "reply")?.[1] ?? events[1][1];
-    }
-
-    // Fix some rare case when root === reply
-    if (root && reply && root === reply) {
-      reply = null;
-    }
-
-    return {
-      root,
-      reply,
-    };
-  }
-
-  public async get_profile(pubkey: string) {
-    try {
-      const id = pubkey.replace("nostr:", "").replace(/[^\w\s]/gi, "");
-      const cmd: Metadata = await invoke("get_profile", { id });
-
-      return cmd;
-    } catch (e) {
-      console.error(pubkey, String(e));
-      return null;
-    }
-  }
-
-  public async get_current_user_profile() {
-    try {
-      const cmd: Metadata = await invoke("get_current_user_profile");
-      return cmd;
-    } catch {
-      return null;
-    }
-  }
-
-  public async create_profile(profile: Metadata) {
-    try {
-      const event: string = await invoke("create_profile", {
-        name: profile.name || "",
-        display_name: profile.display_name || "",
-        displayName: profile.display_name || "",
-        about: profile.about || "",
-        picture: profile.picture || "",
-        banner: profile.banner || "",
-        nip05: profile.nip05 || "",
-        lud16: profile.lud16 || "",
-        website: profile.website || "",
-      });
-      return event;
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async get_contact_list() {
-    try {
-      const cmd: string[] = await invoke("get_contact_list");
-      return cmd;
-    } catch (e) {
-      console.error(e);
-      return [];
-    }
-  }
-
-  public async follow(id: string, alias?: string) {
-    try {
-      const cmd: string = await invoke("follow", { id, alias });
-      return cmd;
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async unfollow(id: string) {
-    try {
-      const cmd: string = await invoke("unfollow", { id });
-      return cmd;
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async user_to_bech32(key: string, relays: string[]) {
-    try {
-      const cmd: string = await invoke("user_to_bech32", {
-        key,
-        relays,
-      });
-      return cmd;
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async verify_nip05(pubkey: string, nip05: string) {
-    try {
-      const cmd: boolean = await invoke("verify_nip05", {
-        key: pubkey,
-        nip05,
-      });
-      return cmd;
-    } catch {
-      return false;
-    }
-  }
-
-  public async set_nwc(uri: string) {
-    try {
-      const cmd: boolean = await invoke("set_nwc", { uri });
-      return cmd;
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async load_nwc() {
-    try {
-      const cmd: boolean = await invoke("load_nwc");
-      return cmd;
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async get_balance() {
-    try {
-      const cmd: number = await invoke("get_balance");
-      return cmd;
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async zap_profile(id: string, amount: number, message: string) {
-    try {
-      const cmd: boolean = await invoke("zap_profile", { id, amount, message });
-      return cmd;
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async zap_event(id: string, amount: number, message: string) {
-    try {
-      const cmd: boolean = await invoke("zap_event", { id, amount, message });
-      return cmd;
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async upload(filePath?: string) {
-    const allowExts = [
-      "png",
-      "jpeg",
-      "jpg",
-      "gif",
-      "mp4",
-      "mp3",
-      "webm",
-      "mkv",
-      "avi",
-      "mov",
-    ];
-
-    const selected =
-      filePath ||
-      (
-        await open({
-          multiple: false,
-          filters: [
-            {
-              name: "Media",
-              extensions: allowExts,
-            },
-          ],
-        })
-      ).path;
-
-    // User cancelled action
-    if (!selected) return null;
-
-    try {
-      const file = await readFile(selected);
-      const blob = new Blob([file]);
-
-      const data = new FormData();
-      data.append("fileToUpload", blob);
-      data.append("submit", "Upload Image");
-
-      const res = await fetch("https://nostr.build/api/v2/upload/files", {
-        method: "POST",
-        body: data,
-      });
-
-      if (!res.ok) return null;
-
-      const json = await res.json();
-      const content = json.data[0];
-
-      return content.url as string;
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async get_columns() {
-    try {
-      const cmd: string = await invoke("get_nstore", {
-        key: NSTORE_KEYS.columns,
-      });
-      const columns: LumeColumn[] = cmd ? JSON.parse(cmd) : [];
-      return columns;
-    } catch {
-      return [];
-    }
-  }
-
-  public async set_columns(columns: LumeColumn[]) {
-    try {
-      const cmd: string = await invoke("set_nstore", {
-        key: NSTORE_KEYS.columns,
-        content: JSON.stringify(columns),
-      });
-      return cmd;
-    } catch (e) {
-      throw new Error(e);
-    }
-  }
-
-  public async get_settings() {
-    try {
-      if (this.settings) return this.settings;
-
-      const cmd: string = await invoke("get_nstore", {
-        key: NSTORE_KEYS.settings,
-      });
-      const settings: Settings = cmd ? JSON.parse(cmd) : null;
-
-      this.settings = settings;
-
-      return settings;
-    } catch {
-      const defaultSettings: Settings = {
-        autoUpdate: false,
-        enhancedPrivacy: false,
-        notification: false,
-        zap: false,
-        nsfw: false,
-      };
-      this.settings = defaultSettings;
-      return defaultSettings;
-    }
-  }
-
-  public async set_settings(settings: Settings) {
-    try {
-      const cmd: string = await invoke("set_nstore", {
-        key: NSTORE_KEYS.settings,
-        content: JSON.stringify(settings),
-      });
-      return cmd;
-    } catch (e) {
-      throw new Error(e);
-    }
-  }
-
-  public async get_interest() {
-    try {
-      const cmd: string = await invoke("get_nstore", {
-        key: NSTORE_KEYS.interests,
-      });
-      const interests: Interests = cmd ? JSON.parse(cmd) : null;
-      return interests;
-    } catch {
-      return null;
-    }
-  }
-
-  public async set_interest(
-    words: string[],
-    users: string[],
-    hashtags: string[],
-  ) {
-    try {
-      const interests: Interests = {
-        words: words ?? [],
-        users: users ?? [],
-        hashtags: hashtags ?? [],
-      };
-      const cmd: string = await invoke("set_nstore", {
-        key: NSTORE_KEYS.interests,
-        content: JSON.stringify(interests),
-      });
-      return cmd;
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async get_nstore(key: string) {
-    try {
-      const cmd: string = await invoke("get_nstore", {
-        key,
-      });
-      const parse: string | string[] = cmd ? JSON.parse(cmd) : null;
-      if (!parse.length) return null;
-      return parse;
-    } catch {
-      return null;
-    }
-  }
-
-  public async set_nstore(key: string, content: string) {
-    try {
-      const cmd: string = await invoke("set_nstore", {
-        key,
-        content,
-      });
-      return cmd;
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async open_event_id(id: string) {
-    try {
-      const label = `event-${id}`;
-      const url = `/events/${id}`;
-
-      await invoke("open_window", {
-        label,
-        title: "Thread",
-        url,
-        width: 500,
-        height: 800,
-      });
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async open_event(event: Event) {
-    try {
-      let root: string = undefined;
-      let reply: string = undefined;
-
-      const eTags = event.tags.filter(
-        (tag) => tag[0] === "e" || tag[0] === "q",
-      );
-
-      root = eTags.find((el) => el[3] === "root")?.[1];
-      reply = eTags.find((el) => el[3] === "reply")?.[1];
-
-      if (!root) root = eTags[0]?.[1];
-      if (!reply) reply = eTags[1]?.[1];
-
-      const label = `event-${event.id}`;
-      const url = `/events/${root ?? reply ?? event.id}`;
-
-      await invoke("open_window", {
-        label,
-        title: "Thread",
-        url,
-        width: 500,
-        height: 800,
-      });
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async open_profile(pubkey: string) {
-    try {
-      const label = `user-${pubkey}`;
-      await invoke("open_window", {
-        label,
-        title: "Profile",
-        url: `/users/${pubkey}`,
-        width: 500,
-        height: 800,
-      });
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async open_editor(reply_to?: string, quote = false) {
-    try {
-      let url: string;
-
-      if (reply_to) {
-        url = `/editor?reply_to=${reply_to}&quote=${quote}`;
-      } else {
-        url = "/editor";
-      }
-
-      const label = `editor-${reply_to ? reply_to : 0}`;
-
-      await invoke("open_window", {
-        label,
-        title: "Editor",
-        url,
-        width: 560,
-        height: 340,
-      });
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async open_nwc() {
-    try {
-      const label = "nwc";
-      await invoke("open_window", {
-        label,
-        title: "Nostr Wallet Connect",
-        url: "/nwc",
-        width: 400,
-        height: 600,
-      });
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async open_zap(id: string, pubkey: string, account: string) {
-    try {
-      const label = `zap-${id}`;
-      await invoke("open_window", {
-        label,
-        title: "Zap",
-        url: `/zap/${id}?pubkey=${pubkey}&account=${account}`,
-        width: 400,
-        height: 500,
-      });
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async open_settings() {
-    try {
-      const label = "settings";
-      await invoke("open_window", {
-        label,
-        title: "Settings",
-        url: "/settings",
-        width: 800,
-        height: 500,
-      });
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async open_search() {
-    try {
-      const label = "search";
-      await invoke("open_window", {
-        label,
-        title: "Search",
-        url: "/search",
-        width: 400,
-        height: 600,
-      });
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
-
-  public async open_activity(account: string) {
-    try {
-      const label = "activity";
-      await invoke("open_window", {
-        label,
-        title: "Activity",
-        url: `/activity/${account}/texts`,
-        width: 400,
-        height: 600,
-      });
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  }
+	public windows: WebviewWindow[];
+	public settings: Settings;
+	public accounts: string[];
+
+	constructor() {
+		this.windows = [];
+		this.settings = undefined;
+	}
+
+	public async get_all_accounts() {
+		try {
+			const cmd: string[] = await invoke("get_accounts");
+			const accounts: string[] = cmd.map((item) => item.replace(".npub", ""));
+
+			if (!this.accounts) this.accounts = accounts;
+
+			return accounts;
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async load_selected_account(npub: string) {
+		try {
+			const cmd: boolean = await invoke("load_selected_account", {
+				npub,
+			});
+			return cmd;
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async nostr_connect(uri: string) {
+		try {
+			const remoteKey = uri.replace("bunker://", "").split("?")[0];
+			const npub: string = await invoke("to_npub", { hex: remoteKey });
+
+			if (npub) {
+				const connect: string = await invoke("nostr_connect", {
+					npub,
+					uri,
+				});
+
+				return connect;
+			}
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async create_keys() {
+		try {
+			const cmd: Keys = await invoke("create_keys");
+			return cmd;
+		} catch (e) {
+			console.error(String(e));
+		}
+	}
+
+	public async save_account(nsec: string, password = "") {
+		try {
+			const cmd: string = await invoke("save_key", {
+				nsec,
+				password,
+			});
+
+			return cmd;
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async event_to_bech32(id: string, relays: string[]) {
+		try {
+			const cmd: string = await invoke("event_to_bech32", {
+				id,
+				relays,
+			});
+			return cmd;
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async get_relays() {
+		try {
+			const cmd: Relays = await invoke("get_relays");
+			return cmd;
+		} catch (e) {
+			console.error(String(e));
+			return null;
+		}
+	}
+
+	public async add_relay(url: string) {
+		try {
+			const relayUrl = new URL(url);
+
+			if (relayUrl.protocol === "wss:" || relayUrl.protocol === "ws:") {
+				const cmd: boolean = await invoke("connect_relay", { relay: relayUrl });
+				return cmd;
+			}
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async remove_relay(url: string) {
+		try {
+			const relayUrl = new URL(url);
+
+			if (relayUrl.protocol === "wss:" || relayUrl.protocol === "ws:") {
+				const cmd: boolean = await invoke("remove_relay", { relay: relayUrl });
+				return cmd;
+			}
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async get_activities(account: string, kind: "1" | "6" | "9735" = "1") {
+		try {
+			const events: Event[] = await invoke("get_activities", { account, kind });
+			return events;
+		} catch (e) {
+			console.error(String(e));
+			return null;
+		}
+	}
+
+	public async get_event(id: string) {
+		try {
+			const eventId: string = id.replace("nostr:", "").replace(/[^\w\s]/gi, "");
+			const cmd: string = await invoke("get_event", { id: eventId });
+			const event: Event = JSON.parse(cmd);
+			return event;
+		} catch (e) {
+			console.error(id, String(e));
+			throw new Error(String(e));
+		}
+	}
+
+	public async search(content: string, limit: number) {
+		try {
+			if (content.length < 1) return [];
+
+			const events: Event[] = await invoke("search", {
+				content: content.trim(),
+				limit,
+			});
+
+			return events;
+		} catch (e) {
+			console.info(String(e));
+			return [];
+		}
+	}
+
+	private dedup_events(nostrEvents: Event[]) {
+		const seens = new Set<string>();
+		const events = nostrEvents.filter((event) => {
+			const eTags = event.tags.filter((el) => el[0] === "e");
+			const ids = eTags.map((item) => item[1]);
+			const isDup = ids.some((id) => seens.has(id));
+
+			// Add found ids to seen list
+			for (const id of ids) {
+				seens.add(id);
+			}
+
+			// Filter NSFW event
+			if (this.settings?.nsfw) {
+				const wTags = event.tags.filter((t) => t[0] === "content-warning");
+				const isLewd = wTags.length > 0;
+
+				return !isDup && !isLewd;
+			}
+
+			// Filter duplicate event
+			return !isDup;
+		});
+
+		return events;
+	}
+
+	public async get_local_events(
+		pubkeys: string[],
+		limit: number,
+		asOf?: number,
+	) {
+		try {
+			const until: string = asOf && asOf > 0 ? asOf.toString() : undefined;
+			const nostrEvents: Event[] = await invoke("get_local_events", {
+				pubkeys,
+				limit,
+				until,
+			});
+			const events = this.dedup_events(nostrEvents);
+
+			return events;
+		} catch (e) {
+			console.error("[get_local_events] failed", String(e));
+			return [];
+		}
+	}
+
+	public async get_global_events(limit: number, asOf?: number) {
+		try {
+			const until: string = asOf && asOf > 0 ? asOf.toString() : undefined;
+			const nostrEvents: Event[] = await invoke("get_global_events", {
+				limit,
+				until,
+			});
+			const events = this.dedup_events(nostrEvents);
+
+			return events;
+		} catch (e) {
+			console.error("[get_global_events] failed", String(e));
+			return [];
+		}
+	}
+
+	public async get_hashtag_events(
+		hashtags: string[],
+		limit: number,
+		asOf?: number,
+	) {
+		try {
+			const until: string = asOf && asOf > 0 ? asOf.toString() : undefined;
+			const nostrTags = hashtags.map((tag) => tag.replace("#", ""));
+			const nostrEvents: Event[] = await invoke("get_hashtag_events", {
+				hashtags: nostrTags,
+				limit,
+				until,
+			});
+			const events = this.dedup_events(nostrEvents);
+
+			return events;
+		} catch (e) {
+			console.error("[get_hashtag_events] failed", String(e));
+			return [];
+		}
+	}
+
+	public async get_group_events(
+		contacts: string[],
+		limit: number,
+		asOf?: number,
+	) {
+		try {
+			const until: string = asOf && asOf > 0 ? asOf.toString() : undefined;
+			const nostrEvents: Event[] = await invoke("get_group_events", {
+				list: contacts,
+				limit,
+				until,
+			});
+			const events = this.dedup_events(nostrEvents);
+
+			return events;
+		} catch (e) {
+			console.error("[get_group_events] failed", String(e));
+			return [];
+		}
+	}
+
+	public async get_events_by(pubkey: string, limit: number, asOf?: number) {
+		try {
+			const until: string = asOf && asOf > 0 ? asOf.toString() : undefined;
+			const nostrEvents: Event[] = await invoke("get_events_by", {
+				publicKey: pubkey,
+				limit,
+				as_of: until,
+			});
+
+			return nostrEvents.sort((a, b) => b.created_at - a.created_at);
+		} catch (e) {
+			console.error("[get_events_by] failed", String(e));
+			return [];
+		}
+	}
+
+	public async publish(
+		content: string,
+		reply_to?: string,
+		quote?: boolean,
+		nsfw?: boolean,
+	) {
+		try {
+			const g = await generateContentTags(content);
+
+			const eventContent = g.content;
+			const eventTags = g.tags;
+
+			if (reply_to) {
+				const replyEvent = await this.get_event(reply_to);
+				const relayHint =
+					replyEvent.tags.find((ev) => ev[0] === "e")?.[0][2] ?? "";
+
+				if (quote) {
+					eventTags.push(["e", replyEvent.id, relayHint, "mention"]);
+					eventTags.push(["q", replyEvent.id]);
+				} else {
+					const rootEvent = replyEvent.tags.find((ev) => ev[3] === "root");
+
+					if (rootEvent) {
+						eventTags.push([
+							"e",
+							rootEvent[1],
+							rootEvent[2] || relayHint,
+							"root",
+						]);
+					}
+
+					eventTags.push(["e", replyEvent.id, relayHint, "reply"]);
+					eventTags.push(["p", replyEvent.pubkey]);
+				}
+			}
+
+			if (nsfw) {
+				eventTags.push(["L", "content-warning"]);
+				eventTags.push(["l", "reason", "content-warning"]);
+				eventTags.push(["content-warning", "nsfw"]);
+			}
+
+			const cmd: string = await invoke("publish", {
+				content: eventContent,
+				tags: eventTags,
+			});
+
+			return cmd;
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async reply_to(content: string, tags: string[]) {
+		try {
+			const cmd: string = await invoke("reply_to", { content, tags });
+			return cmd;
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async repost(id: string, author: string) {
+		try {
+			const cmd: string = await invoke("repost", { id, pubkey: author });
+			return cmd;
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async get_event_thread(id: string) {
+		try {
+			const events: EventWithReplies[] = await invoke("get_thread", {
+				id,
+			});
+
+			if (events.length > 0) {
+				const replies = new Set();
+				for (const event of events) {
+					const tags = event.tags.filter(
+						(el) => el[0] === "e" && el[1] !== id && el[3] !== "mention",
+					);
+					if (tags.length > 0) {
+						for (const tag of tags) {
+							const rootIndex = events.findIndex((el) => el.id === tag[1]);
+							if (rootIndex !== -1) {
+								const rootEvent = events[rootIndex];
+								if (rootEvent?.replies) {
+									rootEvent.replies.push(event);
+								} else {
+									rootEvent.replies = [event];
+								}
+								replies.add(event.id);
+							}
+						}
+					}
+				}
+				const cleanEvents = events.filter((ev) => !replies.has(ev.id));
+				return cleanEvents;
+			}
+
+			return events;
+		} catch (e) {
+			return [];
+		}
+	}
+
+	public get_thread(tags: string[][], gossip: boolean = false) {
+		let root: string = null;
+		let reply: string = null;
+
+		// Get all event references from tags, ignore mention
+		const events = tags.filter((el) => el[0] === "e" && el[3] !== "mention");
+
+		if (gossip) {
+			const relays = tags.filter((el) => el[0] === "e" && el[2]?.length);
+
+			if (relays.length >= 1) {
+				for (const relay of relays) {
+					if (relay[2]?.length) this.add_relay(relay[2]);
+				}
+			}
+		}
+
+		if (events.length === 1) {
+			root = events[0][1];
+		}
+
+		if (events.length > 1) {
+			root = events.find((el) => el[3] === "root")?.[1] ?? events[0][1];
+			reply = events.find((el) => el[3] === "reply")?.[1] ?? events[1][1];
+		}
+
+		// Fix some rare case when root === reply
+		if (root && reply && root === reply) {
+			reply = null;
+		}
+
+		return {
+			root,
+			reply,
+		};
+	}
+
+	public async get_profile(pubkey: string) {
+		try {
+			const id = pubkey.replace("nostr:", "").replace(/[^\w\s]/gi, "");
+			const cmd: Metadata = await invoke("get_profile", { id });
+
+			return cmd;
+		} catch (e) {
+			console.error(pubkey, String(e));
+			return null;
+		}
+	}
+
+	public async get_current_user_profile() {
+		try {
+			const cmd: Metadata = await invoke("get_current_user_profile");
+			return cmd;
+		} catch {
+			return null;
+		}
+	}
+
+	public async create_profile(profile: Metadata) {
+		try {
+			const event: string = await invoke("create_profile", {
+				name: profile.name || "",
+				display_name: profile.display_name || "",
+				displayName: profile.display_name || "",
+				about: profile.about || "",
+				picture: profile.picture || "",
+				banner: profile.banner || "",
+				nip05: profile.nip05 || "",
+				lud16: profile.lud16 || "",
+				website: profile.website || "",
+			});
+			return event;
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async set_contact_list(pubkeys: string[]) {
+		try {
+			const cmd: boolean = await invoke("set_contact_list", { pubkeys });
+			return cmd;
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async get_contact_list() {
+		try {
+			const cmd: string[] = await invoke("get_contact_list");
+			return cmd;
+		} catch (e) {
+			console.error(e);
+			return [];
+		}
+	}
+
+	public async follow(id: string, alias?: string) {
+		try {
+			const cmd: string = await invoke("follow", { id, alias });
+			return cmd;
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async unfollow(id: string) {
+		try {
+			const cmd: string = await invoke("unfollow", { id });
+			return cmd;
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async user_to_bech32(key: string, relays: string[]) {
+		try {
+			const cmd: string = await invoke("user_to_bech32", {
+				key,
+				relays,
+			});
+			return cmd;
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async verify_nip05(pubkey: string, nip05: string) {
+		try {
+			const cmd: boolean = await invoke("verify_nip05", {
+				key: pubkey,
+				nip05,
+			});
+			return cmd;
+		} catch {
+			return false;
+		}
+	}
+
+	public async set_nwc(uri: string) {
+		try {
+			const cmd: boolean = await invoke("set_nwc", { uri });
+			return cmd;
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async load_nwc() {
+		try {
+			const cmd: boolean = await invoke("load_nwc");
+			return cmd;
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async get_balance() {
+		try {
+			const cmd: number = await invoke("get_balance");
+			return cmd;
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async zap_profile(id: string, amount: number, message: string) {
+		try {
+			const cmd: boolean = await invoke("zap_profile", { id, amount, message });
+			return cmd;
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async zap_event(id: string, amount: number, message: string) {
+		try {
+			const cmd: boolean = await invoke("zap_event", { id, amount, message });
+			return cmd;
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async upload(filePath?: string) {
+		const allowExts = [
+			"png",
+			"jpeg",
+			"jpg",
+			"gif",
+			"mp4",
+			"mp3",
+			"webm",
+			"mkv",
+			"avi",
+			"mov",
+		];
+
+		const selected =
+			filePath ||
+			(
+				await open({
+					multiple: false,
+					filters: [
+						{
+							name: "Media",
+							extensions: allowExts,
+						},
+					],
+				})
+			).path;
+
+		// User cancelled action
+		if (!selected) return null;
+
+		try {
+			const file = await readFile(selected);
+			const blob = new Blob([file]);
+
+			const data = new FormData();
+			data.append("fileToUpload", blob);
+			data.append("submit", "Upload Image");
+
+			const res = await fetch("https://nostr.build/api/v2/upload/files", {
+				method: "POST",
+				body: data,
+			});
+
+			if (!res.ok) return null;
+
+			const json = await res.json();
+			const content = json.data[0];
+
+			return content.url as string;
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async get_columns() {
+		try {
+			const cmd: string = await invoke("get_nstore", {
+				key: NSTORE_KEYS.columns,
+			});
+			const columns: LumeColumn[] = cmd ? JSON.parse(cmd) : [];
+			return columns;
+		} catch {
+			return [];
+		}
+	}
+
+	public async set_columns(columns: LumeColumn[]) {
+		try {
+			const cmd: string = await invoke("set_nstore", {
+				key: NSTORE_KEYS.columns,
+				content: JSON.stringify(columns),
+			});
+			return cmd;
+		} catch (e) {
+			throw new Error(e);
+		}
+	}
+
+	public async get_settings() {
+		try {
+			if (this.settings) return this.settings;
+
+			const cmd: string = await invoke("get_nstore", {
+				key: NSTORE_KEYS.settings,
+			});
+			const settings: Settings = cmd ? JSON.parse(cmd) : null;
+
+			this.settings = settings;
+
+			return settings;
+		} catch {
+			const defaultSettings: Settings = {
+				autoUpdate: false,
+				enhancedPrivacy: false,
+				notification: false,
+				zap: false,
+				nsfw: false,
+			};
+			this.settings = defaultSettings;
+			return defaultSettings;
+		}
+	}
+
+	public async set_settings(settings: Settings) {
+		try {
+			const cmd: string = await invoke("set_nstore", {
+				key: NSTORE_KEYS.settings,
+				content: JSON.stringify(settings),
+			});
+			return cmd;
+		} catch (e) {
+			throw new Error(e);
+		}
+	}
+
+	public async get_nstore(key: string) {
+		try {
+			const cmd: string = await invoke("get_nstore", {
+				key,
+			});
+			const parse: string | string[] = cmd ? JSON.parse(cmd) : null;
+			if (!parse.length) return null;
+			return parse;
+		} catch {
+			return null;
+		}
+	}
+
+	public async set_nstore(key: string, content: string) {
+		try {
+			const cmd: string = await invoke("set_nstore", {
+				key,
+				content,
+			});
+			return cmd;
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async open_event_id(id: string) {
+		try {
+			const label = `event-${id}`;
+			const url = `/events/${id}`;
+
+			await invoke("open_window", {
+				label,
+				title: "Thread",
+				url,
+				width: 500,
+				height: 800,
+			});
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async open_event(event: Event) {
+		try {
+			let root: string = undefined;
+			let reply: string = undefined;
+
+			const eTags = event.tags.filter(
+				(tag) => tag[0] === "e" || tag[0] === "q",
+			);
+
+			root = eTags.find((el) => el[3] === "root")?.[1];
+			reply = eTags.find((el) => el[3] === "reply")?.[1];
+
+			if (!root) root = eTags[0]?.[1];
+			if (!reply) reply = eTags[1]?.[1];
+
+			const label = `event-${event.id}`;
+			const url = `/events/${root ?? reply ?? event.id}`;
+
+			await invoke("open_window", {
+				label,
+				title: "Thread",
+				url,
+				width: 500,
+				height: 800,
+			});
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async open_profile(pubkey: string) {
+		try {
+			const label = `user-${pubkey}`;
+			await invoke("open_window", {
+				label,
+				title: "Profile",
+				url: `/users/${pubkey}`,
+				width: 500,
+				height: 800,
+			});
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async open_editor(reply_to?: string, quote = false) {
+		try {
+			let url: string;
+
+			if (reply_to) {
+				url = `/editor?reply_to=${reply_to}&quote=${quote}`;
+			} else {
+				url = "/editor";
+			}
+
+			const label = `editor-${reply_to ? reply_to : 0}`;
+
+			await invoke("open_window", {
+				label,
+				title: "Editor",
+				url,
+				width: 560,
+				height: 340,
+			});
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async open_nwc() {
+		try {
+			const label = "nwc";
+			await invoke("open_window", {
+				label,
+				title: "Nostr Wallet Connect",
+				url: "/nwc",
+				width: 400,
+				height: 600,
+			});
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async open_zap(id: string, pubkey: string, account: string) {
+		try {
+			const label = `zap-${id}`;
+			await invoke("open_window", {
+				label,
+				title: "Zap",
+				url: `/zap/${id}?pubkey=${pubkey}&account=${account}`,
+				width: 400,
+				height: 500,
+			});
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async open_settings() {
+		try {
+			const label = "settings";
+			await invoke("open_window", {
+				label,
+				title: "Settings",
+				url: "/settings",
+				width: 800,
+				height: 500,
+			});
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async open_search() {
+		try {
+			const label = "search";
+			await invoke("open_window", {
+				label,
+				title: "Search",
+				url: "/search",
+				width: 400,
+				height: 600,
+			});
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async open_activity(account: string) {
+		try {
+			const label = "activity";
+			await invoke("open_window", {
+				label,
+				title: "Activity",
+				url: `/activity/${account}/texts`,
+				width: 400,
+				height: 600,
+			});
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
 }
diff --git a/packages/types/index.d.ts b/packages/types/index.d.ts
index 53822653..27092107 100644
--- a/packages/types/index.d.ts
+++ b/packages/types/index.d.ts
@@ -65,6 +65,12 @@ export interface Account {
 	interests?: Interests;
 }
 
+export interface Topic {
+	icon: string;
+	title: string;
+	content: string[];
+}
+
 export interface Interests {
 	hashtags: string[];
 	users: string[];
diff --git a/packages/utils/src/constants.ts b/packages/utils/src/constants.ts
index 366efc50..999311e2 100644
--- a/packages/utils/src/constants.ts
+++ b/packages/utils/src/constants.ts
@@ -1,11 +1,3 @@
-export const FETCH_LIMIT = 20;
-
-export const LANGUAGES = [
-	{ label: "English", code: "en" },
-	{ label: "Japanese", code: "ja" },
-	{ label: "Français", code: "fr" },
-];
-
 export const NOSTR_MENTIONS = [
 	"@npub1",
 	"nostr:npub1",
@@ -32,8 +24,6 @@ export const NOSTR_EVENTS = [
 	"Nostr:nevent1",
 ];
 
-export const BITCOINS = ["lnbc", "bc1p", "bc1q"];
-
 export const IMAGES = ["jpg", "jpeg", "gif", "png", "webp", "avif", "tiff"];
 
 export const VIDEOS = [
@@ -51,61 +41,48 @@ export const VIDEOS = [
 
 export const AUDIOS = ["mp3", "ogg", "wav"];
 
-export const COL_TYPES = {
-	default: 0,
-	user: 1,
-	thread: 2,
-	hashtag: 3,
-	group: 4,
-	antenas: 5,
-	global: 6,
-	trendingNotes: 9000,
-	waifu: 9001,
-	foryou: 9998,
-	newsfeed: 9999,
-};
-
 export const TOPICS = [
 	{
-		icon: "/anime.jpg",
-		title: "Anime & Manga",
+		icon: "📱",
+		title: "Technology",
 		content: [
-			"#animestr",
-			"#anime",
-			"#manga",
-			"#otaku",
-			"#frieren",
-			"#fate",
-			"#aot",
-			"#AttackOnTitan",
-			"#JujutsuKaisen",
-			"#OnePiece",
-			"#KimetsuNoYaiba",
-			"#Overlord",
-			"#Evangelion",
-			"#DemonSlayer",
-			"#JoJo",
-			"#SPYxFAMILY",
-			"#MatoSeiheinoSlave",
-			"#ghibli",
-			"#ChainsawMan",
-			"#Gintama",
-			"#animeart",
-			"#animegirl",
-			"#cosplay",
-			"#weeb",
-			"#animeworld",
-			"#fanart",
-			"#vocaloid",
-			"#vtuber",
-			"#hololive",
-			"#hololivemeet",
-			"#pixiv",
-			"#waifu",
+			"#Apple",
+			"#Tesla",
+			"#AMD",
+			"#Intel",
+			"#Xiaomi",
+			"#Huawei",
+			"#OpenAI",
+			"#BigTech",
+			"#ai",
+			"#IOS",
+			"#Android",
+			"#oppo",
+			"#nostr",
+			"#technology",
+			"#tech",
+			"#innovation",
+			"#engineering",
+			"#business",
+			"#iphone",
+			"#technews",
+			"#science",
+			"#gadgets",
+			"#software",
+			"#programming",
+			"#smartphone",
+			"#samsung",
+			"#coding",
+			"#computer",
+			"#security",
+			"#gadget",
+			"#mobile",
+			"#opensource",
+			"#tor",
 		],
 	},
 	{
-		icon: "/gaming.jpg",
+		icon: "🕹",
 		title: "Gaming",
 		content: [
 			"#gamestr",
@@ -163,8 +140,46 @@ export const TOPICS = [
 		],
 	},
 	{
-		icon: "/music.jpg",
-		title: "Music & Entertainment",
+		icon: "🍥",
+		title: "Anime",
+		content: [
+			"#animestr",
+			"#anime",
+			"#manga",
+			"#otaku",
+			"#frieren",
+			"#fate",
+			"#aot",
+			"#AttackOnTitan",
+			"#JujutsuKaisen",
+			"#OnePiece",
+			"#KimetsuNoYaiba",
+			"#Overlord",
+			"#Evangelion",
+			"#DemonSlayer",
+			"#JoJo",
+			"#SPYxFAMILY",
+			"#MatoSeiheinoSlave",
+			"#ghibli",
+			"#ChainsawMan",
+			"#Gintama",
+			"#animeart",
+			"#animegirl",
+			"#cosplay",
+			"#weeb",
+			"#animeworld",
+			"#fanart",
+			"#vocaloid",
+			"#vtuber",
+			"#hololive",
+			"#hololivemeet",
+			"#pixiv",
+			"#waifu",
+		],
+	},
+	{
+		icon: "📺",
+		title: "Entertainment",
 		content: [
 			"#audiostr",
 			"#musicstr",
@@ -208,12 +223,6 @@ export const TOPICS = [
 			"#dvd",
 			"#amass",
 			"#bluray",
-		],
-	},
-	{
-		icon: "/movie.jpg",
-		title: "Television",
-		content: [
 			"#filmstr",
 			"#moviestr",
 			"#movies",
@@ -244,46 +253,7 @@ export const TOPICS = [
 		],
 	},
 	{
-		icon: "/technology.jpg",
-		title: "Technology",
-		content: [
-			"#Apple",
-			"#Tesla",
-			"#AMD",
-			"#Intel",
-			"#Xiaomi",
-			"#Huawei",
-			"#OpenAI",
-			"#BigTech",
-			"#ai",
-			"#IOS",
-			"#Android",
-			"#oppo",
-			"#nostr",
-			"#technology",
-			"#tech",
-			"#innovation",
-			"#engineering",
-			"#business",
-			"#iphone",
-			"#technews",
-			"#science",
-			"#gadgets",
-			"#software",
-			"#programming",
-			"#smartphone",
-			"#samsung",
-			"#coding",
-			"#computer",
-			"#security",
-			"#gadget",
-			"#mobile",
-			"#opensource",
-			"#tor",
-		],
-	},
-	{
-		icon: "/photography.jpg",
+		icon: "📷",
 		title: "Photography",
 		content: [
 			"#photostr",
@@ -309,8 +279,8 @@ export const TOPICS = [
 		],
 	},
 	{
-		icon: "/art.jpg",
-		title: "Art & Design",
+		icon: "🧑‍🎨",
+		title: "Design",
 		content: [
 			"#nostrdesign",
 			"#artstr",
@@ -343,7 +313,7 @@ export const TOPICS = [
 		],
 	},
 	{
-		icon: "/nsfw.jpg",
+		icon: "🔞",
 		title: "NSFW",
 		content: [
 			"#pornstr",
@@ -365,20 +335,5 @@ export const TOPICS = [
 	},
 ];
 
-export const QUOTES = [
-	"You can learn more about nostr here: https://usenostr.org",
-	"Nostr has a lot of awesome clients, you can spend a bit of time to try https://snort.social",
-	"Nostr has a lot of awesome clients, you can spend a bit of time to try https://iris.to",
-	"Nostr has a lot of awesome clients, you can spend a bit of time to try https://primal.net",
-	"Nostr has a lot of awesome clients, you can spend a bit of time to try https://nostrudel.ninja",
-	"If you're using iOS, you can use Nostr with https://damus.io",
-	"If you're using Android, you can use Nostr with Amethyst",
-	"If you want to curate and share your interests on Nostr, you can use https://pinstr.app",
-	"If you want to post anonymously on Nostr, you can use https://www.get-tao.app",
-	"If you want to read in-depth content and high quality insights, you can use https://habla.news",
-	"You can send secure messages on Nostr with https://0xchat.com/",
-	"Are you a fan of following topics, instead of people? Use https://zapddit.com",
-];
-
 // @ts-ignore, it works
 export const VITE_FLATPAK_RESOURCE = import.meta.env.VITE_FLATPAK_RESOURCE;
diff --git a/src-tauri/resources/official_columns.json b/src-tauri/resources/official_columns.json
index 3c783373..5c6261cc 100644
--- a/src-tauri/resources/official_columns.json
+++ b/src-tauri/resources/official_columns.json
@@ -7,12 +7,12 @@
     "cover": "/newsfeed.png",
     "coverRetina": "/newsfeed@2x.png",
     "author": "Lume",
-    "description": "Keep up to date with people you're following."
+    "description": "Keep up to date with the people you're following."
   },
   {
     "label": "rRtguZwIpd5G8Wt54OTb7",
-    "name": "For you",
-    "content": "/foryou",
+    "name": "Topic",
+    "content": "/topic",
     "logo": "",
     "cover": "/foryou.png",
     "coverRetina": "/foryou@2x.png",
@@ -21,13 +21,13 @@
   },
   {
     "label": "fve9fk2fVyFWORPBkjd79",
-    "name": "Group Feeds",
+    "name": "Group",
     "content": "/group",
     "logo": "",
     "cover": "/group.png",
     "coverRetina": "/group@2x.png",
     "author": "Lume",
-    "description": "Collective of people you're interested in."
+    "description": "Focus feeds for people you like."
   },
   {
     "label": "gxtcIbgD8YNPbeI5o92I8",
diff --git a/src-tauri/resources/system_columns.json b/src-tauri/resources/system_columns.json
index 032e9c35..c4aec44d 100644
--- a/src-tauri/resources/system_columns.json
+++ b/src-tauri/resources/system_columns.json
@@ -1,4 +1,7 @@
 [
   { "label": "onboarding", "name": "Onboarding", "content": "/onboarding" },
+  { "label": "lume_newsfeed", "name": "Newsfeed", "content": "/newsfeed" },
+  { "label": "lume_topic", "name": "Topic", "content": "/topic" },
+  { "label": "lume_group", "name": "Group", "content": "/group" },
   { "label": "open", "name": "Open", "content": "/open" }
 ]
diff --git a/src-tauri/src/commands/window.rs b/src-tauri/src/commands/window.rs
index d3942804..34d0158d 100644
--- a/src-tauri/src/commands/window.rs
+++ b/src-tauri/src/commands/window.rs
@@ -153,7 +153,8 @@ pub fn open_window(
       .build()
       .unwrap();
 
-    // Create a custom titlebar
+    #[cfg(target_os = "windows")]
+    // Create a custom titlebar for Windows
     window.create_overlay_titlebar().unwrap();
 
     // Set a custom inset to the traffic lights
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 2f50a9d7..f2cd87f2 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -26,8 +26,10 @@ pub struct Nostr {
 fn main() {
   tauri::Builder::default()
     .setup(|app| {
-      // Create a custom titlebar for main window
       let main_window = app.get_webview_window("main").unwrap();
+
+      // Create a custom titlebar for Windows
+      #[cfg(target_os = "windows")]
       main_window.create_overlay_titlebar().unwrap();
 
       // Set a custom inset to the traffic lights
@@ -115,6 +117,7 @@ fn main() {
       nostr::metadata::get_current_user_profile,
       nostr::metadata::get_profile,
       nostr::metadata::get_contact_list,
+      nostr::metadata::set_contact_list,
       nostr::metadata::create_profile,
       nostr::metadata::follow,
       nostr::metadata::unfollow,
diff --git a/src-tauri/src/nostr/event.rs b/src-tauri/src/nostr/event.rs
index 6bda3546..47d9c6fd 100644
--- a/src-tauri/src/nostr/event.rs
+++ b/src-tauri/src/nostr/event.rs
@@ -97,6 +97,7 @@ pub async fn get_events_by(
 
 #[tauri::command]
 pub async fn get_local_events(
+  pubkeys: Vec<String>,
   limit: usize,
   until: Option<&str>,
   state: State<'_, Nostr>,
@@ -106,26 +107,21 @@ pub async fn get_local_events(
     Some(until) => Timestamp::from_str(until).unwrap(),
     None => Timestamp::now(),
   };
+  let authors: Vec<PublicKey> = pubkeys
+    .into_iter()
+    .map(|p| PublicKey::from_hex(p).unwrap())
+    .collect();
+  let filter = Filter::new()
+    .kinds(vec![Kind::TextNote, Kind::Repost])
+    .limit(limit)
+    .authors(authors)
+    .until(as_of);
 
   match client
-    .get_contact_list_public_keys(Some(Duration::from_secs(10)))
+    .get_events_of(vec![filter], Some(Duration::from_secs(8)))
     .await
   {
-    Ok(contacts) => {
-      let filter = Filter::new()
-        .kinds(vec![Kind::TextNote, Kind::Repost])
-        .limit(limit)
-        .authors(contacts)
-        .until(as_of);
-
-      match client
-        .get_events_of(vec![filter], Some(Duration::from_secs(8)))
-        .await
-      {
-        Ok(events) => Ok(events),
-        Err(err) => Err(err.to_string()),
-      }
-    }
+    Ok(events) => Ok(events),
     Err(err) => Err(err.to_string()),
   }
 }
diff --git a/src-tauri/src/nostr/metadata.rs b/src-tauri/src/nostr/metadata.rs
index a486c058..3718f0c5 100644
--- a/src-tauri/src/nostr/metadata.rs
+++ b/src-tauri/src/nostr/metadata.rs
@@ -182,19 +182,38 @@ pub async fn get_profile(id: &str, state: State<'_, Nostr>) -> Result<Metadata,
   }
 }
 
+#[tauri::command]
+pub async fn set_contact_list(pubkeys: Vec<&str>, state: State<'_, Nostr>) -> Result<bool, String> {
+  let client = &state.client;
+  let contact_list: Vec<Contact> = pubkeys
+    .into_iter()
+    .map(|p| Contact::new(PublicKey::from_hex(p).unwrap(), None, Some("")))
+    .collect();
+
+  match client.set_contact_list(contact_list).await {
+    Ok(_) => Ok(true),
+    Err(err) => Err(err.to_string()),
+  }
+}
+
 #[tauri::command]
 pub async fn get_contact_list(state: State<'_, Nostr>) -> Result<Vec<String>, String> {
   let client = &state.client;
 
-  if let Ok(contact_list) = client.get_contact_list(Some(Duration::from_secs(10))).await {
-    let list = contact_list
-      .into_iter()
-      .map(|f| f.public_key.to_hex())
-      .collect();
+  match client.get_contact_list(Some(Duration::from_secs(10))).await {
+    Ok(contact_list) => {
+      if !contact_list.is_empty() {
+        let list = contact_list
+          .into_iter()
+          .map(|f| f.public_key.to_hex())
+          .collect();
 
-    Ok(list)
-  } else {
-    Err("Contact list not found".into())
+        Ok(list)
+      } else {
+        Err("Empty.".into())
+      }
+    }
+    Err(err) => Err(err.to_string()),
   }
 }