Merge pull request #175 from lumehq/v4/beta

Prepare for v4 - beta
2025-08-02 13:02:28 +02:00 · 2024-04-11 07:45:43 +07:00
parent 1de48cc640 bda20e8fe8
commit d98c6d0709
275 changed files with 7178 additions and 8176 deletions
--- a/apps/desktop2/index.html
+++ b/apps/desktop2/index.html
@@ -6,7 +6,7 @@
    <title>Lume Desktop</title>
  </head>
  <body
-    class="relative h-screen w-screen cursor-default select-none overflow-hidden bg-white font-sans text-black antialiased dark:bg-black dark:text-white"
+    class="relative h-screen w-screen cursor-default select-none overflow-hidden font-sans text-black antialiased dark:text-white"
  >
    <div id="root" class="h-full w-full"></div>
    <script type="module" src="/src/app.tsx"></script>
--- a/apps/desktop2/package.json
+++ b/apps/desktop2/package.json
@@ -18,37 +18,43 @@
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-popover": "^1.0.7",
-    "@tanstack/query-sync-storage-persister": "^5.24.1",
-    "@tanstack/react-query": "^5.24.1",
-    "@tanstack/react-query-persist-client": "^5.24.1",
-    "@tanstack/react-router": "^1.18.1",
-    "i18next": "^23.10.0",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@tanstack/query-sync-storage-persister": "^5.29.0",
+    "@tanstack/react-query": "^5.29.0",
+    "@tanstack/react-query-persist-client": "^5.29.0",
+    "@tanstack/react-router": "^1.26.18",
+    "i18next": "^23.11.1",
    "i18next-resources-to-backend": "^1.2.0",
-    "nostr-tools": "^2.3.1",
+    "minidenticons": "^4.2.1",
+    "nanoid": "^5.0.7",
+    "nostr-tools": "^2.4.0",
    "react": "^18.2.0",
    "react-currency-input-field": "^3.8.0",
    "react-dom": "^18.2.0",
-    "react-i18next": "^14.0.5",
-    "slate": "^0.101.5",
-    "slate-react": "^0.101.6",
-    "sonner": "^1.4.3",
-    "virtua": "^0.27.5"
+    "react-hook-form": "^7.51.2",
+    "react-hotkeys-hook": "^4.5.0",
+    "react-i18next": "^14.1.0",
+    "slate": "^0.102.0",
+    "slate-react": "^0.102.0",
+    "sonner": "^1.4.41",
+    "use-debounce": "^10.0.0",
+    "virtua": "^0.29.2"
  },
  "devDependencies": {
    "@lume/tailwindcss": "workspace:^",
    "@lume/tsconfig": "workspace:^",
    "@lume/types": "workspace:^",
-    "@tanstack/router-devtools": "^1.18.1",
-    "@tanstack/router-vite-plugin": "^1.18.1",
-    "@types/react": "^18.2.61",
-    "@types/react-dom": "^18.2.19",
+    "@tanstack/router-devtools": "^1.26.18",
+    "@tanstack/router-vite-plugin": "^1.26.16",
+    "@types/react": "^18.2.75",
+    "@types/react-dom": "^18.2.24",
    "@vitejs/plugin-react-swc": "^3.6.0",
-    "autoprefixer": "^10.4.18",
-    "postcss": "^8.4.35",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.4",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.4",
+    "vite": "^5.2.8",
    "vite-plugin-top-level-await": "^1.4.1",
-    "vite-tsconfig-paths": "^4.3.1"
+    "vite-tsconfig-paths": "^4.3.2"
  }
 }
--- a/apps/desktop2/public/anime.jpg
+++ b/apps/desktop2/public/anime.jpg
--- a/apps/desktop2/public/antenas.png
+++ b/apps/desktop2/public/antenas.png
--- a/apps/desktop2/public/antenas@2x.png
+++ b/apps/desktop2/public/antenas@2x.png
--- a/apps/desktop2/public/art.jpg
+++ b/apps/desktop2/public/art.jpg
--- a/apps/desktop2/public/foryou.png
+++ b/apps/desktop2/public/foryou.png
--- a/apps/desktop2/public/foryou@2x.png
+++ b/apps/desktop2/public/foryou@2x.png
--- a/apps/desktop2/public/gaming.jpg
+++ b/apps/desktop2/public/gaming.jpg
--- a/apps/desktop2/public/global.png
+++ b/apps/desktop2/public/global.png
--- a/apps/desktop2/public/global@2x.png
+++ b/apps/desktop2/public/global@2x.png
--- a/apps/desktop2/public/group.png
+++ b/apps/desktop2/public/group.png
--- a/apps/desktop2/public/group@2x.png
+++ b/apps/desktop2/public/group@2x.png
--- a/apps/desktop2/public/movie.jpg
+++ b/apps/desktop2/public/movie.jpg
--- a/apps/desktop2/public/music.jpg
+++ b/apps/desktop2/public/music.jpg
--- a/apps/desktop2/public/nsfw.jpg
+++ b/apps/desktop2/public/nsfw.jpg
--- a/apps/desktop2/public/photography.jpg
+++ b/apps/desktop2/public/photography.jpg
--- a/apps/desktop2/public/technology.jpg
+++ b/apps/desktop2/public/technology.jpg
--- a/apps/desktop2/public/trending.png
+++ b/apps/desktop2/public/trending.png
--- a/apps/desktop2/public/trending@2x.png
+++ b/apps/desktop2/public/trending@2x.png
--- a/apps/desktop2/public/waifu.png
+++ b/apps/desktop2/public/waifu.png
--- a/apps/desktop2/public/waifu@2x.png
+++ b/apps/desktop2/public/waifu@2x.png
--- a/apps/desktop2/src/app.css
+++ b/apps/desktop2/src/app.css
@@ -7,13 +7,39 @@
 }

 *::-webkit-scrollbar-track {
-  @apply bg-white dark:bg-black;
+  @apply bg-transparent;
 }

 *::-webkit-scrollbar-thumb {
-  @apply bg-black dark:bg-white rounded;
+  @apply rounded bg-black dark:bg-white;
 }

+@layer utilities {
+  .content-break {
+    word-break: break-word;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+
+  .shadow-toolbar {
+    box-shadow:
+      0 0 #0000,
+      0 0 #0000,
+      0 8px 24px 0 rgba(0, 0, 0, 0.2),
+      0 2px 8px 0 rgba(0, 0, 0, 0.08),
+      inset 0 0 0 1px rgba(0, 0, 0, 0.2),
+      inset 0 0 0 2px hsla(0, 0%, 100%, 0.14);
+  }
+
+  .shadow-primary {
+    box-shadow: 0px 0px 4px rgba(66, 65, 73, 0.14);
+  }
+}
+
+/*
+	Overide some default styles
+*/
+
 html {
  font-size: 14px;
 }
@@ -34,25 +60,3 @@ input::-ms-clear {
 ::-webkit-input-placeholder {
  line-height: normal;
 }
-
-media-controller {
-  @apply w-full overflow-hidden rounded-xl;
-}
-
-@layer utilities {
-  .content-break {
-    word-break: break-word;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-  }
-
-  .shadow-toolbar {
-    box-shadow:
-      0 0 #0000,
-      0 0 #0000,
-      0 8px 24px 0 rgba(0, 0, 0, 0.2),
-      0 2px 8px 0 rgba(0, 0, 0, 0.08),
-      inset 0 0 0 1px rgba(0, 0, 0, 0.2),
-      inset 0 0 0 2px hsla(0, 0%, 100%, 0.14);
-  }
-}
--- a/apps/desktop2/src/app.tsx
+++ b/apps/desktop2/src/app.tsx
@@ -1,5 +1,3 @@
-import { useArk } from "@lume/ark";
-import { ArkProvider } from "./ark";
 import { QueryClient } from "@tanstack/react-query";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import React, { StrictMode } from "react";
@@ -8,11 +6,11 @@ import { I18nextProvider } from "react-i18next";
 import "./app.css";
 import i18n from "./locale";
 import { Toaster } from "sonner";
-import { locale, platform } from "@tauri-apps/plugin-os";
 import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
 import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
 import { routeTree } from "./router.gen"; // auto generated file
 import { CancelCircleIcon, CheckCircleIcon, InfoCircleIcon } from "@lume/icons";
+import { Ark } from "@lume/ark";

 const queryClient = new QueryClient({
  defaultOptions: {
@@ -27,16 +25,13 @@ const persister = createSyncStoragePersister({
  storage: window.localStorage,
 });

-const platformName = await platform();
-const osLocale = (await locale()).slice(0, 2);
+const ark = new Ark();

 // Set up a Router instance
 const router = createRouter({
  routeTree,
  context: {
-    ark: undefined!,
-    platform: platformName,
-    locale: osLocale,
+    ark,
    queryClient,
  },
 });
@@ -48,17 +43,8 @@ declare module "@tanstack/react-router" {
  }
 }

-function InnerApp() {
-  const ark = useArk();
-  return <RouterProvider router={router} context={{ ark }} />;
-}
-
 function App() {
-  return (
-    <ArkProvider>
-      <InnerApp />
-    </ArkProvider>
-  );
+  return <RouterProvider router={router} />;
 }

 // biome-ignore lint/style/noNonNullAssertion: idk
--- a/apps/desktop2/src/ark.tsx
+++ b/apps/desktop2/src/ark.tsx
@@ -1,7 +0,0 @@
-import { Ark, ArkContext } from "@lume/ark";
-import { PropsWithChildren, useMemo } from "react";
-
-export const ArkProvider = ({ children }: PropsWithChildren<object>) => {
-  const ark = useMemo(() => new Ark(), []);
-  return <ArkContext.Provider value={ark}>{children}</ArkContext.Provider>;
-};
--- a/apps/desktop2/src/components/accounts.tsx
+++ b/apps/desktop2/src/components/accounts.tsx
@@ -1,15 +1,14 @@
-import { useArk } from "@lume/ark";
 import { Account } from "@lume/types";
 import { User } from "@lume/ui";
-import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
+import {
+  useNavigate,
+  useParams,
+  useRouteContext,
+} from "@tanstack/react-router";
 import { useEffect, useState } from "react";
-import * as Popover from "@radix-ui/react-popover";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { BackupDialog } from "./backup";
-import { LoginDialog } from "./login";

 export function Accounts() {
-  const ark = useArk();
+  const { ark } = useRouteContext({ strict: false });
  const params = useParams({ strict: false });

  const [accounts, setAccounts] = useState<Account[]>(null);
@@ -24,7 +23,7 @@ export function Accounts() {
  }, []);

  return (
-    <div data-tauri-drag-region className="flex items-center gap-4">
+    <div data-tauri-drag-region className="flex items-center gap-3">
      {accounts
        ? accounts.map((account) =>
            // @ts-ignore, useless
@@ -40,13 +39,12 @@ export function Accounts() {
 }

 function Inactive({ pubkey }: { pubkey: string }) {
-  const ark = useArk();
+  const { ark } = useRouteContext({ strict: false });
  const navigate = useNavigate();

  const changeAccount = async (npub: string) => {
    const select = await ark.load_selected_account(npub);
-    if (select)
-      navigate({ to: "/$account/home/local", params: { account: npub } });
+    if (select) navigate({ to: "/$account/home", params: { account: npub } });
  };

  return (
@@ -61,91 +59,11 @@ function Inactive({ pubkey }: { pubkey: string }) {
 }

 function Active({ pubkey }: { pubkey: string }) {
-  const ark = useArk();
-  const navigate = useNavigate();
-
-  // @ts-ignore, magic !!!
-  const { guest } = useSearch({ strict: false });
-  // @ts-ignore, magic !!!
-  const { account } = useParams({ strict: false });
-
-  if (guest) {
-    return (
-      <Popover.Root open={true}>
-        <Popover.Trigger asChild>
-          <button type="button">
-            <User.Provider pubkey={pubkey}>
-              <User.Root className="rounded-full ring-1 ring-teal-500 ring-offset-2 ring-offset-neutral-200 dark:ring-offset-neutral-950">
-                <User.Avatar className="aspect-square h-auto w-7 rounded-full object-cover" />
-              </User.Root>
-            </User.Provider>
-          </button>
-        </Popover.Trigger>
-        <Popover.Portal>
-          <Popover.Content
-            className="flex w-[280px] flex-col gap-4 rounded-xl bg-black p-5 text-neutral-100 focus:outline-none dark:bg-white dark:text-neutral-900 dark:shadow-none"
-            sideOffset={10}
-            side="bottom"
-          >
-            <div>
-              <h1 className="mb-1 font-semibold">
-                You're using random account
-              </h1>
-              <p className="text-sm text-neutral-500 dark:text-neutral-600">
-                You can continue by claim and backup this account, or you can
-                import your own account.
-              </p>
-            </div>
-            <div className="flex flex-col gap-2">
-              <BackupDialog />
-              <LoginDialog />
-            </div>
-            <Popover.Arrow className="fill-black dark:fill-white" />
-          </Popover.Content>
-        </Popover.Portal>
-      </Popover.Root>
-    );
-  }
-
  return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        <User.Provider pubkey={pubkey}>
-          <User.Root className="rounded-full ring-1 ring-teal-500 ring-offset-2 ring-offset-neutral-200 dark:ring-offset-neutral-950">
-            <User.Avatar className="aspect-square h-auto w-7 rounded-full object-cover" />
-          </User.Root>
-        </User.Provider>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content
-          className="flex w-[220px] flex-col rounded-xl bg-black p-2 text-neutral-100 focus:outline-none dark:bg-white dark:text-neutral-900 dark:shadow-none"
-          sideOffset={10}
-          side="bottom"
-        >
-          <DropdownMenu.Item className="group relative flex h-9 select-none items-center rounded-md px-3 text-sm font-medium leading-none outline-none hover:bg-neutral-900 dark:hover:bg-neutral-100">
-            Add account
-          </DropdownMenu.Item>
-          <DropdownMenu.Item
-            onClick={() => ark.open_profile(account)}
-            className="group relative flex h-9 select-none items-center rounded-md px-3 text-sm font-medium leading-none outline-none hover:bg-neutral-900 dark:hover:bg-neutral-100"
-          >
-            Profile
-            <div className="ml-auto pl-5 text-xs text-neutral-800 dark:text-neutral-200">
-              ⌘+Shift+P
-            </div>
-          </DropdownMenu.Item>
-          <DropdownMenu.Item
-            onClick={() => navigate({ to: "/", search: { manually: true } })}
-            className="group relative flex h-9 select-none items-center rounded-md px-3 text-sm font-medium leading-none outline-none hover:bg-neutral-900 dark:hover:bg-neutral-100"
-          >
-            Logout
-            <div className="ml-auto pl-5 text-xs text-neutral-800 dark:text-neutral-200">
-              ⌘+Shift+L
-            </div>
-          </DropdownMenu.Item>
-          <DropdownMenu.Arrow className="fill-black dark:fill-white" />
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
+    <User.Provider pubkey={pubkey}>
+      <User.Root className="rounded-full ring-1 ring-teal-500 ring-offset-2 ring-offset-neutral-200 dark:ring-offset-neutral-950">
+        <User.Avatar className="aspect-square h-auto w-7 rounded-full object-cover" />
+      </User.Root>
+    </User.Provider>
  );
 }
--- a/apps/desktop2/src/components/avatarUploader.tsx
+++ b/apps/desktop2/src/components/avatarUploader.tsx
@@ -0,0 +1,42 @@
+import { LoaderIcon } from "@lume/icons";
+import { cn } from "@lume/utils";
+import { useRouteContext } from "@tanstack/react-router";
+import { Dispatch, ReactNode, SetStateAction, useState } from "react";
+import { toast } from "sonner";
+
+export function AvatarUploader({
+  setPicture,
+  children,
+  className,
+}: {
+  setPicture: Dispatch<SetStateAction<string>>;
+  children: ReactNode;
+  className?: string;
+}) {
+  const { ark } = useRouteContext({ strict: false });
+  const [loading, setLoading] = useState(false);
+
+  const uploadAvatar = async () => {
+    // start loading
+    setLoading(true);
+    try {
+      const image = await ark.upload();
+      setPicture(image);
+    } catch (e) {
+      toast.error(String(e));
+    }
+
+    // stop loading
+    setLoading(false);
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={() => uploadAvatar()}
+      className={cn("size-4", className)}
+    >
+      {loading ? <LoaderIcon className="size-4 animate-spin" /> : children}
+    </button>
+  );
+}
--- a/apps/desktop2/src/components/backup.tsx
+++ b/apps/desktop2/src/components/backup.tsx
@@ -1,121 +0,0 @@
-import { ArrowRightIcon, CancelIcon } from "@lume/icons";
-import * as Dialog from "@radix-ui/react-dialog";
-import { Link, useParams } from "@tanstack/react-router";
-import { invoke } from "@tauri-apps/api/core";
-import { useState } from "react";
-import { toast } from "sonner";
-
-export function BackupDialog() {
-  // @ts-ignore, magic!!!
-  const { account } = useParams({ strict: false });
-
-  const [key, setKey] = useState(null);
-  const [passphase, setPassphase] = useState("");
-  const [loading, setLoading] = useState(false);
-
-  const encryptKey = async () => {
-    try {
-      setLoading(true);
-
-      const encrypted: string = await invoke("get_encrypted_key", {
-        npub: account,
-        password: passphase,
-      });
-
-      if (encrypted) {
-        setKey(encrypted);
-      }
-
-      setLoading(false);
-    } catch (e) {
-      setLoading(false);
-      toast.error(String(e));
-    }
-  };
-
-  return (
-    <Dialog.Root>
-      <Dialog.Trigger asChild>
-        <button
-          type="button"
-          className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-neutral-900 text-sm font-medium leading-tight text-neutral-100 hover:bg-neutral-800"
-        >
-          Claim & Backup
-        </button>
-      </Dialog.Trigger>
-      <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/30 backdrop-blur dark:bg-white/30" />
-        <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
-          <Dialog.Close className="absolute right-5 top-5 flex w-12 flex-col items-center justify-center gap-1 text-white">
-            <CancelIcon className="size-8" />
-            <span className="text-sm font-medium uppercase text-neutral-400 dark:text-neutral-600">
-              Esc
-            </span>
-          </Dialog.Close>
-          <div className="relative flex h-min w-full max-w-xl flex-col gap-8 rounded-xl bg-white p-5 dark:bg-black">
-            <div className="flex flex-col">
-              <h3 className="text-lg font-semibold">
-                This is your account key
-              </h3>
-              <p>
-                It's use for login to Lume or other Nostr clients. You will lost
-                access to your account if you lose this key.
-              </p>
-            </div>
-            <div className="flex flex-col gap-5">
-              <div className="flex flex-col gap-2">
-                <label htmlFor="nsec">Set a passphase to secure your key</label>
-                <div className="relative">
-                  <input
-                    name="passphase"
-                    type="password"
-                    value={passphase}
-                    onChange={(e) => setPassphase(e.target.value)}
-                    className="h-11 w-full resize-none rounded-lg border-transparent bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"
-                  />
-                </div>
-              </div>
-              {key ? (
-                <div className="flex flex-col gap-2">
-                  <label htmlFor="nsec">
-                    Copy this key and keep it in safe place
-                  </label>
-                  <input
-                    name="nsec"
-                    type="text"
-                    value={key}
-                    readOnly
-                    className="h-11 w-full resize-none rounded-lg border-transparent bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"
-                  />
-                </div>
-              ) : null}
-            </div>
-            <div className="flex flex-col gap-3">
-              {!key ? (
-                <button
-                  type="button"
-                  onClick={encryptKey}
-                  disabled={loading}
-                  className="inline-flex h-11 w-full items-center justify-between gap-1.5 rounded-lg bg-blue-500 px-5 font-medium text-white hover:bg-blue-600"
-                >
-                  <div className="size-5" />
-                  <div>Submit</div>
-                  <ArrowRightIcon className="size-5" />
-                </button>
-              ) : (
-                <Link
-                  to="/$account/home/local"
-                  params={{ account }}
-                  search={{ guest: false }}
-                  className="inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-lg bg-blue-500 px-5 font-medium text-white hover:bg-blue-600"
-                >
-                  I've safely store my account key
-                </Link>
-              )}
-            </div>
-          </div>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-}
--- a/apps/desktop2/src/components/balance.tsx
+++ b/apps/desktop2/src/components/balance.tsx
@@ -1,20 +1,11 @@
-import { useArk } from "@lume/ark";
 import { User } from "@lume/ui";
 import { getBitcoinDisplayValues } from "@lume/utils";
+import { useRouteContext } from "@tanstack/react-router";
 import { useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";

-export function Balance({
-  recipient,
-  account,
-}: {
-  recipient: string;
-  account: string;
-}) {
-  const [t] = useTranslation();
+export function Balance({ account }: { account: string }) {
+  const { ark } = useRouteContext({ strict: false });
  const [balance, setBalance] = useState(0);
-
-  const ark = useArk();
  const value = useMemo(() => getBitcoinDisplayValues(balance), [balance]);

  useEffect(() => {
--- a/apps/desktop2/src/components/col.tsx
+++ b/apps/desktop2/src/components/col.tsx
@@ -0,0 +1,77 @@
+import { useEffect, useRef } from "react";
+import { LumeColumn } from "@lume/types";
+import { invoke } from "@tauri-apps/api/core";
+import { LoaderIcon } from "@lume/icons";
+
+export function Col({
+  column,
+  account,
+  isScroll,
+}: {
+  column: LumeColumn;
+  account: string;
+  isScroll: boolean;
+}) {
+  const webview = useRef<string | undefined>(undefined);
+  const container = useRef<HTMLDivElement>(null);
+
+  const repositionWebview = async () => {
+    if (webview.current && webview.current.length > 1) {
+      const newRect = container.current.getBoundingClientRect();
+      await invoke("reposition_column", {
+        label: webview.current,
+        x: newRect.x,
+        y: newRect.y,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (isScroll) {
+      repositionWebview();
+    }
+  }, [isScroll]);
+
+  useEffect(() => {
+    (async () => {
+      const rect = container.current.getBoundingClientRect();
+      const windowLabel = `column-${column.label}`;
+      const url =
+        column.content +
+        `?account=${account}&label=${column.label}&name=${column.name}`;
+
+      // create new webview
+      webview.current = await invoke("create_column", {
+        label: windowLabel,
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height,
+        url,
+      });
+    })();
+
+    // close webview when unmounted
+    return () => {
+      if (webview.current && webview.current.length > 1) {
+        invoke("close_column", {
+          label: webview.current,
+        }).then(() => {
+          webview.current = undefined;
+        });
+      }
+    };
+  }, []);
+
+  return (
+    <div ref={container} className="h-full w-[440px] shrink-0 p-2">
+      {column.label !== "open" ? (
+        <div className="w-full h-full flex items-center justify-center rounded-xl flex-col bg-black/5 dark:bg-white/5 backdrop-blur-lg">
+          <button type="button" className="size-5" disabled>
+            <LoaderIcon className="size-5 animate-spin" />
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+}
--- a/apps/desktop2/src/components/login.tsx
+++ b/apps/desktop2/src/components/login.tsx
@@ -1,125 +0,0 @@
-import { useArk } from "@lume/ark";
-import { ArrowRightIcon, CancelIcon } from "@lume/icons";
-import * as Dialog from "@radix-ui/react-dialog";
-import { useNavigate } from "@tanstack/react-router";
-import { useState } from "react";
-import { toast } from "sonner";
-
-export function LoginDialog() {
-  const ark = useArk();
-  const navigate = useNavigate();
-
-  const [nsec, setNsec] = useState("");
-  const [passphase, setPassphase] = useState("");
-
-  const login = async () => {
-    try {
-      if (!nsec.length) {
-        return toast.info("You must enter a valid nsec or ncrypto");
-      }
-
-      if (nsec.startsWith("ncrypto") && !passphase.length) {
-        return toast.warning("You must provide a passphase for ncrypto key");
-      }
-
-      const save = await ark.save_account(nsec, passphase);
-
-      if (save) {
-        navigate({ to: "/", search: { guest: false } });
-      }
-    } catch (e) {
-      toast.error(String(e));
-    }
-  };
-
-  return (
-    <Dialog.Root>
-      <Dialog.Trigger asChild>
-        <button
-          type="button"
-          className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-neutral-900 text-sm font-medium leading-tight text-neutral-100 hover:bg-neutral-800"
-        >
-          Add account
-        </button>
-      </Dialog.Trigger>
-      <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/30 backdrop-blur dark:bg-white/30" />
-        <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
-          <Dialog.Close className="absolute right-5 top-5 flex w-12 flex-col items-center justify-center gap-1 text-white">
-            <CancelIcon className="size-8" />
-            <span className="text-sm font-medium uppercase text-neutral-400 dark:text-neutral-600">
-              Esc
-            </span>
-          </Dialog.Close>
-          <div className="relative flex h-min w-full max-w-xl flex-col gap-8 rounded-xl bg-white p-5 dark:bg-black">
-            <div className="flex flex-col gap-1.5">
-              <h3 className="text-lg font-semibold">Add new account with</h3>
-              <div className="flex h-11 items-center overflow-hidden rounded-lg bg-neutral-100 p-1 dark:bg-neutral-900">
-                <button
-                  type="button"
-                  className="h-full flex-1 rounded-md bg-white text-sm font-medium dark:bg-black"
-                >
-                  nsec
-                </button>
-                <button
-                  type="button"
-                  className="flex h-full flex-1 flex-col items-center justify-center rounded-md text-sm font-medium"
-                >
-                  <span className="leading-tight">nsecBunker</span>
-                  <span className="text-xs font-normal leading-tight text-neutral-700 dark:text-neutral-300">
-                    coming soon
-                  </span>
-                </button>
-                <button
-                  type="button"
-                  className="flex h-full flex-1 flex-col items-center justify-center rounded-md text-sm font-medium"
-                >
-                  <span className="leading-tight">Address</span>
-                  <span className="text-xs font-normal leading-tight text-neutral-700 dark:text-neutral-300">
-                    coming soon
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div className="flex flex-col gap-5">
-              <div className="flex flex-col gap-2">
-                <label htmlFor="nsec">
-                  Enter sign in key start with nsec or ncrypto
-                </label>
-                <input
-                  name="nsec"
-                  type="text"
-                  placeholder="nsec or ncrypto..."
-                  value={nsec}
-                  onChange={(e) => setNsec(e.target.value)}
-                  className="h-11 w-full resize-none rounded-lg border-transparent bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"
-                />
-              </div>
-              <div className="flex flex-col gap-2">
-                <label htmlFor="nsec">Passphase (optional)</label>
-                <input
-                  name="passphase"
-                  type="password"
-                  value={passphase}
-                  onChange={(e) => setPassphase(e.target.value)}
-                  className="h-11 w-full resize-none rounded-lg border-transparent bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"
-                />
-              </div>
-            </div>
-            <div className="flex flex-col gap-3">
-              <button
-                type="button"
-                onClick={login}
-                className="inline-flex h-11 w-full items-center justify-between gap-1.5 rounded-lg bg-blue-500 px-5 font-medium text-white hover:bg-blue-600"
-              >
-                <div className="size-5" />
-                <div>Add account</div>
-                <ArrowRightIcon className="size-5" />
-              </button>
-            </div>
-          </div>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-}
--- a/apps/desktop2/src/components/repost.tsx
+++ b/apps/desktop2/src/components/repost.tsx
@@ -3,8 +3,8 @@ import { Event } from "@lume/types";
 import { cn } from "@lume/utils";
 import { useQuery } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
-import { useArk } from "@lume/ark";
 import { Note, User } from "@lume/ui";
+import { useRouteContext } from "@tanstack/react-router";

 export function RepostNote({
  event,
@@ -13,8 +13,7 @@ export function RepostNote({
  event: Event;
  className?: string;
 }) {
-  const ark = useArk();
-
+  const { ark } = useRouteContext({ strict: false });
  const { t } = useTranslation();
  const {
    isLoading,
@@ -44,7 +43,12 @@ export function RepostNote({

  if (isError || !repostEvent) {
    return (
-      <Note.Root className={className}>
+      <Note.Root
+        className={cn(
+          "flex flex-col gap-2 border-b border-neutral-100 px-3 py-5 dark:border-neutral-900",
+          className,
+        )}
+      >
        <User.Provider pubkey={event.pubkey}>
          <User.Root className="flex h-14 gap-2 px-3">
            <div className="inline-flex w-10 shrink-0 items-center justify-center">
@@ -71,7 +75,7 @@ export function RepostNote({
  return (
    <Note.Root
      className={cn(
-        "mb-5 flex flex-col gap-2 border-b border-neutral-100 pb-5 dark:border-neutral-900",
+        "flex flex-col gap-2 border-b border-neutral-100 px-3 py-5 dark:border-neutral-900",
        className,
      )}
    >
--- a/apps/desktop2/src/components/text.tsx
+++ b/apps/desktop2/src/components/text.tsx
@@ -13,7 +13,7 @@ export function TextNote({
    <Note.Provider event={event}>
      <Note.Root
        className={cn(
-          "mb-5 flex flex-col gap-2 border-b border-neutral-100 pb-5 dark:border-neutral-900",
+          "flex flex-col gap-2 border-b border-neutral-100 px-3 py-5 dark:border-neutral-900",
          className,
        )}
      >
--- a/apps/desktop2/src/components/toolbar.tsx
+++ b/apps/desktop2/src/components/toolbar.tsx
@@ -0,0 +1,15 @@
+import { ReactNode } from "@tanstack/react-router";
+import { useLayoutEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+export function Toolbar({ children }: { children: ReactNode }) {
+  const [domReady, setDomReady] = useState(false);
+
+  useLayoutEffect(() => {
+    setDomReady(true);
+  }, []);
+
+  return domReady
+    ? createPortal(children, document.getElementById("toolbar"))
+    : null;
+}
--- a/apps/desktop2/src/routes/$account.home.tsx
+++ b/apps/desktop2/src/routes/$account.home.tsx
@@ -0,0 +1,155 @@
+import { Col } from "@/components/col";
+import { Toolbar } from "@/components/toolbar";
+import { ArrowLeftIcon, ArrowRightIcon, LoaderIcon } from "@lume/icons";
+import { EventColumns, LumeColumn } from "@lume/types";
+import { createFileRoute } from "@tanstack/react-router";
+import { listen } from "@tauri-apps/api/event";
+import { resolveResource } from "@tauri-apps/api/path";
+import { readTextFile } from "@tauri-apps/plugin-fs";
+import { nanoid } from "nanoid";
+import { useEffect, useRef, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { VList, VListHandle } from "virtua";
+
+export const Route = createFileRoute("/$account/home")({
+  component: Screen,
+  pendingComponent: Pending,
+  beforeLoad: async ({ context }) => {
+    const ark = context.ark;
+    const resourcePath = await resolveResource("resources/system_columns.json");
+    const systemColumns: LumeColumn[] = JSON.parse(
+      await readTextFile(resourcePath),
+    );
+    const userColumns = await ark.get_columns();
+
+    return {
+      storedColumns: !userColumns.length ? systemColumns : userColumns,
+    };
+  },
+});
+
+function Screen() {
+  const { account } = Route.useParams();
+  const { ark, storedColumns } = Route.useRouteContext();
+
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [isScroll, setIsScroll] = useState(false);
+  const [columns, setColumns] = useState(storedColumns);
+
+  const vlistRef = useRef<VListHandle>(null);
+
+  const goLeft = () => {
+    const prevIndex = Math.max(selectedIndex - 1, 0);
+    setSelectedIndex(prevIndex);
+    vlistRef.current.scrollToIndex(prevIndex, {
+      align: "center",
+    });
+  };
+
+  const goRight = () => {
+    const nextIndex = Math.min(selectedIndex + 1, columns.length - 1);
+    setSelectedIndex(nextIndex);
+    vlistRef.current.scrollToIndex(nextIndex, {
+      align: "center",
+    });
+  };
+
+  const add = useDebouncedCallback((column: LumeColumn) => {
+    column["label"] = column.label + "-" + nanoid();
+
+    setColumns((state) => [...state, column]);
+    setSelectedIndex(columns.length + 1);
+
+    // scroll to the last column
+    vlistRef.current.scrollToIndex(columns.length + 1, {
+      align: "end",
+    });
+  }, 150);
+
+  const remove = useDebouncedCallback((label: string) => {
+    setColumns((state) => state.filter((t) => t.label !== label));
+    setSelectedIndex(columns.length - 1);
+
+    // scroll to the first column
+    vlistRef.current.scrollToIndex(0, {
+      align: "start",
+    });
+  }, 150);
+
+  useEffect(() => {
+    // save state
+    ark.set_columns(columns);
+  }, [columns]);
+
+  useEffect(() => {
+    let unlisten: Awaited<ReturnType<typeof listen>> | undefined = undefined;
+
+    (async () => {
+      if (unlisten) return;
+      unlisten = await listen<EventColumns>("columns", (data) => {
+        if (data.payload.type === "add") add(data.payload.column);
+        if (data.payload.type === "remove") remove(data.payload.label);
+      });
+    })();
+
+    return () => {
+      if (unlisten) unlisten();
+    };
+  }, []);
+
+  return (
+    <div className="h-full w-full">
+      <VList
+        ref={vlistRef}
+        horizontal
+        tabIndex={-1}
+        itemSize={440}
+        overscan={3}
+        onScroll={() => {
+          setIsScroll(true);
+        }}
+        onScrollEnd={() => {
+          setIsScroll(false);
+        }}
+        className="scrollbar-none h-full w-full overflow-x-auto focus:outline-none"
+      >
+        {columns.map((column, index) => (
+          <Col
+            key={column.label + index}
+            column={column}
+            account={account}
+            isScroll={isScroll}
+          />
+        ))}
+      </VList>
+      <Toolbar>
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            onClick={() => goLeft()}
+            className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-neutral-800"
+          >
+            <ArrowLeftIcon className="size-5" />
+          </button>
+          <button
+            type="button"
+            onClick={() => goRight()}
+            className="inline-flex size-8 items-center justify-center rounded-full text-neutral-800 hover:bg-neutral-200 dark:text-neutral-200 dark:hover:bg-neutral-800"
+          >
+            <ArrowRightIcon className="size-5" />
+          </button>
+        </div>
+      </Toolbar>
+    </div>
+  );
+}
+
+function Pending() {
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <button type="button" className="size-5" disabled>
+        <LoaderIcon className="size-5 animate-spin" />
+      </button>
+    </div>
+  );
+}
--- a/apps/desktop2/src/routes/$account.tsx
+++ b/apps/desktop2/src/routes/$account.tsx
@@ -1,131 +1,55 @@
-import {
-  BellFilledIcon,
-  BellIcon,
-  ComposeFilledIcon,
-  HomeFilledIcon,
-  HomeIcon,
-  HorizontalDotsIcon,
-  SettingsIcon,
-  SpaceFilledIcon,
-  SpaceIcon,
-} from "@lume/icons";
-import { Link } from "@tanstack/react-router";
-import { Outlet, createFileRoute } from "@tanstack/react-router";
+import { ComposeFilledIcon, PlusIcon } from "@lume/icons";
+import { Outlet, createFileRoute, useNavigate } from "@tanstack/react-router";
 import { cn } from "@lume/utils";
 import { Accounts } from "@/components/accounts";
-import { useArk } from "@lume/ark";
-import { Box } from "@lume/ui";
+import { platform } from "@tauri-apps/plugin-os";

 export const Route = createFileRoute("/$account")({
  component: App,
+  beforeLoad: async () => {
+    const platformName = await platform();
+    return { platform: platformName };
+  },
 });

 function App() {
-  const ark = useArk();
-  const context = Route.useRouteContext();
+  const navigate = useNavigate();
+  const { ark, platform } = Route.useRouteContext();

  return (
-    <div className="flex h-screen w-screen flex-col bg-gradient-to-tr from-neutral-200 to-neutral-100 dark:from-neutral-950 dark:to-neutral-900">
+    <div className="flex h-screen w-screen flex-col">
      <div
        data-tauri-drag-region
        className={cn(
-          "flex h-11 shrink-0 items-center justify-between pr-4",
-          context.platform === "macos" ? "pl-24" : "pl-4",
+          "flex h-11 shrink-0 items-center justify-between pr-2",
+          platform === "macos" ? "ml-2 pl-20" : "pl-4",
        )}
      >
-        <Navigation />
        <div className="flex items-center gap-3">
          <Accounts />
+          <button
+            type="button"
+            onClick={() => navigate({ to: "/landing" })}
+            className="inline-flex size-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-800 hover:bg-neutral-400 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-600"
+          >
+            <PlusIcon className="size-5" />
+          </button>
+        </div>
+        <div className="flex items-center gap-3">
          <button
            type="button"
            onClick={() => ark.open_editor()}
            className="inline-flex h-8 w-max items-center justify-center gap-1 rounded-full bg-blue-500 px-3 text-sm font-medium text-white hover:bg-blue-600"
          >
            <ComposeFilledIcon className="size-4" />
-            New post
-          </button>
-          <button
-            type="button"
-            onClick={() => ark.open_settings()}
-            className="inline-flex size-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-800 hover:bg-neutral-400 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-600"
-          >
-            <HorizontalDotsIcon className="size-5" />
+            New Post
          </button>
+          <div id="toolbar" />
        </div>
      </div>
-      <Box>
+      <div className="flex-1">
        <Outlet />
-      </Box>
-    </div>
-  );
-}
-
-function Navigation() {
-  // @ts-ignore, useless
-  const { account } = Route.useParams();
-
-  return (
-    <div
-      data-tauri-drag-region
-      className="flex h-full flex-1 items-center gap-2"
-    >
-      <Link to="/$account/home/local" params={{ account }}>
-        {({ isActive }) => (
-          <div
-            className={cn(
-              "inline-flex h-8 w-max items-center justify-center gap-2 rounded-full px-3",
-              isActive
-                ? "bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-800 dark:hover:bg-neutral-700"
-                : "hover:bg-black/10 dark:hover:bg-white/10",
-            )}
-          >
-            {isActive ? (
-              <HomeFilledIcon className="size-5" />
-            ) : (
-              <HomeIcon className="size-5" />
-            )}
-            <span className="text-sm font-medium">Home</span>
-          </div>
-        )}
-      </Link>
-      <Link to="/$account/space" params={{ account }}>
-        {({ isActive }) => (
-          <div
-            className={cn(
-              "inline-flex h-8 w-max items-center justify-center gap-2 rounded-full px-3 hover:bg-black/10 dark:hover:bg-white/10",
-              isActive
-                ? "bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-800 dark:hover:bg-neutral-700"
-                : "hover:bg-black/10 dark:hover:bg-white/10",
-            )}
-          >
-            {isActive ? (
-              <SpaceFilledIcon className="size-5" />
-            ) : (
-              <SpaceIcon className="size-5" />
-            )}
-            <span className="text-sm font-medium">Space</span>
-          </div>
-        )}
-      </Link>
-      <Link to="/$account/activity" params={{ account }}>
-        {({ isActive }) => (
-          <div
-            className={cn(
-              "inline-flex h-8 w-max items-center justify-center gap-2 rounded-full px-3 hover:bg-black/10 dark:hover:bg-white/10",
-              isActive
-                ? "bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-800 dark:hover:bg-neutral-700"
-                : "hover:bg-black/10 dark:hover:bg-white/10",
-            )}
-          >
-            {isActive ? (
-              <BellFilledIcon className="size-5" />
-            ) : (
-              <BellIcon className="size-5" />
-            )}
-            <span className="text-sm font-medium">Activity</span>
-          </div>
-        )}
-      </Link>
+      </div>
    </div>
  );
 }
--- a/apps/desktop2/src/routes/$account/activity.lazy.tsx
+++ b/apps/desktop2/src/routes/$account/activity.lazy.tsx
@@ -1,13 +0,0 @@
-import { createLazyFileRoute } from "@tanstack/react-router";
-
-export const Route = createLazyFileRoute("/$account/activity")({
-  component: Activity,
-});
-
-function Activity() {
-  return (
-    <div className="h-full w-full overflow-hidden rounded-xl bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-none dark:ring-1 dark:ring-white/5">
-      <p>Activity</p>
-    </div>
-  );
-}
--- a/apps/desktop2/src/routes/$account/home.tsx
+++ b/apps/desktop2/src/routes/$account/home.tsx
@@ -1,68 +0,0 @@
-import { GlobalIcon, LoaderIcon, LocalIcon, RefreshIcon } from "@lume/icons";
-import { cn } from "@lume/utils";
-import { useQueryClient } from "@tanstack/react-query";
-import { Link } from "@tanstack/react-router";
-import { Outlet, createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/$account/home")({
-  component: Screen,
-});
-
-function Screen() {
-  const queryClient = useQueryClient();
-  const { account } = Route.useParams();
-
-  const refresh = async () => {
-    const queryKey = `${window.location.pathname.split("/").at(-1)}_newsfeed`;
-    await queryClient.refetchQueries({ queryKey: [queryKey, account] });
-  };
-
-  return (
-    <div className="flex flex-col">
-      <div className="mx-auto mb-4 flex h-16 w-full max-w-xl shrink-0 items-center justify-between border-b border-neutral-100 dark:border-neutral-900">
-        <div className="flex items-center gap-2">
-          <Link to="/$account/home/local">
-            {({ isActive }) => (
-              <div
-                className={cn(
-                  "inline-flex items-center justify-center gap-2 rounded-full px-4 py-2 text-sm leading-tight hover:bg-neutral-100 dark:hover:bg-neutral-900",
-                  isActive
-                    ? "bg-neutral-100 font-semibold text-neutral-900 hover:bg-neutral-200 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800"
-                    : "text-neutral-600 dark:text-neutral-400",
-                )}
-              >
-                <LocalIcon className="size-4" />
-                Local
-              </div>
-            )}
-          </Link>
-          <Link to="/$account/home/global">
-            {({ isActive }) => (
-              <div
-                className={cn(
-                  "inline-flex items-center justify-center gap-2 rounded-full px-4 py-2 text-sm leading-tight hover:bg-neutral-100 dark:hover:bg-neutral-900",
-                  isActive
-                    ? "bg-neutral-100 font-semibold text-neutral-900 hover:bg-neutral-200 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800"
-                    : "text-neutral-600 dark:text-neutral-400",
-                )}
-              >
-                <GlobalIcon className="size-4" />
-                Global
-              </div>
-            )}
-          </Link>
-        </div>
-        <div className="flex items-center gap-3">
-          <button
-            type="button"
-            onClick={refresh}
-            className="text-neutral-700 hover:text-blue-500 dark:text-neutral-300"
-          >
-            <RefreshIcon className="size-4" />
-          </button>
-        </div>
-      </div>
-      <Outlet />
-    </div>
-  );
-}
--- a/apps/desktop2/src/routes/$account/home/global.lazy.tsx
+++ b/apps/desktop2/src/routes/$account/home/global.lazy.tsx
@@ -1,91 +0,0 @@
-import { RepostNote } from "@/components/repost";
-import { Suggest } from "@/components/suggest";
-import { TextNote } from "@/components/text";
-import { useArk } from "@lume/ark";
-import { LoaderIcon, ArrowRightCircleIcon, InfoIcon } from "@lume/icons";
-import { Event, Kind } from "@lume/types";
-import { FETCH_LIMIT } from "@lume/utils";
-import { useInfiniteQuery } from "@tanstack/react-query";
-import { createLazyFileRoute } from "@tanstack/react-router";
-import { Virtualizer } from "virtua";
-
-export const Route = createLazyFileRoute("/$account/home/global")({
-  component: Screen,
-});
-
-function Screen() {
-  const ark = useArk();
-  const { account } = Route.useParams();
-  const {
-    data,
-    hasNextPage,
-    isLoading,
-    isRefetching,
-    isFetchingNextPage,
-    fetchNextPage,
-  } = useInfiniteQuery({
-    queryKey: ["global_newsfeed", account],
-    initialPageParam: 0,
-    queryFn: async ({ pageParam }: { pageParam: number }) => {
-      const events = await ark.get_events(
-        "global",
-        FETCH_LIMIT,
-        pageParam,
-        true,
-      );
-      return events;
-    },
-    getNextPageParam: (lastPage) => {
-      const lastEvent = lastPage?.at(-1);
-      if (!lastEvent) return;
-      return lastEvent.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:
-        return <TextNote key={event.id} event={event} />;
-    }
-  };
-
-  return (
-    <div className="mx-auto flex w-full max-w-xl flex-1 flex-col">
-      <div className="flex-1">
-        {isLoading || isRefetching ? (
-          <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
-            <LoaderIcon className="size-5 animate-spin" />
-          </div>
-        ) : (
-          <Virtualizer overscan={3}>
-            {data.map((item) => renderItem(item))}
-          </Virtualizer>
-        )}
-        <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 ? (
-                <LoaderIcon className="size-5 animate-spin" />
-              ) : (
-                <>
-                  <ArrowRightCircleIcon className="size-5" />
-                  Load more
-                </>
-              )}
-            </button>
-          ) : null}
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/apps/desktop2/src/routes/$account/space.lazy.tsx
+++ b/apps/desktop2/src/routes/$account/space.lazy.tsx
@@ -1,13 +0,0 @@
-import { createLazyFileRoute } from "@tanstack/react-router";
-
-export const Route = createLazyFileRoute("/$account/space")({
-  component: Space,
-});
-
-function Space() {
-  return (
-    <div className="h-full w-full overflow-hidden rounded-xl bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-none dark:ring-1 dark:ring-white/5">
-      <p>Space</p>
-    </div>
-  );
-}
--- a/apps/desktop2/src/routes/__root.tsx
+++ b/apps/desktop2/src/routes/__root.tsx
@@ -1,27 +1,22 @@
 import { LoaderIcon } from "@lume/icons";
-import {
-  Outlet,
-  ScrollRestoration,
-  createRootRouteWithContext,
-} from "@tanstack/react-router";
+import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
 import { type Ark } from "@lume/ark";
 import { type QueryClient } from "@tanstack/react-query";
 import { type Platform } from "@tauri-apps/plugin-os";
+import { Account, Interests, Settings } from "@lume/types";

 interface RouterContext {
  ark: Ark;
  queryClient: QueryClient;
-  platform: Platform;
-  locale: string;
+  platform?: Platform;
+  locale?: string;
+  settings?: Settings;
+  interests?: Interests;
+  accounts?: Account[];
 }

 export const Route = createRootRouteWithContext<RouterContext>()({
-  component: () => (
-    <>
-      <ScrollRestoration />
-      <Outlet />
-    </>
-  ),
+  component: () => <Outlet />,
  pendingComponent: Pending,
  wrapInSuspense: true,
 });
@@ -29,7 +24,9 @@ export const Route = createRootRouteWithContext<RouterContext>()({
 function Pending() {
  return (
    <div className="flex h-screen w-screen flex-col items-center justify-center">
-      <LoaderIcon className="size-5 animate-spin" />
+      <button type="button" className="size-5" disabled>
+        <LoaderIcon className="size-5 animate-spin" />
+      </button>
    </div>
  );
 }
--- a/apps/desktop2/src/routes/$account/home/local.lazy.tsx
+++ b/apps/desktop2/src/routes/$account/home/local.lazy.tsx
@@ -1,49 +1,44 @@
 import { RepostNote } from "@/components/repost";
 import { Suggest } from "@/components/suggest";
 import { TextNote } from "@/components/text";
-import { useArk } from "@lume/ark";
 import { LoaderIcon, ArrowRightCircleIcon, InfoIcon } from "@lume/icons";
-import { Event, Kind } from "@lume/types";
-import { FETCH_LIMIT } from "@lume/utils";
+import { ColumnRouteSearch, Event, Kind } from "@lume/types";
+import { Column } from "@lume/ui";
 import { useInfiniteQuery } from "@tanstack/react-query";
-import { Link } from "@tanstack/react-router";
-import { createLazyFileRoute } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
 import { Virtualizer } from "virtua";

-export const Route = createLazyFileRoute("/$account/home/local")({
+export const Route = createFileRoute("/antenas")({
+  validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+    return {
+      account: search.account,
+      label: search.label,
+      name: search.name,
+    };
+  },
  component: Screen,
 });

-function Screen() {
-  const ark = useArk();
-  const { account } = Route.useParams();
-  const {
-    data,
-    hasNextPage,
-    isLoading,
-    isRefetching,
-    isFetchingNextPage,
-    fetchNextPage,
-  } = useInfiniteQuery({
-    queryKey: ["local_newsfeed", account],
-    initialPageParam: 0,
-    queryFn: async ({ pageParam }: { pageParam: number }) => {
-      const events = await ark.get_events(
-        "local",
-        FETCH_LIMIT,
-        pageParam,
-        true,
-      );
-      return events;
-    },
-    getNextPageParam: (lastPage) => {
-      const lastEvent = lastPage?.at(-1);
-      if (!lastEvent) return;
-      return lastEvent.created_at - 1;
-    },
-    select: (data) => data?.pages.flatMap((page) => page),
-    refetchOnWindowFocus: false,
-  });
+export function Screen() {
+  const { label, name, account } = Route.useSearch();
+  const { ark } = Route.useRouteContext();
+  const { t } = useTranslation();
+  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } =
+    useInfiniteQuery({
+      queryKey: [name, account],
+      initialPageParam: 0,
+      queryFn: async ({ pageParam }: { pageParam: number }) => {
+        const events = await ark.get_events(20, pageParam);
+        return events;
+      },
+      getNextPageParam: (lastPage) => {
+        const lastEvent = lastPage?.at(-1);
+        return lastEvent ? lastEvent.created_at - 1 : null;
+      },
+      select: (data) => data?.pages.flatMap((page) => page),
+      refetchOnWindowFocus: false,
+    });

  const renderItem = (event: Event) => {
    if (!event) return;
@@ -56,9 +51,10 @@ function Screen() {
  };

  return (
-    <div className="mx-auto flex w-full max-w-xl flex-1 flex-col">
-      <div className="flex-1">
-        {isLoading || isRefetching ? (
+    <Column.Root>
+      <Column.Header label={label} name={name} />
+      <Column.Content>
+        {isLoading ? (
          <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
            <LoaderIcon className="size-5 animate-spin" />
          </div>
@@ -66,15 +62,10 @@ function Screen() {
          <div className="flex flex-col gap-3">
            <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. Or you view the{" "}
-                <Link
-                  to="/$account/home/global"
-                  className="text-blue-500 hover:text-blue-600"
-                >
-                  Global Newsfeed
-                </Link>
-              </p>
+              <div>
+                <p className="leading-tight">{t("emptyFeedTitle")}</p>
+                <p className="leading-tight">{t("emptyFeedSubtitle")}</p>
+              </div>
            </div>
            <Suggest />
          </div>
@@ -102,7 +93,7 @@ function Screen() {
            </button>
          ) : null}
        </div>
-      </div>
-    </div>
+      </Column.Content>
+    </Column.Root>
  );
 }
--- a/apps/desktop2/src/routes/auth.lazy.tsx
+++ b/apps/desktop2/src/routes/auth.lazy.tsx
@@ -0,0 +1,16 @@
+import { Box, Container } from "@lume/ui";
+import { Outlet, createLazyFileRoute } from "@tanstack/react-router";
+
+export const Route = createLazyFileRoute("/auth")({
+  component: Screen,
+});
+
+function Screen() {
+  return (
+    <Container withDrag>
+      <Box className="px-3 pt-3">
+        <Outlet />
+      </Box>
+    </Container>
+  );
+}
--- a/apps/desktop2/src/routes/auth/create/index.lazy.tsx
+++ b/apps/desktop2/src/routes/auth/create/index.lazy.tsx
@@ -1,108 +0,0 @@
-import { LoaderIcon } from "@lume/icons";
-import { cn } from "@lume/utils";
-import { createLazyFileRoute, useNavigate } from "@tanstack/react-router";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-
-export const Route = createLazyFileRoute("/auth/create/")({
-  component: Screen,
-});
-
-function Screen() {
-  const navigate = useNavigate();
-
-  const [t] = useTranslation();
-  const [method, setMethod] = useState<"self" | "managed">("self");
-  const [loading, setLoading] = useState(false);
-
-  const next = () => {
-    setLoading(true);
-
-    if (method === "self") {
-      navigate({ to: "/auth/create/self" });
-    } else {
-      navigate({ to: "/auth/create/managed" });
-    }
-  };
-
-  return (
-    <div className="flex h-full w-full items-center justify-center">
-      <div className="mx-auto flex w-full max-w-md flex-col gap-8">
-        <div className="flex flex-col items-center gap-1 text-center">
-          <h1 className="text-2xl font-semibold">{t("signup.title")}</h1>
-          <p className="text-lg leading-snug text-neutral-600 dark:text-neutral-500">
-            {t("signup.subtitle")}
-          </p>
-        </div>
-        <div className="flex flex-col gap-4">
-          <button
-            type="button"
-            onClick={() => setMethod("self")}
-            className={cn(
-              "flex flex-col items-start rounded-xl bg-neutral-100 px-4 py-3.5 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800",
-              method === "self"
-                ? "ring-1 ring-blue-500 ring-offset-2 ring-offset-white dark:ring-offset-black"
-                : "",
-            )}
-          >
-            <p className="font-semibold">{t("signup.selfManageMethod")}</p>
-            <p className="text-sm text-neutral-600 dark:text-neutral-500">
-              {t("signup.selfManageMethodDescription")}
-            </p>
-          </button>
-          <button
-            type="button"
-            onClick={() => setMethod("managed")}
-            className={cn(
-              "flex flex-col items-start rounded-xl bg-neutral-100 px-4 py-3.5 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800",
-              method === "managed"
-                ? "ring-1 ring-blue-500 ring-offset-2 ring-offset-white dark:ring-offset-black"
-                : "",
-            )}
-          >
-            <p className="font-semibold">{t("signup.providerMethod")}</p>
-            <p className="text-sm text-neutral-600 dark:text-neutral-500">
-              {t("signup.providerMethodDescription")}
-            </p>
-          </button>
-          <div className="flex flex-col gap-3">
-            <button
-              type="button"
-              onClick={next}
-              className="inline-flex h-12 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600"
-            >
-              {loading ? (
-                <LoaderIcon className="size-5 animate-spin" />
-              ) : (
-                t("global.continue")
-              )}
-            </button>
-            {method === "managed" ? (
-              <div className="flex flex-col gap-1.5 rounded-xl border border-red-200 bg-red-100 p-2 text-sm text-red-800 dark:border-red-800 dark:bg-red-900 dark:text-red-200">
-                <p className="font-semibold text-red-900 dark:text-red-100">
-                  Attention:
-                </p>
-                <p>
-                  You're chosing Managed by Provider, this feature still in
-                  "Beta".
-                </p>
-                <p>
-                  Some functions still missing or not work as expected, you
-                  shouldn't create your main account with this method
-                </p>
-                <a
-                  href="https://github.com/kind-0/nsecbunkerd/blob/master/OAUTH-LIKE-FLOW.md"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-blue-500"
-                >
-                  Learn more
-                </a>
-              </div>
-            ) : null}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/apps/desktop2/src/routes/auth/create/managed.lazy.tsx
+++ b/apps/desktop2/src/routes/auth/create/managed.lazy.tsx
@@ -1,5 +0,0 @@
-import { createLazyFileRoute } from '@tanstack/react-router'
-
-export const Route = createLazyFileRoute('/auth/create/managed')({
-  component: () => <div>Hello /auth/create/managed!</div>
-})
--- a/apps/desktop2/src/routes/auth/create/self.lazy.tsx
+++ b/apps/desktop2/src/routes/auth/create/self.lazy.tsx
@@ -1,161 +0,0 @@
-import { useArk } from "@lume/ark";
-import { CheckIcon, EyeOffIcon, EyeOnIcon, LoaderIcon } from "@lume/icons";
-import { Keys } from "@lume/types";
-import * as Checkbox from "@radix-ui/react-checkbox";
-import { createLazyFileRoute, useNavigate } from "@tanstack/react-router";
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
-
-export const Route = createLazyFileRoute("/auth/create/self")({
-  component: Create,
-});
-
-function Create() {
-  const ark = useArk();
-  const navigate = useNavigate();
-
-  const [t] = useTranslation();
-  const [loading, setLoading] = useState(false);
-  const [showKey, setShowKey] = useState(false);
-  const [confirm, setConfirm] = useState({ c1: false, c2: false, c3: false });
-  const [keys, setKeys] = useState<Keys>(null);
-
-  const submit = async () => {
-    setLoading(true);
-    try {
-      await ark.save_account(keys);
-      navigate({
-        to: "/$account/home/local",
-        params: { account: keys.npub },
-        search: { onboarding: true },
-        replace: true,
-      });
-    } catch (e) {
-      setLoading(false);
-      toast.error(e);
-    }
-  };
-
-  useEffect(() => {
-    async function genKeys() {
-      const res = await ark.create_keys();
-      setKeys(res);
-    }
-    genKeys();
-  }, []);
-
-  return (
-    <div className="flex h-full w-full items-center justify-center">
-      <div className="mx-auto flex w-full max-w-md flex-col gap-8">
-        <div className="flex flex-col items-center gap-1 text-center">
-          <h1 className="text-2xl font-semibold">
-            {t("signupWithSelfManage.title")}
-          </h1>
-          <p className="text-lg leading-snug text-neutral-600 dark:text-neutral-500">
-            {t("signupWithSelfManage.subtitle")}
-          </p>
-        </div>
-        <div className="mb-0 flex flex-col gap-6">
-          <div className="flex flex-col gap-4">
-            <div className="relative">
-              {keys ? (
-                <input
-                  readOnly
-                  value={keys.nsec}
-                  type={showKey ? "text" : "password"}
-                  className="h-12 w-full resize-none rounded-xl border-transparent bg-neutral-100 pl-3 pr-14 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"
-                />
-              ) : null}
-              <button
-                type="button"
-                onClick={() => setShowKey((state) => !state)}
-                className="absolute right-2 top-2 inline-flex size-8 items-center justify-center rounded-lg bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700"
-              >
-                {showKey ? (
-                  <EyeOnIcon className="size-4" />
-                ) : (
-                  <EyeOffIcon className="size-4" />
-                )}
-              </button>
-            </div>
-            <div className="flex flex-col gap-3">
-              <div className="flex items-center gap-2">
-                <Checkbox.Root
-                  checked={confirm.c1}
-                  onCheckedChange={() =>
-                    setConfirm((state) => ({ ...state, c1: !state.c1 }))
-                  }
-                  className="flex size-7 appearance-none items-center justify-center rounded-lg bg-neutral-100 outline-none dark:bg-neutral-900"
-                  id="confirm1"
-                >
-                  <Checkbox.Indicator className="text-blue-500">
-                    <CheckIcon className="size-4" />
-                  </Checkbox.Indicator>
-                </Checkbox.Root>
-                <label
-                  className="text-sm text-neutral-700 dark:text-neutral-400"
-                  htmlFor="confirm1"
-                >
-                  {t("signupWithSelfManage.confirm1")}
-                </label>
-              </div>
-              <div className="flex items-center gap-2">
-                <Checkbox.Root
-                  checked={confirm.c3}
-                  onCheckedChange={() =>
-                    setConfirm((state) => ({ ...state, c3: !state.c3 }))
-                  }
-                  className="flex size-7 appearance-none items-center justify-center rounded-lg bg-neutral-100 outline-none dark:bg-neutral-900"
-                  id="confirm3"
-                >
-                  <Checkbox.Indicator className="text-blue-500">
-                    <CheckIcon className="size-4" />
-                  </Checkbox.Indicator>
-                </Checkbox.Root>
-                <label
-                  className="text-sm text-neutral-700 dark:text-neutral-400"
-                  htmlFor="confirm3"
-                >
-                  {t("signupWithSelfManage.confirm3")}
-                </label>
-              </div>
-              <div className="flex items-center gap-2">
-                <Checkbox.Root
-                  checked={confirm.c2}
-                  onCheckedChange={() =>
-                    setConfirm((state) => ({ ...state, c2: !state.c2 }))
-                  }
-                  className="flex size-7 appearance-none items-center justify-center rounded-lg bg-neutral-100 outline-none dark:bg-neutral-900"
-                  id="confirm2"
-                >
-                  <Checkbox.Indicator className="text-blue-500">
-                    <CheckIcon className="size-4" />
-                  </Checkbox.Indicator>
-                </Checkbox.Root>
-                <label
-                  className="text-sm text-neutral-700 dark:text-neutral-400"
-                  htmlFor="confirm2"
-                >
-                  {t("signupWithSelfManage.confirm2")}
-                </label>
-              </div>
-            </div>
-          </div>
-          <button
-            type="button"
-            onClick={submit}
-            disabled={!confirm.c1 || !confirm.c2 || !confirm.c3}
-            className="inline-flex h-12 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600 disabled:opacity-50"
-          >
-            {loading ? (
-              <LoaderIcon className="size-5 animate-spin" />
-            ) : (
-              t("signupWithSelfManage.button")
-            )}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/apps/desktop2/src/routes/auth/import.lazy.tsx
+++ b/apps/desktop2/src/routes/auth/import.lazy.tsx
@@ -1,101 +0,0 @@
-import { useArk } from "@lume/ark";
-import { LoaderIcon } from "@lume/icons";
-import { createLazyFileRoute, useNavigate } from "@tanstack/react-router";
-import { invoke } from "@tauri-apps/api/core";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
-
-export const Route = createLazyFileRoute("/auth/import")({
-  component: Import,
-});
-
-function Import() {
-  const ark = useArk();
-  const navigate = useNavigate();
-
-  const [t] = useTranslation();
-  const [key, setKey] = useState("");
-  const [password, setPassword] = useState("");
-  const [loading, setLoading] = useState(false);
-
-  const submit = async () => {
-    if (!key.startsWith("nsec1")) return;
-    if (key.length < 30) return;
-
-    setLoading(true);
-
-    try {
-      const npub: string = await invoke("get_public_key", { nsec: key });
-      await ark.save_account({
-        npub,
-        nsec: key,
-      });
-      navigate({
-        to: "/$account/home/local",
-        params: { account: npub },
-        search: { onboarding: true },
-        replace: true,
-      });
-    } catch (e) {
-      setLoading(false);
-      toast.error(e);
-    }
-  };
-
-  const isNip05 = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(key);
-  const isNip49 = key.startsWith("ncryptsec");
-
-  return (
-    <div className="flex h-full w-full items-center justify-center">
-      <div className="mx-auto flex w-full max-w-md flex-col gap-8">
-        <div className="flex flex-col items-center gap-1 text-center">
-          <h1 className="text-2xl font-semibold">{t("login.title")}</h1>
-          <p className="text-lg leading-snug text-neutral-600 dark:text-neutral-500">
-            {t("login.subtitle")}
-          </p>
-        </div>
-        <div className="flex flex-col gap-6">
-          <div className="flex flex-col gap-4">
-            <div>
-              <input
-                value={key}
-                type="text"
-                onChange={(e) => setKey(e.target.value)}
-                className="h-12 w-full resize-none rounded-xl border-transparent bg-neutral-100 pl-3 pr-10 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"
-              />
-            </div>
-            {isNip05 || isNip49 ? (
-              <div className="flex flex-col gap-1.5">
-                <label
-                  htmlFor="password"
-                  className="font-medium text-neutral-900 dark:text-neutral-100"
-                >
-                  Password *
-                </label>
-                <input
-                  value={password}
-                  name="password"
-                  type="password"
-                  onChange={(e) => setPassword(e.target.value)}
-                  className="h-12 w-full resize-none rounded-xl border-transparent bg-neutral-100 pl-3 pr-10 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"
-                />
-              </div>
-            ) : null}
-          </div>
-          <button
-            type="button"
-            onClick={submit}
-            className="inline-flex h-12 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600 disabled:opacity-50"
-          >
-            {loading ? (
-              <LoaderIcon className="size-5 animate-spin" />
-            ) : (
-              "Import"
-            )}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/apps/desktop2/src/routes/auth/new/backup.tsx
+++ b/apps/desktop2/src/routes/auth/new/backup.tsx
@@ -0,0 +1,186 @@
+import { displayNsec } from "@lume/utils";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { invoke } from "@tauri-apps/api/core";
+import { writeText } from "@tauri-apps/plugin-clipboard-manager";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import * as Checkbox from "@radix-ui/react-checkbox";
+import { CheckIcon } from "@lume/icons";
+
+export const Route = createFileRoute("/auth/new/backup")({
+  component: Screen,
+});
+
+function Screen() {
+  // @ts-ignore, magic!!!
+  const { account } = Route.useSearch();
+  const { t } = useTranslation();
+
+  const [key, setKey] = useState(null);
+  const [passphase, setPassphase] = useState("");
+  const [copied, setCopied] = useState(false);
+  const [confirm, setConfirm] = useState({ c1: false, c2: false, c3: false });
+
+  const navigate = useNavigate();
+
+  const submit = async () => {
+    try {
+      if (key) {
+        if (!confirm.c1 || !confirm.c2 || !confirm.c3) {
+          return toast.warning("You need to confirm before continue");
+        } else {
+          return navigate({
+            to: "/auth/settings",
+            search: { account, new: true },
+          });
+        }
+      }
+
+      const encrypted: string = await invoke("get_encrypted_key", {
+        npub: account,
+        password: passphase,
+      });
+
+      setKey(encrypted);
+    } catch (e) {
+      toast.error(String(e));
+    }
+  };
+
+  const copyKey = async () => {
+    try {
+      await writeText(key);
+      setCopied(true);
+    } catch (e) {
+      toast.error(e);
+    }
+  };
+
+  return (
+    <div className="mx-auto flex h-full w-full flex-col items-center justify-center gap-6 px-5 xl:max-w-xl">
+      <div className="flex flex-col text-center">
+        <h3 className="text-xl font-semibold">Backup your sign in keys</h3>
+        <p className="text-neutral-700 dark:text-neutral-300">
+          It's use for login to Lume or other Nostr clients. You will lost
+          access to your account if you lose this key.
+        </p>
+      </div>
+      <div className="flex w-full flex-col gap-5">
+        <div className="flex flex-col gap-2">
+          <label htmlFor="passphase" className="font-medium">
+            Set a passphase to secure your key
+          </label>
+          <div className="relative">
+            <input
+              name="passphase"
+              type="password"
+              value={passphase}
+              onChange={(e) => setPassphase(e.target.value)}
+              className="h-11 w-full resize-none rounded-lg border-transparent bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"
+            />
+          </div>
+        </div>
+        {key ? (
+          <>
+            <div className="flex flex-col gap-2">
+              <label htmlFor="nsec" className="font-medium">
+                Copy this key and keep it in safe place
+              </label>
+              <div className="flex items-center gap-2">
+                <input
+                  name="nsec"
+                  type="text"
+                  value={displayNsec(key, 36)}
+                  readOnly
+                  className="h-11 w-full resize-none rounded-lg border-transparent bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-neutral-900 dark:focus:ring-blue-900"
+                />
+                <button
+                  type="button"
+                  onClick={copyKey}
+                  className="inline-flex h-11 w-24 items-center justify-center rounded-lg bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700"
+                >
+                  {copied ? "Copied" : "Copy"}
+                </button>
+              </div>
+            </div>
+            <div className="flex flex-col gap-2">
+              <div className="font-medium">Before you continue:</div>
+              <div className="flex flex-col gap-2">
+                <div className="flex items-center gap-2">
+                  <Checkbox.Root
+                    checked={confirm.c1}
+                    onCheckedChange={() =>
+                      setConfirm((state) => ({ ...state, c1: !state.c1 }))
+                    }
+                    className="flex size-6 appearance-none items-center justify-center rounded-md bg-neutral-100 outline-none dark:bg-neutral-900"
+                    id="confirm1"
+                  >
+                    <Checkbox.Indicator className="text-blue-500">
+                      <CheckIcon className="size-4" />
+                    </Checkbox.Indicator>
+                  </Checkbox.Root>
+                  <label
+                    className="text-sm leading-none text-neutral-800 dark:text-neutral-200"
+                    htmlFor="confirm1"
+                  >
+                    {t("backup.confirm1")}
+                  </label>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Checkbox.Root
+                    checked={confirm.c2}
+                    onCheckedChange={() =>
+                      setConfirm((state) => ({ ...state, c2: !state.c2 }))
+                    }
+                    className="flex size-6 appearance-none items-center justify-center rounded-md bg-neutral-100 outline-none dark:bg-neutral-900"
+                    id="confirm2"
+                  >
+                    <Checkbox.Indicator className="text-blue-500">
+                      <CheckIcon className="size-4" />
+                    </Checkbox.Indicator>
+                  </Checkbox.Root>
+                  <label
+                    className="text-sm leading-none text-neutral-800 dark:text-neutral-200"
+                    htmlFor="confirm2"
+                  >
+                    {t("backup.confirm2")}
+                  </label>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Checkbox.Root
+                    checked={confirm.c3}
+                    onCheckedChange={() =>
+                      setConfirm((state) => ({ ...state, c3: !state.c3 }))
+                    }
+                    className="flex size-6 appearance-none items-center justify-center rounded-md bg-neutral-100 outline-none dark:bg-neutral-900"
+                    id="confirm3"
+                  >
+                    <Checkbox.Indicator className="text-blue-500">
+                      <CheckIcon className="size-4" />
+                    </Checkbox.Indicator>
+                  </Checkbox.Root>
+                  <label
+                    className="text-sm leading-none text-neutral-800 dark:text-neutral-200"
+                    htmlFor="confirm3"
+                  >
+                    {t("backup.confirm3")}
+                  </label>
+                </div>
+              </div>
+            </div>
+          </>
+        ) : null}
+        <div>
+          <button
+            type="button"
+            onClick={submit}
+            className="inline-flex h-11 w-full shrink-0  items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
+          >
+            {t("global.continue")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/apps/desktop2/src/routes/auth/new/profile.tsx
+++ b/apps/desktop2/src/routes/auth/new/profile.tsx
@@ -0,0 +1,146 @@
+import { AvatarUploader } from "@/components/avatarUploader";
+import { LoaderIcon, PlusIcon } from "@lume/icons";
+import { Metadata } from "@lume/types";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/auth/new/profile")({
+  component: Screen,
+  loader: ({ context }) => {
+    return context.ark.create_keys();
+  },
+});
+
+function Screen() {
+  const keys = Route.useLoaderData();
+  const navigate = useNavigate();
+
+  const { t } = useTranslation();
+  const { ark } = Route.useRouteContext();
+  const { register, handleSubmit } = useForm();
+
+  const [picture, setPicture] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+
+  const onSubmit = async (data: {
+    name: string;
+    about: string;
+    website: string;
+  }) => {
+    setLoading(true);
+
+    try {
+      // Save account keys
+      const save = await ark.save_account(keys.nsec);
+
+      // Then create profile
+      if (save) {
+        const profile: Metadata = { ...data, picture };
+        const eventId = await ark.create_profile(profile);
+
+        if (eventId) {
+          navigate({
+            to: "/auth/new/backup",
+            search: { account: keys.npub },
+            replace: true,
+          });
+        }
+      }
+    } catch (e) {
+      setLoading(false);
+      toast.error(String(e));
+    }
+  };
+
+  return (
+    <div className="mx-auto flex h-full w-full flex-col items-center justify-center gap-6 px-5 xl:max-w-xl">
+      <div className="text-center">
+        <h3 className="text-xl font-semibold">Let's set up your profile.</h3>
+      </div>
+      <div>
+        <div className="relative size-24 rounded-full bg-gradient-to-tr from-orange-100 via-red-50 to-blue-200">
+          {picture ? (
+            <img
+              src={picture}
+              alt="avatar"
+              loading="lazy"
+              decoding="async"
+              className="absolute inset-0 z-10 h-full w-full rounded-full object-cover"
+            />
+          ) : null}
+          <AvatarUploader
+            setPicture={setPicture}
+            className="absolute inset-0 z-20 flex h-full w-full items-center justify-center rounded-full bg-black/10 text-white hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
+          >
+            <PlusIcon className="size-8" />
+          </AvatarUploader>
+        </div>
+      </div>
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className="flex w-full flex-col gap-3"
+      >
+        <div className="flex flex-col gap-1">
+          <label htmlFor="display_name" className="font-medium">
+            {t("user.displayName")} *
+          </label>
+          <input
+            type={"text"}
+            {...register("display_name", { required: true, minLength: 1 })}
+            placeholder="e.g. Alice in Nostrland"
+            spellCheck={false}
+            className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+          />
+        </div>
+        <div className="flex flex-col gap-1">
+          <label htmlFor="name" className="font-medium">
+            {t("user.name")}
+          </label>
+          <input
+            type={"text"}
+            {...register("name")}
+            placeholder="e.g. alice"
+            spellCheck={false}
+            className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+          />
+        </div>
+        <div className="flex flex-col gap-1">
+          <label htmlFor="about" className="font-medium">
+            {t("user.bio")}
+          </label>
+          <textarea
+            {...register("about")}
+            placeholder="e.g. Artist, anime-lover, and k-pop fan"
+            spellCheck={false}
+            className="relative h-24 w-full resize-none rounded-lg border-transparent bg-neutral-100 px-3 py-2 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+          />
+        </div>
+        <div className="flex flex-col gap-1">
+          <label htmlFor="website" className="font-medium">
+            {t("user.website")}
+          </label>
+          <input
+            type="url"
+            {...register("website")}
+            placeholder="e.g. https://alice.me"
+            spellCheck={false}
+            className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+          />
+        </div>
+        <button
+          type="submit"
+          className="mt-3 inline-flex h-11 w-full shrink-0  items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
+        >
+          {loading ? (
+            <LoaderIcon className="size-4 animate-spin" />
+          ) : (
+            t("global.continue")
+          )}
+        </button>
+      </form>
+    </div>
+  );
+}
--- a/apps/desktop2/src/routes/auth/privkey.lazy.tsx
+++ b/apps/desktop2/src/routes/auth/privkey.lazy.tsx
@@ -0,0 +1,90 @@
+import { LoaderIcon } from "@lume/icons";
+import { createLazyFileRoute, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { toast } from "sonner";
+
+export const Route = createLazyFileRoute("/auth/privkey")({
+  component: Screen,
+});
+
+function Screen() {
+  const { ark } = Route.useRouteContext();
+  const navigate = useNavigate();
+
+  const [key, setKey] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const submit = async () => {
+    if (!key.startsWith("nsec1"))
+      return toast.warning(
+        "You need to enter a valid private key starts with nsec or ncryptsec",
+      );
+    if (key.length < 30)
+      return toast.warning("You need to enter a valid private key");
+
+    setLoading(true);
+
+    try {
+      const npub = await ark.save_account(key, password);
+      navigate({
+        to: "/auth/settings",
+        search: { account: npub, new: false },
+        replace: true,
+      });
+    } catch (e) {
+      toast.error(e);
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <div className="mx-auto flex h-full w-full flex-col items-center justify-center gap-6 px-5 xl:max-w-xl">
+      <div className="text-center">
+        <h3 className="text-xl font-semibold">Continue with Private Key</h3>
+      </div>
+      <div className="flex w-full flex-col gap-3">
+        <div className="flex flex-col gap-1">
+          <label
+            htmlFor="key"
+            className="font-medium text-neutral-900 dark:text-neutral-100"
+          >
+            Private Key
+          </label>
+          <input
+            name="key"
+            type="text"
+            placeholder="nsec or ncryptsec..."
+            value={key}
+            onChange={(e) => setKey(e.target.value)}
+            className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+          />
+        </div>
+        <div className="flex flex-col gap-1">
+          <label
+            htmlFor="password"
+            className="font-medium text-neutral-900 dark:text-neutral-100"
+          >
+            Password (Optional)
+          </label>
+          <input
+            name="password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+          />
+        </div>
+        <button
+          type="button"
+          onClick={submit}
+          disabled={loading}
+          className="mt-3 inline-flex h-11 w-full shrink-0  items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
+        >
+          {loading ? <LoaderIcon className="size-4 animate-spin" /> : "Login"}
+        </button>
+      </div>
+    </div>
+  );
+}
--- a/apps/desktop2/src/routes/settings/index.lazy.tsx
+++ b/apps/desktop2/src/routes/settings/index.lazy.tsx
@@ -1,9 +1,9 @@
 import { createLazyFileRoute } from "@tanstack/react-router";

-export const Route = createLazyFileRoute("/settings/")({
+export const Route = createLazyFileRoute("/auth/remote")({
  component: Screen,
 });

 function Screen() {
-  return <div>Settings</div>;
+  return <div>#todo</div>;
 }
--- a/apps/desktop2/src/routes/auth/settings.tsx
+++ b/apps/desktop2/src/routes/auth/settings.tsx
@@ -0,0 +1,188 @@
+import { LaurelIcon, LoaderIcon } from "@lume/icons";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import * as Switch from "@radix-ui/react-switch";
+import { useState } from "react";
+import { AppRouteSearch, Settings } from "@lume/types";
+import {
+  isPermissionGranted,
+  requestPermission,
+} from "@tauri-apps/plugin-notification";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/auth/settings")({
+  validateSearch: (search: Record<string, string>): AppRouteSearch => {
+    return {
+      account: search.account,
+    };
+  },
+  beforeLoad: async ({ context }) => {
+    const permissionGranted = await isPermissionGranted(); // get notification permission
+    const ark = context.ark;
+    const settings = await ark.get_settings();
+
+    return {
+      settings: { ...settings, notification: permissionGranted },
+    };
+  },
+  component: Screen,
+  pendingComponent: Pending,
+});
+
+function Screen() {
+  const navigate = useNavigate();
+
+  const { account } = Route.useSearch();
+  const { t } = useTranslation();
+  const { ark, settings } = Route.useRouteContext();
+
+  const [newSettings, setNewSettings] = useState<Settings>(settings);
+
+  const toggleNofitication = async () => {
+    await requestPermission();
+    setNewSettings((prev) => ({
+      ...prev,
+      notification: !settings.notification,
+    }));
+  };
+
+  const toggleAutoUpdate = () => {
+    setNewSettings((prev) => ({
+      ...prev,
+      autoUpdate: !settings.autoUpdate,
+    }));
+  };
+
+  const toggleEnhancedPrivacy = () => {
+    setNewSettings((prev) => ({
+      ...prev,
+      enhancedPrivacy: !settings.enhancedPrivacy,
+    }));
+  };
+
+  const toggleZap = () => {
+    setNewSettings((prev) => ({
+      ...prev,
+      zap: !settings.zap,
+    }));
+  };
+
+  const submit = async () => {
+    try {
+      const eventId = await ark.set_settings(settings);
+      if (eventId) {
+        navigate({ to: "/$account/home", params: { account }, replace: true });
+      }
+    } catch (e) {
+      toast.error(e);
+    }
+  };
+
+  return (
+    <div className="mx-auto flex h-full w-full flex-col items-center justify-center gap-6 px-5 xl:max-w-xl">
+      <div className="flex flex-col items-center gap-5 text-center">
+        <div className="flex size-20 items-center justify-center rounded-full bg-teal-100 text-teal-500">
+          <LaurelIcon className="size-8" />
+        </div>
+        <div>
+          <h1 className="text-xl font-semibold">
+            {t("onboardingSettings.title")}
+          </h1>
+          <p className="leading-snug text-neutral-600 dark:text-neutral-400">
+            {t("onboardingSettings.subtitle")}
+          </p>
+        </div>
+      </div>
+      <div className="flex flex-col gap-5">
+        <div className="flex flex-col gap-3">
+          <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
+            <Switch.Root
+              checked={newSettings.notification}
+              onClick={() => toggleNofitication()}
+              className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+            >
+              <Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+            </Switch.Root>
+            <div className="flex-1">
+              <h3 className="font-semibold">Push Notification</h3>
+              <p className="text-sm text-neutral-700 dark:text-neutral-300">
+                Enabling push notifications will allow you to receive
+                notifications from Lume.
+              </p>
+            </div>
+          </div>
+          <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
+            <Switch.Root
+              checked={newSettings.enhancedPrivacy}
+              onClick={() => toggleEnhancedPrivacy()}
+              className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+            >
+              <Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+            </Switch.Root>
+            <div className="flex-1">
+              <h3 className="font-semibold">Enhanced Privacy</h3>
+              <p className="text-sm text-neutral-700 dark:text-neutral-300">
+                Lume will display external resources like image, video or link
+                preview as plain text.
+              </p>
+            </div>
+          </div>
+          <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
+            <Switch.Root
+              checked={newSettings.autoUpdate}
+              onClick={() => toggleAutoUpdate()}
+              className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+            >
+              <Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+            </Switch.Root>
+            <div className="flex-1">
+              <h3 className="font-semibold">Auto Update</h3>
+              <p className="text-sm text-neutral-700 dark:text-neutral-300">
+                Automatically download and install new version.
+              </p>
+            </div>
+          </div>
+          <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-100 px-5 py-4 dark:bg-neutral-900">
+            <Switch.Root
+              checked={newSettings.zap}
+              onClick={() => toggleZap()}
+              className="relative mt-1 h-7 w-12 shrink-0 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+            >
+              <Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+            </Switch.Root>
+            <div className="flex-1">
+              <h3 className="font-semibold">Zap</h3>
+              <p className="text-sm text-neutral-700 dark:text-neutral-300">
+                Show the Zap button in each note and user's profile screen, use
+                for send Bitcoin tip to other users.
+              </p>
+            </div>
+          </div>
+          <div className="flex w-full items-start justify-between gap-4 rounded-lg bg-neutral-50 px-5 py-4 dark:bg-neutral-950">
+            <p className="text-sm text-neutral-700 dark:text-neutral-300">
+              There are many more settings you can configure from the 'Settings'
+              Screen. Be sure to visit it later.
+            </p>
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={submit}
+          className="inline-flex h-11 w-full shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
+        >
+          {t("global.continue")}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function Pending() {
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <button type="button" className="size-5" disabled>
+        <LoaderIcon className="size-5 animate-spin" />
+      </button>
+    </div>
+  );
+}
--- a/apps/desktop2/src/routes/create-group.tsx
+++ b/apps/desktop2/src/routes/create-group.tsx
@@ -0,0 +1,117 @@
+import { CheckCircleIcon } from "@lume/icons";
+import { ColumnRouteSearch } from "@lume/types";
+import { Column, User } from "@lume/ui";
+import { createFileRoute, useRouter } from "@tanstack/react-router";
+import { useState } from "react";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/create-group")({
+  validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+    return {
+      account: search.account,
+      label: search.label,
+      name: search.name,
+    };
+  },
+  loader: async ({ context }) => {
+    const ark = context.ark;
+    const contacts = await ark.get_contact_list();
+    return contacts;
+  },
+  component: Screen,
+});
+
+function Screen() {
+  const contacts = Route.useLoaderData();
+  const router = useRouter();
+
+  const { ark } = Route.useRouteContext();
+  const { label, name, redirect } = Route.useSearch();
+
+  const [title, setTitle] = useState<string>("Just a new group");
+  const [users, setUsers] = useState<Array<string>>([]);
+  const [isDone, setIsDone] = useState(false);
+
+  const toggleUser = (pubkey: string) => {
+    const arr = users.includes(pubkey)
+      ? users.filter((i) => i !== pubkey)
+      : [...users, pubkey];
+    setUsers(arr);
+  };
+
+  const submit = async () => {
+    try {
+      if (isDone) return router.history.push(redirect);
+
+      const groups = await ark.set_nstore(
+        `lume_group_${label}`,
+        JSON.stringify(users),
+      );
+
+      if (groups) setIsDone(true);
+    } catch (e) {
+      toast.error(e);
+    }
+  };
+
+  return (
+    <Column.Root>
+      <Column.Header label={label} name={name} />
+      <Column.Content>
+        <div className="flex flex-col gap-5 p-3">
+          <div className="flex flex-col gap-1">
+            <label htmlFor="name" className="font-medium">
+              Name
+            </label>
+            <input
+              name="name"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="Nostrichs..."
+              className="h-11 rounded-lg border-transparent bg-neutral-100 px-3 placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+            />
+          </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-xs text-neutral-600 dark:text-neutral-400">{`${users.length} / ∞`}</span>
+            </div>
+            <div className="flex flex-col gap-2">
+              {contacts.map((item: string) => (
+                <button
+                  key={item}
+                  type="button"
+                  onClick={() => toggleUser(item)}
+                  className="inline-flex items-center justify-between px-3 py-2 rounded-xl bg-neutral-50 dark:bg-neutral-950 hover:bg-neutral-100 dark:hover:bg-neutral-900"
+                >
+                  <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 flex-col items-start">
+                        <User.Name className="font-medium" />
+                        <User.NIP05 className="text-neutral-700 dark:text-neutral-300" />
+                      </div>
+                    </User.Root>
+                  </User.Provider>
+                  {users.includes(item) ? (
+                    <CheckCircleIcon className="size-5 text-teal-500" />
+                  ) : null}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="fixed z-10 flex items-center justify-center w-full bottom-3">
+          <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-36 h-11 hover:bg-blue-600 focus:outline-none disabled:cursor-not-allowed"
+          >
+            {isDone ? "Back" : "Update"}
+          </button>
+        </div>
+      </Column.Content>
+    </Column.Root>
+  );
+}
--- a/apps/desktop2/src/routes/editor/-components/media.tsx
+++ b/apps/desktop2/src/routes/editor/-components/media.tsx
@@ -1,4 +1,3 @@
-import { useArk } from "@lume/ark";
 import { AddMediaIcon, LoaderIcon } from "@lume/icons";
 import { cn, insertImage, isImagePath } from "@lume/utils";
 import { useEffect, useState } from "react";
@@ -6,9 +5,10 @@ import { useSlateStatic } from "slate-react";
 import { toast } from "sonner";
 import { getCurrent } from "@tauri-apps/api/window";
 import { UnlistenFn } from "@tauri-apps/api/event";
+import { useRouteContext } from "@tanstack/react-router";

 export function MediaButton({ className }: { className?: string }) {
-  const ark = useArk();
+  const { ark } = useRouteContext({ strict: false });
  const editor = useSlateStatic();

  const [loading, setLoading] = useState(false);
--- a/apps/desktop2/src/routes/editor/index.tsx
+++ b/apps/desktop2/src/routes/editor/index.tsx
@@ -1,4 +1,3 @@
-import { useArk } from "@lume/ark";
 import { LoaderIcon, TrashIcon } from "@lume/icons";
 import {
  Portal,
@@ -61,6 +60,7 @@ export const Route = createFileRoute("/editor/")({
 function Screen() {
  // @ts-ignore, useless
  const { reply_to, quote } = Route.useSearch();
+  const { ark } = Route.useRouteContext();

  let initialValue: EditorElement[];

@@ -89,7 +89,6 @@ function Screen() {
    ];
  }

-  const ark = useArk();
  const ref = useRef<HTMLDivElement | null>();
  const contacts = useSuspenseQuery(contactQueryOptions).data as Contact[];

@@ -149,11 +148,12 @@ function Screen() {

      if (eventId) {
        await sendNativeNotification("You've publish new post successfully.");
-        return reset();
      }

      // stop loading
      setLoading(false);
+      // reset form
+      reset();
    } catch (e) {
      setLoading(false);
      await sendNativeNotification(String(e));
@@ -210,7 +210,7 @@ function Screen() {
          <button
            type="button"
            onClick={publish}
-            className="inline-flex h-9 w-24 items-center justify-center rounded-full bg-blue-500 px-3 text-sm font-medium text-white hover:bg-blue-600"
+            className="inline-flex h-9 w-24 items-center justify-center rounded-full bg-blue-500 px-3 font-medium text-white hover:bg-blue-600"
          >
            {loading ? (
              <LoaderIcon className="size-5 animate-spin" />
@@ -221,12 +221,7 @@ function Screen() {
        </div>
        <div className="flex h-full min-h-0 w-full">
          <div className="flex h-full w-full flex-1 flex-col gap-2 px-2 pb-2">
-            {reply_to && !quote ? (
-              <div className="flex flex-col rounded-xl bg-white p-5 shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-none dark:ring-1 dark:ring-white/5">
-                <h3 className="font-medium">Reply to:</h3>
-                <MentionNote eventId={reply_to} />
-              </div>
-            ) : null}
+            {reply_to && !quote ? <MentionNote eventId={reply_to} /> : null}
            <div className="h-full w-full flex-1 overflow-hidden overflow-y-auto rounded-xl bg-white p-5 shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-none dark:ring-1 dark:ring-white/5">
              <Editable
                key={JSON.stringify(editorValue)}
@@ -235,7 +230,9 @@ function Screen() {
                autoCorrect="none"
                spellCheck={false}
                renderElement={(props) => <Element {...props} />}
-                placeholder={t("editor.placeholder")}
+                placeholder={
+                  reply_to ? "Type your reply..." : t("editor.placeholder")
+                }
                className="focus:outline-none"
              />
              {target && filters.length > 0 && (
@@ -278,8 +275,13 @@ function Screen() {

 function Pending() {
  return (
-    <div className="flex h-full w-full items-center justify-center gap-2.5">
-      <LoaderIcon className="size-5 animate-spin" />
+    <div
+      data-tauri-drag-region
+      className="flex h-full w-full items-center justify-center gap-2.5"
+    >
+      <button type="button" disabled>
+        <LoaderIcon className="size-5 animate-spin" />
+      </button>
      <p>Loading cache...</p>
    </div>
  );
--- a/apps/desktop2/src/routes/events/$eventId.lazy.tsx
+++ b/apps/desktop2/src/routes/events/$eventId.lazy.tsx
@@ -2,9 +2,9 @@ import { useEvent } from "@lume/ark";
 import { LoaderIcon } from "@lume/icons";
 import { Box, Container, Note, User } from "@lume/ui";
 import { createLazyFileRoute } from "@tanstack/react-router";
-import { WindowVirtualizer } from "virtua";
 import { ReplyList } from "./-components/replyList";
-import { Event } from "@lume/types";
+import { WindowVirtualizer } from "virtua";
+import { type Event } from "@lume/types";

 export const Route = createLazyFileRoute("/events/$eventId")({
  component: Event,
@@ -29,14 +29,14 @@ function Event() {
  }

  return (
-    <WindowVirtualizer>
-      <Container withDrag>
-        <Box className="px-3 pt-3">
+    <Container withDrag>
+      <Box className="px-3 pt-3 scrollbar-none">
+        <WindowVirtualizer>
          <MainNote data={data} />
          {data ? <ReplyList eventId={eventId} /> : null}
-        </Box>
-      </Container>
-    </WindowVirtualizer>
+        </WindowVirtualizer>
+      </Box>
+    </Container>
  );
 }

@@ -58,7 +58,7 @@ function MainNote({ data }: { data: Event }) {
          </User.Root>
        </User.Provider>
        <Note.Thread className="mb-2" />
-        <Note.Content className="min-w-0" />
+        <Note.Content className="min-w-0" compact={false} />
        <div className="mt-4 flex items-center justify-between">
          <div className="-ml-1 inline-flex items-center gap-4">
            <Note.Repost />
--- a/apps/desktop2/src/routes/events/-components/replyList.tsx
+++ b/apps/desktop2/src/routes/events/-components/replyList.tsx
@@ -1,10 +1,10 @@
-import { useArk } from "@lume/ark";
 import { LoaderIcon } from "@lume/icons";
 import { cn } from "@lume/utils";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { EventWithReplies } from "@lume/types";
 import { Reply } from "./reply";
+import { useRouteContext } from "@tanstack/react-router";

 export function ReplyList({
  eventId,
@@ -13,8 +13,7 @@ export function ReplyList({
  eventId: string;
  className?: string;
 }) {
-  const ark = useArk();
-
+  const { ark } = useRouteContext({ strict: false });
  const [t] = useTranslation();
  const [data, setData] = useState<null | EventWithReplies[]>(null);

--- a/apps/desktop2/src/routes/foryou.tsx
+++ b/apps/desktop2/src/routes/foryou.tsx
@@ -0,0 +1,129 @@
+import { RepostNote } from "@/components/repost";
+import { Suggest } from "@/components/suggest";
+import { TextNote } from "@/components/text";
+import { LoaderIcon, ArrowRightCircleIcon, InfoIcon } from "@lume/icons";
+import { ColumnRouteSearch, Event, Kind } from "@lume/types";
+import { Column } from "@lume/ui";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+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();
+
+    if (!interests) {
+      throw redirect({
+        to: "/interests",
+        search: {
+          ...search,
+          redirect: "/foryou",
+        },
+      });
+    }
+
+    return {
+      interests,
+    };
+  },
+  component: Screen,
+});
+
+export function Screen() {
+  const { label, name, account } = Route.useSearch();
+  const { ark, interests } = Route.useRouteContext();
+  const { t } = useTranslation();
+  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } =
+    useInfiniteQuery({
+      queryKey: [name, account],
+      initialPageParam: 0,
+      queryFn: async ({ pageParam }: { pageParam: number }) => {
+        const events = await ark.get_events_from_interests(
+          interests.hashtags,
+          20,
+          pageParam,
+          true,
+        );
+        return events;
+      },
+      getNextPageParam: (lastPage) => {
+        const lastEvent = lastPage?.at(-1);
+        return lastEvent ? lastEvent.created_at - 1 : null;
+      },
+      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:
+        return <TextNote key={event.id} event={event} />;
+    }
+  };
+
+  return (
+    <Column.Root>
+      <Column.Header label={label} name={name} />
+      <Column.Content>
+        {isLoading ? (
+          <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
+            <button type="button" className="size-5" disabled>
+              <LoaderIcon className="size-5 animate-spin" />
+            </button>
+          </div>
+        ) : !data.length ? (
+          <div className="flex flex-col gap-3 p-3">
+            <div className="flex items-center gap-2 rounded-xl bg-neutral-100 p-5 dark:bg-neutral-900">
+              <InfoIcon className="size-6" />
+              <div>
+                <p className="font-medium leading-tight">
+                  {t("global.emptyFeedTitle")}
+                </p>
+                <p className="leading-tight text-neutral-700 dark:text-neutral-300">
+                  {t("global.emptyFeedSubtitle")}
+                </p>
+              </div>
+            </div>
+            <Suggest />
+          </div>
+        ) : (
+          <Virtualizer overscan={3}>
+            {data.map((item) => renderItem(item))}
+          </Virtualizer>
+        )}
+
+        {data?.length && hasNextPage ? (
+          <div className="flex h-20 items-center justify-center">
+            <button
+              type="button"
+              onClick={() => fetchNextPage()}
+              disabled={isFetchingNextPage || 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 ? (
+                <LoaderIcon className="size-5 animate-spin" />
+              ) : (
+                <>
+                  <ArrowRightCircleIcon className="size-5" />
+                  Load more
+                </>
+              )}
+            </button>
+          </div>
+        ) : null}
+      </Column.Content>
+    </Column.Root>
+  );
+}
--- a/apps/desktop2/src/routes/global.lazy.tsx
+++ b/apps/desktop2/src/routes/global.lazy.tsx
@@ -0,0 +1,100 @@
+import { RepostNote } from "@/components/repost";
+import { Suggest } from "@/components/suggest";
+import { TextNote } from "@/components/text";
+import { LoaderIcon, ArrowRightCircleIcon, InfoIcon } from "@lume/icons";
+import { Event, Kind } from "@lume/types";
+import { Column } from "@lume/ui";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import { Virtualizer } from "virtua";
+
+export const Route = createLazyFileRoute("/global")({
+  component: Screen,
+});
+
+export function Screen() {
+  // @ts-ignore, just work!!!
+  const { id, name, account } = Route.useSearch();
+  const { ark } = Route.useRouteContext();
+  const { t } = useTranslation();
+  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } =
+    useInfiniteQuery({
+      queryKey: ["global", account],
+      initialPageParam: 0,
+      queryFn: async ({ pageParam }: { pageParam: number }) => {
+        const events = await ark.get_events(20, pageParam, undefined, true);
+        return events;
+      },
+      getNextPageParam: (lastPage) => {
+        const lastEvent = lastPage?.at(-1);
+        return lastEvent ? lastEvent.created_at - 1 : null;
+      },
+      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:
+        return <TextNote key={event.id} event={event} />;
+    }
+  };
+
+  return (
+    <Column.Root>
+      <Column.Header id={id} name={name} />
+      <Column.Content>
+        {isLoading ? (
+          <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
+            <button type="button" className="size-5" disabled>
+              <LoaderIcon className="size-5 animate-spin" />
+            </button>
+          </div>
+        ) : !data.length ? (
+          <div className="flex flex-col gap-3 p-3">
+            <div className="flex items-center gap-2 rounded-xl bg-neutral-100 p-5 dark:bg-neutral-900">
+              <InfoIcon className="size-6" />
+              <div>
+                <p className="font-medium leading-tight">
+                  {t("global.emptyFeedTitle")}
+                </p>
+                <p className="leading-tight text-neutral-700 dark:text-neutral-300">
+                  {t("global.emptyFeedSubtitle")}
+                </p>
+              </div>
+            </div>
+            <Suggest />
+          </div>
+        ) : (
+          <Virtualizer overscan={3}>
+            {data.map((item) => renderItem(item))}
+          </Virtualizer>
+        )}
+
+        {data?.length && hasNextPage ? (
+          <div className="flex h-20 items-center justify-center">
+            <button
+              type="button"
+              onClick={() => fetchNextPage()}
+              disabled={isFetchingNextPage || 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 ? (
+                <LoaderIcon className="size-5 animate-spin" />
+              ) : (
+                <>
+                  <ArrowRightCircleIcon className="size-5" />
+                  Load more
+                </>
+              )}
+            </button>
+          </div>
+        ) : null}
+      </Column.Content>
+    </Column.Root>
+  );
+}
--- a/apps/desktop2/src/routes/group.tsx
+++ b/apps/desktop2/src/routes/group.tsx
@@ -0,0 +1,117 @@
+import { RepostNote } from "@/components/repost";
+import { Suggest } from "@/components/suggest";
+import { TextNote } from "@/components/text";
+import { LoaderIcon, ArrowRightCircleIcon, InfoIcon } from "@lume/icons";
+import { ColumnRouteSearch, Event, Kind } from "@lume/types";
+import { Column } from "@lume/ui";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+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}`);
+
+    if (!groups) {
+      throw redirect({
+        to: "/create-group",
+        search: {
+          ...search,
+          redirect: "/group",
+        },
+      });
+    }
+
+    return {
+      groups,
+    };
+  },
+  component: Screen,
+});
+
+export function Screen() {
+  const { label, name, account } = Route.useSearch();
+  const { ark } = Route.useRouteContext();
+  const { t } = useTranslation();
+  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } =
+    useInfiniteQuery({
+      queryKey: [name, account],
+      initialPageParam: 0,
+      queryFn: async ({ pageParam }: { pageParam: number }) => {
+        const events = await ark.get_events(20, pageParam);
+        return events;
+      },
+      getNextPageParam: (lastPage) => {
+        const lastEvent = lastPage?.at(-1);
+        return lastEvent ? lastEvent.created_at - 1 : null;
+      },
+      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:
+        return <TextNote key={event.id} event={event} />;
+    }
+  };
+
+  return (
+    <Column.Root>
+      <Column.Header label={label} name={name} />
+      <Column.Content>
+        {isLoading ? (
+          <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
+            <LoaderIcon className="size-5 animate-spin" />
+          </div>
+        ) : !data.length ? (
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center gap-2 rounded-xl bg-neutral-50 p-5 dark:bg-neutral-950">
+              <InfoIcon className="size-6" />
+              <div>
+                <p className="leading-tight">{t("emptyFeedTitle")}</p>
+                <p className="leading-tight">{t("emptyFeedSubtitle")}</p>
+              </div>
+            </div>
+            <Suggest />
+          </div>
+        ) : (
+          <Virtualizer overscan={3}>
+            {data.map((item) => renderItem(item))}
+          </Virtualizer>
+        )}
+        <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 ? (
+                <LoaderIcon className="size-5 animate-spin" />
+              ) : (
+                <>
+                  <ArrowRightCircleIcon className="size-5" />
+                  Load more
+                </>
+              )}
+            </button>
+          ) : null}
+        </div>
+      </Column.Content>
+    </Column.Root>
+  );
+}
--- a/apps/desktop2/src/routes/index.tsx
+++ b/apps/desktop2/src/routes/index.tsx
@@ -1,4 +1,3 @@
-import { useArk } from "@lume/ark";
 import { LoaderIcon, PlusIcon } from "@lume/icons";
 import { User } from "@lume/ui";
 import { Link } from "@tanstack/react-router";
@@ -6,55 +5,52 @@ import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router";
 import { useState } from "react";

 export const Route = createFileRoute("/")({
-  beforeLoad: async ({ search, context }) => {
+  beforeLoad: async ({ context }) => {
    const ark = context.ark;
    const accounts = await ark.get_all_accounts();

    switch (accounts.length) {
      // Guest account
      case 0:
-        const guest = await ark.create_guest_account();
        throw redirect({
-          to: "/$account/home/local",
-          params: { account: guest },
-          search: { guest: true },
+          to: "/landing",
          replace: true,
        });
      // Only 1 account, skip account selection screen
      case 1:
-        // @ts-ignore, totally fine !!!
-        if (search.manually) return;
-
        const account = accounts[0].npub;
        const loadedAccount = await ark.load_selected_account(account);

        if (loadedAccount) {
          throw redirect({
-            to: "/$account/home/local",
+            to: "/$account/home",
            params: { account },
            replace: true,
          });
        }
      // Account selection
      default:
-        return;
+        return { accounts };
    }
  },
  component: Screen,
 });

 function Screen() {
-  const ark = useArk();
  const navigate = useNavigate();
+  const context = Route.useRouteContext();

  const [loading, setLoading] = useState(false);

  const select = async (npub: string) => {
    setLoading(true);
+
+    const ark = context.ark;
    const loadAccount = await ark.load_selected_account(npub);
+
    if (loadAccount) {
-      navigate({
-        to: "/$account/home/local",
+      return navigate({
+        to: "/$account/home",
        params: { account: npub },
        replace: true,
      });
@@ -81,7 +77,7 @@ function Screen() {
            </div>
          ) : (
            <>
-              {ark.accounts.map((account) => (
+              {context.accounts.map((account) => (
                <button
                  type="button"
                  key={account.npub}
--- a/apps/desktop2/src/routes/interests.tsx
+++ b/apps/desktop2/src/routes/interests.tsx
@@ -0,0 +1,122 @@
+import { ColumnRouteSearch } from "@lume/types";
+import { Column } from "@lume/ui";
+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")({
+  component: Screen,
+  validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+    return {
+      account: search.account,
+      label: search.label,
+      name: search.name,
+    };
+  },
+});
+
+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 (
+    <Column.Root>
+      <Column.Header label={label} name={name} />
+      <Column.Content>
+        <div className="sticky left-0 top-0 flex h-16 w-full items-center justify-between border-b border-neutral-100 bg-white px-3 dark:border-neutral-900 dark:bg-black">
+          <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 w-full flex-col p-3">
+          <div className="flex flex-col gap-8">
+            {TOPICS.map((topic) => (
+              <div key={topic.title} className="flex flex-col gap-4">
+                <div className="flex w-full items-center justify-between">
+                  <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="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>
+      </Column.Content>
+    </Column.Root>
+  );
+}
--- a/apps/desktop2/src/routes/landing/index.tsx
+++ b/apps/desktop2/src/routes/landing/index.tsx
@@ -1,3 +1,4 @@
+import { KeyIcon, RemoteIcon } from "@lume/icons";
 import { Link, createFileRoute } from "@tanstack/react-router";
 import { useTranslation } from "react-i18next";

@@ -6,52 +7,77 @@ export const Route = createFileRoute("/landing/")({
 });

 function Screen() {
-  const context = Route.useRouteContext();
  const { t } = useTranslation();

  return (
-    <div className="flex h-screen w-screen bg-black">
-      <div className="flex h-full w-full flex-col items-center justify-between">
+    <div className="relative flex h-screen w-screen bg-black">
+      <div
+        data-tauri-drag-region
+        className="absolute left-0 top-0 z-50 h-16 w-full"
+      />
+      <div className="z-20 flex h-full w-full flex-col items-center justify-between">
        <div />
        <div className="mx-auto flex w-full max-w-4xl flex-col items-center gap-10">
          <div className="flex flex-col items-center text-center">
            <img
-              src={`/heading-${context.locale}.png`}
-              srcSet={`/heading-${context.locale}@2x.png 2x`}
+              src={`/heading-en.png`}
+              srcSet={`/heading-en@2x.png 2x`}
              alt="lume"
-              className="w-2/3"
+              className="xl:w-2/3"
            />
-            <p className="mt-5 whitespace-pre-line text-lg font-medium leading-snug text-neutral-700">
+            <p className="mt-4 whitespace-pre-line text-lg font-medium leading-snug text-white/70">
              {t("welcome.title")}
            </p>
          </div>
-          <div className="mx-auto flex w-full max-w-sm flex-col gap-2">
+          <div className="mx-auto flex w-full max-w-sm flex-col gap-4">
            <Link
-              to="/auth/create"
-              className="inline-flex h-12 w-full items-center justify-center rounded-xl bg-blue-500 text-lg font-medium text-white hover:bg-blue-600"
+              to="/auth/new/profile"
+              className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-white font-medium text-blue-500 backdrop-blur-lg hover:bg-white/90"
            >
              {t("welcome.signup")}
            </Link>
-            <Link
-              to="/auth/import"
-              className="inline-flex h-12 w-full items-center justify-center rounded-xl bg-neutral-950 text-lg font-medium text-white hover:bg-neutral-900"
-            >
-              {t("welcome.login")}
-            </Link>
+            <div className="flex items-center gap-2">
+              <div className="h-px flex-1 bg-white/20" />
+              <div className="text-white/70">{t("login.or")}</div>
+              <div className="h-px flex-1 bg-white/20" />
+            </div>
+            <div className="flex flex-col gap-2">
+              <Link
+                to="/auth/remote"
+                className="group inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-white/20 px-3 font-medium text-white backdrop-blur-md hover:bg-white/40"
+              >
+                <RemoteIcon className="size-5 text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-400 dark:group-hover:text-neutral-600" />
+                Nostr Connect
+                <div className="size-5" />
+              </Link>
+              <Link
+                to="/auth/privkey"
+                className="group inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-white/20 px-3 font-medium text-white backdrop-blur-md hover:bg-white/40"
+              >
+                <KeyIcon className="size-5 text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-400 dark:group-hover:text-neutral-600" />
+                Private Key
+                <div className="size-5" />
+              </Link>
+            </div>
          </div>
        </div>
-        <div className="flex h-11 items-center justify-center">
-          <p className="text-neutral-800">
-            {t("welcome.footer")}{" "}
-            <Link
-              to="https://nostr.com"
-              target="_blank"
-              className="text-blue-500"
-            >
-              here
-            </Link>
-          </p>
-        </div>
+        <div className="flex h-11 items-center justify-center"></div>
+      </div>
+      <div className="absolute z-10 h-full w-full bg-black/5 backdrop-blur-sm" />
+      <div className="absolute inset-0 h-full w-full">
+        <img
+          src="/lock-screen.jpg"
+          srcSet="/lock-screen@2x.jpg 2x"
+          alt="Lock Screen Background"
+          className="h-full w-full object-cover"
+        />
+        <a
+          href="https://njump.me/nprofile1qqs9tuz9jpn57djg7nxunhyvuvk69g5zqaxdpvpqt9hwqv7395u9rpg6zq5uw"
+          target="_blank"
+          className="absolute bottom-3 right-3 z-50 rounded-md bg-white/20 px-2 py-1 text-xs font-medium text-white backdrop-blur-md dark:bg-black/20"
+        >
+          Design by NoGood
+        </a>
      </div>
    </div>
  );
--- a/apps/desktop2/src/routes/newsfeed.tsx
+++ b/apps/desktop2/src/routes/newsfeed.tsx
@@ -0,0 +1,258 @@
+import { Suggest } from "@/components/suggest";
+import {
+  LoaderIcon,
+  ArrowRightCircleIcon,
+  InfoIcon,
+  RepostIcon,
+} from "@lume/icons";
+import { ColumnRouteSearch, Event, Kind } from "@lume/types";
+import { Column, Note, User } from "@lume/ui";
+import { cn } from "@lume/utils";
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+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();
+
+    return { settings };
+  },
+  component: Screen,
+});
+
+export function Screen() {
+  const { label, name, account } = Route.useSearch();
+  const { ark } = Route.useRouteContext();
+  const { t } = useTranslation();
+  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } =
+    useInfiniteQuery({
+      queryKey: [name, account],
+      initialPageParam: 0,
+      queryFn: async ({ pageParam }: { pageParam: number }) => {
+        const events = await ark.get_events(20, pageParam);
+        return events;
+      },
+      getNextPageParam: (lastPage) => {
+        const lastEvent = lastPage?.at(-1);
+        return lastEvent ? lastEvent.created_at - 1 : null;
+      },
+      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:
+        return <TextNote key={event.id} event={event} />;
+    }
+  };
+
+  return (
+    <Column.Root>
+      <Column.Header label={label} name={name} />
+      <Column.Content>
+        {isLoading ? (
+          <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
+            <button type="button" className="size-5" disabled>
+              <LoaderIcon className="size-5 animate-spin" />
+            </button>
+          </div>
+        ) : !data.length ? (
+          <div className="flex flex-col gap-3 p-3">
+            <div className="flex items-center gap-2 rounded-xl bg-neutral-100 p-5 dark:bg-neutral-900">
+              <InfoIcon className="size-6" />
+              <div>
+                <p className="font-medium leading-tight">
+                  {t("global.emptyFeedTitle")}
+                </p>
+                <p className="leading-tight text-neutral-700 dark:text-neutral-300">
+                  {t("global.emptyFeedSubtitle")}
+                </p>
+              </div>
+            </div>
+            <Suggest />
+          </div>
+        ) : (
+          <Virtualizer overscan={3}>
+            {data.map((item) => renderItem(item))}
+          </Virtualizer>
+        )}
+
+        {data?.length && hasNextPage ? (
+          <div className="flex h-20 items-center justify-center">
+            <button
+              type="button"
+              onClick={() => fetchNextPage()}
+              disabled={isFetchingNextPage || 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 ? (
+                <LoaderIcon className="size-5 animate-spin" />
+              ) : (
+                <>
+                  <ArrowRightCircleIcon className="size-5" />
+                  Load more
+                </>
+              )}
+            </button>
+          </div>
+        ) : null}
+      </Column.Content>
+    </Column.Root>
+  );
+}
+
+function TextNote({ event, className }: { event: Event; className?: string }) {
+  const { settings } = Route.useRouteContext();
+
+  return (
+    <Note.Provider event={event}>
+      <Note.Root
+        className={cn(
+          "flex flex-col gap-2 border-b border-neutral-100 px-3 py-5 dark:border-neutral-900",
+          className,
+        )}
+      >
+        <Note.User />
+        <div className="flex gap-3">
+          <div className="size-11 shrink-0" />
+          <div className="min-w-0 flex-1">
+            <Note.Content className="mb-2" />
+            <Note.Thread />
+            <div className="mt-4 flex items-center justify-between">
+              <div className="-ml-1 inline-flex items-center gap-4">
+                <Note.Reply />
+                <Note.Repost />
+                {settings.zap ? <Note.Zap /> : null}
+              </div>
+              <Note.Menu />
+            </div>
+          </div>
+        </div>
+      </Note.Root>
+    </Note.Provider>
+  );
+}
+
+function RepostNote({
+  event,
+  className,
+}: {
+  event: Event;
+  className?: string;
+}) {
+  const { ark, settings } = Route.useRouteContext();
+  const { t } = useTranslation();
+  const {
+    isLoading,
+    isError,
+    data: repostEvent,
+  } = useQuery({
+    queryKey: ["repost", event.id],
+    queryFn: async () => {
+      try {
+        if (event.content.length > 50) {
+          const embed: Event = JSON.parse(event.content);
+          return embed;
+        }
+        const id = event.tags.find((el) => el[0] === "e")[1];
+        return await ark.get_event(id);
+      } catch {
+        throw new Error("Failed to get repost event");
+      }
+    },
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+  });
+
+  if (isLoading) {
+    return <div className="w-full px-3 pb-3">Loading...</div>;
+  }
+
+  if (isError || !repostEvent) {
+    return (
+      <Note.Root
+        className={cn(
+          "flex flex-col gap-2 border-b border-neutral-100 px-3 py-5 dark:border-neutral-900",
+          className,
+        )}
+      >
+        <User.Provider pubkey={event.pubkey}>
+          <User.Root className="flex h-14 gap-2 px-3">
+            <div className="inline-flex w-10 shrink-0 items-center justify-center">
+              <RepostIcon className="h-5 w-5 text-blue-500" />
+            </div>
+            <div className="inline-flex items-center gap-2">
+              <User.Avatar className="size-6 shrink-0 rounded object-cover" />
+              <div className="inline-flex items-baseline gap-1">
+                <User.Name className="font-medium text-neutral-900 dark:text-neutral-100" />
+                <span className="text-blue-500">{t("note.reposted")}</span>
+              </div>
+            </div>
+          </User.Root>
+        </User.Provider>
+        <div className="mb-3 select-text px-3">
+          <div className="flex flex-col items-start justify-start rounded-lg bg-red-100 px-3 py-3 dark:bg-red-900">
+            <p className="text-red-500">Failed to get event</p>
+          </div>
+        </div>
+      </Note.Root>
+    );
+  }
+
+  return (
+    <Note.Root
+      className={cn(
+        "flex flex-col gap-2 border-b border-neutral-100 px-3 py-5 dark:border-neutral-900",
+        className,
+      )}
+    >
+      <User.Provider pubkey={event.pubkey}>
+        <User.Root className="flex gap-3">
+          <div className="inline-flex w-11 shrink-0 items-center justify-center">
+            <RepostIcon className="h-5 w-5 text-blue-500" />
+          </div>
+          <div className="inline-flex items-center gap-2">
+            <User.Avatar className="size-6 shrink-0 rounded-full object-cover" />
+            <div className="inline-flex items-baseline gap-1">
+              <User.Name className="font-medium text-neutral-900 dark:text-neutral-100" />
+              <span className="text-blue-500">{t("note.reposted")}</span>
+            </div>
+          </div>
+        </User.Root>
+      </User.Provider>
+      <Note.Provider event={repostEvent}>
+        <div className="flex flex-col gap-2">
+          <Note.User />
+          <div className="flex gap-3">
+            <div className="size-11 shrink-0" />
+            <div className="min-w-0 flex-1">
+              <Note.Content />
+              <div className="mt-4 flex items-center justify-between">
+                <div className="-ml-1 inline-flex items-center gap-4">
+                  <Note.Reply />
+                  <Note.Repost />
+                  {settings.zap ? <Note.Zap /> : null}
+                </div>
+                <Note.Menu />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Note.Provider>
+    </Note.Root>
+  );
+}
--- a/apps/desktop2/src/routes/nwc.lazy.tsx
+++ b/apps/desktop2/src/routes/nwc.lazy.tsx
@@ -1,5 +1,4 @@
-import { useArk } from "@lume/ark";
-import { ArrowRightIcon, ZapIcon } from "@lume/icons";
+import { ZapIcon } from "@lume/icons";
 import { Container } from "@lume/ui";
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { useState } from "react";
@@ -9,21 +8,18 @@ export const Route = createLazyFileRoute("/nwc")({
 });

 function Screen() {
-  const ark = useArk();
+  const { ark } = Route.useRouteContext();

  const [uri, setUri] = useState("");
  const [isDone, setIsDone] = useState(false);

  const save = async () => {
    const nwc = await ark.set_nwc(uri);
-
-    if (nwc) {
-      setIsDone(true);
-    }
+    setIsDone(nwc);
  };

  return (
-    <Container withDrag>
+    <Container withDrag withNavigate={false}>
      <div className="h-full w-full flex-1 px-5">
        {!isDone ? (
          <>
@@ -45,17 +41,15 @@ function Screen() {
                  value={uri}
                  onChange={(e) => setUri(e.target.value)}
                  placeholder="nostrconnect://"
-                  className="h-24 w-full resize-none rounded-lg border-transparent bg-white placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-black dark:focus:ring-blue-900"
+                  className="h-24 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
                />
              </div>
              <button
                type="button"
                onClick={save}
-                className="inline-flex h-11 w-full items-center justify-between gap-1.5 rounded-lg bg-blue-500 px-5 font-medium text-white hover:bg-blue-600"
+                className="inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-lg bg-blue-500 px-5 font-medium text-white hover:bg-blue-600"
              >
-                <div className="size-5" />
-                <div>Save & Connect</div>
-                <ArrowRightIcon className="size-5" />
+                Save & Connect
              </button>
            </div>
          </>
--- a/apps/desktop2/src/routes/open.lazy.tsx
+++ b/apps/desktop2/src/routes/open.lazy.tsx
@@ -0,0 +1,51 @@
+import { PlusIcon } from "@lume/icons";
+import { LumeColumn } from "@lume/types";
+import { Column } from "@lume/ui";
+import { createLazyRoute } from "@tanstack/react-router";
+import { getCurrent } from "@tauri-apps/api/window";
+
+export const Route = createLazyRoute("/open")({
+  component: Screen,
+});
+
+function Screen() {
+  const install = async (column: LumeColumn) => {
+    const mainWindow = getCurrent();
+    await mainWindow.emit("columns", { type: "add", column });
+  };
+
+  return (
+    <Column.Root shadow={false} background={false}>
+      <Column.Content className="relative flex h-full w-full items-center justify-center">
+        <div className="group absolute left-0 top-0 z-10 h-full w-12">
+          <button
+            type="button"
+            onClick={() =>
+              install({
+                label: "store",
+                name: "Store",
+                content: "/store/official",
+              })
+            }
+            className="flex h-full w-full items-center justify-center rounded-xl bg-transparent transition-colors duration-100 ease-in-out group-hover:bg-black/5 dark:group-hover:bg-white/5"
+          >
+            <PlusIcon className="size-6 scale-0 transform transition-transform duration-150 ease-in-out will-change-transform group-hover:scale-100" />
+          </button>
+        </div>
+        <button
+          type="button"
+          onClick={() =>
+            install({
+              label: "store",
+              name: "Store",
+              content: "/store/official",
+            })
+          }
+          className="inline-flex size-14 items-center justify-center rounded-full bg-black/10 backdrop-blur-lg hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
+        >
+          <PlusIcon className="size-8" />
+        </button>
+      </Column.Content>
+    </Column.Root>
+  );
+}
--- a/apps/desktop2/src/routes/settings.tsx
+++ b/apps/desktop2/src/routes/settings.tsx
@@ -0,0 +1,106 @@
+import { SettingsIcon, UserIcon, ZapIcon, SecureIcon } from "@lume/icons";
+import { cn } from "@lume/utils";
+import { Link } from "@tanstack/react-router";
+import { Outlet, createFileRoute } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+
+export const Route = createFileRoute("/settings")({
+  component: Screen,
+});
+
+function Screen() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex h-full w-full flex-col bg-neutral-100 dark:bg-neutral-950">
+      <div
+        data-tauri-drag-region
+        className="flex h-20 w-full shrink-0 items-center justify-center border-b border-neutral-200 dark:border-neutral-800"
+      >
+        <div className="flex items-center gap-1">
+          <Link to="/settings/general">
+            {({ isActive }) => {
+              return (
+                <div
+                  className={cn(
+                    "flex h-14 w-20 shrink-0 flex-col items-center justify-center rounded-lg p-2",
+                    isActive
+                      ? "bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700"
+                      : "text-neutral-700 hover:bg-neutral-200 dark:text-neutral-300 dark:hover:bg-neutral-800",
+                  )}
+                >
+                  <SettingsIcon className="size-5 shrink-0" />
+                  <p className="text-sm font-medium">
+                    {t("settings.general.title")}
+                  </p>
+                </div>
+              );
+            }}
+          </Link>
+          <Link to="/settings/user">
+            {({ isActive }) => {
+              return (
+                <div
+                  className={cn(
+                    "flex h-14 w-20 shrink-0 flex-col items-center justify-center rounded-lg p-2",
+                    isActive
+                      ? "bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700"
+                      : "text-neutral-700 hover:bg-neutral-200 dark:text-neutral-300 dark:hover:bg-neutral-800",
+                  )}
+                >
+                  <UserIcon className="size-5 shrink-0" />
+                  <p className="text-sm font-medium">
+                    {t("settings.user.title")}
+                  </p>
+                </div>
+              );
+            }}
+          </Link>
+          <Link to="/settings/zap">
+            {({ isActive }) => {
+              return (
+                <div
+                  className={cn(
+                    "flex h-14 w-20 shrink-0 flex-col items-center justify-center rounded-lg p-2",
+                    isActive
+                      ? "bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700"
+                      : "text-neutral-700 hover:bg-neutral-200 dark:text-neutral-300 dark:hover:bg-neutral-800",
+                  )}
+                >
+                  <ZapIcon className="size-5 shrink-0" />
+                  <p className="text-sm font-medium">
+                    {t("settings.zap.title")}
+                  </p>
+                </div>
+              );
+            }}
+          </Link>
+          <Link to="/settings/backup">
+            {({ isActive }) => {
+              return (
+                <div
+                  className={cn(
+                    "flex h-14 w-20 shrink-0 flex-col items-center justify-center rounded-lg p-2",
+                    isActive
+                      ? "bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700"
+                      : "text-neutral-700 hover:bg-neutral-200 dark:text-neutral-300 dark:hover:bg-neutral-800",
+                  )}
+                >
+                  <SecureIcon className="size-5 shrink-0" />
+                  <p className="text-sm font-medium">
+                    {t("settings.backup.title")}
+                  </p>
+                </div>
+              );
+            }}
+          </Link>
+        </div>
+      </div>
+      <div className="w-full flex-1 overflow-y-auto px-5 py-4">
+        <div className="mx-auto w-full max-w-xl">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/apps/desktop2/src/routes/settings/backup.tsx
+++ b/apps/desktop2/src/routes/settings/backup.tsx
@@ -0,0 +1,122 @@
+import { type Account } from "@lume/types";
+import { User } from "@lume/ui";
+import { displayNsec } from "@lume/utils";
+import { createFileRoute } from "@tanstack/react-router";
+import { invoke } from "@tauri-apps/api/core";
+import { writeText } from "@tauri-apps/plugin-clipboard-manager";
+import { useState } from "react";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/settings/backup")({
+  component: Screen,
+  loader: async ({ context }) => {
+    const ark = context.ark;
+    const npubs = await ark.get_all_accounts();
+
+    let accounts: Account[] = [];
+
+    for (const account of npubs) {
+      const nsec: string = await invoke("get_stored_nsec", {
+        npub: account.npub,
+      });
+      accounts.push({ ...account, nsec });
+    }
+
+    return accounts;
+  },
+});
+
+function Screen() {
+  const accounts = Route.useLoaderData();
+
+  return (
+    <div className="flex flex-col gap-3 divide-y divide-neutral-300 dark:divide-neutral-700">
+      {accounts.map((account, index) => (
+        <div key={account.npub} className="flex items-start gap-6 py-3">
+          <div className="w-36 shrink-0 text-end font-medium">
+            Account {index}
+          </div>
+          <Account account={account} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function Account({ account }: { account: Account }) {
+  const [key, setKey] = useState(account.nsec);
+  const [copied, setCopied] = useState(false);
+  const [passphase, setPassphase] = useState("");
+
+  const encrypt = async () => {
+    const encrypted: string = await invoke("get_encrypted_key", {
+      npub: account.npub,
+      password: passphase,
+    });
+    setKey(encrypted);
+  };
+
+  const copyKey = async () => {
+    try {
+      await writeText(key);
+      setCopied(true);
+    } catch (e) {
+      toast.error(e);
+    }
+  };
+
+  return (
+    <div className="flex flex-1 flex-col gap-2">
+      <User.Provider pubkey={account.npub}>
+        <User.Root className="flex items-center gap-2">
+          <User.Avatar className="size-8 rounded-full object-cover" />
+          <div className="flex flex-col">
+            <User.Name className="text-sm leading-tight" />
+            <User.NIP05 className="text-sm leading-tight text-neutral-700 dark:text-neutral-300" />
+          </div>
+        </User.Root>
+      </User.Provider>
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center gap-2">
+          <input
+            readOnly
+            type="text"
+            value={displayNsec(key, 36)}
+            className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+          />
+          <button
+            type="button"
+            onClick={copyKey}
+            className="inline-flex h-9 w-24 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700"
+          >
+            {copied ? "Copied" : "Copy"}
+          </button>
+        </div>
+        <div className="flex w-full flex-col gap-1">
+          <label
+            htmlFor="passphase"
+            className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
+          >
+            Set a passphase to secure your key
+          </label>
+          <div className="flex items-center gap-2">
+            <input
+              name="passphase"
+              type="password"
+              value={passphase}
+              onChange={(e) => setPassphase(e.target.value)}
+              className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+            />
+            <button
+              type="button"
+              onClick={encrypt}
+              className="inline-flex h-9 w-24 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700"
+            >
+              Update
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/apps/desktop2/src/routes/settings/general.lazy.tsx
+++ b/apps/desktop2/src/routes/settings/general.lazy.tsx
@@ -0,0 +1,5 @@
+import { createLazyFileRoute } from '@tanstack/react-router'
+
+export const Route = createLazyFileRoute('/settings/general')({
+  component: () => <div>Hello /settings/general!</div>
+})
--- a/apps/desktop2/src/routes/settings/user.lazy.tsx
+++ b/apps/desktop2/src/routes/settings/user.lazy.tsx
@@ -0,0 +1,5 @@
+import { createLazyFileRoute } from '@tanstack/react-router'
+
+export const Route = createLazyFileRoute('/settings/user')({
+  component: () => <div>Hello /settings/user!</div>
+})
--- a/apps/desktop2/src/routes/settings/zap.lazy.tsx
+++ b/apps/desktop2/src/routes/settings/zap.lazy.tsx
@@ -0,0 +1,96 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { invoke } from "@tauri-apps/api/core";
+import { useState } from "react";
+import { toast } from "sonner";
+
+export const Route = createLazyFileRoute("/settings/zap")({
+  component: Screen,
+});
+
+function Screen() {
+  return (
+    <div className="flex flex-col gap-3 divide-y divide-neutral-300 dark:divide-neutral-700">
+      <div className="flex flex-col gap-6 py-3">
+        <Connection />
+        <DefaultAmount />
+      </div>
+    </div>
+  );
+}
+
+function Connection() {
+  const [uri, setUri] = useState("");
+
+  const connect = async () => {
+    try {
+      await invoke("set_nwc", { uri });
+    } catch (e) {
+      toast.error(String(e));
+    }
+  };
+
+  return (
+    <div className="flex items-start gap-6">
+      <div className="w-36 shrink-0 text-end font-medium">Connection</div>
+      <div className="flex-1">
+        <div className="flex w-full flex-col gap-1">
+          <label
+            htmlFor="nwc"
+            className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
+          >
+            Nostr Wallet Connect
+          </label>
+          <div className="flex items-center gap-2">
+            <input
+              name="nwc"
+              type="text"
+              value={uri}
+              onChange={(e) => setUri(e.target.value)}
+              placeholder="nostrconnect://"
+              className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+            />
+            <button
+              type="button"
+              onClick={connect}
+              className="inline-flex h-9 w-24 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700"
+            >
+              Connect
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function DefaultAmount() {
+  return (
+    <div className="flex items-start gap-6">
+      <div className="w-36 shrink-0 text-end font-medium">Default amount</div>
+      <div className="flex-1">
+        <div className="flex w-full flex-col gap-1">
+          <label
+            htmlFor="amount"
+            className="text-sm font-medium text-neutral-700 dark:text-neutral-300"
+          >
+            Set default amount for quick zapping
+          </label>
+          <div className="flex items-center gap-2">
+            <input
+              name="amount"
+              type="number"
+              value={21}
+              className="h-9 w-full rounded-lg border-neutral-300 bg-transparent px-3 placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:border-neutral-700 dark:placeholder:text-neutral-400 dark:focus:ring-blue-800"
+            />
+            <button
+              type="button"
+              className="inline-flex h-9 w-24 items-center justify-center rounded-lg bg-neutral-200 text-sm font-medium hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700"
+            >
+              Update
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/apps/desktop2/src/routes/store.community.tsx
+++ b/apps/desktop2/src/routes/store.community.tsx
@@ -0,0 +1,13 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/store/community")({
+  component: Screen,
+});
+
+function Screen() {
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      <p>Coming Soon</p>
+    </div>
+  );
+}
--- a/apps/desktop2/src/routes/store.official.tsx
+++ b/apps/desktop2/src/routes/store.official.tsx
@@ -0,0 +1,69 @@
+import { LumeColumn } from "@lume/types";
+import { createFileRoute } from "@tanstack/react-router";
+import { resolveResource } from "@tauri-apps/api/path";
+import { getCurrent } from "@tauri-apps/api/window";
+import { readTextFile } from "@tauri-apps/plugin-fs";
+
+export const Route = createFileRoute("/store/official")({
+  component: Screen,
+  beforeLoad: async () => {
+    const resourcePath = await resolveResource(
+      "resources/official_columns.json",
+    );
+    const officialColumns: LumeColumn[] = JSON.parse(
+      await readTextFile(resourcePath),
+    );
+
+    return {
+      officialColumns,
+    };
+  },
+});
+
+function Screen() {
+  const { officialColumns } = Route.useRouteContext();
+
+  const install = async (column: LumeColumn) => {
+    const mainWindow = getCurrent();
+    await mainWindow.emit("columns", { type: "add", column });
+  };
+
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      {officialColumns.map((column) => (
+        <div
+          key={column.label}
+          className="relative h-[200px] w-full overflow-hidden rounded-xl bg-gradient-to-tr from-orange-100 to-blue-200 px-3 pt-3"
+        >
+          {column.cover ? (
+            <img
+              src={column.cover}
+              srcSet={column.coverRetina}
+              alt={column.name}
+              loading="lazy"
+              decoding="async"
+              className="absolute left-0 top-0 z-10 h-full w-full object-cover"
+            />
+          ) : null}
+          <div className="absolute bottom-0 left-0 z-20 h-16 w-full bg-black/40 px-3 backdrop-blur-xl">
+            <div className="flex h-full items-center justify-between">
+              <div>
+                <h1 className="font-semibold text-white">{column.name}</h1>
+                <p className="max-w-[24rem] truncate text-sm text-white/80">
+                  {column.description}
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={() => install(column)}
+                className="inline-flex h-8 w-16 shrink-0 items-center justify-center rounded-full bg-white/20 text-sm font-medium text-white hover:bg-white hover:text-blue-500"
+              >
+                Add
+              </button>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
--- a/apps/desktop2/src/routes/store.tsx
+++ b/apps/desktop2/src/routes/store.tsx
@@ -0,0 +1,63 @@
+import { GlobalIcon, LaurelIcon } from "@lume/icons";
+import { ColumnRouteSearch } from "@lume/types";
+import { Column } from "@lume/ui";
+import { cn } from "@lume/utils";
+import { Link } from "@tanstack/react-router";
+import { Outlet, createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/store")({
+  validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
+    return {
+      account: search.account,
+      label: search.label,
+      name: search.name,
+    };
+  },
+  component: Screen,
+});
+
+function Screen() {
+  const { label, name } = Route.useSearch();
+
+  return (
+    <Column.Root>
+      <Column.Header label={label} name={name}>
+        <div className="inline-flex h-full w-full items-center gap-1">
+          <Link to="/store/official">
+            {({ isActive }) => (
+              <div
+                className={cn(
+                  "inline-flex h-7 w-max items-center justify-center gap-2 rounded-full px-3 text-sm font-medium",
+                  isActive
+                    ? "bg-neutral-100 dark:bg-neutral-900"
+                    : "opacity-50",
+                )}
+              >
+                <LaurelIcon className="size-4" />
+                Official
+              </div>
+            )}
+          </Link>
+          <Link to="/store/community">
+            {({ isActive }) => (
+              <div
+                className={cn(
+                  "inline-flex h-7 w-max items-center justify-center gap-2 rounded-full px-3 text-sm font-medium",
+                  isActive
+                    ? "bg-neutral-100 dark:bg-neutral-900"
+                    : "opacity-50",
+                )}
+              >
+                <GlobalIcon className="size-4" />
+                Community
+              </div>
+            )}
+          </Link>
+        </div>
+      </Column.Header>
+      <Column.Content>
+        <Outlet />
+      </Column.Content>
+    </Column.Root>
+  );
+}
--- a/apps/desktop2/src/routes/trending.lazy.tsx
+++ b/apps/desktop2/src/routes/trending.lazy.tsx
@@ -0,0 +1,71 @@
+import { RepostNote } from "@/components/repost";
+import { Suggest } from "@/components/suggest";
+import { TextNote } from "@/components/text";
+import { LoaderIcon, InfoIcon } from "@lume/icons";
+import { Event, Kind } from "@lume/types";
+import { Column } from "@lume/ui";
+import { useQuery } from "@tanstack/react-query";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import { Virtualizer } from "virtua";
+import { fetch } from "@tauri-apps/plugin-http";
+
+export const Route = createLazyFileRoute("/trending")({
+  component: Screen,
+});
+
+export function Screen() {
+  // @ts-ignore, just work!!!
+  const { id, name, account } = Route.useSearch();
+  const { t } = useTranslation();
+  const { data, isLoading } = useQuery({
+    queryKey: ["trending", account],
+    queryFn: async () => {
+      const res = await fetch("https://api.nostr.band/v0/trending/notes");
+      const data = await res.json();
+      const events = data.notes.map((item) => item.event) as Event[];
+      return events.sort((a, b) => b.created_at - a.created_at);
+    },
+    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} />;
+    }
+  };
+
+  return (
+    <Column.Root>
+      <Column.Header id={id} name={name} />
+      <Column.Content>
+        {isLoading ? (
+          <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
+            <button type="button" className="size-5" disabled>
+              <LoaderIcon className="size-5 animate-spin" />
+            </button>
+          </div>
+        ) : !data.length ? (
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center gap-2 rounded-xl bg-neutral-50 p-5 dark:bg-neutral-950">
+              <InfoIcon className="size-6" />
+              <div>
+                <p className="leading-tight">{t("emptyFeedTitle")}</p>
+                <p className="leading-tight">{t("emptyFeedSubtitle")}</p>
+              </div>
+            </div>
+            <Suggest />
+          </div>
+        ) : (
+          <Virtualizer overscan={3}>
+            {data.map((item) => renderItem(item))}
+          </Virtualizer>
+        )}
+      </Column.Content>
+    </Column.Root>
+  );
+}
--- a/apps/desktop2/src/routes/users/$pubkey.lazy.tsx
+++ b/apps/desktop2/src/routes/users/$pubkey.lazy.tsx
@@ -1,6 +1,6 @@
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { WindowVirtualizer } from "virtua";
-import { User } from "@lume/ui";
+import { Box, Container, User } from "@lume/ui";
 import { EventList } from "./-components/eventList";

 export const Route = createLazyFileRoute("/users/$pubkey")({
@@ -11,36 +11,33 @@ function Screen() {
  const { pubkey } = Route.useParams();

  return (
-    <WindowVirtualizer>
-      <div className="flex h-screen w-screen flex-col bg-gradient-to-tr from-neutral-200 to-neutral-100 dark:from-neutral-950 dark:to-neutral-900">
-        <div data-tauri-drag-region className="h-11 w-full shrink-0" />
-        <div className="flex h-full min-h-0 w-full">
-          <div className="h-full w-full flex-1 px-2 pb-2">
-            <div className="h-full w-full overflow-hidden overflow-y-auto rounded-xl bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-none dark:ring-1 dark:ring-white/5">
-              <User.Provider pubkey={pubkey}>
-                <User.Root>
-                  <User.Cover className="h-44 w-full object-cover" />
-                  <div className="relative -mt-8 flex flex-col gap-4 px-5">
-                    <User.Avatar className="size-14 rounded-full" />
-                    <div className="inline-flex items-start justify-between">
-                      <div>
-                        <User.Name className="font-semibold leading-tight" />
-                        <User.NIP05 className="text-sm leading-tight text-neutral-600 dark:text-neutral-400" />
-                      </div>
-                      <User.Button className="h-9 w-24 rounded-full bg-black text-sm font-medium text-white hover:bg-neutral-900 dark:bg-neutral-900" />
-                    </div>
-                    <User.About />
+    <Container withDrag>
+      <Box className="px-0 scrollbar-none">
+        <WindowVirtualizer>
+          <User.Provider pubkey={pubkey}>
+            <User.Root>
+              <User.Cover className="h-44 w-full object-cover" />
+              <div className="relative -mt-8 flex flex-col gap-4 px-3">
+                <User.Avatar className="size-14 rounded-full" />
+                <div className="inline-flex items-start justify-between">
+                  <div>
+                    <User.Name className="font-semibold leading-tight" />
+                    <User.NIP05 className="text-sm leading-tight text-neutral-600 dark:text-neutral-400" />
                  </div>
-                </User.Root>
-              </User.Provider>
-              <div className="mt-4 px-5">
-                <h3 className="mb-4 text-lg font-semibold">Notes</h3>
-                <EventList id={pubkey} />
+                  <User.Button className="h-9 w-24 rounded-full 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="mt-4">
+            <div className="px-3">
+              <h3 className="text-lg font-semibold">Latest notes</h3>
            </div>
+            <EventList id={pubkey} />
          </div>
-        </div>
-      </div>
-    </WindowVirtualizer>
+        </WindowVirtualizer>
+      </Box>
+    </Container>
  );
 }
--- a/apps/desktop2/src/routes/users/-components/eventList.tsx
+++ b/apps/desktop2/src/routes/users/-components/eventList.tsx
@@ -1,13 +1,13 @@
 import { TextNote } from "@/components/text";
 import { RepostNote } from "@/components/repost";
-import { useArk } from "@lume/ark";
 import { ArrowRightCircleIcon, InfoIcon, LoaderIcon } from "@lume/icons";
 import { Event, Kind } from "@lume/types";
 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 = useArk();
+  const { ark } = useRouteContext({ strict: false });
  const { data, hasNextPage, isLoading, isFetchingNextPage, fetchNextPage } =
    useInfiniteQuery({
      queryKey: ["events", id],
--- a/apps/desktop2/src/routes/zap.$id.lazy.tsx
+++ b/apps/desktop2/src/routes/zap.$id.lazy.tsx
@@ -1,5 +1,4 @@
 import { Balance } from "@/components/balance";
-import { useArk } from "@lume/ark";
 import { Box, Container, User } from "@lume/ui";
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { useState } from "react";
@@ -16,6 +15,7 @@ export const Route = createLazyFileRoute("/zap/$id")({

 function Screen() {
  const { t } = useTranslation();
+  const { ark } = Route.useRouteContext();
  const { id } = Route.useParams();
  // @ts-ignore, magic !!!
  const { pubkey, account } = Route.useSearch();
@@ -25,8 +25,6 @@ function Screen() {
  const [isCompleted, setIsCompleted] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

-  const ark = useArk();
-
  const submit = async () => {
    try {
      // start loading
@@ -48,7 +46,7 @@ function Screen() {

  return (
    <Container>
-      <Balance recipient={pubkey} account={account} />
+      <Balance account={account} />
      <Box className="flex flex-col gap-3">
        <div className="flex h-full flex-col justify-between py-5">
          <div className="flex h-11 shrink-0 items-center justify-center gap-2">
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -10,17 +10,17 @@
 		"astro": "astro"
 	},
 	"dependencies": {
-		"@astrojs/check": "^0.4.1",
+		"@astrojs/check": "^0.5.10",
 		"@astrojs/tailwind": "^5.1.0",
-		"@fontsource/geist-mono": "^5.0.1",
-		"astro": "^4.4.9",
+		"@fontsource/geist-mono": "^5.0.2",
+		"astro": "^4.5.18",
 		"astro-seo-meta": "^4.1.0",
 		"astro-seo-schema": "^4.0.0",
 		"schema-dts": "^1.1.2",
-		"tailwindcss": "^3.4.1",
-		"typescript": "^5.3.3"
+		"tailwindcss": "^3.4.3",
+		"typescript": "^5.4.4"
 	},
 	"devDependencies": {
-		"@tailwindcss/typography": "^0.5.10"
+		"@tailwindcss/typography": "^0.5.12"
 	}
 }
--- a/package.json
+++ b/package.json
@@ -11,27 +11,26 @@
    "tauri": "tauri"
  },
  "devDependencies": {
-    "@biomejs/biome": "^1.5.3",
-    "@tauri-apps/cli": "2.0.0-beta.6",
-    "turbo": "^1.12.4"
+    "@biomejs/biome": "^1.6.4",
+    "@tauri-apps/cli": "2.0.0-beta.12",
+    "turbo": "^1.13.2"
  },
  "packageManager": "pnpm@8.9.0",
  "engines": {
    "node": ">=18"
  },
  "dependencies": {
-    "@tauri-apps/api": "2.0.0-beta.3",
-    "@tauri-apps/plugin-autostart": "2.0.0-beta.1",
-    "@tauri-apps/plugin-clipboard-manager": "2.0.0-beta.1",
-    "@tauri-apps/plugin-dialog": "2.0.0-beta.1",
-    "@tauri-apps/plugin-fs": "2.0.0-beta.1",
-    "@tauri-apps/plugin-http": "2.0.0-beta.1",
-    "@tauri-apps/plugin-notification": "2.0.0-beta.1",
-    "@tauri-apps/plugin-os": "2.0.0-beta.1",
-    "@tauri-apps/plugin-process": "2.0.0-beta.1",
-    "@tauri-apps/plugin-shell": "2.0.0-beta.1",
-    "@tauri-apps/plugin-sql": "2.0.0-beta.1",
-    "@tauri-apps/plugin-updater": "2.0.0-beta.1",
-    "@tauri-apps/plugin-upload": "2.0.0-beta.1"
+    "@tauri-apps/api": "2.0.0-beta.7",
+    "@tauri-apps/plugin-autostart": "2.0.0-beta.2",
+    "@tauri-apps/plugin-clipboard-manager": "2.1.0-beta.0",
+    "@tauri-apps/plugin-dialog": "2.0.0-beta.2",
+    "@tauri-apps/plugin-fs": "2.0.0-beta.2",
+    "@tauri-apps/plugin-http": "2.0.0-beta.2",
+    "@tauri-apps/plugin-notification": "2.0.0-beta.2",
+    "@tauri-apps/plugin-os": "2.0.0-beta.2",
+    "@tauri-apps/plugin-process": "2.0.0-beta.2",
+    "@tauri-apps/plugin-shell": "2.0.0-beta.2",
+    "@tauri-apps/plugin-updater": "2.0.0-beta.2",
+    "@tauri-apps/plugin-upload": "2.0.0-beta.2"
  }
 }
--- a/packages/ark/package.json
+++ b/packages/ark/package.json
@@ -4,7 +4,7 @@
 	"private": true,
 	"main": "./src/index.ts",
 	"dependencies": {
-		"@getalby/sdk": "^3.3.1",
+		"@getalby/sdk": "^3.4.3",
 		"@lume/icons": "workspace:^",
 		"@lume/utils": "workspace:^",
 		"@radix-ui/react-avatar": "^1.0.4",
@@ -14,27 +14,28 @@
 		"@radix-ui/react-hover-card": "^1.0.7",
 		"@radix-ui/react-popover": "^1.0.7",
 		"@radix-ui/react-tooltip": "^1.0.7",
-		"@tanstack/react-query": "^5.24.1",
+		"@tanstack/react-query": "^5.29.0",
+		"@tanstack/react-router": "^1.26.18",
 		"get-urls": "^12.1.0",
-		"media-chrome": "^2.2.5",
+		"media-chrome": "^3.2.0",
 		"minidenticons": "^4.2.1",
-		"nanoid": "^5.0.6",
+		"nanoid": "^5.0.7",
 		"qrcode.react": "^3.1.0",
 		"re-resizable": "^6.9.11",
 		"react": "^18.2.0",
 		"react-currency-input-field": "^3.8.0",
-		"react-i18next": "^14.0.5",
+		"react-i18next": "^14.1.0",
 		"react-string-replace": "^1.1.1",
-		"sonner": "^1.4.3",
-		"string-strip-html": "^13.4.6",
-		"virtua": "^0.27.5"
+		"sonner": "^1.4.41",
+		"string-strip-html": "^13.4.8",
+		"virtua": "^0.29.2"
 	},
 	"devDependencies": {
 		"@lume/tailwindcss": "workspace:^",
 		"@lume/tsconfig": "workspace:^",
 		"@lume/types": "workspace:^",
-		"@types/react": "^18.2.61",
-		"tailwindcss": "^3.4.1",
-		"typescript": "^5.3.3"
+		"@types/react": "^18.2.75",
+		"tailwindcss": "^3.4.3",
+		"typescript": "^5.4.4"
 	}
 }
--- a/packages/ark/src/ark.ts
+++ b/packages/ark/src/ark.ts
@@ -4,19 +4,28 @@ import type {
 	Contact,
 	Event,
 	EventWithReplies,
+	Interests,
 	Keys,
+	LumeColumn,
 	Metadata,
+	Settings,
 } from "@lume/types";
 import { invoke } from "@tauri-apps/api/core";
 import { open } from "@tauri-apps/plugin-dialog";
 import { readFile } from "@tauri-apps/plugin-fs";
 import { generateContentTags } from "@lume/utils";

+enum NSTORE_KEYS {
+	settings = "lume_user_settings",
+	interests = "lume_user_interests",
+	columns = "lume_user_columns",
+}
+
 export class Ark {
-	public accounts: Account[];
+	public windows: WebviewWindow[];

 	constructor() {
-		this.accounts = [];
+		this.windows = [];
 	}

 	public async get_all_accounts() {
@@ -28,8 +37,6 @@ export class Ark {
 				for (const item of cmd) {
 					accounts.push({ npub: item.replace(".npub", "") });
 				}
-
-				this.accounts = accounts;
 				return accounts;
 			}
 		} catch {
@@ -71,7 +78,7 @@ export class Ark {

 	public async save_account(nsec: string, password: string = "") {
 		try {
-			const cmd: boolean = await invoke("save_key", {
+			const cmd: string = await invoke("save_key", {
 				nsec,
 				password,
 			});
@@ -126,21 +133,24 @@ export class Ark {
 	}

 	public async get_events(
-		type: "local" | "global",
 		limit: number,
 		asOf?: number,
-		dedup?: boolean,
+		contacts?: string[],
+		global?: boolean,
 	) {
 		try {
 			let until: string = undefined;
 			if (asOf && asOf > 0) until = asOf.toString();

+			const dedup = true;
 			const seenIds = new Set<string>();
 			const dedupQueue = new Set<string>();

-			const nostrEvents: Event[] = await invoke(`get_${type}_events`, {
+			const nostrEvents: Event[] = await invoke("get_events", {
 				limit,
 				until,
+				contacts,
+				global,
 			});

 			if (dedup) {
@@ -155,7 +165,6 @@ export class Ark {
 								dedupQueue.add(event.id);
 								break;
 							}
-
 							seenIds.add(tag);
 						}
 					}
@@ -172,6 +181,51 @@ export class Ark {
 		}
 	}

+	public async get_events_from_interests(
+		hashtags: string[],
+		limit: number,
+		asOf?: number,
+		global?: boolean,
+	) {
+		let until: string = undefined;
+		if (asOf && asOf > 0) until = asOf.toString();
+
+		const dedup = true;
+		const seenIds = new Set<string>();
+		const dedupQueue = new Set<string>();
+
+		const nostrEvents: Event[] = await invoke("get_events_from_interests", {
+			hashtags,
+			limit,
+			until,
+			global,
+		});
+
+		if (dedup) {
+			for (const event of nostrEvents) {
+				const tags = event.tags
+					.filter((el) => el[0] === "e")
+					?.map((item) => item[1]);
+
+				if (tags.length) {
+					for (const tag of tags) {
+						if (seenIds.has(tag)) {
+							dedupQueue.add(event.id);
+							break;
+						}
+						seenIds.add(tag);
+					}
+				}
+			}
+
+			return nostrEvents
+				.filter((event) => !dedupQueue.has(event.id))
+				.sort((a, b) => b.created_at - a.created_at);
+		}
+
+		return nostrEvents.sort((a, b) => b.created_at - a.created_at);
+	}
+
 	public async publish(content: string, reply_to?: string, quote?: boolean) {
 		try {
 			const g = await generateContentTags(content);
@@ -338,6 +392,25 @@ export class Ark {
 		}
 	}

+	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");
@@ -499,87 +572,238 @@ export class Ark {
 		}
 	}

+	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 {
+			const cmd: string = await invoke("get_nstore", {
+				key: NSTORE_KEYS.settings,
+			});
+			const settings: Settings = cmd ? JSON.parse(cmd) : null;
+			return settings;
+		} catch {
+			const defaultSettings: Settings = {
+				autoUpdate: false,
+				enhancedPrivacy: false,
+				notification: false,
+				zap: false,
+			};
+			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 open_thread(id: string) {
-		return new WebviewWindow(`event-${id}`, {
-			title: "Thread",
-			url: `/events/${id}`,
-			minWidth: 500,
-			width: 600,
-			height: 800,
-			hiddenTitle: true,
-			titleBarStyle: "overlay",
-		});
+		try {
+			const window = new WebviewWindow(`event-${id}`, {
+				title: "Thread",
+				url: `/events/${id}`,
+				minWidth: 500,
+				minHeight: 800,
+				width: 500,
+				height: 800,
+				hiddenTitle: true,
+				titleBarStyle: "overlay",
+				center: false,
+			});
+
+			this.windows.push(window);
+		} catch (e) {
+			throw new Error(String(e));
+		}
 	}

 	public open_profile(pubkey: string) {
-		return new WebviewWindow(`user-${pubkey}`, {
-			title: "Profile",
-			url: `/users/${pubkey}`,
-			minWidth: 500,
-			width: 500,
-			height: 800,
-			hiddenTitle: true,
-			titleBarStyle: "overlay",
-		});
+		try {
+			const window = new WebviewWindow(`user-${pubkey}`, {
+				title: "Profile",
+				url: `/users/${pubkey}`,
+				minWidth: 500,
+				minHeight: 800,
+				width: 500,
+				height: 800,
+				hiddenTitle: true,
+				titleBarStyle: "overlay",
+			});
+
+			this.windows.push(window);
+		} catch (e) {
+			throw new Error(String(e));
+		}
 	}

 	public open_editor(reply_to?: string, quote: boolean = false) {
-		let url: string;
+		try {
+			let url: string;

-		if (reply_to) {
-			url = `/editor?reply_to=${reply_to}&quote=${quote}`;
-		} else {
-			url = "/editor";
+			if (reply_to) {
+				url = `/editor?reply_to=${reply_to}&quote=${quote}`;
+			} else {
+				url = "/editor";
+			}
+
+			const window = new WebviewWindow(`editor-${reply_to ? reply_to : 0}`, {
+				title: "Editor",
+				url,
+				minWidth: 500,
+				minHeight: 400,
+				width: 600,
+				height: 400,
+				hiddenTitle: true,
+				titleBarStyle: "overlay",
+			});
+
+			this.windows.push(window);
+		} catch (e) {
+			throw new Error(String(e));
 		}
-
-		return new WebviewWindow("editor", {
-			title: "Editor",
-			url,
-			minWidth: 500,
-			width: 600,
-			height: 400,
-			hiddenTitle: true,
-			titleBarStyle: "overlay",
-			fileDropEnabled: true,
-		});
 	}

 	public open_nwc() {
-		return new WebviewWindow("nwc", {
-			title: "Nostr Wallet Connect",
-			url: "/nwc",
-			minWidth: 400,
-			width: 400,
-			height: 600,
-			hiddenTitle: true,
-			titleBarStyle: "overlay",
-			fileDropEnabled: true,
-		});
+		try {
+			const window = new WebviewWindow("nwc", {
+				title: "Nostr Wallet Connect",
+				url: "/nwc",
+				minWidth: 400,
+				minHeight: 600,
+				width: 400,
+				height: 600,
+				hiddenTitle: true,
+				titleBarStyle: "overlay",
+			});
+
+			this.windows.push(window);
+		} catch (e) {
+			throw new Error(String(e));
+		}
 	}

 	public open_zap(id: string, pubkey: string, account: string) {
-		return new WebviewWindow(`zap-${id}`, {
-			title: "Nostr Wallet Connect",
-			url: `/zap/${id}?pubkey=${pubkey}&account=${account}`,
-			minWidth: 400,
-			width: 400,
-			height: 500,
-			hiddenTitle: true,
-			titleBarStyle: "overlay",
-			fileDropEnabled: true,
-		});
+		try {
+			const window = new WebviewWindow(`zap-${id}`, {
+				title: "Zap",
+				url: `/zap/${id}?pubkey=${pubkey}&account=${account}`,
+				minWidth: 400,
+				minHeight: 500,
+				width: 400,
+				height: 500,
+				hiddenTitle: true,
+				titleBarStyle: "overlay",
+			});
+
+			this.windows.push(window);
+		} catch (e) {
+			throw new Error(String(e));
+		}
 	}

 	public open_settings() {
-		return new WebviewWindow("settings", {
-			title: "Settings",
-			url: "/settings",
-			minWidth: 600,
-			width: 800,
-			height: 500,
-			hiddenTitle: true,
-			titleBarStyle: "overlay",
-			fileDropEnabled: true,
-		});
+		try {
+			const window = new WebviewWindow("settings", {
+				title: "Settings",
+				url: "/settings",
+				minWidth: 600,
+				minHeight: 500,
+				width: 800,
+				height: 500,
+				hiddenTitle: true,
+				titleBarStyle: "overlay",
+			});
+
+			this.windows.push(window);
+		} catch (e) {
+			throw new Error(String(e));
+		}
 	}
 }
--- a/packages/ark/src/context.ts
+++ b/packages/ark/src/context.ts
@@ -1,4 +0,0 @@
-import { createContext } from "react";
-import { type Ark } from "./ark";
-
-export const ArkContext = createContext<Ark | null>(undefined);
--- a/packages/ark/src/hooks/useArk.ts
+++ b/packages/ark/src/hooks/useArk.ts
@@ -1,10 +0,0 @@
-import { useContext } from "react";
-import { ArkContext } from "../context";
-
-export const useArk = () => {
-	const context = useContext(ArkContext);
-	if (context === undefined) {
-		throw new Error("useArk must be used within an ArkProvider");
-	}
-	return context;
-};
--- a/packages/ark/src/hooks/useEvent.ts
+++ b/packages/ark/src/hooks/useEvent.ts
@@ -1,13 +1,18 @@
+import { Event } from "@lume/types";
 import { useQuery } from "@tanstack/react-query";
-import { useArk } from "./useArk";
+import { invoke } from "@tauri-apps/api/core";

 export function useEvent(id: string) {
-	const ark = useArk();
 	const { isLoading, isError, data } = useQuery({
 		queryKey: ["event", id],
 		queryFn: async () => {
 			try {
-				const event = await ark.get_event(id);
+				const eventId: string = id
+					.replace("nostr:", "")
+					.split("'")[0]
+					.split(".")[0];
+				const cmd: string = await invoke("get_event", { id: eventId });
+				const event: Event = JSON.parse(cmd);
 				return event;
 			} catch (e) {
 				throw new Error(e);
--- a/packages/ark/src/hooks/usePreview.ts
+++ b/packages/ark/src/hooks/usePreview.ts
@@ -0,0 +1,24 @@
+import { useQuery } from "@tanstack/react-query";
+import { invoke } from "@tauri-apps/api/core";
+
+export function usePreview(url: string) {
+	const { isLoading, isError, data } = useQuery({
+		queryKey: ["url", url],
+		queryFn: async () => {
+			try {
+				const cmd = await invoke("fetch_opg", { url });
+				console.log(cmd);
+				return cmd;
+			} catch (e) {
+				throw new Error(e);
+			}
+		},
+		refetchOnWindowFocus: false,
+		refetchOnMount: false,
+		refetchOnReconnect: false,
+		staleTime: Infinity,
+		retry: 2,
+	});
+
+	return { isLoading, isError, data };
+}
--- a/packages/ark/src/hooks/useProfile.ts
+++ b/packages/ark/src/hooks/useProfile.ts
@@ -1,8 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
-import { useArk } from "./useArk";
+import { Metadata } from "@lume/types";
+import { invoke } from "@tauri-apps/api/core";

 export function useProfile(pubkey: string) {
-	const ark = useArk();
 	const {
 		isLoading,
 		isError,
@@ -11,8 +11,14 @@ export function useProfile(pubkey: string) {
 		queryKey: ["user", pubkey],
 		queryFn: async () => {
 			try {
-				const profile = await ark.get_profile(pubkey);
-				return profile;
+				const id = pubkey
+					.replace("nostr:", "")
+					.split("'")[0]
+					.split(".")[0]
+					.split(",")[0]
+					.split("?")[0];
+				const cmd: Metadata = await invoke("get_profile", { id });
+				return cmd;
 			} catch (e) {
 				throw new Error(e);
 			}
--- a/packages/ark/src/index.ts
+++ b/packages/ark/src/index.ts
@@ -1,5 +1,3 @@
 export * from "./ark";
-export * from "./context";
-export * from "./hooks/useArk";
 export * from "./hooks/useEvent";
 export * from "./hooks/useProfile";
--- a/packages/icons/index.ts
+++ b/packages/icons/index.ts
@@ -120,3 +120,7 @@ export * from "./src/local";
 export * from "./src/global";
 export * from "./src/infoCircle";
 export * from "./src/cancelCircle";
+export * from "./src/laurel";
+export * from "./src/quote";
+export * from "./src/key";
+export * from "./src/remote";
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -8,7 +8,7 @@
  },
  "devDependencies": {
    "@lume/tsconfig": "workspace:*",
-    "@types/react": "^18.2.61",
-    "typescript": "^5.3.3"
+    "@types/react": "^18.2.75",
+    "typescript": "^5.4.4"
  }
 }
--- a/packages/icons/src/arrowLeft.tsx
+++ b/packages/icons/src/arrowLeft.tsx
@@ -1,18 +1,13 @@
-export function ArrowLeftIcon(props: JSX.IntrinsicElements['svg']) {
+export function ArrowLeftIcon(props: JSX.IntrinsicElements["svg"]) {
  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    >
-      <path d="M8.83 6a30.23 30.23 0 0 0-5.62 5.406A.949.949 0 0 0 3 12m5.83 6a30.233 30.233 0 0 1-5.62-5.406A.949.949 0 0 1 3 12m0 0h18" />
+    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M10 5.75 3.75 12 10 18.25M4.5 12h15.75"
+      />
    </svg>
  );
 }
--- a/packages/icons/src/arrowRight.tsx
+++ b/packages/icons/src/arrowRight.tsx
@@ -5,8 +5,8 @@ export function ArrowRightIcon(props: JSX.IntrinsicElements["svg"]) {
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
-        strokeWidth="2"
-        d="m14 6 6 6-6 6m5-6H4"
+        strokeWidth="1.5"
+        d="M14 5.75 20.25 12 14 18.25M19.5 12H3.75"
      />
    </svg>
  );
--- a/packages/icons/src/cancel.tsx
+++ b/packages/icons/src/cancel.tsx
@@ -4,8 +4,8 @@ export function CancelIcon(props: JSX.IntrinsicElements["svg"]) {
      <path
        stroke="currentColor"
        strokeLinecap="round"
-        strokeWidth="2"
-        d="m5 5 14 14m0-14L5 19"
+        strokeWidth="1.5"
+        d="m4.75 4.75 14.5 14.5m0-14.5-14.5 14.5"
      />
    </svg>
  );
--- a/packages/icons/src/check.tsx
+++ b/packages/icons/src/check.tsx
@@ -1,24 +1,16 @@
 import { SVGProps } from "react";

 export function CheckIcon(
-	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
 ) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			fill="none"
-			viewBox="0 0 24 24"
-			{...props}
-		>
-			<path
-				stroke="currentColor"
-				strokeLinecap="round"
-				strokeLinejoin="round"
-				strokeWidth="2"
-				d="M5 12.713l5.017 5.012.4-.701a28.598 28.598 0 018.7-9.42L20 7"
-			/>
-		</svg>
-	);
+  return (
+    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="1.5"
+        d="M4.75 12.777 10 19.25l9.25-14.5"
+      />
+    </svg>
+  );
 }
--- a/packages/icons/src/chevronDown.tsx
+++ b/packages/icons/src/chevronDown.tsx
@@ -1,24 +1,17 @@
 import { SVGProps } from "react";

 export function ChevronDownIcon(
-	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
 ) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			fill="none"
-			viewBox="0 0 24 24"
-			{...props}
-		>
-			<path
-				stroke="currentColor"
-				strokeLinecap="round"
-				strokeLinejoin="round"
-				strokeWidth="2"
-				d="M6 9a30.618 30.618 0 005.49 5.817c.3.244.72.244 1.02 0A30.617 30.617 0 0018 9"
-			/>
-		</svg>
-	);
+  return (
+    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="m20 9-6.586 6.586a2 2 0 0 1-2.828 0L4 9"
+      />
+    </svg>
+  );
 }
--- a/packages/icons/src/expand.tsx
+++ b/packages/icons/src/expand.tsx
@@ -1,22 +1,17 @@
-import { SVGProps } from 'react';
+import { SVGProps } from "react";

-export function ExpandIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+export function ExpandIcon(
+  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      fill="none"
-      viewBox="0 0 24 24"
-      {...props}
-    >
+    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
      <path
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.5"
-        d="M13.75 3.75h5.75a.75.75 0 01.75.75v5.75m-16.5 3.5v5.75c0 .414.336.75.75.75h5.75M19.5 4.5L14 10m-4 4l-5.5 5.5"
-      ></path>
+        d="M5.75 12.75v3.5a2 2 0 0 0 2 2h3.5m1.5-12.5h3.5a2 2 0 0 1 2 2v3.5"
+      />
    </svg>
  );
 }
--- a/packages/icons/src/global.tsx
+++ b/packages/icons/src/global.tsx
@@ -2,12 +2,11 @@ export function GlobalIcon(props: JSX.IntrinsicElements["svg"]) {
  return (
    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
      <path
-        fill="currentColor"
-        d="M12 2a1 1 0 0 0 0 2 8 8 0 0 1 8 8 1 1 0 0 0 2 0c0-5.523-4.477-10-10-10Z"
-      />
-      <path
-        fill="currentColor"
-        d="M12 5a1 1 0 0 0 0 2 5 5 0 0 1 5 5 1 1 0 0 0 2 0 7 7 0 0 0-7-7ZM7.39 6.977a2.9 2.9 0 0 0-2.258-.857c-.83.064-1.632.52-2.065 1.38-1.89 3.749-1.27 8.44 1.862 11.571 3.132 3.132 7.822 3.751 11.57 1.862a2.494 2.494 0 0 0 1.38-2.066 2.9 2.9 0 0 0-.856-2.258L12.914 12.5l.793-.793a1 1 0 0 0-1.414-1.414l-.793.793-4.11-4.11Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M19.778 4.222 4.222 19.778M21.25 12a9.25 9.25 0 1 1-18.5 0 9.25 9.25 0 0 1 18.5 0Zm-2.734 6.516c-1.2 1.2-5.089-.745-8.688-4.344-3.598-3.599-5.543-7.488-4.344-8.688 1.2-1.2 5.09.745 8.688 4.344 3.599 3.599 5.544 7.489 4.344 8.688Z"
      />
    </svg>
  );
--- a/packages/icons/src/horizontalDots.tsx
+++ b/packages/icons/src/horizontalDots.tsx
@@ -1,12 +1,16 @@
 export function HorizontalDotsIcon(props: JSX.IntrinsicElements["svg"]) {
  return (
    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm8.25 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-16.5 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+      />
      <path
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
-        strokeWidth="2"
-        d="M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm8 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM4 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+        strokeWidth="1.5"
+        d="M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm8.25 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-16.5 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
      />
    </svg>
  );
--- a/packages/icons/src/key.tsx
+++ b/packages/icons/src/key.tsx
@@ -0,0 +1,13 @@
+export function KeyIcon(props: JSX.IntrinsicElements["svg"]) {
+  return (
+    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M13 12.815a7.68 7.68 0 0 0-1-.065c-3.448 0-6.05 2.231-7.07 5.364-.363 1.116.58 2.136 1.753 2.136H14M15.75 6.5a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Zm0 7.5a2.25 2.25 0 1 1 3.5 1.871V17l-.5.936.5 1.032V20L18 21l-1.25-1v-4.129a2.248 2.248 0 0 1-1-1.871Z"
+      />
+    </svg>
+  );
+}
--- a/packages/icons/src/laurel.tsx
+++ b/packages/icons/src/laurel.tsx
@@ -0,0 +1,13 @@
+export function LaurelIcon(props: JSX.IntrinsicElements["svg"]) {
+  return (
+    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M9.405 18.105c-1.573 1.336-3.136 1.17-4.712-.5 3.665-3.643 8.229 1.637 4.189 3.645m5.713-3.145c1.573 1.336 3.136 1.17 4.712-.5-3.665-3.643-8.229 1.637-4.189 3.645m-8.333-6.084c-.584-2.476-2.086-3.338-4.535-2.603.584 2.476 2.086 3.338 4.535 2.603Zm-1.21-3.464c.74-2.434-.127-3.927-2.617-4.508-.74 2.435.127 3.928 2.618 4.508ZM6.719 2.75c-2.141 1.393-2.442 3.09-.91 5.127 2.141-1.393 2.442-3.09.91-5.127Zm10.497 12.416c.584-2.476 2.086-3.338 4.535-2.603-.584 2.476-2.086 3.338-4.535 2.603Zm1.21-3.464c-.74-2.434.127-3.927 2.617-4.508.74 2.435-.127 3.928-2.618 4.508ZM17.281 2.75c2.141 1.393 2.442 3.09.91 5.127-2.141-1.393-2.442-3.09-.91-5.127Z"
+      />
+    </svg>
+  );
+}
--- a/Show More
+++ b/Show More